:root {
      /* 2026-05-14 — aligned with the app dark palette in
         packages/tokens/src/color.ts so the web mockups + the live
         app render the same dark backdrop side-by-side. Was
         #06070D / #0B0D17 / etc (true-black drift). */
      --bg: #0B1626;
      --bg-2: #0F1D31;
      --bg-3: #16263F;
      --bg-card: #1A2C48;
      --ink: #EEF2F7;
      --ink-2: #C5CEE0;
      --ink-3: #8591A8;
      --ink-4: #4B5975;
      --line: #233555;
      --line-2: #304872;

      /* Brand + semantic colors — `cobalt` (=#4F8CFF) matches app
         `accent` exactly. Amber + green moved to the app's tokens too
         so the heatmap freeze cells + correct-answer state agree. */
      --cobalt: #4F8CFF;
      --cobalt-2: #7EA8FF;
      --indigo: #7B61FF;
      --cyan: #5EE7E0;
      --amber: #F5B946;
      --magenta: #FF6FB3;
      --green: #6FCF97;
      --wrong: #E07A6A;

      --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
      --serif-it: "Fraunces", Georgia, serif;
      --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      background:
        radial-gradient(ellipse 90% 32% at 50% 320px, rgba(79,140,255,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 70% 28% at 50% 1100px, rgba(79,140,255,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 22% at 50% 1700px, rgba(79,140,255,0.10) 0%, transparent 75%),
        var(--bg);
      background-repeat: no-repeat;
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* Subtle grain overlay */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 100;
      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='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
      opacity: 0.6;
      mix-blend-mode: overlay;
    }

    a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
    a:hover { color: var(--cobalt-2); }

    h1, h2, h3 {
      font-family: var(--sans);
      font-weight: 700;
      letter-spacing: -0.035em;
      color: var(--ink);
      margin: 0;
      line-height: 0.98;
    }
    /* 2026-05-16 — replaced serif italic accent with cobalt color.
       The italic Fraunces felt overly decorative in a developer-tool
       surface; color emphasis keeps the visual rhythm of the original
       copy but reads more tech. Kept the class name (.it) so we don't
       have to churn 14 HTML occurrences across EN+ES headlines —
       only this rule changes. */
    .it {
      color: var(--cobalt-2);
    }

    /* ===================== GLOW ORBS ===================== */
    .glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      opacity: 0.55;
      mix-blend-mode: screen;
    }
    .glow.cobalt { background: radial-gradient(circle, var(--cobalt) 0%, transparent 65%); }
    .glow.indigo { background: radial-gradient(circle, var(--indigo) 0%, transparent 65%); }
    .glow.cyan   { background: radial-gradient(circle, var(--cyan)   0%, transparent 65%); }
    .glow.amber  { background: radial-gradient(circle, var(--amber)  0%, transparent 65%); }
    .glow.magenta{ background: radial-gradient(circle, var(--magenta) 0%, transparent 65%); }
    .glow.green  { background: radial-gradient(circle, var(--green)  0%, transparent 65%); }

    @keyframes glow-drift {
      0%, 100% { transform: translate(0,0) scale(1); }
      33% { transform: translate(40px, 30px) scale(1.08); }
      66% { transform: translate(-30px, 50px) scale(0.94); }
    }
    .glow.drift { animation: glow-drift 24s ease-in-out infinite; }
    .glow.drift.d2 { animation-duration: 30s; animation-delay: -8s; }
    .glow.drift.d3 { animation-duration: 28s; animation-delay: -14s; }

    /* ====== eyebrow label ====== */
    .eyebrow {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--ink-3);
      margin: 0 0 22px 0;
    }
    .eyebrow.center { text-align: center; }
    .eyebrow .reg {
      font-size: 0.75em;
      vertical-align: super;
      margin-left: 1px;
      color: var(--ink-4);
    }

    main, .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 28px;
      position: relative;
      z-index: 1;
    }

    /* ====== HEADER ====== */
    header.site {
      position: sticky;
      top: 0;
      z-index: 50;
      background: color-mix(in oklab, var(--bg), transparent 25%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .header-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 14px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 19px;
      letter-spacing: -0.02em;
    }
    .brand img { width: 30px; height: 30px; display: block; }
    .header-nav {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 13.5px;
      color: var(--ink-2);
    }
    .header-nav a { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
    .header-nav a:hover { color: var(--ink); }
    @media (max-width: 720px) {
      .header-nav .nav-link { display: none; }
    }
    .lang-switch {
      display: inline-flex;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      padding: 3px;
      background: var(--bg-3);
    }
    .lang-switch button {
      font-family: var(--sans);
      background: transparent;
      border: 0;
      color: var(--ink-3);
      padding: 4px 11px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 12px;
      letter-spacing: 0.04em;
      font-weight: 500;
      transition: all 0.15s;
    }
    .lang-switch button.active {
      background: var(--ink);
      color: var(--bg);
    }
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      background: var(--ink);
      color: var(--bg);
      border-radius: 999px;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 13.5px;
      line-height: 1;
      letter-spacing: -0.005em;
      white-space: nowrap;
      transition: transform 0.1s, background 0.15s;
    }
    .btn-cta > span { display: inline-block; line-height: 1; }
    .btn-cta > svg { display: block; flex-shrink: 0; width: 14px; height: 14px; }
    .btn-cta:hover { background: #FFFFFF; color: var(--bg); }
    .btn-cta:active { transform: scale(0.97); }
    .btn-cta.outline {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line-2);
    }
    .btn-cta.outline:hover { background: var(--bg-3); color: var(--ink); }

    /* ====== HERO ====== */
    .hero {
      position: relative;
      text-align: center;
      padding: 110px 0 80px;
      overflow-x: clip;
      overflow-y: visible;
    }
    .hero .glow.cobalt {
      width: 1100px; height: 1100px;
      top: -380px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.7;
      filter: blur(110px);
    }
    .hero .glow.indigo {
      width: 700px; height: 700px;
      top: -120px;
      left: 15%;
      opacity: 0.45;
    }
    .hero .glow.cyan {
      width: 600px; height: 600px;
      top: 100px;
      right: 5%;
      opacity: 0.35;
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px 6px 8px;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      background: var(--bg-3);
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--ink-2);
      margin-bottom: 36px;
    }
    .hero-pill .pulse {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--cobalt);
      position: relative;
    }
    .hero-pill .pulse::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: var(--cobalt);
      opacity: 0.5;
      animation: pulse-ring 2s ease-out infinite;
    }
    @keyframes pulse-ring {
      0% { transform: scale(0.6); opacity: 0.5; }
      80%, 100% { transform: scale(2.4); opacity: 0; }
    }

    h1.headline {
      font-size: clamp(52px, 9vw, 128px);
      line-height: 0.94;
      letter-spacing: -0.045em;
      font-weight: 700;
      margin: 0 auto 30px;
      max-width: 14ch;
      text-wrap: balance;
    }
    h1.headline .it { letter-spacing: -0.03em; }
    h1.headline .accent {
      color: var(--cobalt-2);
    }
    @media (max-width: 600px) {
      h1.headline { font-size: 56px; letter-spacing: -0.035em; }
    }

    .hero-sub {
      font-size: 18px;
      color: var(--ink-2);
      line-height: 1.45;
      margin: 0 auto 44px;
      max-width: 540px;
      font-weight: 400;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .hero-cta .btn-big {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 28px;
      background: var(--ink);
      color: var(--bg);
      border-radius: 999px;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 15px;
      line-height: 1;
      letter-spacing: -0.005em;
      white-space: nowrap;
      border: 0;
      cursor: pointer;
      transition: transform 0.1s;
    }
    .hero-cta .btn-big > span { display: inline-block; line-height: 1; }
    .hero-cta .btn-big > svg { display: block; flex-shrink: 0; width: 14px; height: 14px; }
    .hero-cta .btn-big:hover { background: #fff; }
    .hero-cta .btn-big:active { transform: scale(0.98); }
    .hero-cta .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 16px 24px;
      color: var(--ink);
      border: 1px solid var(--line-2);
      border-radius: 999px;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 15px;
      line-height: 1;
      letter-spacing: -0.005em;
      white-space: nowrap;
      background: transparent;
      cursor: pointer;
      transition: background 0.15s;
    }
    .hero-cta .btn-ghost > span { display: inline-block; line-height: 1; }
    .hero-cta .btn-ghost:hover { background: var(--bg-3); }

    /* ====== Hero phone CLUSTER (3-up fan) ====== */
    .hero-phones {
      position: relative;
      margin: 80px auto 0;
      width: 100%;
      max-width: 920px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 0;
      z-index: 2;
      perspective: 1500px;
    }
    .hero-phones::before {
      content: "";
      position: absolute;
      width: 1400px;
      height: 1400px;
      max-width: 130%;
      background: radial-gradient(ellipse at center, rgba(79,140,255,0.55) 0%, rgba(79,140,255,0.22) 22%, rgba(79,140,255,0.06) 50%, transparent 78%);
      filter: blur(70px);
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: halo-breathe 6s ease-in-out infinite;
      pointer-events: none;
    }
    .hero-phone-card {
      position: relative;
      display: block;
      filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
    }
    .hero-phone-card svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .hero-phone-card.center {
      width: 300px;
      max-width: 80vw;
      z-index: 3;
      animation: phone-float 6s ease-in-out infinite;
    }
    .hero-phone-card.side {
      width: 230px;
      opacity: 0.92;
      z-index: 1;
      animation: phone-float 6s ease-in-out infinite;
    }
    .hero-phone-card.left {
      transform: translateX(60px) translateY(40px) rotateZ(-8deg) rotateY(14deg);
      transform-origin: center;
      animation-delay: -1s;
    }
    .hero-phone-card.right {
      transform: translateX(-60px) translateY(40px) rotateZ(8deg) rotateY(-14deg);
      transform-origin: center;
      animation-delay: -3s;
    }
    @media (max-width: 880px) {
      .hero-phone-card.side { width: 200px; }
      .hero-phone-card.left { transform: translateX(40px) translateY(50px) rotateZ(-8deg); }
      .hero-phone-card.right { transform: translateX(-40px) translateY(50px) rotateZ(8deg); }
    }
    @media (max-width: 720px) {
      .hero-phones { max-width: 100%; }
      .hero-phone-card.side { display: none; }
      .hero-phone-card.center { width: 280px; }
    }

    /* Hero phone (centered below) */
    .hero-phone-wrap {
      position: relative;
      margin-top: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    .hero-phone-wrap::before {
      content: "";
      position: absolute;
      width: 800px;
      height: 800px;
      max-width: 110%;
      background: radial-gradient(ellipse at center, rgba(79,140,255,0.55) 0%, rgba(79,140,255,0.15) 30%, transparent 65%);
      filter: blur(60px);
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);
      animation: halo-breathe 6s ease-in-out infinite;
    }
    @keyframes halo-breathe {
      0%, 100% { opacity: 0.7; transform: translate(-50%, -55%) scale(1); }
      50% { opacity: 1; transform: translate(-50%, -55%) scale(1.05); }
    }
    .hero-phone {
      width: 320px;
      max-width: 86vw;
      height: auto;
      filter: drop-shadow(0 40px 80px rgba(0,0,0,0.6));
      animation: phone-float 6s ease-in-out infinite;
    }
    @keyframes phone-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    /* ====== STAT STRIP ====== */
    .stat-strip {
      position: relative;
      padding: 96px 0 24px;
      text-align: center;
    }
    .stat-strip .eyebrow { margin-bottom: 16px; }
    .stat-strip h2 {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 600;
      letter-spacing: -0.025em;
      max-width: 24ch;
      margin: 0 auto 64px;
      text-wrap: balance;
      color: var(--ink);
    }
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
    }
    @media (min-width: 760px) {
      .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; }
    }
    .stat {
      position: relative;
      padding: 24px 16px;
    }
    .stat .num {
      font-family: var(--sans);
      font-weight: 700;
      font-size: clamp(64px, 9vw, 112px);
      letter-spacing: -0.05em;
      line-height: 1;
      color: var(--ink);
    }
    .stat .num .unit {
      font-size: 0.42em;
      color: var(--ink-3);
      font-weight: 500;
      margin-left: 4px;
      letter-spacing: -0.02em;
    }
    .stat h3 {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 18px;
      letter-spacing: -0.01em;
      margin: 18px 0 8px;
      color: var(--ink);
    }
    .stat p {
      color: var(--ink-2);
      font-size: 14.5px;
      line-height: 1.5;
      margin: 0;
      max-width: 28ch;
      margin-left: auto;
      margin-right: auto;
    }

    /* ====== SECTIONS ====== */
    section.feature {
      position: relative;
      padding: 130px 0 100px;
      overflow-x: clip;
      overflow-y: visible;
    }
    .feature-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 56px;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    @media (min-width: 900px) {
      .feature-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
      .feature-grid.reverse { direction: rtl; }
      .feature-grid.reverse > * { direction: ltr; }
    }
    .feature-text .label {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      color: var(--cobalt-2);
      margin-bottom: 22px;
      letter-spacing: -0.005em;
    }
    .feature-text .label .reg {
      font-size: 0.75em;
      vertical-align: super;
      margin-left: 1px;
      color: var(--cobalt-2);
      opacity: 0.7;
    }
    .feature-text h2 {
      font-size: clamp(36px, 5.2vw, 64px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1;
      margin: 0 0 22px;
      text-wrap: balance;
    }
    .feature-text p {
      font-size: 17px;
      color: var(--ink-2);
      line-height: 1.55;
      margin: 0 0 28px;
      max-width: 460px;
      text-wrap: pretty;
    }
    .feature-text .cta-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .feature-visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 420px;
    }
    .feature-visual .glow-bg {
      position: absolute;
      width: 600px;
      height: 600px;
      max-width: 110%;
      border-radius: 50%;
      filter: blur(70px);
      opacity: 0.5;
      z-index: 0;
    }

    /* Skill-tree card visual */
    .feature-card {
      position: relative;
      z-index: 2;
      background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
      border: 1px solid var(--line-2);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.4);
      width: 100%;
      max-width: 460px;
    }
    .feature-card .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .feature-card .card-header .title {
      font-weight: 600;
      font-size: 15px;
      letter-spacing: -0.015em;
    }
    .feature-card .card-header .sub {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--ink-3);
      letter-spacing: 0.06em;
    }
    .feature-card .progress {
      width: 100%;
      height: 4px;
      background: var(--line-2);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .feature-card .progress div {
      height: 100%;
      width: 50%;
      background: linear-gradient(90deg, var(--cobalt), var(--cobalt-2));
      border-radius: 2px;
    }
    .feature-card .progress-meta {
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--ink-3);
      letter-spacing: 0.08em;
      margin-bottom: 24px;
    }

    /* ====== BENTO ====== */
    .bento-section {
      position: relative;
      padding: 110px 0 100px;
    }
    .bento-section .section-head {
      text-align: center;
      margin-bottom: 64px;
      position: relative;
      z-index: 2;
    }
    .bento-section h2 {
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1;
      max-width: 18ch;
      margin: 0 auto;
      text-wrap: balance;
    }
    .bento {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      position: relative;
      z-index: 2;
    }
    @media (min-width: 720px) {
      .bento {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .bento-card {
      position: relative;
      overflow: hidden;
      padding: 28px;
      background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
      border: 1px solid var(--line-2);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 320px;
      transition: border-color 0.2s, transform 0.2s;
    }
    .bento-card:hover {
      border-color: var(--cobalt);
      transform: translateY(-2px);
    }
    .bento-card .glow-bg {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.45;
      top: -200px;
      right: -150px;
      z-index: 0;
      pointer-events: none;
    }
    .bento-card > * { position: relative; z-index: 1; }
    .bento-card .lbl {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--cobalt-2);
      letter-spacing: -0.005em;
      margin-bottom: 14px;
    }
    .bento-card .lbl .reg {
      font-size: 0.75em;
      vertical-align: super;
      margin-left: 1px;
      opacity: 0.7;
    }
    .bento-card h3 {
      font-size: 26px;
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.05;
      margin: 0 0 14px;
      max-width: 14ch;
    }
    .bento-card p {
      color: var(--ink-2);
      font-size: 14.5px;
      line-height: 1.5;
      margin: 0;
      max-width: 30ch;
      text-wrap: pretty;
    }
    .bento-card.wide { grid-column: span 1; }
    @media (min-width: 720px) {
      .bento-card.wide { grid-column: 1 / -1; min-height: 360px; }
      .bento-card.wide .bento-art { min-height: 160px; }
    }
    .bento-art {
      position: relative;
      margin-top: 24px;
      flex: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      min-height: 100px;
    }

    /* ====== PATHS RAIL ====== */
    .paths-section {
      position: relative;
      padding: 110px 0;
      overflow-x: clip;
      overflow-y: visible;
    }
    .paths-section .section-head {
      text-align: center;
      margin-bottom: 56px;
    }
    .paths-section h2 {
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1;
      max-width: 18ch;
      margin: 0 auto;
      text-wrap: balance;
    }
    .paths-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .path-card {
      background: var(--bg-3);
      border: 1px solid var(--line-2);
      border-radius: 16px;
      padding: 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 130px;
      transition: border-color 0.2s, transform 0.2s;
    }
    .path-card:hover {
      border-color: var(--cobalt);
      transform: translateY(-2px);
    }
    .path-card .ix {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--ink-3);
    }
    .path-card .pname {
      font-weight: 600;
      font-size: 18px;
      letter-spacing: -0.018em;
      color: var(--ink);
      line-height: 1.1;
    }
    .path-card .meta {
      margin-top: auto;
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--ink-3);
      display: flex;
      align-items: center;
      gap: 6px;
      letter-spacing: 0.04em;
    }
    .path-card .lvl-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--cobalt);
    }

    /* ====== WAITLIST CTA ====== */
    .cta-band {
      position: relative;
      padding: 130px 0 130px;
      text-align: center;
      overflow-x: clip;
      overflow-y: visible;
    }
    .cta-band .glow.cobalt {
      width: 1000px; height: 1000px;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.5;
    }
    .cta-band .glow.indigo {
      width: 500px; height: 500px;
      top: -10%;
      left: 10%;
      opacity: 0.35;
    }
    .cta-band .glow.amber {
      width: 400px; height: 400px;
      bottom: 0;
      right: 8%;
      opacity: 0.25;
    }
    .cta-band h2 {
      font-size: clamp(48px, 7.5vw, 104px);
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 0.94;
      max-width: 14ch;
      margin: 0 auto 24px;
      text-wrap: balance;
    }
    .cta-band p {
      font-size: 18px;
      color: var(--ink-2);
      line-height: 1.45;
      margin: 0 auto 40px;
      max-width: 520px;
    }

    .waitlist {
      max-width: 480px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .waitlist form {
      display: flex;
      gap: 6px;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      padding: 6px;
      background: var(--bg-3);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .waitlist form:focus-within {
      border-color: var(--cobalt);
      box-shadow: 0 0 0 4px rgba(79,140,255,0.15);
    }
    .waitlist input[type="email"] {
      flex: 1;
      border: 0;
      background: transparent;
      padding: 12px 18px;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink);
      outline: none;
      min-width: 0;
    }
    .waitlist input::placeholder { color: var(--ink-3); }
    .waitlist button {
      border: 0;
      background: var(--ink);
      color: var(--bg);
      font-family: var(--sans);
      font-weight: 600;
      font-size: 14px;
      line-height: 1;
      padding: 12px 22px;
      border-radius: 999px;
      cursor: pointer;
      letter-spacing: -0.005em;
      transition: background 0.15s, transform 0.1s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .waitlist button > span { display: inline-block; line-height: 1; }
    .waitlist button > svg { display: block; flex-shrink: 0; width: 14px; height: 14px; }
    .waitlist button:hover { background: #fff; }
    .waitlist button:active { transform: scale(0.98); }
    .waitlist button svg { width: 14px; height: 14px; transition: transform 0.2s; }
    .waitlist button:hover svg { transform: translateX(2px); }
    .waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
    .waitlist .status {
      margin-top: 16px;
      font-size: 13.5px;
      color: var(--ink-3);
      min-height: 18px;
    }
    .waitlist .status.ok { color: var(--cobalt-2); }
    .waitlist .status.err { color: #FF7B7B; }
    .micro-row {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 12.5px;
      color: var(--ink-3);
      font-family: var(--mono);
      letter-spacing: 0.02em;
    }
    .micro-row .dot {
      width: 4px; height: 4px;
      background: var(--ink-3);
      border-radius: 50%;
      opacity: 0.6;
    }

    /* ====== FOOTER ====== */
    footer.site {
      border-top: 1px solid var(--line);
      padding: 40px 28px;
      color: var(--ink-3);
      font-size: 13px;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    footer.site .row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    footer.site .row .lynx-mini {
      width: 18px; height: 18px; opacity: 0.7;
    }
    footer.site a { color: var(--ink-3); }
    footer.site a:hover { color: var(--ink); }
    footer.site .sep { color: var(--ink-4); }
    footer.site .copy {
      color: var(--ink-4);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    /* ====== REVEAL ANIMATIONS ====== */
    html.reveal-on .reveal {
      opacity: 0;
      transform: translateY(20px);
      animation: reveal 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    }
    html.reveal-on .reveal.d1 { animation-delay: 0.05s; }
    html.reveal-on .reveal.d2 { animation-delay: 0.2s; }
    html.reveal-on .reveal.d3 { animation-delay: 0.4s; }
    html.reveal-on .reveal.d4 { animation-delay: 0.6s; }
    html.reveal-on .reveal.d5 { animation-delay: 0.8s; }
    @keyframes reveal { to { opacity: 1; transform: translateY(0); } }

    /* SVG skill tree animations */
    .conn-line {
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: draw-line 1.4s ease-out forwards;
    }
    .conn-line.d1 { animation-delay: 0.5s; }
    .conn-line.d2 { animation-delay: 0.8s; }
    .conn-line.d3 { animation-delay: 1.1s; }
    .conn-line.d4 { animation-delay: 1.4s; }
    @keyframes draw-line { to { stroke-dashoffset: 0; } }
    .node-progress-ring {
      transform-origin: center;
      transform-box: fill-box;
      animation: spin 7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .node-halo {
      transform-origin: center;
      transform-box: fill-box;
      animation: halo-pulse 3s ease-in-out infinite;
    }
    .node-halo.d1 { animation-delay: 0.6s; }
    .node-halo.d2 { animation-delay: 1.2s; }
    .node-halo.d3 { animation-delay: 1.8s; }
    .node-halo.d4 { animation-delay: 2.4s; }
    @keyframes halo-pulse {
      0%, 100% { opacity: 0.6; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.08); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    /* 2026-05-16 — small-viewport animation hold. On phones the
       independently-floating hero phone + drifting glow orbs created
       a parallax-y "double scroll" sensation when the user swipes
       vertically — the hero felt like it was reacting to scroll even
       though no scroll listener was wired. Pausing the animations on
       narrow viewports restores the "page scrolls as one piece" feel.
       Desktop keeps the float for visual liveliness.

       Side phones are already `display: none` below 720px (line 434);
       this rule additionally pins the center float + halo breathe +
       glow drift so nothing moves independent of the page. */
    @media (max-width: 720px) {
      .hero-phone-card,
      .hero-phone-card.center,
      .hero-phone-card.side {
        animation: none !important;
        transform: none !important;
      }
      .hero-phones::before { animation: none !important; }
      .glow.drift { animation: none !important; }
    }

    /* 2026-05-16 — prevent iOS Safari's rubber-band overscroll. Without
       this, dragging past the bottom of the page exposes a fragment of
       the underlying browser chrome / dark background, which felt like
       a second scroll layer to the user. Applied to body (not html) so
       page-level reload-pull-down still works (iOS standard). */
    body {
      overscroll-behavior-y: none;
    }

/* ===================== GH-600 cert prep wedge (2026-05-17) =====================
 * Hero feature for Microsoft's GH-600 (GitHub Certified: Agentic AI Developer)
 * beta exam. Amber accent (vs cobalt of the rest of the site) to set this
 * section apart visually + signal "this is a special wedge, not a permanent
 * pillar". Stays inside the .feature shell so layout is consistent with the
 * other features. Disclaimer styling muted but readable.
 * Legal compliance refs: marketing/research/gh600-legal-2026-05-17.md
 */

.feature.gh600 .label {
  color: var(--amber);
}

.feature.gh600 .label .reg {
  display: none;
}

.feature.gh600 ul.gh600-domains {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}

.feature.gh600 ul.gh600-domains li {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
  padding-left: 0;
}

.feature.gh600 ul.gh600-domains li strong {
  color: var(--amber);
  font-family: var(--mono);
  font-weight: 600;
  margin-right: 6px;
}

.feature.gh600 .gh600-extras {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 14px;
}

.feature.gh600 .disclaimer {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-4);
  margin-top: 24px;
  max-width: 56ch;
  letter-spacing: 0;
}

/* Stack the SVG mock to one side on wider viewports — matches the existing
 * .feature-grid pattern already defined for .feature blocks. The amber accent
 * naturally fades to cobalt as the next section (#features Skill Tree) takes
 * over with its cobalt theme. */
@media (max-width: 720px) {
  .feature.gh600 ul.gh600-domains {
    grid-template-columns: 1fr;
  }
}