/* ============================================================
   Netswick design system — hero v6: open-field orchestration · hall of fame · spell cursor
   Fonts: Gabarito (display) · Onest (body/UI), self-hosted variable
   ============================================================ */

@font-face{
  font-family:'Gabarito';
  src:url('fonts/gabarito.woff2') format('woff2-variations');
  font-weight:400 900;font-display:swap;
}
@font-face{
  font-family:'Onest';
  src:url('fonts/onest.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap;
}

:root{
  --bg-deep:#040818;
  --bg-mid:#070d22;
  --bg-glow:#0e1f4a;
  --card-a:#0f1a35;
  --card-b:#0a132a;
  --line:rgba(96,165,250,.14);
  --txt:#e2e8f0;
  --txt-soft:#94a3b8;
  --txt-dim:#64748b;
  --cy:#7dd3fc;
  --cy-hot:#38bdf8;
  --blue:#2563eb;
  --accent-grad:linear-gradient(120deg,#60a5fa 0%,#22d3ee 55%,#008aff 100%);
  --font-d:'Gabarito',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Onest',ui-sans-serif,system-ui,sans-serif;
  --ease-pop:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{
  background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--bg-glow) 0%,var(--bg-mid) 45%,var(--bg-deep) 100%);
  color:var(--txt);font-family:var(--font-b);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;
}
body{position:relative;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
@media (pointer:fine){
  body.cur-on, body.cur-on a, body.cur-on button{cursor:none}
}

/* ---------- fixed background ---------- */
.bg-orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.bg-orb.a{width:720px;height:720px;background:radial-gradient(circle,#1e40af 0%,transparent 70%);top:-220px;left:50%;transform:translateX(-50%);opacity:.55}
.bg-orb.b{width:560px;height:560px;background:radial-gradient(circle,#0369a1 0%,transparent 70%);bottom:-220px;left:-160px;opacity:.32}
.bg-orb.c{width:520px;height:520px;background:radial-gradient(circle,#2563eb 0%,transparent 70%);bottom:-200px;right:-160px;opacity:.32}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(96,165,250,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 70%)}

/* ---------- nav: bare brand · 3D CTA ---------- */
.nav{position:sticky;top:0;z-index:60;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1360px;margin:0 auto}
.nav-brand{display:inline-flex;align-items:center;gap:4px}
.nav-brand img{width:36px;height:36px;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(37,99,235,.55))}
.nav-brand img,.ft-brand img{animation:nswFlip 8s var(--ease-pop) infinite;backface-visibility:visible}
@keyframes nswFlip{0%,46%{transform:perspective(340px) rotateX(0deg)}54%,92%{transform:perspective(340px) rotateX(180deg)}100%{transform:perspective(340px) rotateX(360deg)}}
@media (prefers-reduced-motion:reduce){.nav-brand img,.ft-brand img{animation:none;transform:none}}
.nav-brand span{font-family:var(--font-d);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(2,6,18,.8)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{position:relative;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;
  color:var(--txt-soft);letter-spacing:.01em;transition:color .2s ease}
.nav-links a i{font-style:normal;color:rgba(56,189,248,.7);margin-right:1px}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;border-radius:50%;
  background:var(--cy-hot);box-shadow:0 0 8px var(--cy-hot);transform:translateX(-50%) scale(0);transition:transform .25s var(--ease-pop)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:translateX(-50%) scale(1)}

/* terminal buttons */
.tbtn{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.01em;
  color:#a9cdf5;padding:13px 22px;border-radius:7px;
  background:linear-gradient(180deg,rgba(13,25,52,.92),rgba(6,12,28,.94));
  border:1px solid rgba(96,165,250,.38);
  box-shadow:inset 0 1px 0 rgba(148,184,255,.14),0 14px 34px -14px rgba(0,0,0,.8);
  transition:transform .18s var(--ease-pop),border-color .2s ease,box-shadow .25s ease,color .2s ease;cursor:pointer}
.tbtn .tp{color:#38bdf8;font-weight:800}
.tbtn .tc{display:inline-block;width:7px;height:14px;margin-left:2px;background:rgba(56,189,248,.85);
  box-shadow:0 0 8px rgba(56,189,248,.7)}
.tbtn::before,.tbtn::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  transition:width .2s ease,height .2s ease,border-color .2s ease}
.tbtn::before{top:-3px;left:-3px;border-top:2px solid rgba(125,211,252,.8);border-left:2px solid rgba(125,211,252,.8);border-top-left-radius:4px}
.tbtn::after{bottom:-3px;right:-3px;border-bottom:2px solid rgba(125,211,252,.8);border-right:2px solid rgba(125,211,252,.8);border-bottom-right-radius:4px}
.tbtn:hover{transform:translateY(-2px);color:#fff;border-color:rgba(125,211,252,.65);
  box-shadow:inset 0 1px 0 rgba(148,184,255,.2),0 16px 40px -14px rgba(37,99,235,.6)}
.tbtn:hover::before,.tbtn:hover::after{width:15px;height:15px;border-color:#7dd3fc}
.tbtn:active{transform:translateY(0)}
.tbtn:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.nav-cta::before,.nav-cta::after{display:none}
.tbtn.primary{color:#fff;
  background:linear-gradient(180deg,#1b4fb8,#123a86 55%,#0e2f6e);
  border:1px solid rgba(125,211,252,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 26px -6px rgba(56,189,248,.55),0 16px 38px -14px rgba(37,99,235,.75)}
.tbtn.primary .tp{color:#7dd3fc}
.tbtn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 34px -6px rgba(56,189,248,.8),0 18px 44px -14px rgba(37,99,235,.85)}

/* ============================================================
   HERO — vertically centered cinema
   ============================================================ */
.hero{position:relative;z-index:1;min-height:calc(108vh - 82px);min-height:calc(108svh - 82px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(430px,1fr) minmax(560px,1.3fr);
  align-items:center;gap:20px;width:100%;max-width:1460px;margin:auto;padding:6px 12px 0 44px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:590px;container-type:inline-size}
.spot{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(112deg,rgba(56,189,248,.06) 0%,transparent 42%),
    radial-gradient(ellipse 120% 90% at 60% 42%,transparent 52%,rgba(2,6,18,.6) 100%)}
#rain{position:absolute;inset:0;z-index:0;pointer-events:none}

/* trust line above headline — bare */
.trust-line{display:flex;align-items:center;gap:11px;margin-bottom:20px;
  opacity:0;transform:translateY(-10px);animation:heroIn .7s var(--ease-pop) .1s forwards}
.stars{display:flex;gap:6px;overflow:visible}
.stars svg{width:22px;height:22px;overflow:visible}
.stars path{fill:url(#starGrad);fill-opacity:0;stroke:url(#starGrad);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;
  filter:drop-shadow(0 0 7px rgba(56,189,248,.65)) drop-shadow(0 4px 14px rgba(37,99,235,.5))}
.stars.lit path{animation:starDraw .5s var(--ease-pop) forwards,starFill .45s ease .45s forwards}
.stars svg:nth-child(1) path{animation-delay:.3s}
.stars svg:nth-child(2) path{animation-delay:.45s}
.stars svg:nth-child(3) path{animation-delay:.6s}
.stars svg:nth-child(4) path{animation-delay:.75s}
.stars svg:nth-child(5) path{animation-delay:.9s}
@keyframes starDraw{to{stroke-dashoffset:0}}
@keyframes starFill{to{fill-opacity:.95}}
.trust-txt{font-size:13px;font-weight:600;color:#bfdbfe;letter-spacing:.02em}
.trust-txt b{font-family:var(--font-d);font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

/* callout — audience line, same language as the rest */
.callout{margin-bottom:18px;
  opacity:0;transform:translateY(-8px);animation:heroIn .7s var(--ease-pop) .16s forwards}
.callout span{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#bfdbfe;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(148,184,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.callout span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cy-hot);box-shadow:0 0 8px var(--cy-hot)}

/* headline */
.hl{font-family:var(--font-d);font-weight:800;letter-spacing:-.026em;line-height:1.06;margin-bottom:20px;
  opacity:0;transform:translateY(14px);animation:heroIn .8s var(--ease-pop) .22s forwards}
.hl .hl-main{display:block;font-size:clamp(36px,3.9vw,54px);color:#fff;
  filter:drop-shadow(0 18px 40px rgba(2,6,18,.7))}
.hl .hl-main .grad{background:linear-gradient(180deg,#fff 0%,#cbd5e1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hl .hl-caps{letter-spacing:.01em}
.q-rot{display:inline-block;position:relative;color:#7dd3fc;
  text-shadow:0 0 22px rgba(56,189,248,.45)}
.q-rot .q-txt{display:inline-block}
.q-rot .q-txt.out{animation:qOut .28s ease forwards}
.q-rot .q-txt.in{animation:qIn .4s var(--ease-pop) forwards}
@keyframes qOut{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
@keyframes qIn{from{opacity:0;transform:translateY(11px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.rot-line{display:block;margin-top:9px;white-space:nowrap}
.hl-dot{font-size:clamp(36px,3.9vw,54px);color:#fff}

/* coded rotator */
/* --rlen = character count of the current word (set per scene in site.js).
   The line is nowrap, so long words ("environmental graphics") would otherwise
   run past the copy column. Shrink to fit whenever the word can't sit at full size. */
.rot{position:relative;display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;letter-spacing:-.02em;padding:2px 6px;
  font-size:min(clamp(26px,2.9vw,40px),calc((100cqw - 6px) / (.6 * var(--rlen,14) + 2.9)))}
.rot .bt{color:rgba(125,211,252,.55);font-weight:400}
.rot .rot-txt{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;z-index:1}
.rot .rot-caret{display:inline-block;width:.52em;height:1.02em;margin-left:3px;vertical-align:-.12em;
  background:var(--cy-hot);box-shadow:0 0 12px rgba(56,189,248,.8);
  animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.rot .rot-sel{position:absolute;inset:2px 0;z-index:0;border-radius:6px;
  background:linear-gradient(90deg,rgba(37,99,235,.32),rgba(34,211,238,.22));
  border:1px solid rgba(96,165,250,.35);
  transform:scaleX(0);transform-origin:left center;pointer-events:none}
.rot .rot-sel.on{animation:selSweep .5s var(--ease-pop) forwards}
@keyframes selSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hl-sub{max-width:560px;font-size:clamp(14.5px,1.32vw,16.5px);line-height:1.62;color:var(--txt-soft);margin-bottom:22px;
  opacity:0;transform:translateY(14px);animation:heroIn .8s var(--ease-pop) .34s forwards}

.hero-ctas{display:flex;justify-content:flex-start;align-items:center;gap:16px;flex-wrap:wrap;
  opacity:0;transform:translateY(14px);animation:heroIn .8s var(--ease-pop) .46s forwards}
.hero-micro{margin-top:15px;font-size:12.5px;color:var(--txt-dim);letter-spacing:.01em;
  opacity:0;animation:heroIn .8s var(--ease-pop) .6s forwards}
.hero-micro b{color:var(--txt-soft);font-weight:600}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}

/* ============================================================
   OPEN FIELD — three AIs orchestrating live
   ============================================================ */
.field{position:relative;z-index:2;width:calc(100% + 30px);height:680px;justify-self:stretch;margin-right:-30px;
  opacity:0;animation:heroIn 1s var(--ease-pop) .35s forwards}
.f-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f-links path{fill:none;stroke:rgba(96,165,250,.16);stroke-width:1.2}
.f-links path.fpulse{stroke:url(#accGrad);stroke-width:1.8;stroke-dasharray:22 460;stroke-dashoffset:482;
  filter:drop-shadow(0 0 5px rgba(56,189,248,.6));animation:fpTravel 3.8s linear infinite}
@keyframes fpTravel{to{stroke-dashoffset:0}}

.f-ai{position:absolute;left:var(--fx);top:var(--fy);display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  animation:aiDrift 8s ease-in-out infinite alternate}
.f-ai:nth-child(3){animation-delay:-3s}
.f-ai:nth-child(4){animation-delay:-5.5s}
@keyframes aiDrift{from{transform:translate(0,-6px)}to{transform:translate(5px,6px)}}
.f-ava{position:relative;width:70px;height:70px;border-radius:44% 56% 50% 50% / 52% 46% 54% 48%;display:grid;place-items:center;
  background:linear-gradient(150deg,#10284d,#091a33);
  border:1px solid rgba(96,165,250,.4);
  box-shadow:inset 0 1px 0 rgba(148,184,255,.2),0 0 30px -6px rgba(56,189,248,.55),0 18px 40px -16px rgba(0,0,0,.8)}
.f-ava::after{content:"";position:absolute;inset:-8px;border-radius:inherit;border:1px solid rgba(56,189,248,.22);
  animation:aiPing 3.2s ease-out infinite}
.f-ai:nth-child(3) .f-ava::after{animation-delay:1.1s}
.f-ai:nth-child(4) .f-ava::after{animation-delay:2.2s}
@keyframes aiPing{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.32);opacity:0}}
.f-ava img{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(56,189,248,.5))}
.f-ai.busy .f-ava{animation:avaWork .55s ease-in-out infinite alternate;border-color:rgba(56,189,248,.75);
  box-shadow:inset 0 1px 0 rgba(148,184,255,.25),0 0 40px -6px rgba(56,189,248,.8),0 18px 40px -16px rgba(0,0,0,.8)}
@keyframes avaWork{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(4deg) translateY(-3px)}}
.f-name{font-family:var(--font-d);font-size:13.5px;font-weight:700;color:#e8f1ff;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(2,6,18,.9)}
.f-name i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5f7cae;margin-left:5px}
.f-code{width:225px;height:66px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;line-height:1.55;color:rgba(159,196,248,.75);white-space:pre;
  mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  text-shadow:0 0 8px rgba(56,189,248,.25)}
.f-code .hi{color:#7dd3fc}


/* free-floating artifact stage — steps build on each other */
.f-stage{position:absolute;left:45%;top:46%;transform:translate(-50%,-50%);width:560px;z-index:3;
  display:flex;flex-direction:column;gap:13px;transition:opacity .45s ease}
.f-stage.clear{opacity:0}
.fart{display:none;opacity:0}
.fart.in{display:block;animation:fartIn .55s var(--ease-pop) forwards}
@keyframes fartIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#faEmail .gmail{transition:opacity .2s ease}
#faEmail.qs .gmail{opacity:.3}
.fart.past{opacity:.68;filter:saturate(.85);transform:scale(.965);
  transition:opacity .5s ease,transform .55s var(--ease-pop),filter .5s ease}
.fart.past:hover{opacity:.92}

.f-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc}
.f-tag .ft-dot{width:6px;height:6px;border-radius:50%;background:var(--cy-hot);box-shadow:0 0 9px var(--cy-hot);
  animation:dotPulse 1.2s ease infinite}
@keyframes dotPulse{50%{opacity:.4}}

/* prospects showing the signals */
.sig-rows{display:flex;flex-direction:column;gap:8px}
.sig-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#cbd5e1;padding:8px 11px;border-radius:12px;
  background:linear-gradient(180deg,rgba(30,58,138,.24),rgba(10,19,42,.66));
  border:1px solid rgba(96,165,250,.22);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  opacity:0;transform:translateX(-12px)}
.sig-row.in{animation:rowIn .45s var(--ease-pop) forwards}
@keyframes rowIn{to{opacity:1;transform:none}}
.sp-ava{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(56,189,248,.35),0 6px 14px -6px rgba(0,0,0,.8)}
.sp-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-id b{font-size:12.5px;color:#fff;font-weight:700;white-space:nowrap}
.sp-id > span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#8aa5cc;white-space:nowrap}
.sp-co{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:4px;
  font-size:8px;font-weight:800;font-style:normal;color:#fff;background:var(--coc,#2563eb)}
.sig-row .sr-sig{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.sig-row .sr-sig b{font-size:11px;color:#7dd3fc;font-weight:700;white-space:nowrap}
.sig-row .sr-sig span{font-size:9.5px;color:#64748b;font-family:ui-monospace,Menlo,monospace}
.fart.past .sig-row{padding:5px 10px}
.fart.past .sp-ava{width:27px;height:27px}

/* generated artifact */
.fs-art-wrap{position:relative;width:100%;height:238px;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85),0 10px 44px -12px rgba(37,99,235,.4);
  transition:height .5s var(--ease-pop)}
.fart.past .fs-art-wrap{height:118px}
.m-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity .4s ease,transform .7s var(--ease-pop);clip-path:inset(0 0 100% 0)}
.m-art.show{opacity:1;transform:scale(1);animation:mockReveal 1.5s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes mockReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}
.m-scan{position:absolute;left:0;right:0;top:-14%;height:12%;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(125,211,252,.45),transparent)}
.m-scan.go{animation:mockScan 1.5s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes mockScan{0%{opacity:1;top:-14%}95%{opacity:1}100%{opacity:0;top:100%}}
.m-art.a-merch{object-position:center 28%}
.m-tag{position:absolute;right:9px;bottom:9px;z-index:3;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#7dd3fc;
  background:rgba(7,13,34,.92);border:1px solid rgba(56,189,248,.4);padding:5px 10px;border-radius:7px}
.m-tag.done{color:#5eead4;border-color:rgba(94,234,212,.45)}

/* inline mockup inside the email */
.gm-inline{position:relative;margin:0;height:0;opacity:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(96,165,250,.24);box-shadow:0 26px 55px -24px rgba(0,0,0,.85),0 10px 36px -12px rgba(37,99,235,.35);
  transition:height .6s var(--ease-pop),opacity .45s ease,margin .4s ease}
.gm-inline.show{height:225px;opacity:1;margin:4px 8px 10px}

/* modern compose */
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
.gmail{position:relative;border-radius:0;overflow:visible;background:none;border:0;box-shadow:none}
.fart{position:relative}
#faEmail::before{content:"";position:absolute;inset:-46px -60px;border-radius:40px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 65% at 50% 40%,rgba(37,99,235,.14),transparent 70%)}
@keyframes gaSpin{to{--ga:1turn}}
.gm-top{display:none}
.gm-title{font-family:var(--font-b);font-size:13px;font-weight:700;color:#fff}
.gm-icns{display:inline-flex;gap:14px}
.gm-icns i{font-style:normal;font-size:11px;color:#64748b;line-height:1}
.gm-row{display:flex;align-items:center;gap:9px;padding:8px 0;border:0;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#7ea2d4}
.gm-chip{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#dbeafe;background:rgba(59,130,246,.14);
  border:1px solid rgba(96,165,250,.3);border-radius:999px;padding:4px 14px;font-weight:600}
.gm-pav{width:19px;height:19px;border-radius:50%;object-fit:cover}
.gm-subj{padding:10px 0 2px;border-top:1px solid rgba(96,165,250,.2);font-family:var(--font-d);font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff;min-height:35px;
  mask-image:linear-gradient(90deg,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent)}
.gm-body{padding:8px 0 4px;font-size:14px;color:#a9bcd8;line-height:1.7;min-height:48px;max-width:58ch}
.gm-body2{padding:2px 0 10px;font-size:14px;color:#a9bcd8;line-height:1.7;min-height:22px;max-width:58ch}
.gm-foot{position:relative;display:flex;align-items:center;gap:11px;padding:6px 0 2px}
.gm-send{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:12px;font-size:13.5px;border:0;
  font-family:var(--font-b);font-size:12.5px;font-weight:700;color:#fff;cursor:default;
  background:#1d5fd6;
  box-shadow:0 1px 2px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s ease,background .2s ease}
.gm-kbd{font-family:var(--font-b);font-size:10px;font-weight:700;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.16);border-radius:5px;padding:2px 6px;letter-spacing:.04em}
.gm-send.press{transform:scale(.94);background:#174db3}
.gm-send.flew .gm-kbd{opacity:.5}
.em-sent{margin-left:auto;font-size:11.5px;font-weight:800;color:#5eead4;opacity:0;transform:translateY(4px);
  transition:opacity .35s ease,transform .35s var(--ease-pop)}
.em-sent.in{opacity:1;transform:none}

/* hubspot deal card — modern */
#faClosed{align-self:flex-end}
.hs-min{position:relative;display:inline-flex;align-items:center;gap:13px;padding:8px 6px}
.fart.in .hs-min{animation:hsPop .75s cubic-bezier(.3,1.6,.35,1) both}
@keyframes hsPop{0%{opacity:0;transform:scale(.5) translateY(10px)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
.hs-min::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:2px solid rgba(52,211,153,.7)}
.fart.in .hs-min::before{animation:hsRing .8s .25s cubic-bezier(.2,.7,.3,1) both}
@keyframes hsRing{0%{opacity:1;width:30px;height:30px}100%{opacity:0;width:170px;height:90px;border-radius:40px}}
.hs-min img{width:28px;height:28px;filter:drop-shadow(0 0 14px rgba(255,122,89,.65))}
.fart.in .hs-min img{animation:hsLogo 1.2s .3s ease-in-out infinite alternate}
@keyframes hsLogo{from{transform:rotate(-5deg) scale(1)}to{transform:rotate(5deg) scale(1.08)}}
.hs-min .deal{font-family:ui-monospace,Menlo,monospace;font-size:25px;font-weight:800;color:#34d399;
  text-shadow:0 0 22px rgba(52,211,153,.65);font-variant-numeric:tabular-nums}

/* ============================================================
   CLIENTS — in-hero hall
   ============================================================ */
.hall{position:relative;z-index:3;max-width:1320px;width:100%;margin:0 auto;padding:0 24px 190px;
  opacity:0;animation:heroIn .9s var(--ease-pop) .7s forwards}
.hall-label{text-align:center;margin-bottom:18px}
.hall-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#7dd3fc}
.hall-kicker::before,.hall-kicker::after{content:"";width:48px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(125,211,252,.5))}
.hall-kicker::after{background:linear-gradient(90deg,rgba(125,211,252,.5),transparent)}
.hall-row{position:relative;display:flex;justify-content:center;align-items:center;gap:78px;flex-wrap:wrap;
  padding:8px 6px 6px}
.hf{position:relative;display:grid;place-items:center;
  animation:hfFloat 6s ease-in-out infinite alternate;
  transition:transform .3s var(--ease-pop)}
.hf:nth-child(2n){animation-delay:-2.4s}
.hf:nth-child(3n){animation-delay:-4s}
@keyframes hfFloat{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.hf img{height:27px;width:auto;max-width:170px;object-fit:contain;opacity:.96;
  filter:drop-shadow(0 10px 26px rgba(37,99,235,.5))}
.hf.mark img{height:48px}
.hf::after{content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:120%;height:22px;
  background:radial-gradient(ellipse,rgba(56,189,248,.25),transparent 70%);filter:blur(7px);pointer-events:none}
.hf:hover{transform:translateY(-5px) scale(1.06)}
.cs-tag{position:absolute;top:-16px;right:-24px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  padding:3.5px 9px;border-radius:6px;white-space:nowrap;
  background:linear-gradient(135deg,#38bdf8 0%,#1d4ed8 100%);
  border:1px solid rgba(186,230,253,.5);
  box-shadow:0 6px 14px -6px rgba(37,99,235,.8),inset 0 1px 0 rgba(255,255,255,.4);
  transform:rotate(4deg)}
.aw-tag{position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;
  font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fde68a;white-space:nowrap;
  padding:3px 9px;border-radius:6px;
  background:rgba(120,86,10,.22);border:1px solid rgba(253,230,138,.32);
  text-shadow:0 0 8px rgba(253,230,138,.4)}
.aw-tag::before{content:"🏆";font-size:8.5px}

/* ============================================================
   SPELL CURSOR
   ============================================================ */
.cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;display:none}
@media (pointer:fine){.cursor{display:block}}
.cur-core{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:#e0f2fe;box-shadow:0 0 10px 2px rgba(125,211,252,.9),0 0 24px 6px rgba(56,189,248,.5)}
.cur-halo{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(125,211,252,.5);
  background:radial-gradient(circle,rgba(56,189,248,.14),transparent 65%);
  transition:transform .25s var(--ease-pop),border-color .25s ease}
.cursor.hot .cur-halo{transform:scale(1.7);border-color:rgba(34,211,238,.9)}
.spark{position:fixed;z-index:9998;pointer-events:none;width:5px;height:5px;
  background:#a5e0fc;border-radius:50%;box-shadow:0 0 8px rgba(125,211,252,.9);
  animation:sparkFade .6s ease-out forwards}
@keyframes sparkFade{to{opacity:0;transform:translateY(9px) scale(.3)}}
.burst{position:fixed;z-index:9998;pointer-events:none}
.burst .ring{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(125,211,252,.85);
  animation:burstRing .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes burstRing{to{transform:scale(2.4);opacity:0;border-width:1px}}
.burst .bstar{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:#e0f2fe;box-shadow:0 0 10px rgba(56,189,248,1);
  animation:bstarFly .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bstarFly{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .hero-grid{grid-template-columns:1fr;gap:20px;padding:20px 24px 0}
  .hero-copy{max-width:640px}
  .field{height:640px;max-width:640px;margin:0 auto}
}
@media (max-width:860px){
  .nav-links{display:none}
  .hl-sub{font-size:14.5px}
}
@media (max-width:640px){
  .hero-grid{padding:12px 18px 0}
  .hl .hl-main{font-size:clamp(30px,8.6vw,38px)}
  .hl-dot{font-size:clamp(30px,8.6vw,38px)}
  .rot{font-size:min(clamp(20px,6vw,27px),calc((100cqw - 6px) / (.6 * var(--rlen,14) + 2.9)))}
  .hall-row{gap:32px 38px}
  .hf img{height:18px;max-width:118px}
  .hf.mark img{height:32px}
  .field{height:640px}
  .f-stage{width:min(350px,90vw)}
  .f-code{width:160px;height:48px;font-size:9px}
  .f-ava{width:50px;height:50px}
  .f-ava img{width:24px;height:24px}
  .fs-art-wrap{height:180px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .trust-line,.hl,.hl-sub,.hero-ctas,.hero-micro,.machine,.hall{opacity:1!important;transform:none!important}
  .stars path{stroke-dashoffset:0!important}
  .rot .rot-sel{transform:scaleX(1)}
  .fart{display:block;opacity:1;transform:none}
  .f-ai{opacity:1}
  #rain{display:none}
  .cursor{display:none!important}
  body.cur-on,body.cur-on a{cursor:auto}
}

/* unique button icons */
.bi{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.bi .bi-fill{fill:currentColor;stroke:none}
.btn3d .bi{width:16px;height:16px}

/* ============================================================
   LIGHT WORLD — everything after the hero
   ============================================================ */
.light-world{position:relative;z-index:1;background:#e9f1fe}


}
/* cursor visible in both worlds */
.cursor{mix-blend-mode:normal}
.cur-core{background:#38bdf8;box-shadow:0 0 10px 2px rgba(56,189,248,.9),0 0 24px 6px rgba(37,99,235,.45)}
.cur-halo{border-color:rgba(37,99,235,.45)}

/* ============================================================
   DECK MODE — fullpage slides + code-erase wipe
   ============================================================ */
.slide.lw{background:#e9f1fe}
body.deckmode{overflow:hidden;height:100vh}
body.deckmode .slide{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;
  visibility:hidden;pointer-events:none;z-index:1}
body.deckmode .slide.active{visibility:visible;pointer-events:auto;z-index:2}
body.deckmode .slide .hero{min-height:calc(100vh - 82px)}
body.deckmode .s-how{display:flex;align-items:center}
body.deckmode .s-how .how{width:100%;padding-top:60px;padding-bottom:60px}
.s-how .how-head{margin-bottom:40px}

.wipefx{position:fixed;inset:0;z-index:900;pointer-events:none;display:none}
.wipefx.on{display:block}
.wipefx i{position:absolute;left:0;right:0;transform:scaleX(0);background:#e9f1fe}
.wipefx.dark i{background:#040818}
.wipefx i::after{content:"";position:absolute;top:0;bottom:0;right:-3px;width:4px;
  background:linear-gradient(180deg,#7dd3fc,#2563eb);
  box-shadow:0 0 20px rgba(56,189,248,.95);opacity:0}
.wipefx.cover i{transform-origin:left center;animation:wipeCover .4s cubic-bezier(.55,.05,.35,1) forwards}
.wipefx.cover i::after{opacity:1}
@keyframes wipeCover{to{transform:scaleX(1)}}
.wipefx.reveal i{transform:scaleX(1);transform-origin:right center;animation:wipeReveal .44s cubic-bezier(.55,.05,.35,1) forwards}
@keyframes wipeReveal{to{transform:scaleX(0)}}
.wipefx b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:800;letter-spacing:.08em;color:#1d4ed8;
  opacity:0}
.wipefx.dark b{color:#7dd3fc}
.wipefx.cover b{animation:wipeCmd .5s ease .2s forwards}
@keyframes wipeCmd{0%{opacity:0}30%{opacity:1}100%{opacity:1}}
.wipefx.reveal b{animation:wipeCmdOut .25s ease forwards}
@keyframes wipeCmdOut{to{opacity:0}}
.wipefx .wc{display:inline-block;width:9px;height:15px;margin-left:5px;vertical-align:-2px;background:currentColor;
  animation:caretBlink .7s steps(1) infinite}

/* non-deck fallback keeps sections stacked normally */
.slide{position:relative}


/* theme glitch — the dark corrupting into light (original) */
.tglitch{position:absolute;top:-34px;left:0;right:0;height:78px;pointer-events:none;overflow:hidden;z-index:3}
.tglitch i{position:absolute;left:-3%;right:-3%;font-style:normal}
.tglitch .t1{top:0;height:44px;
  background:repeating-linear-gradient(90deg,
    #040818 0 26px,transparent 26px 27px,
    #040818 27px 41px,transparent 41px 43px,
    #050a1c 43px 78px,transparent 78px 80px,
    #040818 80px 122px,transparent 122px 125px);
  mask-image:linear-gradient(180deg,#000 0 34%,rgba(0,0,0,.55) 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 34%,rgba(0,0,0,.55) 60%,transparent 100%);
  animation:tgTeeth .9s steps(2) infinite}
.tglitch .t2{top:0;height:58px;opacity:.75;
  background:repeating-linear-gradient(90deg,
    transparent 0 52px,#040818 52px 66px,transparent 66px 140px,#071026 140px 190px,transparent 190px 260px);
  mask-image:linear-gradient(180deg,#000 0 26%,rgba(0,0,0,.4) 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 26%,rgba(0,0,0,.4) 55%,transparent 100%);
  animation:tgTeeth 1.3s steps(3) infinite reverse}
.tglitch .t3{top:26px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(56,189,248,.8) 0 34px,transparent 34px 60px,rgba(4,8,24,.9) 60px 96px,transparent 96px 170px);
  animation:tgSlice .62s steps(2) infinite}
.tglitch .t4{top:40px;height:2px;
  background:repeating-linear-gradient(90deg,transparent 0 80px,rgba(240,246,255,.95) 80px 112px,transparent 112px 150px,rgba(37,99,235,.6) 150px 178px,transparent 178px 300px);
  animation:tgSlice .84s steps(3) infinite reverse}
@keyframes tgTeeth{0%{transform:translateX(-8px)}50%{transform:translateX(11px)}100%{transform:translateX(-5px)}}
@keyframes tgSlice{0%{transform:translateX(-26px);opacity:1}49%{transform:translateX(18px);opacity:1}50%{opacity:.2}100%{transform:translateX(34px);opacity:1}}
.tglitch b{position:absolute;top:46px;right:7%;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:800;
  letter-spacing:.22em;color:rgba(37,99,235,.4);
  animation:tgErr 1.7s steps(2) infinite}
@keyframes tgErr{0%,100%{opacity:.75;transform:translateX(0)}42%{opacity:.2}46%{opacity:.9;transform:translateX(-5px)}54%{opacity:.35;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .tglitch i,.tglitch b{animation:none}
}

/* ---- navbar terminal touches ---- */
.nv-caret{display:inline-block;width:7px;height:14px;margin-left:7px;vertical-align:-2px;
  background:#7dd3fc;box-shadow:0 0 8px rgba(125,211,252,.7);animation:nvBlink 1.1s steps(1) infinite}
@keyframes nvBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nv-caret{animation:none}}

/* ---- snap scroll: page pauses at each chapter / step ---- */
html{scroll-snap-type:y mandatory}
html.js-snap{scroll-snap-type:none;scroll-behavior:auto}
.slide{scroll-snap-align:start;scroll-snap-stop:always}
.hwstep{scroll-snap-align:center;scroll-snap-stop:always}
.s-howdark{scroll-snap-align:none}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:y proximity}}

/* ============================================================
   book-a-call modal — the screen dips into the machine
   ============================================================ */
.bk-modal[hidden]{display:none}
.bk-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;
  background:rgba(3,6,18,.82);backdrop-filter:blur(6px)}
#bkRain{position:absolute;inset:0;pointer-events:none;opacity:.7}
.bk-box{position:relative;width:min(1060px,96vw);border-radius:18px;
  background:linear-gradient(180deg,#0d1832,#080f24);
  border:1px solid rgba(96,165,250,.4);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.95),0 0 60px -12px rgba(37,99,235,.5);
  animation:bkPop .45s var(--ease-pop)}
@keyframes bkPop{0%{opacity:0;transform:translateY(26px) scale(.96)}100%{opacity:1;transform:none}}
.bk-box::after{content:"";position:absolute;inset:-2px;border-radius:19px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ga),transparent 0deg,transparent 286deg,rgba(56,189,248,.2) 306deg,#38bdf8 330deg,#a5e0fc 342deg,#38bdf8 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:gaSpin 5.2s linear infinite}
.bk-c1,.bk-c2{position:absolute;z-index:2;width:16px;height:16px;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.7))}
.bk-c1{left:-5px;top:-5px;border-top:2.5px solid #7dd3fc;border-left:2.5px solid #7dd3fc;border-top-left-radius:5px}
.bk-c2{right:-5px;bottom:-5px;border-bottom:2.5px solid #7dd3fc;border-right:2.5px solid #7dd3fc;border-bottom-right-radius:5px}
.bk-bar{display:flex;align-items:center;gap:2px;padding:13px 18px;border-bottom:1px solid rgba(96,165,250,.2);
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700}
.bk-bar .hu{color:#5eead4}
.bk-bar .hs{color:#5f7cae}
.bk-bar .hp{color:#9fc4f8}
.bk-caret{display:inline-block;width:8px;height:14px;margin-left:8px;background:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,.7);animation:caretBlink 1.1s steps(1) infinite}
.bk-x{margin-left:auto;background:none;border:1px solid rgba(96,165,250,.3);border-radius:7px;
  color:#8aa5cc;font-size:13px;width:28px;height:28px;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.bk-x:hover{color:#fff;border-color:rgba(125,211,252,.7)}
.bk-host{height:min(72vh,680px);overflow:auto;border-radius:0 0 17px 17px;background:#0a1122}
.bk-loading{display:grid;place-items:center;height:100%;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:#7dd3fc}
.bk-dots{animation:caretBlink 1s steps(1) infinite}

/* per-section CTA line */
.sec-cta{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:54px;font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:800}
.sec-cta .pr{color:#38bdf8}
.sec-cta-t{color:#9fc4f8;background:linear-gradient(180deg,transparent 62%,rgba(56,189,248,.22) 62%)}
.lw .sec-cta .pr{color:#2563eb}
.lw .sec-cta-t{color:#28406e;background:linear-gradient(180deg,transparent 62%,rgba(56,189,248,.28) 62%)}
#footRain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6}

@media (prefers-reduced-motion:reduce){
  .bk-box{animation:none}
  .bk-box::after{animation:none}
  .bk-caret,.bk-dots{animation:none}
}

/* ---------- touch devices: natural scroll, no snap ---------- */
@media (pointer:coarse){
  html{scroll-snap-type:none!important}
  .slide,.hwstep,.deployline{scroll-snap-align:none!important;scroll-snap-stop:normal!important}
}

/* ---------- coded wordmark ---------- */
.nav-brand span,.ft-brand span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:16.5px;
  letter-spacing:.02em;color:#e8f2ff;
  text-shadow:0 0 14px rgba(56,189,248,.35)}
.nav-brand span::before,.ft-brand span::before{content:""}
/* official lockup (brand/03-lockup, used whole) replaces mark + coded wordmark (2026-09-04) */
.nav-brand img.nav-lockup{width:auto;height:38px;min-width:140px;animation:none;transform:none;filter:drop-shadow(0 6px 16px rgba(37,99,235,.35))}
.ft-brand img.ft-lockup{width:auto;height:36px;min-width:140px;animation:none;transform:none;filter:drop-shadow(0 6px 16px rgba(37,99,235,.35))}
@media (max-width:640px){.nav-brand img.nav-lockup{height:32px}}

/* ---------- phone polish ---------- */
@media (max-width:640px){
  .hall{padding-bottom:110px}
  .hero{min-height:auto;padding-bottom:26px}
  .sec-cta{font-size:12.5px;gap:10px}
  .tbtn{font-size:12px;padding:12px 18px}
  .bk-host{height:min(78vh,640px)}
}

/* phone: email scaled to sit inside the AI ring */
@media (max-width:640px){
  .f-stage{width:min(288px,80vw)}
  .gm-inline.show{height:142px;margin:4px 6px 8px}
  .gm-sub{font-size:15px}
  .gm-line{font-size:12px}
  .field{height:580px}
}