/* ============================================================
   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:11px}
.nav-brand img{width:36px;height:36px;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(37,99,235,.55))}
.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);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}
.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 */
.rot{position:relative;display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;font-size:clamp(26px,2.9vw,40px);letter-spacing:-.02em;padding:2px 6px}
.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:clamp(20px,6vw,27px)}
  .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}
}