/* ============================================================
   THE KINGS — icy-slate cinematic system
   Palette tuned to igloo.inc: deep slate, icy blue-grey,
   with cyan circuitry accents pulled from the brand figure.
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #0c0f15;
  --bg-2:      #10141c;
  --slate:     #383e4e;
  --slate-2:   #262b36;

  /* ink */
  --ink:       #eef1f6;
  --ink-2:     #b8bfcc;
  --muted:     #7f8796;

  /* brand */
  --ice:       #b6bac5;   /* igloo blue-grey */
  --cyan:      #38d8ff;   /* circuitry glow  */
  --cyan-deep: #1aa7d0;

  /* glass */
  --glass:     rgba(182,186,197,.06);
  --glass-edge:rgba(255,255,255,.14);
  --glass-hi:  rgba(255,255,255,.55);

  /* type */
  --display: "Orbitron", "Space Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;

  /* rhythm */
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1320px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* density tweak hook */
body[data-density="compact"]{ --section-pad: clamp(64px, 9vh, 110px); }
body[data-density="regular"]{ --section-pad: clamp(96px, 15vh, 200px); }
body[data-density="airy"]   { --section-pad: clamp(140px, 22vh, 300px); }

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; background:#1b3540; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  /* NOTE: current Safari tints the iOS status-bar/chrome from the BODY's
     background-color (it ignores theme-color), so this is kept as the hero's
     icy tone for a continuous full-screen top. main.js swaps it to the deep
     slate as you scroll into the content sections. The visible page background
     is the opaque .field layer on top, so this value is never seen directly. */
  background:#1b3540;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
  min-height:100svh;
}

/* ambient frost canvas + gradient field sit behind everything */
#frost{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
#gl{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; /* driven per-frame by scene.js */
}
.field{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% -10%, rgba(56,216,255,.10), transparent 55%),
    radial-gradient(90% 70% at 12% 110%, rgba(56,62,78,.55), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}

main{ position:relative; z-index:1; }

/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1; }
.eyebrow{
  font-family:var(--display);
  font-size:clamp(11px,1vw,13px); font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent);
}
.lead{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); max-width:54ch; line-height:1.55; }
.muted{ color:var(--muted); }

/* ---------- layout ---------- */
section{ position:relative; padding:var(--section-pad) var(--pad); }
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:9px var(--pad);
  padding-top:calc(9px + env(safe-area-inset-top));
  /* transparent until scrolled — a fixed element with a dark background would be
     sampled by Safari to tint the status bar, re-introducing the black band on
     the hero. The frosted glass lives on .nav.scrolled (only visible then). */
  background:transparent;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.06);
  /* the first screen carries NO banner — it sits hidden above the fold */
  transform:translateY(-118%);
  opacity:0; pointer-events:none;
  transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .5s var(--ease);
  will-change:transform, opacity;
}
/* a cyan hairline draws across as the banner settles in */
.nav::after{
  content:""; position:absolute; left:50%; bottom:0; height:1px; width:0; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(56,216,255,.7), transparent);
  transition:width 1s cubic-bezier(.16,1,.3,1) .18s;
}
/* revealed once you scroll down off the hero — glass appears here so the
   hero's (hidden) nav never contributes a dark status-bar sample */
.nav.scrolled{ transform:translateY(0); opacity:1; pointer-events:auto; background:rgba(12,15,21,.58); }
.nav.scrolled::after{ width:100%; }
/* inner items settle in with a refined stagger */
.nav .brand, .nav .nav-links, .nav .nav-cta{
  opacity:0; transform:translateY(-10px);
  transition:opacity .5s var(--ease), transform .65s cubic-bezier(.16,1,.3,1);
}
.nav.scrolled .brand{ opacity:1; transform:none; transition-delay:.18s; }
.nav.scrolled .nav-links{ opacity:1; transform:none; transition-delay:.26s; }
.nav.scrolled .nav-cta{ opacity:1; transform:none; transition-delay:.34s; }
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand .mark{ width:22px; height:22px; filter:drop-shadow(0 0 10px rgba(56,216,255,.45)); }
/* circular head logo with a subtle living glow */
.brand .logo-mark{ position:relative; width:28px; height:28px; flex:none; border-radius:50%;
  background:url("assets/logo-mark.webp") no-repeat 50% 24% / 165%;
  border:1px solid rgba(56,216,255,.3); box-shadow:inset 0 0 12px rgba(56,216,255,.12);
  filter:drop-shadow(0 0 7px rgba(56,216,255,.4)); animation:logoFloat 5.5s ease-in-out infinite; }
.brand .logo-mark::after{ content:""; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(56,216,255,.32), 0 0 16px rgba(56,216,255,.45); animation:logoPulse 3.4s ease-in-out infinite; }
@keyframes logoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.5px); } }
@keyframes logoPulse{ 0%,100%{ opacity:.3; transform:scale(1); } 50%{ opacity:.75; transform:scale(1.07); } }
@media (prefers-reduced-motion: reduce){ .brand .logo-mark{ animation:none; } .brand .logo-mark::after{ animation:none; opacity:.5; } }
.brand .word{
  font-family:var(--display); font-weight:600; letter-spacing:.2em;
  font-size:13px; text-transform:uppercase;
}
.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-links a{
  color:var(--ink-2); text-decoration:none; font-size:13px; letter-spacing:.02em;
  position:relative; transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--cyan); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.btn{
  font-family:var(--display); font-size:13.5px; letter-spacing:.04em; font-weight:500;
  color:var(--bg); background:var(--ink); white-space:nowrap;
  border:none; border-radius:999px; padding:11px 22px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(56,216,255,.55); }
.btn.ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--glass-edge);
}
.btn.ghost:hover{ background:var(--glass); border-color:var(--cyan); }
.btn.big{ padding:16px 30px; font-size:15px; }
/* refined text CTA — tiny label, subtle hairline border, live dot + nudging arrow */
.nav .nav-cta{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
  font-family:var(--display); font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  padding:5px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02);
}
.nav .nav-cta .dot{ width:4px; height:4px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 7px var(--cyan); flex:none; animation:livepulse 1.9s ease-in-out infinite; }
.nav .nav-cta .arr{ transition:transform .3s var(--ease); color:var(--cyan); }
.nav .nav-cta:hover{ color:var(--ink); border-color:rgba(56,216,255,.4); background:rgba(56,216,255,.05); }
.nav .nav-cta:hover .arr{ transform:translateX(3px); }
@media (max-width:1040px){ .nav-links{ display:none; } }

/* mobile: a clearly-frozen, frosted header + full-bleed hero */
@media (max-width:760px){
  .nav{
    background:transparent;
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.06);
    padding-top:max(12px, env(safe-area-inset-top)); padding-bottom:12px;
  }
  .nav.scrolled{ background:rgba(10,13,19,.85); }
  /* one continuous scroll, not a stack of separate full-screen pages */
  section{ --section-pad: clamp(72px, 12vh, 132px); }
  /* hero runs full-bleed to the very top (under the camera) — no banner here */
  .hero{ padding-top:env(safe-area-inset-top); }
  .hero-a .stack{ padding-bottom:30px; gap:18px; min-height:88svh; }
  .hero-a .stack .titanic{ font-size:clamp(52px,17vw,88px); }
  .hero-a-bottom .lead{ font-size:16px; max-width:34ch; }
  /* let the home-indicator area stay dark */
  footer{ padding-bottom:max(46px, calc(env(safe-area-inset-bottom) + 28px)); }
}

/* =========================================================
   HERO (3 directions toggle via body[data-hero])
   ========================================================= */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding-top:0; overflow:hidden; position:relative;
  perspective:1100px;            /* the hero is a 3D stage */
}
/* DOM depth layers — the wordmark floats nearest the viewer, tilting and
   shifting against the bust and the deep rain as the mouse moves */
@media (prefers-reduced-motion: no-preference){
  .hero .stack{
    transform:
      translate3d(calc(var(--pmx,0)*-26px), calc(var(--pmy,0)*-16px), 0)
      rotateY(calc(var(--pmx,0)*5deg)) rotateX(calc(var(--pmy,0)*-4deg));
    will-change:transform;
  }
  .hero-scan{
    transform:translate3d(calc(var(--pmx,0)*-10px), calc(var(--pmy,0)*-6px), 0);
    will-change:transform;
  }
}

/* mystical pigeon drifting through the hero animations (motion driven in JS) */
.pigeon-fly{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.pigeon{ position:absolute; left:0; top:0; width:56px; height:42px; color:#c4eeff;
  filter:drop-shadow(0 0 8px rgba(56,216,255,.85)) drop-shadow(0 0 22px rgba(56,216,255,.4));
  opacity:.55; will-change:transform;
  animation:pigeonGhost 6s ease-in-out infinite;
}
.pigeon .wing{ transform-box:fill-box; }
.pigeon .wing-l{ transform-origin:right center; animation:flapL .46s ease-in-out infinite alternate; }
.pigeon .wing-r{ transform-origin:left center;  animation:flapR .46s ease-in-out infinite alternate; }
@keyframes flapL{ from{ transform:rotate(19deg); } to{ transform:rotate(-24deg); } }
@keyframes flapR{ from{ transform:rotate(-19deg); } to{ transform:rotate(24deg); } }
@keyframes pigeonGhost{ 0%,100%{ opacity:.4; } 50%{ opacity:.66; } }
/* fairy sparkle trail */
.pigeon-spark{ position:absolute; width:4px; height:4px; border-radius:50%; background:#cdeeff;
  box-shadow:0 0 8px rgba(56,216,255,.9); transform:translate(-50%,-50%); pointer-events:none;
  animation:sparkFade 1.5s ease-out forwards; }
@keyframes sparkFade{ 0%{ opacity:.7; transform:translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.25); } }
@media (prefers-reduced-motion: reduce){
  .pigeon{ animation:pigeonGhost 6s ease-in-out infinite; transform:translate(70vw,22vh); }
  .pigeon .wing{ animation:none; }
}
.hero-stage{ display:none; }
body[data-hero="a"] .hero-a,
body[data-hero="b"] .hero-b,
body[data-hero="c"] .hero-c{ display:block; width:100%; }

.kicker{ margin-bottom:26px; }

/* giant wordmark */
.titanic{
  font-family:var(--display); font-weight:600;
  font-size:clamp(60px, 15vw, 230px); line-height:.86;
  letter-spacing:-.04em; color:var(--ink);
}
/* hero wordmark dialed thinner — a lighter, more refined banner */
.hero .titanic{ font-weight:400; }
.hero .titanic .glow{ font-weight:400; }
.titanic .thin{ font-weight:300; color:var(--ice); }
.titanic .glow{
  background:linear-gradient(180deg,#fff,var(--cyan) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(56,216,255,.25);
}

/* --- Hero A: Crown in Ice (centered) --- */
.hero-a .stack{
  text-align:center; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; gap:24px;
  min-height:86svh; padding:6px 0 26px;
}
.hero-a .stack .titanic{ font-size:clamp(44px,9vw,118px); letter-spacing:-.01em; text-shadow:0 8px 60px rgba(0,0,0,.6); }
.hero-a-bottom{ display:flex; flex-direction:column; align-items:center; gap:20px; max-width:760px; }
.hero-a-bottom .kicker{ margin-bottom:4px; }
.hero-a-bottom .lead{ margin:0 auto; text-align:center; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.ice-monolith{
  position:relative; width:clamp(220px,26vw,340px); aspect-ratio:3/4;
  border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(182,186,197,.16), rgba(56,62,78,.10) 60%, rgba(56,216,255,.08));
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(6px) saturate(130%); -webkit-backdrop-filter:blur(6px) saturate(130%);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 30px 60px -30px rgba(255,255,255,.35),
    inset 0 -40px 80px -40px rgba(56,216,255,.25),
    0 50px 120px -40px rgba(0,0,0,.7);
  overflow:hidden;
}
.ice-monolith::before{ /* refraction streaks */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 46%, transparent 52%),
             linear-gradient(75deg, transparent 60%, rgba(255,255,255,.10) 70%, transparent 76%);
  mix-blend-mode:screen;
}
.ice-monolith .crown{ width:54%; filter:drop-shadow(0 0 26px rgba(56,216,255,.6)); z-index:2; }
.frost-grain{ position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); }

/* --- Hero B: The Sovereign (figure) --- */
.hero-b .grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.hero-b .titanic{ font-size:clamp(54px,11vw,170px); }
.sovereign-case{
  position:relative; justify-self:center; width:min(100%,460px); aspect-ratio:1/1.08;
  border-radius:20px; overflow:hidden;
  background:linear-gradient(155deg, rgba(182,186,197,.14), rgba(56,62,78,.12) 55%, rgba(56,216,255,.10));
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -50px 90px -40px rgba(56,216,255,.30),
    0 60px 130px -45px rgba(0,0,0,.75);
}
.sovereign-case img{
  position:absolute; left:50%; bottom:-2%; transform:translateX(-50%);
  width:96%; filter:saturate(105%) contrast(102%) drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
.sovereign-case .glaze{
  position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(120deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 56%);
}
@media (max-width:900px){ .hero-b .grid{ grid-template-columns:1fr; text-align:center; } .hero-b .lead{ margin:0 auto; } }

/* --- Hero C: Monolith shard --- */
.hero-c .stack{ display:grid; place-items:center; gap:0; min-height:78vh; }
.shard{
  position:relative; width:clamp(160px,18vw,230px); height:clamp(360px,52vh,560px);
  clip-path:polygon(50% 0,100% 16%,86% 100%,14% 100%,0 16%);
  background:linear-gradient(180deg, rgba(182,186,197,.22), rgba(56,62,78,.10) 50%, rgba(56,216,255,.12));
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 0 60px rgba(255,255,255,.18), 0 40px 120px -40px rgba(0,0,0,.7);
  display:grid; place-items:center;
}
.shard .crown{ width:46%; filter:drop-shadow(0 0 30px rgba(56,216,255,.7)); }
.hero-c .shard{ display:none; }
.hero-c .titanic{ position:absolute; left:var(--pad); top:18vh; text-align:left; text-shadow:0 8px 60px rgba(0,0,0,.55); }
.hero-c .corner-note{ position:absolute; right:var(--pad); bottom:16vh; text-align:right; max-width:30ch; }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--display); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(var(--cyan),transparent); animation:drip 3.6s var(--ease) infinite; }
@keyframes drip{ 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* =========================================================
   MISSION
   ========================================================= */
.mission .mission-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(42px,7vw,104px); line-height:.96; letter-spacing:-.035em;
  max-width:15ch; color:var(--ink); margin:0 0 30px;
}
.mission .mission-title .glow{
  background:linear-gradient(180deg,#fff,var(--cyan) 135%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(56,216,255,.25);
}
.mission .big{
  font-size:clamp(20px,2.4vw,34px); line-height:1.3; letter-spacing:-.015em;
  max-width:30ch; font-weight:400; color:var(--ink-2);
}
.mission .big b{ font-weight:500; color:var(--ink); }
.mission .big .dim{ color:var(--ink-2); }
.mission .word{ display:inline-block; }
.mission-foot{
  display:flex; gap:60px; flex-wrap:wrap; margin-top:64px;
  padding-top:36px; border-top:1px solid rgba(255,255,255,.08);
}
.stat .n{ font-family:var(--display); font-size:clamp(34px,4vw,56px); color:var(--ink); line-height:1; }
.stat .l{ color:var(--muted); font-size:14px; margin-top:8px; max-width:24ch; }

/* =========================================================
   PRODUCTS — ice block showcase
   ========================================================= */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:64px; flex-wrap:wrap; }
.sec-head h2{ font-size:clamp(30px,4.5vw,64px); letter-spacing:-.03em; }
.sec-head .lead{ max-width:38ch; }

.blocks{ display:grid; grid-template-columns:repeat(12,1fr); gap:22px; }
.ice-card{
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 90px -50px rgba(0,0,0,.8);
  padding:38px; min-height:380px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease-out);
}
.ice-card::before{ /* top sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 30%),
             linear-gradient(115deg, transparent 42%, rgba(255,255,255,.12) 50%, transparent 58%);
  mix-blend-mode:screen; opacity:.8;
}
.ice-card:hover{ transform:translateY(-8px); border-color:rgba(56,216,255,.55);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 50px 110px -45px rgba(0,0,0,.85), 0 0 60px -20px rgba(56,216,255,.4); }
.ice-card .tag{ position:absolute; top:26px; left:26px; }
.ice-card .num{ position:absolute; top:24px; right:30px; font-family:var(--display); color:var(--slate); font-size:38px; }
.ice-card h3{ font-size:clamp(24px,2.4vw,34px); margin-bottom:14px; letter-spacing:-.02em; }
.ice-card p{ color:var(--ink-2); max-width:42ch; font-size:15.5px; }
.ice-card .glyph{
  position:absolute; top:0; right:0; width:55%; height:62%; opacity:.4;
  background-repeat:no-repeat; background-position:top right; background-size:contain;
  pointer-events:none; transition:opacity .5s var(--ease);
}
.ice-card:hover .glyph{ opacity:.62; }
.col-7{ grid-column:span 7; } .col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; } .col-12{ grid-column:span 12; }
.ice-card.feature{ min-height:460px; }
.ice-card.feature .sov{
  position:absolute; right:-4%; bottom:-6%; width:46%; max-width:330px;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.5)); pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);
  mask-image:linear-gradient(180deg,#000 70%,transparent);
}
@media (max-width:900px){
  .blocks{ grid-template-columns:1fr; }
  .col-7,.col-5,.col-6,.col-12{ grid-column:span 1; }
  .ice-card.feature .sov{ width:55%; }
}

/* =========================================================
   AGENTS — "operated by agents" feature
   ========================================================= */
.agents .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.agents h2{ font-size:clamp(32px,5vw,72px); letter-spacing:-.03em; line-height:1.0; margin:22px 0 24px; }
.agents h2 .glow{
  background:linear-gradient(180deg,#fff,var(--cyan) 150%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.agents .caps{ display:grid; gap:14px; margin-top:34px; }
.agents .cap{ display:flex; gap:14px; align-items:flex-start; }
.agents .cap .dot{ width:9px; height:9px; border-radius:50%; background:var(--cyan); margin-top:8px;
  box-shadow:0 0 12px var(--cyan); flex:none; }
.agents .cap .d{ font-family:var(--display); color:var(--ink); font-size:16px; }
.agents .cap p{ color:var(--muted); font-size:14.5px; margin-top:2px; max-width:40ch; }

.agent-case{
  position:relative; justify-self:center; width:min(100%,500px); aspect-ratio:1/1.18;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(155deg, rgba(182,186,197,.16), rgba(56,62,78,.10) 50%, rgba(56,216,255,.14));
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -70px 120px -50px rgba(56,216,255,.34),
    0 70px 150px -50px rgba(0,0,0,.8);
}
.agent-case::before{ /* refraction streaks */
  content:""; position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(118deg, transparent 36%, rgba(255,255,255,.16) 49%, transparent 55%),
             linear-gradient(72deg, transparent 64%, rgba(56,216,255,.12) 74%, transparent 80%);
}
.agent-case .halo{ /* cyan pedestal glow */
  position:absolute; left:50%; bottom:-12%; transform:translateX(-50%);
  width:78%; height:42%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(56,216,255,.5), transparent 72%);
  filter:blur(14px); pointer-events:none;
}
.agent-case img{
  position:absolute; left:50%; bottom:-1%; transform:translateX(-50%);
  width:98%; filter:saturate(108%) contrast(104%) drop-shadow(0 34px 60px rgba(0,0,0,.55));
}
.agent-case .frost-grain{ position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); }
@media (max-width:900px){ .agents .grid{ grid-template-columns:1fr; } .agents .order-img{ order:-1; } }

/* =========================================================
   INDUSTRIES — marquee
   ========================================================= */
.industries{ padding-left:0; padding-right:0; overflow:hidden; }
.industries .wrap{ padding:0 var(--pad); }
.industries .sec-head{ margin-bottom:46px; }
.marquee{ position:relative; display:flex; flex-direction:column; gap:16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mtrack{ display:flex; gap:16px; width:max-content; will-change:transform; }
.mtrack.a{ animation:mscroll 40s linear infinite; }
.mtrack.b{ animation:mscroll 52s linear infinite reverse; }
.industries:hover .mtrack{ animation-play-state:paused; }
@keyframes mscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--display); font-size:clamp(15px,1.5vw,19px); letter-spacing:-.01em; color:var(--ink-2);
  white-space:nowrap; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:rgba(56,216,255,.5); }
.chip .pip{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
@media (prefers-reduced-motion: reduce){ .mtrack.a,.mtrack.b{ animation:none; } }

/* =========================================================
   ABOUT — house of brands
   ========================================================= */
.about .grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about h2{ font-size:clamp(30px,4.5vw,60px); letter-spacing:-.03em; margin-bottom:24px; }
.about p + p{ margin-top:18px; }
.house{ display:grid; gap:14px; }
.house .parent{
  border:1px solid rgba(56,216,255,.4); border-radius:14px; padding:22px 26px;
  background:linear-gradient(120deg, rgba(56,216,255,.10), transparent);
  display:flex; align-items:center; gap:16px;
}
.house .parent .mark{ width:30px; filter:drop-shadow(0 0 10px rgba(56,216,255,.6)); }
.house .parent .word{ font-family:var(--display); letter-spacing:.18em; font-size:15px; text-transform:uppercase; }
.house .parent small{ display:block; color:var(--muted); letter-spacing:.02em; text-transform:none; font-family:var(--body); margin-top:3px; font-size:12.5px; }
.house .branches{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.house .leaf{
  border:1px solid var(--glass-edge); border-radius:12px; padding:16px;
  background:var(--glass); font-size:13.5px; color:var(--ink-2);
}
.house .leaf .d{ font-family:var(--display); color:var(--ink); display:block; margin-bottom:4px; font-size:14.5px; }
.house .leaf.ghost{ border-style:dashed; color:var(--muted); }
@media (max-width:900px){ .about .grid{ grid-template-columns:1fr; gap:40px; } }

/* =========================================================
   CONTACT / CTA
   ========================================================= */
.cta{ text-align:center; }
.cta .crown-lg{ width:64px; margin:0 auto 30px; filter:drop-shadow(0 0 30px rgba(56,216,255,.55)); }
.cta h2{ font-size:clamp(40px,8vw,128px); letter-spacing:-.04em; line-height:.92; }
.cta h2 .glow{
  background:linear-gradient(180deg,#fff,var(--cyan) 140%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta .lead{ margin:26px auto 40px; text-align:center; }
.capture{
  display:flex; gap:10px; max-width:480px; margin:0 auto;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:999px;
  padding:7px 7px 7px 22px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.capture input{
  flex:1; background:transparent; border:none; outline:none; color:var(--ink);
  font-family:var(--body); font-size:15px;
}
.capture input::placeholder{ color:var(--muted); }

/* combined Get-started section: finder is primary, email is the calmer 2nd path */
.getstarted h2{ font-size:clamp(34px,6vw,88px); }
.getstarted .lead{ margin:22px auto 34px; max-width:60ch; }
.anchor-target{ position:absolute; top:-90px; }
.cta-alt{ max-width:480px; margin:40px auto 0; }
.alt-divider{ display:flex; align-items:center; gap:16px; margin:0 0 22px; color:var(--muted);
  font-family:var(--display); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; }
.alt-divider::before, .alt-divider::after{ content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.cta-alt .capture{ margin:0 auto; }
.cta-alt .contact-meta{ margin-top:24px; }

footer{
  border-top:1px solid rgba(255,255,255,.07); padding:46px var(--pad);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  color:var(--muted); font-size:13.5px;
}
footer .brand .word{ font-size:14px; }
footer .links{ display:flex; gap:26px; }
footer .links a{ color:var(--muted); text-decoration:none; transition:color .3s; }
footer .links a:hover{ color:var(--ink); }

/* =========================================================
   FLOATING SECTION DOCK — jump-to-section icons (bottom center)
   appears once you leave the hero; steps aside while you scroll
   ========================================================= */
.srail{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(16px);
  z-index:55; display:flex; flex-direction:row; align-items:center; gap:4px; padding:7px 9px;
  border-radius:999px; border:1px solid var(--glass-edge); background:rgba(12,15,21,.58);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.8);
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease), transform .65s cubic-bezier(.16,1,.3,1);
}
.srail.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
/* steps aside while the page is actively scrolling */
.srail.show.busy{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(16px); }
.srail-dot{
  position:relative; display:grid; place-items:center; width:36px; height:36px;
  border-radius:50%; color:var(--muted); text-decoration:none;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.srail-dot svg{ width:17px; height:17px; }
.srail-dot:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.srail-dot.on{ color:var(--cyan); background:rgba(56,216,255,.10);
  box-shadow:0 0 14px -4px rgba(56,216,255,.55) inset, 0 0 12px -6px rgba(56,216,255,.6); }
.srail-tip{
  position:absolute; bottom:calc(100% + 13px); left:50%; transform:translateX(-50%) translateY(4px);
  white-space:nowrap; padding:5px 11px; border-radius:8px;
  font-family:var(--display); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:rgba(12,15,21,.88); border:1px solid var(--glass-edge);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.srail-dot:hover .srail-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
/* compact dock on small screens — slimmer dots, no tooltips */
@media (max-width:980px){
  .srail{ gap:2px; padding:6px 8px; bottom:calc(12px + env(safe-area-inset-bottom)); }
  .srail-dot{ width:34px; height:34px; }
  .srail-dot svg{ width:15px; height:15px; }
  .srail-tip{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .srail{ transition:none; } }

/* =========================================================
   HERO readability scrim + text shadows
   ========================================================= */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,11,16,.30) 0%, transparent 18%, transparent 34%, rgba(8,11,16,.82) 78%, rgba(8,11,16,.95) 100%);
}
.hero .hero-stage{ position:relative; z-index:1; }
.hero .scroll-cue{ z-index:2; }
.hero .titanic{ text-shadow:0 6px 50px rgba(8,11,16,.72); }

/* dissolve the hard seam between the full-height hero and the first content
   section — continue the hero's dark scrim downward and fade it to nothing,
   so scrolling reads as one continuous descent rather than two stacked pages */
.deploy::after{
  content:""; position:absolute; left:0; right:0; top:0; height:38vh; z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,11,16,.92) 0%, rgba(8,11,16,.55) 42%, rgba(8,11,16,0) 100%);
}
.deploy > .wrap{ position:relative; z-index:1; }
.hero .lead{ color:#e9eff5; text-shadow:0 2px 24px rgba(8,11,16,.9); }
/* hero subhead: one idea per line, balanced wrapping at any width */
.hero-sub .ln{ display:block; text-wrap:balance; }
.hero-sub .ln + .ln{ margin-top:7px; }
.hero .eyebrow{ text-shadow:0 2px 16px rgba(8,11,16,.85); }
/* hero kicker — readable chip so it doesn't blend into the cyan 3D glow */
.hero .kicker{
  color:#eaf6ff; font-weight:600;
  padding:7px 15px 7px 13px; border-radius:999px;
  background:rgba(10,14,20,.5);
  border:1px solid rgba(56,216,255,.3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 10px rgba(8,11,16,.95);
  box-shadow:0 4px 24px rgba(8,11,16,.4), inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero .kicker::before{ width:18px; box-shadow:0 0 8px var(--cyan); }

/* sector icons + concise cards */
.sec-ico{ width:34px; height:34px; color:var(--cyan); margin-bottom:18px;
  filter:drop-shadow(0 0 10px rgba(56,216,255,.35)); }
.sector-card h3{ margin-bottom:10px; }
.sector-card p{ font-size:15px; }

/* technology unit icons */
.tech .unit .u-ico{ width:24px; height:24px; color:var(--cyan); filter:drop-shadow(0 0 8px rgba(56,216,255,.4)); }

/* MAEM mesh stage — refined radial "shared brain" hub (built by main.js) */
.maem-stage{ margin-top:54px; position:relative; }
.maem-svg{ width:100%; height:auto; overflow:visible; display:block; max-width:620px; margin:0 auto; }
.maem-back circle{ fill:none; stroke:rgba(125,170,210,.07); stroke-width:1; }
.maem-orbit{ stroke:rgba(56,216,255,.20); stroke-width:1; stroke-dasharray:2 10;
  transform-origin:center; transform-box:fill-box; animation:coreSpin 70s linear infinite; }
.maem-edge{ stroke:rgba(56,216,255,.13); stroke-width:1; }
.maem-edge.spoke{ stroke:rgba(56,216,255,.22); }
.maem-pkt{ fill:#e6fbff; }
.maem-node circle.dot{ filter:drop-shadow(0 0 8px currentColor); animation:ndpulse 5s ease-in-out infinite; animation-delay:var(--d,0s); }
.maem-node circle.ring{ fill:none; stroke:currentColor; stroke-opacity:.42; stroke-width:1.2; }
.maem-node .node-t{ font-family:var(--display); fill:#e8eff7; font-size:13px; letter-spacing:.09em;
  paint-order:stroke; stroke:rgba(8,11,16,.6); stroke-width:3px; stroke-linejoin:round; }
.maem-core .cglow{ fill:rgba(56,216,255,.16); filter:blur(11px); }
.maem-core .cdisc{ stroke:rgba(56,216,255,.16); stroke-width:1; }
.maem-core .cring{ fill:none; stroke:rgba(56,216,255,.5); stroke-width:1.3; }
.maem-core .cring2{ fill:none; stroke:rgba(56,216,255,.32); stroke-width:1; stroke-dasharray:2 7;
  transform-origin:center; transform-box:fill-box; animation:coreSpin 26s linear infinite reverse; }
.maem-core .core-t{ font-family:var(--display); fill:#cfeafc; font-size:9.5px; letter-spacing:.24em; }
.maem-core .core-exec{ fill:#eaf7ff; font-size:10px; letter-spacing:.02em; font-weight:600; }
@keyframes ndpulse{ 0%,100%{ opacity:.62; } 50%{ opacity:1; } }
@keyframes coreSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .maem-node circle.dot, .maem-orbit, .maem-core .cring2{ animation:none; } }
@media (max-width:680px){ .maem-node .node-t{ font-size:15px; } }

/* electric pulse sweeping the agent circuitry (council portraits) */
.cc-portrait::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  box-shadow:inset 0 0 44px -12px color-mix(in srgb, var(--ac) 65%, transparent);
  animation:vpulse 6s ease-in-out infinite;
}
@keyframes vpulse{ 0%,100%{ opacity:.3; } 50%{ opacity:.6; } }
.cc-portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:screen;
  background:linear-gradient(116deg, transparent 43%, color-mix(in srgb, var(--ac) 48%, transparent) 50%, transparent 57%);
  transform:translateX(-130%); animation:vsweep 11s ease-in-out infinite;
}
@keyframes vsweep{ 0%{ transform:translateX(-130%); } 60%,100%{ transform:translateX(130%); } }
.council-card:nth-child(even) .cc-portrait::after{ animation-delay:5s; }
.council-card:nth-child(3n) .cc-portrait::after{ animation-delay:3s; }
.council-card:nth-child(3n) .cc-portrait::before{ animation-delay:1.6s; }
@media (prefers-reduced-motion: reduce){ .cc-portrait::after, .cc-portrait::before{ animation:none; } }

/* =========================================================
   MOTION — reveal primitives
   ========================================================= */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.par{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .scroll-cue .line{ animation:none; }
}

/* word-reveal for mission */
.mission .word{ opacity:.12; transition:opacity .6s var(--ease); }
.mission.lit .word{ opacity:1; }

/* =========================================================
   COUNCIL — the executive AI agents (roster)
   ========================================================= */
.col-3{ grid-column:span 3; } .col-4{ grid-column:span 4; }
@media (max-width:900px){ .col-3,.col-4{ grid-column:span 1; } }
@media (min-width:901px) and (max-width:1100px){ .col-4{ grid-column:span 6; } .col-3{ grid-column:span 6; } }

.council-card{
  --ac:#38d8ff;
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 90px -50px rgba(0,0,0,.8);
  display:flex; flex-direction:column; padding:0; min-height:0;
  transition:transform .5s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.council-card::after{ /* signature corner glow */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 75% at 100% 0%, color-mix(in srgb, var(--ac) 24%, transparent), transparent 55%);
}
.council-card:hover{ transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 50px 110px -45px rgba(0,0,0,.85), 0 0 60px -20px color-mix(in srgb, var(--ac) 60%, transparent); }

.cc-portrait{ position:relative; height:210px; overflow:hidden;
  background:radial-gradient(80% 90% at 50% 120%, color-mix(in srgb, var(--ac) 28%, transparent), transparent 70%); }
.cc-portrait img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 13%;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4));
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
  mask-image:linear-gradient(180deg,#000 82%,transparent);
  transition:transform .6s var(--ease-out); }
.council-card:hover .cc-portrait img{ transform:scale(1.05); }
.card-crown{ position:absolute; top:18px; right:20px; width:26px; opacity:.9; z-index:2;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--ac) 75%, transparent));
  transition:transform .5s var(--ease); }
.council-card:hover .card-crown{ transform:translateY(-3px) rotate(-5deg); }

.cc-body{ padding:22px 26px 28px; position:relative; z-index:1; }
.cc-body .role{ color:var(--ac); margin:0 0 12px; display:inline-flex; }
.cc-body h3{ font-size:clamp(20px,2vw,27px); margin-bottom:6px; letter-spacing:-.02em; }
.cc-body h3 .pending{ font-family:var(--body); font-weight:400; font-size:13px; color:var(--muted);
  letter-spacing:.04em; display:block; margin-top:4px; }
.cc-body p{ color:var(--ink-2); font-size:14px; line-height:1.5; }
.cc-body h3.unnamed{
  color:var(--muted); font-family:var(--display); font-weight:400;
  font-size:16px; letter-spacing:.02em; display:flex; align-items:center; gap:9px; margin-bottom:6px;
}
.cc-body h3.unnamed::before{ content:"\25C7"; color:var(--ac); font-size:13px; }

/* Sovereign feature card — horizontal */
.council-card.feature{ flex-direction:row; align-items:stretch; }
.council-card.feature .cc-portrait{ width:44%; height:auto; min-height:320px; }
.council-card.feature .cc-portrait img{ object-position:50% 20%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 100%);
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 100%); }
.council-card.feature .cc-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,3vw,48px); }
.council-card.feature .cc-body h3{ font-size:clamp(28px,3vw,42px); }
.council-card.feature .cc-body .role{ font-size:13px; }
.council-card.feature .cc-body p{ font-size:15.5px; max-width:46ch; }
@media (max-width:760px){
  .council-card.feature{ flex-direction:column; }
  .council-card.feature .cc-portrait{ width:100%; height:210px; min-height:0; }
  .council-card.feature .cc-portrait img{ object-position:50% 13%;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent); mask-image:linear-gradient(180deg,#000 82%,transparent); }
}

/* =========================================================
   TECHNOLOGY — MAEM
   ========================================================= */
.tech .grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,72px); align-items:center; }
.tech h2{ font-size:clamp(30px,4.5vw,60px); letter-spacing:-.03em; line-height:1.02; margin:0; }
.tech .units{ display:grid; gap:12px; }
.tech .units-row{ grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px; }
@media (max-width:900px){ .tech .units-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tech .units-row{ grid-template-columns:1fr; } }
.tech .unit{
  display:flex; gap:16px; align-items:center; padding:18px 22px;
  border:1px solid var(--glass-edge); border-radius:14px; background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.tech .unit:hover{ border-color:rgba(56,216,255,.5); transform:translateX(4px); }
.tech .unit svg{ width:22px; flex:none; filter:drop-shadow(0 0 10px rgba(56,216,255,.5)); }
.tech .unit .d{ font-family:var(--display); color:var(--ink); font-size:15.5px; }
.tech .unit small{ display:block; color:var(--muted); font-size:13px; margin-top:2px; }
@media (max-width:900px){ .tech .grid{ grid-template-columns:1fr; gap:36px; } }

/* sector verticals (Small Business tile) */
.verticals{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.verticals span{
  font-size:12.5px; color:var(--ink-2); padding:6px 12px; border-radius:999px;
  border:1px solid var(--glass-edge); background:rgba(255,255,255,.03); white-space:nowrap;
}

/* =========================================================
   LIVE OPERATIONS CONSOLE
   ========================================================= */
.liveops{ padding-top:clamp(60px,9vh,110px); padding-bottom:clamp(60px,9vh,110px); }
.live-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.live-badge .pip{ width:8px; height:8px; border-radius:50%; background:#34e0a1; box-shadow:0 0 10px #34e0a1; animation:livepulse 1.8s ease-in-out infinite; }
@keyframes livepulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.55; } }

.console{ max-width:780px; margin:0 auto; border:1px solid var(--glass-edge); border-radius:18px;
  background:linear-gradient(180deg, rgba(16,20,28,.72), rgba(12,15,21,.72));
  backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 50px 110px -50px rgba(0,0,0,.8); overflow:hidden; }
.console-head{ display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.07); flex-wrap:wrap; }
.console-head .online{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-size:12px; letter-spacing:.04em; color:var(--muted); }
.console-head .online .ok{ width:7px; height:7px; border-radius:50%; background:#34e0a1; box-shadow:0 0 8px #34e0a1; }
.feed{ list-style:none; }
.feed-row{ display:flex; align-items:center; gap:16px; padding:15px 22px; border-bottom:1px solid rgba(255,255,255,.05); }
.feed-row:last-child{ border-bottom:none; }
.feed-row .who{ display:inline-flex; align-items:center; gap:9px; flex:none; width:172px;
  font-family:var(--display); font-size:13px; letter-spacing:.01em; color:var(--ink); }
.feed-row .who .who-dot{ width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--dept,#7fe6ff); box-shadow:0 0 9px var(--dept,#7fe6ff); }
.feed-row .who[data-dept="finance"]    { --dept:#34e0a1; }
.feed-row .who[data-dept="marketing"]  { --dept:#b79cff; }
.feed-row .who[data-dept="support"]    { --dept:#38d8ff; }
.feed-row .who[data-dept="engineering"]{ --dept:#5b8cff; }
.feed-row .who[data-dept="executive"]  { --dept:#f5c45a; }
.feed-row .who[data-dept="sales"]      { --dept:#4be0c0; }
.feed-row .who[data-dept="product"]    { --dept:#ff8fb3; }
.feed-row .act{ color:var(--ink-2); font-size:15px; flex:1; min-width:0; }
.feed-row .tick{ display:inline-flex; align-items:center; gap:5px; flex:none;
  font-family:var(--display); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:#34e0a1; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(52,224,161,.3); background:rgba(52,224,161,.08); }
.feed-row .tick svg{ width:12px; height:12px; }
.feed-row .when{ margin-left:4px; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; flex:none; width:64px; text-align:right; }
.feed-row.enter{ animation:rowin .55s var(--ease-out); }
@keyframes rowin{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.console-foot{ display:flex; justify-content:space-between; gap:16px; padding:13px 22px; border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--display); font-size:11px; letter-spacing:.06em; color:var(--muted); }
.console-foot .src{ color:var(--ink-2); }
.liveops-head{ margin-bottom:46px; }
@media (max-width:680px){
  .feed-row{ flex-wrap:wrap; gap:7px 12px; padding:14px 18px; }
  .feed-row .who{ width:auto; order:1; }
  .feed-row .when{ order:2; margin-left:auto; width:auto; }
  .feed-row .tick{ order:4; }
  .feed-row .act{ order:3; flex-basis:100%; font-size:13.5px; }
  .console-foot{ flex-direction:column; gap:5px; }
}

.contact-meta{
  display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:34px;
  font-family:var(--display); font-size:13px; letter-spacing:.06em; color:var(--muted);
}
.contact-meta b{ color:var(--ink-2); font-weight:400; }

/* =========================================================
   WHAT WE DEPLOY (products)
   ========================================================= */
.deploy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.deploy-card{ position:relative; min-height:380px; padding:40px; justify-content:flex-start; display:flex; flex-direction:column; }
.deploy-card .tag{ margin-bottom:20px; display:inline-flex; }
.deploy-card h3{ font-size:clamp(24px,2.6vw,34px); letter-spacing:-.01em; line-height:1.18; margin-bottom:16px; }
.deploy-card p{ color:var(--ink-2); font-size:15.5px; max-width:48ch; }
.deploy-card .status{ position:absolute; top:30px; right:34px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; border:1px solid; }
.deploy-card .status .pip{ width:7px; height:7px; }
.status.live{ color:#34e0a1; border-color:rgba(52,224,161,.42); background:rgba(52,224,161,.09); }
.status.live .pip{ background:#34e0a1; box-shadow:0 0 10px #34e0a1; animation:livepulse 1.8s ease-in-out infinite; }
.status.dev{ color:var(--ice); border-color:var(--glass-edge); background:rgba(255,255,255,.04); }
.status.dev .pip{ background:var(--ice); box-shadow:none; }
.deploy-foot{ display:flex; align-items:center; gap:18px; margin-top:auto; padding-top:28px; flex-wrap:wrap; }
/* product icon */
.deploy-ico{ width:34px; height:34px; color:var(--cyan); margin-bottom:18px;
  filter:drop-shadow(0 0 12px rgba(56,216,255,.45)); }
/* specific capability list */
.deploy-feat{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.deploy-feat li{ position:relative; padding-left:24px; color:var(--ink-2); font-size:14.5px; line-height:1.45; }
.deploy-feat li::before{ content:""; position:absolute; left:3px; top:.45em; width:7px; height:7px; border-radius:2px;
  background:var(--cyan); box-shadow:0 0 9px var(--cyan); }
/* self-serve demo prompt (Product 01) */
.demo-prompt{ margin-top:22px; padding:16px 18px; border-radius:14px;
  border:1px solid rgba(56,216,255,.28); background:rgba(56,216,255,.06); }
.demo-kicker{ font-family:var(--display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); display:block; margin-bottom:8px; }
.demo-prompt p{ font-size:14px; color:var(--ink); margin:0; line-height:1.5; max-width:none; }
.demo-prompt .demo-sub{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(56,216,255,.18); font-size:13px; color:var(--ink-2); }
.demo-prompt .demo-link{ color:var(--cyan); text-decoration:none; white-space:nowrap; }
.demo-prompt .demo-link:hover{ text-decoration:underline; }
.industry-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 4px; }
.industry-chips span{ font-family:var(--display); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); padding:5px 10px; border-radius:999px;
  border:1px solid rgba(56,216,255,.22); background:rgba(56,216,255,.05); }
@media (max-width:900px){ .deploy-grid{ grid-template-columns:1fr; } }

/* phone: condense both products so they share one screen */
@media (max-width:600px){
  .deploy-grid{ gap:14px; }
  .deploy-card{ min-height:0; padding:20px 20px 22px; }
  .deploy-card .deploy-ico{ width:24px; height:24px; margin-bottom:10px; }
  .deploy-card .tag{ margin-bottom:8px; }
  .deploy-card h3{ font-size:20px; line-height:1.15; margin-bottom:8px; }
  .deploy-card h3 br{ display:none; }
  .deploy-card p{ font-size:13.5px; line-height:1.45; max-width:none; }
  .deploy-card .status{ top:18px; right:18px; font-size:10px; padding:5px 10px; letter-spacing:.08em; }
  /* detail lives on larger screens; phone shows the summary + action only */
  .deploy-card .deploy-feat,
  .deploy-card .demo-prompt{ display:none; }
  .deploy-foot{ padding-top:16px; gap:10px; }
  .deploy-foot .btn{ font-size:13px; padding:11px 16px; }
  .deploy-foot .muted{ font-size:11.5px; }
}

/* =========================================================
   FIND YOUR BUSINESS (smart quote)
   ========================================================= */
.finder{ position:relative; max-width:820px; margin:8px auto 0; }
.finder-crown{ position:absolute; top:-46px; right:6px; width:30px; opacity:.55;
  filter:drop-shadow(0 0 12px rgba(56,216,255,.5)); }
.finder-bar{ position:relative; display:flex; gap:10px; align-items:center;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:16px;
  padding:9px 9px 9px 22px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.finder-bar:focus-within{ border-color:rgba(56,216,255,.55); box-shadow:0 0 40px -10px rgba(56,216,255,.6); }
.finder-bar input{ flex:1; background:transparent; border:none; outline:none; color:var(--ink);
  font-family:var(--body); font-size:16px; padding:8px 0; }
.finder-bar input::placeholder{ color:var(--muted); }
.suggest{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:6;
  background:#11151d; border:1px solid var(--glass-edge); border-radius:14px; overflow:hidden; display:none;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85); }
.suggest.open{ display:block; }
.suggest button{ display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  padding:13px 18px; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--ink-2); cursor:pointer; font-family:var(--body); font-size:15px; }
.suggest button:last-child{ border-bottom:none; }
.suggest button:hover{ background:rgba(56,216,255,.08); color:var(--ink); }
.suggest .cat{ margin-left:auto; color:var(--muted); font-size:12px; font-family:var(--display); letter-spacing:.04em; }
.finder-result{ margin-top:22px; }
.finder-loading{ display:flex; align-items:center; gap:12px; color:var(--ink-2); font-family:var(--display); font-size:14px; padding:24px 4px; }
.finder-loading .sp{ width:16px; height:16px; border:2px solid rgba(56,216,255,.25); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.biz-card{ border:1px solid var(--glass-edge); border-radius:18px; background:var(--glass);
  padding:32px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 90px -50px rgba(0,0,0,.8); }
.biz-card .biz-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.biz-card h4{ font-family:var(--display); font-size:23px; letter-spacing:-.01em; }
.biz-card .biz-cat{ color:var(--cyan); font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; }
.biz-card .biz-tier{ text-align:right; }
.biz-card .biz-tier .t{ font-family:var(--display); color:var(--ink); font-size:15px; }
.biz-card .biz-tier small{ display:block; color:var(--muted); font-size:12px; }
.biz-card .found{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 24px; }
.biz-card .found span{ font-size:12.5px; color:var(--ink-2); padding:6px 12px; border-radius:999px;
  border:1px solid var(--glass-edge); background:rgba(52,224,161,.06); display:inline-flex; gap:7px; align-items:center; }
.biz-card .found span::before{ content:"\2713"; color:#34e0a1; }
.biz-card .biz-foot{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.biz-card .demo-link{ color:var(--cyan); text-decoration:none; font-family:var(--display); font-size:13px; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; }
.biz-card .demo-link:hover{ text-decoration:underline; }

/* =========================================================
   EXECUTIVE AI COUNCIL — animated org hierarchy
   ========================================================= */
.org{ position:relative; margin-top:10px; }
.org-links{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible; }

/* --- CEO node: the one and only portrait, at the crown --- */
.org-top{ position:relative; z-index:2; display:flex; justify-content:center; }
.ceo-node{
  --ac:#38d8ff;
  position:relative; display:flex; align-items:center; gap:clamp(18px,2.4vw,30px);
  width:min(560px,100%); padding:22px clamp(22px,2.6vw,34px) 22px 22px;
  border-radius:20px; background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 50px 110px -50px rgba(0,0,0,.85), 0 0 70px -32px rgba(56,216,255,.6);
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.org.lit .ceo-node{ opacity:1; transform:none; }
.ceo-node::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%, rgba(56,216,255,.20), transparent 55%); }
.ceo-node::before{ /* glowing connector port at bottom center */
  content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; border-radius:50%;
  transform:translateX(-50%); background:var(--cyan); z-index:3;
  box-shadow:0 0 16px var(--cyan), 0 0 0 4px rgba(56,216,255,.18); animation:portPulse 2.6s ease-in-out infinite; }
.ceo-portrait{
  position:relative; flex:none; width:clamp(132px,16vw,164px); aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:
    radial-gradient(60% 52% at 50% 36%, rgba(125,175,210,.5), transparent 72%),
    radial-gradient(78% 80% at 50% 118%, rgba(56,216,255,.62), transparent 72%),
    linear-gradient(180deg, rgba(40,52,70,.55), rgba(9,13,19,.55));
  border:1px solid rgba(56,216,255,.4);
  box-shadow:inset 0 0 26px -8px rgba(56,216,255,.5); }
.ceo-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 10%;
  filter:brightness(1.22) contrast(108%) saturate(118%) drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
.ceo-portrait::after{ content:""; position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(116deg, transparent 44%, rgba(56,216,255,.4) 50%, transparent 57%);
  transform:translateX(-130%); animation:vsweep 9s ease-in-out infinite; }
.ceo-crown{ position:absolute; top:-17px; left:calc(22px + clamp(132px,16vw,164px)/2); transform:translateX(-50%);
  width:34px; z-index:4; filter:drop-shadow(0 0 14px rgba(56,216,255,.8)); animation:crownFloat 5s ease-in-out infinite; }
.ceo-meta{ position:relative; z-index:1; }
.ceo-tag{ font-family:var(--display); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:8px; }
.ceo-meta h3{ font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; margin-bottom:10px; }
.ceo-meta p{ color:var(--ink-2); font-size:14px; line-height:1.5; max-width:34ch; }
@keyframes crownFloat{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } }
@keyframes portPulse{ 0%,100%{ box-shadow:0 0 16px var(--cyan), 0 0 0 4px rgba(56,216,255,.18); } 50%{ box-shadow:0 0 22px var(--cyan), 0 0 0 7px rgba(56,216,255,.04); } }

/* --- the six departmental agents beneath --- */
.org-children{ list-style:none; position:relative; z-index:2; display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  margin-top:clamp(96px,13vh,168px); padding:0; }
.agent-node{
  --ac:#38d8ff;
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:20px 18px 22px; border-radius:15px;
  background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:blur(13px) saturate(135%); -webkit-backdrop-filter:blur(13px) saturate(135%);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 30px 70px -45px rgba(0,0,0,.85);
  opacity:0; transform:translateY(28px) scale(.92);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease-out);
  transition-delay:var(--d,0s); }
.org.lit .agent-node{ opacity:1; transform:none; }
.agent-node::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 58%); }
.agent-node:hover{ transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 90px -40px rgba(0,0,0,.9), 0 0 50px -18px color-mix(in srgb, var(--ac) 70%, transparent); }
.an-port{ position:absolute; left:50%; top:-6px; width:11px; height:11px; border-radius:50%; transform:translateX(-50%);
  background:var(--ac); box-shadow:0 0 14px var(--ac), 0 0 0 4px color-mix(in srgb, var(--ac) 18%, transparent); z-index:3; }
/* high-end crest: a distinct emblem per department, in its accent colour */
.an-emblem{ position:relative; flex:none; width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:radial-gradient(72% 72% at 50% 28%, color-mix(in srgb,var(--ac) 18%, transparent), rgba(8,12,18,.5));
  border:1px solid color-mix(in srgb,var(--ac) 42%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 8%, transparent),
             0 8px 20px -8px color-mix(in srgb,var(--ac) 55%, transparent),
             inset 0 0 14px -6px color-mix(in srgb,var(--ac) 70%, transparent);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease); }
.crest{ width:40px; height:40px; color:var(--ac); display:block;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--ac) 55%, transparent)); }
.crest-frame{ fill:color-mix(in srgb,var(--ac) 10%, transparent); stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.crest-glyph{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.crest-glyph circle{ fill:none; }
.crest-glyph rect{ fill:none; }
.agent-node:hover .an-emblem{ transform:translateY(-2px);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 15%, transparent),
             0 10px 26px -8px color-mix(in srgb,var(--ac) 75%, transparent),
             inset 0 0 16px -4px color-mix(in srgb,var(--ac) 80%, transparent); }
.an-body h4{ font-family:var(--display); font-weight:500; font-size:14.5px; letter-spacing:-.01em; line-height:1.2; margin-bottom:6px; color:var(--ink); }
.an-body span{ display:block; color:var(--muted); font-size:12px; line-height:1.4; }

/* --- connectors + travelling data pulses (drawn by main.js) --- */
.org-link{ fill:none; stroke-width:1.6; stroke-linecap:round; opacity:0;
  transition:stroke-dashoffset 1.25s var(--ease-out), opacity .7s ease; transition-delay:.4s; }
.org.lit .org-link{ opacity:.6; }
.org-pulse{ opacity:0; transition:opacity .6s ease; transition-delay:1.4s; }
.org.lit .org-pulse{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .ceo-node,.agent-node{ opacity:1 !important; transform:none !important; }
  .ceo-node::before,.ceo-portrait::after,.an-avatar::after{ animation:none; }
}
@media (max-width:1080px){
  .org-children{ grid-template-columns:repeat(3,1fr); gap:13px; margin-top:clamp(82px,11vh,134px); }
}
@media (max-width:680px){
  .org-children{ grid-template-columns:repeat(2,1fr); gap:11px; margin-top:80px; }
  .ceo-node{ flex-direction:column; text-align:center; align-items:center; padding:28px 22px 24px; }
  .ceo-meta p{ margin:0 auto; }
  .an-body span{ font-size:11px; }
}

/* logo head reused where crowns used to be (CTA mark, footer, shard) */
.cta-logo{ display:block; width:66px; height:66px; margin:0 auto 30px; border-radius:50%;
  background:url("assets/logo-mark.webp") no-repeat 50% 24% / 165%;
  border:1px solid rgba(56,216,255,.3);
  box-shadow:inset 0 0 16px rgba(56,216,255,.14), 0 0 28px -6px rgba(56,216,255,.5);
  filter:drop-shadow(0 0 10px rgba(56,216,255,.4)); }
footer .foot-mark{ width:24px; height:24px; border-radius:50%; flex:none; display:inline-block;
  background:url("assets/logo-mark.webp") no-repeat 50% 24% / 165%;
  border:1px solid rgba(56,216,255,.28); box-shadow:inset 0 0 8px rgba(56,216,255,.12);
  filter:drop-shadow(0 0 6px rgba(56,216,255,.35)); }
.shard .shard-logo{ width:62%; border-radius:50%; filter:drop-shadow(0 0 26px rgba(56,216,255,.6)); }

/* =========================================================
   MESH — diagram + principles fused into one compact figure
   ========================================================= */
.mesh-combined{ display:grid; grid-template-columns:1fr minmax(340px,1.1fr) 1fr;
  grid-template-rows:auto auto; align-items:center;
  gap:clamp(20px,3vw,42px) clamp(18px,2.6vw,44px); margin-top:44px; }
.mesh-combined .mesh-viz{ grid-column:2; grid-row:1 / span 2; }
.mesh-viz{ position:relative; }
.mesh-combined .maem-svg{ max-width:520px; }
.mesh-viz .maem-stage{ margin:6px 0; }
.mesh-cap{ display:flex; align-items:center; gap:9px; font-family:var(--display);
  font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); justify-content:center; }
.mesh-cap .ar{ color:var(--cyan); font-size:14px; filter:drop-shadow(0 0 6px rgba(56,216,255,.6)); }
.mesh-in{ margin-bottom:2px; }
.mesh-out{ margin-top:2px; }

.mc-point{ display:flex; gap:13px; align-items:flex-start; }
.mc-point.p1{ grid-column:1; grid-row:1; }
.mc-point.p2{ grid-column:3; grid-row:1; }
.mc-point.p3{ grid-column:1; grid-row:2; }
.mc-point.p4{ grid-column:3; grid-row:2; }
/* right-hand points mirror inward so they frame the hub */
.mc-point.p2, .mc-point.p4{ flex-direction:row-reverse; text-align:right; }
.mc-point.p2 .mc-body p, .mc-point.p4 .mc-body p{ margin-left:auto; }
.mc-n{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:12px; letter-spacing:.04em; color:var(--cyan);
  border:1px solid rgba(56,216,255,.36); background:rgba(56,216,255,.06);
  box-shadow:inset 0 0 12px -6px rgba(56,216,255,.7); }
.mc-body h4{ font-family:var(--display); font-weight:500; font-size:15.5px; letter-spacing:-.01em; line-height:1.22; color:var(--ink); margin-bottom:4px; }
.mc-body p{ color:var(--ink-2); font-size:13px; line-height:1.45; max-width:23ch; }
@media (max-width:900px){
  .mesh-combined{ grid-template-columns:1fr 1fr; gap:24px 28px; }
  .mesh-combined .mesh-viz{ grid-column:1 / -1; grid-row:1; }
  .mesh-combined .maem-svg{ max-width:480px; }
  .mc-point.p1{ grid-column:1; grid-row:2; }
  .mc-point.p2{ grid-column:2; grid-row:2; }
  .mc-point.p3{ grid-column:1; grid-row:3; }
  .mc-point.p4{ grid-column:2; grid-row:3; }
  .mc-point.p2, .mc-point.p4{ flex-direction:row; text-align:left; }
  .mc-point.p2 .mc-body p, .mc-point.p4 .mc-body p{ margin-left:0; }
  .mc-body p{ max-width:30ch; }
}
@media (max-width:540px){
  .mesh-combined{ grid-template-columns:1fr; }
  .mesh-combined .mesh-viz{ grid-column:1; grid-row:1; }
  .mc-point.p1{ grid-column:1; grid-row:2; }
  .mc-point.p2{ grid-column:1; grid-row:3; }
  .mc-point.p3{ grid-column:1; grid-row:4; }
  .mc-point.p4{ grid-column:1; grid-row:5; }
  .mc-body p{ max-width:42ch; }
}

/* =========================================================
   ELECTRIC CHARGE — a current runs through a section's header
   as it scrolls into view, then settles to a subtle hairline
   ========================================================= */
.sec-head, .electrify{ position:relative; }
/* static hairline that lingers after the charge */
.sec-head::before, .electrify::before{
  content:""; position:absolute; left:0; top:-18px; height:1px; width:100%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(56,216,255,.22) 16%, rgba(56,216,255,.22) 84%, transparent);
  opacity:0; transition:opacity .8s ease;
}
.sec-head.charged::before, .electrify.charged::before{ opacity:1; }
/* the bright current that races across once */
.sec-head::after, .electrify::after{
  content:""; position:absolute; left:0; top:-19px; height:3px; width:18%; border-radius:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, #eafaff 42%, var(--cyan) 66%, transparent);
  box-shadow:0 0 14px var(--cyan), 0 0 30px rgba(56,216,255,.55);
  opacity:0; transform:translateX(-40%);
}
.sec-head.charged::after, .electrify.charged::after{ animation:currentRun 1.15s var(--ease-out); }
@keyframes currentRun{
  0%{ opacity:0; transform:translateX(-40%); }
  12%{ opacity:1; }
  86%{ opacity:1; }
  100%{ opacity:0; transform:translateX(580%); }
}
/* the heading flickers alive, then STAYS gently activated */
.sec-head.charged h2, .electrify.charged h2, .electrify.charged .mission-title{
  animation:voltGlow 1.2s var(--ease-out);
  text-shadow:0 0 13px rgba(56,216,255,.26), 0 0 1px rgba(56,216,255,.4);
}
@keyframes voltGlow{
  0%{ text-shadow:none; }
  8%{ text-shadow:0 0 3px #fff, 0 0 18px var(--cyan); }
  15%{ text-shadow:0 0 1px var(--cyan); }
  24%{ text-shadow:0 0 24px var(--cyan), 0 0 46px rgba(56,216,255,.5); }
  44%{ text-shadow:0 0 10px rgba(56,216,255,.35); }
  100%{ text-shadow:none; }
}
/* the eyebrow flashes, then holds a steady cyan charge */
.sec-head.charged .eyebrow, .electrify.charged .eyebrow{
  animation:eyeFlash 1.1s var(--ease-out);
  filter:drop-shadow(0 0 5px rgba(56,216,255,.5));
  border-color:rgba(56,216,255,.5);
  color:#dff4ff;
}
@keyframes eyeFlash{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(56,216,255,.5)); } 18%{ filter:drop-shadow(0 0 9px var(--cyan)) brightness(1.4); } }
@media (prefers-reduced-motion: reduce){
  .sec-head.charged::after, .electrify.charged::after{ animation:none; opacity:0; }
  .sec-head.charged h2, .electrify.charged h2, .electrify.charged .mission-title,
  .sec-head.charged .eyebrow, .electrify.charged .eyebrow{ animation:none; }
}

/* =========================================================
   HERO — "THE KINGS" Automan/Cursor handwriting entrance
   The wordmark is a set of monoline SVG strokes. A spinning
   "Cursor" pen rides each stroke and lays the glowing ink down
   one continuous pen-motion at a time — drawing every letter,
   exactly like Cursor built objects on the show. Afterward the
   pen idles, running back through the letters and re-tracing
   each stroke on a gentle loop.
   ========================================================= */
.hero-a .stack{ gap:20px; }
.hero-tag{ font-size:var(--tagline-size, clamp(15px,1.5vw,19px)); color:#dfe9f2; letter-spacing:.005em; }

/* the wordmark — real Orbitron letterforms on a single row, each a faint
   ghost that the light-pen ignites; afterward an electric current runs through. */
.titanic.automan{ position:relative; display:inline-block; line-height:.92;
  font-family:var(--wordmark, var(--display)); font-weight:var(--wordmark-weight, 700);
  letter-spacing:var(--wordmark-ls, -.005em); -webkit-text-rendering:optimizeLegibility; text-rendering:optimizeLegibility; }
.hero .titanic.automan{ font-weight:var(--wordmark-weight, 700); }   /* override the thin hero weight */
.titanic.automan .gl .g, .titanic.automan .gl .b{ font-family:inherit; font-weight:inherit; }
.hero-tag{ font-family:var(--tagline, var(--body)); font-weight:var(--tagline-weight, 400);
  letter-spacing:var(--tagline-ls, .005em); text-transform:var(--tagline-tt, none); }
.hero-a .stack .titanic.automan{ font-size:clamp(30px,8.6vw,108px); }
.aw-line{ display:flex; justify-content:center; align-items:baseline; white-space:nowrap; }
.aw-sp{ display:inline-block; width:.52em; flex:none; }   /* space between THE and KINGS */
@media (max-width:560px){
  .hero-a .stack .titanic.automan{ font-size:clamp(26px,11.5vw,62px); }
}

/* one glyph = a faint ghost with a bright neon copy stacked on top,
   the bright copy revealed by a clip the Cursor drives across it */
.gl{ position:relative; display:inline-block; }
.gl .g,.gl .b{ display:block; }
.gl .g{                                  /* faint engraved ghost */
  color:rgba(150,166,190,.17);
  text-shadow:0 1px 0 rgba(0,0,0,.4); }
.gl .b{                                  /* the ignited neon glyph */
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(177deg,#ffffff 4%, #d6f4ff 42%, #6fdcff 78%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 7px rgba(120,225,255,.5)) drop-shadow(0 0 20px rgba(56,216,255,.28));
  -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0); }  /* JS drives the reveal */
.gl.lit .b{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }
/* idle: a quick electric current crackles through the letter as it passes */
.gl.surge .b{ animation:awSurge .62s cubic-bezier(.3,.7,.25,1) both; }
@keyframes awSurge{
  0%  { filter:drop-shadow(0 0 7px rgba(120,225,255,.5)) drop-shadow(0 0 20px rgba(56,216,255,.28)) brightness(1); }
  16% { filter:drop-shadow(0 0 11px #fff) drop-shadow(0 0 30px var(--cyan)) brightness(1.55); }
  28% { filter:drop-shadow(0 0 7px rgba(120,225,255,.5)) brightness(1.06); }      /* electric stutter */
  44% { filter:drop-shadow(0 0 13px #fff) drop-shadow(0 0 38px var(--cyan)) brightness(1.7); }
  60% { filter:brightness(1.12); }
  100%{ filter:drop-shadow(0 0 7px rgba(120,225,255,.5)) drop-shadow(0 0 20px rgba(56,216,255,.28)) brightness(1); }
}

/* the Cursor — a clean luminous light-pen (2026: minimal, soft, no spin).
   Parent is a zero-size point at (x,y); children self-centre with ONE
   transform level and no blend mode, so it renders identically everywhere. */
.aw-cursor{ position:absolute; left:0; top:0; width:0; height:0; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .5s ease; will-change:left,top,opacity; }
.aw-cursor .nib{ position:absolute; left:0; top:0; width:2.5px; height:.92em; border-radius:99px;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg, transparent, rgba(200,247,255,.92) 26%, #ffffff 50%, rgba(200,247,255,.92) 74%, transparent);
  box-shadow:0 0 8px rgba(140,230,255,.9), 0 0 18px rgba(56,216,255,.55); }
.aw-cursor .spark{ position:absolute; left:0; top:0; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #ffffff 0%, #d6f4ff 45%, rgba(56,216,255,.45) 100%);
  box-shadow:0 0 9px #eafdff, 0 0 20px rgba(56,216,255,.75); }
.aw-cursor .halo{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(56,216,255,.22), transparent 68%); }
.aw-cursor.spin .spark{ animation:awPulse 2.4s ease-in-out infinite; }
@keyframes awPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.32); } }
/* idle "scan" mode — a little round dot that overlays each letter in turn */
.aw-cursor.scan .nib{ display:none; }
.aw-cursor.scan .spark{ display:block; width:7px; height:7px;
  background:radial-gradient(circle, #ffffff 0%, #d2eeff 48%, rgba(56,216,255,.42) 100%);
  box-shadow:0 0 6px rgba(232,253,255,.9), 0 0 13px rgba(56,216,255,.5); }
.aw-cursor.scan .halo{ width:26px; height:26px; }

/* a holographic boot-scan sweeps down the hero once on load */
.hero-scan{ position:absolute; left:0; right:0; top:0; height:46svh; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent 0%, rgba(56,216,255,.05) 70%, rgba(150,235,255,.16) 96%, transparent 100%);
  border-bottom:1px solid rgba(170,240,255,.7);
  box-shadow:0 6px 40px rgba(56,216,255,.45);
  animation:heroScan 2.1s cubic-bezier(.6,.02,.25,1) .15s both; }
@keyframes heroScan{
  0%{ opacity:0; transform:translateY(-50svh); }
  14%{ opacity:1; }
  82%{ opacity:.8; }
  100%{ opacity:0; transform:translateY(108svh); }
}
@media (prefers-reduced-motion: reduce){
  .gl .b{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }   /* show full neon wordmark */
  .gl.surge .b{ animation:none; }
  .aw-cursor{ display:none; }
  .hero-scan{ display:none; }
}

/* ===================== ACCESSIBILITY — keyboard focus & skip link ===================== */
/* Visible focus for every interactive element. :focus-visible keeps the
   pointer experience clean while giving keyboard users a clear indicator. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}
/* inputs that removed the default outline get a focused border instead */
.finder-bar input:focus-visible{ outline:none; }
.finder-bar:focus-within{ box-shadow:0 0 0 2px rgba(56,216,255,.55); }

.skip-link{
  position:fixed; top:-64px; left:16px; z-index:1000;
  padding:10px 18px; border-radius:10px;
  background:#38d8ff; color:#06131a; font-weight:700; font-size:14px;
  text-decoration:none; transition:top .18s ease;
}
.skip-link:focus{ top:16px; }