/* ============================================================
   maxintelli — Remix / dark racing variant
   ============================================================ */

:root{
  --bg:        #0b0d12;
  --panel:     #111520;
  --panel-2:   #0e121b;
  --text:      #f2f4f8;
  --muted:     #8a93a6;
  --blue:      #3992FF;
  --blue-lite: #6FB2FF;
  --blue-deep: #1e6fe0;
  --hot:       #FF4D6D;
  --line:      rgba(57,146,255,.16);
  --line-soft: rgba(138,147,166,.12);
  --radius:    5px;
  --maxw:      1240px;
  --glow:      0 0 24px rgba(57,146,255,.45);
  --ease:      cubic-bezier(.16,1,.3,1);
  --mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:      "Space Grotesk", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--disp);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.02; }
p{ margin:0; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(57,146,255,.32); color:#fff; }

/* ---------- layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.section{ position:relative; padding:clamp(80px,12vh,160px) 0; }

/* ============================================================
   Background canvas / overlays
   ============================================================ */
/* Hero render image — lowest layer, behind the WebGL streak canvas */
.herobg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.herobg__aurora{
  position:absolute; inset:-25%;
  background:
    radial-gradient(38% 48% at 24% 32%, rgba(57,146,255,.30), transparent 62%),
    radial-gradient(34% 44% at 76% 30%, rgba(110,178,255,.20), transparent 62%),
    radial-gradient(46% 54% at 62% 78%, rgba(38,86,196,.24), transparent 66%),
    radial-gradient(30% 40% at 12% 80%, rgba(57,146,255,.14), transparent 60%);
  filter:blur(46px);
  animation:auroraDrift 30s ease-in-out infinite alternate;
  /* fade out before lower sections so they stay clean */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 72vh, transparent 100vh);
  mask-image:linear-gradient(to bottom, #000 0, #000 72vh, transparent 100vh);
}
@keyframes auroraDrift{
  0%   { transform:translate3d(-3%,-2%,0) scale(1.04); }
  50%  { transform:translate3d(3%, 3%,0) scale(1.12); }
  100% { transform:translate3d(5%,-3%,0) scale(1.06); }
}
/* Near-black scrim: strongest at left + bottom, lightest toward upper-right
   where the streaks converge — keeps headline/mono text legible. */
.herobg__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right,  rgba(11,13,18,.60) 0%, rgba(11,13,18,.20) 45%, rgba(11,13,18,0) 80%),
    linear-gradient(to bottom, rgba(11,13,18,.45) 0%, rgba(11,13,18,.20) 38%, rgba(11,13,18,.78) 90%, var(--bg) 100%);
}

/* WebGL canvas — animated streaks layered over the static render */
#gl{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; display:block; pointer-events:none;
  opacity:.5;
}
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay; opacity:.5;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%);
}
main, .nav, .footer{ position:relative; z-index:2; }

/* ============================================================
   Boot / preloader
   ============================================================ */
.boot{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .6s ease, visibility .6s ease;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__inner{ width:min(320px,72vw); text-align:center; }
.boot__mark{
  font-family:var(--mono); font-weight:700; font-size:18px;
  letter-spacing:.18em; text-transform:lowercase;
  color:var(--blue-lite);
  text-shadow:0 0 18px rgba(57,146,255,.7);
  margin-bottom:20px;
}
.boot__bar{
  height:2px; width:100%; background:var(--line-soft); border-radius:2px; overflow:hidden;
}
.boot__bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-lite));
  box-shadow:var(--glow);
}
.boot__pct{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  margin-top:12px; letter-spacing:.2em;
}

/* ============================================================
   Scroll progress
   ============================================================ */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; pointer-events:none; }
.scrollbar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-lite));
  box-shadow:0 0 12px rgba(57,146,255,.8);
}

/* ============================================================
   Buttons (code-style, rectangular, glowing)
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-weight:500; font-size:13px;
  letter-spacing:.02em;
  padding:13px 20px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease), color .2s ease;
  white-space:nowrap;
}
.btn--sm{ padding:9px 15px; font-size:12px; }
.btn__arrow{ font-style:normal; transition:transform .25s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  color:#fff; border-color:var(--blue-lite);
  box-shadow:0 0 0 rgba(57,146,255,0), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn--primary:hover{
  box-shadow:0 0 28px rgba(57,146,255,.65), 0 0 60px rgba(57,146,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-2px);
}
.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--blue); color:var(--blue-lite);
  box-shadow:0 0 22px rgba(57,146,255,.3); transform:translateY(-2px);
}
.btn--mail{
  font-size:clamp(16px,3vw,24px); padding:18px 26px;
  background:transparent; color:var(--text); border-color:var(--line);
}
.btn--mail:hover{
  border-color:var(--blue); color:var(--blue-lite);
  box-shadow:0 0 32px rgba(57,146,255,.4);
}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,13,18,.72); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__brand{
  font-family:var(--mono); font-weight:700; font-size:15px;
  letter-spacing:.02em; display:flex; align-items:center; gap:9px;
}
.nav__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 12px var(--blue), 0 0 4px #fff inset;
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 12px var(--blue);} 50%{ box-shadow:0 0 22px var(--blue-lite);} }

.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-family:var(--mono); font-size:13px; color:var(--muted);
  position:relative; transition:color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:var(--blue); box-shadow:0 0 8px var(--blue);
  transition:width .25s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:14px; }

/* language toggle */
.langtoggle{
  position:relative; display:inline-flex; padding:3px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(17,21,32,.6); cursor:pointer;
  font-family:var(--mono);
}
.langtoggle__opt{
  position:relative; z-index:2; padding:5px 9px; font-size:11px; font-weight:500;
  color:var(--muted); transition:color .25s ease; letter-spacing:.05em;
}
.langtoggle__opt.is-active{ color:#fff; }
.langtoggle__pill{
  position:absolute; z-index:1; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  border-radius:3px; background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  box-shadow:0 0 14px rgba(57,146,255,.5);
  transition:transform .3s var(--ease);
}
body[data-lang="ua"] .langtoggle__pill{ transform:translateX(100%); }

.navburger{
  display:none; flex-direction:column; gap:5px; width:34px; height:30px;
  padding:7px 6px; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); cursor:pointer;
}
.navburger i{ height:1.5px; width:100%; background:var(--text); transition:.25s var(--ease); }
.navburger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.navburger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.navburger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   Eyebrow / section heads
   ============================================================ */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue-lite);
  opacity:0; transform:translateY(14px);
}
.sec-head{ max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-index{
  display:inline-block; font-family:var(--mono); font-size:12px;
  color:var(--blue); letter-spacing:.3em; margin-bottom:18px;
  text-shadow:0 0 12px rgba(57,146,255,.5);
}
.sec-title{ font-size:clamp(28px,5vw,52px); }
.sec-sub{
  margin-top:18px; color:var(--muted); font-size:clamp(15px,2vw,18px);
  max-width:60ch; line-height:1.6;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(57,146,255,.05) 1px, transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg, rgba(57,146,255,.05) 1px, transparent 1px) 0 0/56px 100%;
  mask-image:radial-gradient(100% 70% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(100% 70% at 50% 30%, #000 30%, transparent 80%);
}
.hero__inner{
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,420px);
  gap:clamp(32px,5vw,64px); align-items:center;
}
.hero__main{ min-width:0; }
.hero__title{
  font-size:clamp(26px,3.4vw,46px); font-weight:700; margin:20px 0 0;
  letter-spacing:-.03em; line-height:1.1;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:inline-block; will-change:transform; }
.hero__title .accent{
  color:var(--blue-lite);
  text-shadow:0 0 18px rgba(57,146,255,.30);
}
.hero__sub{
  margin-top:28px; max-width:54ch; color:var(--muted);
  font-size:clamp(16px,2.2vw,20px); line-height:1.6;
  opacity:0; transform:translateY(18px);
}
.hero__cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(18px); }

.hero__sig{ width:100%; min-width:0; opacity:0; transform:translateY(18px); }
/* ============================================================
   Brand band (animated glowing wordmark)
   ============================================================ */
.brandband{ text-align:center; padding-block:clamp(96px,15vw,180px); position:relative; overflow:hidden; }
.brandband::before{
  content:""; position:absolute; left:50%; top:50%; width:80%; height:60%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(57,146,255,.16), transparent 70%);
  pointer-events:none;
}
.brandband__inner{
  position:relative; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px);
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.brandband__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--blue-lite);
}
.wordmark{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(52px,15vw,196px); letter-spacing:-.05em; line-height:.9;
  color:transparent;
  -webkit-text-stroke:2px rgba(110,178,255,.92);
  text-stroke:2px rgba(110,178,255,.92);
  will-change:transform, text-shadow;
  animation:wmGlow 4.2s ease-in-out infinite, wmBreathe 9s ease-in-out infinite;
}
@keyframes wmGlow{
  0%,100%{ text-shadow:0 0 26px rgba(57,146,255,.35), 0 0 72px rgba(57,146,255,.18); }
  50%    { text-shadow:0 0 50px rgba(57,146,255,.80), 0 0 140px rgba(57,146,255,.42); }
}
@keyframes wmBreathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.018); }
}
.brandband__line{
  max-width:44ch; color:var(--muted); font-size:clamp(15px,1.6vw,18px); line-height:1.6;
}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); opacity:0;
}
.hero__scrollline{ width:1px; height:42px; background:linear-gradient(var(--blue),transparent); }

/* ============================================================
   Terminal block
   ============================================================ */
.terminal{
  background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(57,146,255,.05), 0 24px 60px -30px rgba(57,146,255,.5);
  overflow:hidden;
}
.terminal__bar{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(57,146,255,.05), transparent);
}
.terminal__dots{ display:flex; gap:6px; }
.terminal__dots i{ width:9px; height:9px; border-radius:50%; background:#2b3242; }
.terminal__dots i:first-child{ background:var(--hot); box-shadow:0 0 8px rgba(255,77,109,.5); }
.terminal__dots i:nth-child(2){ background:#f5b942; }
.terminal__dots i:last-child{ background:var(--blue); box-shadow:0 0 8px rgba(57,146,255,.5); }
.terminal__file{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }
.terminal__code{
  margin:0; padding:18px 18px 22px; font-family:var(--mono); font-size:12.5px;
  line-height:1.7; white-space:pre-wrap; word-break:break-word; color:#cfd6e4;
  min-height:200px;
}
.terminal__code .tok-k{ color:var(--blue-lite); }   /* keyword */
.terminal__code .tok-s{ color:#9fe0a8; }             /* string */
.terminal__code .tok-p{ color:var(--blue); }         /* property/punct accent */
.terminal__code .tok-c{ color:#5a6577; font-style:italic; } /* comment */
.terminal__code .tok-n{ color:var(--hot); }          /* number/highlight */
.terminal__caret{
  display:inline-block; width:7px; height:1.05em; vertical-align:-2px;
  background:var(--blue); box-shadow:0 0 8px var(--blue);
  animation:caret .9s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(14,18,27,.5); overflow:hidden; padding:16px 0;
}
.marquee__track{ display:inline-flex; white-space:nowrap; will-change:transform; }
.marquee__item{
  display:inline-flex; align-items:center; font-family:var(--mono);
  font-size:14px; letter-spacing:.04em; color:var(--text);
  padding:0 26px;
}
.marquee__sep{ color:var(--blue); text-shadow:0 0 10px rgba(57,146,255,.6); }

/* ============================================================
   Cards
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  position:relative; padding:28px 26px 30px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(57,146,255,.16), transparent 60%);
  pointer-events:none;
}
.card:hover{ border-color:var(--blue); transform:translateY(-4px); box-shadow:0 0 30px -8px rgba(57,146,255,.4); }
.card:hover::before{ opacity:1; }
.card__num{
  font-family:var(--mono); font-size:12px; color:var(--blue); letter-spacing:.2em;
}
.card__icon{
  width:40px; height:40px; margin:18px 0 16px; position:relative;
}
.card__icon::before{
  content:""; position:absolute; inset:0; border:1.5px solid var(--blue);
  border-radius:4px; box-shadow:0 0 16px rgba(57,146,255,.4);
}
.card__icon[data-shape="sites"]::after{
  content:""; position:absolute; left:8px; right:8px; top:13px; height:1.5px;
  background:var(--blue-lite); box-shadow:0 6px 0 var(--blue-lite), 0 12px 0 var(--blue-lite);
}
.card__icon[data-shape="agents"]::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1.5px solid var(--blue-lite); box-shadow:0 0 10px var(--blue-lite);
}
.card__icon[data-shape="hosting"]::after{
  content:""; position:absolute; left:9px; right:9px; top:11px; bottom:11px;
  border:1.5px solid var(--blue-lite); border-radius:2px;
  background:repeating-linear-gradient(90deg, transparent 0 3px, rgba(111,178,255,.5) 3px 4px);
}
.card h3{ font-size:22px; margin-bottom:10px; }
.card p{ color:var(--muted); font-size:15px; line-height:1.6; }

/* ============================================================
   Agent + chat
   ============================================================ */
.agent__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.agent__copy .btn{ margin-top:30px; }

.chat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 0 0 1px rgba(57,146,255,.05), 0 30px 80px -40px rgba(57,146,255,.6);
}
.chat__bar{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(57,146,255,.06), transparent);
}
.chat__dots{ display:flex; gap:6px; }
.chat__dots i{ width:9px; height:9px; border-radius:50%; background:#2b3242; }
.chat__title{ font-family:var(--mono); font-size:12px; color:var(--muted); flex:1; }
.chat__status{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--blue-lite); }
.chat__pulse{ width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); animation:pulseDot 1.8s ease-in-out infinite; }

.chat__log{
  padding:20px 18px; min-height:280px; max-height:340px; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
}
.chat__log::-webkit-scrollbar{ width:5px; }
.chat__log::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.bubble{
  max-width:78%; padding:11px 15px; border-radius:10px;
  font-size:14.5px; line-height:1.5; animation:bubbleIn .35s var(--ease) both;
}
@keyframes bubbleIn{ from{ opacity:0; transform:translateY(8px) scale(.98);} to{ opacity:1; transform:none;} }
.bubble--user{
  align-self:flex-end; background:linear-gradient(180deg,var(--blue),var(--blue-deep)); color:#fff;
  border-bottom-right-radius:3px; box-shadow:0 0 18px rgba(57,146,255,.35);
}
.bubble--bot{
  align-self:flex-start; background:var(--panel-2); color:var(--text);
  border:1px solid var(--line-soft); border-bottom-left-radius:3px;
}
.typing{
  align-self:flex-start; display:inline-flex; gap:5px; padding:13px 15px;
  background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; border-bottom-left-radius:3px;
}
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--blue-lite); opacity:.4; animation:typing 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-4px);} }

.chat__input{
  display:flex; align-items:center; gap:12px; padding:13px 16px;
  border-top:1px solid var(--line-soft); background:var(--panel-2);
}
.chat__placeholder{ flex:1; font-family:var(--mono); font-size:13px; color:var(--muted); }
.chat__replay{
  width:34px; height:34px; border-radius:var(--radius); cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--blue-lite);
  font-size:16px; transition:.25s var(--ease);
}
.chat__replay:hover{ border-color:var(--blue); box-shadow:0 0 16px rgba(57,146,255,.4); transform:rotate(-90deg); }

/* ============================================================
   Metrics
   ============================================================ */
.metricgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.metric{
  padding:30px 22px; text-align:center;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.metric:hover{ border-color:var(--blue); box-shadow:0 0 28px -8px rgba(57,146,255,.45); }
.metric__num{
  font-family:var(--mono); font-weight:700; font-size:clamp(34px,5vw,52px);
  color:var(--blue-lite); letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(57,146,255,.5);
}
.metric__label{ margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.03em; }
.metrics__todo{
  margin-top:28px; text-align:center; font-family:var(--mono); font-size:11px;
  color:var(--muted); opacity:.7; letter-spacing:.03em;
}

/* ============================================================
   Work
   ============================================================ */
.worklist{ display:flex; flex-direction:column; }
.workitem{
  display:block; padding:28px 0; border-top:1px solid var(--line-soft);
  transition:padding .3s var(--ease);
  position:relative;
}
.workitem:last-child{ border-bottom:1px solid var(--line-soft); }
.workitem::before{
  content:""; position:absolute; left:-24px; top:0; bottom:0; width:2px;
  background:var(--blue); box-shadow:0 0 14px var(--blue); transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease);
}
.workitem:hover{ padding-left:24px; }
.workitem:hover::before{ transform:scaleY(1); }
.workitem__head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.workitem__idx{ font-family:var(--mono); font-size:12px; color:var(--blue); letter-spacing:.2em; }
.workitem__name{ font-size:clamp(24px,4vw,40px); transition:color .25s ease; }
.workitem:hover .workitem__name{ color:var(--blue-lite); text-shadow:0 0 20px rgba(57,146,255,.4); }
.workitem__cat{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:4px 10px; border:1px solid var(--line-soft); border-radius:4px;
}
.workitem__desc{ margin-top:12px; max-width:62ch; color:var(--muted); font-size:15px; line-height:1.6; }
.workitem__link{
  display:inline-flex; gap:6px; margin-top:14px; font-family:var(--mono); font-size:12px;
  color:var(--blue-lite); letter-spacing:.05em;
  opacity:0; transform:translateY(6px); transition:.3s var(--ease);
}
.workitem:hover .workitem__link{ opacity:1; transform:none; }

/* ============================================================
   Final CTA
   ============================================================ */
.finalcta{ text-align:center; }
.finalcta__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.finalcta__title{ font-size:clamp(32px,6vw,68px); }
.finalcta__title::after{
  content:""; display:block; width:64px; height:2px; margin:24px auto 0;
  background:linear-gradient(90deg,transparent,var(--blue),transparent); box-shadow:0 0 12px var(--blue);
}
.finalcta__sub{ max-width:52ch; color:var(--muted); font-size:clamp(15px,2vw,18px); line-height:1.6; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:48px 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__brand{
  font-family:var(--mono); font-weight:700; font-size:16px; color:var(--blue-lite);
  text-shadow:0 0 16px rgba(57,146,255,.5);
}
.footer__links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer__links a{ font-family:var(--mono); font-size:12px; color:var(--muted); transition:color .2s ease; }
.footer__links a:hover{ color:var(--blue-lite); }
.footer__legal{ font-family:var(--mono); font-size:12px; color:var(--muted); }

/* ============================================================
   Reveal base state
   ============================================================ */
.reveal{ will-change:transform, opacity; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__sig{ display:none; }            /* keep mobile hero clean */
  .agent__grid{ grid-template-columns:1fr; }
  .metricgrid{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  /* Strengthen the scrim on small screens for full legibility */
  .herobg__scrim{
    background:
      linear-gradient(to bottom, rgba(11,13,18,.55) 0%, rgba(11,13,18,.35) 45%, rgba(11,13,18,.9) 92%, var(--bg) 100%);
  }
  .navburger{ display:flex; }
  .nav__links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(11,13,18,.96); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); padding:8px 0;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.3s var(--ease);
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:14px clamp(20px,5vw,64px); font-size:15px; }
  .nav__links a::after{ display:none; }

  /* Mobile spacing + compaction */
  .hero{ padding-top:92px; min-height:auto; padding-bottom:64px; }
  .hero__sub{ font-size:16px; }
  .section{ padding-block:clamp(56px,12vw,90px); }
  .chat__log{ min-height:190px; max-height:56vh; }
  .brandband{ padding-block:clamp(72px,18vw,120px); }
  .brandband__line{ font-size:15px; }
  .sec-title{ font-size:clamp(24px,7vw,34px); }
  .finalcta__title{ font-size:clamp(30px,9vw,44px); }
}
@media (max-width:480px){
  .metricgrid{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ justify-content:center; }
  .hero__title{ font-size:clamp(27px,8.5vw,38px); }
  .btn--mail{ font-size:clamp(18px,6vw,26px); padding:18px 22px; word-break:break-all; }
  .footer__inner{ gap:18px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.eyebrow,.hero__sub,.hero__cta,.hero__sig,.hero__scroll{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .wordmark{ text-shadow:0 0 18px rgba(57,146,255,.4); }
  #gl{ display:none; }
  /* Static hero render stays — no motion required, fully legible via scrim */
  .herobg__img{ transform:none; will-change:auto; }
}