/* Extracted verbatim from index.html's inline <style> block.
   No rules changed — this is a lift-and-shift, not a redesign. */

    :root {
      /* ===== GOLD + BLACK ONLY ===== */
      --gold: #C9A84C;
      --gold-bright: #F5D87A;
      --gold-dim: #7A5F22;
      --gold-deep: #4A3814;
      --amber: #E8B84B;
      --champagne: #EFD9A0;

      /* Surfaces */
      --black: #030303;
      --dark: #080807;
      --panel: #0D0D0B;
      --border: #1C1B17;

      /* Type */
      --text: #E8E0D0;
      --bright: #FFFFFF;
      --muted: #A79C89;

      /* Data semantics only (up/down) */
      --up: #4FAE7C;
      --down: #B4573F;

      /* Radii */
      --r-sm: 12px;
      --r-md: 18px;
      --r-lg: 26px;
      --r-xl: 36px;

      /* Liquid glass */
      --glass-bg: linear-gradient(150deg, rgba(255, 246, 225, .062), rgba(255, 246, 225, .014));
      --glass-brd: rgba(232, 214, 170, .11);
      --glass-blur: blur(11px) saturate(140%);

      --ease: cubic-bezier(.16, 1, .3, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--black);
      color: var(--text);
      font-family: 'Barlow Condensed', sans-serif;
      overflow-x: hidden;
      cursor: crosshair;
      padding: 12px;
    }

    /* Texture */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: .026;
      pointer-events: none;
      z-index: 9999;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .06) 2px, rgba(0, 0, 0, .06) 4px);
      pointer-events: none;
      z-index: 9998;
    }

    /* ============ BACKGROUND FIELD ============ */
    .ambient {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    /* warm gold aurora, top-centre */
    .aurora {
      position: absolute;
      top: -28%;
      left: 50%;
      transform: translateX(-50%);
      width: 130vw;
      height: 95vh;
      background:
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(201, 168, 76, .22), transparent 62%),
        radial-gradient(ellipse 30% 40% at 42% 46%, rgba(245, 216, 122, .16), transparent 66%);
      filter: blur(70px);
      animation: auroraBreathe 14s ease-in-out infinite;
    }

    @keyframes auroraBreathe {

      0%,
      100% {
        opacity: .72;
        transform: translateX(-50%) scale(1);
      }

      50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.09);
      }
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(110px);
    }

    .orb-1 {
      width: 46vw;
      height: 46vw;
      top: 34%;
      left: -14%;
      background: radial-gradient(circle, rgba(201, 168, 76, .16), transparent 68%);
      animation: drift1 30s ease-in-out infinite;
    }

    .orb-2 {
      width: 44vw;
      height: 44vw;
      bottom: -8%;
      right: -6%;
      background: radial-gradient(circle, rgba(232, 184, 75, .14), transparent 68%);
      animation: drift2 36s ease-in-out infinite;
    }

    @keyframes drift1 {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      50% {
        transform: translate(8%, -6%) scale(1.14)
      }
    }

    @keyframes drift2 {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      50% {
        transform: translate(-7%, -8%) scale(1.1)
      }
    }

    /* fine grid across the whole page — one continuous plane */
    .bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(201, 168, 76, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, .07) 1px, transparent 1px);
      background-size: 72px 72px;
      -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 78%);
      mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 78%);
    }

    /* ============ CANVAS ============ */
    .canvas {
      position: relative;
      z-index: 1;
      max-width: 1560px;
      margin: 0 auto;
      border-radius: var(--r-xl);
      border: 1px solid rgba(232, 214, 170, .07);
      background: linear-gradient(180deg, rgba(9, 9, 8, .72) 0%, rgba(5, 5, 5, .86) 46%, rgba(9, 9, 8, .78) 100%);
      overflow: hidden;
      box-shadow: 0 50px 140px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 246, 225, .05);
    }

    /* gold hairline gradient — runs the full page, not just the hero */
    .canvas::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(90deg, rgba(201, 168, 76, .1) 0px, rgba(201, 168, 76, .1) 1px, transparent 1px, transparent 96px),
        repeating-linear-gradient(0deg, rgba(245, 216, 122, .07) 0px, rgba(245, 216, 122, .07) 1px, transparent 1px, transparent 140px),
        linear-gradient(180deg, rgba(201, 168, 76, .06), transparent 22%, transparent 78%, rgba(201, 168, 76, .05));
      pointer-events: none;
      z-index: -1;
    }

    /* cursor-following gold spotlight — the "hover effect" across the whole canvas */
    .canvas::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(560px circle at var(--px, 50%) var(--py, 18%), rgba(245, 216, 122, .075), transparent 62%);
      pointer-events: none;
      z-index: -1;
      opacity: 0;
      transition: opacity .4s ease;
    }

    .canvas.spotlight-on::after {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .canvas::after {
        display: none;
      }
    }

    @media (hover: none) {
      .canvas::after {
        display: none;
      }
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0%;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold) 45%, var(--gold-bright));
      box-shadow: 0 0 16px rgba(245, 216, 122, .7);
      z-index: 200;
      transition: width .08s linear;
    }

    /* ============ TOP BAR ============ */
    nav {
      position: fixed;
      top: 20px;
      left: 20px;
      right: 20px;
      z-index: 150;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 12px 12px 12px 26px;
      max-width: 1300px;
      margin: 0 auto;
      border-radius: 100px;
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      box-shadow: 0 12px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 246, 225, .11);
      transition: all .45s var(--ease);
    }

    nav.scrolled {
      top: 12px;
      padding: 9px 10px 9px 22px;
      background: linear-gradient(150deg, rgba(22, 20, 15, .9), rgba(8, 8, 7, .86));
      border-color: rgba(201, 168, 76, .3);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 246, 225, .1), 0 0 0 1px rgba(201, 168, 76, .12);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      letter-spacing: 3.4px;
      color: var(--bright);
      white-space: nowrap;
    }

    .nav-logo b {
      font-weight: 400;
      color: var(--gold);
    }

    .nav-links {
      display: flex;
      gap: 4px;
      list-style: none;
    }

    .nav-links a {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      padding: 8px 15px;
      border-radius: 100px;
      transition: all .25s var(--ease);
    }

    .nav-links a:hover {
      color: var(--bright);
      background: rgba(255, 246, 225, .07);
    }

    .nav-cta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
      color: #0A0A08;
      background: linear-gradient(100deg, var(--champagne), var(--gold));
      border: none;
      padding: 12px 24px;
      border-radius: 100px;
      cursor: pointer;
      white-space: nowrap;
      transition: all .32s var(--ease);
      box-shadow: 0 5px 20px rgba(201, 168, 76, .32);
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(245, 216, 122, .5);
      background: linear-gradient(100deg, #fff3d4, var(--gold-bright));
    }

    /* ============ HERO — centred, animated candlestick chart ============ */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 150px clamp(24px, 5vw, 72px) 190px;
      overflow: hidden;
    }

    /* hairline rule under the top bar, like the reference */
    .hero-rule {
      position: absolute;
      top: 96px;
      left: 8%;
      right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .22), transparent);
    }

    .hero-rule::before,
    .hero-rule::after {
      content: '';
      position: absolute;
      top: -2px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(201, 168, 76, .5);
    }

    .hero-rule::before {
      left: 0;
    }

    .hero-rule::after {
      right: 0;
    }

    /* 2D animated candlestick strip along the hero's bottom edge */
    .hero-candles {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 64px;
      height: 74%;
      z-index: 1;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(to top, black, transparent 97%);
      mask-image: linear-gradient(to top, black, transparent 97%);
    }

    .hero-candles svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .candle-wick {
      stroke-width: 1.5;
    }

    .candle-wick.candle-up {
      stroke: rgba(79, 174, 124, .65);
    }

    .candle-wick.candle-down {
      stroke: rgba(180, 87, 63, .65);
    }

    .candle-body {
      transform-box: fill-box;
      transform-origin: bottom;
      animation: candleGrow .9s var(--ease) backwards, candleBreathe 2.6s ease-in-out infinite;
    }

    .candle-up {
      fill: var(--up);
      filter: drop-shadow(0 0 6px rgba(79, 174, 124, .5));
    }

    .candle-down {
      fill: var(--down);
      filter: drop-shadow(0 0 5px rgba(180, 87, 63, .4));
    }

    @keyframes candleGrow {
      from {
        transform: scaleY(0);
        opacity: 0;
      }

      to {
        transform: scaleY(1);
        opacity: 1;
      }
    }

    @keyframes candleBreathe {

      0%,
      100% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(.52);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .candle-body {
        animation: none !important;
      }
    }

    .hero-content {
      position: relative;
      z-index: 3;
      max-width: 900px;
    }

    /* soft dark scrim behind the headline so it stays legible over the candlesticks */
    .hero-content::before {
      content: '';
      position: absolute;
      inset: -50px -70px;
      background: radial-gradient(ellipse 72% 68% at 50% 38%, rgba(3, 3, 3, .78) 0%, rgba(3, 3, 3, .5) 42%, transparent 76%);
      z-index: -1;
      pointer-events: none;
      border-radius: 50px;
    }

    /* pill badge */
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 2.6px;
      text-transform: uppercase;
      color: var(--champagne);
      margin-bottom: 34px;
      padding: 10px 20px;
      border-radius: 100px;
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      box-shadow: 0 6px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 246, 225, .13);
      position: relative;
      overflow: hidden;
    }

    .hero-tag svg {
      width: 13px;
      height: 13px;
      stroke: var(--gold-bright);
      fill: none;
      stroke-width: 1.8;
    }

    /* shimmer sweep */
    .hero-tag::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 225, .22) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: shimmer 4.5s ease-in-out infinite 1.5s;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%)
      }

      55%,
      100% {
        transform: translateX(100%)
      }
    }

    .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(52px, 7.4vw, 104px);
      line-height: .96;
      letter-spacing: 1.5px;
      color: var(--bright);
      margin-bottom: 22px;
    }

    .hero-title .ln {
      display: block;
      overflow: hidden;
    }

    .hero-title .ln>span {
      display: block;
      animation: lineRise 1.1s var(--ease) forwards;
      transform: translateY(105%);
    }

    .hero-title .ln:nth-child(1)>span {
      animation-delay: .15s;
    }

    .hero-title .ln:nth-child(2)>span {
      animation-delay: .28s;
    }

    .hero-title .ln:nth-child(3)>span {
      animation-delay: .41s;
    }

    @keyframes lineRise {
      to {
        transform: translateY(0);
      }
    }

    .hero-title .gold {
      background: linear-gradient(100deg, var(--champagne), var(--gold-bright) 45%, var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 46px rgba(201, 168, 76, .35));
    }

    .hero-title .stroke {
      -webkit-text-stroke: 1.8px rgba(201, 168, 76, .85);
      color: transparent;
    }

    .hero-sub {
      font-size: clamp(14px, 1.5vw, 16.5px);
      font-weight: 300;
      letter-spacing: 3.6px;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 auto 40px;
      max-width: 560px;
      line-height: 1.7;
      animation: fadeUp .9s var(--ease) .58s both;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeUp .9s var(--ease) .72s both;
    }

    /* ============ BUTTONS ============ */
    .btn-primary {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: 3px;
      color: #0A0A08;
      background: linear-gradient(100deg, var(--champagne), var(--gold));
      border: none;
      padding: 15px 20px 15px 32px;
      border-radius: 100px;
      cursor: pointer;
      text-decoration: none;
      transition: all .35s var(--ease);
      box-shadow: 0 8px 28px rgba(201, 168, 76, .34), inset 0 1px 0 rgba(255, 255, 255, .35);
    }

    .btn-primary .arrow {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(10, 10, 8, .16);
      transition: transform .35s var(--ease), background .35s;
    }

    .btn-primary .arrow svg {
      width: 13px;
      height: 13px;
      stroke: #0A0A08;
      fill: none;
      stroke-width: 2.2;
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 44px rgba(245, 216, 122, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
      background: linear-gradient(100deg, #fff3d4, var(--gold-bright));
    }

    .btn-primary:hover .arrow {
      transform: translateX(4px);
      background: rgba(10, 10, 8, .26);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 2.4px;
      text-transform: uppercase;
      color: var(--text);
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      padding: 16px 30px;
      border-radius: 100px;
      cursor: pointer;
      text-decoration: none;
      transition: all .32s var(--ease);
      box-shadow: inset 0 1px 0 rgba(255, 246, 225, .1);
    }

    .btn-ghost:hover {
      border-color: rgba(201, 168, 76, .5);
      background: linear-gradient(150deg, rgba(201, 168, 76, .16), rgba(255, 246, 225, .02));
      transform: translateY(-2px);
      color: var(--bright);
    }

    /* ============ TICKER ============ */
    .ticker-bar {
      position: relative;
      padding: 15px 0;
      overflow: hidden;
      border-top: 1px solid rgba(232, 214, 170, .06);
      border-bottom: 1px solid rgba(232, 214, 170, .06);
      background: linear-gradient(90deg, rgba(201, 168, 76, .04), rgba(245, 216, 122, .06), rgba(201, 168, 76, .04));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    }

    .ticker-inner {
      display: flex;
      gap: 58px;
      animation: ticker 30s linear infinite;
      white-space: nowrap;
    }

    .ticker-item {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 1.6px;
      color: var(--muted);
      display: flex;
      gap: 9px;
    }

    .ticker-item .pair {
      color: var(--gold);
    }

    .ticker-item .up {
      color: var(--up);
    }

    .ticker-item .down {
      color: var(--down);
    }

    @keyframes ticker {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* ============ SECTIONS ============ */
    section {
      padding: clamp(36px, 3.5vw, 56px) clamp(24px, 5vw, 72px);
      scroll-margin-top: 90px;
      position: relative;
    }

    .sec-head {
      margin-bottom: clamp(24px, 2.5vw, 36px);
    }

    .sec-head.center {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 780px;
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--champagne);
      margin-bottom: 18px;
      padding: 8px 17px;
      border-radius: 100px;
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      box-shadow: inset 0 1px 0 rgba(255, 246, 225, .12);
    }

    .section-tag svg {
      width: 13px;
      height: 13px;
      stroke: var(--gold-bright);
      fill: none;
      stroke-width: 1.7;
    }

    .section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(42px, 5.6vw, 78px);
      line-height: .98;
      letter-spacing: .5px;
      color: var(--bright);
      margin-bottom: 18px;
    }

    .section-title em {
      font-style: normal;
      background: linear-gradient(100deg, var(--champagne), var(--gold-bright) 50%, var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .section-lead {
      font-size: clamp(16px, 1.5vw, 19px);
      font-weight: 300;
      color: var(--muted);
      max-width: 620px;
      line-height: 1.65;
      letter-spacing: .6px;
    }

    .sec-head.center .section-lead {
      margin: 0 auto;
    }

    /* card being tracked/tilted renders above its neighbors while it grows */
    [data-tilt]:hover {
      z-index: 6;
    }

    /* ============ LIQUID GLASS ============ */
    .glass {
      position: relative;
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      border-radius: var(--r-lg);
      box-shadow: 0 14px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3);
      overflow: hidden;
      transition: transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
      transform-style: preserve-3d;
    }

    /* refractive top edge */
    .glass::before {
      content: '';
      position: absolute;
      top: 0;
      left: 12%;
      right: 12%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 246, 225, .4), transparent);
      pointer-events: none;
    }

    /* cursor-tracked specular sheen */
    .glass::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 246, 225, .09), transparent 62%);
      opacity: 0;
      transition: opacity .4s var(--ease);
      pointer-events: none;
    }

    .glass:hover::after {
      opacity: 1;
    }

    .glass:hover {
      border-color: rgba(201, 168, 76, .36);
      box-shadow: 0 26px 68px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 246, 225, .16), 0 0 0 1px rgba(201, 168, 76, .16);
    }

    /* ============ REVEAL ============ */
    .reveal {
      opacity: 0;
      transform: perspective(1000px) translateY(34px) rotateX(7deg);
      transition: opacity .85s var(--ease), transform .85s var(--ease);
    }

    .reveal.in {
      opacity: 1;
      transform: perspective(1000px) translateY(0) rotateX(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .orb,
      .aurora,
      .candle-body,
      .hero-tag::after,
      .cue-arrow,
      .live-dot {
        animation: none !important;
      }

      .hero-title .ln>span {
        transform: none !important;
        animation: none !important;
      }

      .hero-sub,
      .hero-actions {
        animation: none !important;
        opacity: 1 !important;
      }
    }

    /* ============ STATS ============ */
    .stats-section {
      padding-top: clamp(56px, 7vw, 92px);
      padding-bottom: clamp(56px, 7vw, 92px);
    }

    .stats-stagger {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      max-width: 1180px;
      margin: 0 auto 90px;
      position: relative;
      align-items: stretch;
    }

    .stat-cell {
      position: relative;
      padding: 28px 24px;
      border-radius: var(--r-md);
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      box-shadow: inset 0 1px 0 rgba(255, 246, 225, .09);
      transition: background .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
    }

    /* pop-in entrance: cards scale up with a slight bounce as they scroll into view */
    .stat-cell.reveal {
      opacity: 0;
      transform: scale(.55);
      transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1);
    }

    .stat-cell.reveal.in {
      opacity: 1;
      transform: scale(1);
    }

    /* charge-sweep hairline: scales in left-to-right the moment the card reveals */
    .stat-cell::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 14%;
      right: 14%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .55), transparent);
      opacity: .5;
      transform: scaleX(0);
      transform-origin: left;
      transition: opacity .38s, transform .75s var(--ease) .12s;
    }

    .stat-cell.in::before {
      transform: scaleX(1);
    }

    .stat-cell:hover::before {
      opacity: 1;
    }

    .stat-cell:hover {
      border-color: rgba(201, 168, 76, .34);
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .14);
    }

    .stat-icon {
      width: 21px;
      height: 21px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.6;
      margin-bottom: 15px;
      opacity: .9;
      transition: transform .35s var(--ease);
    }

    .stat-cell:hover .stat-icon {
      transform: rotate(-8deg) scale(1.14);
      stroke: var(--gold-bright);
    }

    /* icon draws itself in as the card settles into view */
    .stat-icon path,
    .stat-icon rect {
      stroke-dasharray: 90;
      stroke-dashoffset: 90;
      transition: stroke-dashoffset 1s var(--ease) .25s;
    }

    .stat-cell.in .stat-icon path,
    .stat-cell.in .stat-icon rect {
      stroke-dashoffset: 0;
    }

    @media (prefers-reduced-motion: reduce) {

      .stat-cell::before,
      .stat-icon path,
      .stat-icon rect {
        transition: none !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
      }
    }

    .stat-number {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(38px, 4.2vw, 58px);
      line-height: 1;
      letter-spacing: 1px;
      background: linear-gradient(120deg, var(--bright) 15%, var(--gold-bright));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-variant-numeric: tabular-nums;
    }

    .stat-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 2.2px;
      color: var(--muted);
      text-transform: uppercase;
      margin-top: 10px;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .stats-stagger {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 56px;
      }
    }

    /* ============ ARC MARQUEE ============ */
    .arc-marquee {
      position: relative;
      overflow: hidden;
      padding-bottom: 8px;
      -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
      mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    }

    .arc-marquee svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .arc-marquee text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 62px;
      letter-spacing: 5px;
    }

    /* ============ ABOUT ============ */
    .about-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(36px, 5vw, 76px);
      align-items: center;
    }


    /* headline: each line masks up into view instead of a flat fade */
    #about .section-title {
      overflow: visible;
    }

    #about .line-mask {
      display: block;
      overflow: hidden;
    }

    #about .line-inner {
      display: block;
      transform: translateY(112%);
      transition: transform .85s var(--ease);
    }

    #about .reveal.in .line-inner {
      transform: translateY(0);
    }

    #about .line-mask:nth-of-type(2) .line-inner {
      transition-delay: .12s;
    }

    /* shimmer sweep across the gold headline once it settles */
    #about .section-title em {
      background: linear-gradient(100deg, var(--champagne) 20%, var(--gold-bright) 38%, #fff 50%, var(--gold-bright) 62%, var(--gold) 80%);
      background-size: 260% 100%;
      background-position: 200% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #about .reveal.in .section-title em {
      animation: shimmerSweep 1.6s ease-out .95s 1 both;
    }

    @keyframes shimmerSweep {
      from {
        background-position: 200% 0;
      }

      to {
        background-position: -60% 0;
      }
    }

    /* lead paragraph pulls into focus */
    #about .section-lead {
      filter: blur(7px);
      opacity: 0;
      transition: filter .8s var(--ease) .2s, opacity .8s var(--ease) .2s;
    }

    #about .reveal.in .section-lead {
      filter: blur(0);
      opacity: 1;
    }

    .manifesto {
      margin-top: 34px;
      padding-left: 28px;
      position: relative;
    }

    .manifesto::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 2px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 1s var(--ease) .3s;
    }

    #about .reveal.in .manifesto::before {
      transform: scaleY(1);
    }

    .manifesto p {
      font-size: 16.5px;
      font-weight: 300;
      letter-spacing: .5px;
      line-height: 1.85;
      color: #B5AE9E;
      margin-bottom: 18px;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1s var(--ease);
    }

    #about .reveal.in .manifesto p:nth-child(1) {
      clip-path: inset(0 0% 0 0);
      transition-delay: .35s;
    }

    #about .reveal.in .manifesto p:nth-child(2) {
      clip-path: inset(0 0% 0 0);
      transition-delay: .58s;
    }

    #about .reveal.in .manifesto p:nth-child(3) {
      clip-path: inset(0 0% 0 0);
      transition-delay: .81s;
    }

    .manifesto p:last-child {
      margin-bottom: 0;
    }

    .manifesto p strong {
      color: var(--gold-bright);
      font-weight: 600;
      background-image: linear-gradient(rgba(245, 216, 122, .22), rgba(245, 216, 122, .22));
      background-repeat: no-repeat;
      background-size: 0% 100%;
      background-position: left center;
      transition: background-size 1s var(--ease);
      padding: 0 2px;
    }

    #about .reveal.in .manifesto p:nth-child(1) strong {
      transition-delay: .5s;
    }

    #about .reveal.in .manifesto p:nth-child(2) strong {
      transition-delay: .75s;
    }

    #about .reveal.in .manifesto p:nth-child(3) strong {
      transition-delay: 1s;
    }

    #about .reveal.in .manifesto p strong {
      background-size: 100% 100%;
    }

    .boss-pillars {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
    }

    /* neutralize the generic .reveal look here — this container only needs the .in class timing */
    .boss-pillars.reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* connecting line growing behind the 3 pillars as they reveal in sequence */
    .boss-pillars::before {
      content: '';
      position: absolute;
      left: 51px;
      top: 40px;
      bottom: 40px;
      width: 1px;
      background: linear-gradient(var(--gold-dim), rgba(122, 95, 34, .1));
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 1.3s var(--ease) .2s;
      z-index: 0;
      pointer-events: none;
    }

    .boss-pillars.in::before {
      transform: scaleY(1);
    }

    /* pop-in entrance for pillar cards, consistent with the stats section */
    .pillar.reveal {
      opacity: 0;
      transform: scale(.62);
      transition: opacity .5s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1);
    }

    .pillar.reveal.in {
      opacity: 1;
      transform: scale(1);
    }

    @property --bt-angle {
      syntax: '<angle>';
      inherits: false;
      initial-value: 0deg;
    }

    .pillar {
      padding: 26px 28px;
      display: flex;
      gap: 20px;
      align-items: flex-start;
      border-radius: var(--r-md);
      position: relative;
      z-index: 1;
    }

    /* border-trace: a light runs once around the card border on hover.
     Uses its own element (not ::after) because .glass already owns ::before/::after
     for the refractive edge + cursor sheen — reusing ::after collided with that. */
    .pillar .bt-ring {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: conic-gradient(from var(--bt-angle), transparent 0 82%, var(--gold-bright) 92%, transparent 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .3s var(--ease);
      pointer-events: none;
      z-index: 2;
    }

    .pillar:hover .bt-ring {
      opacity: 1;
      animation: btSpin 1.6s linear;
    }

    @keyframes btSpin {
      from {
        --bt-angle: 0deg;
      }

      to {
        --bt-angle: 360deg;
      }
    }

    .pillar-ico {
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, rgba(201, 168, 76, .2), rgba(245, 216, 122, .07));
      border: 1px solid rgba(201, 168, 76, .26);
      transition: all .35s var(--ease);
    }

    .pillar-ico svg {
      width: 21px;
      height: 21px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.7;
      transition: stroke .35s;
    }

    .pillar:hover .pillar-ico {
      border-color: rgba(245, 216, 122, .6);
      background: linear-gradient(145deg, rgba(245, 216, 122, .3), rgba(201, 168, 76, .12));
      transform: scale(1.07) rotate(-4deg);
    }

    .pillar:hover .pillar-ico svg {
      stroke: var(--gold-bright);
    }

    /* icon draws itself in as the card pops into view */
    .pillar-ico svg path,
    .pillar-ico svg circle {
      stroke-dasharray: 90;
      stroke-dashoffset: 90;
      transition: stroke-dashoffset 1s var(--ease) .3s;
    }

    .pillar.in .pillar-ico svg path,
    .pillar.in .pillar-ico svg circle {
      stroke-dashoffset: 0;
    }

    .pillar-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 23px;
      letter-spacing: 1.8px;
      color: var(--bright);
      margin-bottom: 6px;
    }

    .pillar-desc {
      font-size: 13.5px;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .4px;
      line-height: 1.65;
    }

    @media (prefers-reduced-motion: reduce) {

      #about .line-inner,
      #about .section-title em,
      #about .section-lead,
      .manifesto::before,
      .manifesto p,
      .manifesto p strong,
      .boss-pillars::before,
      .pillar.reveal,
      .pillar-ico svg path,
      .pillar-ico svg circle,
      .pillar .bt-ring {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        background-size: 100% 100% !important;
        stroke-dashoffset: 0 !important;
        clip-path: inset(0 0% 0 0) !important;
      }
    }

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

    /* ============ ARSENAL ============ */
    .arsenal-grid {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
    }

    .arsenal-grid.reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* only used to gate .in timing for the scan sweep */
    .arsenal-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .arsenal-card {
      padding: 30px 28px;
      display: flex;
      flex-direction: column;
      min-height: 208px;
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
      flex: 1 1 0;
      transition: flex-grow 1.1s cubic-bezier(.22, 1, .36, 1), transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease), filter .38s var(--ease);
    }

    @media (min-width: 1101px) {
      .arsenal-card {
        height: 208px;
      }
    }

    /* hover-grow: hovered card in a row expands, the other two settle back to even thirds */
    .arsenal-row .arsenal-card:hover {
      flex-grow: 1.8;
    }

    /* 1. diagonal wave entrance — alternating tilt direction per card */
    .arsenal-card.reveal {
      opacity: 0;
      transform: perspective(1200px) translateY(38px) rotateY(-13deg) scale(.93);
      transition: opacity .7s var(--ease), transform .8s var(--ease);
    }

    .arsenal-card.reveal:nth-child(even) {
      transform: perspective(1200px) translateY(38px) rotateY(13deg) scale(.93);
    }

    .arsenal-card.reveal.in {
      opacity: 1;
      transform: perspective(1200px) translateY(0) rotateY(0) scale(1);
    }

    .arsenal-ico {
      width: 54px;
      height: 54px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, rgba(201, 168, 76, .18), rgba(245, 216, 122, .05));
      border: 1px solid rgba(201, 168, 76, .24);
      margin-bottom: 20px;
      transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), opacity .5s var(--ease);
      position: relative;
      z-index: 1;
    }

    .arsenal-ico svg {
      width: 25px;
      height: 25px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.7;
      transition: stroke .35s;
    }

    .arsenal-card:hover .arsenal-ico {
      transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(1.09) rotate(-5deg);
      border-color: rgba(245, 216, 122, .55);
      background: linear-gradient(145deg, rgba(245, 216, 122, .28), rgba(201, 168, 76, .1));
    }

    .arsenal-card:hover .arsenal-ico svg {
      stroke: var(--gold-bright);
    }

    .arsenal-index {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--muted);
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .arsenal-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 25px;
      letter-spacing: 1.6px;
      color: var(--bright);
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .arsenal-desc {
      font-size: 13.5px;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .4px;
      line-height: 1.7;
      margin-top: auto;
      position: relative;
      z-index: 1;
    }

    /* 4. layered content reveal — icon, index, title, desc settle in one after another */
    .arsenal-card .arsenal-ico {
      opacity: 0;
      transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(.6) rotate(-12deg);
    }

    .arsenal-card .arsenal-index {
      opacity: 0;
      transform: translateX(-14px);
      transition: opacity .55s var(--ease), transform .55s var(--ease);
    }

    .arsenal-card .arsenal-title {
      opacity: 0;
      transform: scale(.85);
      transform-origin: left center;
      transition: opacity .55s var(--ease), transform .55s var(--ease);
    }

    .arsenal-card .arsenal-desc {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .55s var(--ease), transform .55s var(--ease);
    }

    .arsenal-card.in .arsenal-ico {
      opacity: 1;
      transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(1) rotate(0deg);
      transition-delay: .55s;
    }

    .arsenal-card.in .arsenal-index {
      opacity: 1;
      transform: translateX(0);
      transition-delay: .68s;
    }

    .arsenal-card.in .arsenal-title {
      opacity: 1;
      transform: scale(1);
      transition-delay: .78s;
    }

    .arsenal-card.in .arsenal-desc {
      opacity: 1;
      transform: translateY(0);
      transition-delay: .9s;
    }

    @media (max-width: 1100px) {
      .arsenal-row {
        flex-direction: column;
        /* stacked rows measure on the cross axis — without this, cards shrink to their text */
        align-items: stretch;
      }

      /* a zero flex-basis in a column row pins every card to min-height and clips the copy */
      .arsenal-card {
        flex: none;
      }

      .arsenal-row .arsenal-card:hover {
        flex-grow: 1;
      }
    }

    /* phones get loadout plates, not a table of contents: every weapon keeps its
       copy, and the slot numeral is stamped into the plate edge like rack stencil */
    @media (max-width: 640px) {
      .arsenal-grid {
        gap: 11px;
      }

      .arsenal-row {
        align-items: stretch;
        gap: 11px;
      }

      .arsenal-card {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        /* the desktop `flex: 1 1 0` collapses to zero height once the row stacks */
        flex: none;
        min-height: 0;
        padding: 14px 18px;
        border-radius: var(--r-md);
        background: linear-gradient(148deg, rgba(201, 168, 76, .085), rgba(255, 246, 225, .014) 58%);
        border: 1px solid rgba(232, 214, 170, .1);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      /* the stamped slot numeral — reuses .glass::after, whose cursor sheen is dead on touch */
      .arsenal-card::after {
        content: attr(data-slot);
        inset: auto 4px auto auto;
        top: 50%;
        transform: translateY(-50%);
        font-family: 'Bebas Neue', sans-serif;
        font-size: 56px;
        line-height: 1;
        letter-spacing: 1px;
        color: transparent;
        -webkit-text-stroke: 1px rgba(201, 168, 76, .3);
        background: none;
        opacity: 1;
        z-index: 0;
      }

      /* touch fires :hover on tap — hold the resting state and answer the press instead */
      .arsenal-row .arsenal-card:hover {
        flex-grow: 0;
        transform: none;
        border-color: rgba(232, 214, 170, .1);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
      }

      .arsenal-card:hover .arsenal-ico {
        transform: none;
        border-color: rgba(201, 168, 76, .28);
        background: linear-gradient(150deg, rgba(201, 168, 76, .17), rgba(245, 216, 122, .03));
      }

      .arsenal-card:active {
        border-color: rgba(201, 168, 76, .34);
      }

      .arsenal-ico {
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        border-radius: 12px;
        background: linear-gradient(150deg, rgba(201, 168, 76, .17), rgba(245, 216, 122, .03));
        border: 1px solid rgba(201, 168, 76, .28);
      }

      .arsenal-ico svg {
        width: 18px;
        height: 18px;
      }

      /* right gutter keeps the type clear of the stamped numeral */
      .arsenal-copy {
        min-width: 0;
        padding: 1px 44px 0 0;
      }

      .arsenal-index {
        display: none;
      }

      .arsenal-title {
        font-size: 19px;
        letter-spacing: 1px;
        line-height: 1.1;
        margin-bottom: 0;
      }

      /* description is too much copy for a phone card — heading + icon only */
      .arsenal-desc {
        display: none;
        margin-top: 0;
        font-size: 12.6px;
        line-height: 1.55;
        letter-spacing: .2px;
        color: rgba(232, 224, 208, .52);
      }

      /* a full-width plate has no business rotating in — straight lift, tighter stagger */
      .arsenal-card.reveal,
      .arsenal-card.reveal:nth-child(even) {
        transform: translateY(22px) scale(.985);
      }

      .arsenal-card.reveal.in {
        transform: none;
      }

      .arsenal-card.in .arsenal-ico {
        transition-delay: .12s;
      }

      .arsenal-card.in .arsenal-title {
        transition-delay: .2s;
      }

      .arsenal-card.in .arsenal-desc {
        transition-delay: .28s;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .arsenal-row .arsenal-card:hover {
        flex-grow: 1 !important;
      }

      .arsenal-card.reveal,
      .arsenal-card .arsenal-ico,
      .arsenal-card .arsenal-index,
      .arsenal-card .arsenal-title,
      .arsenal-card .arsenal-desc {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
      }
    }

    /* ============ STRATEGY ============ */
    .steps-progress-track {
      height: 3px;
      border-radius: 2px;
      background: rgba(255, 246, 225, .08);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .steps-progress-fill {
      height: 100%;
      width: 25%;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
      box-shadow: 0 0 10px rgba(245, 216, 122, .55);
      transition: width .6s var(--ease);
    }

    .steps-nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 26px;
    }

    .steps-nav.reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* gates .in timing for staggered tab entrance below */
    .steps-nav .step-tab {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .55s var(--ease), transform .55s var(--ease), background .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
    }

    .steps-nav.in .step-tab {
      opacity: 1;
      transform: translateY(0);
    }

    .steps-nav.in .step-tab:nth-child(1) {
      transition-delay: .05s;
    }

    .steps-nav.in .step-tab:nth-child(2) {
      transition-delay: .16s;
    }

    .steps-nav.in .step-tab:nth-child(3) {
      transition-delay: .27s;
    }

    .steps-nav.in .step-tab:nth-child(4) {
      transition-delay: .38s;
    }

    .step-tab {
      position: relative;
      text-align: left;
      padding: 18px 20px 20px;
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      overflow: hidden;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
    }

    .step-tab::before {
      content: '';
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(100deg, transparent, rgba(245, 216, 122, .14), transparent);
      transform: skewX(-20deg);
      transition: left .65s var(--ease);
      pointer-events: none;
    }

    .step-tab:hover::before {
      left: 130%;
    }

    .step-tab:hover {
      background: rgba(255, 246, 225, .04);
    }

    .step-tab.active {
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-color: var(--glass-brd);
      box-shadow: inset 0 1px 0 rgba(255, 246, 225, .12);
      animation: tabBreathe 3.2s ease-in-out infinite;
    }

    @keyframes tabBreathe {

      0%,
      100% {
        box-shadow: inset 0 1px 0 rgba(255, 246, 225, .12), 0 0 0 rgba(245, 216, 122, 0);
      }

      50% {
        box-shadow: inset 0 1px 0 rgba(255, 246, 225, .12), 0 0 22px rgba(245, 216, 122, .18);
      }
    }

    .step-tab .step-rail {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      height: 2px;
      border-radius: 2px;
      background: rgba(255, 246, 225, .09);
      overflow: hidden;
    }

    .step-tab .step-rail::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--gold), var(--gold-bright));
      box-shadow: 0 0 10px rgba(245, 216, 122, .7);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .6s var(--ease);
    }

    .step-tab.active .step-rail::after {
      transform: scaleX(1);
    }

    .step-idx {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 2.4px;
      color: var(--muted);
      margin-bottom: 8px;
      transition: color .3s;
    }

    .step-tab.active .step-idx {
      color: var(--gold-bright);
    }

    .step-name {
      display: block;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: 1.5px;
      color: var(--muted);
      transition: color .3s;
    }

    .step-tab.active .step-name {
      color: var(--bright);
    }

    .step-stage {
      position: relative;
      border-radius: var(--r-lg);
      padding: clamp(28px, 4vw, 48px);
    }

    .step-panel {
      display: none;
    }

    .step-panel.active {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: clamp(24px, 4vw, 54px);
      animation: panelIn .6s var(--ease);
    }

    @keyframes panelIn {
      from {
        opacity: 0;
        transform: perspective(900px) translateY(16px) rotateX(5deg)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .step-panel h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(30px, 3.6vw, 46px);
      letter-spacing: 1.5px;
      line-height: 1.02;
      color: var(--bright);
      animation: textWipeIn .7s var(--ease) .15s both;
    }

    .step-panel .phase-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 2.6px;
      color: var(--gold-bright);
      text-transform: uppercase;
      margin-bottom: 12px;
      animation: textWipeIn .5s var(--ease) .05s both;
    }

    @keyframes textWipeIn {
      from {
        clip-path: inset(0 100% 0 0);
      }

      to {
        clip-path: inset(0 0 0 0);
      }
    }

    .strategy-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .strategy-list li {
      font-size: 14.5px;
      font-weight: 300;
      color: var(--text);
      letter-spacing: .4px;
      padding-left: 30px;
      position: relative;
      line-height: 1.6;
      opacity: 0;
      animation: liIn .5s var(--ease) both;
    }

    .strategy-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 15px;
      height: 1px;
      background: linear-gradient(90deg, var(--gold-bright), transparent);
      transform: scaleX(0);
      transform-origin: left;
      animation: dashDraw .4s var(--ease) both;
    }

    @keyframes liIn {
      from {
        opacity: 0;
        transform: translateX(-14px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes dashDraw {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    .strategy-list li:nth-child(1) {
      animation-delay: .22s;
    }

    .strategy-list li:nth-child(2) {
      animation-delay: .32s;
    }

    .strategy-list li:nth-child(3) {
      animation-delay: .42s;
    }

    .strategy-list li:nth-child(4) {
      animation-delay: .52s;
    }

    .strategy-list li:nth-child(5) {
      animation-delay: .62s;
    }

    .strategy-list li:nth-child(1)::before {
      animation-delay: .32s;
    }

    .strategy-list li:nth-child(2)::before {
      animation-delay: .42s;
    }

    .strategy-list li:nth-child(3)::before {
      animation-delay: .52s;
    }

    .strategy-list li:nth-child(4)::before {
      animation-delay: .62s;
    }

    .strategy-list li:nth-child(5)::before {
      animation-delay: .72s;
    }

    @media (max-width: 900px) {
      .steps-nav {
        grid-template-columns: repeat(2, 1fr);
      }

      .step-panel.active {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {

      /* collapse the desktop two-line break into one line that scales to fit the card width */
      .step-panel h3 br {
        display: none;
      }

      .step-panel h3 {
        white-space: nowrap;
        font-size: clamp(15px, 5.4vw, 22px);
        letter-spacing: .5px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .steps-nav .step-tab,
      .step-tab::before,
      .step-tab.active,
      .step-panel h3,
      .step-panel .phase-label,
      .strategy-list li,
      .strategy-list li::before,
      .steps-progress-fill {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        left: -60% !important;
      }
    }

    /* ============ LEVELS ============ */
    .levels-track {
      display: flex;
      align-items: flex-end;
      gap: 12px;
    }

    .level-card {
      flex: 1;
      min-width: 0;
      padding: 26px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 250px;
      border-radius: var(--r-lg);
    }

    .levels-track .level-card:nth-child(2) {
      min-height: 292px;
    }

    .levels-track .level-card:nth-child(3) {
      min-height: 334px;
    }

    .levels-track .level-card:nth-child(4) {
      min-height: 376px;
    }

    /* ascending staircase entrance — each card rises in turn, left to right */
    .levels-track .level-card {
      transform: perspective(1000px) translateY(56px) scale(.94);
    }

    .levels-track .level-card.in {
      transform: none;
    }

    .levels-track .level-card:nth-child(1) {
      transition-delay: .05s;
    }

    .levels-track .level-card:nth-child(2) {
      transition-delay: .16s;
    }

    .levels-track .level-card:nth-child(3) {
      transition-delay: .27s;
    }

    .levels-track .level-card:nth-child(4) {
      transition-delay: .38s;
    }

    .levels-track .level-card:nth-child(5) {
      transition-delay: .5s;
    }

    /* hover glow, rank-tinted */
    .level-card:hover {
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 26px rgba(255, 246, 225, .1);
    }

    .lv-2:hover {
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 30px rgba(122, 95, 34, .4);
      border-color: rgba(122, 95, 34, .55);
    }

    .lv-3:hover {
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 34px rgba(201, 168, 76, .44);
      border-color: rgba(201, 168, 76, .5);
    }

    .lv-4:hover {
      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 38px rgba(232, 184, 75, .48);
      border-color: rgba(232, 184, 75, .6);
    }

    .level-ico {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 246, 225, .12);
      background: rgba(255, 246, 225, .04);
      transition: all .35s var(--ease);
    }

    .level-ico svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke-width: 1.8;
    }

    .level-rank-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 2.2px;
      color: var(--muted);
    }

    .level-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 25px;
      letter-spacing: 1.8px;
      color: var(--bright);
    }

    .level-desc {
      font-size: 12.8px;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .3px;
      line-height: 1.6;
      margin-top: auto;
    }

    .level-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      align-self: flex-start;
      border-radius: 100px;
      padding: 5px 13px;
      border: 1px solid rgba(255, 246, 225, .13);
      color: var(--muted);
    }

    /* icon + badge pop-in, cascading after each card rises */
    .level-ico,
    .level-badge {
      opacity: 0;
      transform: scale(.5);
      transition: opacity .45s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1);
    }

    .levels-track .level-card.in .level-ico,
    .levels-track .level-card.in .level-badge {
      opacity: 1;
      transform: scale(1);
    }

    .levels-track .level-card:nth-child(1).in .level-ico {
      transition-delay: .55s;
    }

    .levels-track .level-card:nth-child(1).in .level-badge {
      transition-delay: .73s;
    }

    .levels-track .level-card:nth-child(2).in .level-ico {
      transition-delay: .66s;
    }

    .levels-track .level-card:nth-child(2).in .level-badge {
      transition-delay: .84s;
    }

    .levels-track .level-card:nth-child(3).in .level-ico {
      transition-delay: .77s;
    }

    .levels-track .level-card:nth-child(3).in .level-badge {
      transition-delay: .95s;
    }

    .levels-track .level-card:nth-child(4).in .level-ico {
      transition-delay: .88s;
    }

    .levels-track .level-card:nth-child(4).in .level-badge {
      transition-delay: 1.06s;
    }

    .levels-track .level-card:nth-child(5).in .level-ico {
      transition-delay: 1s;
    }

    .levels-track .level-card:nth-child(5).in .level-badge {
      transition-delay: 1.18s;
    }

    /* rank progression through gold intensity */
    .lv-1 .level-ico svg {
      stroke: var(--muted);
    }

    .lv-2 .level-ico {
      border-color: rgba(122, 95, 34, .5);
      background: rgba(122, 95, 34, .14);
    }

    .lv-2 .level-ico svg {
      stroke: var(--gold-dim);
    }

    .lv-2 .level-badge {
      border-color: rgba(122, 95, 34, .5);
      color: #9C7C33;
    }

    .lv-3 .level-ico {
      border-color: rgba(201, 168, 76, .42);
      background: rgba(201, 168, 76, .12);
    }

    .lv-3 .level-ico svg {
      stroke: var(--gold);
    }

    .lv-3 .level-badge {
      border-color: rgba(201, 168, 76, .42);
      color: var(--gold);
    }

    .lv-4 .level-ico {
      border-color: rgba(232, 184, 75, .5);
      background: rgba(232, 184, 75, .14);
    }

    .lv-4 .level-ico svg {
      stroke: var(--amber);
    }

    .lv-4 .level-badge {
      border-color: rgba(232, 184, 75, .5);
      color: var(--amber);
    }

    .level-card-final {
      flex: 1.4;
      min-height: 428px !important;
      background: linear-gradient(160deg, rgba(245, 216, 122, .2), rgba(201, 168, 76, .09) 55%, rgba(255, 246, 225, .015));
      border-color: rgba(245, 216, 122, .4);
      padding: 30px 28px;
      animation: finalBossBreathe 4s ease-in-out infinite;
    }

    @keyframes finalBossBreathe {

      0%,
      100% {
        box-shadow: 0 14px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 0 rgba(245, 216, 122, 0);
      }

      50% {
        box-shadow: 0 14px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 44px rgba(245, 216, 122, .32);
      }
    }

    .level-card-final:hover {
      animation-play-state: paused;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 246, 225, .11), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 50px rgba(245, 216, 122, .5);
      border-color: rgba(245, 216, 122, .7);
    }

    .level-card-final::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 82% 12%, rgba(245, 216, 122, .24), transparent 62%);
      pointer-events: none;
    }

    .level-card-final .level-ico {
      border-color: rgba(245, 216, 122, .6);
      background: rgba(245, 216, 122, .18);
      animation: crownFloat 3s ease-in-out 1.5s infinite;
    }

    .level-card-final .level-ico svg {
      stroke: var(--gold-bright);
    }

    @keyframes crownFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    .level-card-final .level-rank-num {
      color: var(--gold-bright);
    }

    .level-card-final .level-name {
      font-size: 31px;
      background: linear-gradient(100deg, #FFF3D4, var(--gold-bright) 60%, var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .level-card-final .level-desc {
      color: var(--text);
      font-size: 13.5px;
    }

    .level-card-final .level-badge {
      border-color: rgba(245, 216, 122, .6);
      color: var(--gold-bright);
    }

    @media (max-width: 900px) {
      .levels-track {
        flex-direction: column;
        align-items: stretch;
      }

      .levels-track .level-card,
      .levels-track .level-card:nth-child(2),
      .levels-track .level-card:nth-child(3),
      .levels-track .level-card:nth-child(4),
      .level-card-final {
        min-height: auto !important;
      }
    }

    /* editorial index list on phones — same pattern as the Arsenal section: hairline rows, no stacked cards */
    @media (max-width: 640px) {
      .levels-track {
        gap: 0;
        border-top: 1px solid rgba(232, 214, 170, .1);
      }

      .level-card,
      .level-card-final {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 16px 4px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(232, 214, 170, .1);
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none !important;
      }

      .level-card::after {
        display: none;
      }

      .level-card-final {
        background: linear-gradient(90deg, rgba(245, 216, 122, .08), transparent 75%);
        border-bottom-color: rgba(245, 216, 122, .3);
      }

      .level-ico {
        width: 34px;
        height: 34px;
        flex: none;
      }

      .level-ico svg {
        width: 15px;
        height: 15px;
      }

      .level-rank-num {
        flex: none;
        letter-spacing: 1.2px;
      }

      .level-name,
      .level-card-final .level-name {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .level-desc {
        display: none;
      }

      .level-badge {
        flex: none;
        margin-left: auto;
        font-size: 8px;
        padding: 4px 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .levels-track .level-card,
      .level-ico,
      .level-badge,
      .level-card-final {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* ============ CHART ============ */
    .live-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold-bright);
      box-shadow: 0 0 10px var(--gold-bright);
      margin-right: 7px;
      animation: livePulse 1.7s ease-in-out infinite;
    }

    @keyframes livePulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(.68)
      }
    }

    .chart-container {
      padding: clamp(24px, 3.5vw, 44px);
      border-radius: var(--r-lg);
    }

    .chart-title-bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 246, 225, .08);
      flex-wrap: wrap;
      gap: 14px;
    }

    .chart-pair-wrap {
      display: flex;
      flex-direction: column;
    }

    .chart-pair {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 34px;
      letter-spacing: 1.5px;
      color: var(--bright);
      line-height: 1;
    }

    .chart-pair span {
      background: linear-gradient(100deg, var(--champagne), var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .chart-sublbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: 1.8px;
      color: var(--muted);
      margin-top: 6px;
      display: flex;
      align-items: center;
    }

    .chart-price-wrap {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .chart-price {
      font-family: 'JetBrains Mono', monospace;
      font-size: 30px;
      font-weight: 700;
      color: var(--gold-bright);
      letter-spacing: 1.2px;
      line-height: 1;
      text-shadow: 0 0 20px rgba(245, 216, 122, .4);
    }

    .chart-change {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--up);
      letter-spacing: .8px;
      margin-top: 5px;
    }

    .fake-chart {
      height: 290px;
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 12%, rgba(201, 168, 76, .1), rgba(4, 4, 4, .92) 76%);
      border: 1px solid rgba(255, 246, 225, .07);
      border-radius: var(--r-md);
      cursor: crosshair;
      user-select: none;
    }

    .fake-chart svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .mkt-wick {
      stroke-width: 1.6;
      transition: x1 .5s var(--ease), x2 .5s var(--ease), y1 .5s var(--ease), y2 .5s var(--ease), stroke .3s;
    }

    .mkt-wick.mkt-up { stroke: var(--up); }
    .mkt-wick.mkt-down { stroke: var(--down); }

    .mkt-body {
      transition: x .5s var(--ease), y .5s var(--ease), width .5s var(--ease), height .5s var(--ease), fill .3s;
    }

    .mkt-body.mkt-up { fill: var(--up); }
    .mkt-body.mkt-down { fill: var(--down); }

    .mkt-body.mkt-live {
      animation: mktLivePulse 1.6s ease-in-out infinite;
    }

    @keyframes mktLivePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .55; }
    }

    @media (prefers-reduced-motion: reduce) {
      .mkt-wick, .mkt-body { transition: none !important; }
      .mkt-body.mkt-live { animation: none !important; opacity: 1 !important; }
    }

    .chart-tooltip {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      background: linear-gradient(150deg, rgba(32, 28, 20, .95), rgba(14, 14, 12, .96));
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(232, 214, 170, .18);
      border-radius: 14px;
      padding: 12px 18px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .85), 0 0 20px rgba(201, 168, 76, .2);
      pointer-events: none;
      transition: opacity .15s ease;
      opacity: 0;
      min-width: 142px;
    }

    .chart-tooltip.show {
      opacity: 1;
    }

    .tt-price {
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .4px;
      line-height: 1.1;
    }

    .tt-date {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      color: rgba(255, 255, 255, .7);
      margin-top: 4px;
      letter-spacing: .4px;
    }

    .tt-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px;
      color: rgba(255, 255, 255, .48);
      margin-top: 2px;
    }

    .chart-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      color: var(--muted);
      letter-spacing: 1.8px;
    }

    /* ============ CTA ============ */
    .cta-final {
      text-align: center;
      padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 72px);
      position: relative;
      overflow: hidden;
    }

    .cta-final::before {
      content: 'FBFX444';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(140px, 22vw, 300px);
      color: transparent;
      -webkit-text-stroke: 1px rgba(201, 168, 76, .07);
      letter-spacing: 10px;
      white-space: nowrap;
      pointer-events: none;
    }

    .cta-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      height: 480px;
      background: radial-gradient(ellipse, rgba(245, 216, 122, .13) 0%, rgba(201, 168, 76, .06) 46%, transparent 72%);
      pointer-events: none;
    }

    .cta-final-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(52px, 7.5vw, 96px);
      line-height: .98;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
      color: var(--bright);
    }

    .cta-final-title em {
      font-style: normal;
      background: linear-gradient(100deg, #FFF3D4, var(--gold-bright) 55%, var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cta-final p {
      font-size: 17px;
      font-weight: 300;
      letter-spacing: 1.6px;
      color: var(--muted);
      margin-bottom: 42px;
      position: relative;
      z-index: 2;
    }

    .cta-final .btn-primary {
      font-size: 21px;
      padding: 17px 22px 17px 40px;
      position: relative;
      z-index: 2;
    }

    /* ============ FOOTER ============ */
    footer {
      position: relative;
      z-index: 1;
      max-width: 1560px;
      margin: 20px auto 0;
      padding: 38px clamp(24px, 5vw, 60px);
      border-radius: var(--r-lg);
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-brd);
      box-shadow: inset 0 1px 0 rgba(255, 246, 225, .09);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
    }

    footer .logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 23px;
      letter-spacing: 3.5px;
      background: linear-gradient(100deg, var(--champagne), var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    footer .copy {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: 1.8px;
      color: var(--muted);
    }

    footer .terms-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: 2px;
      color: var(--gold);
      text-decoration: none;
      text-transform: uppercase;
      transition: color .25s;
    }

    footer .terms-link:hover {
      color: var(--gold-bright);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(26px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0
      }
    }

    .cursor {
      display: inline-block;
      animation: blink 1s step-end infinite;
      color: var(--gold-bright);
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 900px) {
      body {
        padding: 8px;
      }

      .canvas {
        border-radius: 24px;
      }

      nav {
        top: 10px;
        left: 10px;
        right: 10px;
        padding: 9px 9px 9px 18px;
      }

      .nav-links {
        display: none;
      }

      .nav-logo {
        font-size: 20px;
        letter-spacing: 2.4px;
      }

      .nav-cta {
        padding: 10px 16px;
        font-size: 9px;
        letter-spacing: 1.2px;
      }

      section {
        padding: 64px 20px;
      }

      .hero {
        padding: 116px 20px 150px;
        min-height: 94vh;
      }

      .hero-rule {
        top: 74px;
        left: 4%;
        right: 4%;
      }

      .hero-candles {
        bottom: 48px;
        height: 58%;
      }

      /* shrink the badge pill enough that "Est. The Market — Final Boss Forex" fits on one line */
      .hero-tag {
        gap: 6px;
        font-size: 8px;
        letter-spacing: .6px;
        padding: 8px 14px;
        white-space: nowrap;
      }

      /* widen the gap between subtitle and buttons — since .hero-content is
         vertically centered as one block, a taller middle gap pushes the
         tag+title+subtitle cluster up and the action buttons down for free */
      .hero {
        padding: 88px 20px 100px;
      }

      .hero-sub {
        margin-bottom: 140px;
      }

      .hero-actions {
        margin-top: 260px;
      }

      .arc-marquee text {
        font-size: 78px;
      }

      footer {
        flex-direction: column;
        text-align: center;
        gap: 14px;
      }
    }

    /* ============ MODAL ============ */
    /* built on the site's standard .glass panel (same component as every card
       on the page) instead of a bespoke gold poster-gradient — a popup that
       looks like it belongs to the product, not bolted onto it */
    .member-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(3, 3, 3, .88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
    }

    .member-modal-overlay.show {
      display: flex !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .member-modal-card {
      position: relative;
      width: min(460px, 100%);
      padding: 38px 36px 32px;
      text-align: left;
      transform: translateY(16px) scale(.97);
      transition: transform .5s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
    }

    .member-modal-overlay.show .member-modal-card {
      transform: translateY(0) scale(1);
    }

    .member-modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 1;
      background: transparent;
      border: 1px solid var(--glass-brd);
      color: var(--muted);
      font-size: 11px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s ease;
    }

    .member-modal-close:hover {
      border-color: var(--gold);
      color: var(--gold-bright);
    }

    .member-modal-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--champagne);
      background: var(--glass-bg);
      border: 1px solid var(--glass-brd);
      border-radius: 100px;
      padding: 7px 15px;
      margin-bottom: 22px;
    }

    .member-modal-badge::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold-bright);
      box-shadow: 0 0 6px rgba(245, 216, 122, .8);
    }

    .member-modal-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 30px;
      letter-spacing: 1.2px;
      color: var(--bright);
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .member-modal-title em {
      font-style: normal;
      background: linear-gradient(100deg, var(--champagne), var(--gold-bright) 55%, var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .member-modal-motto {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 300;
      font-size: 14px;
      letter-spacing: .2px;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 26px;
      padding-bottom: 26px;
      border-bottom: 1px solid var(--border);
    }

    /* editorial numbered list, not glowing tiles — reads like a checklist you'd trust */
    .member-steps-grid {
      display: flex;
      flex-direction: column;
      margin-bottom: 30px;
    }

    .member-step-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }

    .member-step-card:first-child {
      padding-top: 0;
    }

    .member-step-card:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .member-step-num {
      flex: none;
      width: 22px;
      padding-top: 2px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .5px;
      color: var(--gold);
      opacity: .75;
    }

    .member-step-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16.5px;
      letter-spacing: .5px;
      color: var(--bright);
      margin-bottom: 3px;
    }

    .member-step-desc {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 300;
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.45;
    }

    .member-modal-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .member-btn-primary {
      width: 100%;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 17px;
      letter-spacing: 2px;
      padding: 16px;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      color: #0A0A08;
      background: linear-gradient(100deg, var(--champagne), var(--gold));
      box-shadow: 0 8px 28px rgba(201, 168, 76, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
      transition: all .32s var(--ease);
    }

    .member-btn-primary:hover {
      transform: translateY(-2px);
      background: linear-gradient(100deg, #fff3d4, var(--gold-bright));
      box-shadow: 0 14px 38px rgba(245, 216, 122, .42), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    .member-btn-ghost {
      background: transparent;
      border: none;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .2em;
      cursor: pointer;
      text-transform: uppercase;
      transition: color .2s ease;
    }

    .member-btn-ghost:hover {
      color: var(--gold-bright);
    }

    @media (max-width: 650px) {
      .member-modal-overlay {
        padding: 16px;
      }

      .member-modal-card {
        width: min(400px, 100%);
        padding: 28px 22px 24px;
        max-height: 88vh;
        overflow-y: auto;
        margin: auto;
      }

      .member-modal-badge {
        font-size: 9px;
        padding: 6px 13px;
        margin-bottom: 16px;
      }

      .member-modal-title {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .member-modal-motto {
        font-size: 12.5px;
        margin-bottom: 18px;
        padding-bottom: 18px;
      }

      .member-steps-grid {
        margin-bottom: 22px;
      }

      .member-step-title {
        font-size: 15px;
      }

      .member-step-desc {
        font-size: 11.5px;
      }

      .member-btn-primary {
        font-size: 16px;
        letter-spacing: 1.6px;
      }
    }