:root {
      --color-bg-dark: #0B1C2D;
      --color-bg-dark-alt: #0F2236;
      --color-bg-dark-elevated: #142C44;
      --color-bg-light: #FAF7F2;
      --color-bg-light-alt: #F2EEE6;
      --color-bg-light-elevated: #E8E2D5;

      --color-ink-dark: #FAFEFE;
      --color-ink-dark-60: rgba(250, 254, 254, .62);
      --color-ink-dark-40: rgba(250, 254, 254, .40);
      --color-ink-dark-20: rgba(250, 254, 254, .18);
      --color-ink-dark-08: rgba(250, 254, 254, .08);

      --color-ink-light: #0B1C2D;
      --color-ink-light-60: rgba(11, 28, 45, .62);
      --color-ink-light-40: rgba(11, 28, 45, .40);
      --color-ink-light-20: rgba(11, 28, 45, .18);
      --color-ink-light-08: rgba(11, 28, 45, .08);

      --color-muted-dark: rgba(250, 254, 254, .62);
      --color-muted-dark-2: rgba(250, 254, 254, .42);
      --color-muted-light: rgba(11, 28, 45, .66);
      --color-muted-light-2: rgba(11, 28, 45, .46);

      --color-border-dark: rgba(250, 254, 254, .08);
      --color-border-dark-2: rgba(250, 254, 254, .14);
      --color-border-light: rgba(11, 28, 45, .08);
      --color-border-light-2: rgba(11, 28, 45, .14);

      --color-accent: #ECD27B;
      --color-accent-deep: #A07A2A;
      --color-accent-soft-dark: rgba(236, 210, 123, .14);
      --color-accent-soft-light: rgba(160, 122, 42, .10);
      --color-accent-line-dark: rgba(236, 210, 123, .48);
      --color-accent-line-light: rgba(160, 122, 42, .32);

      --theme-bg: var(--color-bg-dark);
      --theme-bg-alt: var(--color-bg-dark-alt);
      --theme-bg-elevated: var(--color-bg-dark-elevated);
      --theme-ink: var(--color-ink-dark);
      --theme-ink-60: var(--color-ink-dark-60);
      --theme-ink-40: var(--color-ink-dark-40);
      --theme-ink-20: var(--color-ink-dark-20);
      --theme-ink-08: var(--color-ink-dark-08);
      --theme-muted: var(--color-muted-dark);
      --theme-muted-2: var(--color-muted-dark-2);
      --theme-border: var(--color-border-dark);
      --theme-border-2: var(--color-border-dark-2);
      --theme-accent: var(--color-accent);
      --theme-accent-soft: var(--color-accent-soft-dark);
      --theme-accent-line: var(--color-accent-line-dark);

      --navy: var(--theme-bg);
      --navy-2: var(--theme-bg-alt);
      --navy-3: var(--theme-bg-elevated);
      --blue: #1E3A8A;
      --gold: var(--theme-accent);
      --gold-soft: var(--theme-accent-soft);
      --gold-line: var(--theme-accent-line);
      --white: var(--theme-ink);
      --ink-60: var(--theme-ink-60);
      --ink-40: var(--theme-ink-40);
      --ink-20: var(--theme-ink-20);
      --ink-08: var(--theme-ink-08);
      --muted: var(--theme-muted);
      --muted-2: var(--theme-muted-2);
      --hairline: var(--theme-border);
      --hairline-2: var(--theme-border-2);
      --strike-text: var(--theme-muted);
      --strike-line: var(--theme-accent);
      --ease: cubic-bezier(.2, .7, .2, 1);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --serif: "Fraunces", "Instrument Serif", "Times New Roman", serif;
    }

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

    html,
    body {
      background: var(--navy);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility
    }

    .bd {
      border: solid 1px red;
    }

    .zin {
      z-index: 9999;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      overflow-x: hidden;
      line-height: 1.5;
      cursor: none
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

    @media (hover:none) {
      body {
        cursor: auto
      }

      .cursor,
      .cursor-trail {
        display: none !important
      }
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: none;
      cursor: none
    }

    input {
      font: inherit;
      color: inherit;
      cursor: none
    }

    a {
      color: inherit;
      text-decoration: none;
      cursor: none
    }

    .cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 8px;
      height: 8px;
      background: var(--gold);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      mix-blend-mode: screen;
      transform: translate(-50%, -50%);
      transition: width .35s var(--ease), height .35s var(--ease), background .3s var(--ease), opacity .3s var(--ease)
    }

    .cursor-trail {
      position: fixed;
      top: 0;
      left: 0;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(236, 210, 123, .35);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: width .4s var(--ease), height .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease)
    }

    body.cursor-hover .cursor {
      width: 0;
      height: 0;
      opacity: 0
    }

    body.cursor-hover .cursor-trail {
      width: 64px;
      height: 64px;
      border-color: var(--gold);
      background: rgba(236, 210, 123, .06)
    }

    /* ============= TYPOGRAPHY ============= */
    .display {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      letter-spacing: -.035em;
      line-height: 1.05
    }

    .display em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      color: var(--gold);
      letter-spacing: -.005em
    }

    .display-alt {
      font-family: var(--serif);
      font-size: clamp(56px, 9.2vw, 148px);
      font-weight: 300;
      letter-spacing: -.025em;
      line-height: 1.0;
      color: var(--white)
    }

    .display-alt em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 300;
      color: var(--gold);
      letter-spacing: -.005em
    }

    .display-sub {
      font-family: var(--serif);
      font-size: clamp(28px, 3.6vw, 56px);
      font-weight: 300;
      letter-spacing: -.02em;
      line-height: 1.1;
      color: var(--ink-60);
      margin-top: 32px
    }

    .display-sub em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 300;
      color: var(--gold)
    }

    .eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold)
    }

    .eyebrow-muted {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted-2)
    }

    .body-lg {
      font-size: 18px;
      line-height: 1.55;
      color: var(--muted);
      font-weight: 300;
      max-width: 52ch
    }

    .body {
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
      font-weight: 300
    }

    /* ============= LAYOUT ============= */
    .wrap {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative
    }

    section {
      position: relative
    }

    .section-pad {
      padding: 160px 0
    }

    @media (max-width:768px) {
      .section-pad {
        padding: 96px 0
      }

      .wrap {
        padding: 0 22px
      }
    }

    /* ============= NAV ============= */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
      border-bottom: 1px solid transparent
    }

    .nav.scrolled {
      background: rgba(11, 28, 45, .95);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      border-bottom-color: var(--hairline)
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 32px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .brand-mark {
      width: 30px;
      height: 30px
    }

    .brand-name {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: .32em
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px
    }

    .nav-link {
      font-size: 13px;
      color: var(--muted);
      transition: color .3s var(--ease);
      position: relative
    }

    .nav-link:hover {
      color: var(--white)
    }

    .nav-cta {
      --btn-height: 38px;
      --btn-pad: 0 18px;
      --btn-font-size: 13px;
      --btn-letter-spacing: .01em;
      --btn-weight: 500
    }

    @media (max-width:768px) {
      .nav-cta {
        display: none !important;
      }

      .nav-links {
        gap: 0
      }

      .nav-link {
        display: none
      }

      .nav-inner {
        padding: 0 22px;
        height: 64px
      }
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: var(--btn-height, 48px);
      padding: var(--btn-pad, 0 30px);
      background: var(--btn-bg, var(--gold));
      color: var(--btn-color, var(--navy));
      font-weight: var(--btn-weight, 600);
      font-size: var(--btn-font-size, 14px);
      letter-spacing: var(--btn-letter-spacing, .02em);
      border: 1px solid var(--btn-border, transparent);
      border-radius: 999px;
      cursor: none;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 18px 40px -24px var(--btn-shadow, rgba(236, 210, 123, .45));
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out)
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      background: radial-gradient(60% 80% at 50% 50%, var(--btn-glow, rgba(236, 210, 123, .55)), transparent 70%);
      filter: blur(18px);
      opacity: 0;
      transition: opacity .5s var(--ease-out);
      z-index: -1
    }

    .btn:hover {
      transform: translateY(-2px);
      background: var(--btn-bg-hover, var(--btn-bg, var(--gold)));
      box-shadow: 0 22px 48px -24px var(--btn-shadow-hover, var(--btn-shadow, rgba(236, 210, 123, .45)))
    }

    .btn:hover::before {
      opacity: 1
    }

    .btn .arrow {
      display: inline-block;
      transition: transform .4s var(--ease-out)
    }

    .btn:hover .arrow {
      transform: translateX(4px)
    }

    .btn-gold {
      --btn-bg: var(--gold);
      --btn-bg-hover: #F2DA8C;
      --btn-color: var(--color-ink-light);
      --btn-border: transparent;
      --btn-glow: rgba(236, 210, 123, .55);
      --btn-shadow: rgba(236, 210, 123, .46);
      --btn-shadow-hover: rgba(236, 210, 123, .58)
    }

    .btn-navy {
      --btn-bg: var(--color-ink-light);
      --btn-bg-hover: #13283D;
      --btn-color: var(--color-bg-light);
      --btn-border: rgba(11, 28, 45, .12);
      --btn-glow: rgba(11, 28, 45, .24);
      --btn-shadow: rgba(11, 28, 45, .34);
      --btn-shadow-hover: rgba(11, 28, 45, .42)
    }

    .btn-blue {
      --btn-bg: #1E3A8A;
      --btn-bg-hover: #2748A6;
      --btn-color: #FAFEFE;
      --btn-border: rgba(250, 254, 254, .12);
      --btn-glow: rgba(30, 58, 138, .42);
      --btn-shadow: rgba(30, 58, 138, .42);
      --btn-shadow-hover: rgba(30, 58, 138, .55)
    }

    .btn-ghost {
      --btn-bg: transparent;
      --btn-bg-hover: transparent;
      --btn-color: var(--white);
      --btn-border: var(--ink-20);
      --btn-shadow: transparent;
      --btn-shadow-hover: transparent;
      box-shadow: none
    }

    .btn-ghost::before {
      display: none
    }

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


    /* ============= HERO ============= */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .hero-bgcc {
      position: absolute;
      inset: 0;
      top: 0%;
      object-fit: cover;
      opacity: .10;
      z-index: 1
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(236, 210, 123, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 210, 123, .06) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent);
      pointer-events: none;
      z-index: 0
    }

    .hero-grid-alt {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(11, 28, 45, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 28, 45, .055) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(62% 62% at 50% 46%, #000, transparent);
      pointer-events: none;
      z-index: 0
    }

    .hero-noise {
      position: absolute;
      inset: 0;
      opacity: .5;
      mix-blend-mode: overlay;
      pointer-events: none;
      z-index: 2;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .9  0 0 0 0 .85  0 0 0 0 .6  0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")
    }

    .hero-inner {
      position: relative;
      z-index: 3;
      width: 100%;
      text-align: center;
    }

    .hero-img {
      position: absolute;
      right: 0;
      bottom: 0%;
      z-index: 2;
      max-width: 50%;
      pointer-events: none
    }

    .hero-eyebrow {
      margin-bottom: 48px
    }

    .hero h1 {
      margin-bottom: 0;
      margin: 0 auto;
      max-width: 18ch
    }

    .hero .display-sub {
      margin-bottom: 48px;
      margin: 32px auto 48px;
      max-width: 24ch
    }

    .hero-sub {
      max-width: 52ch;
      margin: 0 auto 48px;
      font-size: clamp(16px, 1.3vw, 20px);
      line-height: 1.65;
      color: var(--ink-60);
      font-weight: 300
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px 14px 7px 10px;
      border-radius: 99px;
      background: var(--gold-soft);
      border: 1px solid var(--gold-line);
      color: var(--gold);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 36px
    }

    .hero-badge .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 12px var(--gold);
      animation: dotPulse 2.4s ease-in-out infinite
    }

    @keyframes dotPulse {

      0%,
      100% {
        opacity: .5
      }

      50% {
        opacity: 1
      }
    }

    .hero h1 {
      font-size: clamp(48px, 8.5vw, 104px)
    }

    .hero h1 .italic {
      font-style: italic;
      font-weight: 400;
      color: var(--gold)
    }

    .hero-form {
      margin: 48px auto 0;
      max-width: 520px;
      display: flex;
      align-items: stretch;
      gap: 8px;
      padding: 6px;
      border-radius: 99px;
      background: rgba(250, 254, 254, .04);
      border: 1px solid var(--hairline-2);
      backdrop-filter: blur(10px);
      transition: border-color .3s var(--ease), background .3s var(--ease)
    }

    .hero-form:focus-within {
      border-color: var(--gold-line);
      background: rgba(236, 210, 123, .04)
    }

    .hero-form input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      padding: 0 18px;
      font-size: 15px;
      font-weight: 400;
      color: var(--white);
      min-width: 0
    }

    .hero-form input::placeholder {
      color: var(--muted-2)
    }

    .hero-form .btn {
      --btn-height: 48px;
      --btn-pad: 0 26px;
      --btn-font-size: 14px;
      --btn-letter-spacing: .01em;
      --btn-weight: 600;
      font-family: 'Inter Tight', sans-serif
    }

    .hero-form.success {
      border-color: var(--gold);
      background: rgba(236, 210, 123, .08)
    }

    .hero-form-msg {
      margin-top: 14px;
      font-size: 13px;
      color: var(--gold);
      opacity: 0;
      transition: opacity .4s var(--ease);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .12em;
      text-transform: uppercase
    }

    .hero-form-msg.show {
      opacity: 1
    }

    .waitlist-success {
      width: 100%;
      padding: 16px 22px;
      color: var(--gold);
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      letter-spacing: .14em;
      text-align: center;
      text-transform: uppercase
    }

    .site-toast {
      position: fixed;
      right: clamp(18px, 3vw, 36px);
      bottom: clamp(18px, 3vw, 36px);
      z-index: 100000;
      max-width: min(360px, calc(100vw - 36px));
      padding: 15px 18px;
      border: 1px solid var(--gold-line);
      border-radius: 16px;
      background: rgba(11, 28, 45, .86);
      color: var(--white);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      line-height: 1.45;
      text-transform: uppercase;
      box-shadow: 0 22px 80px rgba(0, 0, 0, .34);
      backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transform: translateY(18px) scale(.96);
      transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease)
    }

    .site-toast.show {
      opacity: 1;
      transform: translateY(0) scale(1)
    }

    .site-toast.error {
      border-color: rgba(255, 130, 104, .52)
    }


    .hero-meta {
      margin-top: 36px;
      display: flex;
      gap: 32px;
      justify-content: center;
      flex-wrap: wrap;
      color: var(--muted-2);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .hero-meta span {
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .hero-meta span::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--gold);
      opacity: .6
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap
    }

    .scroll-ind {
      position: absolute;
      left: 50%;
      bottom: 32px;
      transform: translateX(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: var(--muted-2);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase
    }

    .scroll-ind .line {
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, transparent, var(--gold-line) 40%, var(--gold) 100%);
      position: relative;
      overflow: hidden
    }

    .scroll-ind .line::after {
      content: "";
      position: absolute;
      top: -12px;
      left: 0;
      width: 1px;
      height: 12px;
      background: var(--gold);
      animation: scrollDown 2.2s var(--ease) infinite
    }

    @keyframes scrollDown {
      0% {
        top: -12px
      }

      100% {
        top: 48px
      }
    }

    @media (max-width:600px) {
      .scroll-ind {
        display: none
      }

      .hero-form {
        flex-direction: column;
        border-radius: 18px;
        padding: 8px
      }

      .hero-form input {
        padding: 14px 14px 4px
      }

      .hero-form .btn {
        width: 100%
      }
    }

    /* ============= MARQUEE ============= */
    .marquee {
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
      overflow: hidden;
      padding: 22px 0;
      background: rgba(0, 0, 0, .15)
    }

    .marquee-track {
      display: flex;
      gap: 64px;
      white-space: nowrap;
      animation: marquee 38s linear infinite;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted-2)
    }

    .marquee-track span {
      display: inline-flex;
      align-items: center;
      gap: 64px
    }

    .marquee-track span::after {
      content: "●";
      color: var(--gold);
      font-size: 6px;
      opacity: .7
    }

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

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

    /* ============= SECTION HEADER ============= */
    .sec-head {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 48px;
      align-items: start;
      margin-bottom: 96px
    }

    .sec-head .index {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--muted-2);
      letter-spacing: .18em;
      padding-top: 14px;
      border-top: 1px solid var(--hairline-2);
      display: inline-block
    }

    .sec-head h2 {
      font-size: clamp(34px, 5vw, 68px);
      max-width: 18ch
    }

    .sec-head-alt {
      display: flex;
      align-items: center;
    }

    .sec-head-alt h2 {
      font-size: clamp(34px, 5vw, 68px);
    }

    @media (max-width:768px) {
      .sec-head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 56px
      }

      .sec-head .index {
        padding-top: 0;
        border-top: none;
        border-left: 2px solid var(--gold);
        padding-left: 14px
      }

      .sec-head-alt {
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 16px
      }
    }

    /* ============= PROBLEM ============= */
    .problem::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)),
        url("../images/pexels-chukwuka-prosper-221100694-37260949.jpg") bottom center / cover no-repeat;
      background-attachment: fixed;
      filter: blur(3px);
      z-index: 0
    }

    .problem h2 .strike,
    .strike {
      position: relative;
      display: inline-block;
      color: var(--strike-text)
    }

    .problem h2 .strike::after,
    .strike::after {
      content: "";
      position: absolute;
      left: -2%;
      right: -2%;
      top: 50%;
      height: 2px;
      background: var(--strike-line);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.2s var(--ease) .3s
    }

    .problem.in-view h2 .strike::after,
    .strike::after {
      transform: scaleX(1)
    }

    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

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

    }

    .pain-card {
      position: relative;
      padding: 36px 32px 40px;
      border: 1px solid var(--hairline-2);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(27, 27, 27, 0.2));
      transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
      overflow: hidden
    }

    .pain-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 18px;
      background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(236, 210, 123, .08), transparent 50%);
      /* background: var(--navy); */
      opacity: 0;
      transition: opacity .4s var(--ease)
    }

    .pain-card:hover {
      border-color: var(--gold-line);
      transform: translateY(-4px);
      background: linear-gradient(180deg, rgba(236, 210, 123, .025), rgba(255, 255, 255, 0))
    }

    .pain-card:hover::before {
      opacity: 1
    }

    .pain-card .num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted-2);
      letter-spacing: .2em;
      margin-bottom: 48px;
      display: block
    }

    .pain-card .icon {
      width: 44px;
      height: 44px;
      margin-bottom: 28px;
      color: var(--gold);
      position: relative;
      z-index: 1
    }

    .pain-card h3 {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      font-size: 22px;
      line-height: 1.25;
      letter-spacing: -.01em;
      margin-bottom: 14px;
      position: relative;
      z-index: 1
    }

    .pain-card p {
      position: relative;
      z-index: 1
    }

    /* ============= SOLUTION ============= */
    .f-1 {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      opacity: 0;
    }

    .f-2 {
      width: 0px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      opacity: 0;
    }


    .f-3 {
      margin-left: -355px;
      padding-bottom: 10px;
    }

    .index-glb-page #questions.is-platform-phase .f-1 {
      opacity: 1;
    }

    .index-glb-page #questions.is-platform-phase .f-2 {
      width: 100%;
      opacity: 1;
    }

    .index-glb-page #questions.is-platform-phase .f-3 {
      margin-left: 0;
    }

    .index-glb-page #questions.is-platform-reveal .f-1 {
      animation: showup 900ms var(--ease-out) .12s both;
    }

    .index-glb-page #questions.is-platform-reveal .f-2 {
      animation: reveal 1.15s var(--ease-out) .34s both;
    }

    .index-glb-page #questions.is-platform-reveal .f-3 {
      animation: slidein 1.15s var(--ease-out) .34s both;
    }

    @media (max-width:737px) {
      .f-1 {
        opacity: 1;
      }

      .f-2 {
        white-space: wrap;
        width: 100%;
        opacity: 1;
      }

      .f-3 {
        margin-left: 0px;
      }
    }


    @keyframes showup {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes slidein {
      0% {
        margin-left: -355px;
      }

      100% {
        margin-left: 0px;
      }
    }

    @keyframes reveal {
      0% {
        opacity: 0;
        width: 0px;
      }

      20% {
        opacity: 1;
        width: 0px;
      }

      100% {
        opacity: 1;
        width: 100%;
      }
    }

    .bg-noise-cont {
      position: absolute;
      overflow: hidden !important;
      height: 100%;
      width: 100%;
    }

    .bg-noise {
      position: fixed;
      top: -30%;
      left: -50%;
      right: -50%;
      /* bottom: -50%; */
      height: 150%;
      width: 200%;
      background: transparent url(../images/noise-transparent.png) repeat 0 0;
      background-repeat: repeat;
      animation: bg-animation .2s infinite;
      opacity: .9;
      visibility: visible;
    }

    @keyframes bg-animation {
      0% {
        transform: translate(0, 0)
      }

      10% {
        transform: translate(-5%, -5%)
      }

      20% {
        transform: translate(-10%, 5%)
      }

      30% {
        transform: translate(5%, -10%)
      }

      40% {
        transform: translate(-5%, 15%)
      }

      50% {
        transform: translate(-10%, 5%)
      }

      60% {
        transform: translate(15%, 0)
      }

      70% {
        transform: translate(0, 10%)
      }

      80% {
        transform: translate(-15%, 0)
      }

      90% {
        transform: translate(10%, 5%)
      }

      100% {
        transform: translate(5%, 0)
      }
    }

    .solution {
      background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 30%, var(--navy-2) 70%, var(--navy) 100%);
      position: relative;
      overflow: hidden
    }

    .solution::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 1200px;
      background: radial-gradient(circle, rgba(30, 58, 138, .18) 0%, transparent 60%);
      pointer-events: none
    }

    .solution-rings {
      position: absolute;
      right: -10%;
      top: 50%;
      transform: translateY(-50%);
      width: 700px;
      height: 700px;
      opacity: .5;
      pointer-events: none
    }

    .solution-rings circle {
      fill: none;
      stroke: rgba(236, 210, 123, .08);
      stroke-width: 1
    }

    .section-theme-light {
      --theme-bg: var(--color-bg-light);
      --theme-bg-alt: var(--color-bg-light-alt);
      --theme-bg-elevated: var(--color-bg-light-elevated);
      --theme-ink: var(--color-ink-light);
      --theme-ink-60: var(--color-ink-light-60);
      --theme-ink-40: var(--color-ink-light-40);
      --theme-ink-20: var(--color-ink-light-20);
      --theme-ink-08: var(--color-ink-light-08);
      --theme-muted: var(--color-muted-light);
      --theme-muted-2: var(--color-muted-light-2);
      --theme-border: var(--color-border-light);
      --theme-border-2: var(--color-border-light-2);
      --theme-accent: var(--color-accent-deep);
      --theme-accent-soft: var(--color-accent-soft-light);
      --theme-accent-line: var(--color-accent-line-light);
      --navy: var(--theme-bg);
      --navy-2: var(--theme-bg-alt);
      --navy-3: var(--theme-bg-elevated);
      --gold: var(--theme-accent);
      --gold-soft: var(--theme-accent-soft);
      --gold-line: var(--theme-accent-line);
      --white: var(--theme-ink);
      --ink-60: var(--theme-ink-60);
      --ink-40: var(--theme-ink-40);
      --ink-20: var(--theme-ink-20);
      --ink-08: var(--theme-ink-08);
      --muted: var(--theme-muted);
      --muted-2: var(--theme-muted-2);
      --hairline: var(--theme-border);
      --hairline-2: var(--theme-border-2);
      --strike-text: rgba(11, 28, 45, .72);
      --strike-line: var(--theme-accent);
      color: var(--white)
    }


    .solution.section-theme-light::before {
      background: radial-gradient(circle, rgba(11, 28, 45, .05) 0%, transparent 60%)
    }

    .solution.section-theme-light .solution-rings circle {
      stroke: rgba(160, 122, 42, .14)
    }

    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      /* border-top: 1px solid var(--hairline-2) */
    }

    .feature-row {
      display: grid;
      grid-template-columns: 80px 1fr 1.2fr 1fr;
      gap: 32px;
      padding: 48px 0;
      /* border-bottom: 1px solid var(--hairline-2); */
      align-items: center;
      transition: padding .4s var(--ease)
    }

    .feature-row:hover {
      padding: 60px 0
    }

    .feature-row .num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      color: var(--gold);
      letter-spacing: .18em
    }

    .feature-row h3 {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      font-size: clamp(24px, 2.4vw, 36px);
      letter-spacing: -.02em;
      line-height: 1.1
    }

    .feature-row p {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.6;
      max-width: 46ch
    }

    .feature-row .visual {
      display: flex;
      justify-content: flex-end;
      align-items: center
    }

    .feature-row .visual-inner {
      width: 120px;
      height: 120px;
      border: 1px solid var(--hairline-2);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--gold);
      transition: border-color .4s var(--ease), transform .4s var(--ease)
    }

    .feature-row:hover .visual-inner {
      border-color: var(--gold-line);
      transform: rotate(-8deg)
    }

    .feature-row .visual-inner svg {
      width: 48px;
      height: 48px
    }

    @media (max-width:900px) {
      .feature-row {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 40px 0
      }

      .feature-row:hover {
        padding: 40px 0
      }

      .feature-row .visual {
        justify-content: flex-start
      }

      .feature-row .visual-inner {
        width: 80px;
        height: 80px
      }

      .feature-row .visual-inner svg {
        width: 32px;
        height: 32px
      }
    }

    /* ============= HOW IT WORKS ============= */
    .how {
      background: var(--navy);
      position: relative;
      overflow: hidden
    }

    .how-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px
    }

    .how-track::before {
      content: "";
      position: absolute;
      left: 5%;
      right: 5%;
      top: 54px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold-line) 8%, var(--gold-line) 92%, transparent);
      z-index: 0
    }

    .step {
      position: relative;
      z-index: 1;
      padding-top: 0
    }

    .step-marker {
      width: 108px;
      height: 108px;
      border-radius: 50%;
      background: var(--navy);
      border: 1px solid var(--hairline-2);
      display: grid;
      place-items: center;
      margin-bottom: 32px;
      position: relative;
      transition: border-color .5s var(--ease), background .5s var(--ease)
    }

    .step-marker::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 1px dashed transparent;
      transition: border-color .5s var(--ease);
      transform: rotate(0deg);
      transition: border-color .5s var(--ease), transform 30s linear
    }

    .step:hover .step-marker {
      border-color: var(--gold);
      background: linear-gradient(180deg, rgba(236, 210, 123, .06), transparent)
    }

    .step:hover .step-marker::before {
      border-color: rgba(236, 210, 123, .25);
      transform: rotate(360deg)
    }

    .step-num {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 600;
      font-size: 32px;
      color: var(--gold);
      letter-spacing: -.02em
    }

    .step-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 10px
    }

    .step h4 {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -.01em;
      margin-bottom: 10px
    }

    .step p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      max-width: 24ch
    }

    @media (max-width:900px) {
      .how-track {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .how-track::before {
        left: 54px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 1px;
        height: auto;
        background: linear-gradient(to bottom, transparent, var(--gold-line) 5%, var(--gold-line) 95%, transparent)
      }

      .step {
        display: grid;
        grid-template-columns: 108px 1fr;
        gap: 24px;
        align-items: start
      }

      .step-marker {
        margin-bottom: 0
      }
    }

    /* ============= FOR ============= */
    .img-xc-1 {
      position: absolute;
      top: -5px;
      right: 0;
      width: 25%;
    }

    .img-xc-2 {
      position: absolute;
      bottom: 0;
      left: -20px;
      width: 25%;
    }

    .img-xc-3 {
      position: absolute;
      bottom: -50px;
      right: -20px;
      width: 25%;
    }

    .img-xc-4 {
      position: absolute;
      bottom: 0px;
      left: 35%;
      width: 25%;
    }

    @media (max-width:900px) {

      .img-xc-1,
      .img-xc-2,
      .img-xc-3,
      .img-xc-4 {
        width: 50%;
      }
    }


    .audience {
      background: var(--navy);
      overflow: hidden
    }

    .audience>.wrap {
      position: relative;
      z-index: 2
    }

    .audience .hero-bgcc {
      pointer-events: none;
      z-index: 1
    }

    .audience.section-theme-light .aud-card {
      background: linear-gradient(180deg, rgba(11, 28, 45, .025), rgba(11, 28, 45, .01))
    }

    .audience.section-theme-light .aud-card .rings circle,
    .audience.section-theme-light .aud-card .rings line {
      stroke: rgba(160, 122, 42, .18)
    }

    .aud-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px
    }

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

    .aud-card {
      position: relative;
      padding: 56px 48px 64px;
      border: 1px solid var(--hairline-2);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent);
      transition: border-color .4s var(--ease), transform .4s var(--ease);
      overflow: hidden;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .aud-card:hover {
      border-color: var(--gold);
      transform: translateY(-4px)
    }

    .aud-card .rings {
      position: absolute;
      right: -120px;
      top: -120px;
      width: 380px;
      height: 380px;
      opacity: .5;
      transition: opacity .4s var(--ease), transform .6s var(--ease)
    }

    .aud-card:hover .rings {
      opacity: .9;
      transform: rotate(20deg)
    }

    .aud-card .rings circle {
      fill: none;
      stroke: rgba(236, 210, 123, .14);
      stroke-width: 1
    }

    .aud-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px
    }

    .aud-card h3 {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.05;
      letter-spacing: -.025em;
      margin-bottom: 18px;
      max-width: 14ch
    }

    .aud-card p {
      font-size: 15px;
      color: var(--muted);
      max-width: 34ch;
      line-height: 1.6
    }

    .aud-card .pts {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .aud-card .pt {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      font-size: 14px;
      color: var(--white);
      font-weight: 400
    }

    .aud-card .pt::before {
      content: "";
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      margin-top: 8px
    }

    @media (max-width:768px) {
      .aud-card {
        padding: 40px 28px 48px;
        min-height: auto
      }
    }

    /* ============= CTA ============= */
    .cta {
      position: relative;
      overflow: hidden;
      /* background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(236, 210, 123, .10) 0%, transparent 60%), linear-gradient(180deg, var(--navy) 0%, #0d2237 100%); */
      text-align: center
    }

    .cta-rings {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1100px;
      height: 1100px;
      opacity: .6;
      pointer-events: none
    }

    .cta-rings circle {
      fill: none;
      stroke: rgba(236, 210, 123, .10);
      stroke-width: 1
    }

    .cta-rings .split {
      stroke: rgba(236, 210, 123, .18)
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      max-width: 780px;
      margin: 0 auto;
      text-align: center;
      padding: 0 22px
    }

    .cta-eyebrow {
      margin-bottom: 28px
    }

    .cta h2 {
      font-size: clamp(40px, 6.5vw, 88px);
      margin-bottom: 24px
    }

    .cta h2 em {
      font-style: italic;
      font-weight: 400;
      color: var(--gold)
    }

    .cta .body-lg {
      margin: 0 auto 44px
    }

    .cta-form {
      margin: 0 auto;
      max-width: 520px
    }

    .cta-proof {
      margin-top: 24px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted-2)
    }

    .cta-proof .avs {
      display: flex;
      align-items: center
    }

    .cta-proof .av {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid var(--navy);
      background: linear-gradient(135deg, #1E3A8A, #ECD27B);
      margin-left: -7px
    }

    .cta-proof .av:first-child {
      margin-left: 0
    }

    /* ============= FOOTER ============= */
    .footer {
      background: var(--navy);
      border-top: 1px solid var(--hairline);
      padding: 20px 0 40px
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 64px
    }

    @media (max-width:768px) {
      .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px
      }
    }

    .foot-brand .brand {
      margin-bottom: 18px
    }

    .foot-brand p {
      font-size: 14px;
      color: var(--muted);
      max-width: 30ch;
      line-height: 1.6
    }

    .foot-col h5 {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 20px;
      font-weight: 500
    }

    .foot-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .foot-col a {
      font-size: 14px;
      color: var(--white);
      transition: color .3s var(--ease)
    }

    .foot-col a:hover {
      color: var(--gold)
    }

    .foot-bottom {
      /* padding-top: 32px; */
      /* border-top: 1px solid var(--hairline); */
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px
    }

    .foot-bottom p {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted-2)
    }

    .socials {
      display: flex;
      gap: 8px
    }

    .socials a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--hairline-2);
      display: grid;
      place-items: center;
      color: var(--muted);
      transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)
    }

    .socials a:hover {
      border-color: var(--gold);
      color: var(--gold);
      transform: translateY(-2px)
    }

    .socials svg {
      width: 15px;
      height: 15px
    }

    /* ============= ENTRANCE ANIM ============= */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1s var(--ease), transform 1s var(--ease)
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0)
    }

    .reveal-stagger>* {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .9s var(--ease), transform .9s var(--ease)
    }

    .reveal-stagger.in-view>*:nth-child(1) {
      transition-delay: .05s
    }

    .reveal-stagger.in-view>*:nth-child(2) {
      transition-delay: .18s
    }

    .reveal-stagger.in-view>*:nth-child(3) {
      transition-delay: .31s
    }

    .reveal-stagger.in-view>*:nth-child(4) {
      transition-delay: .44s
    }

    .reveal-stagger.in-view>* {
      opacity: 1;
      transform: translateY(0)
    }

    /* ============= UTIL ============= */
    .divider {
      height: 1px;
      background: var(--hairline);
      margin: 0 auto;
      max-width: 1320px
    }

    /* ============= INDEX TEST LIGHT PASS ============= */
    .index-test-page #questions {
      --navy: var(--color-bg-light);
      --navy-2: var(--color-bg-light-alt);
      --navy-3: var(--color-bg-light-elevated);
      --blue: var(--color-ink-light);
      --gold: var(--color-accent-deep);
      --gold-soft: var(--color-accent-soft-light);
      --gold-line: var(--color-accent-line-light);
      --white: var(--color-ink-light);
      --ink-60: var(--color-ink-light-60);
      --ink-40: var(--color-ink-light-40);
      --ink-20: var(--color-ink-light-20);
      --ink-08: var(--color-ink-light-08);
      --muted: var(--color-muted-light);
      --muted-2: var(--color-muted-light-2);
      --hairline: var(--color-border-light);
      --hairline-2: var(--color-border-light-2);
      --strike-text: rgba(11, 28, 45, .72);
      --strike-line: var(--color-accent-deep);
      color: var(--white);
      height: 330vh;
      min-height: 330svh;
      padding: 0;
      overflow: visible
    }

    .index-test-page #questions::before {
      background: radial-gradient(circle, rgba(11, 28, 45, .05) 0%, transparent 60%)
    }

    .index-test-page #questions .solution-rings circle {
      stroke: rgba(160, 122, 42, .14)
    }

    .index-test-page #questions .question-sticky {
      position: sticky;
      top: 0;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
      perspective: 1200px
    }

    .index-test-page #questions .question-wrap {
      position: relative;
      width: 100%;
      z-index: 1
    }

    .index-test-page #questions .question-shell {
      position: relative;
      min-height: 300px;
      transform-style: preserve-3d
    }

    .index-test-page #questions .question-text {
      position: absolute;
      inset: 0;
      /* width: min(980px, 100%); */
      margin: 0 0 48px;
      text-align: left;
      font-size: clamp(34px, 5vw, 68px);
      line-height: 1.05;
      opacity: 0;
      transform: rotateX(82deg) translateY(44px) translateZ(-42px);
      filter: blur(8px);
      backface-visibility: hidden;
      transition:
        opacity 700ms var(--ease),
        transform 850ms cubic-bezier(.22, 1, .36, 1),
        filter 700ms var(--ease)
    }

    .que {
      font-size: 26px;
    }

    .index-test-page #questions .question-text.active {
      opacity: 1;
      transform: rotateX(0deg) translateY(0) translateZ(0);
      filter: blur(0)
    }

    .index-test-page #questions .question-text.exit-up {
      opacity: 0;
      transform: rotateX(-82deg) translateY(-44px) translateZ(-42px);
      filter: blur(8px)
    }

    @media (max-width:768px) {

      .index-test-page #questions .question-shell {
        min-height: 360px
      }
    }

    .index-glb-page #questions {
      height: 420vh;
      min-height: 420svh
    }

    .index-glb-page #questions .question-sticky {
      z-index: 2
    }

    .index-glb-page #questions .question-wrap,
    .index-glb-page #questions .question-img {
      transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease)
    }

    .index-glb-page #questions.is-platform-phase .question-wrap,
    .index-glb-page #questions.is-platform-phase .question-img {
      opacity: 0;
      filter: blur(14px);
      transform: translateY(-18px);
      pointer-events: none
    }

    /* ============= INDEX TEST GLB PLATFORM INTRO ============= */
    .index-glb-page .platform-intro {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--color-bg-dark) !important;
    }

    .index-glb-page #questions .platform-intro-panel {
      --navy: var(--color-bg-dark);
      --navy-2: var(--color-bg-dark-alt);
      --navy-3: var(--color-bg-dark-elevated);
      --blue: #1E3A8A;
      --gold: var(--color-accent);
      --gold-soft: var(--color-accent-soft-dark);
      --gold-line: var(--color-accent-line-dark);
      --white: var(--color-ink-dark);
      --ink-60: var(--color-ink-dark-60);
      --ink-40: var(--color-ink-dark-40);
      --ink-20: var(--color-ink-dark-20);
      --ink-08: var(--color-ink-dark-08);
      --muted: var(--color-muted-dark);
      --muted-2: var(--color-muted-dark-2);
      --hairline: var(--color-border-dark);
      --hairline-2: var(--color-border-dark-2);
      position: sticky;
      top: 0;
      z-index: 4;
      height: 100vh;
      height: 100svh;
      margin-top: -100vh;
      margin-top: -100svh;
      opacity: 0;
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      filter: blur(18px);
      transform: scale(.985);
      pointer-events: none;
      transition:
        opacity .9s var(--ease),
        filter .9s var(--ease),
        transform 1s var(--ease)
    }

    .index-glb-page #questions.is-platform-phase .platform-intro-panel {
      opacity: 1;
      filter: blur(0);
      transform: scale(1)
    }

    .index-glb-page #questions .platform-intro-panel .display {
      font-family: 'Inter Tight', sans-serif;
      font-size: clamp(34px, 5vw, 68px);
      font-weight: 500;
      letter-spacing: -.035em;
      line-height: 1.05
    }

    .index-glb-page #questions .platform-intro-panel .display em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      color: var(--gold);
      letter-spacing: -.005em
    }

    .index-glb-page #questions.is-platform-phase .platform-intro-panel .reveal {
      opacity: 1;
      transform: translateY(0)
    }

    .index-glb-page .platform-intro-inner {
      z-index: 1
    }

    .index-glb-page .platform-intro .sec-head {
      margin-bottom: 0
    }

    .index-glb-page .platform-intro .sec-head h2 {
      max-width: 12ch
    }

    .index-glb-page .platform-intro-rings {
      position: absolute;
      right: -12%;
      top: 50%;
      width: min(880px, 80vw);
      height: min(880px, 80vw);
      transform: translateY(-50%);
      opacity: .72;
      pointer-events: none
    }

    .index-glb-page .platform-intro-rings circle,
    .index-glb-page .platform-intro-rings line {
      fill: none;
      stroke: rgba(236, 210, 123, .16);
      stroke-width: 1;
      transform-origin: center;
      opacity: .18;
      transform: scale(.96)
    }

    .index-glb-page #questions.is-platform-reveal .platform-intro-rings circle {
      animation: platformRingWake 1.35s var(--ease-out) both
    }

    .index-glb-page .platform-intro-rings circle:nth-child(2) {
      animation-delay: .12s
    }

    .index-glb-page .platform-intro-rings circle:nth-child(3) {
      animation-delay: .24s
    }

    .index-glb-page .platform-intro-rings circle:nth-child(4) {
      animation-delay: .36s
    }

    .index-glb-page .platform-intro-rings line {
      stroke: rgba(236, 210, 123, .10);
    }

    .index-glb-page #questions.is-platform-reveal .platform-intro-rings line {
      animation: platformLineGlow 1.2s var(--ease-out) .18s both
    }

    @keyframes platformRingWake {
      0% {
        opacity: .18;
        transform: scale(.96)
      }

      55% {
        opacity: .78;
        transform: scale(1.04)
      }

      100% {
        opacity: .62;
        transform: scale(1)
      }
    }

    @keyframes platformLineGlow {

      0% {
        opacity: .18
      }

      100% {
        opacity: .72
      }
    }

    @media (max-width:768px) {
      .index-glb-page .platform-intro {
        min-height: 78vh;
        min-height: 78svh
      }

      .index-glb-page .platform-intro-rings {
        right: -54%;
        width: 125vw;
        height: 125vw
      }
    }

    /* ============= INDEX TEST GLB SPLIT SCROLL ============= */
    .index-glb-page .solution-glb-split {
      height: 450vh;
      min-height: 450svh;
      margin-top: -100vh;
      margin-top: -100svh;
      padding: 0;
      overflow: visible;
      position: relative;
      background: var(--color-bg-dark);
      z-index: 5
    }

    .index-glb-page .solution-glb-sticky {
      position: sticky;
      top: 0;
      z-index: 6;
      height: 100vh;
      height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
      overflow: hidden;
      background: var(--color-bg-dark);
      opacity: 0;
      filter: blur(18px);
      transform: scale(.985);
      transition:
        opacity .9s var(--ease),
        filter .9s var(--ease),
        transform 1s var(--ease)
    }

    .index-glb-page .solution-glb-split.is-solution-visible .solution-glb-sticky {
      opacity: 1;
      filter: blur(0);
      transform: scale(1)
    }

    .index-glb-page .solution-glb-left {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      padding: 96px clamp(32px, 6vw, 86px)
    }

    .index-glb-page .solution-glb-left .sec-head {
      margin-bottom: 56px
    }

    .index-glb-page .solution-scroll-cards {
      position: relative;
      height: 360px;
      /* border-top: 1px solid var(--hairline-2) */
    }

    .index-glb-page .solution-scroll-card {
      position: absolute;
      inset: 0;
      grid-template-columns: 80px minmax(180px, .85fr) minmax(220px, 1.1fr);
      grid-template-columns: 1fr;
      opacity: 0;
      transform: translateY(56px);
      pointer-events: none;
      /* border-bottom: 1px solid var(--hairline-2); */
      transition: opacity .75s var(--ease), transform .75s var(--ease)
    }

    .index-glb-page .solution-scroll-card.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto
    }

    .index-glb-page .solution-scroll-card.past {
      opacity: 0;
      transform: translateY(-56px)
    }

    .index-glb-page .solution-scroll-card:hover {
      padding: 48px 0
    }

    .index-glb-page .solution-scroll-card .visual {
      display: none
    }

    .index-glb-page .solution-glb-right {
      position: relative;
      min-width: 0;
      overflow: hidden;
      background: transparent
    }

    .index-glb-page #solution-glb-canvas,
    .index-glb-page .solution-glb-label-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .index-glb-page #solution-glb-canvas {
      display: block
    }

    .index-glb-page .solution-glb-label-layer {
      pointer-events: none
    }

    .index-glb-page .solution-glb-label {
      color: var(--gold);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .12em;
      line-height: 1.25;
      text-transform: uppercase;
      white-space: nowrap;
      opacity: .28;
      transform: translateY(4px);
      transition: opacity .45s var(--ease), transform .45s var(--ease), color .45s var(--ease)
    }

    .index-glb-page .solution-glb-label.visible {
      opacity: .65;
      transform: translateY(0)
    }

    .index-glb-page .solution-glb-label .value {
      display: block;
      color: var(--white);
      font-size: 15px;
      letter-spacing: .08em;
      margin-bottom: 2px
    }

    .index-glb-page .solution-glb-status {
      position: absolute;
      left: 24px;
      bottom: 24px;
      color: var(--muted-2);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      z-index: 3;
      pointer-events: none;
      transition: opacity .45s var(--ease)
    }

    @media (max-width:900px) {
      .index-glb-page .solution-glb-sticky {
        grid-template-columns: 1fr;
        grid-template-rows: 45vh 55vh
      }

      .index-glb-page .solution-glb-left {
        padding: 84px 24px 18px
      }

      .index-glb-page .solution-glb-left .sec-head {
        margin-bottom: 22px
      }

      .index-glb-page .solution-scroll-cards {
        height: 210px
      }

      .index-glb-page .solution-scroll-card,
      .index-glb-page .solution-scroll-card:hover {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 28px 0
      }

      .index-glb-page .solution-glb-label {
        display: none
      }
    }