/* Fonts are self-hosted (SIL Open Font License, see assets/fonts): no request to Google. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/comfortaa-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/comfortaa-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   HumanONE — AI-Powered Populations for Africa & the Middle East
   ========================================================================== */

:root {
  /* Brand */
  --crimson: #d9314b;
  --crimson-hi: #ef4f67;
  --crimson-lo: #b3223a;
  --plum: #5c0e42;
  --aubergine: #2e1a47;
  --clay: #b5623b;
  --saffron: #e2a84b;

  /* Neutrals */
  --ink: #0e0a14;
  --ink-2: #16101f;
  --ink-3: #221a2e;
  --line-dark: rgba(255, 255, 255, 0.1);
  --text-on-dark: #f4eee8;
  --muted-on-dark: rgba(244, 238, 232, 0.66);

  --sand: #f6f0e7;
  --sand-2: #ede3d4;
  --paper: #fffdf9;
  --line: rgba(30, 20, 32, 0.12);
  --text: #1c1520;
  --muted: #62586a;

  /* Type */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Comfortaa", var(--font-sans);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 18px;
  --radius-lg: 28px;
  --section-pad: clamp(80px, 11vw, 150px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
blockquote { margin: 0; }
figure { margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--crimson); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 22px;
}
.eyebrow-light { color: var(--crimson-hi); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson-hi); box-shadow: 0 0 0 4px rgba(217, 49, 75, 0.2); }

.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.015em;
}
.h2 em, .hero-title em { font-style: italic; color: var(--crimson); }
.section-dark .h2 em, .section-plum .h2 em, .section-demo .h2 em, .hero-title em { color: var(--crimson-hi); }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; }
.lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); }
.section-dark .lede, .section-plum .lede, .section-demo .lede { color: var(--muted-on-dark); }
.fineprint { font-size: 13px; color: var(--muted); margin-top: 18px; }
.section-dark .fineprint { color: var(--muted-on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s;
}
.btn-primary { background: var(--crimson); color: #fff; box-shadow: 0 10px 30px -10px rgba(217, 49, 75, 0.7); }
.btn-primary:hover { background: var(--crimson-hi); transform: translateY(-1px); }
.btn-primary .ic { transition: transform .25s var(--ease); }
.btn-primary:hover .ic { transform: translateX(3px); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 18px 30px; font-size: 16.5px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-weight: 700; color: var(--crimson); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link-arrow:hover .ic { transform: translateX(3px); }
.link-arrow .ic { transition: transform .25s var(--ease); }

/* ---------- Wordmark ---------- */
.wordmark { font-family: var(--font-brand); font-size: 24px; text-decoration: none; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wordmark-human { color: #fff; font-weight: 400; }
.wordmark-one { color: var(--crimson); font-weight: 700; }
.wordmark-lg { font-size: 34px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(14, 10, 20, 0.78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--line-dark);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a:not(.btn) {
  color: var(--muted-on-dark); text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: color .2s; position: relative;
}
.main-nav a:not(.btn):hover, .main-nav a[aria-current="page"] { color: #fff; }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--crimson); border-radius: 2px;
}
.nav-cta { margin-left: 6px; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-nav {
  display: flex; flex-direction: column; gap: 4px; padding: 12px var(--gutter) 28px;
  background: rgba(14, 10, 20, 0.97); border-bottom: 1px solid var(--line-dark);
}
.mobile-nav a:not(.btn) { color: var(--text-on-dark); text-decoration: none; font-size: 20px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.mobile-nav .btn { margin-top: 18px; }

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header.menu-open { background: rgba(14, 10, 20, 0.97); }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; position: relative; }
.section-dark { background: var(--ink); color: var(--text-on-dark); }
.section-sand { background: var(--sand); }
.section-light { background: var(--paper); }
.section-plum {
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(217, 49, 75, 0.2), transparent 60%),
    radial-gradient(80% 80% at 100% 100%, rgba(92, 14, 66, 0.55), transparent 60%),
    var(--aubergine);
  color: var(--text-on-dark);
}
.section-head { max-width: 860px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .h2 { margin-bottom: 26px; }
.section-subhead { max-width: 720px; margin: clamp(72px, 8vw, 110px) 0 36px; }
.section-subhead .h3 { margin-bottom: 12px; }
.section-subhead p { color: var(--muted); }
.section-dark .section-subhead p { color: var(--muted-on-dark); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; color: var(--text-on-dark);
  background:
    radial-gradient(70% 60% at 85% 20%, rgba(92, 14, 66, 0.55), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(46, 26, 71, 0.9), transparent 70%),
    var(--ink);
  padding: calc(76px + clamp(48px, 7vw, 96px)) 0 48px;
}
.hero-glow {
  position: absolute; width: 780px; height: 780px; right: -200px; top: -120px; border-radius: 50%;
  /* a soft gradient instead of filter: blur(), which had to be repainted under every animation */
  background: radial-gradient(circle, rgba(217, 49, 75, 0.22) 0%, rgba(217, 49, 75, 0.12) 30%, rgba(217, 49, 75, 0.04) 50%, transparent 66%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.02em; margin-bottom: 28px;
}
.hero-title em { display: block; }
.hero-lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted-on-dark); max-width: 560px; margin-bottom: 34px; }
.hero-lede strong { color: #fff; }
.hero-form {
  display: flex; gap: 8px; max-width: 520px; padding: 6px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
}
.hero-form input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: inherit; font-size: 16px; padding: 0 18px;
}
.hero-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.hero-form input:focus { outline: none; }
.hero-form:focus-within { border-color: rgba(239, 79, 103, 0.7); }
.hero-note { font-size: 14px; color: var(--muted-on-dark); margin: 14px 0 0 18px; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: 28px; margin-top: 52px; padding-top: 28px;
  border-top: 1px solid var(--line-dark); justify-content: start;
}
.hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); line-height: 1; color: #fff; white-space: nowrap; }
.stat-label { font-size: 13px; color: var(--muted-on-dark); line-height: 1.35; max-width: 130px; }

.hero-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 190px 150px 190px; gap: 14px; }
.hv { overflow: hidden; border-radius: var(--radius); background: var(--ink-3); }
.hv img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hv:hover img { transform: scale(1.04); }
.hv-1 { grid-column: 1; grid-row: 1 / span 2; }
.hv-2 { grid-column: 2; grid-row: 1; }
.hv-2 img { object-position: 50% 25%; }
.hv-3 { grid-column: 2; grid-row: 2 / span 2; }
.hv-4 { grid-column: 1; grid-row: 3; }
.hv-4 img { object-position: 50% 30%; }

.glass {
  background: rgba(22, 16, 31, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.pop-card { position: absolute; left: -36px; bottom: 36px; width: 270px; padding: 18px; animation: float 7s ease-in-out infinite; }
.pop-card-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-on-dark); }
.pop-card-head .pill { margin-left: auto; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: pulse 2s infinite; }
.pop-card-num { font-family: var(--font-display); font-size: 38px; color: #fff; margin: 8px 0 12px; line-height: 1; }
.pop-card-num small { font-family: var(--font-sans); font-size: 12px; color: var(--muted-on-dark); display: block; margin-top: 6px; }
.pop-card-rows > div, .answer-bars > div { display: grid; grid-template-columns: 70px 1fr 44px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted-on-dark); margin-top: 7px; }
.pop-card-rows b, .answer-bars b { color: #fff; text-align: right; font-weight: 700; }
.bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--crimson), var(--crimson-hi)); border-radius: inherit; }
.bar.alt i { background: linear-gradient(90deg, #7a4d8f, #a87bc0); }
.answer-card { position: absolute; right: -24px; top: 150px; width: 250px; padding: 16px 18px; animation: float 8s ease-in-out -3s infinite; }
.answer-q { font-size: 13px; color: #fff; font-weight: 600; margin-bottom: 6px; }
.answer-meta { font-size: 11px; color: var(--muted-on-dark); margin-top: 10px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }

.hero-partners {
  position: relative; display: flex; align-items: center; gap: 22px; margin-top: clamp(56px, 7vw, 88px);
  color: var(--muted-on-dark); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.hero-partners img { height: 38px; width: auto; opacity: .9; }
.hero-partners img.logo-iatp { height: 20px; }
.hero-partners .x { font-family: var(--font-display); font-size: 24px; text-transform: none; color: var(--crimson-hi); }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 640px; margin: 20px auto 0; width: 100%; }
  .pop-card { left: -12px; }
  .answer-card { right: -12px; }
}
@media (max-width: 640px) {
  .hero-form { flex-direction: column; border-radius: 20px; padding: 8px; }
  .hero-form input { padding: 12px 12px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .hero-visual { grid-template-rows: 150px 110px 150px; gap: 10px; }
  .pop-card { position: relative; left: auto; bottom: auto; width: 100%; grid-column: 1 / -1; margin-top: 6px; animation: none; }
  .answer-card { display: none; }
  .hero-partners { flex-wrap: wrap; gap: 14px; }
  .hero-partners span:first-child { width: 100%; }
}

/* ==========================================================================
   2. WHAT IS HUMANONE
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.split-copy .h2 { margin-bottom: 28px; }
.split-copy .lede { color: var(--text); font-weight: 500; }
.split-copy p { color: var(--muted); }
.split-copy p strong { color: var(--text); }
.photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: 0 40px 80px -40px rgba(46, 26, 71, .55); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-tag {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(14, 10, 20, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.photo-tag span { background: var(--crimson); padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(64px, 8vw, 110px); }
.pillar { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px 34px; }
.pillar-ic { width: 42px; height: 42px; fill: none; stroke: var(--crimson); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 26px; }
.pillar h3 { font-size: 20px; margin-bottom: 10px; }
.pillar p { color: var(--muted); font-size: 16px; }

.shift { margin-top: 20px; background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-lg); padding: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: center; }
.shift-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 38px); }
.shift-list li { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 16px; }
.shift-list li:last-child { border-bottom: 0; }
.shift-list .from { color: var(--muted-on-dark); text-decoration: line-through; text-decoration-color: rgba(217, 49, 75, .7); }
.shift-list .ic { color: var(--crimson-hi); }
.shift-list .to { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-media { max-width: 520px; }
  .pillars { grid-template-columns: 1fr; }
  .shift { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .shift-list li { grid-template-columns: 1fr; gap: 4px; }
  .shift-list .ic { transform: rotate(90deg); }
}

/* ==========================================================================
   3. POPULATION, NOT PERSONAS
   ========================================================================== */
.pop-explorer {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 0;
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
}
.pop-canvas-wrap { position: relative; min-height: 440px; border-right: 1px solid var(--line-dark); }
.pop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pop-readout {
  position: absolute; left: 24px; bottom: 22px; padding: 14px 18px; border-radius: 14px;
  background: rgba(14, 10, 20, .75); border: 1px solid var(--line-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pop-readout-num { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1; color: #fff; }
.pop-readout-label { font-size: 13px; color: var(--muted-on-dark); }
.pop-controls { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.pop-controls-title { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted-on-dark); margin-bottom: 18px; }
.seg-buttons { display: flex; flex-direction: column; gap: 8px; }
.seg {
  text-align: left; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, .03); color: var(--text-on-dark); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; gap: 12px; transition: background .2s, border-color .2s;
}
.seg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); flex: none; transition: all .2s; }
.seg:hover { background: rgba(255, 255, 255, .07); }
.seg.is-active { border-color: rgba(239, 79, 103, .7); background: rgba(217, 49, 75, .14); }
.seg.is-active::before { background: var(--crimson-hi); border-color: var(--crimson-hi); box-shadow: 0 0 0 4px rgba(217, 49, 75, .25); }
.pop-note { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--muted-on-dark); }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.versus-card { border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line-dark); }
.versus-bad { background: rgba(255, 255, 255, .02); }
.versus-good { background: linear-gradient(160deg, rgba(217, 49, 75, .18), rgba(92, 14, 66, .25)); border-color: rgba(239, 79, 103, .35); }
.versus-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.versus-bad .versus-kicker { color: var(--muted-on-dark); }
.versus-good .versus-kicker { color: var(--crimson-hi); }
.versus-card h3 { font-size: 22px; margin-bottom: 12px; color: #fff; }
.versus-card p { color: var(--muted-on-dark); }
.versus-card em { color: #fff; font-style: normal; background: rgba(217, 49, 75, .22); padding: 1px 6px; border-radius: 6px; }
.var-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.var-chips li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: #fff; }

.archetypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.archetype { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.archetype img { aspect-ratio: 1 / .9; object-fit: cover; object-position: 50% 30%; width: 100%; }
.archetype-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.archetype-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); font-weight: 700; margin-bottom: 8px; }
.archetype h4 { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: #fff; margin-bottom: 12px; }
.archetype-desc { font-size: 15px; color: var(--muted-on-dark); }
.archetype blockquote { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.3; color: #fff; border-left: 2px solid var(--crimson); padding-left: 16px; margin: 8px 0 20px; }
.archetype-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.archetype-tags li { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted-on-dark); }

.compare { margin-top: clamp(72px, 8vw, 110px); }
.compare .h3 { margin-bottom: 28px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare-table th, .compare-table td { padding: 18px 20px; text-align: center; border-bottom: 1px solid var(--line-dark); }
.compare-table thead th { font-size: 14px; font-weight: 700; color: var(--muted-on-dark); }
.compare-table thead th.is-us { color: #fff; }
.compare-table tbody th { text-align: left; font-weight: 600; color: #fff; font-size: 15.5px; }
.compare-table .is-us { background: rgba(217, 49, 75, .1); }
.compare-table thead .is-us { border-radius: 14px 14px 0 0; }
.mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.mark.yes { background: rgba(61, 220, 151, .14); color: #6fe8b0; }
.mark.no { background: rgba(255, 255, 255, .06); color: rgba(244, 238, 232, .5); }
.mark.lim { background: rgba(226, 168, 75, .14); color: var(--saffron); }

@media (max-width: 960px) {
  .pop-explorer { grid-template-columns: 1fr; }
  .pop-canvas-wrap { min-height: 340px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .seg-buttons { flex-direction: row; flex-wrap: wrap; }
  .seg { flex: 1 1 calc(50% - 8px); font-size: 14px; }
  .versus { grid-template-columns: 1fr; }
  .archetypes { grid-template-columns: 1fr; max-width: 560px; }
}

/* ==========================================================================
   4. HOW IT WORKS
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; counter-reset: step; }
.steps::before {
  content: ""; position: absolute; left: 3%; right: 3%; top: 64px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(217, 49, 75, .5) 0 6px, transparent 6px 12px);
}
.step { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 30px; }
.step-num { font-family: var(--font-display); font-size: 18px; color: var(--muted); }
.step-ic {
  display: block; width: 56px; height: 56px; padding: 13px; margin: 16px 0 22px; border-radius: 50%;
  background: var(--sand); border: 1px solid var(--line); fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  position: relative; z-index: 1;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--muted); }
.step-core { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); transform: translateY(-14px); box-shadow: 0 30px 60px -30px rgba(46, 26, 71, .8); }
.step-core .step-num { color: var(--crimson-hi); }
.step-core .step-ic { background: var(--crimson); border-color: var(--crimson); stroke: #fff; }
.step-core p { color: var(--muted-on-dark); }
.step-badge { position: absolute; top: 22px; right: 18px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(217, 49, 75, .2); color: var(--crimson-hi); }

.journey { margin-top: clamp(56px, 7vw, 90px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.journey-copy .h3 { margin-bottom: 14px; }
.journey-copy p { color: var(--muted); }
.journey-row { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 16px 0; }
.journey-row + .journey-row { border-top: 1px dashed var(--line); }
.journey-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.journey-row.is-us .journey-label { color: var(--crimson); }
.journey-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.journey-stages li { font-size: 12px; font-weight: 600; text-align: center; padding: 10px 2px; border-radius: 10px; background: var(--sand); color: var(--muted); position: relative; }
.journey-stages li.on { background: var(--sand-2); color: var(--text); }
.journey-row.is-us .journey-stages li.on { background: var(--crimson); color: #fff; }
.journey-row:not(.is-us) .journey-stages li.on { background: var(--ink); color: #fff; }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .step-core { transform: none; }
  .step:last-child { grid-column: 1 / -1; }
  .journey { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .journey-row { grid-template-columns: 1fr; gap: 10px; }
  .journey-stages li { font-size: 10.5px; padding: 8px 2px; }
}

/* ==========================================================================
   5. USE CASES
   ========================================================================== */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.usecase { padding: 36px 32px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.usecase:hover { background: var(--sand); }
.uc-ic { width: 34px; height: 34px; fill: none; stroke: var(--crimson); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 24px; }
.usecase h3 { font-size: 20px; margin-bottom: 8px; }
.usecase p { color: var(--muted); font-size: 15.5px; }

.usecase-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.usecase-more > div { background: var(--sand); padding: 22px 24px; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; row-gap: 4px; }
.usecase-more .ic { color: var(--crimson); grid-row: span 2; margin-top: 2px; width: 20px; height: 20px; }
.usecase-more strong { font-size: 15.5px; }
.usecase-more span { font-size: 14px; color: var(--muted); line-height: 1.45; }

.cases { margin-top: clamp(72px, 8vw, 110px); }
.cases-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.case-tab { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 700; font-size: 14.5px; color: var(--muted); transition: all .2s; }
.case-tab:hover { color: var(--text); border-color: var(--text); }
.case-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.case-panel { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-lg); overflow: hidden; min-height: 520px; }
.case-media { position: relative; background: var(--ink-3); }
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: clamp(30px, 4vw, 56px); }
.case-kicker { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--saffron); margin-bottom: 14px; }
.case-body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 38px); color: #fff; margin-bottom: 18px; }
.case-body > p { color: var(--muted-on-dark); }
.case-quote { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.3; color: #fff; border-left: 2px solid var(--crimson); padding-left: 16px; margin-bottom: 18px; }
.case-findings { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.case-findings-title { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted-on-dark); margin-bottom: 14px; }
.case-findings ol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case-findings li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); border-radius: 12px; padding: 12px 14px; }
.case-findings b { color: var(--crimson-hi); font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.case-steps { display: grid; gap: 12px; margin-top: 8px; }
.case-steps li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); color: var(--muted-on-dark); font-size: 15.5px; }
.case-steps b { color: #fff; }

.case-media-chart { display: flex; align-items: center; padding: 36px; background: linear-gradient(160deg, var(--aubergine), var(--ink)); }
.mini-chart { width: 100%; }
.mini-chart-title { font-weight: 700; color: #fff; margin-bottom: 22px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mini-chart-title span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-dark); padding: 3px 8px; border: 1px solid var(--line-dark); border-radius: 999px; }
.mc-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; font-size: 13.5px; color: var(--muted-on-dark); }
.mc-bars { display: flex; height: 26px; border-radius: 8px; overflow: hidden; }
.mc-bars i { display: block; width: var(--w); height: 100%; }
.mc-bars i.a, .mc-legend i.a { background: var(--crimson); }
.mc-bars i.b, .mc-legend i.b { background: #8c5aa6; }
.mc-bars i.c, .mc-legend i.c { background: rgba(255, 255, 255, .22); }
.mc-legend { display: flex; gap: 18px; margin-top: 20px; font-size: 13px; color: var(--muted-on-dark); flex-wrap: wrap; }
.mc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.sectors { margin-top: clamp(56px, 7vw, 90px); display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; padding-top: 32px; border-top: 1px solid var(--line); }
.sectors-title { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-top: 8px; }
.sectors ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sectors li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 600; background: var(--sand); }

@media (max-width: 960px) {
  .usecases, .usecase-more { grid-template-columns: repeat(2, 1fr); }
  .case-panel { grid-template-columns: 1fr; }
  .case-media { min-height: 280px; }
  .case-media-chart { min-height: 0; }
  .sectors { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .usecases, .usecase-more { grid-template-columns: 1fr; }
  .usecase { padding: 28px 24px; }
  .case-findings ol { grid-template-columns: 1fr; }
  .case-steps li { grid-template-columns: 1fr; gap: 4px; }
  .case-tab { flex: 1 1 100%; }
}

/* ==========================================================================
   6. REGION
   ========================================================================== */
.region { background:
  radial-gradient(60% 50% at 100% 0%, rgba(181, 98, 59, .22), transparent 60%),
  radial-gradient(60% 60% at 0% 100%, rgba(92, 14, 66, .35), transparent 60%),
  var(--ink); }
.region-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; margin-bottom: 20px; }
.region-top .section-head { margin-bottom: 0; }
.region-mosaic { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 200px 220px; gap: 14px; }
.rm { border-radius: var(--radius); overflow: hidden; background: var(--ink-3); }
.rm img { width: 100%; height: 100%; object-fit: cover; }
.rm-wide { grid-column: 1 / -1; }
.region-mosaic .rm:nth-child(3) img { object-position: 50% 20%; }

.ref-market {
  margin-top: clamp(56px, 7vw, 90px); padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg);
  border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03);
}
.ref-market-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.ref-kicker { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--saffron); margin: 0; }
.ref-market h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); color: #fff; }
.ref-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ref-stats li { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; border-left: 2px solid var(--crimson); }
.ref-stats .stat-num { font-size: clamp(38px, 4vw, 56px); }
.ref-stats li > span:last-child { font-size: 14px; color: var(--muted-on-dark); }

.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reach-item { padding: 26px; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line-dark); }
.reach-item .ic { width: 30px; height: 30px; color: var(--saffron); stroke-width: 1.5; margin-bottom: 18px; }
.reach-item h4 { font-size: 18px; color: #fff; margin-bottom: 6px; }
.reach-item p { font-size: 15px; color: var(--muted-on-dark); }

.footprint { margin-top: clamp(56px, 7vw, 90px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.footprint-logo { height: 46px; width: auto; margin-bottom: 20px; }
.footprint-copy p { color: var(--muted-on-dark); }
.footprint-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.footprint-stats li { display: flex; flex-direction: column; gap: 6px; }
.footprint-stats li > span:last-child { font-size: 13.5px; color: var(--muted-on-dark); }

@media (max-width: 960px) {
  .region-top { grid-template-columns: 1fr; }
  .ref-stats, .footprint-stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .reach { grid-template-columns: repeat(2, 1fr); }
  .footprint { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .region-mosaic { grid-template-rows: 150px 170px; gap: 10px; }
  .reach { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. SCIENCE, VALIDATION, LIMITS & SECURITY
   ========================================================================== */
.science-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.science-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; display: flex; flex-direction: column; }
.science-card .science-num { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--crimson); margin-bottom: 20px; }
.science-card h3 { font-size: 22px; margin-bottom: 10px; }
.science-card p { color: var(--muted); font-size: 15.5px; }
.science-card .science-tag { margin-top: auto; padding-top: 18px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--text); }
.citation { margin-top: 22px; font-size: 14px; color: var(--muted); max-width: 900px; }

.validation { margin-top: clamp(72px, 8vw, 110px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.validation-copy .h3 { margin-bottom: 18px; }
.validation-copy p { color: var(--muted); }
.claims-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 460px; }
.claims-table th, .claims-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.claims-table tr:last-child th, .claims-table tr:last-child td { border-bottom: 0; }
.claims-table thead th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--sand-2); }
.claims-table tbody th { text-align: left; font-weight: 600; font-size: 15px; }
.claims-table thead th:first-child { text-align: left; }
.claims-table tr.win { background: rgba(217, 49, 75, .06); }
.rank { display: inline-block; min-width: 54px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--sand); color: var(--muted); }
.rank.r1 { background: var(--crimson); color: #fff; }
.rank.r2 { background: var(--ink); color: #fff; }
.rank.lo { background: transparent; border: 1px dashed var(--line); }

.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); }
.trust-item { padding: 26px 26px 0 0; }
.trust-item + .trust-item { padding-left: 26px; border-left: 1px solid var(--line); }
.trust-item h4 { font-size: 17px; margin-bottom: 8px; }
.trust-item p { font-size: 15px; color: var(--muted); }

.limits { margin-top: clamp(72px, 8vw, 110px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px); }
.limits-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.limits-head .eyebrow { margin-bottom: 14px; }
.limits-head blockquote { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--muted); border-left: 2px solid var(--crimson); padding-left: 18px; }
.limits-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.limits-col { border-radius: var(--radius); padding: 28px; }
.limits-col.yes { background: rgba(46, 140, 98, .07); border: 1px solid rgba(46, 140, 98, .22); }
.limits-col.no { background: rgba(217, 49, 75, .05); border: 1px solid rgba(217, 49, 75, .2); }
.limits-col h4 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 16px; }
.limits-col.yes h4 .ic { color: #2e8c62; }
.limits-col.no h4 .ic { color: var(--crimson); }
.limits-col li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--text); }
.limits-foot { margin-top: 24px; font-weight: 700; text-align: center; }

.security { margin-top: 20px; background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-lg); padding: clamp(30px, 4vw, 56px); position: relative; overflow: hidden; }
.security::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 49, 75, .22), transparent 65%); }
.security-head { position: relative; max-width: 760px; margin-bottom: 36px; }
.security-head .eyebrow { margin-bottom: 14px; }
.security-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.security-grid li { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); }
.security-grid .ic { width: 28px; height: 28px; color: var(--crimson-hi); stroke-width: 1.5; margin-bottom: 16px; }
.security-grid h4 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.security-grid p { color: var(--muted-on-dark); font-size: 14.5px; }
.security-foot { position: relative; margin-top: 24px; font-size: 14px; color: var(--muted-on-dark); }

@media (max-width: 960px) {
  .science-grid { grid-template-columns: 1fr; }
  .validation { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-item, .trust-item + .trust-item { padding: 22px 0 0; border-left: 0; }
  .trust-item:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
  .limits-head, .limits-cols { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .trust-row { grid-template-columns: 1fr; }
  .trust-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .security-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. PARTNERSHIP
   ========================================================================== */
.partners { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.partner { padding: clamp(28px, 3.5vw, 44px); border-radius: var(--radius-lg); background: rgba(14, 10, 20, .35); border: 1px solid var(--line-dark); display: flex; flex-direction: column; }
.partner-logo { height: 48px; width: auto; align-self: flex-start; margin-bottom: 28px; }
.partner-logo-iatp { height: 26px; margin: 11px 0 39px; }
.partner-role { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--crimson-hi); margin-bottom: 12px; }
.partner > p:not(.partner-role) { color: var(--muted-on-dark); }
.partner-x { align-self: center; font-family: var(--font-display); font-size: 72px; color: var(--crimson-hi); line-height: 1; }
.people { display: grid; gap: 16px; margin-top: auto; padding-top: 28px; }
.people li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.people img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.people strong { display: block; color: #fff; font-size: 16px; }
.people span { font-size: 14px; color: var(--muted-on-dark); line-height: 1.45; }

.partner-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 24px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-dark); }
.partner-split > div { padding: 26px 28px; background: rgba(14, 10, 20, .25); }
.partner-split > div + div { border-left: 1px solid var(--line-dark); }
.partner-split > div:last-child { background: var(--crimson); }
.ps-label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted-on-dark); margin-bottom: 8px; }
.partner-split > div:last-child .ps-label { color: rgba(255, 255, 255, .8); }
.partner-split p { color: #fff; font-weight: 600; }

@media (max-width: 960px) {
  .partners { grid-template-columns: 1fr; }
  .partner-x { justify-self: center; font-size: 56px; }
  .partner-split { grid-template-columns: 1fr; }
  .partner-split > div + div { border-left: 0; border-top: 1px solid var(--line-dark); }
}

/* ==========================================================================
   DEMO
   ========================================================================== */
.section-demo {
  color: var(--text-on-dark);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(217, 49, 75, .35), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.demo-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.demo-copy .h2 { margin-bottom: 24px; }
.demo-quote { margin-top: 36px; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.3; color: #fff; border-left: 2px solid var(--crimson); padding-left: 20px; }
.demo-form { background: var(--paper); color: var(--text); border-radius: var(--radius-lg); padding: clamp(26px, 3.5vw, 44px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13.5px; font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--text);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(217, 49, 75, .15); }
.field.has-error input { border-color: var(--crimson); }
.demo-form .btn { width: 100%; margin-top: 6px; }
.form-status { margin: 14px 0 0; font-weight: 600; font-size: 15px; min-height: 1em; }
.form-status.ok { color: #1f7a52; }
.form-status.err { color: var(--crimson-lo); }
.form-legal { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: #09060d; color: var(--muted-on-dark); padding: 80px 0 32px; border-top: 1px solid var(--line-dark); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-tag { margin-top: 14px; font-size: 15px; }
.footer-logos { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.footer-logos img { height: 34px; width: auto; opacity: .8; }
.footer-logos img.logo-iatp { height: 17px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav p { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; margin-bottom: 6px; }
.footer-nav a { text-decoration: none; font-size: 15px; }
.footer-nav a:hover { color: #fff; }
.footer-cta p { font-family: var(--font-display); font-size: 26px; color: #fff; line-height: 1.15; margin-bottom: 18px; }
.footer-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-cta { grid-column: 1 / -1; }
}

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

/* ---------- Small-screen tables ---------- */
@media (max-width: 560px) {
  .claims-table { min-width: 0; }
  .claims-table th, .claims-table td { padding: 12px 10px; }
  .claims-table thead th { font-size: 10.5px; letter-spacing: .04em; }
  .claims-table tbody th { font-size: 14px; }
  .rank { min-width: 42px; padding: 4px 8px; }
  .compare-table { min-width: 520px; }
  .compare-table th, .compare-table td { padding: 14px 10px; }
}

/* ==========================================================================
   MULTI-PAGE COMPONENTS
   ========================================================================== */
.mobile-nav a[aria-current="page"] { color: var(--crimson-hi); }
.container > .section-subhead:first-child { margin-top: 0; }
.section-foot { margin-top: clamp(40px, 5vw, 64px); }
.section-foot.center { text-align: center; }
.link-arrow-light { color: var(--crimson-hi); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .28); background: transparent; }
.btn-ghost:hover { border-color: #fff; transform: translateY(-1px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.statement { margin-top: 36px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; max-width: 900px; }
.section-dark .statement { color: #fff; }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; overflow: hidden; color: var(--text-on-dark);
  background:
    radial-gradient(70% 70% at 90% 10%, rgba(92, 14, 66, .55), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(46, 26, 71, .9), transparent 70%),
    var(--ink);
  padding: calc(76px + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 110px);
}
.page-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.page-hero-grid.no-media { grid-template-columns: minmax(0, 880px); }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6.2vw, 84px); line-height: 1; letter-spacing: -.02em; margin-bottom: 26px; }
.page-title em { font-style: italic; color: var(--crimson-hi); }
.page-hero .hero-lede { margin-bottom: 28px; }
.page-hero-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1.05; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted-on-dark); margin-bottom: 26px; }
.crumbs a { color: var(--muted-on-dark); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.page-hero-photo { min-height: min(86vh, 760px); display: flex; align-items: flex-end; }
.page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,10,20,.45) 0%, rgba(14,10,20,.55) 40%, rgba(14,10,20,.96) 100%); }
.page-hero-photo .container { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-media { max-width: 480px; aspect-ratio: 4 / 3; }
}

/* ---------- CTA band ---------- */
.cta-band { background: radial-gradient(80% 120% at 0% 0%, rgba(217, 49, 75, .35), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); color: var(--text-on-dark); padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--line-dark); }
.cta-band-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.cta-band .h2 { margin-bottom: 18px; }
.cta-band .h2 em { color: var(--crimson-hi); }
.cta-band .lede { color: var(--muted-on-dark); max-width: 640px; }
@media (max-width: 760px) { .cta-band-inner { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Home: trust cards ---------- */
.trust-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust-card { display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .3s var(--ease), box-shadow .3s; }
.trust-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(46, 26, 71, .45); }
.trust-card-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--crimson); margin-bottom: 14px; }
.trust-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.12; margin-bottom: 12px; }
.trust-card p { font-size: 15px; color: var(--muted); }
.trust-card-go { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--crimson); }
.trust-card-dark { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.trust-card-dark p { color: var(--muted-on-dark); }
.trust-card-dark .trust-card-kicker, .trust-card-dark .trust-card-go { color: var(--crimson-hi); }
@media (max-width: 1080px) { .trust-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .trust-cards { grid-template-columns: 1fr; } }

/* ---------- Product ---------- */
.define { max-width: 980px; }
.define-text { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; }
.define-text em { color: var(--crimson); }
.limits3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.limit3 { padding: 30px; border-radius: var(--radius); background: var(--sand); border: 1px solid var(--line); }
.limit3-num { font-family: var(--font-display); font-size: 34px; color: var(--crimson); line-height: 1.05; margin-bottom: 18px; }
.limit3 h3 { font-size: 19px; margin-bottom: 8px; }
.limit3 p:last-child { color: var(--muted); font-size: 15.5px; }
.bench { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bench li { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.bench-num { font-family: var(--font-display); font-size: 52px; line-height: 1; color: var(--crimson); margin-bottom: 10px; }
.bench strong { font-size: 17px; }
.bench span:last-child { font-size: 15px; color: var(--muted); }
@media (max-width: 960px) { .limits3 { grid-template-columns: 1fr; } .bench { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bench { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.multi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.multi-svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.multi-lines line { stroke: rgba(239, 79, 103, .28); stroke-width: 1; }
.multi-nodes rect { fill: var(--ink-3); stroke: rgba(255, 255, 255, .22); }
.multi-nodes text { fill: #fff; font: 600 12.5px var(--font-sans); }
.multi-core { fill: var(--crimson); }
.multi-core-text { fill: #fff; font: 700 13px var(--font-sans); }
.multi-list { display: grid; gap: 16px; }
.multi-list li { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); }
.multi-list p { color: var(--muted-on-dark); margin-top: 12px; }
.multi-tag { display: inline-block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.multi-tag.bad { background: rgba(255, 255, 255, .08); color: var(--muted-on-dark); }
.multi-tag.good { background: rgba(217, 49, 75, .2); color: var(--crimson-hi); }
.multi-foot { margin-top: 22px; color: #fff; font-weight: 600; }
.latent { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap: 8px; align-items: stretch; }
.latent-col { padding: 28px; border-radius: var(--radius); background: var(--sand); border: 1px solid var(--line); }
.latent-mid { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.latent-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--crimson); margin-bottom: 16px; }
.latent-mid .latent-kicker { color: var(--crimson-hi); }
.latent-col ul { display: flex; flex-wrap: wrap; gap: 8px; }
.latent-col li { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.latent-mid li { background: rgba(217, 49, 75, .18); border-color: rgba(239, 79, 103, .4); color: #fff; }
.latent-note { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.latent-mid .latent-note { color: var(--muted-on-dark); }
.latent-case { font-size: 16px; color: var(--muted); }
.latent-case strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 8px; }
.latent-arrow { display: flex; align-items: center; justify-content: center; color: var(--crimson); }
.latent-arrow .ic { width: 26px; height: 26px; }
.panel3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.panel3 article { padding: 30px; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line-dark); }
.panel3 .ic { width: 30px; height: 30px; color: var(--crimson-hi); stroke-width: 1.5; margin-bottom: 18px; }
.panel3 h3 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.panel3 p { color: var(--muted-on-dark); font-size: 15.5px; }
@media (max-width: 960px) {
  .multi { grid-template-columns: 1fr; }
  .latent { grid-template-columns: 1fr; }
  .latent-arrow { transform: rotate(90deg); height: 36px; }
  .panel3 { grid-template-columns: 1fr; }
}

/* ---------- Use cases ---------- */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.format { padding: 32px 28px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }
.format-featured { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.format-kicker { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--crimson); margin-bottom: 18px; }
.format-featured .format-kicker { color: var(--crimson-hi); }
.format h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin-bottom: 8px; }
.format > p { color: var(--muted); }
.format-featured > p { color: var(--muted-on-dark); }
.format ul { margin-top: 20px; }
.format li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.format-featured li { border-top-color: var(--line-dark); }
.gains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 20px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.gains li { padding: 22px 24px; background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.gains li + li { border-left: 1px solid var(--line); }
.gains strong { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--crimson); line-height: 1.05; }
.gains span { font-size: 14px; color: var(--muted); }
@media (max-width: 960px) {
  .formats { grid-template-columns: 1fr; }
  .gains { grid-template-columns: 1fr 1fr; }
  .gains li:nth-child(3) { border-left: 0; }
  .gains li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Region ---------- */
.real3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.real3 article { padding: 28px; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line-dark); }
.real3 .ic { width: 28px; height: 28px; color: var(--saffron); stroke-width: 1.5; margin-bottom: 16px; }
.real3 h3 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.real3 p { color: var(--muted-on-dark); font-size: 15.5px; }
.region-top-light .section-head .lede { color: var(--muted); }
.region-top-light { margin-bottom: 0; }
.explore { margin-top: clamp(56px, 7vw, 90px); }
.explore-title { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted-on-dark); margin-bottom: 20px; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.explore-card { border-radius: var(--radius); overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-dark); }
.explore-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.explore-card > div { padding: 22px 24px 26px; }
.explore-card h3 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 25px; margin-bottom: 8px; }
.explore-card p { color: var(--muted-on-dark); font-size: 15px; }
.ref-market:first-child { margin-top: 0; }
@media (max-width: 960px) {
  .real3, .explore-grid { grid-template-columns: 1fr; }
  .page-hero-photo { min-height: 0; }
}

/* ---------- Science ---------- */
.validation-flat { margin-top: 0; }
.animatic { margin-top: clamp(64px, 8vw, 100px); }
.animatic-head { max-width: 760px; margin-bottom: 28px; }
.animatic-head .eyebrow { margin-bottom: 14px; }
.animatic-head .h3 { margin-bottom: 12px; }
.animatic-head p:last-child { color: var(--muted); }
.animatic-table td { font-size: 14.5px; text-align: left; color: var(--muted); }
.animatic-table thead th { text-align: left; }
.section-light .claims-table thead th { background: var(--sand); }
.limits:first-child { margin-top: 0; }

/* ---------- Security ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.principle { padding: 34px 30px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }
.principle .ic { width: 38px; height: 38px; color: var(--crimson); stroke-width: 1.4; margin-bottom: 22px; }
.principle h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin-bottom: 10px; }
.principle p { color: var(--muted); }
.security-bare { margin-top: 0; padding: 0; background: none; overflow: visible; }
.security-bare::before { display: none; }
.hosting { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.host { padding: 30px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }
.host-status { display: inline-block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(46, 140, 98, .12); color: #1f7a52; margin-bottom: 22px; }
.host-alt .host-status { background: rgba(226, 168, 75, .18); color: #8a5a12; }
.host-dark { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.host-dark .host-status { background: rgba(255, 255, 255, .1); color: #fff; }
.host h3 { font-family: var(--font-display); font-weight: 400; font-size: 38px; margin-bottom: 8px; }
.host p { color: var(--muted); }
.host-dark p { color: var(--muted-on-dark); }
@media (max-width: 960px) { .principles, .hosting { grid-template-columns: 1fr; } }

/* ---------- Partnership ---------- */
.bios { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bio { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 30px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }
.bio img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.bio h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; }
.bio-role { font-size: 13px; font-weight: 700; color: var(--crimson); margin: 4px 0 12px; }
.bio p:not(.bio-role) { color: var(--muted); font-size: 15.5px; }
.bio blockquote { margin-top: 14px; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.3; border-left: 2px solid var(--crimson); padding-left: 14px; }
.sectors:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
@media (max-width: 960px) { .bios { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bio { grid-template-columns: 1fr; } }

/* ---------- Demo page ---------- */
.demo-page { padding-top: calc(76px + clamp(32px, 4.5vw, 64px)); }
.demo-page .page-title { font-size: clamp(42px, 4.8vw, 66px); }
.expect { margin-top: 36px; display: grid; gap: 12px; }
.expect li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.expect b { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--crimson-hi); line-height: 1; }
.expect strong { display: block; color: #fff; margin-bottom: 4px; }
.expect span { color: var(--muted-on-dark); font-size: 15px; }
.footprint:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.security-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .security-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .security-grid-4 { grid-template-columns: 1fr; } }
.partners .partner > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   NAVIGATION: home link + dropdown groups
   ========================================================================== */
.main-nav { gap: 6px; }
.main-nav .nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted-on-dark); text-decoration: none; font-size: 14.5px; font-weight: 600;
  background: none; border: 0; transition: color .2s, background .2s; position: relative;
}
.main-nav .nav-link:hover, .nav-group.is-open .nav-group-btn { color: #fff; background: rgba(255, 255, 255, .06); }
.main-nav .nav-link[aria-current="page"], .nav-group.is-current .nav-group-btn { color: #fff; }
.main-nav .nav-link[aria-current="page"]::after, .nav-group.is-current .nav-group-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--crimson);
}
.main-nav a:not(.btn)[aria-current="page"]::after { bottom: 2px; }
.nav-chev { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav-group { position: relative; }
.nav-group.is-open .nav-chev { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 300px; padding: 8px;
  background: rgba(22, 16, 31, .97); border: 1px solid var(--line-dark); border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-group.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
@media (hover: hover) {
  .nav-group:hover .nav-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
  .nav-group:hover .nav-chev { transform: rotate(180deg); }
}
.nav-menu a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255, 255, 255, .06); }
.nav-menu strong { display: block; color: #fff; font-size: 14.5px; }
.nav-menu span { display: block; color: var(--muted-on-dark); font-size: 13px; margin-top: 2px; }
.nav-menu a[aria-current="page"] strong { color: var(--crimson-hi); }
.nav-menu a[aria-current="page"]::after { display: none; }
.mobile-group { margin: 18px 0 4px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted-on-dark); }
.mobile-nav a.mobile-sub { padding-left: 14px; font-size: 18px; }
@media (max-width: 1180px) { .main-nav .nav-link { padding: 10px 9px; font-size: 14px; } }

/* ==========================================================================
   VISUALISATIONS
   ========================================================================== */
.viz-frame, .viz-card, .viz-plain { margin: 0; }
.viz-host { position: relative; width: 100%; }
.viz-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.viz-frame { border-radius: var(--radius-lg); border: 1px solid var(--line-dark); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); padding: 22px 22px 18px; }
.viz-frame-bare { border: 0; background: none; padding: 0; }
.viz-frame-tall .viz-host[data-viz="flow"] { height: 420px; }
.viz-frame-dark { background: var(--ink); border-color: var(--ink); box-shadow: 0 40px 70px -40px rgba(46, 26, 71, .8); }
.viz-host[data-viz="flow"] { height: 340px; }
.viz-host[data-viz="flow"] canvas { display: block; }
.viz-cap { margin-top: 12px; font-size: 13.5px; color: var(--muted-on-dark); }
.viz-card { border-radius: var(--radius-lg); padding: 24px 24px 18px; background: var(--ink-2); border: 1px solid var(--line-dark); }
.viz-card.viz-light { background: var(--paper); border-color: var(--line); box-shadow: 0 30px 60px -45px rgba(46, 26, 71, .5); }
.section-light .viz-card.viz-light { background: #fff; }
.viz-row { margin-top: 20px; }
.viz-row .viz-card { max-width: 820px; }
.page-hero-viz { width: 100%; }

/* text in charts uses text tokens, never the series colour */
.viz-tick { fill: rgba(244, 238, 232, .55); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz-axis { fill: rgba(244, 238, 232, .55); font-size: 11.5px; }
.viz-legend { fill: var(--text-on-dark); font-size: 13px; font-weight: 600; }
.viz-label { fill: rgba(244, 238, 232, .78); font-size: 12.5px; font-weight: 600; }
.viz-strong { fill: #fff; font-weight: 700; }
.viz-note { fill: rgba(244, 238, 232, .5); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.viz-light .viz-tick, .viz-light .viz-axis { fill: var(--muted); }
.viz-light .viz-legend { fill: var(--text); }
.viz-light .viz-label { fill: var(--muted); }
.viz-light .viz-strong { fill: var(--text); }
.viz-light .viz-note { fill: var(--muted); }

.viz-tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: #0e0a14; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.45; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6);
}
.viz-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* entrance animations (triggered by .is-in) */
.viz-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease) calc(var(--i, 0) * .25s); }
.is-in .viz-draw { stroke-dashoffset: 0; }
.viz-slope-g .viz-draw { transition-delay: calc(var(--i) * .15s); }
.viz-grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform 1.2s var(--ease) calc(var(--i) * .35s); }
.is-in .viz-grow { transform: none; }
.viz-cell { opacity: 0; transition: opacity .4s ease calc(var(--i) * 30ms); }
.is-in .viz-cell { opacity: 1; }
.viz-pulse { animation: vizPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vizPulse { 50% { transform: scale(1.35); } }

/* vault */
.viz-vault { max-width: 440px; margin: 0 auto; }
.viz-ring-label { fill: rgba(244, 238, 232, .6); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; }
.viz-core-label { fill: #fff; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.viz-orbit { animation: vizSpin var(--dur) linear infinite; animation-direction: normal; }
.viz-orbit[style*="--dir:-1"] { animation-direction: reverse; }
@keyframes vizSpin { to { transform: rotate(360deg); } }
.viz-probe { fill: rgba(244, 238, 232, .55); animation: vizProbe 4.2s ease-in-out var(--delay) infinite; }
@keyframes vizProbe { 0%, 100% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 45% { transform: translate(var(--dx), var(--dy)); opacity: .9; } 70% { transform: translate(0, 0); opacity: 0; } }

/* venn */
.viz-venn { max-width: 640px; margin: 0 auto; }
.viz-venn-l, .viz-venn-r { transition: transform 1.4s var(--ease); }
.viz-venn-l { transform: translateX(-40px); }
.viz-venn-r { transform: translateX(40px); }
.is-in .viz-venn-l, .is-in .viz-venn-r { transform: none; }
.viz-venn-title { fill: #fff; font-family: var(--font-display); font-size: 21px; }
.viz-venn-sub { fill: var(--crimson-hi); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.viz-venn-r .viz-venn-sub { fill: #c9a3dc; }
.viz-venn-item { fill: rgba(244, 238, 232, .72); font-size: 13px; font-weight: 600; }
.viz-venn-core { font-family: var(--font-brand); font-size: 22px; }
.viz-venn-human { fill: #fff; }
.viz-venn-one { fill: var(--crimson-hi); font-weight: 700; }
.viz-float { fill: rgba(244, 238, 232, .7); animation: vizFloat var(--d) ease-in-out var(--o) infinite alternate; }
@keyframes vizFloat { from { transform: translate(-4px, -6px); } to { transform: translate(4px, 6px); } }
.venn-wrap { max-width: 720px; margin: 0 auto 36px; }

/* head + viz split */
.head-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.head-split .section-head { margin-bottom: 0; }

/* waffle */
.waffle-block { margin-top: clamp(56px, 7vw, 90px); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.waffle-copy .eyebrow { margin-bottom: 14px; }
.waffle-copy .h3 { color: #fff; margin-bottom: 14px; }
.waffle-copy > p { color: var(--muted-on-dark); }
.viz-legend-list { display: flex; gap: 22px; margin: 18px 0 4px; }
.viz-legend-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-on-dark); }
.viz-legend-list i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.viz-legend-list i.muted { background: rgba(244, 238, 232, .62); opacity: .35; }
.viz-legend-list b { color: #fff; }

/* validation */
.validation-side { display: grid; gap: 16px; }
.slope-card { padding: 20px 20px 12px; }

@media (max-width: 960px) {
  .head-split, .waffle-block { grid-template-columns: 1fr; }
  .viz-frame-tall .viz-host[data-viz="flow"] { height: 340px; }
}
@media (max-width: 560px) {
  .viz-host[data-viz="flow"], .viz-frame-tall .viz-host[data-viz="flow"] { height: 300px; }
  .viz-frame { padding: 16px 12px; }
  .viz-card { padding: 16px 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .viz-draw { stroke-dashoffset: 0; }
  .viz-grow { transform: none; }
  .viz-cell { opacity: 1; }
  .viz-venn-l, .viz-venn-r { transform: none; }
}
.viz-plain .viz-host[data-viz="waffle"] { max-width: 480px; margin-left: auto; }
.viz-venn-core { font-size: 19px; }
@media (max-width: 960px) { .viz-plain .viz-host[data-viz="waffle"] { margin: 0; } }
@media (max-width: 560px) {
  .viz-venn-item { font-size: 15px; }
  .viz-venn-title { font-size: 23px; }
  .viz-venn-sub { font-size: 12px; }
  .viz-ring-label { font-size: 13px; }
}

/* ---------- Small-phone hardening (320px and up) ---------- */
/* grid and flex children may shrink below their content width */
.hero-grid > *, .page-hero-grid > *, .head-split > *, .split > *, .demo-grid > *, .validation > *,
.multi > *, .waffle-block > *, .region-top > *, .journey > *, .shift > *, .footprint > *, .cta-band-inner > *,
.partners > *, .limits-head > *, .limits-cols > *, .case-panel > * { min-width: 0; }
.viz-host[data-viz="flow"] canvas { width: 100%; height: 100%; }
h1, h2, h3, h4, p, li, blockquote { overflow-wrap: break-word; }
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .hero-title { font-size: 42px; }
  .page-title, .demo-page .page-title { font-size: 38px; }
  .h2 { font-size: 34px; }
  .h3 { font-size: 26px; }
  .hero-stats { gap: 18px 14px; }
  .stat-num { font-size: 28px; }
  .hero-visual { grid-template-rows: 120px 90px 120px; gap: 8px; }
  .hero-partners img { height: 30px; }
  .hero-partners img.logo-iatp { height: 16px; }
  .wordmark { font-size: 21px; }
  .btn { padding: 14px 20px; white-space: normal; text-align: center; }
  .pop-canvas-wrap { min-height: 280px; }
  .pop-readout { left: 12px; bottom: 12px; padding: 10px 12px; }
  .pop-readout-num { font-size: 30px; }
  .seg { flex: 1 1 100%; }
  .versus-card, .pillar, .step, .usecase, .limit3, .format, .principle, .host, .bio, .trust-card, .science-card, .reach-item, .panel3 article, .real3 article, .security-grid li { padding: 22px 18px; }
  .archetype-body { padding: 20px 18px 24px; }
  .case-body { padding: 24px 18px; }
  .case-findings li { font-size: 14px; }
  .journey { padding: 22px 16px; }
  .journey-stages { gap: 4px; }
  .journey-stages li { font-size: 9.5px; padding: 8px 1px; }
  .ref-market, .limits, .security, .demo-form { padding: 22px 16px; }
  .ref-stats .stat-num { font-size: 34px; }
  .bench-num { font-size: 42px; }
  .latent-col { padding: 20px 16px; }
  .viz-frame { padding: 12px 8px; border-radius: 18px; }
  .viz-card { padding: 12px 8px 8px; border-radius: 18px; }
  .viz-host[data-viz="flow"], .viz-frame-tall .viz-host[data-viz="flow"] { height: 260px; }
  .partner { padding: 22px 18px; }
  .partner-logo { height: 38px; }
  .people li { grid-template-columns: 52px 1fr; gap: 12px; }
  .people img { width: 52px; height: 52px; }
  .explore-card > div { padding: 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .expect li { grid-template-columns: 34px 1fr; }
  .crumbs { flex-wrap: wrap; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-index { border-radius: var(--radius-lg); border: 1px solid var(--line-dark); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); padding: 26px; }
.faq-index-title { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--crimson-hi); margin-bottom: 14px; }
.faq-index a, .faq-side a:not(.btn) { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; border-top: 1px solid var(--line-dark); padding: 14px 2px; color: var(--text-on-dark); font-weight: 600; transition: color .2s; }
.faq-index a:hover { color: var(--crimson-hi); }
.faq-index b { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--muted-on-dark); }

.faq-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-side { position: sticky; top: 100px; }
.faq-side-title { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.faq-side a:not(.btn) { color: var(--text); border-top-color: var(--line); font-size: 15px; }
.faq-side a:not(.btn):hover { color: var(--crimson); }
.faq-side b { font-weight: 700; font-size: 12px; color: var(--muted); background: var(--sand-2); border-radius: 999px; padding: 2px 9px; }
.faq-side .btn { margin-top: 20px; width: 100%; }
.faq-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.faq-group { scroll-margin-top: 100px; }
.faq-group-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 38px); margin-bottom: 16px; }
.faq-item { border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); margin-bottom: 10px; transition: box-shadow .25s, border-color .25s; }
.faq-item[open] { border-color: rgba(217, 49, 75, .35); box-shadow: 0 24px 40px -32px rgba(46, 26, 71, .5); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; font-weight: 700; font-size: 17px; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--crimson); }
.faq-toggle { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sand); border: 1px solid var(--line); transition: background .25s, transform .3s var(--ease); }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), background .25s; }
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-toggle { background: var(--crimson); border-color: var(--crimson); transform: rotate(180deg); }
.faq-item[open] .faq-toggle::before, .faq-item[open] .faq-toggle::after { background: #fff; }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-a { padding: 0 22px 22px; color: var(--muted); font-size: 16px; max-width: 760px; }
.faq-item[open] .faq-a { animation: faqIn .35s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-side { display: none; }
}
@media (max-width: 380px) {
  .faq-index { padding: 18px 16px; }
  .faq-item summary { padding: 16px; font-size: 15.5px; gap: 12px; }
  .faq-a { padding: 0 16px 18px; font-size: 15px; }
}

/* Navbar: switch to the menu button before the links run out of room */
@media (max-width: 1240px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header.menu-open { background: rgba(14, 10, 20, .97); }
}
@media (min-width: 1241px) { .mobile-nav { display: none !important; } }
@media (max-width: 380px) {
  .viz-venn-title { font-size: 19px; }
  .viz-venn-item { font-size: 13.5px; }
  .viz-venn-sub { font-size: 11px; }
}

/* new photography framing */
.rm img[src*="medina-arch"], .explore-card img[src*="medina-arch"] { object-position: 50% 62%; }
.rm img[src*="medina-street"], .explore-card img[src*="medina-street"], .case-media img[src*="medina-street"] { object-position: 50% 42%; }
.explore-card img[src*="teens-phones"] { object-position: 50% 50%; }
.page-hero-photo .page-hero-bg[src*="souk-market"] { object-position: 50% 60%; }

/* ==========================================================================
   HERO: population map with a floating question card
   The visual is capped to the viewport height so the map and the card
   are visible without scrolling. The card floats over the empty
   South Atlantic, so every lit North African country stays visible.
   ========================================================================== */
.hero { padding-top: calc(76px + clamp(28px, 3.5vw, 52px)); }
.hero-visual.hero-visual-map {
  display: block; position: relative; max-width: none;
  height: clamp(440px, calc(100svh - 170px), 640px);
}
.hero-map { position: absolute; inset: 0; overflow: hidden; }
.hero-map-base { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.hero-map-area { position: absolute; inset: 0; pointer-events: none; }
.hero-visual-map .answer-card {
  position: absolute; left: clamp(-56px, -3vw, -12px); bottom: 5%; top: auto; right: auto; z-index: 2;
  width: 272px; padding: 16px 18px; animation: none;
}
.answer-head { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 8px; }
/* bars grow with transform (compositor) instead of width (layout every frame) */
.answer-card .bar i { width: 100%; transform-origin: left center; transform: scaleX(var(--s, 1)); transition: transform .9s var(--ease); will-change: transform; }
.hero-seg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.hero-seg-chips button {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--muted-on-dark);
  transition: color .2s, background .2s, border-color .2s;
}
.hero-seg-chips button:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.hero-seg-chips button.is-active { color: #fff; background: rgba(217, 49, 75, .28); border-color: var(--crimson-hi); }
.map-key { position: absolute; right: 0; bottom: 2%; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-on-dark); }
.map-key i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 238, 232, .45); box-shadow: 14px 0 0 var(--crimson-hi); margin-right: 14px; }
@media (min-width: 1081px) {
  .hero-grid:has(.hero-visual-map) { grid-template-columns: 1fr 1.05fr; align-items: start; }
}
@media (max-width: 1080px) {
  .hero-visual.hero-visual-map { height: 560px; max-width: 640px; margin: 24px auto 0; }
}
@media (max-width: 640px) {
  .hero-visual.hero-visual-map { height: auto; display: flex; flex-direction: column; gap: 12px; }
  .hero-map-area { position: relative; inset: auto; width: 100%; aspect-ratio: 1.08 / 1; }
  .hero-visual-map .answer-card { display: block; position: relative; left: auto; bottom: auto; width: 100%; }
  .map-key { position: static; justify-content: center; order: -1; }
}

/* ---------- Client logo ---------- */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo img { height: 27px; width: auto; }
.brand-logo-lg img { height: 38px; }
@media (max-width: 380px) { .brand-logo img { height: 23px; } }

/* ---------- Partner links ---------- */
.partner-name { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease), color .2s; }
.partner-name:hover, .partner-name:focus-visible { background-size: 100% 2px; color: var(--crimson-hi); }
.partner-logo-link { display: inline-flex; line-height: 0; border-radius: 6px; transition: opacity .2s; }
.partner-logo-link:hover { opacity: .75; }
.partner-site { margin-top: 18px; align-self: flex-start; }

/* ---------- Hero map (8790c06 look): lit countries, city ripple, answer sparks ---------- */
.hero-lit {
  position: absolute; display: block; pointer-events: none; opacity: 0;
  transition: opacity .7s ease;             /* the previous country fades out while the next lights up */
}
.hero-lit.is-on { opacity: 1; transition: opacity .15s ease; }
.hero-pulse { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; --r: 72px; }
.hero-pulse i {
  position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%; border: 1.5px solid rgba(239, 79, 103, .45); opacity: 0; transform: scale(0);
  animation: heroPulse 1.3s linear infinite;
}
.hero-pulse i + i { animation-delay: -.65s; }
.hero-pulse b { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #ef4f67; }
@keyframes heroPulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.hero-spark {
  position: absolute; left: -1.7px; top: -1.7px; width: 3.4px; height: 3.4px; border-radius: 50%;
  background: #fff; opacity: 0; pointer-events: none;
}
.hero-map.is-paused .hero-pulse i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-pulse i { animation: none; opacity: 0; }
  .hero-lit { transition: none; }
}

/* ---------- Population readout as words ---------- */
.pop-readout-num.is-text { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.1; }

/* Hero card: no backdrop blur over the animated map (re-blurring every frame made it lag) */
.hero-visual-map .answer-card.glass {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(22, 16, 31, 0.94);
}
.pop-readout { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 10, 20, 0.9); }
/* hero map: static points underneath, animated layer on top */
.hero-map .hero-map-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-pulse.is-small b { display: none; }

/* ---------- Direct contact (footer and demo page) ---------- */
.contact-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text-on-dark); text-decoration: none; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.contact-link .ic { width: 17px; height: 17px; color: var(--crimson-hi); flex: none; }
.contact-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.footer-contact-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; }
.contact-tiles { list-style: none; margin: 28px 0 0; padding: 0; border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .05); overflow: hidden; }
.contact-tiles li + li { border-top: 1px solid var(--line-dark); }
.contact-tile { display: flex; align-items: center; gap: 16px; padding: 14px 20px; color: #fff; text-decoration: none; transition: background .2s; }
.contact-tile:hover { background: rgba(255, 255, 255, .06); }
.contact-tile:hover strong { color: var(--crimson-hi); }
.contact-tile:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: -2px; }
.contact-tile-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(239, 79, 103, .14); color: var(--crimson-hi); }
.contact-tile-ic .ic { width: 17px; height: 17px; }
.contact-tile-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-tile-txt small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted-on-dark); }
.contact-tile-txt strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; transition: color .2s; }
.contact-note { margin: 10px 0 0; font-size: 14px; color: var(--muted-on-dark); }
@media (max-width: 560px) {
  .contact-tiles { margin-top: 22px; }
  .contact-tile { padding: 11px 16px; gap: 12px; }
  .contact-tile-ic { width: 32px; height: 32px; }
  .contact-tile-txt strong { font-size: 15px; }
}
@media (max-width: 360px) {
  .demo-page { padding-top: calc(76px + 18px); }
  .demo-page .eyebrow { margin-bottom: 10px; }
  .demo-page .lede { font-size: 15px; }
  .contact-tile { padding: 11px 12px; gap: 10px; }
  .contact-tile-ic { width: 28px; height: 28px; }
  .contact-tile-txt strong { font-size: 14px; letter-spacing: -.01em; }
}
.form-status a { color: inherit; font-weight: 700; }
/* Thank-you page */
.thanks-next { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .04); }
.thanks-next .expect { margin-top: 18px; }
.thanks-next .expect li:first-child { border-top: 0; padding-top: 6px; }
.page-hero-copy .contact-tiles { max-width: 460px; }

/* Footer legal links */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { color: var(--muted-on-dark); text-decoration: none; font-size: 13px; font-weight: 600; }
.footer-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Consent checkbox in forms */
.field.field-check { flex-direction: row; align-items: flex-start; gap: 12px; margin: 4px 0 20px; }
.field.field-check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--crimson); box-shadow: none; }
.field.field-check label { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text); }
.field.field-check.has-error label { color: var(--crimson-lo); }
.field-check a, .form-legal a { color: var(--crimson-lo); font-weight: 700; }

/* Privacy policy */
.legal { max-width: 780px; min-width: 0; color: var(--text); }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin: 56px 0 16px; scroll-margin-top: 100px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--crimson); }
.legal a:not(.btn) { color: var(--crimson-lo); font-weight: 600; }
.legal code { font-size: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.legal-updated { font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.legal-summary { margin: 18px 0 8px; padding: 26px 28px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--crimson); }
.legal-summary-title { font-weight: 800; margin-bottom: 10px !important; }
.legal-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 6px 0 18px; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.legal-table th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--sand); }
.legal-table tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .legal-table { min-width: 560px; }
}

/* Cookie banner */
.consent-banner { position: fixed; z-index: 90; left: 20px; bottom: 20px; width: min(440px, calc(100vw - 40px)); padding: 22px 22px 18px; border-radius: var(--radius); background: #17111f; color: var(--text-on-dark); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.consent-banner.is-in { opacity: 1; transform: none; }
.consent-title { margin: 0 0 6px; font-weight: 800; font-size: 16px; color: #fff; }
.consent-text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted-on-dark); }
.consent-text a { color: #fff; font-weight: 700; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent-btn { flex: 1 1 auto; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid #fff; background: #fff; color: var(--ink); font: 700 14px/1 var(--font-sans); cursor: pointer; transition: background .2s, color .2s; }
.consent-btn:hover { background: transparent; color: #fff; }
.consent-btn:focus-visible, .consent-link:focus-visible, .consent-close:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: 3px; }
.consent-link { flex-basis: 100%; min-height: 36px; padding: 6px 0 0; border: 0; background: none; color: var(--muted-on-dark); font: 600 14px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-link:hover { color: #fff; }
@media (max-width: 560px) {
  .consent-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: none; transform: none; }
}

/* Cookie settings dialog */
.consent-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper); color: var(--text); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .6); }
.consent-dialog::backdrop { background: rgba(14, 10, 20, .6); backdrop-filter: blur(3px); }
.consent-form { position: relative; padding: clamp(22px, 4vw, 34px); }
.consent-form h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; margin: 0 40px 10px 0; }
.consent-form > p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.consent-form a { color: var(--crimson-lo); font-weight: 700; }
.consent-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.consent-cat { padding: 16px 0; border-top: 1px solid var(--line); }
.consent-cat p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.consent-cat-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: default; }
label.consent-cat-head { cursor: pointer; }
.consent-always { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.consent-switch { position: relative; flex: none; width: 46px; height: 26px; }
.consent-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.consent-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cfc6d3; transition: background .2s; pointer-events: none; }
.consent-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.consent-switch input:checked + span { background: var(--crimson); }
.consent-switch input:checked + span::after { transform: translateX(20px); }
.consent-switch input:focus-visible + span { outline: 2px solid var(--crimson); outline-offset: 3px; }
.consent-dialog .consent-actions { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.consent-dialog .consent-btn { border-color: var(--ink); background: var(--ink); color: #fff; }
.consent-dialog .consent-btn:hover { background: transparent; color: var(--ink); }