/* ════════════════════════════════════════════════════════════════════════
   amia.css — amiaOS · Built for Operators · Manji Intelligence
   Design language: starternode.com — warm paper light, green voice,
   dark only as a theatrical accent. Best-in-class 2026 HTML5.
   Tiers: PRIMITIVE → SEMANTIC → COMPONENT.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── fonts ───────── */
@font-face { font-family:"Mittelschrift"; src:url("assets/fonts/din1451alt.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"EB Garamond"; src:url("assets/fonts/EBGaramond12-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"EB Garamond"; src:url("assets/fonts/EBGaramond12-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }

/* ───────── animatable custom props (@property) ───────── */
@property --mx { syntax:"<percentage>"; inherits:false; initial-value:50%; }
@property --my { syntax:"<percentage>"; inherits:false; initial-value:50%; }

/* ───────── 1. PRIMITIVE ───────── */
:root {
  /* light palette (default — warm paper) */
  --p-base:#F5EDE8; --p-raised:#EBE3DD; --p-elevated:#FFFFFF;
  --p-ink:#1a1a1a; --p-ink-70:rgba(26,26,26,.70); --p-ink-50:rgba(26,26,26,.50);
  --p-ink-30:rgba(26,26,26,.30); --p-ink-12:rgba(26,26,26,.12); --p-line:rgba(0,0,0,.07);
  --p-base-blur:rgba(245,237,232,.82);

  /* dark palette (theatrical accent) */
  --d-base:#0E0E10; --d-raised:#161618; --d-elevated:#1E1E22;
  --d-ink:#F5EDE8; --d-ink-70:rgba(245,237,232,.70); --d-ink-50:rgba(245,237,232,.50);
  --d-ink-30:rgba(245,237,232,.30); --d-line:rgba(255,255,255,.09);

  /* accent — the brand voice */
  --green:#00bf63; --green-deep:#03a657;
  --indigo:#3D4AAA; --indigo-lift:#5A6CDB;
  --saffron:#E55936; --yellow:#FFCC03;
  --veil-green:rgba(0,191,99,.09); --veil-green-2:rgba(0,191,99,.16);
  --veil-indigo:rgba(61,74,170,.11);

  /* type */
  --font-display:"Mittelschrift","Helvetica Neue",Arial,sans-serif;
  --font-body:"EB Garamond",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* fluid scale — generous, readable */
  --t-kicker:clamp(.7rem, .66rem + .18vw, .8rem);
  --t-body:clamp(1.12rem, 1.02rem + .4vw, 1.32rem);
  --t-lead:clamp(1.42rem, 1.18rem + 1vw, 2rem);
  --t-h3:clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --t-h2:clamp(1.85rem, 1.2rem + 2.4vw, 3.5rem);
  --t-h1:clamp(2.3rem, 1.2rem + 4.4vw, 5.6rem);
  --t-mega:clamp(2.2rem, 0.3rem + 8.2vw, 7rem);
  --t-stat:clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  /* space (4px grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-28:112px; --s-40:160px;

  --frame:min(1180px,92vw); --measure:40rem; --narrow:min(720px,92vw);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* motion — premium ease-out-expo */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --m-fast:150ms; --m-base:280ms; --m-slow:520ms; --m-vslow:900ms;
}

/* ───────── 2. SEMANTIC (FERRARI MODE — dark by default) ───────── */
:root {
  --surface:var(--d-base); --surface-2:var(--d-raised); --surface-3:var(--d-elevated);
  --ink:var(--d-ink); --ink-muted:var(--d-ink-70); --ink-subtle:var(--d-ink-50);
  --ink-ghost:var(--d-ink-30); --line:var(--d-line); --line-strong:rgba(255,255,255,.16);
  --accent:var(--green); --accent-2:var(--indigo-lift); --highlight:var(--yellow);
  --on-accent:#06140d; --blur-bg:rgba(14,14,16,.82);
}
/* theatrical dark sections */
.theatre {
  --surface:var(--d-base); --surface-2:var(--d-raised); --surface-3:var(--d-elevated);
  --ink:var(--d-ink); --ink-muted:var(--d-ink-70); --ink-subtle:var(--d-ink-50);
  --ink-ghost:var(--d-ink-30); --line:var(--d-line); --line-strong:var(--d-line);
  --on-accent:#06140d;
  background:var(--surface); color:var(--ink);
}

/* ───────── base ───────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.62;
  letter-spacing:-.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:rgba(61,74,170,.20); color:var(--ink); }

/* ───────── layout + section delineation ───────── */
.frame{ width:var(--frame); margin-inline:auto; }
.narrow{ width:var(--narrow); margin-inline:auto; }
.prose{ max-width:var(--measure); }
.beat{ padding-block:clamp(var(--s-20),13vh,var(--s-40)); position:relative; overflow:clip; }
.beat--tight{ padding-block:clamp(var(--s-16),9vh,var(--s-28)); }
/* the delineation between beats — a hairline + breathing room; light↔dark flip does the rest */
.beat + .beat:not(.theatre):not(.beat--seam){ border-top:1px solid var(--line); }

/* kicker — Mittelschrift, tracked. Editorial, never a sales-stage label. */
.kicker{ font-family:var(--font-display); font-size:var(--t-kicker); letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-subtle); display:inline-flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); }
.kicker::before{ content:""; width:26px; height:1px; background:var(--accent-2); }

h1,h2,h3{ font-family:var(--font-body); font-weight:700; line-height:1.03; letter-spacing:-.018em; text-wrap:balance; overflow-wrap:break-word; }
.h1{ font-size:var(--t-h1); } .mega{ font-size:var(--t-mega); line-height:.97; }
.h2{ font-size:var(--t-h2); margin-bottom:var(--s-6); }
.h3{ font-size:var(--t-h3); }
.lead{ font-size:var(--t-lead); line-height:1.36; color:var(--ink); text-wrap:pretty; }
p{ margin-bottom:var(--s-6); color:var(--ink-muted); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink); font-weight:700; } em{ font-style:italic; color:var(--ink); }
.accent-ink{ color:var(--accent); } .hr{ height:1px; background:var(--line); margin-block:var(--s-12); }

/* ───────── reveal (scroll-driven, graceful) ───────── */
.reveal{ opacity:1; transform:none; } /* default = visible (JS-off / unsupported safe) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{ animation:rise linear both; animation-timeline:view(); animation-range:entry 4% cover 30%; }
    .reveal-2{ animation-range:entry 10% cover 34%; }
    .reveal-3{ animation-range:entry 16% cover 38%; }
  }
}
@keyframes rise{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }

/* ───────── 3. COMPONENTS ───────── */

/* CTA ladder */
.cta{ display:inline-flex; align-items:center; gap:var(--s-3); touch-action:manipulation; font-family:var(--font-display);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; padding:var(--s-4) var(--s-6);
  border-radius:var(--r-pill); border:1px solid var(--line-strong); color:var(--ink);
  min-height:44px; transition:transform var(--m-fast) var(--ease), background var(--m-base) var(--ease), border-color var(--m-base) var(--ease), color var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease); }
.cta .arr{ transition:transform var(--m-base) var(--ease); }
.cta:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .cta:hover .arr{ transform:translateX(5px); }
  .cta--soft:hover{ border-color:var(--ink); }
  .cta--mid:hover{ background:var(--veil-green); border-color:var(--accent); }
  .cta--strong:hover{ box-shadow:0 14px 38px -12px var(--accent); transform:translateY(-1px); }
}
.cta:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cta--mid{ border-color:var(--accent); }
.cta--strong{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }
.link-quiet{ color:var(--ink); font-style:italic; border-bottom:1px solid var(--ink-ghost); transition:border-color var(--m-base) var(--ease); }
.link-quiet:hover{ border-color:var(--accent); }

/* nav */
.nav{ position:sticky; top:0; z-index:60; background:var(--blur-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); }
.nav-inner{ width:var(--frame); margin-inline:auto; display:flex; align-items:center; justify-content:space-between;
  padding-block:var(--s-4); gap:var(--s-4); }
.nav-brand{ display:flex; align-items:center; gap:var(--s-3); }
.nav-kaaba{ width:30px; height:30px; border-radius:7px; }
.nav-word{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; white-space:nowrap; } /* amiaOS — exact case */
.nav-links{ display:flex; align-items:center; gap:var(--s-8); }
.nav-links a{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-subtle); transition:color var(--m-base); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--surface); padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); min-height:40px; display:inline-flex; align-items:center; transition:background var(--m-fast); }
.nav-cta:hover{ background:var(--accent); color:#fff; }
@media (max-width:780px){ .nav-hide{ display:none; } }
/* amiaOS landing — header is the section nav (no CTA button) */
.nav--sections .nav-inner{ justify-content:space-between; gap:var(--s-5); }
@media (max-width:780px){
  /* keep brand + links on one row; shrink links to fit. wraps only if truly cramped. */
  .nav--sections .nav-inner{ flex-wrap:wrap; row-gap:var(--s-2); }
  .nav--sections .nav-links{ gap:clamp(12px,4vw,22px); }
  .nav--sections .nav-links a{ font-size:.62rem; letter-spacing:.08em; }
}
@media (max-width:420px){
  /* very narrow: links drop to their own left-aligned row under the brand */
  .nav--sections .nav-links{ flex:1 0 100%; justify-content:flex-start; }
}

/* hero */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(120px,18vh,200px) var(--s-20); position:relative; overflow:clip; }
.hero-mesh{ position:absolute; inset:-10%; z-index:0; pointer-events:none; filter:blur(8px);
  background:
    radial-gradient(38% 44% at var(--mx) var(--my), var(--veil-indigo), transparent 70%),
    radial-gradient(42% 40% at 82% 30%, var(--veil-green-2), transparent 70%),
    radial-gradient(36% 38% at 22% 78%, var(--veil-indigo), transparent 72%),
    radial-gradient(30% 30% at 60% 96%, var(--veil-green), transparent 70%); }
@media (prefers-reduced-motion: no-preference){ .hero-mesh{ animation:mesh 22s var(--ease-io) infinite alternate; } }
@keyframes mesh{ 0%{ --mx:24%; --my:30%; } 50%{ --mx:62%; --my:46%; } 100%{ --mx:40%; --my:72%; } }
.hero-inner{ position:relative; z-index:1; }
.hero-spine{ font-size:var(--t-lead); max-width:32rem; color:var(--ink-muted); margin-top:var(--s-8); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-12); }
.hero-cue{ position:absolute; left:50%; bottom:var(--s-8); translate:-50% 0; z-index:1; font-family:var(--font-display);
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-subtle); }
@media (prefers-reduced-motion: no-preference){ .hero-cue{ animation:bob 2.4s ease-in-out infinite; } }
@keyframes bob{ 50%{ transform:translateY(6px); opacity:.5; } }

/* creative stats (count-up) */
.stat-grid{ display:grid; gap:var(--s-5); grid-template-columns:repeat(3,1fr); margin-top:var(--s-12); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:1fr; } }
.stat{ background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--s-8); position:relative; overflow:hidden; }
.stat__bar{ position:absolute; left:0; bottom:0; height:4px; width:var(--fill,0%); background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width 1.6s var(--ease); }
.stat__num{ font-family:var(--font-display); font-size:var(--t-stat); line-height:1; color:var(--ink); letter-spacing:-.02em; display:flex; align-items:baseline; gap:.12em; }
.stat__suf{ font-size:.42em; color:var(--accent); }
.stat__lbl{ margin-top:var(--s-4); color:var(--ink-subtle); font-size:1rem; text-wrap:pretty; }

/* keyhole reveal (the Need) */
.keyhole{ position:relative; border-radius:var(--r-xl); border:1px solid var(--line); overflow:hidden; --kx:50%; --ky:40%;
  background:var(--surface-3); padding:clamp(var(--s-10),6vw,var(--s-20)); }
.keyhole__blur,.keyhole__sharp{ position:relative; }
.keyhole__sharp{ position:absolute; inset:0; padding:inherit; display:flex; align-items:center;
  color:var(--ink); -webkit-mask-image:radial-gradient(220px circle at var(--kx) var(--ky),#000 0 32%,transparent 60%);
  mask-image:radial-gradient(220px circle at var(--kx) var(--ky),#000 0 32%,transparent 60%); }
.keyhole__blur{ filter:blur(7px); opacity:.55; color:var(--ink-subtle); }
.keyhole__hint{ position:absolute; right:var(--s-5); bottom:var(--s-4); font-family:var(--font-display); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-ghost); }
@media (hover:none){ .keyhole__hint{ content:""; } }

/* horizontal mechanisms carousel */
.carousel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; }
.carousel-nav{ display:flex; gap:var(--s-3); }
.cbtn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center;
  color:var(--ink); transition:background var(--m-base) var(--ease), border-color var(--m-base); }
.cbtn:hover{ background:var(--veil-indigo); border-color:var(--accent-2); color:var(--accent-2); }
.cbtn:disabled{ opacity:.3; cursor:default; }
.rail{ display:flex; gap:var(--s-6); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:var(--s-8) 0 var(--s-6); margin-top:var(--s-8); scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-padding-inline:max(calc((100vw - var(--frame))/2),0px); }
.rail::-webkit-scrollbar{ display:none; }
.mcard{ scroll-snap-align:center; flex:0 0 min(88vw,440px); background:var(--surface-3); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:var(--s-10); display:flex; flex-direction:column; gap:var(--s-5); min-height:440px;
  transition:transform var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease); }
@media (hover:hover) and (pointer:fine){ .mcard:hover{ transform:translateY(-4px); box-shadow:0 24px 60px -28px rgba(0,0,0,.28); } }
.mcard__no{ font-family:var(--font-mono); font-size:.92rem; letter-spacing:.1em; color:var(--accent-2); font-weight:700; }
.mcard__name{ font-size:var(--t-h3); }
.mcard__sub{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-subtle); margin-top:calc(-1*var(--s-3)); }
.mcard__txt{ color:var(--ink-muted); font-size:1.04rem; }
.mcard__benefit{ margin-top:auto; color:var(--ink); font-style:italic; border-left:2px solid var(--accent); padding-left:var(--s-5); }
/* The six mechanisms render as a vertical STACK here, NOT the horizontal .rail carousel. The
   carousel's flex:0 0 min(88vw,440px) collapses to a FIXED HEIGHT in a flex column and clips the
   long #06 (Sovereignty) card. Use GRID so the flex shorthand is ignored entirely; min-height:440px
   then acts as a FLOOR that tall cards grow past. (OPERATIONS-008) */
.mstack{ display:grid; gap:var(--s-10); justify-items:center; }
.mstack .mcard{ width:min(100%,760px); }
.rail-progress{ height:3px; background:var(--line); border-radius:var(--r-pill); margin-top:var(--s-4); overflow:hidden; }
.rail-progress__fill{ height:100%; width:18%; background:var(--accent-2); border-radius:var(--r-pill); transition:transform var(--m-base) var(--ease); transform-origin:left; }

/* envoy portraits (inside the Envoys card) */
.envoys{ display:flex; gap:var(--s-4); margin-top:var(--s-2); }
.envoy{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); flex:1; }
.envoy img{ width:clamp(48px,16cqi,72px); aspect-ratio:1; border-radius:50%; object-fit:cover; border:2px solid var(--accent); background:var(--surface-2); }
.envoy span{ font-family:var(--font-display); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-subtle); }

/* lens switcher (pure CSS :has) */
.lens-seg{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-10); background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--s-2); width:fit-content; max-width:100%; }
.lens-seg input{ position:absolute; opacity:0; width:0; height:0; }
.lens-seg label{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-subtle);
  padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); cursor:pointer; min-height:40px; display:inline-flex; align-items:center; transition:background var(--m-base) var(--ease), color var(--m-base); }
.lens-panels{ margin-top:var(--s-10); }
.lens-panel{ display:none; }
.lens-panel ul{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4) var(--s-8); }
@media (max-width:680px){ .lens-panel ul{ grid-template-columns:1fr; } }
.lens-panel li{ color:var(--ink-muted); padding-left:1.1em; position:relative; }
.lens-panel li::before{ content:"→"; position:absolute; left:0; color:var(--accent); }
.lens-wrap:has(#lens-1:checked) label[for=lens-1],
.lens-wrap:has(#lens-2:checked) label[for=lens-2],
.lens-wrap:has(#lens-3:checked) label[for=lens-3],
.lens-wrap:has(#lens-4:checked) label[for=lens-4],
.lens-wrap:has(#lens-5:checked) label[for=lens-5]{ background:var(--accent); color:#fff; }
.lens-wrap:has(#lens-1:checked) [data-lens="1"],
.lens-wrap:has(#lens-2:checked) [data-lens="2"],
.lens-wrap:has(#lens-3:checked) [data-lens="3"],
.lens-wrap:has(#lens-4:checked) [data-lens="4"],
.lens-wrap:has(#lens-5:checked) [data-lens="5"]{ display:block; }

/* proof */
/* inline clip — a promo woven into the scroll right where it proves the point */
.clip{ width:100%; max-width:880px; margin:var(--s-12) auto 0; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:0 28px 80px -30px rgba(0,0,0,.7); background:#000; }
.clip video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }

/* dramatic act breaks — distinct color, full-height, scroll-reveal */
.act{ position:relative; min-height:100svh; display:flex; align-items:center; padding-block:clamp(72px,11vh,128px); overflow:hidden; }
.act .frame{ position:relative; z-index:2; }
.act-kicker{ display:flex; align-items:center; gap:.6em; font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; margin-bottom:var(--s-5); }
/* the warning — STARK RED, loud, not subtle */
.act--warn{ background:#0b0405; border-block:3px solid #E5484D; }
.act--warn::before{ content:""; position:absolute; inset:0; background:radial-gradient(78% 62% at 50% 0%, rgba(229,72,77,.22), transparent 72%); pointer-events:none; }
.act--warn .act-kicker{ color:#ff5a5f; }
.act--warn .warn-ink{ color:#ff5a5f; }
/* a subtle "yet" that fades in after the headline — the promise behind the warning */
.yet{ display:inline-block; margin-left:.4em; font-family:var(--font-body); font-style:italic; font-weight:400;
  font-size:.42em; letter-spacing:.01em; color:rgba(255,138,141,.72); vertical-align:.35em; opacity:0; }
@media (prefers-reduced-motion:reduce){ .yet{ opacity:.8; } }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .yet{ animation:yet-in linear both; animation-timeline:view(); animation-range:entry 34% cover 58%; }
  }
}
@keyframes yet-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:.8; transform:translateX(0); } }
.cta--warn{ background:#E5484D; color:#fff; border:none; }
.cta--warn:hover{ background:#ff5a5f; color:#fff; }
.warn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); margin-top:var(--s-10); text-align:left; }
@media(max-width:760px){ .warn-grid{ grid-template-columns:1fr; gap:var(--s-4); } }
.warn-grid > div{ border-left:3px solid #E5484D; padding:var(--s-1) 0 var(--s-1) var(--s-5); }
.warn-no{ display:block; font-family:var(--font-display); color:#ff5a5f; font-size:.78rem; letter-spacing:.16em; margin-bottom:6px; }
.warn-grid h4{ font-family:var(--font-display); letter-spacing:.01em; color:#fff; font-size:1.1rem; line-height:1.25; margin:0; }
/* the Limited Release badge — mirrors the hero warning, in the act's red */
.warn-badge{ display:inline-flex; align-items:center; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:#ff8a8d;
  border:1px solid rgba(229,72,77,.55); border-radius:var(--r-pill);
  padding:.55em 1.15em; margin-bottom:var(--s-6);
  background:rgba(229,72,77,.08); box-shadow:0 0 36px -10px rgba(229,72,77,.5); }
/* investors — closing act: image bg dialed down so the words pop */
.act--invest{ background:#05060f; border-top:1px solid rgba(255,255,255,.08); }
.act .act-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.34; }
.act .act-veil{ position:absolute; inset:0; z-index:1; background:radial-gradient(78% 68% at 50% 44%, rgba(5,6,15,.30), rgba(5,6,15,.88) 70%, #05060f 100%); }
.act--invest .act-kicker{ color:#9fb0ff; justify-content:center; }
.act--invest .invest-ink{ background:linear-gradient(90deg,#6f7bff,#2DA0B4 46%,#19c37d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta--invest{ background:linear-gradient(90deg,#3D4AAA,#0E9F6E); color:#fff; border:none; box-shadow:0 16px 54px -12px rgba(61,74,170,.65); }
/* the solution — light breaking through the dark (green) */
.solve{ position:relative; overflow:clip; }
.solve::before{ content:""; position:absolute; left:50%; top:-14%; width:130%; height:82%; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 0%, rgba(25,195,125,.40), rgba(0,191,99,.10) 42%, transparent 70%); filter:blur(16px); pointer-events:none; z-index:0; }
.solve > *{ position:relative; z-index:1; }
.solve .kicker{ color:#19c37d; }
.solve-ink{ color:#19c37d; }
.solve .versus__col--new{ border-color:rgba(25,195,125,.55); box-shadow:0 0 70px -16px rgba(25,195,125,.55); }
@media(prefers-reduced-motion:reduce){ .act .act-bg{ opacity:.28; } }

/* ════════════════════════════════════════════════════════════════════════
   THE DAWN — light breaks through the dark. the problem→solution pivot.
   A bright section dropped into a black site: god-rays + sunburst.
   ════════════════════════════════════════════════════════════════════════ */
.dawn{
  position:relative; isolation:isolate; overflow:clip; text-align:center;
  padding-block:clamp(104px,17vh,220px);
  background:
    linear-gradient(180deg,#0E0E10 0%, rgba(14,14,16,0) 15%, rgba(14,14,16,0) 85%, #0E0E10 100%),
    radial-gradient(125% 82% at 50% 30%, #ffffff 0%, #ecfdf3 33%, #a7ecc8 60%, #57cf94 82%, #1f8f5f 100%);
  color:#08130c;
}
.dawn__glow{
  position:absolute; left:50%; top:-6%; width:min(86vw,1100px); height:64vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%);
  filter:blur(6px); z-index:-1; pointer-events:none;
}
.dawn__rays{
  position:absolute; left:50%; top:-34%; width:170vw; aspect-ratio:1; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.6) 1.6deg, rgba(255,255,255,0) 5.5deg);
  -webkit-mask:radial-gradient(closest-side, #000 6%, rgba(0,0,0,.45) 30%, transparent 60%);
          mask:radial-gradient(closest-side, #000 6%, rgba(0,0,0,.45) 30%, transparent 60%);
  opacity:.45; z-index:-1; pointer-events:none; animation:dawn-spin 70s linear infinite;
}
@keyframes dawn-spin{ to{ transform:translateX(-50%) rotate(360deg); } }
.dawn__inner{ position:relative; z-index:1; margin-inline:auto; }
.dawn__head{ color:#06120b; font-size:var(--t-mega); line-height:.94; letter-spacing:-.02em; margin-bottom:var(--s-6); }
.dawn-ink{ color:var(--green-deep); }
.dawn .kicker{ color:var(--green-deep); justify-content:center; }
.dawn .kicker::before{ background:var(--green-deep); }
.dawn .lead{ color:#103226; max-width:42rem; margin-inline:auto; }
.clip--dawn{ box-shadow:0 50px 130px -34px rgba(0,70,38,.55), 0 0 0 1px rgba(0,70,38,.12); }
@media (prefers-reduced-motion:reduce){ .dawn__rays{ animation:none; } }

/* ════════════════════════════════════════════════════════════════════════
   SIX INNOVATIONS — 3D depth gallery + Rembrandt rake-light (desktop)
   ════════════════════════════════════════════════════════════════════════ */
.mcard{ position:relative; }
.mcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease); mix-blend-mode:screen;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),
    rgba(0,191,99,.20), rgba(255,255,255,.06) 30%, transparent 60%);
}
@media (min-width:641px){
  .mstack--3d{ perspective:1500px; perspective-origin:50% 28%; }
  .mstack--3d .mcard{ transform-style:preserve-3d; will-change:transform,opacity; transform-origin:50% 100%; }
}
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mstack--3d .mcard{ animation:card3d linear both; animation-timeline:view(); animation-range:entry 2% cover 44%; }
    .mstack--3d .mcard:nth-child(even){ animation-name:card3d-r; }
  }
}
@keyframes card3d{
  from{ opacity:0; transform:perspective(1500px) translateY(64px) translateZ(-280px) rotateX(22deg) rotateY(-18deg); }
  62%{ opacity:1; }
  to{ opacity:1; transform:perspective(1500px) translateY(0) translateZ(0) rotateX(0) rotateY(0); }
}
@keyframes card3d-r{
  from{ opacity:0; transform:perspective(1500px) translateY(64px) translateZ(-280px) rotateX(22deg) rotateY(18deg); }
  62%{ opacity:1; }
  to{ opacity:1; transform:perspective(1500px) translateY(0) translateZ(0) rotateX(0) rotateY(0); }
}
@media (hover:hover) and (pointer:fine){
  .mstack--3d .mcard:hover::after{ opacity:1; }
  .mstack--3d .mcard:hover{ box-shadow:0 60px 130px -44px rgba(0,0,0,.6), 0 0 0 1px rgba(0,191,99,.28); }
}

/* ════════════════════════════════════════════════════════════════════════
   BRUTALIST NOIR DATA HALL — procedural CSS backdrop (cold, grey, ominous)
   ════════════════════════════════════════════════════════════════════════ */
.cine--dc{ background:#0c0d10; }
/* keep the black fade down from the hero up top; open the hall through the middle */
.cine--dc .cine__veil{ background:linear-gradient(180deg,
  #0A0A0B 0%, rgba(10,10,11,.80) 9%, rgba(10,10,11,.32) 28%, rgba(10,10,11,.32) 60%, rgba(10,10,11,.80) 92%, #0A0A0B 100%); }
.cine--dc .cine__inner h2, .cine--dc .cine__inner p{ text-shadow:0 2px 26px rgba(0,0,0,.72); }
.dc-bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(180deg, #181b20 0%, #101216 48%, #08090b 100%); }
.dc-bg > span{ position:absolute; inset:0; display:block; }
/* overhead industrial light strips — cold fluorescent ceiling */
.dc-bg__light{
  background:
    repeating-linear-gradient(90deg, transparent 0 8.5%, rgba(178,193,208,.08) 8.5% 9%, transparent 9% 17%),
    radial-gradient(96% 42% at 50% -8%, rgba(168,188,208,.28), transparent 62%);
  -webkit-mask:linear-gradient(180deg, #000 0 28%, transparent 52%);
          mask:linear-gradient(180deg, #000 0 28%, transparent 52%); }
/* empty cold floor — brighter industrial perspective grid receding to vanishing point */
.dc-bg__floor{ inset:auto; left:50%; bottom:0; width:320%; height:56%;
  transform:translateX(-50%) perspective(520px) rotateX(66deg); transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(158,170,184,.20) 0 1.5px, transparent 1.5px 50px),
    repeating-linear-gradient(0deg,  rgba(158,170,184,.17) 0 1.5px, transparent 1.5px 50px),
    #0d0f12;
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 40%);
          mask:linear-gradient(180deg, transparent 0, #000 40%); }
/* a long wall of monolithic server cabinets across the back of an empty hall */
.dc-bg__racks{ inset:auto; left:0; right:0; top:30%; height:30%;
  background:
    repeating-linear-gradient(90deg,
      #2c323b 0 46px, #1e232b 46px 49px, #15191f 49px 95px, #333a46 95px 98px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 2px, transparent 2px 12px);
  background-blend-mode:multiply;
  -webkit-mask:linear-gradient(180deg, transparent 2%, #000 24%, #000 80%, transparent 100%);
          mask:linear-gradient(180deg, transparent 2%, #000 24%, #000 80%, transparent 100%);
  opacity:.92; }
/* faint matrix data-columns + oppressive vignette */
.dc-bg__vig{
  background:
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(152,174,194,.055) 27px 28px, transparent 28px 56px),
    radial-gradient(125% 104% at 50% 34%, transparent 24%, rgba(0,0,0,.56) 74%, #000 100%); }

/* ════════════════════════════════════════════════════════════════════════
   THE VOID — the status quo, condemned. dark, ominous, drawing into black.
   The nadir right before the dawn bursts.
   ════════════════════════════════════════════════════════════════════════ */
.void{ position:relative; overflow:clip; background:linear-gradient(180deg, var(--surface) 0%, #060607 40%, #000 100%);
  padding-block:clamp(var(--s-20),13vh,var(--s-40)) clamp(var(--s-20),14vh,var(--s-40)); }
/* a hellish ember bleeding up from the bottom — the descent. it breathes. */
.void::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:radial-gradient(120% 102% at 50% 100%, rgba(150,14,18,.34), rgba(50,4,7,.12) 38%, transparent 70%);
  mix-blend-mode:screen; z-index:0; animation:void-ember 6.5s ease-in-out infinite; }
@keyframes void-ember{ 0%,100%{ opacity:.62; transform:translateY(6%); } 50%{ opacity:1; transform:translateY(0); } }
.void > *{ position:relative; z-index:1; }
.void .kicker--bad{ color:#b5575a; }
.void .kicker--bad::before{ background:#9a1f24; }
.void .h2{ color:#cfc7c2; }
.bad-ink{ color:#c5494d; }
.void__therefore{ margin-top:var(--s-6); color:#9a928d; font-style:italic; }
.verdict{ list-style:none; margin:var(--s-8) 0 0; padding:0; max-width:34ch; }
.vline{ font-family:var(--font-body); font-size:clamp(1.45rem, 1rem + 2.3vw, 2.6rem); line-height:1.16;
  color:#8c8580; padding-block:var(--s-5); border-top:1px solid rgba(255,255,255,.05); }
.vline:first-child{ border-top:none; }
/* each accusation slides out of the dark as you scroll, staggered by position */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .vline{ animation:void-line linear both; animation-timeline:view(); animation-range:entry 3% cover 32%; }
  }
}
@keyframes void-line{ from{ opacity:0; transform:translateX(-30px); filter:blur(4px); } to{ opacity:1; transform:translateX(0); filter:blur(0); } }
/* each accusation dimmer than the last — sinking into the black */
.vline:nth-child(2){ color:#79726e; }
.vline:nth-child(3){ color:#645e5b; }
.vline:nth-child(4){ color:#4d4946; }
.vline:nth-child(5){ color:#393633; }
.void__end{ margin-top:var(--s-16); }
.void__verdict{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; line-height:1.06;
  font-size:clamp(1.7rem, 1rem + 3.2vw, 3.2rem); color:#7a726f; }
.void__no{ display:block; margin-top:var(--s-2); color:#d8423f; text-shadow:0 0 52px rgba(180,20,24,.5); }
/* the verdict flickers like a dying sign */
@media (prefers-reduced-motion:no-preference){
  .void__no{ animation:void-flicker 6s steps(1,end) infinite; }
}
@keyframes void-flicker{
  0%,89%,100%{ opacity:1; text-shadow:0 0 52px rgba(180,20,24,.5); }
  90%{ opacity:.5; text-shadow:0 0 8px rgba(180,20,24,.25); }
  91%{ opacity:1; }
  93%{ opacity:.7; text-shadow:0 0 6px rgba(180,20,24,.2); }
  94%{ opacity:1; text-shadow:0 0 78px rgba(225,42,46,.75); }
  96%{ opacity:.85; }
  97%{ opacity:1; text-shadow:0 0 52px rgba(180,20,24,.5); }
}

/* ════ globe behind a content beat (heavily veiled — keeps diagrams legible) ════ */
.beat--bg{ position:relative; isolation:isolate; }
.beat--bg > .beat-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.beat--bg > .beat-veil{ position:absolute; inset:0; z-index:-1; }
.beat--earth > .beat-bg{ filter:grayscale(.18) brightness(.74) contrast(1.08); opacity:.9; object-position:center 18%; }
.beat--earth > .beat-veil{ background:radial-gradient(135% 92% at 50% 12%, rgba(14,14,16,.30), rgba(14,14,16,.74) 60%, var(--surface) 100%); }

/* ════════════════════════════════════════════════════════════════════════
   THE SYNAPSE — Awareness · Mind · Intelligence · Agency. art, not copy.
   A glowing spine ignites node by node as you scroll into the breakthroughs.
   ════════════════════════════════════════════════════════════════════════ */
.synapse{ position:relative; overflow:clip;
  background:radial-gradient(120% 80% at 50% 28%, #0b1018 0%, #07080b 66%, #060607 100%);
  padding-block:clamp(110px,20vh,260px) clamp(52px,7vh,104px); }
.synapse__halo{ position:absolute; left:50%; top:50%; width:min(70vw,720px); height:min(70vw,720px);
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(60,90,200,.16), rgba(0,191,99,.05) 40%, transparent 64%);
  filter:blur(20px); animation:syn-breathe 7s ease-in-out infinite; }
@keyframes syn-breathe{ 0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(.94); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } }
.synapse__inner{ position:relative; z-index:1; width:var(--frame); max-width:880px; margin-inline:auto; }
.synapse__inner .kicker{ margin-bottom:clamp(28px,5vh,56px); }
.synapse__list{ list-style:none; position:relative; margin:0; padding-left:clamp(34px,7vw,84px); }
.synapse__list::before{ content:""; position:absolute; left:clamp(11px,2.6vw,30px); top:4%; bottom:6%; width:2px;
  background:linear-gradient(180deg, transparent, rgba(90,108,219,.65) 14%, rgba(0,191,99,.65) 86%, transparent);
  box-shadow:0 0 20px rgba(60,90,200,.45); }
.syn{ position:relative; display:flex; align-items:center; padding-block:clamp(8px,2.2vh,26px); }
.syn__dot{ position:absolute; left:calc(-1 * (clamp(34px,7vw,84px) - clamp(11px,2.6vw,30px) + 6px)); width:14px; height:14px;
  border-radius:50%; background:#0b1016; border:2px solid var(--indigo-lift); }
.syn__w{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; line-height:.92; font-weight:700;
  font-size:clamp(2.3rem, .4rem + 7.4vw, 6rem);
  background:linear-gradient(92deg, var(--indigo-lift), var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* the amia easter-egg — first letter of each primitive, lowercase serif, spelling amia */
.syn__w .amia{ font-family:var(--font-body); font-style:normal; text-transform:lowercase; font-weight:400;
  color:#f3efe6; -webkit-text-fill-color:#f3efe6; }
.synapse__cap{ margin-top:clamp(30px,5vh,60px); padding-left:clamp(34px,7vw,84px);
  font-style:italic; color:var(--ink-muted); font-size:var(--t-lead); }
/* idle → scroll ignition */
.syn{ opacity:.13; filter:blur(3px); transform:translateY(22px); }
@media (prefers-reduced-motion:reduce){ .syn{ opacity:1; filter:none; transform:none; } .synapse__halo{ animation:none; } }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .syn{ animation:syn-on linear both; animation-timeline:view(); animation-range:entry 10% cover 44%; }
    .syn__dot{ animation:dot-on linear both; animation-timeline:view(); animation-range:entry 10% cover 40%; }
  }
}
@keyframes syn-on{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes dot-on{ to{ background:var(--green); border-color:var(--green); box-shadow:0 0 24px 5px rgba(0,191,99,.55); } }
/* mobile: tighten spacing, align dots to the spine, scale the words down */
@media (max-width:640px){
  .synapse{ padding-block:clamp(72px,13vh,120px) clamp(40px,5vh,64px); }
  .synapse__inner .kicker{ margin-bottom:var(--s-6); }
  .synapse__list{ padding-left:28px; }
  .synapse__list::before{ left:7px; top:5%; bottom:7%; }
  .syn{ padding-block:9px; }
  .syn__w{ font-size:clamp(2.1rem,1.2rem+6vw,3rem); line-height:1.02; }
  .syn__dot{ left:-26px; width:12px; height:12px; }
  .synapse__cap{ padding-left:28px; font-size:1.18rem; margin-top:var(--s-10); }
}

/* ════ before / after inside the warning (no labels saying before/after) ════ */
.ba-label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.84rem; }
.ba-label--before{ margin-top:var(--s-12); color:#ff7a7d; }
.ba-label--after{ margin-top:var(--s-12); color:#5fe0a3; }
.after-card{ margin-top:var(--s-4); border:1px solid rgba(95,224,163,.45); border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(95,224,163,.10), rgba(95,224,163,.03));
  box-shadow:0 0 80px -22px rgba(0,191,99,.5); padding:var(--s-10); max-width:600px; }
.after-card__k{ display:block; font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#5fe0a3; margin-bottom:var(--s-3); }
.after-card__v{ display:block; font-family:var(--font-display); font-size:var(--t-h3); line-height:1.04; color:#fff; }
.after-card__sub{ margin-top:var(--s-4); color:rgba(245,237,232,.78); font-size:1.02rem; }
/* dawn CTA — solid green on the bright pivot */
.cta--dawn{ background:var(--green-deep); color:#fff; border:none; box-shadow:0 18px 50px -14px rgba(0,120,64,.6); }
.cta--dawn:hover{ background:#00bf63; color:#fff; }

.proof-frame{ aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:radial-gradient(130% 130% at 50% 0%, var(--surface-3), var(--surface-2));
  display:grid; place-items:center; color:var(--ink-subtle); font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.74rem; }

/* proof videos — narrated OS promos (poster + controls; they carry audio) */
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); }
@media (max-width:760px){ .proof-grid{ grid-template-columns:1fr; } }
.proof-vid{ margin:0; }
.proof-vid video{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#000;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 14px 44px rgba(0,0,0,.45); }
.proof-vid figcaption{ margin-top:var(--s-4); text-align:center; color:var(--ink-subtle);
  font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; }

/* price + seat slider */
.price-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:var(--s-12); align-items:start; }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; } }
.ptable{ width:100%; border-collapse:collapse; font-size:1rem; }
.ptable td{ padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line); }
.ptable .num{ text-align:right; color:var(--ink-subtle); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ptable .inc{ text-align:right; color:var(--green-deep); font-family:var(--font-display); font-size:.78rem; letter-spacing:.06em; }
.seat-card{ position:sticky; top:84px; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s-10); }
.seat-out{ font-family:var(--font-display); font-size:var(--t-stat); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.seat-sub{ color:var(--ink-subtle); margin-bottom:var(--s-8); }
.seat-range{ --value:18%; -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--r-pill);
  background:linear-gradient(to right,var(--accent) 0 var(--value),var(--line-strong) var(--value) 100%); }
.seat-range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--accent); border:3px solid var(--surface-3); box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:grab; }
.seat-range::-moz-range-thumb{ width:22px; height:22px; border:3px solid var(--surface-3); border-radius:50%; background:var(--accent); cursor:grab; }
.seat-range:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.seat-rows{ margin-top:var(--s-8); display:grid; gap:var(--s-4); }
.seat-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); }
.seat-row b{ font-family:var(--font-display); font-size:1.5rem; font-variant-numeric:tabular-nums; }
.seat-row .saas b{ color:var(--saffron); } .seat-row .ours b{ color:var(--green-deep); }
.seat-k{ color:var(--ink-subtle); font-size:.92rem; }
.transition-line{ font-size:var(--t-lead); font-style:italic; color:var(--ink); max-width:32rem; margin-top:var(--s-12); }

/* door cards (final close) */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); margin-top:var(--s-12); }
@media (max-width:820px){ .doors{ grid-template-columns:1fr; } }
.door{ background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s-10);
  display:flex; flex-direction:column; gap:var(--s-4); transition:transform var(--m-base) var(--ease), border-color var(--m-base); }
@media (hover:hover){ .door:hover{ transform:translateY(-4px); border-color:var(--accent); } }
.door__k{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); }
.band{ text-align:center; }
.band .mega{ max-width:16ch; margin-inline:auto; }
.band-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-12); }

/* sovereignty glow + kaaba (cosmic continuity) */
.sov{ position:relative; text-align:center; }
.sov__halo{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(34% 42% at 38% 34%, var(--veil-indigo), transparent 70%),
    radial-gradient(38% 48% at 62% 42%, var(--veil-green-2), transparent 70%); }
@media (prefers-reduced-motion: no-preference){ .sov__halo{ animation:breathe 7s ease-in-out infinite; } }
@keyframes breathe{ 50%{ opacity:.55; transform:scale(1.06); } }
.sov__kaaba{ width:clamp(60px,12vw,104px); margin:0 auto var(--s-8); filter:drop-shadow(0 0 30px var(--veil-green-2)); position:relative; z-index:1; border-radius:14px; }
.sov > *{ position:relative; z-index:1; }

/* footer */
.foot{ border-top:1px solid var(--line); padding-block:var(--s-16) var(--s-12); padding-bottom:max(var(--s-12),env(safe-area-inset-bottom)); color:var(--ink-subtle); }
.foot-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-6); align-items:baseline; }
.foot-tag{ font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; }
.foot a:hover{ color:var(--ink); }
.foot-social{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:var(--s-10); }
.foot-social .soc{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); color:var(--ink-subtle); transition:color var(--m-base), border-color var(--m-base); }
.foot-social .soc:hover{ color:var(--ink); border-color:var(--ink-subtle); }
.foot-social .soc-buoy{ border:0; }
.foot-social .soc-buoy img{ width:26px; height:26px; display:block; }
/* clean, aligned footer */
.foot-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-4) var(--s-6); }
.foot-links{ display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-6); }
.foot-links a{ font-size:.92rem; color:var(--ink-subtle); }
.foot-copy{ margin:var(--s-8) 0 0; color:var(--ink-ghost); font-size:.85rem; }
.foot-totop{ display:flex; justify-content:center; margin-top:var(--s-10); }
.foot-top-btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--ink-subtle);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.75em 1.4em;
  transition:color var(--m-base), border-color var(--m-base), background var(--m-base); }
.foot-top-btn:hover{ color:var(--ink); border-color:var(--ink-subtle); background:rgba(255,255,255,.03); }
.foot-top-btn span{ font-family:var(--font-body); }
@media (max-width:640px){
  .foot{ text-align:center; }
  .foot-top{ flex-direction:column; align-items:center; gap:var(--s-3); }
  .foot-top .nav-brand{ justify-content:center; }
  .foot .hr{ margin-block:var(--s-8); }
  .foot-links{ justify-content:center; gap:var(--s-3) var(--s-5); }
  .foot-social{ margin-top:var(--s-8); }
  .foot-copy{ margin-top:var(--s-6); }
}

/* container-query context for cards */
.cq{ container-type:inline-size; }

/* green/indigo balance — alternate accents on repeated elements */
.envoy:nth-child(2) img{ border-color:var(--accent-2); }
.stat:nth-child(2) .stat__suf{ color:var(--accent-2); }
.stat:nth-child(2) .stat__bar{ background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.door:nth-child(2){ border-color:color-mix(in srgb, var(--accent-2) 40%, var(--line)); }

/* ───────── mobile refinement (spacing + carousel) ───────── */
@media (max-width:640px){
  :root{ --frame:90vw; }
  .nav-inner{ padding-block:var(--s-3); flex-wrap:wrap; row-gap:var(--s-3); }
  .nav-word{ font-size:.92rem; }
  /* shared by /amiaos + the verticals (/medical /legal /contractors), whose longer
     "Manji Intelligence" brand + Industries + long CTA can't share one phone row —
     drop the CTA to its own full-width line; brand + Industries stay on top. */
  .nav-cta{ flex:1 0 100%; justify-content:center; letter-spacing:.12em; }
  .beat{ padding-block:clamp(52px, 8vh, 84px); }
  .beat--tight{ padding-block:46px; }
  .hero{ min-height:90svh; padding-block:84px 52px; }
  .hero-spine{ margin-top:var(--s-6); }
  .hero-actions{ gap:var(--s-3); margin-top:var(--s-10); }
  .hero-actions .cta{ width:100%; justify-content:center; }
  .stat-grid{ gap:var(--s-4); margin-top:var(--s-8); }
  .stat{ padding:var(--s-6); }
  .keyhole{ padding:var(--s-8); }

  /* carousel: clean swipe, natural card height, no cramped arrows */
  .carousel-head{ gap:var(--s-3); align-items:center; }
  .carousel-nav{ display:none; }
  .rail{ gap:var(--s-4); padding-top:var(--s-6); scroll-padding-inline:5vw; }
  .mcard{ flex-basis:85vw; min-height:auto; padding:var(--s-8); scroll-snap-align:center; gap:var(--s-4); }
  .mcard__benefit{ margin-top:var(--s-4); }
  .mcard__txt{ font-size:1rem; }

  .lens-seg{ width:100%; justify-content:space-between; gap:var(--s-1); padding:var(--s-1); }
  .lens-seg label{ padding:var(--s-2) var(--s-3); font-size:.66rem; letter-spacing:.08em; }
  .lens-panel ul{ gap:var(--s-3); }

  .price-grid{ gap:var(--s-8); }
  .seat-card{ position:static; padding:var(--s-8); }
  .doors{ gap:var(--s-4); }
  .band-actions{ gap:var(--s-3); }
  .band-actions .cta{ width:100%; justify-content:center; }
}

/* ════════════════════════════════════════════════════════════════════════
   brand alignment with /operators — gradient CTAs + two-tone wordmark
   ════════════════════════════════════════════════════════════════════════ */
.cta--strong{ background:linear-gradient(90deg, var(--indigo), var(--green-deep)); border-color:transparent;
  color:#fff; font-weight:700; box-shadow:0 12px 32px -16px var(--indigo); }
@media (hover:hover) and (pointer:fine){
  .cta--strong:hover{ filter:brightness(1.07); box-shadow:0 18px 44px -14px var(--green-deep); transform:translateY(-1px); }
}
.nav-cta{ background:linear-gradient(90deg, var(--indigo), var(--green-deep)); color:#fff; border:none; }
.nav-cta:hover{ background:linear-gradient(90deg, var(--indigo), var(--green-deep)); filter:brightness(1.08); color:#fff; }
.nav-word .grad{ background:linear-gradient(90deg, var(--indigo), var(--green-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ════════════════════════════════════════════════════════════════════════
   edge computing — the concept, as a graphic (the intelligence comes to you)
   ════════════════════════════════════════════════════════════════════════ */
.edge-diagram{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); margin-top:var(--s-12); }
@media (max-width:820px){ .edge-diagram{ grid-template-columns:1fr; } }
/* vertical narrative: cloud box → "more power" verdict → edge box */
.edge-stack{ display:flex; flex-direction:column; align-items:stretch; gap:var(--s-6); max-width:760px; margin:var(--s-12) auto 0; }
.edge-stack .edge-card{ width:100%; }
.edge-stack__verdict{ margin-block:var(--s-2); }
.edge-card{ background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s-10); }
.edge-card--edge{ border-color:color-mix(in srgb, var(--green) 45%, var(--line)); box-shadow:0 26px 64px -38px var(--green); }
/* the sovereign box — 3 -> 2 -> 1, everything collapses into one node */
.edge-card--sov{ border-color:var(--green); box-shadow:0 30px 80px -32px var(--green); }
.edge-card--sov .edge-tag{ color:var(--green); }
.edge-flow--solo{ justify-content:center; }
.node--sov{ flex:0 1 min(440px,100%); border-color:var(--green); background:var(--veil-green-2); box-shadow:0 0 54px -20px var(--green); }
.node--sov .node-ic svg{ color:var(--green); }
.node--sov small{ max-width:32ch; margin-inline:auto; color:var(--ink-muted); }
.edge-tag{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-subtle); margin-bottom:var(--s-8); }
.edge-card--edge .edge-tag{ color:var(--green-deep); }
.edge-flow{ display:flex; align-items:stretch; gap:var(--s-3); }
.node{ flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center;
  border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--s-5) var(--s-2);
  background:var(--surface-2); font-family:var(--font-display); font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink); line-height:1.25; }
.node small{ display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0;
  font-size:.82rem; color:var(--ink-subtle); margin-top:6px; }
.node--strong{ border-color:var(--green); background:var(--veil-green-2); }
.node--dc{ border-color:color-mix(in srgb, var(--saffron) 45%, var(--line)); }
.pipe{ position:relative; flex:0 0 clamp(34px,7vw,72px); align-self:center; height:3px; border-radius:999px;
  background:var(--line-strong); overflow:hidden; }
.pipe::after{ content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(90deg, transparent, var(--green), transparent); }
.pipe--out::after{ background:linear-gradient(90deg, transparent, var(--saffron), transparent); }
@media (prefers-reduced-motion: no-preference){ .pipe::after{ animation:flow 1.9s linear infinite; } }
@keyframes flow{ from{ transform:translateX(-120%); } to{ transform:translateX(340%); } }
.edge-note{ margin-top:var(--s-8); color:var(--ink-muted); font-size:1.02rem; }
.edge-power{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8); margin-top:var(--s-12); }
@media (max-width:760px){ .edge-power{ grid-template-columns:1fr; } }
.edge-power .pw{ border-left:2px solid var(--green); padding-left:var(--s-5); }
.edge-power .pw h4{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:var(--s-3); }
.edge-power .pw:nth-child(2){ border-left-color:var(--accent-2); }
.edge-power .pw:nth-child(2) h4{ color:var(--green-deep); }

/* enterprise hero — product figure + exclusivity note (Ferrari treatment) */
.hero-note{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin-top:var(--s-6); }
.hero-figure{ position:relative; margin:var(--s-16) auto 0; display:flex; justify-content:center; }
.hero-figure img{ width:min(420px,72vw); height:auto; border-radius:18px;
  filter:drop-shadow(0 50px 90px rgba(0,0,0,.40)); }
.hero-figure::before{ content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:min(560px,86vw); aspect-ratio:1; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, var(--veil-indigo), var(--veil-green-2) 46%, transparent 72%); filter:blur(36px); }
@media (prefers-reduced-motion: no-preference){ .hero-figure::before{ animation:breathe 7s ease-in-out infinite; } }
@media (max-width:640px){ .hero-figure{ margin-top:var(--s-12); } }

/* edge-node hero — dark device framed as a premium product shot on warm paper */
.hero-figure img{ width:min(520px,88vw); height:auto; border-radius:22px; filter:none;
  box-shadow:0 50px 110px -44px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06); }
.hero-figure::before{ width:min(640px,92vw); }
.hero-cap{ margin-top:var(--s-5); font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-subtle); text-align:center; }

/* ════════════════════════════════════════════════════════════════════════
   FERRARI MODE — cinematic dark: hero device + full-bleed image bands + safety
   ════════════════════════════════════════════════════════════════════════ */
body{ background:var(--d-base); }

/* hero — the edge node, centered, glowing, blended into the dark (no frame) */
.hero{ text-align:center; }
.hero-inner{ display:flex; flex-direction:column; align-items:center; }
.hero .kicker{ justify-content:center; }
.hero-spine{ margin-inline:auto; }
.hero-note{ text-align:center; }
.hero-actions{ justify-content:center; }
.hero-figure{ position:relative; margin:var(--s-12) auto 0; }
.hero-figure img{ width:min(680px,94vw); height:auto; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 36px 90px rgba(90,108,219,.28));
  -webkit-mask:radial-gradient(72% 72% at 50% 46%, #000 58%, transparent 86%);
          mask:radial-gradient(72% 72% at 50% 46%, #000 58%, transparent 86%); }
.hero-figure::before{ width:min(720px,96vw);
  background:radial-gradient(circle, rgba(90,108,219,.30), rgba(0,191,99,.18) 46%, transparent 72%); }
.hero-cap{ color:var(--ink-subtle); }

/* full-bleed cinematic image bands */
.cine{ position:relative; min-height:min(82svh,720px); display:flex; align-items:center; overflow:clip; }
.cine__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
@media (prefers-reduced-motion: no-preference){ .cine__img{ animation:kb 34s ease-in-out infinite alternate; } }
@keyframes kb{ from{ transform:scale(1.05);} to{ transform:scale(1.15);} }
.cine__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,8,10,.46) 0%, rgba(8,8,10,.74) 62%, rgba(14,14,16,.97) 100%); }
.cine__inner{ position:relative; z-index:2; width:var(--frame); margin-inline:auto; padding-block:var(--s-16); }
.cine h2{ color:#fff; }
.cine p{ color:rgba(255,255,255,.85); }
.cine .kicker{ color:rgba(255,255,255,.72); }
.cine .kicker::before{ background:var(--accent); }

/* controlled-access / safety panel — caution-toned, premium */
.safety{ border:1px solid color-mix(in srgb, var(--yellow) 32%, var(--line)); border-radius:var(--r-xl);
  background:linear-gradient(180deg, color-mix(in srgb, var(--yellow) 7%, var(--surface-3)), var(--surface-3));
  padding:clamp(var(--s-10),5vw,var(--s-16)); margin-top:var(--s-12); }
.safety__tag{ display:inline-flex; align-items:center; gap:var(--s-3); font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:var(--s-6); }
.safety__tag::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--yellow);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--yellow) 22%, transparent); }
.safety__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8); margin-top:var(--s-10); }
@media (max-width:760px){ .safety__grid{ grid-template-columns:1fr; } }
.safety__grid h4{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--s-2); }
.safety__grid p{ font-size:1rem; color:var(--ink-muted); }

/* availability modal — premium, caution-toned */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--s-5); }
.modal__backdrop{ position:absolute; inset:0; background:rgba(6,6,8,.74); backdrop-filter:blur(7px); }
.modal__card{ position:relative; z-index:1; width:min(540px,94vw); background:var(--surface-3);
  border:1px solid color-mix(in srgb,var(--yellow) 30%, var(--line)); border-radius:var(--r-xl);
  padding:clamp(var(--s-8),5vw,var(--s-12)); box-shadow:0 50px 120px -30px #000; }
.modal__kaaba{ width:48px; height:48px; border-radius:11px; margin-bottom:var(--s-6); }
.modal__title{ font-size:var(--t-h3); margin-bottom:var(--s-4); }
.modal__actions{ display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-8); }
/* generous, well-separated tap targets — iOS link-snapping must never confuse the two */
.modal__actions .cta{ min-height:48px; }
@media(max-width:560px){ .modal__actions{ flex-direction:column; align-items:stretch; gap:18px; } .modal__actions .cta{ justify-content:center; } }
@media (prefers-reduced-motion:no-preference){ .modal__card{ animation:pop var(--m-base) var(--ease) both; } }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.98);} to{ opacity:1; transform:none;} }

/* two-breakthroughs grid (why it's this powerful) */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); margin-top:var(--s-12); }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } }
.why{ background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s-10); }
.why__no{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:var(--s-4); }
.why h3{ margin-bottom:var(--s-4); }

/* nav CTA full label + mobile fit */
.nav-cta{ white-space:nowrap; }
@media (max-width:640px){
  .nav-cta{ font-size:.62rem; letter-spacing:.08em; padding:var(--s-3) var(--s-4); }
  .nav-word{ font-size:.9rem; } .nav-kaaba{ width:26px; height:26px; }
}
/* hero device — big, clear, noir centerpiece (final word) */
.hero-figure{ margin:var(--s-8) auto var(--s-2); }
.hero-figure img{ width:min(820px,96vw); border-radius:0; box-shadow:none;
  filter:drop-shadow(0 40px 100px rgba(90,108,219,.30));
  -webkit-mask:radial-gradient(82% 84% at 50% 50%, #000 76%, transparent 100%);
          mask:radial-gradient(82% 84% at 50% 50%, #000 76%, transparent 100%); }

/* ════════════════════════════════════════════════════════════════════════
   DYSTOPIAN / BRUTALIST — hard edges, black & white, huge stark titles, scary
   ════════════════════════════════════════════════════════════════════════ */
:root{ --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-pill:0; }   /* hard edges everywhere */
body{ background:#0A0A0B; }
/* black & white ominous imagery */
.cine__img{ filter:grayscale(1) contrast(1.12) brightness(.7); }
.cine__veil{ background:linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,.8) 66%, #0A0A0B 100%); }
.cine{ min-height:min(88svh,800px); }
/* huge stark white titles, subtle gradient only on the key word */
.cine h2{ font-size:var(--t-mega) !important; line-height:.92; color:#fff; letter-spacing:-.02em; }
.cine p{ color:rgba(255,255,255,.82); }
.cine .kicker{ color:rgba(255,255,255,.6); }
.cine .accent-ink, .hero .accent-ink{
  background:linear-gradient(92deg, var(--indigo-lift), var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* the hero device keeps its colour (the one glow); everything else is mono */
.hero-figure img{ filter:drop-shadow(0 40px 100px rgba(90,108,219,.28)); }

/* hero figure — never overflow the frame on mobile (final clamp) */
.hero-figure{ max-width:92vw; margin-inline:auto; }
.hero-figure img{ width:min(720px,90vw); max-width:100%; }
.hero-cap{ display:block; width:100%; text-align:center; }

/* ════ cinematic hero — edge node behind, flip-word headline ════ */
.hero--cine{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:clip; }
.hero--cine .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.hero--cine .hero-bg-veil{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(58% 52% at 50% 50%, rgba(10,10,11,.28), rgba(10,10,11,.72) 64%, #0A0A0B 100%); }
.hero--cine .hero-inner{ position:relative; z-index:2; }
.hero--cine .mega{ text-shadow:0 6px 44px rgba(0,0,0,.55); }
.hero--cine .hero-actions{ display:flex; gap:var(--s-4); margin-top:var(--s-10); justify-content:center; flex-wrap:wrap; }
/* "Built for [word]" — words cycle and land on Everyone */
.hero-flip{ font-family:var(--font-body); font-style:italic; font-size:var(--t-lead); color:var(--ink-muted); margin-top:var(--s-6); }
.flip{ display:inline-block; height:1.15em; overflow:hidden; vertical-align:bottom; }
.flip__list{ display:flex; flex-direction:column; animation:flipwords 4s var(--ease) .6s forwards; }
.flip__list > span{ height:1.15em; line-height:1.15em; font-style:normal; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.05em;
  background:linear-gradient(92deg, var(--indigo-lift), var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes flipwords{ 0%,24%{ transform:translateY(0); } 38%,60%{ transform:translateY(-1.15em); } 74%,100%{ transform:translateY(-2.30em); } }
@media (prefers-reduced-motion:reduce){ .flip__list{ animation:none; transform:translateY(-2.30em); } }
/* two-word flip (Operators → Enterprise) — settles on the enterprise client */
.flip__list--2{ animation-name:flipwords2; }
@keyframes flipwords2{ 0%,44%{ transform:translateY(0); } 64%,100%{ transform:translateY(-1.15em); } }
@media (prefers-reduced-motion:reduce){ .flip__list--2{ animation:none; transform:translateY(-1.15em); } }

/* ════ hero v2 — warning · headline ABOVE node · flip on the machine · CTA below ════ */
.hero--stack{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:clip;
  padding-block:clamp(120px,15vh,200px) var(--s-16); }
.hero-warning{ display:inline-flex; align-items:center; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--yellow);
  border:1px solid color-mix(in srgb,var(--yellow) 45%, transparent); padding:.55em 1.1em; margin-bottom:var(--s-8); }
.hero--stack .mega{ max-width:15ch; margin-inline:auto; line-height:.98; }
.hero-node{ position:relative; width:min(620px,90vw); margin:var(--s-8) auto 0; }
.hero-node img{ width:100%; height:auto; filter:drop-shadow(0 50px 100px rgba(0,0,0,.6)); }
.hero-flip{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); margin:0;
  font-family:var(--font-body); font-style:italic; font-size:clamp(1rem,2vw,1.4rem); color:rgba(245,237,232,.92); white-space:nowrap; }
.hero--stack .hero-actions{ margin-top:var(--s-10); justify-content:center; }

/* ════ hero v3 — big BLENDED device (no box), headline above, flip mid, CTA below ════ */
.hero--cine{ position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:clip; text-align:center; }
.hero--cine .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.hero--cine .hero-bg-veil{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(62% 58% at 50% 54%, rgba(10,10,11,.10), rgba(10,10,11,.40) 66%, rgba(10,10,11,.88) 100%); }
.hero--cine .hero-inner{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  justify-content:space-between; align-items:center; padding-block:clamp(106px,14vh,180px) clamp(56px,9vh,120px); }
.hero-top{ display:flex; flex-direction:column; align-items:center; }
.hero--cine .mega{ max-width:15ch; margin-inline:auto; text-shadow:0 6px 44px rgba(0,0,0,.62); }
.hero--cine .hero-flip{ position:static; transform:none; margin:0; }
.hero--cine .hero-actions{ margin:0; justify-content:center; }

/* ════ hero v4 — masked device (bg dissolves to black), headline above, flip on front face ════ */
.hero--stack{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:clip;
  padding-block:clamp(104px,13vh,170px) var(--s-12); }
.hero--stack .hero-warning{ margin-bottom:var(--s-6); }
.hero--stack .mega{ max-width:16ch; margin:0 auto; line-height:.98; }
.hero-node{ position:relative; width:min(780px,94vw); margin:calc(-1 * var(--s-4)) auto 0; }
.hero-node img{ width:100%; height:auto; display:block;
  -webkit-mask:radial-gradient(74% 70% at 50% 51%, #000 64%, transparent 100%);
          mask:radial-gradient(74% 70% at 50% 51%, #000 64%, transparent 100%); }
.hero--stack .hero-flip{ position:absolute; left:50%; top:69%; transform:translate(-50%,-50%); margin:0;
  display:inline-flex; align-items:baseline; gap:.4em; white-space:nowrap;
  font-family:var(--font-body); font-style:italic; font-size:clamp(1rem,1.9vw,1.4rem); color:rgba(245,237,232,.94); }
.hero--stack .flip{ vertical-align:baseline; }
.hero--stack .hero-actions{ margin-top:var(--s-8); justify-content:center; }

/* 3-box cloud-model flow fits on small screens */
@media (max-width:560px){
  .edge-flow{ gap:var(--s-2); }
  .node{ font-size:.64rem; padding:var(--s-3) 2px; }
  .node small{ font-size:.66rem; margin-top:3px; }
  .pipe{ flex-basis:14px; }
}

/* hero v5 — transparent edge_node.png (no mask), bigger flip on the front face */
.hero-node{ width:min(600px,90vw); margin:calc(-1 * clamp(20px,6vh,70px)) auto 0; aspect-ratio:auto; overflow:visible; }
.hero-node img{ width:100%; height:auto; -webkit-mask:none; mask:none; filter:drop-shadow(0 34px 74px rgba(0,0,0,.5)); }
.hero--stack .hero-flip{ top:55%; bottom:auto; transform:translate(-50%,-50%); font-size:clamp(1.2rem,2.7vw,2rem); }

/* edge diagram — icons, equal boxes, prominent (captions removed) */
.node{ align-items:center; gap:7px; min-height:132px; }
.node-ic{ display:grid; place-items:center; height:30px; }
.node-ic svg{ width:28px; height:28px; color:var(--ink-muted); }
.node--dc .node-ic svg{ color:var(--saffron); }
.node-img{ width:56px; height:auto; }
.node-l{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:.76rem; color:var(--ink); line-height:1.1; margin:0; }

/* ════════════════════════════════════════════════════════════════════════
   HERO — consolidated (mobile sizing pass, 2026-06-27).
   edge_node.png is now pre-cropped tight to the device, so the old
   aspect-ratio + object-fit:cover letterbox hacks (the prior v6–v9 stack that
   chopped the device's bottom edge) are RETIRED. The device renders at its
   natural ratio; vertical rhythm is one consistent step:
   warning → headline → device → "Built for" → CTA.
   ════════════════════════════════════════════════════════════════════════ */
.hero--stack{ padding-block:clamp(96px,12vh,150px) clamp(64px,9vh,112px); }
.hero--stack .hero-warning{ margin:0 0 clamp(20px,4vh,40px); }
.hero--stack .mega{ max-width:16ch; margin:0 auto; line-height:.98; }
.hero-node{ position:relative; width:min(600px,84vw); aspect-ratio:auto; overflow:visible;
  margin:clamp(28px,5vh,52px) auto 0; }
.hero-node img{ width:100%; height:auto; object-fit:fill; object-position:center;
  -webkit-mask:none; mask:none; filter:drop-shadow(0 36px 64px rgba(0,0,0,.55)); }
.hero--stack .hero-flip{ position:static; transform:none; inset:auto; white-space:nowrap;
  margin:clamp(20px,3.5vh,38px) auto 0; display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--font-body); font-style:italic; color:rgba(245,237,232,.94);
  font-size:clamp(1.25rem,2.6vw,1.9rem); }
.hero--stack .hero-actions{ margin-top:clamp(26px,4.5vh,46px); }
.hero-cue{ bottom:var(--s-5); }

/* mobile: collapse the 100svh void — hero is only as tall as it needs to be */
@media (max-width:640px){
  .hero--stack{ min-height:auto; padding-block:clamp(40px,8vh,72px) clamp(40px,8vh,64px); }
  .hero-node{ width:min(440px,82vw); margin-top:clamp(18px,4vh,32px); }
  .hero--stack .hero-flip{ margin-top:clamp(16px,3vh,26px); font-size:clamp(1.15rem,5vw,1.5rem); }
  .hero--stack .hero-actions{ margin-top:clamp(20px,4vh,32px); }
  .hero-cue{ display:none; }
}

/* the Need keyhole is a cursor-driven reveal — on touch (no hover) there is no
   cursor, so show the full sharp copy instead of a half-blurred block */
@media (hover:none){
  .keyhole__sharp{ -webkit-mask:none; mask:none; }
  .keyhole__hint{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   SPACING PASS — consistent vertical rhythm (2026-06-27).
   Best practice: comfortable space WITHIN a group, deliberate consistent space
   BETWEEN groups. A reader reads a tight gap as "these belong together" and a
   big gap as "new topic" — so smooshed copy beside a cavern reads as broken.
   ════════════════════════════════════════════════════════════════════════ */
/* un-smoosh: a large .mega headline pressed against its body text needs air.
   (Only hits mega headlines FOLLOWED by a paragraph — cine / access / CTA bands;
   the hero's mega is followed by the device figure, so it's untouched.) */
.mega + p, .mega + .lead{ margin-top:clamp(16px,2.4vw,24px); }

/* cinematic full-bleed bands: min(82svh,720px) left a cavern of black under
   ~250px of copy on phones. Make the height content-driven with symmetric,
   generous padding so the band hugs its words top and bottom. */
@media (max-width:640px){
  .cine{ min-height:auto; }
  /* hug the copy; the next section adds its own top padding, so keep this
     moderate or the two stack into a cavern */
  .cine__inner{ padding-block:clamp(44px,7vh,68px); }
}

/* ════════════════════════════════════════════════════════════════════════
   SIX INNOVATIONS — sideways swipe carousel on mobile (2026-06-27).
   A vertical stack of six long cards was too much to scroll. On phones the six
   become a horizontal scroll-snap rail: one concise card at a time, swipe
   through, a peek of the next card + dots + "1 / 6" as the affordance.
   Desktop keeps the full vertical stack (untouched).
   ════════════════════════════════════════════════════════════════════════ */
.mstack-ui{ display:none; }
@media (max-width:640px){
  .mstack{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch;
    gap:var(--s-4); margin-top:var(--s-8);
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scroll-padding-inline:8%; padding-bottom:var(--s-2); scrollbar-width:none; }
  .mstack::-webkit-scrollbar{ display:none; }
  .mstack .mcard{ flex:0 0 84%; width:84%; min-height:0; scroll-snap-align:center;
    padding:var(--s-8); gap:var(--s-4); }
  .mstack .mcard__name{ font-size:1.5rem; }
  .mstack .mcard__txt{ font-size:1.02rem; }
  .mstack .mcard__benefit{ margin-top:auto; }   /* pin to bottom → uniform-height cards */
  .mstack .transition-line{ display:none; }

  /* swipe affordance: counter + dots + hint, below the rail */
  .mstack-ui{ display:flex; align-items:center; justify-content:center; gap:var(--s-4); margin-top:var(--s-6); }
  .mstack-count{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-subtle); min-width:3.4em; text-align:right; }
  .mstack-dots{ display:flex; gap:var(--s-2); }
  .mstack-dot{ width:7px; height:7px; border-radius:50%; padding:0; background:var(--line-strong);
    border:none; cursor:pointer; transition:background var(--m-base), transform var(--m-base); }
  .mstack-dot.is-on{ background:var(--accent); transform:scale(1.4); }
  .mstack-hint{ font-family:var(--font-display); font-size:.66rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-ghost); min-width:3.4em; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE MATH — middlemen list total + the one-vs-many comparison (2026-06-27)
   (replaces the per-seat slider: edge + inference removes the middlemen)
   ════════════════════════════════════════════════════════════════════════ */
.ptable tfoot .ptable-total td{ border-top:1px solid var(--line-strong); border-bottom:none;
  padding-top:var(--s-4); font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.08em; font-size:.92rem; color:var(--ink); }
.ptable tfoot .ptable-total .num{ color:var(--saffron); font-size:1.1rem; }
.ptable .ast{ color:#ff8a8d; font-size:.7em; }
.ptable-note{ max-width:600px; margin-top:var(--s-3); font-size:.82rem; font-style:italic; color:rgba(245,237,232,.55); }

.versus{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
@media (max-width:640px){ .versus{ grid-template-columns:1fr; gap:var(--s-4); } }
.versus__col{ background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--s-8); display:flex; flex-direction:column; gap:var(--s-4); }
.versus__col--new{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 26px 64px -38px var(--accent); }
.versus__k{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-subtle); }
.versus__col--new .versus__k{ color:var(--green-deep); }
.versus__v{ font-family:var(--font-display); font-size:var(--t-h3); line-height:1.04; color:var(--ink); }
.versus__col--old .versus__v{ color:var(--saffron); }
.versus__v small{ display:block; margin-top:var(--s-2); font-family:var(--font-body);
  font-size:.9rem; letter-spacing:0; text-transform:none; color:var(--ink-subtle); }

/* ════════════════════════════════════════════════════════════════════════
   CLOUD-vs-EDGE DIAGRAM — vertical flow on mobile (2026-06-27).
   The 3-node horizontal flow squeezed into a phone card (boxes cramped,
   "The Cloud" wrapping). Stack it: full-width nodes with vertical connectors —
   reads top-to-bottom like a phone wants. Desktop stays horizontal.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .edge-flow{ flex-direction:column; align-items:stretch; gap:var(--s-2); }
  .node{ flex-direction:row; align-items:center; justify-content:center; gap:var(--s-3);
    min-height:0; padding:var(--s-4) var(--s-5); font-size:.78rem; }
  .node-ic{ height:auto; }
  .node-l{ font-size:.8rem; }
  .node small{ margin-top:0; }
  .node-img{ width:40px; }
  /* connector: a short vertical bar with a travelling highlight */
  .pipe{ flex:0 0 auto; width:3px; height:20px; align-self:center; }
  .pipe::after{ left:0; right:0; top:auto; width:auto; height:45%;
    background:linear-gradient(180deg, transparent, var(--green), transparent);
    animation:flowv 1.9s linear infinite; }
  .pipe--out::after{ background:linear-gradient(180deg, transparent, var(--saffron), transparent); }
}
@keyframes flowv{ from{ transform:translateY(-120%); } to{ transform:translateY(340%); } }

/* mechanism card icons (Lucide/Feather, MIT-licensed inline SVG) */
.mcard__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.mcard__ic{ display:inline-flex; color:var(--accent); }
.mcard__ic svg{ width:32px; height:32px; }
.mcard:nth-child(2) .mcard__ic,
.mcard:nth-child(5) .mcard__ic{ color:var(--accent-2); }   /* alternate green/indigo */
.mstack .mcard__no{ margin:0; }

/* ════════════════════════════════════════════════════════════════════════
   NAV — Industries dropdown (shared across hub + verticals). Pure CSS:
   hover (desktop) + focus-within (tap/keyboard). 2026-06-28.
   ════════════════════════════════════════════════════════════════════════ */
.nav-dd{ position:relative; display:inline-flex; }
.nav-dd-btn{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-subtle); display:inline-flex; align-items:center; gap:7px; padding:8px 2px; cursor:pointer; background:none; border:0; }
.nav-dd-btn:hover, .nav-dd:focus-within .nav-dd-btn{ color:var(--ink); }
.nav-dd-btn .caret{ font-size:.62em; transition:transform var(--m-base) var(--ease); }
.nav-dd:hover .caret, .nav-dd-btn[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.nav-dd-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  width:min(330px,88vw); background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.65); padding:var(--s-2); z-index:80;
  opacity:0; visibility:hidden; transition:opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease); }
.nav-dd:hover .nav-dd-panel, .nav-dd-btn[aria-expanded="true"] ~ .nav-dd-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-dd-panel::before{ content:""; position:absolute; bottom:100%; left:0; right:0; height:16px; }
.nav-dd-panel a{ display:block; padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  transition:background var(--m-base) var(--ease); }
.nav-dd-panel a:hover{ background:var(--surface-2); }
.nav-dd-panel a b{ font-family:var(--font-display); font-weight:400; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); display:block; transition:color var(--m-base); }
.nav-dd-panel a:hover b{ color:var(--accent); }
.nav-dd-panel a small{ color:var(--ink-subtle); font-size:.86rem; }
.nav-dd-panel .dd-all{ border-top:1px solid var(--line); margin-top:var(--s-1); padding-top:var(--s-4); }
.nav-dd-panel .dd-all b{ color:var(--accent-2); }
@media (max-width:560px){
  .nav-dd-panel{ left:auto; right:0; transform:translateY(6px); }
  .nav-dd:hover .nav-dd-panel, .nav-dd-btn[aria-expanded="true"] ~ .nav-dd-panel{ transform:translateY(0); }
  .nav-dd-btn{ font-size:.66rem; letter-spacing:.08em; }
}