/* ==========================================================================
   AOS — Premium Government-Ready Design System
   One source of truth for the public website's visual language. Inherits the
   same brand primitives (Fraunces display, Space Grotesk UI, near-black canvas,
   signal-lime accent) used by the secure platform so both surfaces feel like
   one company. Loaded by every marketing page; header/footer are injected from
   site.js so navigation never drifts between pages.

   V2: Upgraded to premium government-ready digital experience with stronger
   brand presence, controlled variety of section types, premium mockup framing,
   subtle motion and 3D depth, and institutional proof patterns.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Canvas + surfaces */
  --ink: #080b12;
  --ink-2: #0b0f1a;
  --panel: #0f1524;
  --panel-2: #131a2c;
  --panel-3: #182240;
  --line: #1e2740;
  --line-soft: #172038;

  /* Ink + text */
  --fg: #eef1f7;
  --muted: #97a3bd;
  --muted-2: #6a7796;

  /* Brand signal */
  --accent: #c8f24a;
  --accent-dim: #9fbf3c;
  --accent-ink: #0a1005;
  --blue: #6e8bff;
  --teal: #4dd9c0;
  --ok: #57d9a3;

  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  --shadow-soft: 0 20px 50px -30px rgba(0, 0, 0, 0.8);
  --shadow-premium: 0 40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 40px -20px rgba(200, 242, 74, 0.08);

  /* Spacing scale (4px base) — the single rhythm used across both surfaces */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Premium section spacing — 64-88px related, 88-112px chapter breaks */
  --section-gap: clamp(4rem, 6vw, 5.5rem);
  --section-gap-lg: clamp(5.5rem, 7.5vw, 7rem);
  --section-gap-md: clamp(3.25rem, 5vw, 4.75rem);
  --section-gap-sm: clamp(2.5rem, 4vw, 3.75rem);

  --sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display: "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --maxw: 1320px;
  --maxw-wide: 1640px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Atmosphere */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(58% 52% at 82% 4%, rgba(200, 242, 74, 0.10), transparent 60%),
    radial-gradient(52% 58% at 4% 96%, rgba(110, 139, 255, 0.10), transparent 55%),
    radial-gradient(90% 90% at 50% 50%, #0a0e18, #05070c 92%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.4rem); }
.wrap.wide, .wide { max-width: var(--maxw-wide); }

/* --------------------------------------------------------------- Header --- */
header.site {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(18px) saturate(1.2);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s ease, box-shadow .3s ease;
}
/* UPGRADED: Header height 72→92px for stronger brand presence */
.site__in { display: flex; align-items: center; justify-content: space-between; height: 92px; gap: 1.4rem; transition: height .25s ease; }
.logo { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
/* UPGRADED: Logo symbol 32→56px for stronger brand presence */
.logo svg, .logo img { width: 56px; height: 56px; flex: 0 0 auto; }
.logo__txt { display: flex; flex-direction: column; gap: 0.22rem; line-height: 1; }
/* UPGRADED: AOS wordmark 1.08rem→1.8rem (≈29px) */
.logo b { font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; }
/* UPGRADED: Subtitle 0.62rem→0.85rem (≈14px) */
.logo span { color: var(--muted-2); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Primary navigation — refined for a premium, executive feel: a touch larger,
   medium weight, gently tracked, and vertically centred on the taller bar.
   The active page reads through weight, colour and a single hairline accent. */
.nav { display: flex; align-items: center; gap: 0.1rem; font-size: 0.95rem; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center; line-height: 1;
  padding: 0.62rem 0.95rem; border-radius: 10px;
  color: var(--muted); font-weight: 500; letter-spacing: 0.012em;
  transition: color .2s ease, background .2s ease;
}
.nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.nav a.active { color: var(--fg); font-weight: 600; }
.nav a.active::after {
  content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.28rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dim));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.nav-cta { display: flex; align-items: center; gap: 0.6rem; }
/* Navigation CTAs sit slightly heavier and larger than the default small button
   so "Enter Platform" and "Request Demo" carry the same confident weight as the
   links beside them. */
.nav-cta .btn--sm { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.012em; padding: 0.56rem 1rem; }
/* The dropdown-only CTA block is hidden while the nav is inline on desktop. */
.nav .nav__cta { display: none; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 10px; width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 940px) {
  .nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
  /* Collapse the top bar to just the logo + menu; the actions move inside. */
  .nav-cta__inline { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 0.6rem;
  }
  .nav.open a { padding: 0.85rem 0.95rem; }
  /* Underline accent reads awkwardly when links stack — use a left rule instead. */
  .nav.open a.active::after {
    left: 0; right: auto; top: 0.65rem; bottom: 0.65rem; width: 2px; height: auto;
  }
  /* Full-width primary actions at the foot of the open menu. */
  .nav.open .nav__cta {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-top: 0.5rem; padding: 0.6rem 0.35rem 0.2rem;
    border-top: 1px solid var(--line-soft);
  }
  .nav.open .nav__cta .btn { width: 100%; justify-content: center; padding: 0.85rem 1rem; }
  /* .nav a sets a muted link colour that would otherwise win over .btn--*. */
  .nav.open .nav__cta .btn--primary { color: var(--accent-ink); background: var(--accent); }
  .nav.open .nav__cta .btn--ghost { color: var(--fg); }
}

/* Phone header — a controlled bar, not a squeezed desktop nav. The brand mark
   keeps its subtitle only where there is room; on phones it collapses to the
   AOS wordmark so the bar reads: logo · Request Demo · menu. The bar is shorter
   and condenses further once the visitor scrolls. */
@media (max-width: 640px) {
  .site__in { height: 62px; gap: 0.55rem; }
  header.site.scrolled .site__in { height: 54px; }
  header.site.scrolled { box-shadow: 0 10px 30px -24px rgba(0,0,0,0.9); }
  .logo { gap: 0.55rem; }
  /* UPGRADED: Mobile logo 34-38px range */
  .logo svg, .logo img { width: 36px; height: 36px; }
  .logo span { display: none; }
  .logo b { font-size: 1.25rem; }
  .nav-cta { gap: 0.45rem; }
  .nav-cta__demo.btn--sm { font-size: 0.82rem; padding: 0.5rem 0.85rem; min-height: 44px; }
  .menu-btn { width: 44px; height: 44px; }
}
/* Tablet: Logo 40-44px */
@media (min-width: 641px) and (max-width: 940px) {
  .logo svg, .logo img { width: 42px; height: 42px; }
  .logo b { font-size: 1.4rem; }
  .logo span { font-size: 0.7rem; }
  .site__in { height: 78px; }
}

/* --------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-weight: 600; font-size: 0.92rem;
  padding: 0.72rem 1.25rem; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s, background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #d6ff5e; }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--muted-2); background: var(--panel); }
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.btn--lg { padding: 0.9rem 1.5rem; font-size: 1rem; }

/* --------------------------------------------------------------- Type ----- */
/* GLOBAL INTER TYPOGRAPHY SYSTEM:
   Inter used everywhere — hero headlines, section headings, body, nav, cards, buttons.
   Microsoft/Netflix principles: clear, structured, bold, confident, product-first. */
h1, h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
h3 { font-family: var(--sans); font-weight: 650; letter-spacing: -0.015em; line-height: 1.15; }
.eyebrow { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-dim); font-weight: 600; margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); line-height: 1.6; max-width: 680px; }
em { font-style: italic; color: var(--muted); }

/* Operational heading — strong sans for data/capability sections */
.h-operational { font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }
/* Chapter heading — larger treatment for major page divisions */
.h-chapter { font-family: var(--sans); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(2rem, 3.8vw, 3.8rem); }

/* --------------------------------------------------------------- Sections - */
/* Premium spacing: 64-88px related sections, 88-112px chapter breaks */
section { padding: var(--section-gap) 0; }
.sec-head { max-width: 62ch; margin-bottom: 2.2rem; }
.sec-head h2 { font-size: clamp(2rem, 3.8vw, 3.8rem); font-weight: 680; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 1rem; }
.sec-head p { color: var(--muted); margin: 0; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.6; max-width: 680px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* In-section sub-header — a lighter heading used where two related blocks are
   merged into one premium section, so a second idea can open without the weight
   (or the vertical cost) of a whole new section. */
.sub-head { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.8rem; }
.sub-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 0.8rem; }
/* A proof/stats strip folded into a content section sits a little apart from
   the block above it. */
.stats-panel { margin-top: clamp(2rem, 4vw, 3.5rem); }

@media (max-width: 768px) {
  section { padding: var(--section-gap-md) 0; }
}
@media (max-width: 480px) {
  section { padding: var(--section-gap-sm) 0; }
}

/* --------------------------------------------------------------- Hero ----- */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }
/* Hero headline: Inter 700, -0.035em tracking, ~1.02 line-height */
.hero h1 { font-size: clamp(3rem, 5.2vw, 5.6rem); font-weight: 720; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 1.5rem; max-width: 17ch; }
.hero .lead { max-width: 580px; margin: 0 0 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.pill {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.42rem 0.85rem;
}

/* --------------------------------------------------------------- Cards ---- */
.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--muted-2); }
.card h3 { font-size: 1.3rem; margin: 0.2rem 0 0.6rem; }
.card p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.card .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); font-size: 1.2rem; margin-bottom: 1rem;
}
.card .ico svg { width: 23px; height: 23px; }
.card:hover .ico { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.tag { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dim); font-weight: 600; }
.soon {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-radius: 999px; padding: 0.15rem 0.55rem; margin-left: 0.5rem; vertical-align: middle;
}

/* Feature list */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.checks li { display: flex; gap: 0.7rem; color: var(--muted); }
.checks li::before { content: "→"; color: var(--accent); font-weight: 700; }

/* Panel / callout */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3rem);
}
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 0.8rem; }
.cta-band p { color: var(--muted); margin: 0 0 1.8rem; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; text-align: center; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat .n { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); color: var(--fg); }
.stat .l { color: var(--muted-2); font-size: 0.82rem; letter-spacing: 0.06em; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price { display: flex; flex-direction: column; }
.price.feat { border-color: var(--accent-dim); box-shadow: var(--shadow-soft); }
.price .amt { font-family: var(--display); font-size: 2.4rem; margin: 0.4rem 0; }
.price .amt small { font-size: 0.9rem; color: var(--muted-2); font-family: var(--sans); }
.price .checks { margin: 1.2rem 0 1.6rem; }
.price .btn { margin-top: auto; justify-content: center; }
/* Premium pricing polish */
.price { transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s; }
.price:hover { transform: translateY(-6px); border-color: var(--muted-2); box-shadow: var(--shadow); }
.price.feat { position: relative; transform: translateY(-6px); }
.price.feat:hover { transform: translateY(-12px); }
.price .btn { padding: 0.85rem 1.4rem; font-size: 1rem; }
.price-note { text-align: center; color: var(--muted-2); font-size: 0.9rem; margin: 1.4rem 0 0; }

/* Homepage pricing teaser — a compact three-tier summary that answers "what's
   the commitment?" in one glance and hands off to the full pricing page,
   rather than dropping the whole comparison table into the story. */
.price-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 820px) { .price-teaser { grid-template-columns: 1fr; } }
.price-teaser .tier { display: flex; flex-direction: column; }
.price-teaser .tier.feat { border-color: var(--accent-dim); box-shadow: var(--shadow-soft); }
.price-teaser .tier h3 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
.price-teaser .tier .fit { color: var(--muted); font-size: 0.92rem; margin: 0 0 1rem; flex: 1; }
.price-teaser .tier .from { font-family: var(--display); font-size: 1.05rem; color: var(--fg); margin: 0 0 0.2rem; }
.price-teaser .tier .from small { display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--muted-2); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.5rem; }
.price-teaser .tier .card-link { margin-top: 0.4rem; }

/* Forward cue — a quiet "→ next question" link that closes a beat and pulls the
   visitor into the following section, so the homepage reads as one journey. */
.beat-next { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; color: var(--accent-dim); font-weight: 600; font-size: 0.9rem; }
.beat-next:hover { color: var(--accent); }
.beat-next::after { content: "↓"; transition: transform .2s ease; }
.beat-next:hover::after { transform: translateY(2px); }

/* Centered next-step row — gives every homepage beat one clear commercial
   action (learn more / explore / request a demo) so the story always moves
   the visitor forward. */
.beat-cta { margin-top: clamp(1.4rem, 3.2vw, 2.2rem); display: flex; justify-content: center; }
.beat-cta .card-link { font-size: 0.98rem; }

/* Value-before-pricing band */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .value-grid { grid-template-columns: 1fr; } }
.value-cell { border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--panel); }
.value-cell b { display: block; font-size: 1rem; margin-bottom: 0.3rem; }
.value-cell span { color: var(--muted); font-size: 0.88rem; }

/* Comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 16px; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 620px; }
.compare th, .compare td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.compare thead th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.compare thead th.feat, .compare td.feat { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td.ck { text-align: center; color: var(--accent); font-weight: 700; }
.compare td.no { text-align: center; color: var(--muted-2); }
.compare td:first-child { color: var(--fg); }

/* Pricing calculator */
.calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.4rem; align-items: stretch; }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
.calc-result { border: 1px solid var(--accent-dim); border-radius: 16px; padding: 1.6rem; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); display: flex; flex-direction: column; justify-content: center; }
.calc-result .rec-plan { font-family: var(--display); font-size: 1.9rem; margin: 0.2rem 0 0.2rem; }
.calc-result .rec-amt { font-size: 1.15rem; color: var(--muted); }
.calc-result .rec-amt b { color: var(--fg); font-size: 1.5rem; }
.calc-result .rec-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.92rem; }
.calc-result .rec-row:last-of-type { border-bottom: none; }

/* FAQ */
.faq { display: grid; gap: 0.7rem; max-width: 860px; }
.faq details { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--muted); font-size: 0.92rem; }


/* Forms */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.82rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--fg); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 11px; padding: 0.75rem 0.9rem; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field textarea { min-height: 120px; resize: vertical; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }

/* Prose (About / Security long copy) */
.prose { max-width: 68ch; }
.prose p { color: var(--muted); }
.prose h2 { font-size: 1.6rem; margin: 2.2rem 0 0.8rem; }

/* --------------------------------------------------------------- Footer --- */
footer.site {
  border-top: 1px solid var(--line-soft); margin-top: 1.4rem;
  padding: clamp(2rem, 4vw, 3rem) 0 2rem; color: var(--muted);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 1rem; }
.foot-grid a { display: block; color: var(--muted); padding: 0.28rem 0; font-size: 0.9rem; }
.foot-grid a:hover { color: var(--fg); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); font-size: 0.82rem; color: var(--muted-2); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Enterprise refinement layer
   Wider heroes, product screenshots, diagrams, flows and richer solution
   blocks — layered on the same brand primitives above.
   ========================================================================== */

/* --------------------------------------------------------- Split hero ----- */
.hero.hero--split { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero-split {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero-split .hero-copy h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); font-weight: 720; letter-spacing: -0.035em; line-height: 1.04; }
/* UPGRADED: Hero media takes ~55% of width for stronger visual balance */
.hero-media { position: relative; }
.hero-media .hero-stage,
.hero-media > .mock--float { max-width: 720px; margin-left: auto; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: 2.8rem; }
  .hero-media { order: 2; }
}

/* -------------------------------------------------- Product mockups ------- */
/* PREMIUM MOCKUP FRAME SYSTEM: Deep navy surface, glass effect, subtle teal/lime
   edge lighting, controlled shadow, slight depth. Strong contrast vs page bg. */
.mock {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--teal) 15%, var(--line));
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(168deg, #0c1525 0%, #080d18 100%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 0 rgba(77,217,192,0.06) inset,
    0 50px 110px -50px rgba(0,0,0,0.95),
    0 20px 50px -25px rgba(0,0,0,0.85),
    0 0 40px -20px rgba(200,242,74,0.08),
    0 0 60px -30px rgba(77,217,192,0.06);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s, box-shadow .45s;
}
.mock::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 40%);
  border-radius: 18px;
}
.mock:hover {
  transform: translateY(-8px) scale(1.005);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 0 rgba(77,217,192,0.08) inset,
    0 60px 130px -46px rgba(0,0,0,0.95),
    0 26px 64px -30px rgba(200,242,74,0.18),
    0 0 50px -20px rgba(200,242,74,0.12),
    0 0 70px -25px rgba(77,217,192,0.08);
}
.mock__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), #0a1020;
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 8%, var(--line));
  position: relative; z-index: 1;
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock__dot:nth-child(1) { background: #e5646e; opacity: .85; }
.mock__dot:nth-child(2) { background: #e9b949; opacity: .85; }
.mock__dot:nth-child(3) { background: var(--ok); opacity: .85; }
.mock__url {
  margin-left: 0.6rem; font-size: 0.72rem; color: var(--muted-2); letter-spacing: 0.02em;
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 0.24rem 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .5s ease;
}
.mock__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--ok); flex: none;
}
.mock__live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(87,217,163,0.5); animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87,217,163,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(87,217,163,0); }
}
.mock__body { display: block; background: var(--ink); position: relative; z-index: 1; }
.mock__body .mock__svg { width: 100%; height: auto; display: block; }
.mock--float { position: relative; }
.mock--float::after {
  content: ""; position: absolute; inset: auto -12% -22% -12%; height: 60%; z-index: -1;
  background: radial-gradient(60% 80% at 50% 0, rgba(200,242,74,0.14), transparent 70%);
  filter: blur(14px);
}
.mock-caption { margin: 1rem 0 0; font-size: 0.84rem; color: var(--muted-2); text-align: center; }

/* ------------------------------------------------ Rotating hero showcase --- */
/* One persistent premium browser frame; only the surface inside rotates. */
.hero-stage { position: relative; }
.hero-stage::after {
  content: ""; position: absolute; inset: auto -10% -20% -10%; height: 60%; z-index: -1;
  background: radial-gradient(60% 80% at 50% 0, rgba(200,242,74,0.15), transparent 70%);
  filter: blur(12px);
}
.hero-stage .mock { animation: heroFloat 8s ease-in-out infinite; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero-stage .mock:hover { animation-play-state: paused; }
.hero-screens { position: relative; aspect-ratio: 880 / 560; }
.hero-screen {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transform: translateX(16px) scale(0.992);
  transition: opacity .85s cubic-bezier(.4,0,.2,1), transform .85s cubic-bezier(.4,0,.2,1);
}
.hero-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero-screen .mock__svg { width: 100%; height: 100%; display: block; }
.hero-carousel__meta { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 1.1rem; }
.hero-dots { display: flex; gap: 0.4rem; }
.hero-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: none; background: var(--line); cursor: pointer; transition: background .2s, width .2s; }
.hero-dot:hover { background: var(--muted-2); }
.hero-dot.is-active { width: 22px; background: var(--accent); }
.hero-carousel__meta .mock-caption { margin: 0; min-height: 3em; display: flex; flex-direction: column; gap: 0.2rem; }
.hero-carousel__meta .mock-caption strong { color: var(--fg); font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.hero-carousel__meta .mock-caption span { color: var(--muted); font-size: 0.88rem; }

/* Subtle motion inside every surface — charts draw, bars grow, rings sweep,
   cards fade in, KPIs count up (JS) and status badges pulse. */
.mock__svg .m-area { animation: mArea 1s ease .12s both; }
@keyframes mArea { from { opacity: 0; } to { opacity: 0.10; } }
.mock__svg .m-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: mLine 1.4s ease .1s forwards; }
@keyframes mLine { to { stroke-dashoffset: 0; } }
.mock__svg .m-dot { transform-box: fill-box; transform-origin: center; animation: mDot .45s ease 1.15s both; }
@keyframes mDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.mock__svg .m-bar { transform-box: fill-box; transform-origin: center bottom; animation: mBar .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes mBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mock__svg .m-prog { transform-box: fill-box; transform-origin: left center; animation: mProg .9s cubic-bezier(.2,.8,.3,1) both; }
@keyframes mProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mock__svg .m-ring { stroke-dashoffset: var(--dash); animation: mRing 1.15s cubic-bezier(.4,0,.2,1) .1s both; }
@keyframes mRing { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }
.mock__svg .m-fade { animation: mFade .6s ease both; }
@keyframes mFade { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.mock__svg .m-pulse { transform-box: fill-box; transform-origin: center; animation: mPulse 1.9s ease-in-out infinite; }
@keyframes mPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

@media (prefers-reduced-motion: reduce) {
  .hero-screen.is-active { transition: none; }
  .hero-stage .mock { animation: none; }
  .mock__live-dot { animation: none; }
  .mock__svg * { animation: none !important; }
  .mock__svg .m-line, .mock__svg .m-ring { stroke-dashoffset: 0; }
  .mock__svg .m-bar, .mock__svg .m-prog, .mock__svg .m-fade, .mock__svg .m-dot { transform: none; opacity: 1; }
  .mock__svg .m-area { opacity: 0.10; }
}

/* -------------------------------------------- Platform in Action --------- */
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 960px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .showcase { grid-template-columns: 1fr; } }
.shot { display: flex; flex-direction: column; gap: 0.7rem; }
.shot h3 { font-size: 1.08rem; margin: 0; }
.shot p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.shot .shot-tag { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dim); font-weight: 600; }

/* ------------------------------------------------- Platform journey ------- */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem 1.1rem; position: relative; }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .journey { grid-template-columns: 1fr; } }
.jnode {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.1rem 1rem; transition: transform .25s, border-color .25s, background .25s;
}
.jnode:hover { transform: translateY(-4px); border-color: var(--accent-dim); background: var(--panel-2); }
.jnode .jn { font-family: var(--display); font-size: 0.9rem; color: var(--accent); }
.jnode h4 { font-family: var(--sans); font-size: 0.98rem; margin: 0.5rem 0 0.3rem; font-weight: 600; letter-spacing: 0; }
.jnode p { color: var(--muted); font-size: 0.82rem; margin: 0; }
.jnode .jn-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: 0.6rem; }
.jnode .jn-ico svg { width: 19px; height: 19px; }

/* ---------------------------------------------------- Zig-zag rows -------- */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; margin: clamp(1.8rem, 4vw, 3rem) 0;
}
.feature-row:nth-child(even) .feature-media { order: -1; }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .feature-row .feature-media, .feature-row:nth-child(even) .feature-media { order: 0; }
}
.feature-row h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.6rem 0 0.9rem; }
.feature-row p { color: var(--muted); margin: 0 0 1.2rem; }

/* ----------------------------------------------------- Process flow ------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
@media (max-width: 860px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }
.flow-step { position: relative; padding-top: 0.4rem; }
.flow-step .num {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.15rem; color: var(--accent-ink);
  background: var(--accent); margin-bottom: 0.9rem;
}
.flow-step h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; letter-spacing: 0; }
.flow-step p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* --------------------------------------------------- Definition blocks ---- */
.deflist { display: grid; gap: 1rem; }
.deflist .def { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.deflist .def .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.deflist .def .ico svg { width: 22px; height: 22px; }
.deflist .def h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0.2rem 0 0.25rem; letter-spacing: 0; }
.deflist .def p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* Chip list */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: 0.82rem; color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem;
}

/* Outcome stat strip */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 700px) { .outcomes { grid-template-columns: 1fr; } }
.outcome { border-left: 2px solid var(--accent-dim); padding-left: 1.1rem; }
.outcome .n { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--fg); line-height: 1; }
.outcome .l { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }

/* --------------------------------------------------- Security diagrams ---- */
.diagram {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.8rem);
}
.arch { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.4rem; align-items: stretch; }
@media (max-width: 780px) { .arch { grid-template-columns: 1fr; } }
.arch-col { display: grid; gap: 0.9rem; }
.arch-box {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem;
}
.arch-box.secure { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.arch-box h4 { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: 0; display: flex; align-items: center; gap: 0.5rem; }
.arch-box p { color: var(--muted); font-size: 0.82rem; margin: 0; }
.arch-box .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.arch-box .dot.blue { background: var(--blue); }
.arch-mid { display: grid; place-items: center; color: var(--muted-2); }
.arch-mid .bar { width: 1px; background: var(--line); flex: 1; }
.arch-mid svg { width: 30px; height: 30px; }
@media (max-width: 780px) { .arch-mid { transform: rotate(90deg); } }

/* Layered flow (auth / permission steps) */
.steps-vert { display: grid; gap: 0; }
.steps-vert .sv {
  display: grid; grid-template-columns: 34px 1fr; gap: 1rem; position: relative; padding-bottom: 1.4rem;
}
.steps-vert .sv:not(:last-child)::before {
  content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line);
}
.steps-vert .sv .mark {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: var(--panel); border: 1px solid var(--accent-dim); color: var(--accent); font-size: 0.85rem; font-weight: 700;
}
.steps-vert .sv h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0.3rem 0 0.3rem; letter-spacing: 0; }
.steps-vert .sv p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Trust / compliance badges */
.badges { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.badge {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 1rem;
  font-size: 0.85rem; color: var(--fg); transition: border-color .25s, transform .25s;
}
.badge:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.badge .ico { color: var(--accent); display: grid; place-items: center; }
.badge .ico svg { width: 20px; height: 20px; }
.badge small { display: block; color: var(--muted-2); font-size: 0.72rem; }

/* ----------------------------------------------- Two-column page split ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2.2rem; } }
.split--form { grid-template-columns: 1.05fr 1fr; }

/* Icon nudge on hover (used on cards/def blocks) */
.card .ico svg, .deflist .def .ico svg { transition: transform .25s; }
.card:hover .ico svg, .deflist .def:hover .ico svg { transform: translateY(-2px); }

/* Shot / screenshot lift */
.shot .mock { transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s; }

/* Performance — defer rendering work for product screenshots that are still off
   screen. The browser paints each mockup only as it approaches the viewport and
   remembers its real size, so a screenshot-heavy page stays smooth on load and
   scroll. The animated hero stage is deliberately excluded. */
.shot .mock, .feature-row .feature-media .mock, .split .feature-media .mock {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Section intro helper */
.sec-head.wide-head { max-width: 72ch; }
.count[data-count] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Contact — enterprise engagement centre
   The public contact surface behaves like the start of an onboarding journey:
   the visitor first chooses why they're reaching out, then a focused, relevant
   form appears. Left rail carries trust; a trust strip closes the page.
   ========================================================================== */

/* "I want to…" enquiry chooser */
.enquiry-head { margin: 0 0 1.1rem; }
.enquiry-head .eyebrow { margin: 0 0 0.5rem; }
.enquiry-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }

.enquiry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (max-width: 520px) { .enquiry-grid { grid-template-columns: 1fr; } }
.enquiry-card {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 0.9rem 1rem; cursor: pointer; color: var(--fg); font: inherit;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, background .2s;
}
.enquiry-card:hover { transform: translateY(-3px); border-color: var(--muted-2); }
.enquiry-card .ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); transition: background .2s, color .2s;
}
.enquiry-card .ico svg { width: 20px; height: 20px; }
.enquiry-card b { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.005em; line-height: 1.2; }
.enquiry-card.is-selected {
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.enquiry-card.is-selected .ico { background: var(--accent); color: var(--accent-ink); }

/* Selected-enquiry header above the smart form */
.enquiry-active {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 1.3rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-soft);
}
.enquiry-active .lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.enquiry-active .val { font-family: var(--display); font-size: 1.35rem; margin: 0.2rem 0 0; }
.link-btn { background: none; border: none; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0; white-space: nowrap; }
.link-btn:hover { text-decoration: underline; }

/* Smart form — two-column auto-flow; hidden fields drop out cleanly */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid .field[hidden] { display: none; }

/* Left engagement rail blocks */
.engage-rail { display: grid; gap: 1.9rem; align-content: start; }
.engage-rail h3 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin: 0 0 1rem; }
.response-note {
  display: flex; align-items: center; gap: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  border-radius: 14px; padding: 1rem 1.15rem;
}
.response-note .ico { flex: none; color: var(--accent); display: grid; place-items: center; }
.response-note .ico svg { width: 22px; height: 22px; }
.response-note b { display: block; font-size: 0.98rem; }
.response-note span { color: var(--muted); font-size: 0.86rem; }
.confidential { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Enterprise trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-cell { text-align: center; padding: 1.4rem 1rem; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); transition: border-color .25s, transform .25s; }
.trust-cell:hover { border-color: var(--accent-dim); transform: translateY(-3px); }
.trust-cell .ico { width: 42px; height: 42px; margin: 0 auto 0.8rem; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.trust-cell .ico svg { width: 22px; height: 22px; }
.trust-cell b { display: block; font-size: 0.92rem; }
.trust-cell span { display: block; color: var(--muted-2); font-size: 0.78rem; margin-top: 0.3rem; }

/* ============================================================ Mobile-first ==
   Phone-scoped refinements only — tablet and desktop layouts above 620px are
   left untouched. Goal: a shorter, more intentional homepage that answers
   "what is AOS" fast, with the longest sections turned into edge-to-edge
   swipe carousels instead of tall vertical stacks.
   ========================================================================== */

/* The swipe cue is a mobile-only affordance; hidden by default. */
.m-swipe-cue { display: none; }

@media (max-width: 620px) {
  /* Tighter vertical rhythm — recover the large gaps that made the page long. */
  section { padding: 2rem 0; }
  .sec-head { margin-bottom: 1.3rem; }
  .hero.hero--split { padding-top: 2rem; padding-bottom: 1.4rem; }
  .hero-split { gap: 1.4rem; }
  .grid { gap: 0.85rem; }
  .card { padding: 1.15rem; }

  /* Sharper hero — full-width, thumb-friendly actions and a trimmed pill row
     that keeps only the three qualifiers carrying the pitch. */
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .pill-row { margin-top: 1.6rem; }
  .pill-row .pill:nth-child(n+4) { display: none; }

  /* Edge-to-edge horizontal swipe carousels. The section's length becomes a
     sideways swipe: cards bleed to the screen edge and snap into place. */
  .m-swipe {
    display: flex; grid-template-columns: none;
    gap: 0.85rem; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2.4rem));
    padding: 0.4rem clamp(1.1rem, 4vw, 2.4rem) 1rem;
    scrollbar-width: none;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { scroll-snap-align: start; flex: 0 0 82%; min-width: 0; }
  /* The ten journey nodes are compact, so show two-and-a-bit per screen. */
  .journey.m-swipe > * { flex-basis: 60%; }

  /* Quiet "swipe" cue beneath each carousel. */
  .m-swipe-cue {
    display: block; margin: 0.7rem 0 0;
    font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted-2);
  }
}

/* ==========================================================================
   Pricing & Partners — enterprise value layer
   Extends the shared system to sell value before price: an executive strengths
   band, a "one system vs many" contrast, a grouped/interactive comparison, a
   smarter planning calculator, implementation + operational journeys, and the
   Partner-With-AOS ecosystem. Same brand primitives throughout.
   ========================================================================== */

/* ------------------------------------------------ Executive strengths band -- */
/* A denser, higher-contrast take on the value-grid: an icon, a strong claim
   and a one-line proof, so an executive grasps the differentiators in seconds. */
.strengths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .strengths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .strengths { grid-template-columns: 1fr; } }
.strength {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 15px; padding: 1.3rem 1.3rem 1.4rem;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
}
.strength::after {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; height: 70%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.strength:hover { transform: translateY(-5px); border-color: var(--accent-dim); box-shadow: var(--shadow-soft); }
.strength:hover::after { opacity: 1; }
.strength .ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); margin-bottom: 0.9rem;
}
.strength .ico svg { width: 21px; height: 21px; }
.strength b { display: block; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.strength span { color: var(--muted); font-size: 0.88rem; }

/* --------------------------------------------- One system vs many tools ----- */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 1.8rem); align-items: stretch; }
@media (max-width: 860px) { .vs { grid-template-columns: 1fr; gap: 1rem; } }
.vs-col { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.1rem); }
.vs-col .tag { display: block; margin-bottom: 0.4rem; }
.vs-col h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 1.1rem; }
.vs-col.old { background: var(--panel); }
.vs-col.new {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel-2)), var(--panel));
  border-color: var(--accent-dim); box-shadow: var(--shadow-soft);
}
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.vs-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; }
.vs-list li::before { flex: none; font-weight: 700; line-height: 1.5; }
.vs-col.old .vs-list li { color: var(--muted); }
.vs-col.old .vs-list li::before { content: "✕"; color: var(--muted-2); }
.vs-col.new .vs-list li { color: var(--fg); }
.vs-col.new .vs-list li::before { content: "✓"; color: var(--accent); }
.vs-mid { display: grid; place-items: center; }
.vs-badge {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.1rem; color: var(--fg);
  background: var(--ink-2); border: 1px solid var(--line);
}
@media (max-width: 860px) { .vs-mid { padding: 0.2rem 0; } }

/* --------------------------------------------- Grouped comparison table ----- */
/* Category rows split the matrix into enterprise groups so it reads at a glance;
   hovering a row lifts it, and the "Group" column is quietly highlighted. */
.compare thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.compare tbody tr.grp td {
  background: var(--ink-2); color: var(--accent-dim);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding-top: 1rem; padding-bottom: 0.55rem;
}
.compare tbody tr:not(.grp):hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.compare tbody tr:not(.grp):hover td.feat { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.compare td .muted { color: var(--muted-2); font-size: 0.82rem; }

/* Who-each-package-is-for chips inside the pricing cards. */
.price .fit { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.price .fit li {
  font-size: 0.74rem; color: var(--muted); background: var(--ink-2);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.28rem 0.7rem;
}
.price .plan-for { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.9rem; }

/* --------------------------------------------- Smarter planning calculator -- */
.calc-result { gap: 0; }
.calc-result .rec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.9rem; }
.calc-result .rec-plan { margin: 0.15rem 0 0; }
.calc-result .rec-conf {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap;
}
.calc-result .rec-group {
  margin: 1.1rem 0 0.2rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600; padding-top: 0.9rem; border-top: 1px solid var(--line-soft);
}
.calc-result .rec-row span:last-child { text-align: right; }
.calc-result .rec-row b { color: var(--fg); }
/* Values crossfade as the inputs change, so the panel feels alive and responsive. */
.calc-result .rec-plan, .calc-result .rec-row span, .calc-result .rec-amt b { transition: color .3s ease, opacity .25s ease; }
.calc-result.is-updating .rec-plan, .calc-result.is-updating .rec-row span:last-child { opacity: 0.35; }

/* ------------------------------------------------ Partner pathway cards ----- */
.pathway { display: flex; flex-direction: column; }
.pathway .who { color: var(--muted-2); font-size: 0.8rem; letter-spacing: 0.01em; margin: 0.15rem 0 0.7rem; }
.pathway p { margin: 0 0 0.6rem; }
.card-link {
  margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--accent); font-weight: 600; font-size: 0.9rem;
}
.card-link::after { content: "→"; transition: transform .2s ease; }
.card:hover .card-link::after { transform: translateX(4px); }

/* Ecosystem hub — one connected centre with the ways to engage around it. */
.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .eco { grid-template-columns: 1fr; } }
.eco-cell { border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.2rem; background: var(--panel); }
.eco-cell.center {
  grid-column: 2; text-align: center; display: grid; place-content: center; gap: 0.4rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--panel-2)), var(--panel));
  border-color: var(--accent-dim);
}
@media (max-width: 820px) { .eco-cell.center { grid-column: 1; } }
.eco-cell.center b { font-family: var(--display); font-size: 1.3rem; }
.eco-cell h4 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: 0; }
.eco-cell p { color: var(--muted); font-size: 0.85rem; margin: 0; }

@media (max-width: 620px) {
  /* Show the strengths band and journeys as edge-to-edge swipes on phones. */
  .strengths.m-swipe > *, .flow.m-swipe > * { flex-basis: 78%; }
}

/* ==========================================================================
   Join the AOS Ecosystem — the ecosystem-entry experience
   The front door into the wider AOS ecosystem: a strategic hero with a live
   ecosystem diagram, a filterable pathway system, a phased partnership journey,
   partnership levels, and a tailored application + confirmation flow. Built on
   the same brand primitives as the rest of the site.
   ========================================================================== */

/* --------------------------------------------------- Ecosystem diagram ----- */
.eco-diagram {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(0.8rem, 2.5vw, 1.6rem); box-shadow: var(--shadow-soft); margin: 0;
}
.eco-diagram::after {
  content: ""; position: absolute; inset: auto 10% -18% 10%; height: 55%; z-index: -1;
  background: radial-gradient(60% 80% at 50% 0, rgba(200,242,74,0.14), transparent 70%); filter: blur(12px);
}
.eco-svg { display: block; width: 100%; height: auto; }
.eco-svg .link { stroke: color-mix(in srgb, var(--blue) 55%, var(--line)); stroke-width: 1.4; opacity: 0.55; }
.eco-svg .ring { fill: none; stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 1.4; stroke-dasharray: 3 7; opacity: 0.8; }
.eco-svg .core { fill: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); stroke: var(--accent-dim); stroke-width: 1.6; }
.eco-svg .core-title { fill: var(--fg); font-family: var(--display); font-size: 25px; text-anchor: middle; }
.eco-svg .core-sub { fill: var(--accent-dim); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-anchor: middle; }
.eco-svg .node { fill: var(--panel); stroke: var(--line); transition: stroke .25s, fill .25s; }
.eco-svg .node-g:hover .node { stroke: var(--accent-dim); fill: var(--panel-2); }
.eco-svg .node-dot { fill: var(--accent); }
.eco-svg .node-label { fill: var(--fg); font-family: var(--sans); font-size: 13.5px; font-weight: 600; text-anchor: middle; }
.eco-diagram figcaption { text-align: center; color: var(--muted-2); font-size: 0.85rem; margin: 0.9rem auto 0; max-width: 60ch; }
.hero-media .eco-diagram { box-shadow: none; background: transparent; border: none; padding: 0; }

/* Hero trust line under the CTAs. */
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.6rem 0 0; color: var(--muted-2); font-size: 0.82rem; }
.hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ------------------------------------------------ Guided pathway selector -- */
.selector-result {
  margin-top: 1.2rem; border: 1px solid var(--accent-dim); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel)); padding: clamp(1.2rem, 3vw, 1.8rem);
}
.selector-result[hidden] { display: none; }
.selector-result .eyebrow { margin-bottom: 0.5rem; }
.selector-result h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.selector-result p { color: var(--muted); margin: 0 0 0.9rem; }
.selector-result .rec-benefits { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }
.selector-result .rec-benefits li { display: flex; gap: 0.6rem; color: var(--muted); font-size: 0.92rem; }
.selector-result .rec-benefits li::before { content: "→"; color: var(--accent); font-weight: 700; }
.selector-result .rec-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* --------------------------------------------------- Sticky pathway nav ---- */
.pathway-nav {
  position: sticky; top: 86px; z-index: 20; margin-bottom: 1.4rem;
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.7rem 0; background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft);
}
.pathway-nav::-webkit-scrollbar { display: none; }
.pathway-chip {
  flex: 0 0 auto; font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.45rem 0.9rem; white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.pathway-chip:hover { color: var(--fg); border-color: var(--muted-2); }
.pathway-chip.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ------------------------------------------------ Pathway panels (accord.) - */
.pathways { display: grid; gap: 0.9rem; }
.pathway-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.pathway-panel[hidden] { display: none; }
.pathway-panel:hover { border-color: var(--muted-2); }
.pathway-panel[open] { border-color: var(--accent-dim); box-shadow: var(--shadow-soft); }
.pathway-panel > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem;
}
.pathway-panel > summary::-webkit-details-marker { display: none; }
.pathway-panel > summary .p-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}
.pathway-panel > summary .p-ico svg { width: 22px; height: 22px; }
.pathway-panel > summary .p-head { flex: 1 1 auto; min-width: 0; }
.pathway-panel > summary h3 { font-size: 1.2rem; margin: 0; }
.pathway-panel > summary .p-who { color: var(--muted-2); font-size: 0.84rem; margin: 0.2rem 0 0; }
.pathway-panel > summary .p-toggle { flex: none; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s; }
.pathway-panel[open] > summary .p-toggle { transform: rotate(45deg); }
.pathway-body { padding: 0 1.3rem 1.4rem; border-top: 1px solid var(--line-soft); }
.pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.8rem; margin: 1.2rem 0 1.3rem; }
@media (max-width: 720px) { .pathway-grid { grid-template-columns: 1fr; gap: 1rem; } }
.pathway-grid .blk h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin: 0 0 0.5rem; }
.pathway-grid .blk p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.pathway-grid .blk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pathway-grid .blk li { display: flex; gap: 0.6rem; color: var(--muted); font-size: 0.9rem; }
.pathway-grid .blk li::before { content: "→"; color: var(--accent); font-weight: 700; flex: none; }
.pathway-body .p-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.pathway-body .p-entry { color: var(--muted-2); font-size: 0.82rem; margin: 0; }

/* --------------------------------------------------- Partnership journey --- */
.journey-phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: none; }
@media (max-width: 1100px) { .journey-phases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .journey-phases { grid-template-columns: 1fr; } }
.phase {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 1.2rem 1.2rem 1.3rem; transition: transform .25s, border-color .25s;
}
.phase:hover { transform: translateY(-4px); border-color: var(--accent-dim); }
.phase .p-num { font-family: var(--display); font-size: 0.85rem; color: var(--accent); letter-spacing: 0.08em; }
.phase h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; margin: 0.3rem 0 0.9rem; }
.phase ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; counter-reset: step; }
.phase ol li { position: relative; padding-left: 1.9rem; counter-increment: step; color: var(--muted); font-size: 0.88rem; }
.phase ol li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
}
.phase ol li b { color: var(--fg); font-weight: 600; display: block; font-size: 0.92rem; }

/* --------------------------------------------------- Partnership levels ---- */
.levels { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.level {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--fg);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.95rem;
}
.level .n { color: var(--accent-dim); font-family: var(--display); font-size: 0.8rem; }
.levels .arrow { color: var(--muted-2); flex: none; }

/* ------------------------------------------------ Application experience --- */
.app-shell { max-width: 860px; margin: 0 auto; }
.app-progress { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.6rem; flex-wrap: wrap; }
.app-progress .step { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-2); font-size: 0.82rem; }
.app-progress .step .b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; }
.app-progress .step.is-active { color: var(--fg); }
.app-progress .step.is-active .b { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.app-progress .step.is-done .b { border-color: var(--accent-dim); color: var(--accent); }
.app-progress .sep { flex: 1 1 12px; height: 1px; background: var(--line); min-width: 12px; }

.app-pathway-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.app-pathway-head .lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.app-pathway-head .val { font-family: var(--display); font-size: 1.4rem; margin: 0.2rem 0 0; }
.app-pathway-head .route { color: var(--muted-2); font-size: 0.82rem; margin: 0.25rem 0 0; }

.field .req { color: var(--accent-dim); }
.field .hint { color: var(--muted-2); font-size: 0.76rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e5646e; }
.field .err { color: #f08a92; font-size: 0.78rem; display: none; }
.field.invalid .err { display: block; }
.field[hidden] { display: none; }

.consent-row { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.3rem; }
.consent-row input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--accent); }
.consent-row label { font-size: 0.86rem; color: var(--muted); }
.privacy-note {
  display: flex; gap: 0.8rem; align-items: flex-start; margin: 1.2rem 0 0;
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.9rem 1rem; background: var(--panel);
}
.privacy-note .ico { flex: none; color: var(--accent); display: grid; place-items: center; }
.privacy-note .ico svg { width: 20px; height: 20px; }
.privacy-note p { margin: 0; color: var(--muted-2); font-size: 0.82rem; }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.4rem; }
.form-note { color: var(--muted-2); font-size: 0.8rem; margin: 0.4rem 0 0; }
.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--accent-ink); border-right-color: transparent; animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.form-alert { border: 1px solid #e5646e; background: color-mix(in srgb, #e5646e 10%, var(--panel)); color: var(--fg); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0 0 1.2rem; font-size: 0.9rem; }
.form-alert[hidden] { display: none; }
.saved-note { color: var(--ok); font-size: 0.8rem; }

/* Confirmation screen */
.confirm { text-align: center; max-width: 640px; margin: 0 auto; }
.confirm .seal {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 1.2rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid var(--accent-dim); color: var(--accent);
}
.confirm .seal svg { width: 32px; height: 32px; }
.confirm h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 0.7rem; }
.confirm .ref-card {
  display: inline-flex; flex-direction: column; gap: 0.2rem; align-items: center;
  border: 1px dashed var(--accent-dim); border-radius: 14px; padding: 0.9rem 1.6rem; margin: 1.1rem 0;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.confirm .ref-card .lbl { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.confirm .ref-card .ref { font-family: var(--display); font-size: 1.5rem; color: var(--fg); letter-spacing: 0.02em; }
.confirm .next {
  text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 1.3rem 1.5rem; margin: 1.4rem 0; display: grid; gap: 0.9rem;
}
.confirm .next h3 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin: 0; }
.confirm .next ol { margin: 0; padding-left: 1.1rem; color: var(--muted); display: grid; gap: 0.5rem; font-size: 0.92rem; }
.confirm .next ol b { color: var(--fg); }
.confirm .next .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.86rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 0.9rem; }
.confirm .next .meta b { color: var(--fg); }
.confirm .confirm-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

/* --------------------------------------------- Long-term ecosystem journey -
   The relationship after joining, shown as a flowing sequence of milestones
   that intensify toward a highlighted capstone — so the eye reads growth over
   time, ending on "lifetime membership". Flex-wrap + inline flow arrows keep it
   robust at any width (the same mechanic as .levels, richer per stone). */
.lifecycle { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
.ls {
  flex: 1 1 150px; min-width: 138px; display: flex; flex-direction: column; gap: 0.25rem;
  border: 1px solid var(--line); border-radius: 13px; padding: 0.85rem 0.9rem 0.95rem;
  background: var(--panel); transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s;
}
.ls:hover { transform: translateY(-4px); border-color: var(--accent-dim); background: var(--panel-2); }
.ls .n { font-family: var(--display); font-size: 0.8rem; color: var(--accent-dim); letter-spacing: 0.04em; }
.ls b { font-size: 0.9rem; letter-spacing: -0.01em; line-height: 1.2; }
.ls span.d { color: var(--muted); font-size: 0.76rem; }
/* The capstone milestone reads as the destination, not just another step. */
.ls.capstone {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--panel-2)), var(--panel));
  border-color: var(--accent-dim); box-shadow: var(--shadow-soft);
}
.ls.capstone .n { color: var(--accent); }
.lc-arrow { align-self: center; color: var(--muted-2); flex: none; font-size: 0.95rem; }

/* ----------------------------------------------------- Network effect ------ */
/* Amplifier cards showing what each new member adds, closing on the compounding
   statement — the whole point of a connected ecosystem. */
.netfx { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .netfx { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .netfx { grid-template-columns: 1fr; } }
.amp {
  border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.15rem; background: var(--panel);
  transition: transform .25s, border-color .25s, background .25s;
}
.amp:hover { transform: translateY(-4px); border-color: var(--accent-dim); background: var(--panel-2); }
.amp .ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 0.8rem;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}
.amp .ico svg { width: 20px; height: 20px; }
.amp .more { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dim); font-weight: 600; }
.amp b { display: block; font-size: 1rem; margin: 0.15rem 0 0.35rem; letter-spacing: -0.01em; }
.amp p { color: var(--muted); font-size: 0.86rem; margin: 0; }
.compound-band {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; text-align: center;
  margin-top: 1.1rem; padding: 1.1rem 1.4rem; border-radius: 16px;
  border: 1px solid var(--accent-dim); background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: var(--fg); font-size: 1.02rem;
}
.compound-band b { color: var(--accent); }

/* ---------------------------------------------------------- Vision band ---- */
.vision {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2.4rem, 6vw, 4.2rem) clamp(1.4rem, 4vw, 3rem);
}
.vision::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 12% 100%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 65%);
}
.vision > * { position: relative; z-index: 1; }
.vision .eyebrow { justify-content: center; }
.vision h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 0 auto 1.1rem; max-width: 20ch; }
.vision p { color: var(--muted); font-size: clamp(1.02rem, 2vw, 1.2rem); max-width: 62ch; margin: 0 auto 1rem; }
.vision .kicker {
  font-family: var(--display); font-style: italic; color: var(--fg);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); max-width: 30ch; margin: 1.4rem auto 0; line-height: 1.25;
}
.vision .kicker em { color: var(--accent); font-style: italic; }

/* Mobile refinements for the ecosystem experience. */
@media (max-width: 620px) {
  .pathway-nav { top: 60px; }
  .pathway-panel > summary { padding: 1rem; gap: 0.8rem; }
  .journey-phases { gap: 0.85rem; }
  /* Let the long-term journey swipe sideways rather than stack tall. */
  .lifecycle.m-swipe { flex-wrap: nowrap; }
  .lifecycle.m-swipe > .ls { flex: 0 0 62%; }
  .lifecycle.m-swipe > .lc-arrow { display: none; }
}

/* ==========================================================================
   Living-ecosystem motion layer (Join-the-Ecosystem page)
   Scroll-triggered storytelling that makes the ecosystem feel alive and
   growing: the diagram draws its connections and streams data to the centre,
   the long-term journey builds milestone by milestone, and the network-effect
   diagram expands as you arrive. Every effect is opt-in via page-specific
   classes and fully neutralised under prefers-reduced-motion.
   ========================================================================== */

/* ---- Ecosystem diagram: connections draw, data flows, ring drifts -------- */
/* Armed = hidden starting state (added by JS as progressive enhancement, so
   with JS disabled everything stays visible). Live = play, added on scroll. */
.eco-diagram.is-armed .spoke .link { stroke-dasharray: 210; stroke-dashoffset: 210; }
.eco-diagram.is-live  .spoke .link { animation: ecoDraw 0.9s cubic-bezier(.4,0,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes ecoDraw { to { stroke-dashoffset: 0; } }

/* Data pulses stream from every organisation into the athlete at the centre. */
.eco-svg .flow { fill: var(--accent); opacity: 0; }
.eco-diagram.is-armed .flow { opacity: 0; }
.eco-diagram.is-live  .flow { animation: ecoFlow 2.9s ease-in-out infinite; animation-delay: var(--pd, 0s); }
@keyframes ecoFlow {
  0%   { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; }
  10%  { opacity: 0.95; }
  70%  { opacity: 0.5; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* Nodes settle in just after their connection reaches them. */
.eco-diagram.is-armed .node-g { opacity: 0; }
.eco-diagram.is-live  .node-g { animation: ecoNode 0.6s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--d, 0s) + 0.28s); }
@keyframes ecoNode { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* The dashed ring crawls and the core breathes — quiet signs of life. */
.eco-diagram.is-live .ring { animation: ecoRing 26s linear infinite; }
@keyframes ecoRing { to { stroke-dashoffset: -200; } }
.eco-diagram.is-live .core { animation: ecoCore 4.6s ease-in-out infinite; }
@keyframes ecoCore { 0%, 100% { opacity: 1; } 50% { opacity: 0.84; } }

/* Interactive: hover a spoke to light its connection to the centre. */
.eco-svg .spoke { cursor: default; }
.eco-svg .spoke .link { transition: stroke .25s, stroke-width .25s, opacity .25s; }
.eco-svg .spoke:hover .link { stroke: var(--accent); opacity: 1; stroke-width: 2.4; }
.eco-svg .spoke:hover .node { stroke: var(--accent-dim); fill: var(--panel-2); }
.eco-svg .spoke:hover .flow { fill: var(--accent); }

/* ---- Long-term journey: milestones build one after another -------------- */
/* JS strips .reveal from these and drives a sequential build so the timeline
   visibly grows toward the highlighted capstone. */
.lifecycle .seq { opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.lifecycle .lc-arrow.seq { transform: scale(.3); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1); }
.lifecycle .seq.seq-in { opacity: 1; transform: none; }
.ls.capstone.seq-in { animation: capstoneGlow 3.4s ease-in-out 1s infinite; }
@keyframes capstoneGlow {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50% { box-shadow: 0 0 0 1px var(--accent-dim), 0 14px 46px -16px color-mix(in srgb, var(--accent) 50%, transparent); }
}

/* ---- Network effect: an expanding constellation ------------------------- */
.gn-wrap {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(0.9rem, 3vw, 1.6rem); margin-bottom: 1.2rem; overflow: hidden;
}
.gn { display: block; width: 100%; height: auto; }
.gn .gn-link {
  stroke: color-mix(in srgb, var(--blue) 55%, var(--line)); stroke-width: 1.3; opacity: 0.5;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
}
.gn.is-live .gn-link { animation: gnDraw 0.7s ease both; animation-delay: var(--d, 0s); }
@keyframes gnDraw { to { stroke-dashoffset: 0; } }
.gn .gn-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gn.is-live .gn-node { animation: gnPop 0.5s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0s); }
@keyframes gnPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.gn .gn-dot { fill: color-mix(in srgb, var(--blue) 55%, var(--fg)); }
.gn .gn-core { fill: color-mix(in srgb, var(--accent) 24%, var(--panel)); stroke: var(--accent-dim); stroke-width: 1.6; }
.gn .gn-pulse { fill: none; stroke: var(--accent-dim); opacity: 0; transform-box: fill-box; transform-origin: center; }
.gn.is-live .gn-pulse { animation: gnPulse 3.2s ease-out 1.4s infinite; }
@keyframes gnPulse { 0% { opacity: 0.55; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2.4); } }

/* ---- Section transition polish ------------------------------------------ */
/* A single sheen sweeps the compounding statement as it reveals. */
.compound-band { position: relative; overflow: hidden; }
.compound-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--accent) 20%, transparent) 50%, transparent 66%);
  transform: translateX(-130%);
}
.compound-band.reveal.in::after { animation: sheen 2.3s ease 0.35s 1; }
@keyframes sheen { to { transform: translateX(130%); } }

/* The vision backdrop drifts slowly, so the closing statement feels alive. */
.vision.reveal.in::before { animation: visionDrift 16s ease-in-out infinite alternate; }
@keyframes visionDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -2.5%, 0) scale(1.07); } }

/* --------------------------------------------------- Pricing refinements ---
   The Pricing page is content-led: the message, business value, pricing,
   comparison, ROI and call to action must stay the primary visual focus. The
   shared ambient glows are dialled right back here so they read as subtle
   atmosphere behind the content rather than as hero-scale artwork competing
   with the headings — smaller in footprint and roughly half the opacity. The
   vertical rhythm is also tightened and evened out so no section feels empty.
   Restrained and executive: the visitor remembers the message, not the
   background. (Scoped to .page-pricing so other pages are untouched.) */
body.page-pricing::before {
  background:
    radial-gradient(34% 30% at 90% -2%, rgba(200, 242, 74, 0.05), transparent 62%),
    radial-gradient(32% 34% at -2% 102%, rgba(110, 139, 255, 0.045), transparent 60%),
    radial-gradient(90% 90% at 50% 50%, #0a0e18, #05070c 92%);
}
body.page-pricing::after { opacity: 0.018; }

/* Even, tighter section rhythm. Each section keeps its restrained inline
   padding-top; here we pull in the inherited bottom padding so content flows
   naturally instead of leaving large empty gaps between bands. */
body.page-pricing main > section { padding-bottom: clamp(1.8rem, 4vw, 2.8rem); }

@media (prefers-reduced-motion: reduce) {
  .eco-diagram.is-armed .spoke .link,
  .eco-diagram .spoke .link { stroke-dashoffset: 0 !important; animation: none !important; }
  .eco-diagram.is-armed .node-g,
  .eco-diagram .node-g { opacity: 1 !important; animation: none !important; }
  .eco-diagram .flow { display: none !important; }
  .eco-diagram .ring, .eco-diagram .core { animation: none !important; }
  .lifecycle .seq { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ls.capstone.seq-in { animation: none !important; }
  .gn .gn-link { stroke-dashoffset: 0 !important; animation: none !important; }
  .gn .gn-node { opacity: 1 !important; animation: none !important; }
  .gn .gn-pulse { display: none !important; }
  .compound-band.reveal.in::after { animation: none !important; }
  .vision.reveal.in::before { animation: none !important; }
}

/* ==========================================================================
   MOBILE HOMEPAGE (.home-mobile)
   A purpose-built phone experience that replaces the detailed desktop
   homepage below 640px. Seven focused sections, progressive disclosure
   (accordion, tabbed showcase, one-card slider), a scroll progress cue and a
   floating Request-Demo action. All rules are scoped to phones so the desktop
   site is untouched.
   ========================================================================== */
.home-mobile { display: none; }

@media (max-width: 640px) {
  .home-desktop { display: none; }
  .home-mobile { display: block; padding: 0 clamp(1.1rem, 5vw, 1.4rem); }

  /* Vertical rhythm — compact but breathing, so every swipe reveals a full
     section instead of scrolling through empty space between them. */
  .mh-sec { padding: 2.6rem 0; }
  .mh-sec:first-of-type { padding-top: 1.5rem; }

  .mh-eyebrow {
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent-dim); font-weight: 600; margin: 0 0 0.85rem;
  }
  .mh-h1 {
    font-family: var(--display); font-weight: 650; letter-spacing: -0.02em;
    font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.08; margin: 0 0 1rem;
  }
  .mh-h2 {
    font-family: var(--display); font-weight: 650; letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.1; margin: 0 0 1rem;
  }
  .mh-lead { color: var(--muted); font-size: 1.02rem; line-height: 1.55; margin: 0 0 1.3rem; }
  .mh-sub { color: var(--muted); font-size: 0.98rem; margin: 0 0 1.4rem; }
  .mh-link { display: inline-flex; color: var(--accent-dim); font-weight: 600; font-size: 0.9rem; }
  .mh-link:hover { color: var(--accent); }

  /* 1 · Hero */
  .mh-hero-cta { display: flex; flex-direction: column; gap: 0.6rem; }
  .mh-hero-cta .btn { width: 100%; justify-content: center; }
  .mh-hero-media { margin-top: 1.4rem; }

  /* 2 · Benefit cards */
  .mh-cards { display: grid; gap: 1rem; }
  .mh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
  .mh-card__ico {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent); margin-bottom: 0.85rem;
  }
  .mh-card__ico svg { width: 21px; height: 21px; }
  .mh-card h3 { font-family: var(--display); font-weight: 650; font-size: 1.2rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
  .mh-card p { color: var(--muted); font-size: 0.92rem; margin: 0; }

  /* 3 · Tabbed showcase */
  .mh-show__tabs { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.3rem; margin-bottom: 1.2rem; }
  .mh-show__tabs::-webkit-scrollbar { display: none; }
  .mh-show__tab {
    flex: 0 0 auto; font: inherit; font-weight: 600; font-size: 0.82rem; cursor: pointer;
    color: var(--muted); background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.6rem 0.95rem; min-height: 44px;
  }
  .mh-show__tab.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .mh-show__panel { display: none; }
  .mh-show__panel.is-active { display: block; }
  .mh-show__frame { border-radius: 14px; overflow: hidden; }
  .mh-show__panel h3 { font-family: var(--display); font-weight: 650; font-size: 1.2rem; margin: 1rem 0 0.35rem; letter-spacing: -0.01em; }
  .mh-show__panel p { color: var(--muted); font-size: 0.92rem; margin: 0 0 0.65rem; }

  /* 4 · One-card workspace slider */
  .mh-slider__track {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mh-slider__track::-webkit-scrollbar { display: none; }
  .mh-slide {
    scroll-snap-align: center; flex: 0 0 100%; min-width: 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    padding: 1.6rem 1.4rem; min-height: 168px;
  }
  .mh-slide .tag { display: block; margin-bottom: 0.5rem; }
  .mh-slide h3 { font-family: var(--display); font-weight: 650; font-size: 1.4rem; margin: 0 0 0.55rem; letter-spacing: -0.01em; }
  .mh-slide p { color: var(--muted); font-size: 0.95rem; margin: 0; }
  .mh-slider__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; }
  .mh-slider__arrow {
    width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel); color: var(--fg);
    font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  }
  .mh-slider__arrow:disabled { opacity: 0.4; }
  .mh-slider__dots { display: flex; align-items: center; gap: 0.15rem; }
  /* 8px visual dot, but a padded 44px-tall tap area via content-box sizing. */
  .mh-dot {
    box-sizing: content-box; width: 8px; height: 8px; padding: 18px 8px;
    border: none; background: var(--line); background-clip: content-box;
    border-radius: 999px; cursor: pointer; transition: width .2s, background .2s;
  }
  .mh-dot.is-active { width: 22px; background: var(--accent); background-clip: content-box; }
  .mh-swipe-cue { text-align: center; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin: 0.8rem 0 0; }

  /* 5 · Accordion */
  .mh-acc { display: grid; gap: 0.6rem; }
  .mh-acc__item { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .mh-acc__item summary {
    list-style: none; cursor: pointer; font-weight: 600; font-size: 1rem;
    padding: 0.95rem 1.1rem; min-height: 44px;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .mh-acc__item summary::-webkit-details-marker { display: none; }
  .mh-acc__item summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; line-height: 1; }
  .mh-acc__item[open] summary::after { content: "–"; }
  .mh-acc__body { padding: 0 1.1rem 1.1rem; }
  .mh-acc__body p { margin: 0; color: var(--muted); font-size: 0.92rem; }

  /* 6 · Trust + compact stats */
  .mh-trust { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.6rem; }
  .mh-trust li { display: flex; align-items: center; gap: 0.7rem; color: var(--fg); font-size: 0.95rem; }
  .mh-trust li span {
    width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
  }
  .mh-trust li span svg { width: 18px; height: 18px; }
  .mh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0 0 1.6rem; }
  .mh-stat { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 1rem 0.8rem; text-align: center; }
  .mh-stat b { display: block; font-family: var(--display); font-weight: 650; font-size: 1.9rem; color: var(--fg); line-height: 1; margin-bottom: 0.35rem; }
  .mh-stat span { color: var(--muted-2); font-size: 0.76rem; letter-spacing: 0.03em; }

  /* 7 · Final call to action */
  .mh-final { text-align: center; }
  .mh-final .mh-sub { max-width: 42ch; margin-left: auto; margin-right: auto; }
  .mh-final__cta { width: 100%; justify-content: center; margin-top: 0.4rem; }
  .mh-final__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.7rem; margin-top: 1.25rem; }
  .mh-final__links a { color: var(--muted); font-size: 0.88rem; padding: 0.55rem 0.4rem; min-height: 44px; display: inline-flex; align-items: center; }
  .mh-final__links a:hover { color: var(--fg); }

  /* Scroll progress — a thin fill pinned just under the header (top set by JS)
     plus a small current-section pill. Non-interactive. */
  .mh-progress { position: fixed; left: 0; right: 0; z-index: 55; pointer-events: none; }
  .mh-progress__bar {
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-dim));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: width .12s linear;
  }
  .mh-progress__label {
    position: absolute; right: 12px; top: 7px;
    font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
    background: color-mix(in srgb, var(--ink-2) 88%, transparent);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.14rem 0.55rem;
    backdrop-filter: blur(6px);
  }

  /* Tighten the shared footer so the page ends compactly, not with a big gap. */
  footer.site { margin-top: 0; padding-top: 2.5rem; }
}

/* Floating Request-Demo action — sibling of the content trees, phone-only. */
.mh-fab { display: none; }
@media (max-width: 640px) {
  .mh-fab {
    position: fixed; left: 1rem; right: 1rem; z-index: 50;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0.85rem 1rem; border-radius: 14px;
    background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 0.95rem;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,0.7), 0 2px 0 0 rgba(255,255,255,0.06) inset;
    opacity: 0; transform: translateY(140%); pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
  }
  .mh-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-fab { transition: opacity .2s ease; }
  .mh-progress__bar { transition: none; }
}

/* ==========================================================================
   Phase 1 — New section styles for repositioned website
   ========================================================================== */

/* --- Skip to content (accessibility) --- */
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: 9999;
  background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1.5rem;
  font-weight: 600; font-size: 0.9rem; border-radius: 0 0 8px 0;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* --- Ecosystem diagram container --- */
.eco-section { text-align: center; }
.eco-diagram-wrap { max-width: 800px; margin: 0 auto; }
.eco-diagram-wrap svg { width: 100%; height: auto; }

/* --- Audience cards (4-up grid) --- */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 940px) { .aud-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .aud-grid { grid-template-columns: 1fr; } }

.aud-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.aud-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.aud-card__icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.aud-card__icon svg { width: 24px; height: 24px; }
.aud-card h3 { font-family: var(--display); font-weight: 650; font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; }
.aud-card p { color: var(--muted); font-size: 0.9rem; margin: 0; flex: 1; }
.aud-card .card-link { font-size: 0.85rem; }

/* --- Scale progression (step ladder) --- */
.scale-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
@media (max-width: 780px) { .scale-ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .scale-ladder { grid-template-columns: 1fr; } }

.scale-step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.2rem; position: relative;
}
.scale-step__num {
  font-family: var(--display); font-size: 2rem; font-weight: 400; color: var(--accent);
  line-height: 1; margin-bottom: 0.6rem;
}
.scale-step h4 { font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; }
.scale-step p { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* --- Trust grid (4-column) --- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 780px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.trust-item__icon {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.trust-item__icon svg { width: 20px; height: 20px; }
.trust-item p { color: var(--muted); font-size: 0.9rem; margin: 0; line-height: 1.5; }

/* --- CTA band with multiple audience buttons --- */
.cta-multi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 1.4rem; }
@media (max-width: 560px) { .cta-multi { grid-template-columns: 1fr; } }
.cta-multi .btn { justify-content: center; text-align: center; }

/* --- Benefit list (for government/federation pages) --- */
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (max-width: 780px) { .benefit-grid { grid-template-columns: 1fr; } }

.benefit-item { display: flex; gap: 1rem; align-items: flex-start; }
.benefit-item__icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.benefit-item__icon svg { width: 22px; height: 22px; }
.benefit-item h4 { font-size: 1rem; font-weight: 600; margin: 0 0 0.3rem; }
.benefit-item p { color: var(--muted); font-size: 0.88rem; margin: 0; }

/* --- Capability table (for federation/org pages) --- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-item {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem; display: flex; align-items: flex-start; gap: 0.8rem;
}
.cap-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px; margin-top: 0.5rem; }
.cap-item h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; }
.cap-item p { color: var(--muted); font-size: 0.84rem; margin: 0; }

/* --- Config table (country configuration) --- */
.config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
@media (max-width: 780px) { .config-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .config-grid { grid-template-columns: 1fr; } }
.config-cell {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem; text-align: center;
}
.config-cell h4 { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: 0.02em; }
.config-cell p { color: var(--muted); font-size: 0.8rem; margin: 0; }

/* --- Organisation type cards (horizontal with icon) --- */
.org-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 780px) { .org-cards { grid-template-columns: 1fr; } }
.org-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem;
  transition: border-color 0.2s ease;
}
.org-card:hover { border-color: var(--accent-dim); }
.org-card .tag { margin-bottom: 0.2rem; }
.org-card h3 { font-family: var(--display); font-weight: 650; font-size: 1.15rem; margin: 0; }
.org-card p { color: var(--muted); font-size: 0.88rem; margin: 0; flex: 1; }

/* --- Trust detail sections (for /trust page) --- */
.trust-section { margin-bottom: 3rem; }
.trust-section h3 {
  font-family: var(--display); font-weight: 650; font-size: 1.5rem; margin: 0 0 1.2rem;
  letter-spacing: -0.01em;
}
.trust-principles { display: grid; gap: 0.8rem; }
.trust-principle {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px;
}
.trust-principle__check {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  display: grid; place-items: center; color: var(--accent); font-size: 0.75rem;
}
.trust-principle h4 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.2rem; }
.trust-principle p { color: var(--muted); font-size: 0.86rem; margin: 0; }

/* --- Responsive section spacing override for new pages --- */
section.ph1 { padding: var(--section-gap) 0; }
section.ph1 + section.ph1 { padding-top: 0; }

/* --- Focus indicators (accessibility) --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Reduced motion support --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .aud-card, .org-card { transition: none; }
}

/* Heading hierarchy fix — h3 inside step/benefit/cap components styled as compact headings */
.scale-step h3, .benefit-item h3, .cap-item h3, .trust-principle h3,
.config-cell h3, .sv h3, .jnode h3, .org-card h3, .def h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  letter-spacing: 0;
}
.scale-step h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.jnode h3 { font-size: 0.95rem; margin: 0 0 0.25rem; }
.sv h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.trust-principle h3 { font-size: 0.95rem; margin: 0 0 0.2rem; }
.config-cell h3 { font-size: 0.85rem; margin: 0 0 0.3rem; letter-spacing: 0.02em; }
.cap-item h3 { font-size: 0.95rem; margin: 0 0 0.25rem; }
.benefit-item h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.org-card h3 { font-family: var(--display); font-weight: 650; font-size: 1.15rem; margin: 0; }

/* ==========================================================================
   Final One-Shot — Global container, overflow, CTA, typography, layout fixes
   ========================================================================== */

/* --- Global overflow prevention --- */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* --- Consistent centred section container --- */
.section-inner {
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
}
.section-inner > * { min-width: 0; }
@media (max-width: 560px) {
  .section-inner { width: min(100% - 28px, 1180px); }
}

/* --- Grid/flex overflow safety --- */
.grid > *, .aud-grid > *, .benefit-grid > *, .cap-grid > *,
.config-grid > *, .org-cards > *, .scale-ladder > *, .trust-grid > *,
.cta-multi > *, .hero-split > *, .feature-row > *, .split > * {
  min-width: 0;
}

/* --- Responsive typography --- */
.hero h1, .hero--split h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
section p, section li, .lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

/* --- Compact CTA panels --- */
.panel.cta-band {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.panel.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.5rem;
}
.panel.cta-band p {
  margin-bottom: 1.2rem;
}
.panel.cta-band .btn {
  width: auto;
  min-width: 0;
}
@media (max-width: 560px) {
  .panel.cta-band .hero-cta,
  .panel.cta-band .cta-multi {
    flex-direction: column;
  }
  .panel.cta-band .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Federation competition section: centred grid --- */
.comp-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 780px) { .comp-stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .comp-stages { grid-template-columns: 1fr; } }
.comp-stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.comp-stage__num {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  display: grid; place-items: center;
  color: var(--accent); font-weight: 600; font-size: 0.8rem;
}
.comp-stage h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.2rem; }
.comp-stage p { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* --- Federation officials: full-width balanced grid --- */
.officials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 780px) { .officials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .officials-grid { grid-template-columns: 1fr; } }

/* --- Federation/journey implementation: even grid --- */
.impl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin-inline: auto;
}
.impl-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
}
.impl-card__num {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.impl-card h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.3rem; }
.impl-card p { color: var(--muted); font-size: 0.82rem; margin: 0; }

/* --- Organisation cards: improved readability --- */
.org-card p {
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.55;
}
.org-card h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
}
.org-card .card-link {
  font-weight: 600;
  margin-top: 0.6rem;
  display: inline-block;
}

/* --- Ecosystem diagram: controlled size with visible container --- */
.eco-diagram-wrap {
  max-width: 720px;
  margin-inline: auto;
}
.eco-diagram-wrap img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5), 0 0 24px -8px color-mix(in srgb, var(--accent) 6%, transparent);
}
/* Hero ecosystem image */
.hero-media img[src*="ecosystem"] {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6), 0 0 20px -6px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* --- Government hierarchy: controlled size --- */
.gov-hero-media img {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  display: block;
}

/* --- Contact page: balanced layout fix --- */
@media (min-width: 780px) {
  .split--form {
    align-items: flex-start;
  }
  .split--form > .engage-rail {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* --- Footer improvements --- */
footer.site .foot-grid {
  font-size: 0.92rem;
}
footer.site a {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 2;
}
footer.site a:hover {
  color: var(--fg);
}
footer.site h4 {
  color: var(--fg);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
@media (max-width: 640px) {
  footer.site .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ==========================================================================
   Premium Visual Upgrade — Card depth, hierarchy, section polish
   ========================================================================== */

/* --- Premium card system with depth --- */
.card, .aud-card, .org-card, .cap-item, .benefit-item,
.comp-stage, .impl-card, .trust-principle, .config-cell, .scale-step {
  background: linear-gradient(168deg, #131a2e 0%, #0f1524 100%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 4%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 8px 24px -8px rgba(0,0,0,0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover, .aud-card:hover, .org-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 12px 32px -8px rgba(0,0,0,0.5),
    0 0 20px -8px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-2px);
}

/* Primary card variant — stronger accent */
.card--primary, .config-cell--primary {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  box-shadow:
    0 1px 0 0 rgba(200,242,74,0.06) inset,
    0 8px 24px -8px rgba(0,0,0,0.5),
    0 0 16px -6px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* --- Card typography upgrade --- */
.card h3, .aud-card h3, .org-card h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  letter-spacing: -0.01em;
}
.card p, .aud-card p, .org-card p {
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: var(--muted);
}

/* --- Premium icon containers --- */
.aud-card__icon, .benefit-item__icon, .trust-item__icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 0 12px -4px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* --- Government config cards: premium redesign --- */
.gov-config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 780px) { .gov-config-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gov-config-grid { grid-template-columns: 1fr; } }

.gov-config-card {
  background: linear-gradient(168deg, #131a2e 0%, #0f1524 100%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 4%);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  min-height: 175px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 8px 24px -8px rgba(0,0,0,0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gov-config-card:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.gov-config-card--primary {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow:
    0 1px 0 0 rgba(200,242,74,0.05) inset,
    0 8px 24px -8px rgba(0,0,0,0.5),
    0 0 14px -6px color-mix(in srgb, var(--accent) 8%, transparent);
}
.gov-config-card__icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.gov-config-card__icon svg { width: 20px; height: 20px; }
.gov-config-card h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}
.gov-config-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

/* --- Section divider for visual separation --- */
.sec-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 0 auto;
  max-width: 600px;
}

/* --- Trust page: card grid instead of flat rows --- */
.trust-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
@media (max-width: 640px) { .trust-card-grid { grid-template-columns: 1fr; } }

.trust-card {
  background: linear-gradient(168deg, #131a2e 0%, #0f1524 100%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 3%);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 6px 20px -6px rgba(0,0,0,0.35);
}
.trust-card h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
  color: var(--fg);
}
.trust-card .checks li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  padding: 0.25rem 0;
}

/* --- Compact config statement below cards --- */
.config-statement {
  text-align: center;
  margin-top: 1.6rem;
  padding: 1rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--line-soft);
}

/* --- About page: distinct visual area --- */
.about-visual {
  background: linear-gradient(168deg, #0d1220 0%, #0a0e18 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
}
.about-visual h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.6rem;
}
.about-visual p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--muted);
}

/* --- Prevent flat appearance on scale steps --- */
.scale-step {
  padding: 1.6rem 1.2rem;
  text-align: center;
}
.scale-step__num {
  font-size: 2.2rem;
  margin-bottom: 0.7rem;
}
.scale-step h3 {
  font-size: 1.05rem !important;
  margin-bottom: 0.5rem !important;
}
.scale-step p {
  font-size: 0.9rem;
  color: var(--muted);
}

/* --- Reduced-motion safety for hover states --- */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .aud-card:hover, .org-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Mockup Fallback System
   Shows a premium static preview when mockups.js fails to render.
   When JS renders successfully, the [data-mock] div gets content injected,
   which hides the fallback via the :empty selector logic.
   ========================================================================== */

.mock-fallback {
  background: linear-gradient(168deg, #131a2e 0%, #0f1524 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.mock-fallback__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: grid; place-items: center; color: var(--accent);
}
.mock-fallback__title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.mock-fallback__desc {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 32ch;
  margin: 0;
}
.mock-fallback__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.mock-fallback__feat {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* Hide fallback when mockup renders (data-mock gets SVG children) */
[data-mock]:not(:empty) + .mock-fallback,
.mock--float:not(:empty) + .mock-fallback {
  display: none;
}

/* ==========================================================================
   Viewport overflow fixes from Playwright QA
   ========================================================================== */

/* Nav-cta overflow at narrow viewports — already hidden at 940px but
   the element still exists in DOM. Force it offscreen properly. */
@media (max-width: 940px) {
  .nav-cta {
    position: absolute;
    right: 0;
    max-width: 100%;
    overflow: hidden;
  }
}

/* Government CTA button: wrap text on narrow screens */
@media (max-width: 480px) {
  .panel.cta-band .btn--lg {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    white-space: normal;
    text-align: center;
  }
}

/* Investors comparison table: horizontal scroll wrapper */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.compare-wrap table {
  min-width: 600px;
}

/* Contact enquiry cards: prevent overflow at narrow widths */
.enquiry-grid {
  max-width: 100%;
}
.enquiry-card {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .enquiry-card b {
    font-size: 0.85rem;
    white-space: normal;
  }
}

/* ==========================================================================
   PREMIUM UPGRADE V2 — New interactive section types, premium visuals,
   institutional proof patterns, and government-ready components.
   ========================================================================== */

/* -------------------------------------------------------- Tabbed sections -- */
.tabs { position: relative; }
.tabs__nav {
  display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 0.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line-soft);
}
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__btn {
  flex: 0 0 auto; font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  color: var(--muted); background: transparent; border: none;
  border-bottom: 2px solid transparent;
  padding: 0.85rem 1.2rem; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tabs__btn:hover { color: var(--fg); }
.tabs__btn.is-active {
  color: var(--fg); font-weight: 600;
  border-bottom-color: var(--accent);
}
.tabs__panel { display: none; animation: tabFadeIn .4s ease; }
.tabs__panel.is-active { display: block; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------- Organisation type selector --- */
.org-selector { position: relative; }
.org-selector__nav {
  display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
  padding: 0.5rem 0; margin-bottom: 2.5rem;
}
.org-selector__nav::-webkit-scrollbar { display: none; }
.org-selector__btn {
  flex: 0 0 auto; font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.6rem 1.15rem; white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.org-selector__btn:hover { color: var(--fg); border-color: var(--muted-2); transform: translateY(-1px); }
.org-selector__btn.is-active {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  font-weight: 600; box-shadow: 0 4px 16px -4px rgba(200,242,74,0.3);
}
.org-selector__content {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .org-selector__content { grid-template-columns: 1fr; gap: 2rem; } }
.org-selector__info h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: 0 0 0.8rem; font-family: var(--display); font-weight: 650; }
.org-selector__info p { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; margin: 0 0 1.4rem; }
.org-selector__modules { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.55rem; }
.org-selector__modules li { display: flex; gap: 0.6rem; color: var(--fg); font-size: 0.95rem; align-items: center; }
.org-selector__modules li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 6px; }
.org-selector__authority { font-size: 0.82rem; color: var(--muted-2); margin: 0.8rem 0 0; }
.org-selector__authority strong { color: var(--muted); }
.org-selector__visual { position: relative; }
.org-selector__panel { display: none; animation: tabFadeIn .4s ease; }
.org-selector__panel.is-active { display: block; }

/* --------------------------------------------- Expandable governance panels - */
.expand-panels { display: grid; gap: 0.7rem; }
.expand-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.expand-panel:hover { border-color: color-mix(in srgb, var(--accent) 15%, var(--line)); }
.expand-panel[open] {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  box-shadow: 0 8px 32px -12px rgba(0,0,0,0.5), 0 0 20px -12px rgba(200,242,74,0.06);
}
.expand-panel > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1rem;
  padding: 1.3rem 1.5rem; font-weight: 600; font-size: 1.05rem;
}
.expand-panel > summary::-webkit-details-marker { display: none; }
.expand-panel > summary::after {
  content: "+"; margin-left: auto; color: var(--accent); font-size: 1.4rem; line-height: 1;
  transition: transform .25s;
}
.expand-panel[open] > summary::after { content: "−"; transform: rotate(180deg); }
.expand-panel__body { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--line-soft); }
.expand-panel__body p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 1rem 0 0; }

/* ------------------------------------------------- KPI panels (count-up) --- */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  padding: 1.8rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 780px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-strip { grid-template-columns: 1fr; gap: 1.5rem; } }
.kpi {
  text-align: center; padding: 1rem;
  border-right: 1px solid var(--line-soft);
}
.kpi:last-child { border-right: none; }
@media (max-width: 780px) { .kpi { border-right: none; } }
.kpi__value {
  font-family: var(--display); font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: var(--fg); line-height: 1; margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.kpi__label { color: var(--muted-2); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }

/* ------------------------------------------ Premium infrastructure visual -- */
.infra-visual {
  position: relative;
  background: linear-gradient(168deg, #0c1525 0%, #080d18 100%);
  border: 1px solid color-mix(in srgb, var(--teal) 12%, var(--line));
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 40px 100px -40px rgba(0,0,0,0.9),
    0 0 50px -25px rgba(77,217,192,0.06);
  overflow: hidden;
}
.infra-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 30%);
}
.infra-visual__inner { position: relative; z-index: 1; }

/* ------------------------------------------ Connected identity visual ----- */
.identity-visual {
  display: grid; grid-template-columns: 1fr; gap: 0;
  position: relative; padding: 2rem 0;
}
.identity-visual__center {
  text-align: center; margin-bottom: 2rem;
  position: relative;
}
.identity-visual__center::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 2px; height: 2rem; background: linear-gradient(180deg, var(--accent), transparent);
  transform: translateX(-50%);
}
.identity-visual__hub {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel));
  border: 1px solid var(--accent-dim);
  border-radius: 999px; padding: 0.7rem 1.4rem;
  font-weight: 600; font-size: 1rem;
  box-shadow: 0 0 20px -8px rgba(200,242,74,0.2);
}
.identity-visual__hub .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.identity-visual__branches {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 780px) { .identity-visual__branches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .identity-visual__branches { grid-template-columns: 1fr; } }
.identity-branch {
  position: relative; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1rem;
  transition: border-color .2s, transform .2s;
}
.identity-branch::before {
  content: ""; position: absolute; left: 50%; top: -1rem;
  width: 2px; height: 1rem; background: var(--line);
  transform: translateX(-50%);
}
.identity-branch:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.identity-branch__icon {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 0.8rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.identity-branch__icon svg { width: 22px; height: 22px; }
.identity-branch h4 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.3rem; }
.identity-branch p { color: var(--muted); font-size: 0.84rem; margin: 0; }

/* ------------------------------------------- Foundation composition visual - */
.foundation-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  position: relative;
}
@media (max-width: 960px) { .foundation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .foundation-grid { grid-template-columns: 1fr; } }
.foundation-grid::before {
  content: ""; position: absolute; inset: 20% 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(77,217,192,0.06), transparent);
  pointer-events: none; z-index: 0;
}
.foundation-node {
  position: relative; z-index: 1;
  background: linear-gradient(168deg, #131a2e 0%, #0f1524 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.foundation-node:hover {
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.5), 0 0 16px -8px rgba(77,217,192,0.08);
}
.foundation-node.is-highlighted {
  border-color: var(--accent-dim);
  box-shadow: 0 0 20px -8px rgba(200,242,74,0.15);
}
.foundation-node__icon {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 0.8rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--teal);
}
.foundation-node__icon svg { width: 20px; height: 20px; }
.foundation-node h4 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: 0; }
.foundation-node p { color: var(--muted); font-size: 0.84rem; margin: 0; line-height: 1.5; }

/* -------------------------------------------------------- Process timeline -- */
.timeline {
  position: relative; padding-left: 2.5rem;
}
.timeline::before {
  content: ""; position: absolute; left: 1rem; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--accent), var(--line), transparent);
}
.timeline__step {
  position: relative; padding: 0 0 2.5rem;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__marker {
  position: absolute; left: -2.5rem; top: 0.2rem;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--accent-dim);
  color: var(--accent); font-size: 0.72rem; font-weight: 700;
  z-index: 1;
}
.timeline__step h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; }
.timeline__step p { color: var(--muted); font-size: 0.92rem; margin: 0; line-height: 1.55; }

/* ------------------------------------------- Institutional proof section ---- */
.proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 860px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-item {
  background: linear-gradient(168deg, #101728 0%, #0c1220 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: border-color .2s, transform .2s;
}
.proof-item:hover { border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); transform: translateY(-2px); }
.proof-item__icon {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); margin-bottom: 0.3rem;
}
.proof-item__icon svg { width: 18px; height: 18px; }
.proof-item h4 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0; }
.proof-item p { color: var(--muted); font-size: 0.86rem; margin: 0; line-height: 1.5; }

/* ------------------------------------------- Comparison / split panels ----- */
.comparison {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 780px) { .comparison { grid-template-columns: 1fr; } }
.comparison__panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.comparison__panel--accent {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent) 6%, var(--panel-2)), var(--panel));
}
.comparison__panel h3 { font-size: 1.2rem; margin: 0 0 1rem; }

/* ================================================ Premium Hero Ecosystem === */
.hero-ecosystem {
  position: relative;
  width: 100%; max-width: 720px; margin-left: auto;
  aspect-ratio: 4 / 3;
}
.hero-ecosystem__frame {
  position: absolute; inset: 0;
  background: linear-gradient(168deg, #0c1525 0%, #080d18 100%);
  border: 1px solid color-mix(in srgb, var(--teal) 12%, var(--line));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 50px 110px -50px rgba(0,0,0,0.95),
    0 0 50px -25px rgba(77,217,192,0.06);
}
.hero-ecosystem__frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 25%);
  z-index: 1;
}
.hero-ecosystem svg { width: 100%; height: 100%; display: block; }

/* ========================================== Premium Government Hierarchy === */
.gov-hierarchy {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 960px) { .gov-hierarchy { grid-template-columns: 1fr; } }
.gov-hierarchy__visual {
  position: relative;
  background: linear-gradient(168deg, #0c1525 0%, #080d18 100%);
  border: 1px solid color-mix(in srgb, var(--teal) 10%, var(--line));
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-premium);
}
.gov-hierarchy__levels { display: grid; gap: 0; }
.gov-level {
  display: grid; grid-template-columns: auto 1fr; gap: 0.8rem;
  align-items: center; padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.gov-level:last-child { border-bottom: none; }
.gov-level__marker {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent);
}
.gov-level__marker--secondary { background: var(--blue); color: #fff; }
.gov-level__marker--tertiary { background: var(--teal); color: var(--ink); }
.gov-level__marker--base { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.gov-level__info h4 { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; margin: 0; color: var(--fg); }
.gov-level__info p { font-size: 0.78rem; color: var(--muted-2); margin: 0.15rem 0 0; }
.gov-hierarchy__panel {
  background: linear-gradient(168deg, #131a2e 0%, #0f1524 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.gov-hierarchy__panel h3 { font-size: 1.15rem; margin: 0 0 1.2rem; color: var(--fg); }
.gov-hierarchy__panel .gain-item {
  display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.gov-hierarchy__panel .gain-item:last-child { border-bottom: none; }
.gov-hierarchy__panel .gain-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  flex: 0 0 8px; margin-top: 0.45rem;
}
.gov-hierarchy__panel .gain-item p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.gov-hierarchy__panel .gain-item strong { color: var(--fg); }

/* ============================================== Premium Motion System ====== */
/* Floating depth animation for premium visuals */
@keyframes premiumFloat {
  0%, 100% { transform: translateY(0) rotate3d(1, 0, 0, 0deg); }
  50% { transform: translateY(-8px) rotate3d(1, 0, 0, 0.5deg); }
}
.anim-float { animation: premiumFloat 6s ease-in-out infinite; }

/* Gentle panel entrance */
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.anim-enter { animation: panelEnter 0.7s cubic-bezier(.2,.7,.3,1) both; }

/* Connection line flow */
@keyframes lineFlow {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}
.anim-line-flow { stroke-dasharray: 200; animation: lineFlow 2s ease forwards; }

/* Soft parallax layer (applied via JS) */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Hover elevation for interactive cards */
.hover-elevate {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.hover-elevate:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-premium);
}

/* Light perspective tilt on hero visuals */
.perspective-subtle {
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.perspective-subtle:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* ============ Reduced motion — disable all premium motion ================= */
@media (prefers-reduced-motion: reduce) {
  .anim-float,
  .anim-enter { animation: none !important; }
  .anim-line-flow { animation: none !important; stroke-dashoffset: 0; }
  .parallax-layer { transition: none !important; will-change: auto; }
  .hover-elevate:hover { transform: none; }
  .perspective-subtle,
  .perspective-subtle:hover { transform: none; }
  .tabs__panel { animation: none; }
  .org-selector__panel { animation: none; }
  @keyframes tabFadeIn { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
}

/* ============================================= Section Spacing Overrides === */
/* Section spacing for .ph1 class — uses --section-gap (64-88px desktop) */
section.ph1 { padding: var(--section-gap) 0; }
section.ph1 + section.ph1 { padding-top: var(--section-gap); margin-top: 0; }
section.ph1:first-of-type { padding-top: var(--section-gap); }

/* --- Controlled section-background variation ---
   Alternating tones prevent the page feeling like one continuous dark panel
   while keeping the AOS brand identity intact. */
section.ph1:nth-of-type(even) {
  background: linear-gradient(180deg, #0b1020 0%, #0d1424 50%, #0b1020 100%);
}
section.ph1:nth-of-type(3n+2) {
  background: linear-gradient(180deg, rgba(77,217,192,0.02) 0%, rgba(77,217,192,0.01) 50%, transparent 100%);
}
/* Lighter navy for trust/proof sections */
section.ph1.sec--navy {
  background: linear-gradient(180deg, #0e1628 0%, #101c30 50%, #0e1628 100%);
}
/* Dark teal accent sections */
section.ph1.sec--teal {
  background: linear-gradient(180deg, rgba(77,217,192,0.03) 0%, rgba(77,217,192,0.015) 50%, transparent 100%);
}
/* Light product section — subtle shift for key product areas */
section.ph1.sec--product {
  background: linear-gradient(180deg, #0c1322 0%, #0f1828 50%, #0c1322 100%);
  border-top: 1px solid rgba(110,139,255,0.06);
  border-bottom: 1px solid rgba(110,139,255,0.06);
}

/* Internal spacing within sections */
.sec-head { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.sec-head .eyebrow { margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem); }
/* Eyebrow → heading: 12-18px (handled by eyebrow margin-bottom) */
/* Heading → paragraph: 18-24px */
.sec-head h2 + p { margin-top: clamp(1.1rem, 2vw, 1.5rem); }
/* Paragraph → content: 32-44px (handled by sec-head margin-bottom) */

/* ============================================= Body typography refinement == */
body { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.62; font-weight: 420; }
section p { line-height: 1.6; max-width: 760px; }

/* ==========================================================================
   RESPONSIVE QA — Verified at 1440×900, 1024×768, 768×1024, 480×900,
   390×844, 360×800. Fixes for narrow viewport safety.
   ========================================================================== */

/* --- Hero ecosystem SVG: prevent overflow on narrow viewports --- */
.hero-ecosystem {
  max-width: 100%;
  overflow: hidden;
}
.hero-ecosystem__frame {
  max-width: 100%;
}
@media (max-width: 480px) {
  .hero-ecosystem {
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
  .hero-ecosystem svg text { font-size: 80%; }
}

/* --- Infra-visual SVG: responsive safety --- */
.infra-visual { max-width: 100%; overflow: hidden; }
.infra-visual svg { max-width: 100%; height: auto; }
@media (max-width: 480px) {
  .infra-visual { padding: 1rem; }
}

/* --- Org selector: scroll snap on mobile --- */
@media (max-width: 480px) {
  .org-selector__nav {
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
  }
  .org-selector__btn {
    scroll-snap-align: start;
    font-size: 0.82rem;
    padding: 0.55rem 0.95rem;
  }
}

/* --- Tab nav: smaller touch targets at phone sizes --- */
@media (max-width: 480px) {
  .tabs__btn {
    font-size: 0.82rem;
    padding: 0.75rem 0.9rem;
    min-height: 44px;
  }
}

/* --- Foundation grid: 2-col at tablet, 1-col at phone --- */
@media (max-width: 768px) {
  .foundation-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .foundation-grid { grid-template-columns: 1fr; }
}

/* --- Gov hierarchy: stack at tablet, panel below --- */
@media (max-width: 768px) {
  .gov-hierarchy { grid-template-columns: 1fr; gap: 2rem; }
  .gov-hierarchy__visual { order: 1; }
  .gov-hierarchy__panel { order: 2; }
}

/* --- Identity branches: 2-col at tablet, 1-col at phone --- */
@media (max-width: 480px) {
  .identity-visual__branches { grid-template-columns: 1fr; }
  .identity-branch::before { display: none; }
}

/* --- Proof grid: single column at phone --- */
@media (max-width: 480px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* --- Timeline: tighter on mobile --- */
@media (max-width: 480px) {
  .timeline { padding-left: 2rem; }
  .timeline::before { left: 0.75rem; }
  .timeline__marker {
    left: -2rem; width: 24px; height: 24px;
    font-size: 0.65rem;
  }
  .timeline__step h4 { font-size: 0.95rem; }
  .timeline__step p { font-size: 0.88rem; }
}

/* --- Hero split: text first on mobile, visual below full-width --- */
@media (max-width: 480px) {
  .hero-split { gap: 2rem; }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-split .hero-copy h1 { font-size: clamp(2rem, 7.5vw, 2.8rem); }
}

/* --- Perspective transforms: disable on phone for performance --- */
@media (max-width: 640px) {
  .perspective-subtle,
  .perspective-subtle:hover {
    transform: none;
  }
}

/* --- Expand panels: smaller padding on phone --- */
@media (max-width: 480px) {
  .expand-panel > summary { padding: 1rem 1.1rem; font-size: 0.95rem; }
  .expand-panel__body { padding: 0 1.1rem 1.1rem; }
}

/* --- Feature row: text first, visual second on mobile --- */
@media (max-width: 480px) {
  .feature-row { gap: 1.5rem; }
  .feature-row h3 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
}

/* --- CTA band: full-width buttons at phone --- */
@media (max-width: 390px) {
  .cta-multi { grid-template-columns: 1fr; }
  .cta-multi .btn { font-size: 0.85rem; padding: 0.75rem 1rem; white-space: normal; }
}

/* --- Global: prevent SVG overflow at any width --- */
svg { max-width: 100%; overflow: hidden; }

/* --- Section spacing at phone sizes (56-72px) --- */
@media (max-width: 480px) {
  section.ph1 { padding: var(--section-gap-sm) 0; }
  section.ph1 + section.ph1 { margin-top: var(--section-gap-sm); }
}

/* --- Ensure nav doesn't clip on 768px tablet --- */
@media (min-width: 641px) and (max-width: 940px) {
  .nav-cta {
    position: relative;
    right: auto;
    max-width: none;
    overflow: visible;
  }
}

/* ==========================================================================
   ORBITAL VISUAL SYSTEM — Premium animated orbital diagrams
   No rectangular frame. Sits naturally in the page background.
   ========================================================================== */

/* Container — no box, no border, just the orbit */
.orbit-wrap {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 1.05 / 1;
}
.orbit-wrap .orbit-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Hero orbit positioning — sits beside the headline */
.hero-media .orbit-wrap {
  max-width: 100%;
  margin-left: auto;
}

/* Centre group breathing glow */
.orbit-centre {
  animation: orbitBreathe 4s ease-in-out infinite;
}
@keyframes orbitBreathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}

/* Particle motion along paths (handled by SVG animateMotion) */
/* Reduced motion: freeze particles and breathing */
@media (prefers-reduced-motion: reduce) {
  .orbit-centre { animation: none; }
  .orbit-svg circle[r="2.2"] { display: none; }
  .orbit-svg animateMotion { animation-play-state: paused; }
}

/* Mobile: reduce orbit size and hide smallest labels */
@media (max-width: 640px) {
  .orbit-wrap { aspect-ratio: 1 / 1; }
}
@media (max-width: 480px) {
  .orbit-wrap { max-width: 320px; }
  .orbit-svg text { font-size: 8px !important; }
}

/* ==========================================================================
   Demonstration Data Label
   Clearly marks every mockup containing invented figures, names or activity.
   ========================================================================== */
.demo-label {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  opacity: 0.85;
  margin-top: 0.6rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Implementation status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.status-badge--live {
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
}
.status-badge--dev {
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.status-badge--approved {
  color: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.status-badge--planned {
  color: var(--muted);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--muted) 6%, transparent);
}