:root {
  --ink: #06110f;
  --deep: #071a16;
  --panel: #0c2720;
  --green: #13b67c;
  --mint: #6ef0bb;
  --gold: #d4b76f;
  --paper: #f5f4ed;
  --white: #fffef8;
  --muted: #a9b9b3;
  --line: rgba(255,255,255,.13);
  --dark-line: rgba(6,17,15,.12);
  --shadow: 0 24px 70px rgba(0,20,15,.13);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
.section-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section-space { padding-top: 120px; padding-bottom: 120px; }

.ambient { position: fixed; pointer-events: none; filter: blur(100px); opacity: .28; z-index: -1; }
.ambient-one { width: 420px; height: 420px; background: var(--green); top: -160px; right: -200px; }
.ambient-two { width: 340px; height: 340px; background: var(--gold); left: -220px; top: 650px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 82px;
  padding: 0 max(24px, calc((100vw - 1180px)/2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245,244,237,.88);
  border-bottom: 1px solid rgba(6,17,15,.08);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark, .footer-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--ink); color: var(--mint); border-radius: 11px;
  font: 800 1.1rem/1 "Manrope", sans-serif;
}
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font: 800 .95rem/1 "Manrope", sans-serif; letter-spacing: .12em; }
.brand small { margin-top: 5px; font-size: .68rem; color: #65726e; }
nav { display: flex; gap: 28px; }
nav a { font-size: .84rem; font-weight: 600; color: #53605c; transition: color .2s; }
nav a:hover { color: var(--green); }
nav a.topbar-download {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint); color: var(--ink); border-radius: 999px;
  padding: 10px 18px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(19,182,124,.28);
  transition: transform .2s, box-shadow .2s, background .2s;
}
nav a.topbar-download span { color: var(--ink); }
nav a.topbar-download:hover { color: var(--ink); background: #7ff0c0; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(19,182,124,.4); }
.print-button {
  display: inline-flex; align-items: center; gap: 8px; border: 0;
  background: var(--ink); color: white; border-radius: 999px;
  padding: 11px 18px; cursor: pointer; font-size: .8rem; font-weight: 700;
}
.print-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.hero { min-height: 690px; padding-top: 88px; padding-bottom: 82px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; font-weight: 800; color: #567069; }
.eyebrow span { width: 27px; height: 1px; background: var(--green); }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
h1 { margin: 0; font-size: clamp(3.6rem, 6vw, 6.6rem); letter-spacing: -.07em; line-height: .95; font-weight: 700; max-width: 720px; }
h1 em, .closing-copy h2 em { color: var(--green); font-style: normal; }
.hero-lead { margin: 30px 0 0; max-width: 650px; color: #53605c; font-size: 1.13rem; line-height: 1.75; }
.hero-lead strong { color: var(--ink); }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 22px; border-radius: 999px; font-size: .86rem; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: white; background: var(--ink); box-shadow: 0 12px 30px rgba(6,17,15,.15); }
.button.primary span { color: var(--mint); font-size: 1.15rem; }
.button.secondary { border: 1px solid var(--dark-line); }
.hero-downloads { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; width: min(560px, 100%); }
.downloads-label { color: var(--mint); font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.downloads-row { display: flex; flex-wrap: wrap; gap: 12px; }
.download-card {
  flex: 1 1 240px; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(6,17,15,.4); backdrop-filter: blur(10px);
  color: #fff; text-decoration: none;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.download-card:hover { transform: translateY(-3px); border-color: var(--mint); background: rgba(6,17,15,.6); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.dc-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.dc-text { display: grid; gap: 2px; min-width: 0; }
.dc-text strong { font: 800 .9rem/1.2 "Manrope", sans-serif; }
.dc-text small { color: #cfdad5; font-size: .72rem; }
.dc-arrow {
  margin-left: auto; flex-shrink: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint); color: var(--ink);
  font-size: .95rem; font-weight: 800;
  transition: transform .2s;
}
.download-card:hover .dc-arrow { transform: translateY(2px); }
.hero-principle { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--dark-line); display: flex; align-items: center; gap: 14px; width: min(480px, 100%); }
.pulse { width: 9px; height: 9px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 7px rgba(19,182,124,.12); }
.hero-principle p { display: grid; margin: 0; }
.hero-principle small { color: #75817e; font-size: .69rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-principle strong { font-size: .9rem; }

.hero-visual { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, rgba(19,182,124,.13), transparent 56%); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(6,17,15,.13); inset: 10%; }
.orbit-two { inset: 25%; border-style: dashed; animation: spin 34s linear infinite; }
.core-node { position: absolute; z-index: 3; width: 180px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--ink); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 25px 70px rgba(6,17,15,.28), inset 0 0 0 1px rgba(255,255,255,.09); }
.core-symbol { color: var(--mint); font: 700 2rem/1 "Manrope"; letter-spacing: -.08em; margin-bottom: 13px; }
.core-symbol span { color: var(--gold); }
.core-node strong { font: 700 1rem/1 "Manrope"; }
.core-node small { margin-top: 7px; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .11em; }
.satellite { position: absolute; z-index: 4; width: 158px; min-height: 106px; border: 1px solid var(--dark-line); border-radius: 18px; background: rgba(255,254,248,.92); backdrop-filter: blur(12px); padding: 15px 17px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.satellite > span { color: var(--green); font: 700 .66rem/1 "Manrope"; }
.satellite strong { margin-top: 16px; font: 800 .92rem/1 "Manrope"; letter-spacing: .08em; }
.satellite small { margin-top: 8px; color: #6b7874; font-size: .7rem; }
.sat-might { top: 2%; left: 8%; }
.sat-ksa { top: 29%; right: -1%; }
.sat-ainna { bottom: 3%; left: 13%; }
.signal { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(19,182,124,.12); }
.signal-a { top: 20%; left: 35%; }
.signal-b { top: 43%; right: 23%; background: var(--gold); }
.signal-c { bottom: 22%; left: 34%; }
@keyframes spin { to { transform: rotate(360deg); } }

.statement-band { background: var(--ink); color: white; }
.statement-inner { min-height: 106px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; }
.statement-inner p { margin: 0; padding: 0 30px; color: var(--muted); font-size: .84rem; border-left: 1px solid var(--line); }
.statement-inner p:first-child { padding-left: 0; border: 0; }
.statement-inner strong { display: block; color: white; font: 600 1rem/1.4 "Manrope"; }

.section-heading { display: grid; grid-template-columns: .78fr 1.22fr; column-gap: 70px; margin-bottom: 60px; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2, .leverage-copy h2, .closing-copy h2 { margin: 0; font-size: clamp(2.5rem, 4.5vw, 4.7rem); line-height: 1.03; letter-spacing: -.055em; }
.section-heading > p:last-child { align-self: end; margin: 0; max-width: 580px; color: #5d6966; font-size: 1.03rem; line-height: 1.8; }

.partner-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.partner-card { position: relative; overflow: hidden; min-height: 535px; padding: 29px; border: 1px solid var(--dark-line); border-radius: var(--radius); background: rgba(255,254,248,.68); }
.partner-card:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--green); }
.partner-card.ksa:before { background: var(--gold); }
.partner-card.ainna { background: var(--ink); color: white; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-index { font: 700 .72rem/1 "Manrope"; color: #71807b; }
.tag { padding: 7px 10px; border: 1px solid var(--dark-line); border-radius: 999px; font-size: .59rem; letter-spacing: .14em; font-weight: 800; }
.ainna .tag { border-color: var(--line); color: var(--mint); }
.partner-icon { width: 60px; height: 60px; margin-top: 47px; display: grid; place-items: center; border-radius: 17px; background: rgba(19,182,124,.1); color: var(--green); }
.ksa .partner-icon { background: rgba(212,183,111,.15); color: #9b7722; }
.ainna .partner-icon { color: var(--mint); background: rgba(110,240,187,.1); }
.partner-icon svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.partner-card h3 { margin: 24px 0 12px; font-size: 1.75rem; letter-spacing: -.04em; }
.partner-card > p { color: #66726f; min-height: 100px; }
.partner-card.ainna > p { color: var(--muted); }
.partner-card ul { list-style: none; padding: 20px 0 0; margin: 24px 0 0; border-top: 1px solid var(--dark-line); }
.partner-card.ainna ul { border-color: var(--line); }
.partner-card li { position: relative; padding: 5px 0 5px 18px; color: #394743; font-size: .82rem; }
.partner-card.ainna li { color: #d7e2de; }
.partner-card li:before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

.neuralops-section, .roadmap-section { color: white; background: var(--deep); }
.section-heading.light > p:last-child { color: var(--muted); }
.section-heading.light .eyebrow { color: #90aaa1; }
.architecture { display: grid; grid-template-columns: 1fr .32fr 1.25fr .32fr 1.65fr .32fr 1fr; gap: 12px; align-items: center; padding: 34px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.03); }
.arch-source, .arch-core, .arch-output { min-height: 190px; border: 1px solid var(--line); border-radius: 19px; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.architecture span { color: var(--gold); font-size: .57rem; letter-spacing: .14em; font-weight: 800; }
.architecture strong { margin-top: 10px; font: 700 1rem/1.45 "Manrope"; }
.arch-core { align-items: center; text-align: center; background: rgba(19,182,124,.08); border-color: rgba(110,240,187,.28); }
.mini-core { width: 49px; height: 49px; display: grid; place-items: center; margin: 13px 0 0; border-radius: 50%; background: var(--green); color: var(--ink); font: 800 1.25rem/1 "Manrope"; }
.arch-core small { color: var(--muted); font-size: .65rem; }
.arch-arrow { height: 1px; background: var(--line); position: relative; }
.arch-arrow:after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--mint); border-right: 1px solid var(--mint); transform: rotate(45deg); }
.arch-arrow i { display: block; width: 30%; height: 1px; background: var(--mint); animation: flow 2.2s ease-in-out infinite; }
@keyframes flow { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(230%); opacity: 0; } }
.route-stack { display: grid; gap: 7px; }
.route-stack > span { margin-bottom: 4px; }
.route-stack > div { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.route-stack b { font: 600 .72rem/1 "Manrope"; }
.route-stack small { color: #8fa19a; font-size: .58rem; }
.outcomes-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 18px; }
.outcome { min-height: 294px; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.025); }
.outcome > span { font-size: .62rem; color: #71867e; }
.outcome-icon { margin: 34px 0 24px; color: var(--mint); font: 500 2.3rem/1 "Manrope"; }
.outcome h3 { margin: 0 0 13px; font-size: 1.05rem; }
.outcome p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }

.leverage-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.leverage-copy > p:not(.eyebrow) { color: #5b6864; font-size: 1rem; }
blockquote { margin: 36px 0 0; padding: 22px 0 22px 25px; border-left: 3px solid var(--green); font: 600 1.18rem/1.6 "Manrope"; }
.leverage-list { border-top: 1px solid var(--dark-line); }
.leverage-list > div { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--dark-line); }
.leverage-list span { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: var(--mint); border-radius: 50%; font-size: .65rem; }
.leverage-list p { margin: 0; color: #5d6966; }
.leverage-list strong { color: var(--ink); display: block; font: 700 1rem/1.4 "Manrope"; }

.industries-section { background: #ebeae2; }
.industry-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--dark-line); border-left: 1px solid var(--dark-line); }
.industry { min-height: 240px; position: relative; padding: 20px; border-right: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); transition: background .2s, transform .2s; }
.industry:hover { background: var(--white); transform: translateY(-3px); z-index: 2; box-shadow: var(--shadow); }
.industry > span { color: #7f8d88; font-size: .59rem; }
.industry-symbol { margin-top: 35px; color: var(--green); font-size: 1.7rem; filter: grayscale(1); }
.industry h3 { margin: 19px 0 8px; font-size: .95rem; }
.industry p { margin: 0; color: #6a7672; font-size: .72rem; line-height: 1.5; }

.roadmap { position: relative; margin-top: 70px; }
.roadmap:before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 40px; width: 1px; background: linear-gradient(var(--mint), rgba(110,240,187,.08)); }
.roadmap-item { position: relative; display: grid; grid-template-columns: 65px 1fr; gap: 32px; max-width: 840px; margin: 0 0 24px; }
.roadmap-number { width: 64px; height: 64px; z-index: 2; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(110,240,187,.35); background: var(--deep); color: var(--mint); font: 700 .75rem/1 "Manrope"; }
.roadmap-item > div:last-child { padding: 12px 0 34px; border-bottom: 1px solid var(--line); }
.roadmap-item span { color: var(--gold); font-size: .61rem; font-weight: 800; letter-spacing: .15em; }
.roadmap-item h3 { margin: 7px 0 8px; font-size: 1.34rem; }
.roadmap-item p { margin: 0; color: var(--muted); font-size: .9rem; }

.measurement .section-heading { grid-template-columns: 1fr; }
.measure-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--dark-line); border-radius: 24px; overflow: hidden; background: rgba(255,254,248,.55); }
.measure-grid > div { min-height: 135px; padding: 22px; border-right: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); display: grid; align-content: center; }
.measure-grid > div:nth-child(4n) { border-right: 0; }
.measure-grid > div:nth-child(n+5) { border-bottom: 0; }
.measure-grid span { color: var(--green); font-size: .58rem; }
.measure-grid strong { margin-top: 17px; font: 700 1rem/1 "Manrope"; }
.measure-grid small { margin-top: 7px; color: #77837f; }

.closing-section { color: white; background: var(--ink); padding: 115px 0; overflow: hidden; position: relative; }
.closing-section:after { content: "N"; position: absolute; right: -80px; bottom: -250px; color: rgba(255,255,255,.025); font: 800 520px/1 "Manrope"; }
.closing-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; position: relative; z-index: 2; }
.closing-copy p:last-child { color: var(--muted); max-width: 540px; }
.formula { display: grid; gap: 10px; }
.formula > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.03); display: flex; justify-content: space-between; align-items: center; }
.formula small { color: var(--gold); font-size: .59rem; letter-spacing: .13em; }
.formula strong { font: 600 .85rem/1 "Manrope"; }
.formula > b { padding-left: 20px; color: #5d6f68; }
.formula .formula-result { background: var(--green); color: var(--ink); border-color: var(--green); }
.formula-result small { color: #084f38; }
.formula-result strong { font-size: 1rem; }

.footer { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer > div { display: flex; gap: 10px; align-items: center; }
.footer p { color: #67736f; font-size: .75rem; }
.footer > div p { display: grid; margin: 0; line-height: 1.2; }
.footer > div strong { color: var(--ink); letter-spacing: .1em; }
.footer > div small { font-size: .64rem; }
.footer a { font-size: .72rem; font-weight: 700; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-visual { width: min(620px,100%); margin: 0 auto; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > p:last-child { margin-top: 26px; }
  .partner-grid { grid-template-columns: 1fr; }
  .partner-card { min-height: 0; }
  .partner-card > p { min-height: 0; }
  .architecture { grid-template-columns: 1fr; }
  .arch-arrow { width: 1px; height: 28px; margin: 0 auto; background: var(--line); }
  .arch-arrow:after { bottom: 0; top: auto; right: -3px; transform: rotate(135deg); }
  .arch-arrow i { width: 1px; height: 30%; animation: flow-v 2.2s infinite; }
  @keyframes flow-v { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(230%); opacity: 0; } }
  .outcomes-grid { grid-template-columns: repeat(2,1fr); }
  .leverage-section, .closing-grid { grid-template-columns: 1fr; gap: 60px; }
  .industry-grid { grid-template-columns: repeat(3,1fr); }
  .measure-grid { grid-template-columns: repeat(2,1fr); }
  .measure-grid > div:nth-child(2n) { border-right: 0; }
  .measure-grid > div:nth-child(n+5) { border-bottom: 1px solid var(--dark-line); }
  .measure-grid > div:nth-child(n+7) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .section-shell { width: min(100% - 30px, 1180px); }
  .section-space { padding-top: 82px; padding-bottom: 82px; }
  .topbar { padding: 0 15px; height: 72px; }
  .brand small { display: none; }
  .print-button { padding: 10px 13px; }
  .print-button svg { display: none; }
  .hero { min-height: auto; padding-top: 52px; gap: 45px; }
  h1 { font-size: clamp(3.15rem, 16vw, 5rem); }
  .hero-lead { font-size: 1rem; }
  .hero-visual { transform: scale(.95); }
  .core-node { width: 130px; }
  .satellite { width: 128px; min-height: 92px; padding: 12px; }
  .satellite strong { margin-top: 11px; font-size: .76rem; }
  .satellite small { font-size: .6rem; }
  .sat-might { left: 0; }
  .sat-ksa { right: 0; }
  .statement-inner { grid-template-columns: 1fr; padding: 20px 0; }
  .statement-inner p, .statement-inner p:first-child { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .statement-inner p:last-child { border: 0; }
  .section-heading h2, .leverage-copy h2, .closing-copy h2 { font-size: 2.65rem; }
  .architecture { padding: 18px; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcome { min-height: 0; }
  .industry-grid { grid-template-columns: repeat(2,1fr); }
  .industry { min-height: 225px; }
  .roadmap-item { gap: 18px; }
  .measure-grid { grid-template-columns: 1fr; }
  .measure-grid > div, .measure-grid > div:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--dark-line); }
  .measure-grid > div:last-child { border-bottom: 0; }
  .footer { padding: 25px 0; flex-wrap: wrap; }
  .footer > p { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  :root { --paper: #fff; }
  .topbar, .hero-actions, .ambient { display: none !important; }
  body { background: white; }
  .hero { min-height: 92vh; padding-top: 50px; }
  .section-space { padding-top: 55px; padding-bottom: 55px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .partner-card, .outcome, .industry, .roadmap-item { break-inside: avoid; }
  .neuralops-section, .roadmap-section, .closing-section, .statement-band { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .footer { break-before: page; }
}

/* ─── Hero YouTube background (SME pattern) ─── */
.hero{position:relative;overflow:hidden;isolation:isolate;width:100%;max-width:none;margin:0;padding-left:max(24px,calc((100vw - 1180px)/2));padding-right:max(24px,calc((100vw - 1180px)/2));height:100svh;min-height:0;display:grid;align-items:center;padding-top:96px;padding-bottom:60px}
@supports (height:100dvh){.hero{height:100dvh;min-height:0}}
.hero-video{position:absolute;inset:0;z-index:-4;overflow:hidden;pointer-events:none;background:var(--ink)}
/* Desktop & tablet: force 16:9 and zoom-cover full-bleed — always fills the entire hero box */
.hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%) scale(1.6);border:0;pointer-events:none;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(6,17,15,.92) 0%,rgba(6,17,15,.78) 40%,rgba(6,17,15,.42) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 50%)}
.hero-lines{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to top,black,transparent 82%)}
.hero.hero-video-js .hero-copy,
.hero.hero-video-js .hero-visual{position:relative;z-index:2}

/* Dark hero over video — full contrast for all content */
body:has(.hero-video) .hero{color:#fff}
body:has(.hero-video) .hero .eyebrow{color:var(--mint)}
body:has(.hero-video) .hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
body:has(.hero-video) .hero h1 em{color:var(--mint)}
body:has(.hero-video) .hero .hero-lead,
body:has(.hero-video) .hero .hero-lead strong{color:#eef5f2}
body:has(.hero-video) .hero .hero-lead strong{font-weight:700}
body:has(.hero-video) .hero .hero-lead{max-width:600px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
body:has(.hero-video) .hero .hero-actions .button.primary{background:var(--mint);color:var(--ink)}
body:has(.hero-video) .hero .hero-actions .button.primary span{color:var(--ink)}
body:has(.hero-video) .hero .hero-actions .button.secondary{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(6,17,15,.3)}
body:has(.hero-video) .hero .button.secondary:hover{background:rgba(6,17,15,.55);border-color:rgba(255,255,255,.6)}
.hero-principle{border-top-color:rgba(255,255,255,.22)}
.hero-principle small{color:#cfdad5}
.hero-principle strong{color:#fff}
body:has(.hero-video) .hero .pulse{box-shadow:0 0 0 7px rgba(110,240,187,.2)}

/* Satellite cards stay readable over video */
body:has(.hero-video) .satellite{background:rgba(6,17,15,.82);border-color:rgba(255,255,255,.22);box-shadow:0 24px 70px rgba(0,0,0,.4)}
body:has(.hero-video) .satellite strong{color:#fff}
body:has(.hero-video) .satellite small{color:#cdd8d3}
body:has(.hero-video) .satellite > span{color:var(--mint)}
body:has(.hero-video) .core-node{box-shadow:0 25px 70px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14)}
body:has(.hero-video) .orbit{border-color:rgba(255,255,255,.2)}
body:has(.hero-video) .signal{box-shadow:0 0 0 6px rgba(110,240,187,.18)}

/* Desktop larger than 980px: keep grid centered, full height */
@media (min-width:981px){
  .hero { grid-template-columns:1.02fr .98fr; gap:72px; }
  .hero-visual{max-width:480px;justify-self:center}
  body:has(.hero-video) .hero .hero-copy{max-width:520px}
}

/* Mobile/tablet: full viewport hero, stacked */
@media (max-width:980px){
  .hero{min-height:100svh;height:auto;grid-template-columns:1fr;padding-top:118px;padding-bottom:66px;gap:46px;align-content:start}
  @supports (height:100dvh){.hero{min-height:100dvh}}
  body:has(.hero-video) .hero .hero-copy{max-width:560px}
}

/* Mobile: FULL-PAGE 9:16 portrait video fill — TikTok style. The hero fills
   the entire viewport (behind the sticky topbar) and the video is 9:16
   portrait inside it, so it reads as a full-page portrait video. */
@media (max-width:640px){
  .hero{min-height:100svh;height:100svh;padding-left:15px;padding-right:15px;padding-top:0;padding-bottom:0;background:transparent;overflow:hidden}
  @supports (height:100dvh){.hero{min-height:100dvh;height:100dvh}}
  /* Stretch the container up behind the sticky topbar so the hero + nav read
     as one continuous full-page 9:16 TikTok-style screen */
  .hero-video{position:absolute;top:-72px;left:0;right:0;bottom:0;background:var(--ink);z-index:-4}
  .hero-video iframe{
    position:absolute;top:50%;left:50%;
    width:auto;
    height:100%;
    aspect-ratio:9/16;
    min-width:100%;
    transform:translate(-50%,-50%) scale(1.6);
  }
  body:has(.hero-video) .hero .hero-lead{font-size:.98rem;line-height:1.6}
  /* Let the full-page video show behind the sticky topbar on mobile */
  body:has(.hero-video) .topbar.over-hero { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
  body:has(.hero-video) .topbar.over-hero .brand-mark { background: rgba(6,17,15,.72); color:#fff; }
  body:has(.hero-video) .topbar.over-hero .brand strong { color:#fff; }
  body:has(.hero-video) .topbar.over-hero .brand small { color:#cfdad5; }
  body:has(.hero-video) .topbar.over-hero .mobile-burger { background: rgba(6,17,15,.6); border-color: rgba(255,255,255,.4); color:#fff; }
}

/* ─── Hero composition: clear editorial layout ─── */
.hero{
  min-height:calc(100dvh - 82px);
  height:auto;
  grid-template-columns:minmax(0,1fr) minmax(380px,480px);
  gap:clamp(40px,7vw,100px);
  align-items:center;
  padding-top:clamp(70px,8vh,110px);
  padding-bottom:clamp(70px,8vh,110px);
}
.hero-copy{align-self:center;max-width:600px}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy h1{font-size:clamp(3.2rem,5.6vw,5.8rem);max-width:590px}
.hero-lead{max-width:570px}
.hero-visual{width:min(100%,480px);justify-self:end}
.hero-overlay{background:linear-gradient(90deg,rgba(6,17,15,.96) 0%,rgba(6,17,15,.84) 40%,rgba(6,17,15,.48) 100%),linear-gradient(0deg,rgba(6,17,15,.72),transparent 65%)}

@media (max-width:980px){
  .hero{
    min-height:calc(100dvh - 72px);
    height:auto;
    grid-template-columns:1fr;
    gap:38px;
    align-items:start;
    padding-top:72px;
    padding-bottom:62px;
  }
  .hero-copy{max-width:620px;margin:0 auto;width:100%}
  .hero-visual{width:min(100%,430px);justify-self:center;margin:0 auto}
}

@media (max-width:640px){
  .hero{
    min-height:calc(100dvh - 72px);
    padding-top:54px;
    padding-bottom:42px;
    gap:30px;
  }
  .hero-copy .eyebrow{margin-bottom:18px;font-size:.63rem;letter-spacing:.12em}
  .hero-copy h1{font-size:clamp(2.85rem,13.5vw,4.4rem);line-height:.98}
  .hero-lead{margin-top:22px}
  .hero-actions{margin-top:26px}
  .hero-principle{margin-top:30px;padding-top:17px}
  .hero-visual{width:min(100%,350px);transform:none}
  .downloads-row{flex-direction:column}
  .download-card{flex:1 1 auto}
}

/* Keep the proposal hero readable as one desktop viewport. */
@media (min-width:981px){
  .hero{height:calc(100dvh - 82px);min-height:0;padding-top:30px;padding-bottom:30px;gap:40px}
  .hero-copy .eyebrow{margin-bottom:10px}
  .hero-copy h1{font-size:clamp(2.8rem,4.7vw,5rem)}
  .hero-lead{margin-top:16px;line-height:1.5}
  .hero-actions{margin-top:18px;gap:8px}
  .hero-actions .button{min-height:42px;padding:0 16px;font-size:.76rem;gap:10px}
  .hero-downloads{margin-top:14px;gap:7px}
  .download-card{padding:10px 12px;gap:10px}
  .dc-icon{font-size:1.2rem}
  .dc-text strong{font-size:.78rem}
  .dc-text small{font-size:.65rem}
  .hero-consortium{margin-top:14px;padding:10px 14px}
  .hero-principle{margin-top:16px;padding-top:12px}
  .hero-visual{width:min(100%,400px)}
}

/* Compact document actions in the top bar */
.download-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.download-actions .download-button{white-space:nowrap}
.download-summary{background:var(--green);color:var(--ink)}
.download-summary:hover{background:var(--mint)}
@media (max-width:980px){
  .download-actions{gap:6px}
  .download-actions .download-button{padding:10px 12px;font-size:.72rem}
}
@media (max-width:640px){
  .download-actions{gap:5px}
  .download-actions .download-button{padding:9px 10px;font-size:.65rem}
}

/* ─── Hero consortium identifier ─── */
.hero-consortium{
  margin-top:26px;padding:14px 18px;border:1px solid rgba(255,255,255,.22);
  border-radius:14px;background:rgba(6,17,15,.35);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:6px;width:min(520px,100%);
}
.hero-consortium span{color:var(--mint);font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero-consortium strong{color:#fff;font:700 .86rem/1.4 "Manrope";letter-spacing:.02em}
@media (max-width:640px){
  .hero-consortium{padding:12px 14px}
  .hero-consortium strong{font-size:.78rem}
}

/* ─── Hero satellites: five components ─── */
.sat-tafe{top:2%;right:8%}
.sat-pcg{bottom:2%;right:8%}
.sat-ksa{bottom:2%;left:8%}
.sat-ainna{left:0;top:42%}
@media (max-width:640px){
  .sat-tafe{top:2%;right:0}
  .sat-pcg{bottom:2%;right:0}
  .sat-ksa{bottom:2%;left:0}
  .sat-ainna{left:0;top:40%}
}

/* ─── Statement band: five components ─── */
.statement-inner{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){
  .statement-inner{grid-template-columns:1fr}
}

/* ─── Proposition: five cards, AINNA featured ─── */
.partner-card.tafe:before{background:var(--gold)}
.partner-card.pcg:before{background:var(--green)}
.partner-card.ainna{grid-column:span 2}
.card-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  color:var(--green);font-size:.78rem;font-weight:700;text-decoration:none;
}
.card-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){
  .partner-card.ainna{grid-column:auto}
}

/* ─── The Consortium section ─── */
.consortium-section{background:var(--paper)}
.consortium-flow{
  display:grid;gap:0;max-width:760px;margin:0 auto 70px;
}
.cf-node{
  border:1px solid var(--dark-line);border-radius:18px;padding:22px 26px;
  background:rgba(255,254,248,.7);display:flex;flex-direction:column;gap:6px;
}
.cf-node span{color:var(--green);font-size:.62rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.cf-node strong{font:700 1.05rem/1.4 "Manrope";color:var(--ink)}
.cf-core{background:var(--ink);border-color:var(--ink)}
.cf-core span{color:var(--mint)}
.cf-core strong{color:#fff}
.cf-result{background:var(--green);border-color:var(--green)}
.cf-result span{color:#084f38}
.cf-result strong{color:var(--ink)}
.cf-arrow{text-align:center;color:#8aa39b;font-size:1.1rem;line-height:1;padding:8px 0}
.role-matrix{border:1px solid var(--dark-line);border-radius:20px;overflow:hidden;background:rgba(255,254,248,.6)}
.rm-head,.rm-row{display:grid;grid-template-columns:1.1fr 1.3fr 2fr;gap:18px;padding:18px 22px;align-items:start}
.rm-head{background:var(--ink);color:var(--mint);font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rm-row{border-top:1px solid var(--dark-line)}
.rm-row > span:first-child{font:700 .9rem/1.3 "Manrope";color:var(--ink)}
.rm-row > span:nth-child(2){color:#394743;font-size:.82rem;font-weight:600}
.rm-row > span:last-child{color:#5d6966;font-size:.8rem;line-height:1.6}
@media (max-width:640px){
  .rm-head,.rm-row{grid-template-columns:1fr;gap:6px}
  .rm-head{display:none}
  .rm-row{padding:16px 18px}
  .rm-row > span:nth-child(2){color:var(--green);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
}

/* ─── How the Consortium Works ─── */
.how-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.how-card{
  border:1px solid var(--dark-line);border-radius:20px;padding:24px;
  background:rgba(255,254,248,.7);min-height:230px;display:flex;flex-direction:column;
}
.how-card > span{color:var(--green);font:700 .68rem/1 "Manrope"}
.how-card h3{margin:26px 0 12px;font-size:1.15rem;letter-spacing:-.02em}
.how-card p{margin:0;color:#5d6966;font-size:.82rem;line-height:1.65}
.how-output{
  margin:34px auto 0;max-width:760px;text-align:center;
  font:600 1.15rem/1.6 "Manrope";color:var(--ink);
  padding:22px 28px;border:1px solid var(--dark-line);border-radius:18px;background:rgba(255,254,248,.6);
}
@media (max-width:980px){
  .how-grid{grid-template-columns:1fr 1fr}
  .how-card{min-height:0}
}
@media (max-width:640px){
  .how-grid{grid-template-columns:1fr}
}

/* ─── Consortium Outcome ─── */
.outcome-section{background:var(--paper)}
.outcome-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.outcome-card{
  border:1px solid var(--dark-line);border-radius:20px;padding:26px;
  background:rgba(255,254,248,.7);min-height:210px;display:flex;flex-direction:column;
}
.outcome-card > span{color:var(--green);font:700 .68rem/1 "Manrope"}
.outcome-card h3{margin:30px 0 12px;font-size:1.1rem;letter-spacing:-.02em}
.outcome-card p{margin:0;color:#5d6966;font-size:.82rem;line-height:1.65}
.consortium-note{
  margin:40px auto 0;max-width:820px;text-align:center;
  color:#7a8682;font-size:.72rem;line-height:1.6;
}
@media (max-width:980px){
  .outcome-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .outcome-grid{grid-template-columns:1fr}
  .outcome-card{min-height:0}
}

/* ─── MTDC-UPM satellite positions ─── */
.sat-research{top:2%;left:8%}
.sat-ainna{bottom:15%;left:13%}
.sat-mt{top:29%;right:-1%}
.sat-mn{bottom:2%;right:4%}
@media (max-width:640px){
  .sat-research{left:0}
  .sat-mt{right:0}
  .sat-ainna{left:0}
  .sat-mn{right:0;left:10%;width:140px}
}

/* ─── MTDC-UPM consortium flow ─── */
.consortium-section{background:var(--paper)}
.consortium-flow{display:grid;gap:0;max-width:760px;margin:0 auto}
.cf-node{
  border:1px solid var(--dark-line);border-radius:18px;padding:22px 26px;
  background:rgba(255,254,248,.7);display:flex;flex-direction:column;gap:6px;
}
.cf-node span{color:var(--green);font-size:.62rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.cf-node strong{font:700 1.05rem/1.4 "Manrope";color:var(--ink)}
.cf-core{background:var(--ink);border-color:var(--ink)}
.cf-core span{color:var(--mint)}
.cf-core strong{color:#fff}
.cf-result{background:var(--green);border-color:var(--green)}
.cf-result span{color:#084f38}
.cf-result strong{color:var(--ink)}
.cf-arrow{text-align:center;color:#8aa39b;font-size:1.1rem;line-height:1;padding:8px 0}

/* ─── MTDC-UPM hero consortium badge ─── */
.hero-consortium{
  margin-top:26px;padding:14px 18px;border:1px solid rgba(255,255,255,.22);
  border-radius:14px;background:rgba(6,17,15,.35);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:6px;width:min(520px,100%);
}
.hero-consortium span{color:var(--mint);font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero-consortium strong{color:#fff;font:700 .82rem/1.4 "Manrope";letter-spacing:.02em}
@media (max-width:640px){
  .hero-consortium{padding:12px 14px}
  .hero-consortium strong{font-size:.72rem}
}

/* ═══ Hero fit-one-viewport (revamp) ═══ */
/* Root cause: hero is far taller than the viewport because every child
   block (h1, lead, actions, downloads, consortium, principle) adds large
   vertical margins and the orbit visual is oversized. This compacts the
   whole composition so the hero fits a single screen on desktop + mobile. */

.hero {
  min-height: 0;
  height: calc(100vh - 82px);
  height: calc(100svh - 82px);
  padding-top: 0;
  padding-bottom: 0;
  gap: clamp(28px, 4vw, 48px);
  overflow-y: visible;
}
@supports (height: 100dvh) {
  .hero { height: calc(100dvh - 82px); }
}

/* Copy column — tighten all block rhythm */
.hero-copy { max-width: 620px; }
.hero-copy .eyebrow { margin-bottom: 14px; }
.hero-copy h1 {
  font-size: clamp(2.9rem, 5vw, 4.6rem);
  line-height: 1.0;
  max-width: 560px;
}
.hero-copy .hero-lead {
  margin-top: 16px;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 540px;
}
.hero-actions { margin-top: 22px; }
.hero-downloads { margin-top: 18px; }
.hero-downloads .downloads-row { gap: 10px; }
.hero-downloads .download-card {
  padding: 11px 14px;
  gap: 12px;
  border-radius: 12px;
}
.hero-consortium { margin-top: 18px; padding: 12px 16px; }
.hero-principle { margin-top: 22px; padding-top: 16px; }

/* Orbit visual — scale down to fit height */
.hero-visual { width: min(100%, 420px); }
.hero-visual .core-node { width: 150px; }
.hero-visual .satellite { width: 138px; min-height: 92px; padding: 12px 14px; }
.hero-visual .satellite strong { margin-top: 12px; font-size: .82rem; }
.hero-visual .satellite small { margin-top: 6px; font-size: .64rem; }

/* Short / medium desktop heights — compact a little more */
@media (max-width: 1100px) and (min-height: 560px) {
  .hero { gap: 28px; }
  .hero-copy h1 { font-size: clamp(2.7rem, 4.6vw, 4rem); max-width: 520px; }
  .hero-downloads .downloads-row { flex-direction: column; }
  .hero-downloads .download-card { flex: 1 1 auto; }
  .hero-visual { width: min(100%, 360px); }
  .hero-visual .core-node { width: 130px; }
  .hero-visual .satellite { width: 124px; min-height: 82px; }
}

/* Very short desktop viewports — drop the orbit below the copy is too tall,
   so shrink the copy further and keep the orbit compact & centered */
@media (max-height: 660px) and (min-width: 981px) {
  .hero { height: auto; min-height: 100svh; padding: 40px 0 34px; gap: 30px; }
  .hero-copy .eyebrow { margin-bottom: 12px; font-size: .64rem; }
  .hero-copy h1 { font-size: clamp(2.5rem, 4.2vw, 3.6rem); }
  .hero-copy .hero-lead { margin-top: 12px; font-size: .95rem; }
  .hero-actions { margin-top: 16px; gap: 8px; }
  .hero-actions .button { min-height: 44px; padding: 0 18px; font-size: .8rem; }
  .hero-downloads { margin-top: 14px; }
  .hero-downloads .downloads-label { font-size: .56rem; }
  .hero-downloads .download-card { padding: 9px 12px; }
  .hero-downloads .dc-text strong { font-size: .82rem; }
  .hero-downloads .dc-text small { font-size: .66rem; }
  .hero-consortium { margin-top: 14px; padding: 10px 14px; }
  .hero-consortium strong { font-size: .78rem; }
  .hero-principle { margin-top: 16px; padding-top: 12px; }
  .hero-visual { width: min(100%, 320px); }
  .hero-visual .core-node { width: 118px; }
  .hero-visual .satellite { width: 112px; min-height: 72px; padding: 9px 11px; }
  .hero-visual .satellite strong { margin-top: 9px; font-size: .74rem; }
  .hero-visual .satellite small { margin-top: 4px; font-size: .58rem; }
}

/* Mobile / tablet — fit one screen, shrink copy + orbit */
@media (max-width: 980px) {
  .hero {
    min-height: 0;
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    padding-top: 0;
    padding-bottom: 0;
    gap: 22px;
    align-content: start;
    align-items: center;
  }
  @supports (height: 100dvh) {
    .hero { height: calc(100dvh - 72px); }
  }
  .hero-copy .eyebrow { margin-bottom: 12px; font-size: .62rem; }
  .hero-copy h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.0; max-width: 520px; }
  .hero-copy .hero-lead { margin-top: 12px; font-size: .95rem; line-height: 1.55; }
  .hero-actions { margin-top: 16px; gap: 8px; }
  .hero-actions .button { min-height: 44px; padding: 0 18px; font-size: .8rem; }
  .hero-downloads { margin-top: 14px; }
  .hero-downloads .downloads-row { flex-direction: column; }
  .hero-downloads .download-card { flex: 1 1 auto; padding: 10px 13px; }
  .hero-downloads .dc-text strong { font-size: .84rem; }
  .hero-consortium { margin-top: 14px; padding: 10px 14px; }
  .hero-consortium strong { font-size: .78rem; }
  .hero-principle { margin-top: 16px; padding-top: 12px; }
  .hero-visual { width: min(100%, 320px); }
  .hero-visual .core-node { width: 118px; }
  .hero-visual .satellite { width: 112px; min-height: 72px; padding: 9px 11px; }
  .hero-visual .satellite strong { margin-top: 9px; font-size: .74rem; }
  .hero-visual .satellite small { margin-top: 4px; font-size: .58rem; }
}

/* Small / short phones — maximum compaction so nothing clips */
@media (max-width: 640px) {
  .hero { gap: 18px; height: calc(100svh - 72px); padding-top: 0; padding-bottom: 0; }
  @supports (height: 100dvh) {
    .hero { height: calc(100dvh - 72px); }
  }
  .hero-copy { align-self: center; }
  .hero-copy .eyebrow { margin-bottom: 10px; }
  .hero-copy h1 { font-size: clamp(2rem, 9.5vw, 2.8rem); line-height: 1.0; }
  .hero-copy .hero-lead { font-size: .84rem; line-height: 1.45; }
  .hero-lead { margin-top: 8px; }
  .hero-actions { margin-top: 12px; gap: 8px; }
  .hero-actions .button { gap: 8px; min-height: 40px; padding: 0 15px; font-size: .76rem; }
  .hero-downloads { margin-top: 10px; gap: 8px; }
  .hero-downloads .downloads-label { font-size: .56rem; }
  .hero-downloads .download-card { padding: 8px 11px; gap: 10px; }
  .hero-downloads .dc-icon { font-size: 1.1rem; }
  .hero-downloads .dc-text strong { font-size: .8rem; }
  .hero-downloads .dc-text small { font-size: .64rem; }
  .hero-consortium { margin-top: 10px; padding: 9px 13px; }
  .hero-consortium strong { font-size: .74rem; }
  .hero-principle { margin-top: 10px; padding-top: 8px; gap: 9px; }
  .hero-principle strong { font-size: .78rem; }
  /* TikTok-style full-page portrait video hero: hide the orbit visual on
     phones so the copy overlays the video and the whole screen is the video */
  .hero-visual { display: none; }
}

/* Short phones — trim the least-critical blocks (principle, bigger visual) */
@media (max-height: 760px) and (max-width: 640px) {
  .hero-copy h1 { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  .hero-copy .hero-lead { font-size: .8rem; line-height: 1.4; }
  .hero-lead { max-height: 4.4em; overflow: hidden; }
  .hero-lead { margin-top: 6px; }
  .hero-actions { margin-top: 10px; gap: 8px; }
  .hero-actions .button { gap: 6px; min-height: 36px; padding: 0 13px; font-size: .72rem; }
  .hero-downloads { margin-top: 10px; gap: 8px; }
  .hero-downloads .downloads-row { gap: 6px; }
  .hero-downloads .download-card { padding: 7px 10px; }
  .hero-downloads .dc-icon { font-size: 1rem; }
  .hero-downloads .dc-text small { font-size: .6rem; }
  .hero-principle { display: none; }
  .hero-consortium { margin-top: 10px; padding: 8px 12px; }
  .hero-consortium strong { font-size: .7rem; }
  /* TikTok-style full-page portrait hero: hide the orbit visual so the copy
     overlays the video and the whole phone screen is the video. */
  .hero-visual { display: none; }
}

/* Shortest phones — hide the downloads block too so only the core message
   + CTAs sit over the full-page video */
@media (max-height: 680px) and (max-width: 640px) {
  .hero-copy h1 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .hero-downloads .downloads-label { display: none; }
  .hero-downloads .downloads-row { flex-direction: row; }
  .hero-downloads .download-card { flex: 1 1 auto; padding: 6px 8px; }
  .hero-downloads .dc-text small, .hero-downloads .dc-arrow { display: none; }
  .hero-downloads .dc-icon { font-size: .95rem; }
  .hero-consortium { margin-top: 8px; }
}
/* Very shortest — drop downloads entirely to guarantee one-screen fit */
@media (max-height: 600px) and (max-width: 640px) {
  .hero-actions { margin-top: 8px; }
  .hero-actions .button { min-height: 34px; padding: 0 11px; font-size: .68rem; }
  .hero-downloads { display: none; }
}

/* Final mobile hero composition: one complete TikTok-style portrait screen.
   The topbar remains in the document flow, so pull the hero behind it rather
   than leaving a 72px non-video strip above the hero. */
@media (max-width: 640px) {
  .hero {
    position: relative;
    margin-top: -72px;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    padding: 72px 15px 0;
    display: grid;
    align-content: center;
    overflow: hidden;
    background: transparent;
  }
  @supports (height: 100dvh) {
    .hero { height: 100dvh; min-height: 100dvh; }
  }
  .hero-video {
    position: absolute;
    inset: 0;
    height: 100%;
    background: var(--ink);
    overflow: hidden;
  }
  .hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    min-width: 100%;
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%) scale(1.06);
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    max-height: calc(100% - 84px);
    overflow: hidden;
  }
  .hero-visual { display: none; }
  body:has(.hero-video) .topbar.over-hero {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
}

/* ─── Orbiting satellites: 4 identical cards, equidistant, orbit the core ─── */
:root { --sat-r: 120px; --sat-w: 104px; --sat-h: 68px; }

.satellites-orbit {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.satellite,
.satellites-orbit .satellite {
  position: absolute;
  inset: 0;                 /* full square centered on the core */
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  backdrop-filter: none;
  box-shadow: none;
  display: grid;
  place-items: center;
  animation: sat-orbit 30s linear infinite;
}
.sat-ainna, .satellites-orbit .sat-ainna { animation-delay: -7.5s; }
.sat-mt,    .satellites-orbit .sat-mt    { animation-delay: -15s; }
.sat-mn,    .satellites-orbit .sat-mn    { animation-delay: -22.5s; }

.sat-inner {
  width: var(--sat-w);
  height: var(--sat-h);
  border: 1px solid var(--dark-line);
  border-radius: 18px;
  background: rgba(255,254,248,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sat-inner > span { color: var(--green); font: 700 .66rem/1 "Manrope"; flex-shrink: 0; }
.sat-inner strong { margin-top: 10px; font: 800 .86rem/1.15 "Manrope"; letter-spacing: .08em; flex-shrink: 0; }
.sat-inner small { margin-top: 6px; color: #6b7874; font-size: .66rem; line-height: 1.22; overflow: hidden; }

/* Video-hero theme for the cards */
body:has(.hero-video) .sat-inner {
  background: rgba(6,17,15,.82);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
body:has(.hero-video) .sat-inner strong { color: #fff; }
body:has(.hero-video) .sat-inner small { color: #cdd8d3; }
body:has(.hero-video) .sat-inner > span { color: var(--mint); }

@keyframes sat-orbit {
  from { transform: rotate(0deg) translateY(calc(-1 * var(--sat-r))) rotate(0deg); }
  to   { transform: rotate(360deg) translateY(calc(-1 * var(--sat-r))) rotate(-360deg); }
}

/* Shrink the orbit on smaller / short screens */
@media (max-width: 1100px) and (min-height: 560px) {
  :root { --sat-r: 100px; --sat-w: 96px; --sat-h: 62px; }
  .sat-inner { padding: 11px 13px; }
  .sat-inner strong { font-size: .78rem; }
  .sat-inner small { font-size: .6rem; }
}
@media (max-width: 980px) {
  :root { --sat-r: 88px; --sat-w: 96px; --sat-h: 62px; }
  .sat-inner { padding: 10px 12px; }
  .sat-inner strong { font-size: .74rem; }
  .sat-inner small { font-size: .56rem; }
}
@media (max-width: 640px) {
  :root { --sat-r: 74px; --sat-w: 84px; --sat-h: 50px; }
  .sat-inner { padding: 8px 10px; border-radius: 12px; }
  .sat-inner > span { font-size: .58rem; }
  .sat-inner strong { margin-top: 8px; font-size: .62rem; }
  .sat-inner small { margin-top: 4px; font-size: .48rem; }
}
@media (max-height: 700px) and (min-width: 981px) {
  :root { --sat-r: 88px; --sat-w: 92px; --sat-h: 56px; }
  .sat-inner { padding: 9px 11px; }
  .sat-inner strong { font-size: .74rem; margin-top: 9px; }
  .sat-inner small { font-size: .56rem; }
}

/* ═══ AINNA topbar controls (Bank·Recon · Day/Night · SME Growth) ═══ */
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.topbar .topbar-controls a,
.topbar .topbar-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1.5px solid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s, color .2s;
}

/* Bank · Recon — red pill */
.topbar .topbar-wc {
  gap: 6px;
  color: #dc2626;
  border-color: rgba(220,38,38,.4);
  background: rgba(220,38,38,.08);
}
.topbar .topbar-wc:hover { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.65); transform: translateY(-1px); }

/* Day/Night toggle — indigo pill */
.topbar button.theme-toggle {
  gap: 8px;
  padding: 0 6px 0 12px;
  color: #1e293b;
  background: rgba(255,255,255,.98);
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 2px 14px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06);
}
.topbar button.theme-toggle:hover { border-color: rgba(99,102,241,.65); transform: translateY(-1px); }
.theme-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.theme-track {
  position: relative; flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c7d2fe, #a7f3d0);
  border: 1px solid rgba(99,102,241,.25);
}
.theme-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg,#818cf8,#6366f1);
  box-shadow: 0 0 10px rgba(129,140,248,.45);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.topbar button.theme-toggle.is-night .theme-thumb { transform: translateX(18px); }
.topbar button.theme-toggle.is-night { color:#e2e8f0; background:rgba(30,41,59,.96); border-color: rgba(99,102,241,.45); }

/* SME Growth — amber/boost pill */
.topbar .topbar-boost { gap: 6px; color: #1e293b; border-color: rgba(148,163,184,.5); background: rgba(255,255,255,.98); box-shadow: 0 4px 14px rgba(15,23,42,.12); }
.topbar .topbar-boost:hover { background:#fffbeb; border-color:#f59e0b; transform: translateY(-1px); }

/* Mobile burger */
.mobile-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: #fffef8;
  border: 2px solid #06110f;
  border-radius: 10px;
  color: #06110f;
  cursor: pointer;
  transition: all .25s;
}

/* ═══ Dark mode (full page) ═══ */
/* --ink is dual-role: text color on light surfaces AND dark accent background
   (statement band, closing, cf-core, core-node, etc). We flip the text-facing
   surfaces to dark, keep the ink-accent surfaces dark, and set light text. */
html[data-theme="dark"] {
  --paper: #0b1412;
  --white: #0c1613;
  --muted: #93a6a0;
  --ink: #eaf5f0;                 /* headings/strong text on dark surfaces */
  --dark-line: rgba(255,255,255,.13);
  --line: rgba(255,255,255,.12);
  --shadow: 0 24px 70px rgba(0,0,0,.5);
}
html[data-theme="dark"] body { background: var(--paper); }
html[data-theme="dark"] .ambient { opacity: .16; }

/* Topbar dark */
html[data-theme="dark"] .topbar {
  background: rgba(8,18,15,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
html[data-theme="dark"] .brand strong,
html[data-theme="dark"] nav a { color: #d7e2de; }
html[data-theme="dark"] nav a:hover { color: var(--mint); }
html[data-theme="dark"] .brand small { color: #8ea39d; }

/* ── Dark accent surfaces keep their dark ink background (not flipped) ── */
html[data-theme="dark"] .core-node,
html[data-theme="dark"] .statement-band,
html[data-theme="dark"] .partner-card.ainna,
html[data-theme="dark"] .leverage-list span,
html[data-theme="dark"] .closing-section,
html[data-theme="dark"] .cf-node.cf-core,
html[data-theme="dark"] .rm-head,
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .footer-mark,
html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .download-summary {
  background: #06110f;
}
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .footer-mark,
html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .download-summary,
html[data-theme="dark"] .partner-card.ainna,
html[data-theme="dark"] .closing-section,
html[data-theme="dark"] .statement-band { color: var(--mint); }
html[data-theme="dark"] .cf-node.cf-core { background: #06110f; }
html[data-theme="dark"] .cf-node.cf-core span { color: var(--mint); }
html[data-theme="dark"] .cf-node.cf-core strong { color: #fff; }
html[data-theme="dark"] .cf-node.cf-result { background: var(--green); }
html[data-theme="dark"] .cf-node.cf-result span { color: #084f38; }
html[data-theme="dark"] .cf-node.cf-result strong { color: var(--ink); }
html[data-theme="dark"] .how-output { color: var(--ink); }
html[data-theme="dark"] .core-node strong { color: #fff; }
html[data-theme="dark"] .neuralops-section,
html[data-theme="dark"] .roadmap-section,
html[data-theme="dark"] .closing-section { color: white; }

/* Light sections → dark */
html[data-theme="dark"] .industries-section { background: #0c1613; }
html[data-theme="dark"] .consortium-section,
html[data-theme="dark"] .outcome-section,
html[data-theme="dark"] .measure-grid { background: var(--paper); }

/* Light surfaces → dark glass */
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .cf-node,
html[data-theme="dark"] .how-card,
html[data-theme="dark"] .outcome-card,
html[data-theme="dark"] .mobile-menu { background: rgba(255,255,255,.035); }

/* On dark surfaces — text that used the (now light) --ink / hardcoded darks must be light */
html[data-theme="dark"] .section-heading > p:last-child,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .leverage-copy > p:not(.eyebrow),
html[data-theme="dark"] .partner-card > p,
html[data-theme="dark"] .partner-card li,
html[data-theme="dark"] .partner-card .card-index,
html[data-theme="dark"] .cf-node > p,
html[data-theme="dark"] .how-card p,
html[data-theme="dark"] .outcome-card p,
html[data-theme="dark"] .measure-grid small,
html[data-theme="dark"] .industry span,
html[data-theme="dark"] .industry p,
html[data-theme="dark"] .leverage-list p,
html[data-theme="dark"] .footer p { color: #b7c7c2; }

/* Headings / strong text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .partner-card h3,
html[data-theme="dark"] .cf-node strong,
html[data-theme="dark"] .how-card h3,
html[data-theme="dark"] .outcome-card h3,
html[data-theme="dark"] .measure-grid strong,
html[data-theme="dark"] .leverage-list strong,
html[data-theme="dark"] .footer > div strong,
html[data-theme="dark"] .rm-row > span:first-child,
html[data-theme="dark"] .how-output { color: var(--ink); }

/* Industries hover */
html[data-theme="dark"] .industry:hover { background: #0f201c; }
html[data-theme="dark"] .industry:hover p { color: #c3d4cf; }

/* ===== Mobile layout (burger + controls) ===== */
@media (max-width: 980px) {
  .topbar { position: sticky; }
  .mobile-burger { display: inline-flex; margin-left: auto; }
  .topbar .topbar-controls { gap: 5px; }
  .topbar .topbar-controls a,
  .topbar .topbar-controls button { height: 32px; padding: 0 10px; }
  .theme-label, .topbar .topbar-boost .boost-label { font-size: 8px; }
  .topbar button.theme-toggle { padding: 0 5px 0 10px; }
  .topbar button.theme-toggle.is-night .theme-thumb { transform: translateX(16px); }
  .theme-track { width: 38px; height: 22px; }
  .theme-thumb { width: 14px; height: 14px; top: 3px; left: 3px; }
}
@media (max-width: 520px) {
  .topbar .brand > span:last-child { display: none; }
  .topbar .topbar-controls { gap: 4px; }
  .topbar .topbar-controls a,
  .topbar .topbar-controls button { padding: 0 8px; height: 30px; }
  .topbar .topbar-wc .wc-year { font-size: 8px; letter-spacing: .08em; }
  .topbar .topbar-boost .boost-label { letter-spacing: .08em; }
}
@media (max-width: 380px) {
  .topbar .topbar-boost .boost-label { display: none; }
  .topbar .topbar-boost { padding: 0 9px; }
}

/* ===== Mobile slide-out menu panel ===== */
#mobile-panel {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#mobile-panel.active { opacity: 1; pointer-events: auto; }
.mobile-menu {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 85%;
  padding: 20px;
  overflow-y: auto;
  background: var(--white);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,.2);
}
#mobile-panel.active .mobile-menu { transform: none; }
.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.menu-head span { font-size: 24px; font-weight: 800; font-family:"Manrope",sans-serif; color: var(--ink); }
.menu-head button {
  width: 40px; height: 40px;
  border: 0; background: none;
  color: var(--ink); font-size: 28px; line-height: 1;
  cursor: pointer;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-menu nav a {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid var(--dark-line);
}
.mobile-menu nav a.menu-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  background: var(--mint); color: var(--deep);
  border: 0; border-radius: 999px;
  font-weight: 800;
}
html[data-theme="dark"] .mobile-menu { background: #0c1a16; color: #e0ece7; }
html[data-theme="dark"] .mobile-menu nav a { color: #b7c7c2; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .mobile-menu nav a:hover { color: var(--mint); }
html[data-theme="dark"] .mobile-menu .menu-head span { color: #e0ece7; }
html[data-theme="dark"] .mobile-burger { background: #0c1a16; border-color: rgba(255,255,255,.4); color: #e0ece7; }

/* Final proposal hero fit: keep the complete CTA and document set visible. */
@media (min-width:981px){
  .hero{height:calc(100dvh - 82px);min-height:0;padding-top:22px;padding-bottom:22px;gap:28px}
  .hero-copy{max-width:600px}
  .hero-copy .eyebrow{margin-bottom:10px}
  .hero-copy h1{font-size:clamp(2.6rem,4.1vw,4.2rem);line-height:.98}
  .hero-lead{margin-top:12px;font-size:.96rem;line-height:1.45}
  .hero-actions{margin-top:14px;gap:7px}
  .hero-actions .button{min-height:38px;padding:0 13px;font-size:.69rem;gap:7px}
  .hero-downloads{margin-top:11px;gap:6px}
  .hero-downloads .download-card{padding:8px 10px;gap:8px}
  .hero-downloads .dc-icon{font-size:1.05rem}
  .hero-downloads .dc-text strong{font-size:.72rem}
  .hero-downloads .dc-text small{font-size:.59rem}
  .hero-consortium{margin-top:10px;padding:8px 12px}
  .hero-consortium strong{font-size:.75rem}
  .hero-principle{margin-top:10px;padding-top:9px}
  .hero-principle strong{font-size:.78rem}
  .hero-visual{width:min(100%,350px)}
  :root{--sat-r:94px;--sat-w:92px;--sat-h:60px}
}