/* =========================================================================
   HEXAGON - homepage  ·  Option A "LUMO"
   black / grey / lumo-green  ·  Space Grotesk · Inter · JetBrains Mono
   Design language cloned from the Waggle landing, recolored + recontent-ed.
   ========================================================================= */

:root{
  --bg:        #0a0a0a;
  --bg-2:      #070707;
  --surface:   #141414;
  --surface-2: #1a1a1a;
  --border:    #242424;
  --border-2:  #2e2e2e;

  --text:      #f2f2f2;
  --text-2:    #b6b6b6;
  --muted:     #7d7d7d;
  --faint:     #555;

  --lumo:      #aef806;
  --lumo-dim:  #7ac20a;
  --lumo-deep: #4d7d05;
  --lumo-a10:  rgba(174,248,6,.10);
  --lumo-a20:  rgba(174,248,6,.20);
  --lumo-a40:  rgba(174,248,6,.40);

  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- vertical rhythm scale ----
     ONE source of truth for the gap between every stacked section. Every
     section sits flush (no margin) inside a flex column with a single gap,
     so adjacent gaps can never double up or drift. */
  --gap-section:48px;   /* standard gap between sections */
  --gap-tight:32px;     /* tighter pairs (caption->ticker, hero->caption) */
  --pad-panel-top:52px; /* room above the section title inside a panel */
  --pad-panel-btm:52px; /* room below the panel's content */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  /* deep-space base so the cosmos canvas (#bg3d, z-index:0) shows through;
     the cosmos css paints #06080F under its starfield. */
  background:#06080F; color:var(--text);
  font-family:var(--body); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.mono{ font-family:var(--mono); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--lumo); color:#0a0a0a; }

/* ---------- atmosphere ----------
   IMPORTANT: when the WebGL cosmos is alive it IS the backdrop - the aurora
   must stay fully hidden so it never washes out the starfield. The aurora is
   purely the no-WebGL / reduced-motion fallback, shown only via .cosmos-dead.
   The grain/scanline are static (one paint, no per-frame cost, no blend
   modes) so they add texture without the jank the animated versions caused. */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 8%,  rgba(174,248,6,.10), transparent 60%),
    radial-gradient(55% 45% at 88% 22%, rgba(122,194,10,.08), transparent 62%),
    radial-gradient(70% 60% at 50% 120%, rgba(174,248,6,.06), transparent 60%);
  opacity:0;                 /* hidden while the cosmos canvas is live */
  transition:opacity .6s ease;
}
/* only reveal the fallback glow when the canvas isn't rendering */
body.cosmos-dead .aurora{ opacity:1; }
body.cosmos-dead .aurora::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 70% at 30% 0%, rgba(174,248,6,.07), transparent 55%);
}
/* static film grain - single SVG-noise paint, NO animation, NO blend mode */
.grain{
  position:fixed; inset:0; z-index:58; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
/* the scanline is now unused but keep it inert if present */
.scanline{ display:none; }

/* giant ghost numeral watermark per panel (set via data-ghost) */
.panel[data-ghost]::after{
  content:attr(data-ghost);
  position:absolute; top:-.18em; right:.04em; z-index:0; pointer-events:none;
  font-family:var(--display); font-weight:700; font-size:clamp(140px,26vw,360px);
  line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(174,248,6,.06);
  opacity:.9; user-select:none;
  transform:translateY(var(--ghost-y,0px));
  will-change:transform;
}

/* ---------- panels: readable surfaces over the cosmos starfield ----------
   The hero + cosmos caption stay transparent (cosmos shows through). Content
   sections get a translucent dark panel so text is legible over the stars. */
.panel{
  position:relative;
  background:linear-gradient(180deg, rgba(8,9,15,.72), rgba(8,9,15,.88));
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(174,248,6,.10);
  border-bottom:1px solid rgba(0,0,0,.4);
}
.panel::before{
  /* faint lumo honeycomb whisper inside panels */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; color:var(--lumo);
  background-image:
    linear-gradient(60deg, transparent 49.4%, currentColor 49.7%, currentColor 50.3%, transparent 50.6%),
    linear-gradient(-60deg, transparent 49.4%, currentColor 49.7%, currentColor 50.3%, transparent 50.6%);
  background-size:44px 76px;
}
.panel > *{ position:relative; z-index:1; }
.stats-wrap{ background:rgba(8,9,15,.86); backdrop-filter:blur(8px); }
/* trim the cosmos open-sky spacer so services arrive sooner */
/* deliberate slice of open cosmos between the ticker and the first panel.
   Fixed (not vh) so the gap never drifts with screen height. */
.cosmos-spacer{ height:var(--gap-section); }
/* the spacer already provides the gap, so the panel right after it must NOT
   add its own top margin on top (prevents the doubled gap) */
.cosmos-spacer + .panel{ margin-top:0; }

/* centre + constrain the live-orbits caption to the page width
   (it's a bare body child, so without this it hugs the left edge) */
.cosmos-caption-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.stack-strip{ margin-top:var(--gap-tight); }

/* ---------- buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.04em;
  padding:13px 22px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), background .2s, box-shadow .3s, color .2s, border-color .25s;
}
/* diagonal shine sweep across any button on hover */
.btn::before{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease); pointer-events:none;
}
.btn:hover::before{ left:160%; }
.btn-primary{ background:var(--lumo); color:#0a0a0a; border-color:var(--lumo); box-shadow:0 0 0 0 var(--lumo-a40); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 34px -8px var(--lumo-a40), 0 0 0 1px var(--lumo); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost::before{ background:linear-gradient(100deg, transparent, rgba(174,248,6,.18), transparent); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--lumo); color:var(--lumo); }
/* trailing arrow nudges on hover (only buttons whose label ends in ↓ / → handled via JS span) */
.btn .arr{ display:inline-block; transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.hero-ctas .btn-ghost:hover .arr{ transform:translateY(3px); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(10,10,10,.78); backdrop-filter:blur(14px); border-bottom-color:var(--border); }
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:18px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-hex{ width:24px; height:24px; color:var(--lumo); filter:drop-shadow(0 0 6px var(--lumo-a40)); }
.brand-word{ font-family:var(--display); font-weight:700; letter-spacing:.06em; font-size:18px; }
.pip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--lumo);
  border:1px solid var(--lumo-a40); padding:5px 10px; border-radius:999px;
}
.pip i{ width:6px; height:6px; border-radius:50%; background:var(--lumo); box-shadow:0 0 8px var(--lumo); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.nav-links{ margin-left:auto; display:flex; gap:26px; }
.nav-links a{ font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--muted); transition:color .2s; }
.nav-links a:hover{ color:var(--lumo); }
.nav-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); display:block; }

/* ---------- hero (transparent, over the cosmos) ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:130px 24px 40px;
  display:flex; align-items:flex-start;
  position:relative; z-index:1;
}
.hero-copy{ max-width:760px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--lumo);
  text-transform:uppercase; margin-bottom:22px;
}
.eyebrow svg{ width:15px; height:15px; }
.hero h1{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(40px,6.2vw,76px); line-height:.98; color:var(--text);
}
.hero h1 .hl{ color:var(--lumo); text-shadow:0 0 40px var(--lumo-a40); }
.hero-sub{ color:var(--text-2); font-size:clamp(15px,1.4vw,18px); line-height:1.6; margin-top:24px; max-width:90%; }
.hero-sub strong{ color:var(--text); font-weight:700; }
.hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-coords{
  display:flex; gap:22px; margin-top:40px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--border);
  font-size:11px; letter-spacing:.06em; color:var(--faint);
}
.hero-coords b{ color:var(--lumo); font-weight:500; }

/* hero card stack */
.stack{ position:relative; min-height:380px; }
.card{
  position:absolute; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:18px; box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.card-head{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); margin-bottom:12px; }
.card-head b{ color:var(--text); font-weight:700; }
.card-spec{ top:0; right:0; width:330px; transform:rotate(2deg); z-index:2; }
.card-spec:hover{ transform:rotate(0); transition:transform .4s var(--ease); }
.routemap{ width:100%; height:auto; display:block; }
.routemap .grid-line line{ stroke:var(--border-2); stroke-width:1; }
.routemap .path{ fill:none; stroke:var(--lumo); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600; filter:drop-shadow(0 0 4px var(--lumo-a40)); animation:draw 2.4s var(--ease) forwards .4s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.routemap .depot{ fill:none; stroke:var(--text-2); stroke-width:2; }
.routemap .stop-hex{ fill:var(--bg); stroke:var(--lumo); stroke-width:1.5; }
.routemap .stop-hex.done{ fill:var(--lumo); }
.routemap .stop-num{ fill:var(--text); font-family:var(--mono); font-size:9px; text-anchor:middle; }
.routemap .truck-dot{ fill:var(--lumo); filter:drop-shadow(0 0 6px var(--lumo)); }
.card-foot{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:10px; }
.card-foot .ok{ color:var(--lumo); }

.card-chip{ bottom:8px; left:0; width:248px; transform:rotate(-3deg); z-index:3; }
.card-chip:hover{ transform:rotate(0); transition:transform .4s var(--ease); }
.chip-rows{ display:flex; flex-direction:column; gap:9px; }
.chip-row{ display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.chip-row .k{ color:var(--muted); letter-spacing:.05em; }
.chip-row .v{ color:var(--text); font-size:11px; }
.stamp{
  display:inline-block; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--lumo); border:1px dashed var(--lumo-a40); padding:4px 9px; border-radius:6px; transform:rotate(-2deg);
}
.chip-eta{
  position:absolute; top:120px; left:38px; z-index:4; background:var(--lumo); color:#0a0a0a;
  border-radius:14px; padding:14px 18px; transform:rotate(4deg);
  box-shadow:0 16px 40px -12px var(--lumo-a40);
}
.chip-eta .k{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; font-weight:700; opacity:.7; }
.chip-eta .v{ font-family:var(--display); font-weight:700; font-size:32px; line-height:1; margin-top:4px; }
.chip-eta .v small{ font-family:var(--mono); font-size:9px; margin-left:6px; opacity:.7; }

/* ---------- floating panels over the cosmos ---------- */
/* every panel/section uses a SINGLE top-only margin from the rhythm scale —
   block margins collapse, so adjacent gaps are always exactly --gap-section */
.panel{ max-width:1240px; margin:var(--gap-section) auto 0; border-radius:22px; padding:var(--pad-panel-top) 40px var(--pad-panel-btm); }
.cta.panel{ padding:var(--pad-panel-btm) 40px; }

/* ---------- stats ---------- */
.stats-wrap{ max-width:1240px; margin:var(--gap-section) auto 0; border-radius:22px; padding:8px; border:1px solid rgba(174,248,6,.10); }
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(174,248,6,.10);
  border-radius:16px; overflow:hidden;
}
.stat{ background:rgba(8,9,15,.6); padding:30px 24px; text-align:center; }
.stat-v{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,48px); color:var(--lumo); letter-spacing:-.02em; text-shadow:0 0 30px var(--lumo-a40); }
.stat-l{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); margin-top:6px; }

/* ---------- sections (inside panels now) ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:0; }
/* a section that is ALSO a panel must keep the panel rhythm (this rule comes
   after .section so it wins the margin/padding cascade for combined classes) */
.section.panel{ max-width:1240px; margin:var(--gap-section) auto 0; padding:var(--pad-panel-top) 40px var(--pad-panel-btm); }
.cosmos-spacer + .section.panel{ margin-top:0; }
.sec-head{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; }
.sec-head h2{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; font-size:clamp(32px,5vw,60px); line-height:.96; text-wrap:balance; }
/* the № tag becomes a mission-control kicker: a live pip + a hairline that
   draws itself in when the heading reveals */
.sec-no{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--lumo);
  white-space:nowrap; padding-bottom:10px;
}
.sec-no::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--lumo);
  box-shadow:0 0 10px var(--lumo); animation:pulse 2.4s infinite;
}
/* full-width hairline under each section head, drawn left-to-right on reveal */
.sec-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px; height:1px;
  background:linear-gradient(90deg, var(--lumo-a40), transparent 65%);
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform 1s var(--ease) .2s, opacity .4s ease .2s;
}
.section .sec-head h2.in ~ .sec-no,
.sec-head:has(.split.in)::after{ transform:scaleX(1); opacity:1; }
/* alternating header: kicker leads, title trails, hairline draws from the right */
.sec-head.alt{ flex-direction:row-reverse; }
.sec-head.alt::after{ background:linear-gradient(270deg, var(--lumo-a40), transparent 65%); transform-origin:right; }

/* ---------- work grid ---------- */
.work-grid{ display:grid; grid-template-columns:1.4fr 1fr; grid-auto-rows:auto; gap:18px; }
.work-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px;
  position:relative; overflow:hidden;
  transition:border-color .35s, transform .4s var(--ease), box-shadow .4s;
}
.work-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(174,248,6,.10), transparent 70%);
}
.work-card:hover{ border-color:var(--lumo-a40); transform:translateY(-4px);
  box-shadow:0 28px 60px -30px rgba(0,0,0,.95); }
.work-card:hover::after{ opacity:1; }
.work-card.flagship{ grid-row:span 2; background:linear-gradient(160deg,#161616,#0e0e0e); border-color:var(--border-2); }
.work-card.flagship::before{
  content:""; position:absolute; top:-40%; right:-20%; width:60%; height:120%;
  background:radial-gradient(circle, var(--lumo-a10), transparent 70%); pointer-events:none;
}
.wc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.wc-logo{ display:flex; align-items:center; height:34px; }
.wc-logo img{ height:34px; width:auto; object-fit:contain; filter:brightness(0) invert(1); }
.wc-logo.ghost{ font-size:26px; color:var(--lumo); }
.wc-flag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#0a0a0a; background:var(--lumo); padding:4px 9px; border-radius:6px; font-weight:700; }
.wc-flag.soft{ background:transparent; color:var(--muted); border:1px solid var(--border-2); }
.work-card h3{ font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.02em; }
.work-card.flagship h3{ font-size:40px; }
.wc-tag{ color:var(--lumo); font-family:var(--mono); font-size:13px; letter-spacing:.04em; margin-top:4px; }
.wc-body{ color:var(--text-2); font-size:14.5px; line-height:1.6; margin-top:14px; }
.wc-feats{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.wc-feats li{ position:relative; padding-left:22px; font-size:13.5px; color:var(--text-2); }
.wc-feats li::before{ content:"⬡"; position:absolute; left:0; color:var(--lumo); font-size:11px; top:2px; }
.wc-foot{ margin-top:22px; font-size:10px; letter-spacing:.1em; color:var(--faint); }

/* ---------- services grid (clean 2x2; all cards equal) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.svc-card{
  background:rgba(20,20,20,.66); border:1px solid var(--border); border-radius:18px; padding:30px;
  position:relative; overflow:hidden;
  transition:border-color .35s, transform .4s var(--ease), background .35s, box-shadow .4s;
}
/* cursor-tracking spotlight (--mx/--my set in JS, fall back to centre) */
.svc-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(174,248,6,.12), transparent 70%);
}
.svc-card:hover{ border-color:var(--lumo-a40); transform:translateY(-4px); background:rgba(20,20,20,.82);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.9), 0 0 0 1px var(--lumo-a20) inset; }
.svc-card:hover::after{ opacity:1; }
.svc-card.ai{ background:linear-gradient(160deg, rgba(174,248,6,.06), rgba(20,20,20,.7)); border-color:var(--lumo-a20); }
.svc-ic{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--lumo-a40); color:var(--lumo); margin-bottom:18px; background:var(--lumo-a10);
  position:relative; transition:transform .4s var(--ease), box-shadow .4s ease; }
.svc-ic::before{ content:""; position:absolute; inset:-1px; border-radius:13px; padding:1px;
  background:conic-gradient(from 180deg, transparent, var(--lumo-a40), transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; }
.svc-card:hover .svc-ic{ transform:translateY(-2px) rotate(-3deg); box-shadow:0 0 22px -4px var(--lumo-a40); }
.svc-card:hover .svc-ic::before{ opacity:1; }
.svc-ic svg{ width:24px; height:24px; transition:transform .4s var(--ease); }
.svc-card:hover .svc-ic svg{ transform:scale(1.08); }
.svc-card h3{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; }
.svc-card p{ color:var(--text-2); font-size:14.5px; line-height:1.6; margin-top:12px; }
.svc-feats{ list-style:none; margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.svc-feats li{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text-2);
  border:1px solid var(--border-2); border-radius:999px; padding:5px 11px; }

/* ---------- approach ---------- */
.approach .appr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:appr; }
.appr{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; padding:30px 28px;
  background:var(--bg-2); transition:border-color .35s, transform .4s var(--ease), background .35s; }
.appr::before{ /* huge ghost step number */
  content:counter(appr,decimal-leading-zero); counter-increment:appr;
  position:absolute; top:-.28em; right:.08em; font-family:var(--display); font-weight:700;
  font-size:118px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(174,248,6,.07);
  transition:-webkit-text-stroke-color .35s, transform .5s var(--ease); pointer-events:none;
}
.appr:hover{ border-color:var(--lumo-a40); transform:translateY(-3px); background:#101010; }
.appr:hover::before{ -webkit-text-stroke-color:rgba(174,248,6,.16); transform:translateY(2px); }
.appr > *{ position:relative; z-index:1; }
.appr-no{ display:inline-block; font-family:var(--mono); font-size:12px; color:#0a0a0a; background:var(--lumo);
  letter-spacing:.08em; font-weight:700; padding:4px 9px; border-radius:6px; }
.appr h4{ font-family:var(--display); font-weight:700; font-size:21px; margin-top:16px; letter-spacing:-.01em; }
.appr p{ color:var(--text-2); font-size:14px; line-height:1.6; margin-top:10px; }

/* ---------- trust / testimonials ---------- */
/* the clients heading is a bare .section (not a panel) — give it the same
   section gap above, and zero its head margin so the rail sits one rhythm
   step below the heading */
.trust-head{ margin-top:var(--gap-section); }
.trust-head .sec-head{ margin-bottom:0; }
.trust-rail{ overflow:hidden; margin-top:var(--gap-section); padding-bottom:8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.trust-track{ display:flex; gap:18px; width:max-content; animation:marquee 46s linear infinite; }
.trust-rail:hover .trust-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.t-card{
  width:360px; flex:0 0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:24px; display:flex; flex-direction:column;
}
.t-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.t-logo{ display:inline-flex; align-items:center; background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 11px; }
.t-logo img{ height:24px; width:auto; object-fit:contain; display:block; }
.t-logo.dark{ background:#0c2340; border-color:rgba(255,255,255,.14); }
.t-stars{ font-size:12px; color:var(--lumo); letter-spacing:1px; display:inline-flex; align-items:center; gap:6px; }
.t-stars b{ color:var(--text-2); font-family:var(--mono); font-size:11px; font-weight:500; }
.t-card blockquote{ font-size:15px; line-height:1.6; color:var(--text); flex:1; }
.t-card blockquote::before{ content:'\201C'; color:var(--lumo); font-size:20px; }
.t-card blockquote::after{ content:'\201D'; color:var(--lumo); }
.t-card figcaption{ margin-top:18px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); }

/* ---------- stack strip - monochrome tech ticker (icons masked to currentColor) ---------- */
.stack-strip{ position:relative; z-index:1; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(8,9,15,.55); backdrop-filter:blur(6px); }
.stack-strip-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:stretch; }
.stack-label{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--muted); display:flex; align-items:center; padding:0 28px 0 32px; border-right:1px dashed var(--border-2); white-space:nowrap; flex:0 0 auto; }
.stack-ticker{ flex:1; overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.stack-track{ display:inline-flex; align-items:center; padding:19px 0 19px 40px; animation:marquee 36s linear infinite reverse; }
.stack-ticker:hover .stack-track{ animation-play-state:paused; }
.stack-item{ display:inline-flex; align-items:center; gap:12px; margin-right:60px; color:var(--text-2); transition:color .2s ease; }
.stack-item:hover{ color:var(--lumo); }
.stack-ic{ width:21px; height:21px; flex:0 0 auto; background:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat; }
.stack-ic-wide{ width:128px; height:46px; }
.stack-item > span:last-child{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; }
@media(max-width:640px){ .stack-label{ padding:0 16px; } .stack-item{ margin-right:40px; } }

/* ---------- cta ---------- */
.cta{ text-align:center; position:relative; }
.cta h2, .cta p, .cta-actions, .stamp-cta{ position:relative; z-index:1; }
.stamp-cta{ transform:rotate(-3deg); margin-bottom:24px; }
.cta h2{ font-family:var(--display); font-weight:700; font-size:clamp(34px,5vw,58px); letter-spacing:-.03em; line-height:1; }
.cta p{ color:var(--text-2); font-size:17px; line-height:1.6; margin:24px auto 0; max-width:560px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--border); margin-top:var(--gap-section); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:40px 24px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-meta{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; font-size:11px; letter-spacing:.08em; color:var(--faint); }
.footer-meta a{ color:var(--muted); transition:color .2s; }
.footer-meta a:hover{ color:var(--lumo); }

/* ---------- reveal animation ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ---------- split-text word reveal (titles) ----------
   JS wraps each word in .word inside an overflow-clip .line. Words rise out
   of the mask with a per-word delay set inline by the splitter. */
.split .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.split .word{
  display:inline-block; will-change:transform;
  transform:translateY(110%) rotate(3deg);
  opacity:0;
}
.split.in .word{
  transform:translateY(0) rotate(0);
  opacity:1;
  transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease;
  transition-delay:var(--d, 0s);
}

/* hero cascade: each element waits its turn after the headline lands */
.hero .eyebrow{   transition-delay:.05s; }
.hero .hero-sub{  transition-delay:.55s; }
.hero .hero-ctas{ transition-delay:.7s; }
.hero .hero-coords{ transition-delay:.85s; }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .split .word{ opacity:1; transform:none; }
  .trust-track,.routemap .path,.pip i{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  /* tighten the whole vertical rhythm on small screens by re-defining the
     scale — every section gap follows automatically, no per-rule edits */
  :root{ --gap-section:44px; --gap-tight:24px; --pad-panel-top:52px; --pad-panel-btm:44px; }
  .hero{ padding-top:120px; min-height:auto; }
  .panel{ padding:var(--pad-panel-top) 22px var(--pad-panel-btm); border-radius:18px; }
  /* side inset on mobile without touching the top-margin rhythm */
  .panel, .stats-wrap{ margin-left:12px; margin-right:12px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .svc-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .work-card.flagship{ grid-row:auto; }
  .approach .appr-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .nav-links.open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(10,10,10,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
  .nav-links.open a{ padding:16px 24px; border-top:1px solid var(--border); }
  .nav .btn-primary{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .pip{ display:none; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:480px){
  .stats{ grid-template-columns:1fr 1fr; }
  .hero-coords{ gap:14px; }
}