*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --ice-white: #f0f6ff;
    --glacier-blue: #a8d4f0;
    --deep-ocean: #0a1628;
    --arctic-teal: #1a9fb8;
    --frost: rgba(255,255,255,0.85);
    --cold-mid: #5b8fa8;
    --accent: #00d4ff;
    --dark-water: #071020;
  }

  /* Horizontal clipping via `clip` (not `hidden`): `overflow-x: hidden` on
     the root turns it into a scroll container, which silently disables
     position:sticky descendants in iOS Safari — the voyage scene then never
     pins and its scroll runway shows up as a big empty gap. `clip` clips
     without creating a scroll container. (Older browsers fall back to the
     preceding `hidden` declaration.) */
  html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--dark-water);
    color: var(--ice-white);
    /* NB: no overflow-x:hidden here — html already clips horizontally, and
       setting it on body too makes body a scroll container, which breaks
       position:sticky (used by the .voyage scene). */
  }

  /* CUSTOM CURSOR — desktop only */
  @media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
    .cursor {
      position: fixed;
      width: 12px; height: 12px;
      background: var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      mix-blend-mode: screen;
      transition: transform 0.1s;
    }
    .cursor-follower {
      position: fixed;
      width: 36px; height: 36px;
      border: 1px solid rgba(0,212,255,0.4);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transition: all 0.2s ease;
    }
  }
  @media (hover: none), (pointer: coarse) {
    .cursor, .cursor-follower { display: none !important; }
    .tl-nav { display: none !important; }
  }

  /* NAV */
  nav {
    position: relative;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(20px);
    background: rgba(7,16,32,0.6);
    border-bottom: 1px solid rgba(168,212,240,0.1);
    animation: slideDown 0.8s ease forwards;
  }

  @keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
  }

  .logo svg {
    height: 36px;
    width: auto;
    display: block;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  .logo-text { line-height: 1; }
  .logo-text strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.5px;
  }
  .logo-text span {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--cold-mid);
    text-transform: uppercase;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
  }

  .nav-links a {
    color: rgba(240,246,255,0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: color 0.3s;
    position: relative;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s;
  }

  .nav-links a:hover { color: var(--accent); }
  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-cta {
    padding: 10px 24px;
    background: var(--accent);
    color: var(--dark-water) !important;
    border-radius: 100px;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.3s !important;
  }
  .nav-cta::after { display: none !important; }
  .nav-cta:hover {
    background: white !important;
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(0,212,255,0.4) !important;
  }

  /* HERO */
  .hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      /* Subtle dark gradient overlay to keep text legible without muting the image */
      linear-gradient(180deg, rgba(7,24,40,0.45) 0%, rgba(7,24,40,0.0) 25%, rgba(5,16,30,0.0) 60%, rgba(5,16,30,0.7) 92%, rgba(5,16,30,0.95) 100%),
      /* Cyan accent glow at base */
      radial-gradient(ellipse 60% 25% at 50% 92%, rgba(0,212,255,0.20) 0%, transparent 70%),
      /* The cinematic A23a hero photograph */
      url('images/a23a-hero.png') center center / cover no-repeat,
      #071828;
  }
  /* Very slow ken-burns zoom on the hero photo */
  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('images/a23a-hero.jpg') center center / cover no-repeat;
    opacity: 0;
    animation: heroZoom 40s ease-in-out infinite alternate;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  @keyframes heroZoom {
    0%   { transform: scale(1);     opacity: 0; }
    50%  { opacity: 0.08; }
    100% { transform: scale(1.06);  opacity: 0; }
  }

  /* Animated particles */
  .particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(0,212,255,0.6);
    animation: float linear infinite;
  }

  @keyframes float {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-20vh) scale(1); opacity: 0; }
  }

  /* Water shimmer effect */
  .water-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(transparent, rgba(0,212,255,0.05) 50%, rgba(10,37,64,0.8));
    animation: waterShimmer 4s ease-in-out infinite;
  }

  @keyframes waterShimmer {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
  }

  .hero-content {
    position: relative;
    z-index: 10;
    padding: 110px 60px 0;
    max-width: 700px;
    animation: heroText 1s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
  }

  @keyframes heroText {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(0,212,255,0.4);
    border-radius: 100px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
  }

  .hero-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
  }

  h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(42px, 6vw, 80px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -2px;
    margin-bottom: 20px;
  }

  h1 em {
    display: block;
    font-style: normal;
    background: linear-gradient(135deg, var(--accent), var(--glacier-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-sub {
    position: absolute;
    bottom: 40px;
    left: 60px;
    right: 60px;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.7;
    max-width: 600px;
    font-weight: 700;
    z-index: 10;
  }

  .hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .btn-primary {
    padding: 14px 32px;
    background: var(--accent);
    color: var(--dark-water);
    border: none;
    border-radius: 100px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.3px;
  }

  .btn-primary:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0,212,255,0.4);
  }

  .btn-ghost {
    padding: 14px 32px;
    background: transparent;
    color: var(--ice-white);
    border: 1px solid rgba(240,246,255,0.2);
    border-radius: 100px;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .scroll-indicator {
    position: absolute;
    bottom: 30px;
    right: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(168,212,240,0.5);
    animation: fadeIn 1s ease forwards;
    animation-delay: 1.5s;
    opacity: 0;
  }

  .scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(var(--accent), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }

  @keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.5); opacity: 0.4; }
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }


  /* ── WHALE BREACH ─────────────────────────────────────────────
     A photographic humpback (cut out from a public-domain NOAA photo)
     erupts from the water in the lower-right of the hero, hangs, then
     topples onto its side with a photographic spray cloud.
     Everything is anchored to one "surface point" (.breach). The whale
     lives in a clipped stage whose bottom edge is the waterline, so it
     rises out of — and sinks back into — the sea. The sequence runs when
     .breach gets .is-breaching (see a23a-nation.js).
     --wh  = height of the whale when fully out of the water
     --hit = x-offset (from the surface point) where the body lands
  ───────────────────────────────────────────────────────────────── */
  .breach {
    --wh: clamp(200px, 40vh, 420px);
    --hit: calc(var(--wh) * 0.78);
    position: absolute;
    left: 57%;
    top: 73%;
    width: 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
  }

  /* Clipped window above the waterline */
  .breach-stage {
    position: absolute;
    left: calc(var(--wh) * -0.9);
    bottom: 0;
    width: calc(var(--wh) * 2.5);
    height: calc(var(--wh) * 1.25);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 10px);
            mask-image: linear-gradient(to top, transparent 0, #000 10px);
  }

  /* Reflection: the same stage flipped below the waterline, heavily faded
     and blurred so it reads as a broken reflection on moving water. */
  .breach-reflect {
    height: calc(var(--wh) * 0.55);
    transform: scaleY(-1);
    transform-origin: 50% 100%;
    filter: blur(3px) saturate(0.8);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.38) 0, rgba(0,0,0,0.12) 45%, transparent 100%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0.38) 0, rgba(0,0,0,0.12) 45%, transparent 100%);
  }
  .breach-reflect img { filter: none; }

  .breach-whale {
    display: block;
    position: absolute;
    left: calc(var(--wh) * 0.58);       /* puts the body's base on the surface point */
    bottom: 0;
    height: var(--wh);
    transform: translateY(110%);
    will-change: transform;
  }
  .breach-whale img {
    display: block;
    height: 100%;
    width: auto;
    transform-origin: 0% 100%;           /* hinge at the base — it topples to the right */
    transform: rotate(-4deg);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.45));
    will-change: transform, filter;
  }

  /* Lift (translate) and topple (rotate) are separate layers so each has
     its own easing: a fast, decelerating rise; a hang; then an accelerating
     fall about the base while the body sinks. */
  .breach.is-breaching .breach-whale     { animation: breachLift 4.2s 0.3s both; }
  .breach.is-breaching .breach-whale img { animation: breachTopple 4.2s 0.3s both, breachBlur 4.2s 0.3s both; }

  @keyframes breachLift {
    0%   { transform: translateY(110%); animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1); }
    30%  { transform: translateY(0%);   animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
    42%  { transform: translateY(-3%);  animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.5); }
    62%  { transform: translateY(14%);  animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.6); }
    82%  { transform: translateY(62%);  animation-timing-function: ease-in; }
    100% { transform: translateY(130%); }
  }
  @keyframes breachTopple {
    0%   { transform: rotate(-4deg); animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1); }
    30%  { transform: rotate(0deg);  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
    42%  { transform: rotate(3deg);  animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
    70%  { transform: rotate(46deg); animation-timing-function: ease-out; }
    100% { transform: rotate(68deg); }
  }
  @keyframes breachBlur {
    0%   { filter: blur(2.5px) drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
    22%  { filter: blur(0.8px) drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
    30%  { filter: blur(0)     drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
    45%  { filter: blur(0)     drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
    70%  { filter: blur(1.6px) drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
    100% { filter: blur(2px)   drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
  }

  /* Photographic spray cloud (a = exit, b = impact) */
  .breach-splash {
    display: block;
    position: absolute;
    bottom: 0;
    height: calc(var(--wh) * 0.62);
    transform-origin: 50% 100%;
    transform: scale(0.25, 0.08);
    opacity: 0;
    will-change: transform, opacity;
  }
  .breach-splash img { display: block; height: 100%; width: auto; }
  .breach-splash-a { left: calc(var(--wh) * -0.42); }                            /* centred on the exit point */
  .breach-splash-b { height: calc(var(--wh) * 1.3); left: calc(var(--hit) - var(--wh) * 1.08); }
  .breach.is-breaching .breach-splash-a { animation: splashUp 1.7s 0.42s both; }
  .breach.is-breaching .breach-splash-b { animation: splashUp 2.3s 3.05s both; }
  @keyframes splashUp {
    0%   { opacity: 0;    transform: scale(0.25, 0.08); animation-timing-function: cubic-bezier(0.1, 0.75, 0.3, 1); }
    20%  { opacity: 1;    transform: scale(0.9, 0.85); }
    45%  { opacity: 0.95; transform: scale(1.04, 1);   animation-timing-function: ease-in; }
    100% { opacity: 0;    transform: scale(1.22, 1.12) translateY(-5%); }
  }

  /* White-water at the surface (a = exit, b = impact) */
  .breach-foam {
    position: absolute;
    left: 0; top: 0;
    width: calc(var(--wh) * 0.9);
    height: calc(var(--wh) * 0.13);
    margin-left: calc(var(--wh) * -0.45);
    margin-top: calc(var(--wh) * -0.065);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(235,245,255,0.75) 0%, rgba(205,230,250,0.45) 30%, rgba(160,210,240,0.15) 60%, transparent 72%);
    opacity: 0;
    transform: scale(0.2, 0.4);
    filter: blur(2px);
  }
  .breach.is-breaching .breach-foam-a { animation: foamBurst 1.8s 0.5s both; }
  .breach.is-breaching .breach-foam-b { animation: foamBurst 2.8s 3.1s both; left: var(--hit); width: calc(var(--wh) * 1.7); height: calc(var(--wh) * 0.2); margin-left: calc(var(--wh) * -0.85); margin-top: calc(var(--wh) * -0.1); }
  @keyframes foamBurst {
    0%   { opacity: 0;    transform: scale(0.15, 0.4); }
    18%  { opacity: 0.6;  transform: scale(0.75, 0.9); }
    45%  { opacity: 0.45; transform: scale(1.05, 1); }
    100% { opacity: 0;    transform: scale(1.5, 0.7); }
  }

  /* Ripple rings */
  .breach-ripples i {
    position: absolute;
    left: 0; top: 0;
    width: calc(var(--wh) * 1.3);
    height: calc(var(--wh) * 0.24);
    margin-left: calc(var(--wh) * -0.65);
    margin-top: calc(var(--wh) * -0.12);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    filter: blur(0.6px);
    opacity: 0;
    transform: scale(0.1);
  }
  .breach.is-breaching .breach-ripples i:nth-child(1) { animation: rippleOut 2.0s 0.7s both; }
  .breach.is-breaching .breach-ripples i:nth-child(2) { animation: rippleOut 2.8s 3.25s both; left: var(--hit); }
  .breach.is-breaching .breach-ripples i:nth-child(3) { animation: rippleOut 2.8s 3.65s both; left: var(--hit); }
  .breach.is-breaching .breach-ripples i:nth-child(4) { animation: rippleOut 2.8s 4.05s both; left: var(--hit); }
  @keyframes rippleOut {
    0%   { opacity: 0;    transform: scale(0.1); }
    12%  { opacity: 0.55; }
    100% { opacity: 0;    transform: scale(1.7); }
  }

  @media (max-width: 900px) {
    .breach { left: 34%; top: 76%; --wh: clamp(170px, 30vh, 260px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .breach { display: none; }
  }

  /* STATS BAR */
  .stats-bar {
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(168,212,240,0.1);
    border-bottom: 1px solid rgba(168,212,240,0.1);
    padding: 36px 60px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .stat-item + .stat-item {
    border-left: 1px solid rgba(168,212,240,0.1);
    padding-left: 30px;
  }

  .stat-num {
    font-family: 'Syne', sans-serif;
    font-size: clamp(22px, 2.5vw, 36px);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -1px;
    line-height: 1;
    white-space: nowrap;
  }

  .stat-label {
    font-size: 12px;
    color: rgba(168,212,240,0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  /* MANIFESTO */
  .section {
    padding: 120px 60px;
    position: relative;
  }

  /* Flag-stripe top accent */
  #manifesto { overflow: hidden; }
  .manifesto-flag-stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
      #1A6099 0%, #1A6099 25%,
      #FFFFFF 25%, #FFFFFF 53%,
      #85C8E2 53%, #85C8E2 100%);
  }

  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
  }

  .section-tag::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--accent);
  }

  h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .manifesto-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 60px;
    /** margin-bottom: 72px;
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(133,200,226,0.12); **/
  }

  .manifesto-quote-wrap {
    position: relative;
    padding-left: 28px;
  }

  .manifesto-quote-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #1A6099, #85C8E2);
    border-radius: 2px;
  }

  .quote-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #85C8E2;
    font-weight: 500;
    margin-bottom: 18px;
    display: block;
  }

  .manifesto-quote {
    font-family: 'Syne', sans-serif;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    color: var(--ice-white);
    line-height: 1.35;
    letter-spacing: -0.5px;
    margin-bottom: 28px;
  }

  .manifesto-quote em {
    font-style: normal;
    color: #85C8E2;
  }

  .manifesto-origin {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
  }

  .origin-flag {
    display: flex;
    height: 18px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  .origin-flag span {
    display: block;
    height: 100%;
  }

  .origin-flag .f1 { width: 14px; background: #1A6099; }
  .origin-flag .f2 { width: 16px; background: #FFFFFF; }
  .origin-flag .f3 { width: 26px; background: #85C8E2; }

  .origin-text {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(168,212,240,0.45);
  }

  .manifesto-body p {
    font-size: 16px;
    line-height: 1.85;
    color: rgba(168,212,240,0.72);
    font-weight: 300;
    margin-bottom: 18px;
  }

  .manifesto-body p strong {
    color: var(--ice-white);
    font-weight: 500;
  }

  /* Pillar cards */
  .manifesto-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .pillar-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(168,212,240,0.09);
    border-radius: 16px;
    padding: 32px 22px 28px;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s, background 0.35s;
    position: relative;
    overflow: hidden;
  }

  .pillar-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 1px 1px 0 0;
  }

  .pillar-blue .pillar-accent  { background: #1A6099; }
  .pillar-white .pillar-accent { background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15)); }
  .pillar-glacier .pillar-accent { background: #85C8E2; }

  .pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  }

  .pillar-blue:hover   { border-color: rgba(26,96,153,0.5);  background: rgba(26,96,153,0.07); }
  .pillar-white:hover  { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
  .pillar-glacier:hover { border-color: rgba(133,200,226,0.4); background: rgba(133,200,226,0.06); }

  .pillar-icon {
    font-size: 26px;
    display: block;
    margin-bottom: 16px;
    line-height: 1;
  }

  .pillar-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
    color: var(--ice-white);
    letter-spacing: 0.3px;
  }

  .pillar-desc {
    font-size: 13px;
    color: rgba(168,212,240,0.52);
    line-height: 1.65;
    font-weight: 300;
  }

  /* ── VOYAGE — pinned, scroll-driven scene ─────────────────────
     The section is taller than the viewport; .voyage-pin sticks to the
     top while the user scrolls through it. JS writes the scroll progress
     (0→1) into --p on .voyage-pin; everything below is driven by --p.
  ───────────────────────────────────────────────────────────────── */
  .voyage {
    position: relative;
    height: 240vh;
    background: var(--dark-water);
  }
  /* The scene is 80% of the viewport tall and sits centred while pinned
     (--ph = pin height; everything inside is sized against it). */
  .voyage-pin {
    --p: 0;
    --ph: 80vh;
    --lead: 0;      /* fraction of the animation played while the section is
                       still scrolling into view (see JS); >0 on phones so the
                       ship is already moving before the scene pins */
    position: -webkit-sticky;
    position: sticky;
    top: 10vh;
    height: var(--ph);
    overflow: hidden;
    isolation: isolate;
  }

  /* Ice wall backdrop, with a very slow pull-back as you scroll */
  .voyage-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .voyage-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 66%;
    transform: scale(calc(1.28 - var(--p) * 0.06));   /* cropped in: less sky & water */
    transform-origin: 50% 60%;
    will-change: transform;
  }
  .voyage-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(7,16,32,0.9) 0%, rgba(7,16,32,0.5) 16%, rgba(7,16,32,0.16) 32%, rgba(7,16,32,0) 46%, rgba(7,16,32,0.06) 72%, rgba(7,16,32,0.92) 100%),
      linear-gradient(90deg,  rgba(7,16,32,0.5) 0%, rgba(7,16,32,0.15) 38%, transparent 62%);
    pointer-events: none;
  }

  /* The ship: a perspective approach driven by scroll progress. It appears
     small and distant at the far left, on the water just in front of the ice
     wall, then comes diagonally toward the camera — sinking lower in frame
     and growing ~2.2× — and sails off through the bottom-right corner.
     bottom: 21.5% puts the hull on the horizon line; translateY/scale move it
     toward the viewer. The high-power terms keep it fully in frame until
     ~70% of the scroll, then it swings close and dives out of the corner. */
  .voyage-ship {
    --x0: -100%;                        /* start (off the left edge) */
    --x1: 85vw;                         /* end (past the right edge)  */
    --s0: 0.65;                         /* starting scale; ends at 1.42 */
    position: absolute;
    left: 0;
    bottom: 21.5%;
    width: clamp(240px, 36vw, 600px);
    z-index: 2;
    transform:
      translateX(calc(var(--x0) + var(--p) * (var(--x1) - var(--x0))))
      translateY(calc(var(--ph) * 0.05 + var(--p) * var(--ph) * 0.11 + var(--p) * var(--p) * var(--p) * var(--p) * var(--ph) * 0.40))
      scale(calc(var(--s0) + var(--p) * 0.3 + var(--p) * var(--p) * var(--p) * (1.12 - var(--s0))));
    transform-origin: 50% 100%;
    will-change: transform;
    pointer-events: none;
  }
  .voyage-ship-bob {
    position: relative;
    transform-origin: 50% 100%;
    animation: shipBob 6s ease-in-out infinite;
  }
  @keyframes shipBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-0.6%) rotate(0.35deg); }
  }
  .voyage-ship-img {
    display: block;
    position: relative;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  }
  .voyage-ship-img img { display: block; width: 100%; height: auto; }

  /* Faint broken reflection below the hull */
  .voyage-ship-reflection {
    position: absolute;
    left: 0; top: 100%;
    width: 100%;
    transform: scaleY(-1);
    transform-origin: 50% 50%;
    opacity: 0.28;
    filter: blur(2.5px) saturate(0.8);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 35%, transparent 65%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 35%, transparent 65%);
  }

  /* Wake trailing from the stern (left end — the ship faces right) + a little bow foam */
  .voyage-wake {
    position: absolute;
    right: 86%;
    top: 100%;
    width: 115%;
    height: 6%;
    margin-top: -2.2%;
    border-radius: 50%;
    background: linear-gradient(270deg, rgba(255,255,255,0.6) 0%, rgba(235,247,255,0.32) 22%, rgba(220,240,255,0.12) 55%, transparent 100%);
    filter: blur(3px);
    opacity: 0.9;
    transform: rotate(-6deg);           /* trails back up toward the distance */
    transform-origin: 100% 50%;
  }
  .voyage-bow {
    position: absolute;
    right: -2%;
    top: 100%;
    width: 16%;
    height: 4%;
    margin-top: -1.5%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.75) 0%, rgba(230,245,255,0.35) 45%, transparent 75%);
    filter: blur(2px);
  }

  /* Headline (top-left, over the darkened sky) fades in over the first
     quarter of the pin; the description + CTA (bottom-left) only arrive
     once the ship has passed, as the payoff of the scene. */
  .voyage-copy {
    position: absolute;
    left: 60px;
    top: calc(var(--ph) * 0.09);
    max-width: 760px;
    z-index: 3;
    opacity: calc((var(--p) - 0.03) * 5);
    transform: translateY(calc((1 - clamp(0, (var(--p) - 0.03) * 5, 1)) * 28px));
  }
  .voyage-copy h2 { margin-bottom: 0; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
  .voyage-more {
    position: absolute;
    left: 60px;
    bottom: calc(var(--ph) * 0.12);
    max-width: 600px;                 /* type matches .hero-sub */
    z-index: 3;
    opacity: calc((var(--p) - 0.84) * 7);
    transform: translateY(calc((1 - clamp(0, (var(--p) - 0.84) * 7, 1)) * 24px));
  }
  .voyage-more p {                   /* same type as .hero-sub */
    font-size: 16px;
    color: #ffffff;
    line-height: 1.7;
    font-weight: 700;
    margin-bottom: 22px;
  }
  .voyage-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid rgba(0,212,255,0.5);
    border-radius: 100px;
    color: var(--accent);
    text-decoration: none;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    backdrop-filter: blur(6px);
    background: rgba(7,16,32,0.35);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
  }
  .voyage-cta span { transition: transform 0.3s; }
  .voyage-cta:hover { background: var(--accent); color: var(--dark-water); border-color: var(--accent); }
  .voyage-cta:hover span { transform: translateX(4px); }

  @media (max-width: 900px) {
    /* Phones: no pinning at all — the scene is a plain 80vh block and the
       ship crosses as the section travels up the viewport (see the JS
       scroll-through branch). Immune to mobile sticky quirks, no scroll
       runway, and Citizenship starts immediately after the scene. */
    .voyage { height: 80vh; }
    .voyage-ship { width: clamp(240px, 70vw, 360px); --x0: -95%; --x1: 60vw; --s0: 0.72; }
    .voyage-copy { left: 24px; right: 24px; top: calc(var(--ph) * 0.07); }
    .voyage-more {
      left: 24px; right: 24px; bottom: calc(var(--ph) * 0.09);
      opacity: calc((var(--p) - 0.88) * 9);
      transform: translateY(calc((1 - clamp(0, (var(--p) - 0.88) * 9, 1)) * 24px));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .voyage { height: auto; padding: 10vh 0; }
    .voyage-pin { position: relative; top: auto; }
    .voyage-bg img { transform: none; }
    .voyage-ship { transform: translate(30vw, 12vh) scale(0.9); }  /* matches a mid-crossing pose */
    .voyage-ship-bob { animation: none; }
    .voyage-copy, .voyage-more { opacity: 1; transform: none; }
  }

  /* CITIZENSHIP */
  .citizenship {
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(168,212,240,0.08);
    border-bottom: 1px solid rgba(168,212,240,0.08);
  }

  .citizenship-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
  }

  .citizenship-visual {
    position: relative;
    aspect-ratio: 1;
    max-width: 460px;
  }

  .globe-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .globe-canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
  }

  .globe-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
  }

  .globe-label {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
  }

  .globe-label .coords {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(0,212,255,0.5);
    text-transform: uppercase;
  }

  .globe-pulse {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0,212,255,0.8), 0 0 60px rgba(0,212,255,0.3);
    animation: globePulse 2s ease-in-out infinite;
  }

  @keyframes globePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(0,212,255,0.8), 0 0 60px rgba(0,212,255,0.3); }
    50% { transform: scale(1.4); box-shadow: 0 0 30px rgba(0,212,255,1), 0 0 80px rgba(0,212,255,0.5); }
  }

  .globe-ring {
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0,212,255,0.4);
    pointer-events: none;
    animation: globeRing 2s ease-out infinite;
  }

  @keyframes globeRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
  }

  .tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tier-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 14px;
    border: 1px solid rgba(168,212,240,0.1);
    background: rgba(255,255,255,0.025);
    transition: all 0.3s;
    cursor: pointer;
  }

  .tier-card:hover {
    border-color: var(--accent);
    background: rgba(0,212,255,0.06);
    transform: translateX(8px);
  }

  .tier-num {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
  }

  .tier-1 { background: rgba(0,212,255,0.15); color: var(--accent); }
  .tier-2 { background: rgba(168,212,240,0.1); color: var(--glacier-blue); }
  .tier-3 { background: rgba(91,143,168,0.1); color: var(--cold-mid); }

  .tier-info h4 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 3px;
  }

  .tier-info p {
    font-size: 12px;
    color: rgba(168,212,240,0.5);
  }

  /* Bootstrap Accordion — themed to match site */
  .tiers .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(168,212,240,0.1);
    --bs-accordion-border-radius: 14px;
    --bs-accordion-btn-bg: rgba(255,255,255,0.025);
    --bs-accordion-btn-color: var(--ice-white);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: rgba(0,212,255,0.06);
    --bs-accordion-active-color: var(--ice-white);
    --bs-accordion-btn-padding-x: 24px;
    --bs-accordion-btn-padding-y: 20px;
    --bs-accordion-body-padding-x: 24px;
    --bs-accordion-body-padding-y: 16px;
  }

  .tiers .accordion-item {
    border-color: rgba(168,212,240,0.1);
    border-radius: 14px !important;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .tiers .accordion-button {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: 'DM Sans', sans-serif;
    border-radius: 14px !important;
    transition: all 0.3s;
  }

  .tiers .accordion-button:not(.collapsed) {
    background: rgba(0,212,255,0.06);
    border-bottom: 1px solid rgba(0,212,255,0.15);
    box-shadow: none;
  }

  .tiers .accordion-button:hover {
    border-color: var(--accent);
    background: rgba(0,212,255,0.06);
  }

  .tiers .accordion-button::after {
    filter: invert(70%) sepia(30%) saturate(500%) hue-rotate(160deg);
    flex-shrink: 0;
  }

  .tiers .accordion-button:not(.collapsed) .tier-num {
    background: rgba(0,212,255,0.3) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(0,212,255,0.3);
  }

  .tiers .accordion-body {
    background: rgba(0,212,255,0.03);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(168,212,240,0.6);
    font-weight: 300;
  }

  /* INFRASTRUCTURE */
  .infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
  }

  .infra-card {
    border-radius: 20px;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
  }

  .infra-card:hover { transform: translateY(-8px); }

  .infra-card.featured {
    grid-row: span 2;
    background: linear-gradient(145deg, rgba(0,212,255,0.12), rgba(26,159,184,0.06));
    border: 1px solid rgba(0,212,255,0.25);
  }

  .infra-card.standard {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(168,212,240,0.1);
  }

  .infra-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: rgba(0,212,255,0.1);
  }

  .infra-card h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
  }

  .infra-card p {
    font-size: 14px;
    color: rgba(168,212,240,0.6);
    line-height: 1.7;
  }

  .featured .infra-card-num {
    position: absolute;
    top: 28px; right: 28px;
    font-family: 'Syne', sans-serif;
    font-size: 80px;
    font-weight: 800;
    color: rgba(0,212,255,0.06);
    line-height: 1;
    letter-spacing: -3px;
  }

  .progress-bar {
    margin-top: 24px;
  }

  .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(168,212,240,0.5);
    margin-bottom: 8px;
  }

  .progress-track {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 100px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--accent), var(--glacier-blue));
    transition: width 1.5s ease;
  }

  /* CONNECT / CTA */
  .connect {
    text-align: center;
    padding: 140px 60px;
    position: relative;
    overflow: hidden;
  }

  .connect::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,212,255,0.1) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .connect h2 {
    font-size: clamp(40px, 6vw, 80px);
    max-width: 800px;
    margin: 0 auto 24px;
    letter-spacing: -2px;
  }

  .connect p {
    font-size: 18px;
    color: rgba(168,212,240,0.65);
    max-width: 500px;
    margin: 0 auto 48px;
    font-weight: 300;
    line-height: 1.7;
  }

  .connect-form {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
  }

  .connect-form input {
    flex: 1;
    padding: 16px 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(168,212,240,0.2);
    border-right: none;
    border-radius: 100px 0 0 100px;
    color: var(--ice-white);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
  }

  .connect-form input::placeholder { color: rgba(168,212,240,0.3); }
  .connect-form input:focus { border-color: rgba(0,212,255,0.4); }

  .connect-form button {
    padding: 16px 30px;
    background: var(--accent);
    border: none;
    border-radius: 0 100px 100px 0;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--dark-water);
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
  }

  .connect-form button:hover { background: white; }

  /* FOOTER */
  footer {
    padding: 40px 60px;
    border-top: 1px solid rgba(168,212,240,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-left {
    font-size: 13px;
    color: rgba(168,212,240,0.3);
  }

  .footer-links {
    display: flex;
    gap: 28px;
  }

  .footer-links a {
    font-size: 13px;
    color: rgba(168,212,240,0.4);
    text-decoration: none;
    transition: color 0.3s;
  }

  .footer-links a:hover { color: var(--accent); }

  /* SECTION REVEAL ANIMATION */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* HAMBURGER MENU */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 110;
    background: none;
    border: none;
    padding: 0;
  }

  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ice-white);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Responsive */
  @media (max-width: 900px) {
    nav { padding: 18px 24px; }
    .hamburger { display: flex; }

    .nav-links {
      position: fixed;
      top: 0; right: 0;
      width: 280px;
      height: 100vh;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      background: rgba(7,16,32,0.97);
      backdrop-filter: blur(30px);
      padding: 90px 32px 40px;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border-left: 1px solid rgba(168,212,240,0.1);
      box-shadow: -10px 0 40px rgba(0,0,0,0.3);
    }

    .nav-links.open {
      transform: translateX(0);
    }

    .nav-links li {
      width: 100%;
    }

    .nav-links a {
      display: block;
      padding: 16px 0;
      font-size: 16px;
      border-bottom: 1px solid rgba(168,212,240,0.06);
    }

    .nav-links a::after { display: none; }

    .nav-cta {
      margin-top: 16px;
      text-align: center !important;
      display: block !important;
    }

    .mobile-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 99;
    }

    .mobile-overlay.open {
      display: block;
    }

    .section { padding: 80px 24px; }
    .stats-bar { padding: 30px 24px; grid-template-columns: repeat(2, 1fr); }
    .stats-bar .stat-item:first-child { grid-column: 1 / -1; }
    .stat-num { font-size: 28px; }
    .stat-item + .stat-item { border-left: none; padding-left: 0; }
    .manifesto-hero, .citizenship-inner { grid-template-columns: 1fr; gap: 40px; }
    .manifesto-pillars { grid-template-columns: 1fr 1fr; gap: 14px; }
    .infrastructure-grid { grid-template-columns: 1fr 1fr; }
    .infra-card.featured { grid-row: span 1; }
    h1 { letter-spacing: -1px; }
    .connect { padding: 80px 24px; }
    footer { flex-direction: column; gap: 20px; padding: 30px 24px; }
    .hero-content { padding: 100px 24px 0; }
  }
  /* VIDEO SECTION */
  .video-section {
    padding: 120px 60px;
    position: relative;
    overflow: hidden;
  }

  .video-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 60%, rgba(0,212,255,0.03), transparent);
    pointer-events: none;
  }

  .video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
  }

  .video-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(168,212,240,0.1);
    box-shadow: 0 16px 50px rgba(0,0,0,0.25);
    transition: all 0.4s ease;
    aspect-ratio: 16/9;
  }

  .video-card:hover {
    border-color: rgba(0,212,255,0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 30px rgba(0,212,255,0.08);
    transform: translateY(-4px);
  }

  .video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .video-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px 20px;
    background: linear-gradient(transparent, rgba(7,16,32,0.85));
    pointer-events: none;
  }

  .video-label h5 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ice-white);
    margin-bottom: 2px;
  }

  .video-label p {
    font-size: 12px;
    color: rgba(168,212,240,0.5);
    margin: 0;
  }

  .video-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(7,16,32,0.6);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 600;
    color: var(--bs-red);
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .video-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-red);
    animation: dotBlink 1.2s step-end infinite;
  }

  @media (max-width: 900px) {
    .video-section { padding: 80px 24px; }
    .video-grid { grid-template-columns: 1fr; gap: 20px; }
  }

  /* TIMELINE */
  #timeline {
    background: #eaf1f7;
    color: #071020;
    padding: 100px 0;
  }

  #timeline .section-tag { color: #1A6099; }
  #timeline .section-tag::before { background: #1A6099; }
  #timeline h2 { color: #071020; }

  .tl-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 60px;
    margin-bottom: 52px;
    gap: 24px;
  }

  .tl-subtitle {
    font-size: 15px;
    color: rgba(7,16,32,0.45);
    line-height: 1.7;
    max-width: 440px;
    font-weight: 300;
    margin-top: 12px;
  }

  .tl-nav {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }

  .tl-btn-prev, .tl-btn-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(26,96,153,0.25);
    background: #fff;
    color: #1A6099;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .tl-btn-prev:hover, .tl-btn-next:hover {
    background: #1A6099;
    color: #fff;
    border-color: #1A6099;
  }

  /* Scrollable outer */
  .tl-scroll-outer {
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 60px;
    scrollbar-width: thin;
    scrollbar-color: rgba(26,96,153,0.2) transparent;
    cursor: grab;
    user-select: none;
  }

  .tl-scroll-outer:active { cursor: grabbing; }
  .tl-scroll-outer::-webkit-scrollbar { height: 4px; }
  .tl-scroll-outer::-webkit-scrollbar-track { background: transparent; }
  .tl-scroll-outer::-webkit-scrollbar-thumb {
    background: rgba(26,96,153,0.25);
    border-radius: 2px;
  }

  /* Track row — flex of event columns */
  .tl-track {
    display: flex;
    min-width: max-content;
    position: relative;
  }

  /*
   * Horizontal spine line.
   * Sits at: .tl-upper height (210px) + half .tl-dot-wrap height (14px) = 224px from top.
   */
  .tl-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 224px;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      #1A6099 6%,
      #5b8fa8 40%,
      #85C8E2 75%,
      transparent
    );
    z-index: 0;
  }

  /* Event column */
  .tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 290px;
    flex-shrink: 0;
    padding: 0 14px;
    box-sizing: border-box;
    position: relative;
  }

  /* Upper card slot — card inside is bottom-aligned with a gap to the spine */
  .tl-upper {
    height: 210px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 16px;
    box-sizing: border-box;
  }

  /* Dot row (on the spine) */
  .tl-dot-wrap {
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }

  /* Connector: above item → vertical line rises from dot center to card bottom */
  .tl-item.above .tl-dot-wrap::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 30px;
    background: linear-gradient(to top, #1A6099, rgba(26,96,153,0.08));
  }

  /* Connector: below item → vertical line descends from dot center to card top */
  .tl-item.below .tl-dot-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 30px;
    background: linear-gradient(to bottom, #1A6099, rgba(26,96,153,0.08));
  }

  /* Lower card slot — card inside is top-aligned with a gap to the spine */
  .tl-lower {
    height: 210px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 16px;
    box-sizing: border-box;
  }

  /* The dot */
  .tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #1A6099;
    transition: background 0.25s;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }

  .tl-item.open .tl-dot {
    background: #1A6099;
  }

  /* Card */
  .tl-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 20px 18px;
    box-shadow: 0 2px 8px rgba(7,16,32,0.07), 0 1px 2px rgba(7,16,32,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  .tl-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #1A6099, #85C8E2);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tl-item.above:hover .tl-card { transform: translateY(-5px); }
  .tl-item.below:hover .tl-card { transform: translateY(5px); }

  .tl-item:hover .tl-card {
    box-shadow: 0 14px 36px rgba(7,16,32,0.11), 0 4px 10px rgba(7,16,32,0.06);
  }

  .tl-item:hover .tl-card::after { opacity: 0.45; }
  .tl-item.open .tl-card::after { opacity: 1 !important; }

  /* Featured card */
  .tl-item.featured .tl-card { border-top: 2.5px solid #1A6099; }

  /* Small flag badge (top-right corner of card) */
  .tl-flag {
    position: absolute;
    top: 13px;
    right: 13px;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    display: block;
  }

  .tl-card-year {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 7px;
    color: #1A6099;
    opacity: 0.7;
  }

  .tl-item.featured .tl-card-year { opacity: 1; }

  .tl-card-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #071020;
    margin: 0 0 9px;
    line-height: 1.35;
  }

  .tl-item.featured .tl-card-title { color: #1A6099; }

  .tl-card-desc {
    font-size: 12.5px;
    line-height: 1.72;
    color: rgba(7,16,32,0.5);
    font-weight: 300;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.38s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }

  .tl-item.open .tl-card-desc {
    max-height: 220px;
    opacity: 1;
    margin-top: 10px;
  }

  /* Mobile: vertical left-spine layout */
  @media (max-width: 768px) {
    .tl-header { padding: 0 24px; flex-direction: column; align-items: flex-start; }
    .tl-nav { display: none; }

    .tl-scroll-outer {
      padding: 0;
      cursor: default;
      overflow-x: visible;
    }

    .tl-scroll-outer:active { cursor: default; }

    .tl-track {
      flex-direction: column;
      min-width: 0;
      padding: 0 24px 0 52px;
      gap: 24px;
    }

    .tl-track::before {
      top: 0; bottom: 0;
      left: 19px; right: auto;
      width: 2px; height: auto;
      background: linear-gradient(
        to bottom,
        transparent,
        #1A6099 5%,
        #5b8fa8 50%,
        #85C8E2 95%,
        transparent
      );
    }

    .tl-item {
      flex-direction: row;
      width: 100%;
      height: auto;
      padding: 0;
      align-items: flex-start;
      gap: 16px;
    }

    .tl-upper, .tl-lower { height: auto; padding: 0; }

    .tl-item.above .tl-upper  { display: flex; flex: 1; }
    .tl-item.above .tl-lower  { display: none; }
    .tl-item.below .tl-lower  { display: flex; flex: 1; }
    .tl-item.below .tl-upper  { display: none; }

    .tl-dot-wrap {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      padding-top: 12px;
      order: -1;
    }

    .tl-item.above .tl-dot-wrap::before,
    .tl-item.below .tl-dot-wrap::after { display: none; }

    .tl-item.above:hover .tl-card,
    .tl-item.below:hover .tl-card { transform: none; }
  }

  /* IMAGE GALLERY */
  .gallery-section {
    padding: 120px 60px;
    position: relative;
    overflow: hidden;
  }

  .gallery-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(0,212,255,0.04), transparent);
    pointer-events: none;
  }

  .gallery-carousel {
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(168,212,240,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(0,212,255,0.05);
    position: relative;
  }

  .gallery-carousel .carousel-item {
    position: relative;
    aspect-ratio: 16/7;
    background: var(--deep-ocean);
  }

  .gallery-carousel .carousel-item svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .gallery-carousel .carousel-caption {
    background: linear-gradient(transparent, rgba(7,16,32,0.9));
    bottom: 0; left: 0; right: 0;
    padding: 40px 40px 30px;
    text-align: left;
  }

  .gallery-carousel .carousel-caption h5 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
  }

  .gallery-carousel .carousel-caption p {
    font-size: 13px;
    color: rgba(168,212,240,0.6);
    margin: 0;
  }

  .gallery-carousel .carousel-control-prev,
  .gallery-carousel .carousel-control-next {
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    background: rgba(7,16,32,0.7);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 50%;
    opacity: 0.8;
    transition: all 0.3s;
    margin: 0 16px;
  }

  .gallery-carousel .carousel-control-prev:hover,
  .gallery-carousel .carousel-control-next:hover {
    opacity: 1;
    background: rgba(0,212,255,0.15);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0,212,255,0.2);
  }

  .gallery-carousel .carousel-indicators {
    margin-bottom: 16px;
  }

  .gallery-carousel .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: rgba(168,212,240,0.3);
    border: none;
    transition: all 0.3s;
  }

  .gallery-carousel .carousel-indicators .active {
    background: var(--accent);
    width: 40px;
    box-shadow: 0 0 8px rgba(0,212,255,0.4);
  }

  .gallery-counter {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,212,255,0.7);
    background: rgba(7,16,32,0.6);
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid rgba(0,212,255,0.15);
    z-index: 10;
    backdrop-filter: blur(10px);
    letter-spacing: 1px;
  }

  @media (max-width: 900px) {
    .gallery-section { padding: 80px 24px; }
    .gallery-carousel .carousel-caption { padding: 30px 20px 24px; }
    .gallery-carousel .carousel-caption h5 { font-size: 15px; }
    .gallery-carousel .carousel-control-prev,
    .gallery-carousel .carousel-control-next {
      width: 38px; height: 38px; margin: 0 8px;
    }
  }

  /* BREAKING NEWS BANNER */
  .breaking-news {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: linear-gradient(90deg, rgba(0,212,255,0.12) 0%, rgba(7,16,32,0.95) 20%, rgba(7,16,32,0.95) 80%, rgba(0,212,255,0.12) 100%);
    border-bottom: 1px solid rgba(0,212,255,0.2);
    padding: 10px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    backdrop-filter: blur(20px);
    animation: bannerSlideDown 0.6s ease forwards;
    overflow: hidden;
  }

  .breaking-news::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 200%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: shimmerLine 3s linear infinite;
  }

  @keyframes shimmerLine {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
  }

  @keyframes bannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .breaking-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--accent);
    color: var(--dark-water);
    border-radius: 4px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    animation: tagPulse 2s ease-in-out infinite;
  }

  .breaking-tag::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--dark-water);
    animation: dotBlink 1.2s step-end infinite;
  }

  @keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  @keyframes tagPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,0.3); }
    50% { box-shadow: 0 0 16px rgba(0,212,255,0.6); }
  }

  .breaking-text {
    font-size: 12px;
    color: rgba(240,246,255,0.75);
    font-weight: 300;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breaking-text strong {
    color: var(--ice-white);
    font-weight: 500;
  }

  .breaking-close {
    background: none;
    border: none;
    color: rgba(168,212,240,0.4);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
    flex-shrink: 0;
    margin-left: auto;
  }

  .breaking-close:hover { color: var(--accent); }

  /* Push nav down when banner is visible */
  body.has-banner nav { top: 38px; }
  body.has-banner .hero { margin-top: 38px; }

  @media (max-width: 900px) {
    .breaking-news { padding: 8px 16px; gap: 10px; }
    .breaking-text { font-size: 11px; }
    body.has-banner nav { top: 36px; }
    body.has-banner .hero { margin-top: 36px; }
  }

  /* ====================================
     DOWNLOAD SECTION
     ==================================== */
  .download-section {
    padding: 120px 40px;
    text-align: center;
  }

  .download-buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 48px;
  }

  .download-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 32px;
    background: rgba(168, 212, 240, 0.05);
    border: 1px solid rgba(168, 212, 240, 0.2);
    border-radius: 16px;
    color: var(--ice-white);
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 240px;
    cursor: not-allowed;
    opacity: 0.6;
  }

  .download-btn:hover {
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.05);
  }

  .download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glacier-blue);
    flex-shrink: 0;
  }

  .download-text {
    text-align: left;
    flex: 1;
  }

  .download-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--cold-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

  .download-store {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--ice-white);
    letter-spacing: -0.5px;
  }

  .coming-soon-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: rgba(0, 212, 255, 0.9);
    color: var(--dark-water);
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
  }

  @media (max-width: 768px) {
    .download-section {
      padding: 80px 24px;
    }

    .download-buttons {
      flex-direction: column;
      width: 100%;
      max-width: 320px;
      margin: 48px auto 0;
    }

    .download-btn {
      width: 100%;
      min-width: unset;
    }
  }

  /* ── CITIZEN CARDS (second hero) ─────────────────────────────
     Three engraved metal cards fly into place as you scroll. JS writes
     --p (0→1, eased) onto each .ccard-slot from the slot's own position in
     the viewport; --d staggers the three; --fx/--fy/--fr/--ry are where the
     card flies in from (offset, roll, yaw). The slot is never transformed,
     so measuring it can't feed back into the animation. */
  .cards-hero {
    position: relative;
    min-height: 100vh;
    padding: 110px 60px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;                 /* cards start off-screen — keep them clipped to this section */
    background:
      radial-gradient(ellipse 60% 50% at 50% 62%, rgba(0,212,255,0.10), transparent 70%),
      linear-gradient(180deg, var(--dark-water) 0%, var(--deep-ocean) 100%);
  }
  .cards-copy { position: relative; z-index: 3; max-width: 980px; }
  .cards-copy .section-tag { justify-content: center; }
  .cards-hero h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    letter-spacing: -2px;
    margin-bottom: 18px;
  }
  .cards-copy p {
    font-size: 17px;
    color: rgba(168,212,240,0.7);
    font-weight: 300;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 600px;
  }

  .cards-row {
    display: flex;
    align-items: flex-end;            /* labels share a baseline; the larger gold card rises above */
    justify-content: center;
    width: 100%;
    max-width: 1240px;
    margin-top: 48px;
    perspective: 1400px;
  }
  .ccard-slot {
    flex: 0 1 400px;
    width: 400px;
    max-width: 33%;
    --p: 0;
    --d: 0;
    --q: clamp(0, calc((var(--p) - var(--d)) / (1 - var(--d))), 1);   /* this card's own progress */
  }
  .ccard-slot-silver   { --fx: -70vw; --fy: 28vh; --fr: -30deg; --ry: -50deg; --d: 0; }
  .ccard-slot-gold     { --fx: 0vw;   --fy: 75vh; --fr: 0deg;   --ry: 0deg;   --d: 0.12; flex-basis: 470px; width: 470px; max-width: 38%; margin: 0 -34px; position: relative; z-index: 2; }
  .ccard-slot-titanium { --fx: 70vw;  --fy: 28vh; --fr: 30deg;  --ry: 50deg;  --d: 0.24; }

  .ccard {
    display: block;
    text-decoration: none;
    color: inherit;
    transform:
      translate3d(calc((1 - var(--q)) * var(--fx)), calc((1 - var(--q)) * var(--fy)), 0)
      rotate(calc((1 - var(--q)) * var(--fr)))
      rotateY(calc((1 - var(--q)) * var(--ry)));
    opacity: clamp(0, calc(var(--q) * 1.6), 1);
    will-change: transform, opacity;
    transform-style: preserve-3d;
  }
  .ccard-img {
    display: block;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 30px 38px rgba(0,0,0,0.6)) drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  }
  .ccard-img img { display: block; width: 100%; height: auto; }
  .ccard:hover .ccard-img { transform: translateY(-14px); }
  .ccard-label {
    display: block;
    margin-top: 22px;
    line-height: 1.4;
  }
  .ccard-label strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ice-white);
  }
  .ccard-label span {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(168,212,240,0.55);
    margin-top: 4px;
  }
  .ccard-buy {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    margin: 18px auto 0;
    opacity: clamp(0, calc((var(--q) - 0.66) / 0.34), 1);
    pointer-events: none;             /* clickable once the card has landed (.is-landed from JS) */
  }
  .ccard-slot.is-landed .ccard-buy { pointer-events: auto; }
  /* PayPal's hosted-button markup is rendered inline (only the checkout buttons are iframes).
     Drop its product-image carousel — our card sits right above it — and set the item
     title/price in the site's type. PayPal styles these by id, hence the !importants. */
  .ccard-buy [id^="carousel-container-"] { display: none !important; }
  .ccard-buy #checkout-button,            /* PayPal's inline guest card-checkout button */
  .ccard-buy .paypal-card-art { display: none !important; }   /* "Visa · Mastercard · +more" strip */
  .ccard-buy [id^="paypal-form-fields-container-"][id$="-wrapper"] { margin: 0 !important; }
  .ccard-buy .item-header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 14px !important;
    font-family: 'DM Sans', sans-serif;
  }
  .ccard-buy .item-title {
    max-width: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1px;
    color: rgba(168,212,240,0.55) !important;
  }
  .ccard-buy .price-container { max-width: none !important; text-align: center !important; }
  .ccard-buy #price-label { justify-content: center !important; }
  .ccard-buy #price-text {
    font-family: 'Syne', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: var(--accent) !important;
  }

  .cards-cta {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 56px;
    padding: 14px 28px;
    border: 1px solid rgba(0,212,255,0.45);
    border-radius: 100px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent);
    text-decoration: none;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
  }
  .cards-cta:hover { background: var(--accent); color: var(--dark-water); border-color: var(--accent); }

  @media (max-width: 900px) {
    .cards-hero { min-height: 0; padding: 80px 24px 72px; }
    .cards-hero h2 { letter-spacing: -1px; }
    .cards-row { flex-direction: column; gap: 28px; margin-top: 36px; perspective: 900px; }
    .ccard-slot, .ccard-slot-gold { flex: none; width: min(80vw, 360px); max-width: none; margin: 0; --d: 0; }
    /* stacked: alternate the side each card flies in from */
    .ccard-slot-silver   { --fx: -60vw; --fy: 8vh; --fr: -18deg; --ry: -35deg; }
    .ccard-slot-gold     { --fx: 60vw;  --fy: 8vh; --fr: 18deg;  --ry: 35deg; }
    .ccard-slot-titanium { --fx: -60vw; --fy: 8vh; --fr: -18deg; --ry: -35deg; }
    .ccard-label { margin-top: 14px; }
    .ccard-buy { margin-top: 14px; }
    .cards-cta { margin-top: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ccard { transform: none; opacity: 1; }
    .ccard-buy { opacity: 1; pointer-events: auto; }
  }