/* ===================================================================
   SPACEBEACON — Shared Design System (v4, Fluent-Era)
   Brief-canonical tokens. Loaded by every page.
   AI For Everyone. In Every Language.
   =================================================================== */
:root{
  --logo-img:url("spacebeacon-logo.svg");

  /* Layout */
  --page-max:1440px;--content-max:1200px;--editorial-max:880px;--narrow-max:720px;

  /* Foundation */
  --navy-980:#040E18;--navy-950:#061421;--navy-900:#081A2B;--navy-800:#102A43;--navy-700:#16344f;
  --white:#FFFFFF;--ice:#F8FAFC;--slate-50:#F9FAFB;--slate-100:#F3F4F6;--slate-200:#E5E7EB;
  --slate-300:#D1D5DB;--slate-400:#9CA3AF;--slate-500:#6B7280;--slate-600:#4B5563;--slate-700:#374151;
  --slate-800:#1F2937;--slate-900:#111827;

  /* Innovation */
  --blue-600:#1D70F5;--blue-700:#155BD1;--cyan-400:#22C1FF;--teal-500:#14B8A6;--violet-500:#725CFF;
  --magenta-500:#D946EF;--green-700:#0F766E;--lime-400:#A3E635;--gold-500:#EAB308;--orange-500:#FF7A00;--yellow-400:#FBBF24;

  /* Gradients — brief canon */
  --gradient-core:linear-gradient(135deg,#1D70F5 0%,#22C1FF 50%,#14B8A6 100%);
  --gradient-labs:linear-gradient(135deg,#1D70F5 0%,#725CFF 52%,#D946EF 100%);
  --gradient-public:linear-gradient(135deg,#FBBF24 0%,#FF7A00 48%,#D946EF 100%);
  --gradient-impact:linear-gradient(135deg,#14B8A6 0%,#A3E635 100%);
  --gradient-sovereign:linear-gradient(135deg,#FF7A00,#FBBF24,#FFFFFF);

  /* Type */
  --font-heading:"Inter Tight","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --h1:clamp(3rem,7vw,6.7rem);--h2:clamp(2.15rem,4.8vw,4.45rem);--h3:clamp(1.55rem,2.7vw,2.65rem);--h4:1.4rem;
  --body-xl:clamp(1.2rem,2vw,1.58rem);--body-lg:1.18rem;--body:1rem;--small:.875rem;--micro:.76rem;

  /* Spacing */
  --section-xl:150px;--section-lg:112px;--section-md:84px;--section-sm:60px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--radius-2xl:34px;
  --motion-fast:180ms;--motion-base:260ms;--motion-slow:440ms;--ease:cubic-bezier(.22,.61,.36,1);
  --border:1px solid var(--slate-200);--border-dark:1px solid rgba(255,255,255,.14);
  --shadow-soft:0 1px 3px rgba(8,26,43,.06),0 12px 30px -18px rgba(8,26,43,.20);
  --shadow-lift:0 2px 6px rgba(8,26,43,.08),0 30px 60px -28px rgba(29,112,245,.34);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{font-family:var(--font-body);color:var(--slate-900);background:var(--ice);line-height:1.6;font-size:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;letter-spacing:-.02em;line-height:1.04}
.container{width:min(100% - 48px,var(--content-max));margin-inline:auto}
.editorial{width:min(100% - 48px,var(--editorial-max));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-md) 0;z-index:999}
.skip-link:focus{left:0}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-700)}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--gradient-core)}
.dark .eyebrow,.darker .eyebrow{color:#9fd0ff}
.eyebrow.green{color:var(--green-700)}
.eyebrow.center{justify-content:center}

/* ---------- Logo ---------- */
.brand{display:flex;align-items:center;gap:12px}
/* Logo boxes follow the mark's 317x80 ratio (3.96:1) so `contain` leaves no
   dead space. The mark is DARK (#1D1D1F): it needs no filter on the light
   header, and inverts on the dark hero and footer. That is the opposite of
   the previous white PNG, so these two rules swapped when the asset changed. */
.brand-logo{display:block;background:var(--logo-img) left center/contain no-repeat;width:174px;height:44px}
.site-header .brand-logo{filter:none}
.hero .brand-logo,.site-footer .brand-logo{filter:invert(1)}
.site-footer .brand-logo{width:198px;height:50px;margin-bottom:20px}
@media(max-width:560px){.brand-logo{width:143px;height:36px}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(248,250,252,.82);backdrop-filter:blur(18px) saturate(140%);border-bottom:var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.primary-nav{display:flex;gap:24px}
.primary-nav a{font-size:.9rem;font-weight:500;color:var(--slate-700);padding:6px 0;position:relative;white-space:nowrap}
.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--gradient-core);transition:right var(--motion-base) var(--ease)}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--navy-900)}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{right:0}
.header-cta{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;background:none;border:var(--border);border-radius:var(--radius-sm);padding:9px 11px;cursor:pointer;font-size:1rem}
@media(max-width:1080px){.primary-nav{gap:18px}.primary-nav a{font-size:.84rem}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:transform var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease),background var(--motion-base),border-color var(--motion-base),color var(--motion-base)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--cyan-400);outline-offset:2px}
.btn-primary{background:var(--gradient-core);color:#fff;box-shadow:0 10px 24px -12px rgba(29,112,245,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(29,112,245,.75)}
.btn-secondary{background:transparent;color:var(--navy-900);border-color:var(--slate-300)}
.btn-secondary:hover{border-color:var(--blue-600);color:var(--blue-700);transform:translateY(-2px)}
.on-dark{color:#fff;border-color:rgba(255,255,255,.4)}
.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost{background:transparent;min-height:auto;padding:0;color:var(--blue-700);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-ghost .arrow{transition:transform var(--motion-base) var(--ease)}
.btn-ghost:hover .arrow{transform:translateX(5px)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.88rem}

/* ---------- Icons ---------- */
.ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;color:#fff;flex:0 0 auto}
.ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-950);color:#fff;isolation:isolate}
.hero .mesh{position:absolute;inset:0;z-index:-1}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.mesh-1{width:560px;height:560px;background:radial-gradient(circle at 30% 30%,#1D70F5,transparent 70%);top:-160px;left:-120px;animation:drift1 22s var(--ease) infinite alternate}
.mesh-2{width:520px;height:520px;background:radial-gradient(circle at 60% 40%,#725CFF,transparent 70%);top:-60px;right:-120px;animation:drift2 26s var(--ease) infinite alternate}
.mesh-3{width:480px;height:480px;background:radial-gradient(circle at 50% 50%,#14B8A6,transparent 72%);bottom:-200px;left:30%;animation:drift3 30s var(--ease) infinite alternate}
.hero .grain{position:absolute;inset:0;z-index:-1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(60px,40px) scale(1.1)}}
@keyframes drift2{to{transform:translate(-50px,60px) scale(1.08)}}
@keyframes drift3{to{transform:translate(40px,-50px) scale(1.12)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-block:104px}
.hero h1{font-size:var(--h1);line-height:.98;letter-spacing:-.045em;font-weight:700}
.hero h1 .grad{background:var(--gradient-core);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{margin-top:26px;font-size:var(--body-xl);line-height:1.5;color:rgba(255,255,255,.8);max-width:620px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.category-badge{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:var(--small);font-weight:600;color:#bfe3ff;border:1px solid rgba(34,193,255,.32);border-radius:999px;padding:8px 16px;background:rgba(34,193,255,.07)}
.category-badge .pi-dot{width:8px;height:8px;border-radius:50%;background:var(--gradient-public)}
.category-badge b{font-family:var(--font-heading);font-weight:700;color:#fff}
.category-badge sup{font-size:.62em;margin-left:1px;opacity:.85}
/* compact hero (interior pages) */
.hero.compact .hero-grid{padding-block:88px}
.hero.compact h1{font-size:clamp(2.6rem,6vw,5rem)}

/* ---------- Participation Orbit (signature) ---------- */
.orbit{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin-inline:auto}
.orbit .ring{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.orbit .ring.r1{inset:14%}.orbit .ring.r2{inset:0}
.orbit .core{position:absolute;inset:34%;border-radius:50%;background:var(--gradient-core);display:grid;place-items:center;text-align:center;font-family:var(--font-heading);font-weight:700;font-size:.92rem;color:#fff;padding:10px;box-shadow:0 0 60px -8px rgba(34,193,255,.6)}
.orbit .onode{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;background:rgba(8,26,43,.78);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);border-radius:999px;padding:8px 14px;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap}
.orbit .onode .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.orbit .onode:nth-child(3){top:6%;left:50%}
.orbit .onode:nth-child(4){top:26%;left:92%}
.orbit .onode:nth-child(5){top:74%;left:92%}
.orbit .onode:nth-child(6){top:96%;left:50%}
.orbit .onode:nth-child(7){top:74%;left:8%}
.orbit .onode:nth-child(8){top:26%;left:8%}
@media(max-width:560px){.orbit .onode{font-size:.68rem;padding:6px 10px}}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-lg)}
.section.dark{background:var(--navy-900);color:#fff}
.section.darker{background:var(--navy-950);color:#fff}
.section.light{background:var(--white)}
.section.ice{background:var(--ice)}
.section-head{max-width:780px;margin-bottom:48px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:var(--h2);margin-top:18px;letter-spacing:-.035em}
.section-head p{margin-top:18px;font-size:var(--body-lg);color:var(--slate-600);max-width:660px}
.section-head.center p{margin-inline:auto}
.dark .section-head p,.darker .section-head p{color:rgba(255,255,255,.74)}
.sys-label{font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-400);font-weight:600;margin-bottom:14px}

/* ---------- Trust bar ---------- */
.trust-bar{background:#fff;border-block:var(--border)}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.trust-grid>div{padding:26px 18px;border-left:var(--border);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-600);display:flex;align-items:center;gap:10px}
.trust-grid>div:first-child{border-left:0}
.trust-grid .gdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--gradient-core)}

/* ---------- Editorial ---------- */
.editorial-section .editorial{
  /* The editorial sits inside an explicit .container wrapper now (added in
     all 7 editorial pages), so it left-aligns with the container's left edge.
     Override the base .editorial's auto-centering and self-width so this
     block hugs the container start; only its prose width is capped. */
  margin:0;
  width:auto;
  max-width:var(--editorial-max)
}
/* Variant: left-aligned final-CTA. The default .final-cta centers, but on
   some pages (e.g. Infrastructure) the CTA visually follows a stack of
   left-aligned sections, and the centered version creates an awkward
   alignment switch. Apply .left to that section to keep the rhythm. */
.final-cta.left{text-align:left}
.final-cta.left .cta-box{margin-inline:0;max-width:var(--editorial-max)}
.final-cta.left .eyebrow{justify-content:flex-start}
.final-cta.left .hero-actions{justify-content:flex-start}

/* Editorial section on dark/darker backgrounds: body copy needs to flip
   from slate-700 (designed for light bg) to a readable white so it matches
   the rest of the dark section's text. */
.section.dark.editorial-section .editorial .lead,
.section.darker.editorial-section .editorial .lead,
.section.dark.editorial-section .editorial .cols p,
.section.darker.editorial-section .editorial .cols p,
.section.dark.editorial-section .editorial > p,
.section.darker.editorial-section .editorial > p{color:rgba(255,255,255,.78)}
.section.dark.editorial-section .editorial .closer,
.section.darker.editorial-section .editorial .closer{color:#fff}
.editorial-section h2{font-size:var(--h2);letter-spacing:-.04em;line-height:1.02}
.editorial-section .lead{margin-top:30px;font-size:var(--body-xl);line-height:1.6;color:var(--slate-700)}
.dark .editorial-section .lead,.darker .editorial-section .lead{color:rgba(255,255,255,.82)}
.editorial-section .cols{margin-top:30px;columns:2;column-gap:48px;font-size:var(--body-lg);color:var(--slate-600)}
.editorial-section .cols p{margin-bottom:18px;break-inside:avoid}
.editorial-section .closer{margin-top:30px;font-family:var(--font-heading);font-weight:600;font-size:1.4rem;color:var(--navy-900);letter-spacing:-.02em}
.dark .editorial-section .closer,.darker .editorial-section .closer{color:#fff}

/* ---------- Split ---------- */
.split-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.split-grid.flip>.split-copy{order:2}
.split-copy h2{font-size:var(--h2);letter-spacing:-.035em}
.split-copy p{margin-top:20px;font-size:var(--body-lg);color:var(--slate-600)}
.dark .split-copy p,.darker .split-copy p{color:rgba(255,255,255,.75)}
.split-copy .actions{margin-top:28px}

/* ---------- Cards ---------- */
.card-grid{display:grid;gap:20px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:var(--border);border-radius:var(--radius-lg);padding:30px;transition:border-color var(--motion-base) var(--ease),transform var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease);position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);border-color:transparent;box-shadow:var(--shadow-lift)}
.card h3{font-size:1.28rem;letter-spacing:-.02em}
.card h4{font-size:1.1rem}
.card .sub{font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--blue-700);margin-top:6px}
.card p{margin-top:12px;color:var(--slate-600);font-size:.97rem}
.card .more{margin-top:20px}
.card .accent-rail{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gradient-core);opacity:0;transition:opacity var(--motion-base)}
.card:hover .accent-rail{opacity:1}
.platform-card{min-height:340px;display:flex;flex-direction:column;padding:40px}
.platform-card .sub{margin-top:0}
.platform-card p{flex:1}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{font-size:var(--small);font-weight:500;color:var(--slate-700);background:var(--slate-100);border:var(--border);border-radius:999px;padding:6px 13px}

/* pillar list */
.pillar{display:flex;gap:16px;padding:20px 0;border-top:var(--border)}
.pillar:first-child{border-top:0}
.pillar .ic{width:42px;height:42px;border-radius:12px;margin:0}
.pillar b{font-family:var(--font-heading);font-size:1.05rem}
.pillar p{margin-top:4px;color:var(--slate-600);font-size:.95rem}
.dark .pillar,.darker .pillar{border-color:rgba(255,255,255,.12)}
.dark .pillar p,.darker .pillar p{color:rgba(255,255,255,.7)}

/* research grid (dark) */
.research-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.research-item{border:var(--border-dark);border-radius:var(--radius-md);padding:18px;background:rgba(255,255,255,.03)}
.research-item .ic{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
.research-item b{font-family:var(--font-heading);font-size:1rem}
.research-item span{display:block;margin-top:4px;font-size:.85rem;color:rgba(255,255,255,.62)}

/* ---------- Ecosystem ---------- */
.ecosystem-map{border:var(--border-dark);border-radius:var(--radius-2xl);padding:48px;background:rgba(255,255,255,.04)}
.eco-top{text-align:center;margin-bottom:38px}
.eco-top .root-pill{display:inline-block;padding:16px 30px;border-radius:var(--radius-lg);background:var(--gradient-labs);font-family:var(--font-heading);font-weight:700;font-size:1.12rem}
.eco-branches{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.eco-branch{border:var(--border-dark);border-radius:var(--radius-lg);padding:20px;background:rgba(255,255,255,.03);transition:border-color var(--motion-base),transform var(--motion-base),background var(--motion-base)}
.eco-branch:hover{border-color:var(--cyan-400);transform:translateY(-3px);background:rgba(34,193,255,.07)}
.eco-branch .bdot{width:28px;height:28px;border-radius:9px;margin-bottom:12px}
.eco-branch b{display:block;font-family:var(--font-heading);font-size:.98rem;margin-bottom:5px}
.eco-branch span{font-size:.8rem;color:rgba(255,255,255,.66)}

/* ---------- National Alignment Matrix ---------- */
.matrix{border:var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.matrix-row{display:grid;grid-template-columns:1fr auto 1.4fr;align-items:center;gap:18px;padding:22px 26px;border-top:var(--border)}
.matrix-row:first-child{border-top:0}
.matrix-row .pri{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--navy-900)}
.matrix-row .arrow-c{color:var(--blue-600);font-weight:600}
.matrix-row .contrib{color:var(--slate-600);font-size:.98rem}
.dark .matrix,.darker .matrix{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14)}
.dark .matrix-row,.darker .matrix-row{border-color:rgba(255,255,255,.12)}
.dark .matrix-row .pri,.darker .matrix-row .pri{color:#fff}
.dark .matrix-row .contrib,.darker .matrix-row .contrib{color:rgba(255,255,255,.72)}
@media(max-width:680px){.matrix-row{grid-template-columns:1fr;gap:6px}.matrix-row .arrow-c{display:none}}

/* ---------- Participation Intelligence Model ---------- */
.pi-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.pi-step{border:var(--border);border-radius:var(--radius-lg);padding:24px 20px;background:#fff;position:relative;transition:transform var(--motion-base),box-shadow var(--motion-base)}
.pi-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.pi-step .n{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;background:var(--gradient-public);-webkit-background-clip:text;background-clip:text;color:transparent}
.pi-step b{display:block;margin-top:8px;font-family:var(--font-heading);font-size:1.05rem}
.pi-step p{margin-top:6px;font-size:.86rem;color:var(--slate-600)}

/* ---------- Report / dashboard cards ---------- */
.report-card{border:var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff;transition:transform var(--motion-base),box-shadow var(--motion-base)}
.report-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.report-card .cover{height:140px;display:flex;align-items:flex-end;padding:20px;color:#fff}
.report-card .cover.c1{background:var(--gradient-public)}
.report-card .cover.c2{background:var(--gradient-core)}
.report-card .cover.c3{background:var(--gradient-impact)}
.report-card .cover.c4{background:var(--gradient-labs)}
.report-card .cover b{font-family:var(--font-heading);font-weight:700;font-size:1.12rem;line-height:1.1}
.report-card .body{padding:20px 22px}
.report-card .body span{font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--slate-400)}
.report-card .body p{margin-top:8px;font-size:.92rem;color:var(--slate-600)}

/* ---------- Pathway grid (public sector) ---------- */
.pathway{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pathway .step{border:var(--border);border-radius:var(--radius-lg);padding:26px;background:#fff;position:relative}
.pathway .step .k{width:34px;height:34px;border-radius:10px;background:var(--gradient-core);color:#fff;display:grid;place-items:center;font-family:var(--font-heading);font-weight:700;margin-bottom:14px}
.pathway .step b{font-family:var(--font-heading);font-size:1.08rem}
.pathway .step p{margin-top:8px;font-size:.93rem;color:var(--slate-600)}

/* ---------- Timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(6,1fr);border-top:2px solid var(--slate-200);margin-top:8px}
.timeline li{list-style:none;padding:28px 22px 0;border-left:var(--border);position:relative}
.timeline li:first-child{border-left:0}
.timeline li::before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;border-radius:50%;background:var(--gradient-core)}
.timeline li.milestone::before{background:var(--gradient-public)}
.timeline .year{font-family:var(--font-heading);font-weight:700;font-size:1.15rem;color:var(--navy-900)}
.timeline .year.gold{background:var(--gradient-public);-webkit-background-clip:text;background-clip:text;color:transparent}
.timeline p{margin-top:8px;font-size:.92rem;color:var(--slate-600)}

/* ---------- Metrics / stat cards ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);border:var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.metric{padding:36px 26px;border-left:var(--border)}
.metric:first-child{border-left:0}
.metric strong{display:block;font-family:var(--font-heading);font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.04em;line-height:1;background:var(--gradient-core);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric span{display:block;margin-top:12px;font-size:.88rem;color:var(--slate-600)}

/* ---------- Insights ---------- */
.insight-card{display:flex;flex-direction:column}
.insight-card .cat{font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--violet-500)}
.insight-card h4{margin-top:12px;font-size:1.18rem;letter-spacing:-.01em;flex:1}
.insight-card .more{margin-top:20px}

/* ---------- Future tags ---------- */
.future-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.future-tags span{font-family:var(--font-heading);font-weight:600;font-size:1.05rem;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:11px 22px;background:rgba(255,255,255,.04)}

/* ---------- CTA band ---------- */
.final-cta{position:relative;overflow:hidden;background:var(--navy-950);color:#fff;text-align:center;isolation:isolate}
.final-cta .mesh{position:absolute;inset:0;z-index:-1;opacity:.7}
.cta-box{max-width:760px;margin-inline:auto}
.cta-box h2{font-size:var(--h2);letter-spacing:-.035em}
.cta-box p{margin-top:20px;font-size:var(--body-lg);color:rgba(255,255,255,.78)}
.cta-box .hero-actions{justify-content:center}

/* ---------- Contact form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:.86rem;font-weight:600;color:var(--slate-700)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;padding:13px 15px;border:var(--border);border-radius:var(--radius-md);background:#fff;color:var(--slate-900);transition:border-color var(--motion-base)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(29,112,245,.12)}
.field textarea{resize:vertical;min-height:130px}
.contact-routes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.route{border:var(--border);border-radius:var(--radius-lg);padding:24px;background:#fff}
.route b{font-family:var(--font-heading);font-size:1.05rem}
.route p{margin-top:6px;font-size:.92rem;color:var(--slate-600)}
.route a{display:inline-block;margin-top:10px;color:var(--blue-700);font-weight:600;font-size:.92rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-980);color:rgba(255,255,255,.7);padding-top:74px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:42px;padding-bottom:54px}
.footer-brand p{font-size:.92rem;max-width:300px;line-height:1.6}
.footer-tag{margin-top:18px;font-family:var(--font-heading);font-weight:600;font-size:1rem}
.footer-tag .grad{background:var(--gradient-core);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-category{margin-top:16px;font-size:.82rem;color:rgba(255,255,255,.55)}
.footer-category b{font-family:var(--font-heading);color:rgba(255,255,255,.85)}
.footer-col h5{font-family:var(--font-heading);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.footer-col a{display:block;font-size:.92rem;padding:6px 0;color:rgba(255,255,255,.78);transition:color var(--motion-fast)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:var(--small)}
.footer-bottom a{margin-left:18px;color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:#fff}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .eco-branches{grid-template-columns:repeat(3,1fr)}
  .pi-flow{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media(max-width:860px){
  .primary-nav,.header-cta .btn-secondary{display:none}
  .menu-toggle{display:inline-flex}
  .primary-nav.open{display:flex;position:absolute;flex-direction:column;top:78px;left:0;right:0;background:#fff;padding:18px 24px;border-bottom:var(--border);gap:6px;box-shadow:var(--shadow-soft)}
  .primary-nav.open a{padding:12px 0;font-size:1rem;border-bottom:1px solid var(--slate-100)}
  .hero-grid{grid-template-columns:1fr;gap:44px;padding-block:72px}
  .hero-visual{order:2}
  .split-grid{grid-template-columns:1fr;gap:40px}
  .split-grid.flip>.split-copy{order:0}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .editorial-section .cols{columns:1}
  .trust-grid{grid-template-columns:1fr}
  .trust-grid>div{border-left:0;border-top:var(--border)}
  .trust-grid>div:first-child{border-top:0}
  .eco-branches{grid-template-columns:1fr 1fr}
  .pi-flow{grid-template-columns:1fr 1fr}
  .pathway{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .timeline li{border-left:0;border-top:var(--border);padding:24px 0 0}
  .timeline li:first-child{border-top:0}
  .timeline li::before{left:0}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric{border-left:0;border-top:var(--border)}
  .metric:first-child,.metric:nth-child(2){border-top:0}
  .form-grid,.contact-routes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .cols-4,.eco-branches,.pi-flow,.metric-grid,.footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mesh-blob{animation:none}
}

/* ===================================================================
   ADDENDUM A — v2 mandatory components
   =================================================================== */

/* Ecosystem map: institutional hierarchy can hold 7 nodes */
.eco-branches{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}

/* ---- Expandable National AI Alignment Matrix (native <details>) ---- */
.matrix details{border-top:var(--border)}
.matrix details:first-child{border-top:0}
.matrix summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto 1.5fr auto;align-items:center;gap:18px;padding:22px 26px}
.matrix summary::-webkit-details-marker{display:none}
.matrix summary .pri{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--navy-900)}
.matrix summary .arrow-c{color:var(--blue-600);font-weight:600}
.matrix summary .contrib{color:var(--slate-600);font-size:.98rem}
.matrix summary .chev{color:var(--slate-400);transition:transform var(--motion-base) var(--ease);font-size:.9rem}
.matrix details[open] summary .chev{transform:rotate(90deg)}
.matrix .matrix-detail{padding:0 26px 24px;color:var(--slate-600);font-size:.94rem;max-width:90%}
.matrix .matrix-detail .tag-list{margin-top:2px}
.dark .matrix summary .pri,.darker .matrix summary .pri{color:#fff}
.dark .matrix summary .contrib,.darker .matrix summary .contrib{color:rgba(255,255,255,.74)}
.dark .matrix .matrix-detail,.darker .matrix .matrix-detail{color:rgba(255,255,255,.7)}
.dark .matrix .tag,.darker .matrix .tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
@media(max-width:680px){.matrix summary{grid-template-columns:1fr auto;gap:6px}.matrix summary .arrow-c{display:none}.matrix summary .contrib{grid-column:1 / -1}}

/* ---- Participation Intelligence Model — radial hexagon ---- */
.pi-radial{position:relative;width:100%;max-width:760px;margin:8px auto 0;aspect-ratio:16/11}
.pi-radial .links{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pi-radial .links line{stroke:rgba(255,255,255,.16);stroke-width:.35}
.pi-radial .links polygon{stroke:rgba(255,255,255,.12);stroke-width:.3;fill:none}
.pi-radial .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:158px;height:158px;border-radius:50%;background:var(--gradient-public);display:grid;place-items:center;text-align:center;font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:#fff;padding:16px;box-shadow:0 0 70px -8px rgba(217,70,239,.55);z-index:2}
.pi-radial .pnode{position:absolute;transform:translate(-50%,-50%);background:rgba(8,26,43,.82);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);border-radius:14px;padding:12px 16px;min-width:124px;text-align:center;z-index:3;transition:border-color var(--motion-base),transform var(--motion-base)}
.pi-radial .pnode:hover{border-color:var(--cyan-400);transform:translate(-50%,-50%) scale(1.04)}
.pi-radial .pnode b{font-family:var(--font-heading);font-size:.98rem;color:#fff}
.pi-radial .pnode span{display:block;margin-top:3px;font-size:.72rem;color:rgba(255,255,255,.6)}
@media(max-width:620px){
  .pi-radial{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pi-radial .links,.pi-radial .center{display:none}
  .pi-radial .pnode{position:static;transform:none;min-width:0}
  .pi-radial .pnode:hover{transform:none}
}

/* ---- Dashboard preview (Inclusion Index) ---- */
.dash{border:var(--border);border-radius:var(--radius-lg);background:#fff;padding:30px;box-shadow:var(--shadow-soft)}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px}
.dash-top .title b{font-family:var(--font-heading);font-size:1.2rem;display:block}
.dash-top .title span{font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400);font-weight:600;margin-top:4px;display:block}
.gauge{position:relative;width:110px;height:110px;border-radius:50%;flex:0 0 auto;background:conic-gradient(from 215deg,var(--cyan-400),var(--blue-600) 62%,var(--slate-200) 62%)}
.gauge .hole{position:absolute;inset:13px;background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center}
.gauge .hole b{font-family:var(--font-heading);font-size:1.55rem;color:var(--navy-900);line-height:1}
.gauge .hole span{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-400);margin-top:3px}
.meter+.meter{margin-top:16px}
.meter .lab{display:flex;justify-content:space-between;font-size:.86rem;color:var(--slate-700);margin-bottom:7px}
.meter .lab b{font-weight:600}
.meter .bar{height:9px;border-radius:6px;background:var(--slate-100);overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:6px;background:var(--gradient-core)}
.dash-note{margin-top:20px;font-size:.78rem;color:var(--slate-400)}

/* Ecosystem map placed on a dark panel inside a light section */
.ecosystem-map.panel-dark .root-pill,.ecosystem-map.panel-dark .eco-branch b{color:#fff}

/* =====================================================================
   WARMTH + MEDIA LAYER  ·  v4
   Adds a human, editorial feel to the core pages: real-people imagery
   frames, a click-to-play video story block, an ambient hero-video
   pattern, a "future builders" people band, and a testimonial with a
   face. Built on the v4 tokens (motion/ease/shadow/radius/section).
   Reuses v4's existing .reveal + .grain + app.js observer.
   Every image/video is a drop-in slot — swap the src for licensed
   photography or your own footage.
   ===================================================================== */

:root{
  --paper:#FBF6EF;   /* warm off-white */
  --cream:#F4EADC;   /* warmer band   */
  --gradient-warm:linear-gradient(135deg,#FF7A00 0%,#E8896B 55%,#FBBF24 100%);
}

/* Warm section background + faint paper grain (sits with v4 .light/.ice) */
.section.warm{background:var(--paper);position:relative}
.section.warm:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:multiply
}
.section.warm > .container{position:relative;z-index:1}
.section.warm .eyebrow{color:var(--orange-500)}

/* ---- Media frame: rounded, warm-edged, with a caption tag ---- */
.media-frame{
  position:relative;border-radius:var(--radius-2xl);overflow:hidden;background:var(--cream);
  box-shadow:var(--shadow-lift);isolation:isolate
}
.media-frame:before{ /* warm gradient hairline edge */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:2;
  background:var(--gradient-warm);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;pointer-events:none
}
.media-frame img,.media-frame video{display:block;width:100%;height:100%;object-fit:cover}
.media-frame .caption{
  position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  background:rgba(6,20,33,.72);backdrop-filter:blur(8px);color:#fff;font-size:.82rem;font-weight:600;
  padding:9px 13px;border-radius:var(--radius-md)
}
.media-frame .caption:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gradient-warm)}
.ar-4-3{aspect-ratio:4/3}.ar-16-9{aspect-ratio:16/9}.ar-1-1{aspect-ratio:1/1}.ar-4-5{aspect-ratio:4/5}

/* ---- Photo feature: copy + framed image (uses v4 .split-grid/.flip) ---- */
.photo-feature{display:grid;grid-template-columns:1fr 1.04fr;gap:64px;align-items:center}
.photo-feature.flip .pf-copy{order:2}
.photo-feature .pf-copy h2{margin-top:18px}
.photo-feature .pf-copy p{margin-top:18px;color:var(--slate-700);font-size:var(--body-lg);line-height:1.7}
.section.dark .photo-feature .pf-copy p,.section.darker .photo-feature .pf-copy p{color:rgba(255,255,255,.78)}

/* ---- Video feature: click-to-play facade (poster + play button) ---- */
.video-embed{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;background:var(--cream)}
.video-embed .poster{transition:transform var(--motion-slow) var(--ease),filter var(--motion-base)}
.video-embed:hover .poster{transform:scale(1.03);filter:saturate(1.05)}
.video-embed .play{position:absolute;inset:0;z-index:4;display:grid;place-items:center}
.video-embed .play i{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.6);transition:transform var(--motion-base) var(--ease),background var(--motion-base)
}
.video-embed:hover .play i{transform:scale(1.08);background:#fff}
.video-embed .play i:after{content:"";margin-left:5px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--orange-500)}
.video-embed .vlabel{
  position:absolute;left:18px;top:18px;z-index:4;color:#fff;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;font-size:.72rem;background:rgba(6,20,33,.55);backdrop-filter:blur(8px);
  padding:8px 12px;border-radius:99px
}
.video-embed.is-playing .play,.video-embed.is-playing .vlabel{display:none}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}

/* ---- Ambient hero video: muted, looping behind a headline ---- */
.video-hero{position:relative;overflow:hidden;min-height:clamp(440px,72vh,760px);display:grid;align-items:center;color:#fff}
.video-hero video,.video-hero .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,20,33,.30),rgba(6,20,33,.66) 70%,rgba(6,20,33,.82))}
.video-hero .container{position:relative;z-index:2}
.video-hero h1,.video-hero h2{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.video-hero video{display:none}}

/* ---- People band: portrait tiles with names & roles ---- */
.people-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person .portrait{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--cream);box-shadow:var(--shadow-soft)}
.person .portrait img{width:100%;height:100%;object-fit:cover}
.person .name{margin-top:16px;font-family:var(--font-heading);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:var(--navy-900)}
.section.dark .person .name,.section.darker .person .name{color:#fff}
.person .role{margin-top:3px;color:var(--slate-500);font-size:.92rem;font-weight:600}

/* ---- Human quote: testimonial with a face ---- */
.quote-human{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;background:var(--cream);border-radius:var(--radius-2xl);padding:46px 52px;position:relative;overflow:hidden}
.quote-human:before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:var(--gradient-warm)}
.quote-human .avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.9)}
.quote-human .avatar img{width:100%;height:100%;object-fit:cover}
.quote-human blockquote{margin:0;font-family:var(--font-heading);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.28;letter-spacing:-.02em;color:var(--navy-900)}
.quote-human .by{margin-top:16px;font-weight:700;color:var(--slate-700)}
.quote-human .by span{display:block;font-weight:600;color:var(--slate-500);font-size:.92rem}

@media (max-width:980px){
  .photo-feature,.photo-feature.flip{grid-template-columns:1fr;gap:36px}
  .photo-feature.flip .pf-copy{order:0}
  .people-band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .quote-human{grid-template-columns:1fr;text-align:center;padding:34px 26px}
  .quote-human .avatar{margin:0 auto}
  .quote-human:before{width:100%;height:6px;inset:0 0 auto 0}
  .video-embed .play i{width:68px;height:68px}
}

/* =====================================================================
   PARTICIPATION VOICE DEMO  ·  hero (scripted, accessible, no real mic)
   ===================================================================== */
.hero-visual{display:flex;flex-direction:column;gap:22px}
.orbit .onode{transition:transform var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease),border-color var(--motion-base),background var(--motion-base)}
.orbit .onode.is-active{
  transform:translate(-50%,-50%) scale(1.08);
  border-color:rgba(255,255,255,.55);background:rgba(8,26,43,.95);
  box-shadow:0 0 0 4px rgba(34,193,255,.18),0 14px 40px -16px rgba(34,193,255,.8)
}
.orbit .onode.is-active .d{box-shadow:0 0 0 4px rgba(255,255,255,.14)}

.voice-demo{
  width:100%;max-width:460px;margin-inline:auto;
  background:rgba(8,26,43,.66);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);
  border-radius:var(--radius-xl);padding:20px;box-shadow:0 30px 70px -42px rgba(0,0,0,.8);
  color:#fff
}
.vd-head{display:flex;align-items:center;gap:14px}
.vd-mic{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gradient-core);display:grid;place-items:center;position:relative
}
.vd-mic:before{ /* mic glyph */
  content:"";width:11px;height:18px;border-radius:6px;background:#fff;box-shadow:0 9px 0 -3px #fff;
  position:relative;top:-2px
}
.vd-mic:after{content:"";position:absolute;width:18px;height:18px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;bottom:7px}
.voice-demo.is-listening .vd-mic{animation:vd-pulse 1.4s var(--ease) infinite}
@keyframes vd-pulse{0%{box-shadow:0 0 0 0 rgba(34,193,255,.5)}70%{box-shadow:0 0 0 14px rgba(34,193,255,0)}100%{box-shadow:0 0 0 0 rgba(34,193,255,0)}}
.vd-head-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vd-kicker{font-family:var(--font-heading);font-weight:700;font-size:.95rem;line-height:1.15}
.vd-status{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9DCAFF}
.vd-wave{display:flex;align-items:center;gap:3px;height:28px}
.vd-wave i{width:3px;height:6px;border-radius:3px;background:#9DCAFF;opacity:.55}
.voice-demo.is-listening .vd-wave i,.voice-demo.is-processing .vd-wave i{animation:vd-bar .9s var(--ease) infinite}
.vd-wave i:nth-child(2){animation-delay:.1s}.vd-wave i:nth-child(3){animation-delay:.2s}
.vd-wave i:nth-child(4){animation-delay:.3s}.vd-wave i:nth-child(5){animation-delay:.15s}
.vd-wave i:nth-child(6){animation-delay:.25s}.vd-wave i:nth-child(7){animation-delay:.05s}
@keyframes vd-bar{0%,100%{height:6px;opacity:.5}50%{height:24px;opacity:1}}
.vd-query{margin-top:16px;font-size:1.02rem;line-height:1.45;color:rgba(255,255,255,.92);min-height:1.5em}
.vd-query .vd-caret{display:inline-block;width:2px;height:1.05em;background:#22C1FF;vertical-align:-2px;margin-left:1px;animation:vd-blink 1s steps(1) infinite}
@keyframes vd-blink{50%{opacity:0}}
.vd-response{
  margin-top:14px;padding:14px 16px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  /* Reserve room for the longest response (2 lines of vd-text + vd-lang label
     + padding) so cycling between languages doesn't shift the page layout. */
  min-height:116px;
  transition:opacity var(--motion-base) var(--ease)
}
.vd-response .vd-lang{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9DCAFF;margin-bottom:6px}
.vd-response .vd-text{display:block;font-family:var(--font-heading);font-weight:600;font-size:1.18rem;line-height:1.3}
.vd-response.swap{opacity:0}

/* ---------- Voice-demo language pills + Demo button ---------- */
.vd-langs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.vd-pill{
  appearance:none;border:0;cursor:pointer;font:inherit;
  position:relative;padding:8px 14px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:rgba(255,255,255,.06);
  outline:1px solid rgba(255,255,255,.14);outline-offset:0;
  transition:transform var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease),outline-color var(--motion-base) var(--ease),background var(--motion-base) var(--ease)
}
.vd-pill:hover{transform:translateY(-1px);outline-color:rgba(255,255,255,.40)}
.vd-pill:focus-visible{outline:2px solid var(--cyan-400);outline-offset:2px}
.vd-pill.is-active{
  outline-color:rgba(255,255,255,.55);
  box-shadow:0 8px 22px -8px rgba(34,193,255,.55),inset 0 0 0 1px rgba(255,255,255,.20)
}
/* Pill gradient variants (active state lights up the gradient) */
.vd-pill.is-active.grad-core   {background:var(--gradient-core)}
.vd-pill.is-active.grad-labs   {background:var(--gradient-labs)}
.vd-pill.is-active.grad-impact {background:var(--gradient-impact);color:#063b34}
.vd-pill.is-active.grad-public {background:var(--gradient-public);color:#3a1700}
.vd-pill.is-active.grad-sunset {background:linear-gradient(135deg,#FF7A00 0%,#FF4D6D 55%,#D946EF 100%)}
.vd-pill.is-active.grad-ruby   {background:linear-gradient(135deg,#EF4444 0%,#D946EF 100%)}

/* Inactive pills still hint their colour with a soft left edge */
.vd-pill::before{
  content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;border-radius:50%;
  transform:translateY(-50%);background:#fff;opacity:.55;display:none
}
.vd-pill.is-active::before{display:none}

.vd-langs-more{
  font-family:var(--font-heading);font-size:.75rem;font-weight:600;
  color:rgba(255,255,255,.55);letter-spacing:.04em;padding:0 4px
}
.vd-demo-btn{
  appearance:none;border:0;cursor:pointer;font:inherit;
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  font-size:.82rem;font-weight:700;color:#fff;
  background:rgba(0,0,0,.45);
  outline:1px solid rgba(255,255,255,.18);
  transition:transform var(--motion-base) var(--ease),background var(--motion-base) var(--ease)
}
.vd-demo-btn:hover{background:rgba(0,0,0,.65);transform:translateY(-1px)}
.vd-demo-btn:focus-visible{outline:2px solid var(--cyan-400);outline-offset:2px}
.vd-demo-btn .vd-demo-ico-stop{display:none}
.vd-demo-btn.is-playing{background:var(--gradient-core)}
.vd-demo-btn.is-playing .vd-demo-ico-play{display:none}
.vd-demo-btn.is-playing .vd-demo-ico-stop{display:inline-block}
.vd-demo-btn.is-disabled{opacity:.55;cursor:not-allowed}

/* ---------- Hero right-column carousel (orbit ↔ voice demo) ---------- */
.hero-carousel{position:relative;width:100%;min-height:580px}
.hc-slide{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 420ms var(--ease),visibility 0s linear 420ms
}
.hc-slide.is-active{opacity:1;pointer-events:auto;visibility:visible;transition:opacity 420ms var(--ease)}
.hc-slide[data-slide="demo"]{place-items:start stretch}
.hc-slide .voice-demo{width:100%;max-width:520px;margin:0 auto}

/* Stagger-in animation: when the demo slide becomes active (after the 2 s
   orbit glance, or any later manual switch), its inner blocks rise into
   view one after another so the card feels like it's "powering on". */
@keyframes vd-rise{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}
.hc-slide[data-slide="demo"].is-active .voice-demo > *{
  animation:vd-rise 520ms var(--ease) backwards
}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(1){animation-delay: 60ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(2){animation-delay:120ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(3){animation-delay:180ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(4){animation-delay:240ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(5){animation-delay:300ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(6){animation-delay:360ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(7){animation-delay:420ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(8){animation-delay:480ms}
.hc-slide[data-slide="demo"].is-active .voice-demo > *:nth-child(9){animation-delay:540ms}
/* Pill staggered emphasis: pills pop in one-by-one inside their row */
@keyframes vd-pill-pop{
  from{opacity:0;transform:translateY(8px) scale(.92)}
  to  {opacity:1;transform:none}
}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill{
  animation:vd-pill-pop 380ms var(--ease) backwards
}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill:nth-child(1){animation-delay:300ms}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill:nth-child(2){animation-delay:360ms}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill:nth-child(3){animation-delay:420ms}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill:nth-child(4){animation-delay:480ms}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill:nth-child(5){animation-delay:540ms}
.hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill:nth-child(6){animation-delay:600ms}
@media (prefers-reduced-motion:reduce){
  .hc-slide[data-slide="demo"].is-active .voice-demo > *,
  .hc-slide[data-slide="demo"].is-active .vd-langs .vd-pill{animation:none}
}

.hc-dots{
  display:flex;justify-content:center;gap:10px;margin-top:18px;
  position:relative;z-index:2
}
.hc-dot{
  appearance:none;border:0;cursor:pointer;padding:0;
  width:9px;height:9px;border-radius:999px;
  background:rgba(255,255,255,.22);
  transition:background var(--motion-base) var(--ease),width var(--motion-base) var(--ease)
}
.hc-dot:hover{background:rgba(255,255,255,.50)}
.hc-dot.is-active{width:24px;background:#fff}
.hc-dot:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px}

.vd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vd-badges span{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.86);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 11px}
.vd-note{margin-top:12px;font-size:.72rem;color:rgba(255,255,255,.5)}

/* ---- Production metrics row + outward CTA inside the demo card ---- */
.vd-metrics{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem;color:rgba(255,255,255,.66);
  font-family:var(--font-heading);letter-spacing:.02em;font-weight:500
}
.vd-metrics span{display:inline-flex;align-items:center;gap:7px}
.vd-metrics svg{stroke:rgba(255,255,255,.78);flex-shrink:0}
.vd-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;font-size:.78rem;font-weight:600;
  color:#9DCAFF;letter-spacing:.01em
}
.vd-cta:hover{color:#fff}
.vd-cta .arrow{transition:transform var(--motion-base) var(--ease)}
.vd-cta:hover .arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .voice-demo .vd-mic,.vd-wave i,.vd-query .vd-caret{animation:none!important}
}
@media(max-width:980px){.hero-visual{order:2}}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Watch gallery — YouTube-ready placeholders */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.video-grid .v-cap{margin-top:12px;font-family:var(--font-heading);font-weight:600;font-size:1.05rem;color:#fff}
.section.darker .video-grid .v-cap{color:#fff}
@media(max-width:780px){.video-grid{grid-template-columns:1fr}}
.vd-sub{margin-top:12px;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.74)}

/* Platform store buttons + outbound site links */
.store-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.store-badge{
  display:inline-flex;align-items:center;gap:11px;background:#0B1623;color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:9px 16px;min-height:54px;
  transition:transform var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease),background var(--motion-base)
}
.store-badge:hover{transform:translateY(-1px);background:#0F1D2E;box-shadow:var(--shadow-lift)}
.store-badge svg{width:24px;height:24px;flex:0 0 auto;fill:#fff}
.store-badge .sb-txt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.store-badge .sb-txt small{font-size:.64rem;letter-spacing:.04em;opacity:.82;text-transform:uppercase}
.store-badge .sb-txt b{font-family:var(--font-heading);font-weight:700;font-size:1.02rem}
.section.light .store-badge{background:#111827}
.section.light .store-badge:hover{background:#0B1623}
.platform-links .arrow{font-style:normal}