/* /websites: Websites & Sales Funnels page (shares tokens + components with ../styles.css) */
.ws #hdr{position:sticky;top:0}
.ws main{position:relative}

/* hero */
.ws-hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,110px)}
.ws-grid-bg{position:absolute;inset:-10% -10% 0;background-image:radial-gradient(rgba(255,255,255,.09) 1.3px,transparent 1.7px);background-size:30px 30px;mask:radial-gradient(70% 70% at 70% 40%,#000,transparent);animation:wsdrift 40s linear infinite}
.ws-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 75% 35%,rgba(215,25,42,.2),transparent 70%)}
@keyframes wsdrift{to{background-position:30px 60px}}
.ws-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.ws-h1{font:900 clamp(36px,4.3vw,62px)/1.02 var(--disp);font-stretch:108%;letter-spacing:-.025em}
.ws-h1 .red{color:var(--red2)}
.ws-sub{margin:22px 0 30px;font-size:clamp(16px,1.4vw,19px);color:rgba(243,241,236,.8);max-width:560px}
.ws-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ws-device{position:relative;padding-bottom:40px}
.ws-browser{border-radius:16px;overflow:hidden;background:var(--carbon);border:1px solid var(--line2);box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(215,25,42,.12)}
.ws-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#101016;border-bottom:1px solid var(--line)}
.ws-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.ws-bar i:first-child{background:#e0443e}.ws-bar i:nth-child(2){background:#dea123}.ws-bar i:nth-child(3){background:#1aab29}
.ws-bar span{margin-left:12px;flex:1;padding:5px 12px;border-radius:7px;background:var(--ink);font:500 12px var(--mono);color:var(--mute);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ws-screen,.ws-phone-screen{position:relative;aspect-ratio:16/10;background:var(--ink2)}
.ws-screen img,.ws-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s}
.ws-screen img.on,.ws-phone-screen img.on{opacity:1}
.ws-phone{position:absolute;right:-14px;bottom:0;width:26%;border-radius:22px;padding:7px;background:#0d0d12;border:1px solid var(--line2);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.ws-phone-screen{aspect-ratio:9/19;border-radius:16px;overflow:hidden}

/* services */
.ws-svcs{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ws-svc{grid-column:span 2;display:flex;flex-direction:column;padding:28px;border-radius:18px;background:var(--carbon);border:1px solid var(--line);transition:transform .3s,border-color .3s}
.ws-svc:nth-child(4),.ws-svc:nth-child(5){grid-column:span 3}
.ws-svc:hover{transform:translateY(-5px);border-color:rgba(215,25,42,.5)}
.ws-svc-hi{background:radial-gradient(90% 120% at 100% 0%,rgba(215,25,42,.2),transparent 60%),var(--carbon);border-color:rgba(215,25,42,.45)}
.ws-ic svg{width:44px;height:44px;fill:none;stroke:var(--red2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.ws-ic .f{fill:var(--red2);stroke:none}
.ws-svc h3{font:800 23px/1.1 var(--disp);font-stretch:108%;margin-bottom:10px}
.ws-svc p{color:var(--mute);font-size:15.5px}
.ws-svc ul{list-style:none;margin:16px 0 0;display:grid;gap:7px;font-size:14.5px}
.ws-svc li{display:flex;gap:10px;align-items:baseline}
.ws-svc li::before{content:"";width:7px;height:7px;border-radius:50%;border:2px solid var(--red);flex:none;transform:translateY(-1px)}
.ws-more{margin-top:18px;font:600 13px var(--mono);color:var(--red2)}
.ws-more:hover{color:#fff}

/* AI agent demo */
.ws-agent{background:var(--ink2);border-block:1px solid var(--line)}
.ws-agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.chat{border-radius:22px;background:var(--carbon);border:1px solid var(--line2);box-shadow:0 30px 80px -30px rgba(0,0,0,.9);overflow:hidden;display:flex;flex-direction:column;height:560px}
.chat-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:#101016}
.chat-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#1f3a5f;color:#fff;font:800 14px var(--body)}
.chat-top b{display:block;font-size:15px}
.chat-top small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
.chat-top small i{width:7px;height:7px;border-radius:50%;background:#2fd17b}
.chat-demo{margin-left:auto;font:600 10.5px var(--mono);letter-spacing:.12em;padding:4px 8px;border-radius:6px;border:1px solid var(--line2);color:var(--mute)}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.45;animation:msgin .35s ease-out}
.msg.bot{align-self:flex-start;background:#22222b;border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:5px}
.msg.card{background:var(--bone);color:var(--ink);display:flex;gap:12px;align-items:center}
.msg.card b{display:block}
.msg.card small{color:#55545e}
.msg.card svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;border-radius:16px;background:#22222b}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 18px;border-top:1px solid var(--line);min-height:68px}
.chat-chips button{padding:9px 14px;border-radius:999px;border:1px solid rgba(215,25,42,.55);background:rgba(215,25,42,.1);font:600 13.5px var(--body);color:var(--bone);transition:background .2s}
.chat-chips button:hover{background:var(--red)}

/* portfolio */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.work-grid .work{grid-column:span 3}
.work-grid .work-lg{grid-column:span 3}
.work{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--carbon);border:1px solid var(--line);transition:transform .35s,border-color .35s}
.work:hover{transform:translateY(-6px);border-color:rgba(215,25,42,.55)}
.work-img{aspect-ratio:16/10;overflow:hidden;background:var(--ink2)}
.work-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s}
.work:hover .work-img img{transform:scale(1.04)}
.work-meta{padding:20px 22px 22px}
.work-tag{font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red2)}
.work-meta h3{font:800 22px var(--disp);font-stretch:108%;margin:8px 0 6px}
.work-meta p{color:var(--mute);font-size:15px}
.work-note{margin-top:18px}

.timeline.lit-all li{border-color:var(--red)}

@media (max-width:1100px){.ws-svcs{grid-template-columns:repeat(2,1fr)}.ws-svc,.ws-svc:nth-child(4),.ws-svc:nth-child(5){grid-column:span 1}}
@media (max-width:860px){
  .ws-hero-in,.ws-agent-grid{grid-template-columns:1fr}
  .ws-device{max-width:620px}
  .chat{height:520px}
}
@media (max-width:640px){
  .ws-svcs,.work-grid{grid-template-columns:1fr}
  .work-grid .work,.work-grid .work-lg{grid-column:auto}
  .ws-phone{right:-4px;width:30%}
  .ws-ctas .btn{flex:1 1 100%}
}