/* Global mono uplift — every JetBrains Mono use becomes bolder + brighter */
  .nav-tag,
  .section-tag,
  .pillar-num,
  .cap-num,
  .bk-tag,
  .bk-stat-label,
  .bk-link,
  .footer-col h3,
  .vision-attr,
  .cap-header-meta,
  .tech-panel,
  .tech-panel-header,
  .tech-row,
  .footer-bottom,
  .hero-meta-bar,
  .hero-meta-bar span,
  .footer-col a,
  .footer-col p {
    font-weight: 700 !important;
  }
  /* Brighten footer text */
  .footer-col a, .footer-col p { color: rgba(255,255,255,0.92) !important; }
  .footer-col a:hover, .footer-col a:focus { color: var(--accent) !important; }
  .footer-col h3 { color: var(--accent) !important; opacity: 1 !important; }
  /* Brighten world map chrome */


  /* Brighten hero subtitle */
  .hero-sub { color: rgba(255,255,255,0.95) !important; font-weight: 500 !important; }
  /* Brighten dim chrome text */
  .hero-meta-bar { color: rgba(255,255,255,0.9) !important; }
  .hero-meta-bar span { color: rgba(255,255,255,0.9) !important; }


  :root {
    --bg: #050505;
    --surface: rgba(255,255,255,0.022);
    --surface-2: rgba(255,255,255,0.045);
    /* Hairlines, not a flat grey rule: a solid #1F1F1F border reads as a cheap
       divider, a low-alpha white hairline reads as a machined edge. */
    --line: rgba(255,255,255,0.09);
    --line-strong: rgba(255,255,255,0.16);
    --text: #F4F4F2;
    --muted: #6E6E6B;
    --muted-2: #93938F;
    --accent: #C7FF3F;
    --accent-glow: rgba(199, 255, 63, 0.35);
    --accent-soft: rgba(199, 255, 63, 0.08);
    --danger: #FF3366;
    --warning: #FFAA00;
    --success: #00FF88;
  }

  :root { --ease: cubic-bezier(0.32, 0.72, 0, 1); }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html {
    color-scheme: dark;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
  }
  body {
    font-family: 'Manrope', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--accent); color: #000; }

  /* Global keyboard-only focus indicator (does not affect mouse clicks) */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ================= INTRO ================= */
  /* ================= INTRO (Cinematic) ================= */


  /* Atmospheric film vignette */


  /* Film grain */


  /* Horizon line — very subtle */


  /* IMAX-scale wordmark — letters emerge from black, far apart, then collapse together */


  /* Logo variant: SVG image replaces letter spans */


  /* ===== Cinematic intro: letterbox bars ===== */


  /* ===== Cinematic intro: sweep line ===== */


  /* ===== Cinematic intro: timecode ===== */


  /* ===== Cinematic intro: iris-out exit ===== */


  /* ================= NAV ================= */
  .nav {
    /* Breakpoints override these two; the safe-area rule below reads them via max(),
       so notch insets never fight the responsive padding. */
    --nav-pad-y: 1.2rem;
    --nav-pad-x: 2.5rem;
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: var(--nav-pad-y) var(--nav-pad-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(6, 6, 6, 0.75);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    animation: fadeDown 0.6s ease 1.5s forwards;
  }

  .nav-brand { display: flex; align-items: center; gap: 0.8rem; }

  .nav-logo {
    height: 36px;
    width: auto;
    display: block;
  }

  .nav-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--accent);
    border-radius: 2px;
  }

  .nav-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    list-style: none;
    align-items: center;
  }
  .nav-links li { flex: 0 0 auto; }

  .nav-links a {
    color: var(--text);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
    transition: color 0.25s var(--ease);
  }
  .nav-links a:hover { color: var(--accent); }

  .nav-cta {
    /* inline-flex, not inline: a wrapped inline <a> splits its pill background
       into two fragments (the "→" breaks onto its own rounded box). */
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--accent) !important;
    border: 1px solid rgba(199,255,63,0.45);
    padding: 7px 17px;
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .nav-cta:hover {
    border-color: var(--accent);
    background: rgba(199,255,63,0.08);
  }

  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ================= HERO ================= */
  .hero {
    padding: 5rem 3rem 2.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%);
    pointer-events: none;
  }

  .hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 70%);
    top: 20%; right: -100px;
    pointer-events: none;
    filter: blur(40px);
    opacity: 0;
    animation: glowIn 2s ease 1.6s forwards;
  }
  @keyframes glowIn { to { opacity: 1; } }

  .hero-meta-bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--muted);
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    animation: fadeUp 0.7s ease 0.1s forwards;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Bull that gallops along the top bar */
  .runner {
    position: absolute;
    top: 100%;
    left: 0;
    width: 72px;
    height: 48px;
    pointer-events: none;
    z-index: 4;
    animation: runnerRun 9s linear infinite, runnerGallop 0.34s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
  }
  @keyframes runnerGallop {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
  }
  .runner-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
    mix-blend-mode: screen;
    filter: contrast(1.6) brightness(1.15);
  }
  .runner-trail {
    position: absolute;
    top: 25%;
    right: 100%;
    width: 90px;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 6px;
    pointer-events: none;
  }
  .runner-trail span {
    display: block;
    height: 1.5px;
    background: linear-gradient(to left, var(--accent), transparent);
    border-radius: 2px;
    opacity: 0;
    animation: trailPulse 0.5s ease-out infinite;
  }
  .runner-trail span:nth-child(1) { width: 60%; animation-delay: 0s; }
  .runner-trail span:nth-child(2) { width: 95%; height: 2px; animation-delay: 0.1s; }
  .runner-trail span:nth-child(3) { width: 75%; animation-delay: 0.2s; }
  .runner-trail span:nth-child(4) { width: 50%; animation-delay: 0.3s; }
  @keyframes runnerRun {
    from { left: -80px; }
    to { left: calc(100% + 40px); }
  }
  @keyframes trailPulse {
    0%   { opacity: 0; transform: translateX(14px); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .runner { animation: none; left: 12px; }
    .runner-trail { display: none; }
  }
  /* Phones: shrink the bull and give it clearance so it never sits on the headline. */
  @media (max-width: 720px) {
    .runner { width: 48px; height: 32px; }
    .runner-trail { width: 56px; }
    .hero-meta-bar { margin-bottom: 38px; }
  }


  .hero-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0;
    position: relative;
    z-index: 2;
  }

  /* ================= HERO HUD (right side) ================= */


  /* Concentric radar rings */


  /* Sweeping radar wedge */


  /* Crosshair lines */


  /* Center sneaker SVG silhouette */


  /* Pulsing data nodes orbiting around shoe */


  /* Corner readouts */


  /* Scrolling data feed */


  @media (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; }


  }

  /* ================= HERO RESCUE PICTORIAL ================= */


  .hero-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 3.6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    animation: fadeUp 0.9s ease 0.25s forwards;
  }

  .hero-title .accent {
    color: var(--accent);
    display: inline-block;
  }

  .hero-title .outline {
    -webkit-text-stroke: 1.5px var(--text);
    color: transparent;
  }

  .hero-divider {
    width: 64px;
    height: 3px;
    background: var(--accent);
    margin: 1.75rem 0;
    box-shadow: 0 0 18px var(--accent-glow);
    opacity: 0;
    animation: fadeUp 0.7s ease 0.5s forwards;
  }

  .hero-sub {
    max-width: 560px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--muted-2);
    opacity: 0;
    animation: fadeUp 0.7s ease 0.6s forwards;
  }

  /* TICKER */


  /* Runner that jogs across the top of the ticker strip */


  /* Speed lines streaming behind */


  /* HERO METRICS */


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

  /* ================= SECTIONS ================= */
  section { padding: 5.5rem 3rem; position: relative; }

  .section-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--surface);
  }
  .section-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }

  .section-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 2.5rem;
    max-width: 18ch;
  }
  .section-title .accent { color: var(--accent); }
  .section-title .outline { -webkit-text-stroke: 1.5px var(--text); color: transparent; }

  /* ================= ABOUT ================= */
  .about {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .about-inner {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
    max-width: 1400px;
    margin: 0 auto;
  }

  .about-prose p {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--muted-2);
    margin-bottom: 1.4rem;
  }
  .about-prose strong { color: var(--text); font-weight: 500; }
  .about-prose .highlight { color: var(--accent); font-weight: 500; }

  /* ================= WHO WE ARE ================= */
  .wwa-inner { max-width: 1400px; margin: 0 auto; }
  .wwa-lede {
    max-width: 820px; margin: 1.5rem 0 0;
    font-size: 1.08rem; line-height: 1.8; color: var(--muted-2);
  }
  .wwa-lede strong { color: var(--text); font-weight: 500; }
  .wwa-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
  .wwa-card {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 2rem 1.75rem;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .wwa-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .wwa-card-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.9rem;
  }
  .wwa-card h3 { font-size: 1.2rem; margin: 0 0 0.7rem; color: var(--text); letter-spacing: -0.01em; }
  .wwa-card p { font-size: 0.98rem; line-height: 1.7; color: var(--muted-2); margin: 0; }

  .wwa-values { margin-top: 2.5rem; }
  .wwa-values-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 1.2rem;
  }
  .wwa-values ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; max-width: 880px; }
  .wwa-values li {
    position: relative; padding-left: 1.4rem; line-height: 1.65;
    color: var(--muted-2); font-size: 0.98rem;
  }
  .wwa-values li::before {
    content: '▲'; position: absolute; left: 0; top: 0.2rem;
    color: var(--accent); font-size: 0.7rem;
  }
  .wwa-values strong { color: var(--text); font-weight: 500; }

  @media (max-width: 720px) { .wwa-cards { grid-template-columns: 1fr; } }

  /* WORLD MAP */


  .tech-panel {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
  }

  .tech-panel-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }


  .tech-row {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
  }
  .tech-row:last-child { border-bottom: none; }
  .tech-row .key { color: var(--muted-2); }
  .tech-row .val { color: var(--text); }
  .tech-row .val.acc { color: var(--accent); }


  /* ================= STATS BAR ================= */


  /* ================= VISION ================= */
  .vision {
    text-align: center;
    padding: 6rem 2.5rem 2.5rem;
    position: relative;
  }

  .vision-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, var(--accent-soft), transparent 60%);
    pointer-events: none;
    filter: blur(60px);
  }

  .vision-quote {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.8vw, 3.2rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    max-width: 22ch;
    margin: 0 auto 2.5rem;
    position: relative;
    z-index: 1;
  }
  .vision-quote .accent { color: var(--accent); }

  .vision-attr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--muted);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }

  .pillars {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border: 1px solid var(--line);
    position: relative;
    z-index: 1;
  }

  .pillar {
    padding: 3rem 2rem;
    background: var(--bg);
    transition: background 0.3s var(--ease);
  }
  .pillar:hover { background: var(--surface); }

  .leaf-inline {
    display: inline-block;
    vertical-align: -0.08em;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.18em;
    color: var(--accent);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }


  .pillar-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 1.5rem;
  }

  .pillar-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: -0.005em;
  }

  .pillar-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--muted-2);
  }

  /* ================= NEURAL ================= */


  /* ================= CAPABILITIES ================= */
  .capabilities {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .cap-header {
    max-width: 1300px;
    margin: 0 auto 4rem;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .cap-header-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 0.15em;
  }

  .cap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    max-width: 1300px;
    margin: 0 auto;
  }

  .cap-card {
    background: var(--bg);
    padding: 3rem;
    transition: background 0.4s var(--ease);
    cursor: default;
    position: relative;
    overflow: hidden;
  }

  .cap-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    background: radial-gradient(circle at top right, var(--accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
  }

  .cap-card:hover { background: var(--surface); }
  .cap-card:hover::before { opacity: 1; }

  .cap-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
  }

  .cap-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1.5rem;
    color: var(--accent);
  }
  .cap-icon svg {
    width: 100%; height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cap-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1;
    letter-spacing: -0.005em;
  }

  .cap-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--muted-2);
    margin-bottom: 1.5rem;
  }


  /* ================= WHAT WE QUOTE ================= */
  /* Brands are named in text, never as logos: a logo wall implies an
     authorisation CAPRA does not hold. The pills below are a record of what
     has recently been quoted, and the disclaimer beneath them says so. */

  .quote-brands {
    list-style: none;
    max-width: 900px;
    margin: 2.4rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
  }
  .quote-brands li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
  }
  .quote-brands li:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .quote-note {
    max-width: 720px;
    margin: 1.6rem auto 0;
    font-size: 0.76rem;
    line-height: 1.7;
    color: var(--muted);
    text-align: center;
  }
  @media (max-width: 720px) {
    .quote-brands { gap: 0.45rem; }
    .quote-brands li { font-size: 0.68rem; padding: 0.45rem 0.85rem; }
  }
  .quote-lede {
    max-width: 720px;
    margin: 2.2rem auto 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--muted-2);
    text-align: center;
  }


  /* ================= BULL KICKS ================= */


  .bk-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    padding: 4rem;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  .bk-card::before {
    content: '';
    position: absolute;
    top: -50%; right: -30%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--accent-soft), transparent 60%);
    pointer-events: none;
    filter: blur(40px);
  }

  .bk-content { position: relative; z-index: 1; }

  .bk-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.25em;
    color: var(--accent);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--accent);
    border-radius: 2px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
  }

  .bk-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 1.5rem;
    letter-spacing: -0.015em;
  }
  .bk-title .accent { color: var(--accent); }


  .bk-desc {
    color: var(--muted-2);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 480px;
  }

  .bk-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .bk-stat-num {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--text);
    line-height: 1;
  }

  .bk-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: #9a9a9a;
    text-transform: uppercase;
    margin-top: 0.4rem;
  }

  .bk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #000;
    background: var(--accent);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
    font-weight: 500;
  }
  .bk-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 32px var(--accent-glow);
  }

  .bk-visual {
    position: relative;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    animation: bkThunderGlow 4.5s steps(1) infinite;
  }
  /* Lightning bolt SVG layer */


  /* White flash overlay on strike */
  .bk-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    animation: bkLightningFlash 4.5s steps(1) infinite;
  }
  /* Vignette */
  .bk-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
    z-index: 3;
  }
  .bk-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative;
    z-index: 1;
    animation: bkThunderShake 4.5s steps(1) infinite, bkChargeBuild 4.5s ease-in-out infinite;
  }

  /* Thunder cycle: long charge → sudden strike → quick aftershock */
  @keyframes bkLightningFlash {
    0%, 64%   { opacity: 0; }
    66%       { opacity: 1; }      /* main strike */
    68%       { opacity: 0; }
    70%       { opacity: 0.7; }    /* secondary flicker */
    71%       { opacity: 0; }
    74%       { opacity: 0.4; }    /* tail flicker */
    76%, 100% { opacity: 0; }
  }
  @keyframes bkThunderGlow {
    0%, 60% {
      box-shadow:
        0 0 30px rgba(199, 255, 63, 0.18),
        0 0 60px rgba(199, 255, 63, 0.08);
    }
    66% {
      box-shadow:
        0 0 80px rgba(255, 255, 255, 0.9),
        0 0 180px var(--accent),
        0 0 320px rgba(199, 255, 63, 0.5);
    }
    72% {
      box-shadow:
        0 0 50px var(--accent),
        0 0 120px rgba(199, 255, 63, 0.4);
    }
    100% {
      box-shadow:
        0 0 30px rgba(199, 255, 63, 0.18),
        0 0 60px rgba(199, 255, 63, 0.08);
    }
  }
  @keyframes bkThunderShake {
    0%, 64%, 78%, 100% { transform: translate(0, 0); }
    66% { transform: translate(-3px, 2px); }
    67% { transform: translate(3px, -2px); }
    68% { transform: translate(-2px, -1px); }
    69% { transform: translate(2px, 1px); }
    70% { transform: translate(0, 0); }
    73% { transform: translate(-1px, 1px); }
    74% { transform: translate(1px, 0); }
  }
  @keyframes bkChargeBuild {
    0%, 50% { filter: brightness(1) saturate(1) contrast(1); }
    62%     { filter: brightness(1.3) saturate(1.4) contrast(1.15); }
    66%     { filter: brightness(2) saturate(1.6) contrast(1.3); }
    72%     { filter: brightness(1.4) saturate(1.3) contrast(1.1); }
    100%    { filter: brightness(1) saturate(1) contrast(1); }
  }

  /* ================= FOOTER ================= */
  .footer {
    background: var(--bg);
    color: var(--text);
    padding: 6rem 2.5rem 2rem;
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }

  .footer-glow {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }

  .footer-inner { max-width: 1400px; margin: 0 auto; }

  .footer-cta {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: 0.92;
    text-transform: uppercase;
    margin-bottom: 4rem;
    max-width: 14ch;
    letter-spacing: -0.015em;
  }
  .footer-cta .accent { color: var(--accent); }
  .footer-cta .outline { -webkit-text-stroke: 1.5px var(--text); color: transparent; }

  .footer-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
  }
  .footer-hero .footer-cta { margin-bottom: 0; }


  @media (max-width: 900px) {
    .footer-hero { grid-template-columns: 1fr; }

  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--line);
  }

  .footer-col h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.2rem;
    font-weight: 500;
  }

  .footer-col a, .footer-col p {
    color: var(--muted-2);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.9;
    display: block;
    transition: color 0.25s var(--ease);
  }
  .footer-col a:hover { color: var(--accent); }

  .footer-contact-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 1rem; padding: 9px 16px; border-radius: 999px;
    background: var(--accent); color: #000 !important;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    line-height: 1; transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
  }
  .footer-contact-btn:hover {
    color: #000 !important; transform: translateY(-1px);
    box-shadow: 0 0 24px var(--accent-glow);
  }

  .footer-brand {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--text);
    margin-bottom: 1rem;
    text-transform: uppercase;
    line-height: 1;
  }
  .footer-brand .accent { color: var(--accent); }
  .footer-brand-img { height: 56px; width: auto; max-width: 280px; display: block; }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.1em;
    flex-wrap: wrap;
    gap: 1rem;
  }


  /* ================= REVEAL ================= */
  /* Entry motion carries mass: a longer travel, a defocus that resolves, and a
     slower opacity ramp than the movement so the element "arrives" rather than
     switching on. filter is GPU-composited, so this stays off the layout path. */
  .reveal {
    opacity: 0;
    transform: translateY(48px);
    filter: blur(7px);
    will-change: transform, opacity, filter;
    transition:
      opacity 0.95s var(--ease),
      transform 1.05s var(--ease),
      filter 0.85s var(--ease);
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  /* Once it has landed, drop both the compositing hint and the filter itself.
     A lingering filter: blur(0px) still forces a layer and can soften text. */
  .reveal.in.settled { will-change: auto; filter: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  }

  /* ================= IDENTITY BLOCK =================
     Every line here is backed by the Business Registration certificate
     (CAPRA HK LIMITED / branch name BULL KICKS / nature of business:
     trading of apparel and footwear / status: body corporate).
     Do not add a company number, address, phone or named person here
     without an explicit decision — see the claim register at the top. */
  .ident {
    padding: 3.2rem 3rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .ident-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) 1.7fr;
    gap: 2rem 3rem;
    align-items: start;
  }
  .ident-name {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }
  .ident-name span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 0.7rem; }
  .ident-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
  .ident-list li { display: grid; grid-template-columns: 172px 1fr; gap: 0.3rem 1.4rem; align-items: baseline; }
  .ident-key { font-family: 'JetBrains Mono', monospace; font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
  .ident-val { font-size: 0.92rem; line-height: 1.55; color: var(--text); }
  .ident-val a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
  .ident-val a:hover, .ident-val a:focus { border-bottom-color: var(--accent); }

  @media (max-width: 860px) {
    .ident { padding: 2.4rem 1.5rem; }
    .ident-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .ident-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  }

  /* ================= RESPONSIVE ================= */

  /* Nav gets tight well before 900px: 6 items + logo stop fitting around ~1100px. */
  @media (max-width: 1100px) {
    .nav { --nav-pad-x: 1.6rem; }
    .nav-links { gap: 1.1rem; }
    .nav-links a { font-size: 0.66rem; letter-spacing: 0.13em; }
    .nav-cta { padding: 8px 14px; }
  }

  /* Drop the lowest-value link rather than let the row crush itself.
     Class-based on purpose: nav items get added/removed and nth-child would silently hide the wrong one. */
  @media (max-width: 980px) {
    .nav-links li.nav-low { display: none; }
  }

  @media (max-width: 900px) {
    .nav { --nav-pad-y: 0.9rem; --nav-pad-x: 1.2rem; }
    .nav-logo { height: 28px; }
    .nav-tag { display: none; }
    .nav-links { gap: 0.9rem; }
    .nav-links a { font-size: 0.62rem; letter-spacing: 0.12em; }
    .nav-cta { padding: 6px 10px; }

    section, .hero { padding: 4rem 1.2rem; }
    .hero { padding-top: 6rem; }


    .hero-meta-bar { font-size: 0.6rem; }


    .about-inner { grid-template-columns: 1fr; gap: 3rem; }
    .pillars { grid-template-columns: 1fr; }
    .cap-grid { grid-template-columns: 1fr; }
    .cap-header { flex-direction: column; align-items: flex-start; }


    .bk-card { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; gap: 2rem; }
    .bk-stats { gap: 1.2rem; }


    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .vision { padding: 5rem 1.2rem; }

  }


  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    .bk-visual,
    .bk-visual img,
    .bk-visual::before {
      animation: none !important;
    }
    .bk-visual {
      box-shadow: 0 0 60px rgba(199, 255, 63, 0.22);
    }
  }
  /* ================= CONTACT MODAL ================= */
  .cm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  .cm-overlay.open {
    display: flex;
    opacity: 1;
  }
  .cm-panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: auto;
    background: #0a0a0a;
    border: 1px solid var(--line);
    box-shadow: 0 0 0 1px rgba(199,255,63,0.15), 0 40px 120px rgba(0,0,0,0.8);
    padding: 2.5rem 2.5rem 2rem;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .cm-overlay.open .cm-panel { transform: translateY(0) scale(1); }
  .cm-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }
  .cm-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cm-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    border-radius: 50%;
  }
  .cm-title {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
  }
  .cm-sub {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin-bottom: 1.6rem;
    line-height: 1.5;
  }
  .cm-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    line-height: 1;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .cm-close:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .cm-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .cm-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .cm-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
  }
  .cm-input, .cm-textarea, .cm-select {
    background: #000;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.85rem 0.9rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    width: 100%;
    box-sizing: border-box;
  }
  .cm-input::placeholder, .cm-textarea::placeholder {
    color: rgba(255,255,255,0.4);
  }
  .cm-input:focus, .cm-textarea:focus, .cm-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .cm-textarea { resize: vertical; min-height: 110px; font-family: inherit; }
  .cm-phone-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem;
  }
  .cm-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
  }
  .cm-submit {
    margin-top: 0.6rem;
    padding: 0.95rem 2rem;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
  }
  .cm-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 24px var(--accent-glow);
  }
  .cm-opt {
    font-weight: 400;
    letter-spacing: 0.08em;
    opacity: 0.55;
    text-transform: none;
  }
  .cm-select--wide { width: 100%; }
  .cm-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
  .cm-actions .cm-submit { width: 100%; text-align: center; margin-top: 0; }
  .cm-submit--ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.28);
  }
  .cm-submit--ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
  .cm-note { margin: 0.9rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted); }
  .cm-note a { color: var(--accent); text-decoration: none; }
  .cm-error { border-color: #ff7a5c; background: rgba(255,122,92,0.10); }
  .cm-success {
    display: none;
    padding: 1rem;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    font-size: 0.85rem;
    color: var(--text);
    text-align: center;
  }
  .cm-success.show { display: block; }
  body.cm-open { overflow: hidden; }
  @media (max-width: 540px) {
    .cm-panel { padding: 2rem 1.4rem 1.5rem; }
    .cm-title { font-size: 1.6rem; }
    .cm-phone-row { grid-template-columns: 110px 1fr; }
  }

  /* ================= POST-REVIEW IMPROVEMENTS ================= */

  /* Hero — primary + ghost CTAs */
  .hero-actions {
    display: flex;
    gap: 0.85rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease 0.75s forwards;
  }
  .hero-promise {
    margin: 0.9rem 0 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--muted);
    opacity: 0;
    animation: fadeUp 0.7s ease 0.9s forwards;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0.55rem 0.55rem 2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    cursor: pointer;
  }
  .hero-cta.primary {
    background: var(--accent);
    color: #000;
  }
  .hero-cta.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(199,255,63,0.22);
  }
  /* Physical press: the whole control gives under the finger. */
  .hero-cta:active { transform: translateY(-1px) scale(0.985); }


  .hero-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.12);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.18);
    transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
  }
  .hero-cta:hover .hero-cta-icon {
    transform: translate(3px, -1px) scale(1.06);
    background: rgba(0,0,0,0.2);
  }
  .hero-cta svg {
    width: 18px; height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cta, .hero-cta-icon { transition: none; }
    .hero-cta:hover { transform: none; }
    .hero-cta:hover .hero-cta-icon { transform: none; }
  }

  /* Compact rescue panel — no longer the flow pictorial */


  .hero-sub strong {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.005em;
  }

  /* Capabilities 3-up — auto-fit so 3 cols on wide, 2 on medium, 1 on narrow */
  .cap-grid--three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  /* ================= KINETIC MANIFESTO ================= */
  .kinetic {
    position: relative;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 5rem 0;
    overflow: hidden;
    isolation: isolate;
  }
  .kinetic::before,
  .kinetic::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 3;
  }
  .kinetic::before {
    top: 0;
    background: linear-gradient(180deg, var(--bg), transparent);
  }
  .kinetic::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--bg), transparent);
  }
  .kinetic-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(90deg, rgba(199,255,63,0.04) 1px, transparent 1px),
      linear-gradient(0deg, rgba(199,255,63,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
  }
  .kinetic-row {
    position: relative;
    display: flex;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
  }
  .kinetic-track {
    display: flex;
    gap: 4rem;
    flex-shrink: 0;
    padding-right: 4rem;
    animation: kineticScroll 38s linear infinite;
    will-change: transform;
  }
  .kinetic-row.reverse .kinetic-track {
    animation-direction: reverse;
    animation-duration: 52s;
  }
  .kinetic-row.slow .kinetic-track {
    animation-duration: 64s;
  }
  @keyframes kineticScroll {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
  }
  .kinetic-word {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
  }
  .kinetic-word .dot {
    width: 0.35em; height: 0.35em;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
    flex-shrink: 0;
  }
  .kinetic-word.outline {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,0.55);
  }
  .kinetic-word.accent { color: var(--accent); }
  .kinetic-word.accent .dot { background: var(--text); box-shadow: 0 0 30px rgba(255,255,255,0.4); }

  /* Middle row with a smaller manifesto strip + live count */
  .kinetic-bar {
    position: relative;
    z-index: 2;
    margin: 2.5rem 0;
    padding: 1.4rem 2.5rem;
    border-top: 1px solid rgba(199,255,63,0.25);
    border-bottom: 1px solid rgba(199,255,63,0.25);
    background: rgba(199,255,63,0.04);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }
  .kinetic-bar-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.22em;
    font-weight: 700;
  }
  .kinetic-bar-mid {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
    text-align: center;
  }


  @media (max-width: 760px) {
    .kinetic { padding: 3rem 0; }
    .kinetic-bar { grid-template-columns: 1fr; gap: 0.6rem; text-align: center; padding: 1rem 1.2rem; margin: 1.6rem 1rem; }
    .kinetic-bar-mid { display: none; }
    .kinetic-bar-tag { justify-content: center; }
    .kinetic-word { gap: 1.2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .kinetic-track { animation: none; }
  }

  /* Vision proof line */


  /* World map: stop label collisions on small screens */


  /* Mobile hero meta-bar. The old `> span:nth-child(2) { display:none }` rule was
     written for a three-span bar; that middle line is gone and the runner div now
     shifts the indices, so positional selectors here silently hide the wrong thing. */
  @media (max-width: 720px) {
    .hero-meta-bar {
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      font-size: 0.62rem;
    }
    .hero-actions { gap: 0.6rem; margin-top: 1.5rem; }
    .hero-cta { padding: 0.85rem 1.2rem; font-size: 0.7rem; flex: 1; justify-content: center; min-width: 0; }
  }

  /* Country-code dropdown — add a custom caret */
  .cm-phone-row {
    position: relative;
  }
  .cm-select {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--accent) 50%),
      linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) 50%,
      calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px !important;
  }
  .cm-select option {
    background: #0a0a0a;
    color: var(--text);
  }

  /* Footer "signal stack" — replaces the radar */


  /* Footer social icons */
  .footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.4rem;
  }
  .footer-social a {
    width: 38px; height: 38px;
    border: 1px solid rgba(199,255,63,0.45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
  }
  .footer-social a:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(199,255,63,0.15);
  }
  .footer-social svg { width: 16px; height: 16px; }

  /* ===== Center hero text when there is no right-side aside ===== */
  .hero-content:not(:has(.hero-hud)):not(:has(.hero-sustain)) {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .hero-content:not(:has(.hero-hud)):not(:has(.hero-sustain)) .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
  }
  .hero-content:not(:has(.hero-hud)):not(:has(.hero-sustain)) .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-content:not(:has(.hero-hud)):not(:has(.hero-sustain)) .hero-actions {
    justify-content: center;
  }

  /* ===== Bull Kicks card embedded inside hero-sustain aside — 2-column row ===== */
  .hero-content:has(.hero-sustain) {
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
  }
  .hero-content:has(.hero-sustain) .hero-text {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .hero-content:has(.hero-sustain) .hero-actions {
    margin-top: auto;
  }
  .hero-content:has(.hero-sustain) .hero-title {
    margin-top: 56px;
  }


  @media (max-width: 1024px) {
    .hero-content:has(.hero-sustain) { grid-template-columns: 1fr; }

  }

  /* ===== Bull Kicks standalone feature (placed below hero CTA) ===== */
  .bk-feature {
    padding: 4rem 3rem 4rem;
    max-width: 1396px;
    margin: 0 auto;
  }
  .bk-feature .bk-card {
    grid-template-columns: auto 1fr;
    padding: 0;
    gap: 3rem;
    background: transparent;
    border: none;
    align-items: stretch;
  }
  .bk-feature .bk-card::before { content: none; }
  .bk-feature .bk-visual {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, rgba(0,0,0,0.8) 65%, transparent 92%);
    mask-image: radial-gradient(ellipse at center, #000 45%, rgba(0,0,0,0.8) 65%, transparent 92%);
  }
  .bk-feature .bk-visual-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .bk-feature .bk-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: lighten;
  }
  /* bk-sneakers.mp4: zoom from the bottom edge so the source's top band
     (PixVerse watermark top-right + baked-in dark wedge top-left) crops
     out of frame. Replaces the old top-right cover box, which the radial
     mask faded out near the corner so the watermark still leaked through. */
  .bk-feature .bk-video {
    transform: scale(1.26);
    transform-origin: 50% 100%;
  }
  /* Corner vignette stays disabled here (it had been repurposed as the cover). */
  .bk-feature .bk-visual::after { content: none; }
  .bk-feature .hang {
    transform-box: view-box;
    animation: hangSway 4.4s ease-in-out infinite;
  }
  .bk-feature .hang--a { transform-origin: 130px 42px; animation-duration: 4.6s; }
  .bk-feature .hang--b { transform-origin: 310px 42px; animation-duration: 5.4s; animation-delay: -0.9s; }
  .bk-feature .hang--c { transform-origin: 480px 42px; animation-duration: 5.0s; animation-delay: -1.7s; }
  @keyframes hangSway {
    0%, 100% { transform: rotate(-2.8deg); }
    50%      { transform: rotate(2.8deg); }
  }
  .bk-feature .neon-art { animation: neonPulse 3.2s ease-in-out infinite; }
  @keyframes neonPulse {
    0%, 100% { opacity: 1; }
    48%      { opacity: 0.92; }
    50%      { opacity: 0.75; }
    52%      { opacity: 0.96; }
  }
  @media (max-width: 900px) {
    .bk-feature .bk-card { grid-template-columns: 1fr; }
    .bk-feature .bk-visual { max-width: 460px; margin: 1rem auto 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bk-feature .hang { animation: none; }
  }
  .bk-feature .bk-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 720px;
  }
  .bk-feature .bk-tag { align-self: start; }
  .section-tag { border-color: var(--accent) !important; }
  .bk-feature .bk-title {
    font-size: clamp(2.4rem, 5.4vw, 5.6rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
  }

  .bk-feature .bk-logo {
    max-width: 480px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -58px;
  }
  .bk-feature .bk-desc {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 16px 0 0;
  }
  .bk-feature .bk-stats { gap: 1.5rem; margin: 16px 0 0; }
  .bk-feature .bk-stat-num { font-size: 1.5rem; }
  .bk-feature .bk-stat-label { font-size: 0.65rem; }
  .bk-feature .bk-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;
  }
  .bk-feature .bk-link {
    padding: 1rem 2.2rem;
    font-size: 0.78rem;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    align-self: center;
    margin-top: 1rem;
    animation: bkPulse 2.4s ease-in-out infinite;
  }
  .bk-feature .bk-link .bk-link-arrow {
    display: inline-block;
    transition: transform 0.2s var(--ease);
  }
  .bk-feature .bk-link:hover .bk-link-arrow { transform: translateX(5px); }
  @keyframes bkPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(199,255,63,0.55), 0 0 22px rgba(199,255,63,0.45);
    }
    50% {
      box-shadow: 0 0 0 14px rgba(199,255,63,0), 0 0 38px rgba(199,255,63,0.75);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bk-feature .bk-link { animation: none; }
  }
  @media (max-width: 720px) {
    .bk-feature { padding: 2.5rem 1.2rem 3.5rem; }
    .bk-feature .bk-card { padding: 0; }

    .bk-feature .bk-logo { max-width: 320px; margin-bottom: -32px; }
  }

  /* ================= MOBILE FIXES (added) ================= */
  @media (max-width: 720px) {
    /* Nav: hide secondary links on phones, keep brand + the .nav-keep CTA only.
       Class-based on purpose — do not switch back to :last-child / nth-child. */
    .nav-links li:not(.nav-keep) { display: none; }
    .nav-links { gap: 0; }
    .nav-cta { padding: 8px 14px; font-size: 0.66rem; letter-spacing: 0.12em; }
    .nav-logo { height: 26px; }

    /* Hero title: allow wrap to multiple lines */
    .hero-title {
      white-space: normal;
      font-size: clamp(1.6rem, 7.5vw, 2.6rem);
      line-height: 1.05;
    }
    .hero-content { padding: 1.5rem 0; }
    .hero-sub { font-size: 0.95rem; padding: 0 0.5rem; }

    /* Intro splash CAPRA logo: shrink to fit */


    /* Vision big stats: shrink */


    /* Footer: stack to one column on narrow screens */
    .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-col h3 { letter-spacing: 0.18em; margin-bottom: 0.8rem; }
    .footer-col a, .footer-col p {
      font-size: 0.95rem;
      line-height: 1.7;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    /* Text lines are only ~26px tall; pad the anchors up to a 44px tap target. */
    .footer-col a { padding: 0.6rem 0; }
    .footer-social a { width: 44px; height: 44px; }

    /* Brands: 5 logos one-per-row burns a full screen of scroll — go 2-up */


  }

  /* Extra tight phones */
  @media (max-width: 420px) {
    .nav { --nav-pad-y: 0.8rem; --nav-pad-x: 1rem; }
    .nav-cta { padding: 7px 12px; font-size: 0.62rem; }
    .hero-title { font-size: clamp(1.4rem, 7vw, 2rem); }

  }

  /* ================= WIG AUDIT FIXES ================= */

  /* Touch: kill 300ms tap delay + tame iOS tap-highlight */
  a, button, [role="button"], input[type="submit"], input[type="button"], select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Nav CTA is the primary conversion target but only ~30px tall on phones.
     Extend the hit area to the 44px minimum without changing the pill's look.
     Same treatment for the logo link (26px tall = the "back home" tap). */
  .nav-cta, .nav-brand > a { position: relative; }
  .nav-brand > a::after,
  .nav-cta::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: max(44px, 100%);
    transform: translateY(-50%);
  }

  /* Tabular numerals on data displays (no digit wobble) */
  .bk-stat-num,
  .bk-stat-label,
  .cap-num,
  .pillar-num,
  .hero-meta-bar,
  .hero-meta-bar span {
    font-variant-numeric: tabular-nums;
  }

  /* Balanced wrapping on display headlines */
  .hero-title,
  .section-title,
  .cap-title,
  .pillar-title,
  .bk-title,
  .footer-cta,
  .cm-title {
    text-wrap: balance;
  }
  .hero-sub,
  .bk-desc,
  .pillar-text,
  .about-prose p {
    text-wrap: pretty;
  }

  /* Safe-area insets for fixed elements (iPhone notch / home indicator) */
  .nav {
    padding-top: max(var(--nav-pad-y), env(safe-area-inset-top));
    padding-left: max(var(--nav-pad-x), env(safe-area-inset-left));
    padding-right: max(var(--nav-pad-x), env(safe-area-inset-right));
  }
  .aika-launcher {
    bottom: max(26px, env(safe-area-inset-bottom));
    right: max(26px, env(safe-area-inset-right));
  }

  /* Modal scroll containment */
  .cm-overlay { overscroll-behavior: contain; }

  /* Anchor scroll offset (don't scroll under fixed nav) */
  [id] { scroll-margin-top: 80px; }

  /* Skip link (hidden until focused) */
  .skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 9999;
    background: var(--accent);
    color: #000;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: top 0.2s var(--ease);
  }
  .skip-link:focus { top: 1rem; }

/* ================= FLOATING WHATSAPP CONTROL ================= */
.aika-launcher {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 9000;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 2px solid var(--accent);
    box-shadow: 0 12px 32px rgba(199,255,63,0.45), 0 0 0 6px rgba(199,255,63,0.12);
    cursor: pointer;
    padding: 0;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    animation: aikaBob 3.4s ease-in-out infinite;
  }
  .aika-launcher:hover { transform: scale(1.06) rotate(-3deg); box-shadow: 0 16px 40px rgba(199,255,63,0.65), 0 0 0 10px rgba(199,255,63,0.18); }
  .aika-launcher img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }
  @keyframes aikaBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

  @keyframes aikaPing { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
  .aika-launcher .wa-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #25D366; border: 2px solid #000;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(37,211,102,0.4);
    animation: aikaPing 1.8s ease-in-out infinite;
  }


  @media (max-width: 480px) {

    /* Tucked further into the corner — it was overlapping body copy on phones.
       54px still clears the 44px tap minimum. */
    .aika-launcher {
      bottom: max(14px, env(safe-area-inset-bottom));
      right: max(14px, env(safe-area-inset-right));
      width: 54px; height: 54px;
    }
  }