/* ═══════════════════════════════════════════════════
   ACTION TRADER PRO — styles.css
   Extraído del archivo original sin modificar estilos
═══════════════════════════════════════════════════ */

    :root {
      --bg:  #1A1A1A;   /* claude.ai base — negro cálido */
      --bg2: #141414;   /* un tono más oscuro para alternar secciones */
      --bg3: #222222;   /* superficie cards */
      --cyan: #00D4FF;
      --violet: #7C3AED;
      --green: #10B981;
      --amber: #F59E0B;
      --red: #EF4444;
      --t1: #ECECEC;    /* claude.ai usa blanco cálido, no frío */
      --t2: #9CA3AF;
      --t3: #6B7280;
      --border: rgba(255, 255, 255, 0.07);
      --fd: 'Geist', sans-serif;
      --fb: 'Geist', sans-serif;
      --fm: 'Geist Mono', monospace;
    }

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

    html {
      scroll-behavior: smooth
    }

    html:not(.i18n-ready) [data-i18n],
    html:not(.i18n-ready) [data-i18n-placeholder] {
      visibility: hidden;
    }

    body {
      background: #1A1A1A; /* claude.ai warm black */
      color: var(--t1);
      font-family: 'Geist', sans-serif;
      font-optical-sizing: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
      overflow-x: hidden;
      cursor: none;
    }

    /* ── CURSOR ── */
    #cur,
    #cur2 {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%)
    }

    #cur {
      width: 8px;
      height: 8px;
      background: var(--cyan);
      box-shadow: 0 0 12px var(--cyan)
    }

    #cur2 {
      width: 36px;
      height: 36px;
      border: 1.5px solid rgba(0, 212, 255, .35);
      transition: transform .15s, width .2s, height .2s, border-color .2s
    }

    body:has(a:hover) #cur2,
    body:has(button:hover) #cur2 {
      width: 52px;
      height: 52px;
      border-color: rgba(0, 212, 255, .6)
    }

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

    /* ── UTILS ── */
    .wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 28px
    }

    .sec {
      padding: 120px 0;
      position: relative
    }

    .lbl {
      display: inline-block;
      font-family: 'Geist', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 18px
    }

    .grad {
      background: linear-gradient(135deg, var(--cyan), var(--violet));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .h1 {
      font-family: 'Geist', sans-serif;
      font-size: clamp(36px, 5vw, 62px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.035em;
      font-feature-settings: 'rlig' 1, 'calt' 1;
    }

    .h2 {
      font-family: 'Geist', sans-serif;
      font-size: clamp(34px, 4vw, 54px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.03em;
      font-feature-settings: 'rlig' 1, 'calt' 1
    }

    /* ════════════════════════════════════════════════
   CRYSTAL / GLASS SYSTEM — coherente por sección:
   borde luminoso + highlight top
   + backdrop-filter muy sutil + glow ambient
════════════════════════════════════════════════ */

    /*
  1. Un borde con gradiente que se ilumina (top-left a bottom-right)
  2. Una línea de luz en el top edge (::after con gradiente blanco)
  3. Un backdrop-filter blur muy bajo (4-6px) — casi imperceptible
     pero da sensación de profundidad real
  4. Box-shadow interior suave (inset) para simular reflejo
*/

    /* BASE — aplicado a todas las cards con crystal */
    .crystal {
      position: relative;
      backdrop-filter: blur(4px) saturate(1.4);
      -webkit-backdrop-filter: blur(4px) saturate(1.4);

      /* Reflejo interno superior — la "línea de luz" de */
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        /* top highlight */
        inset 0 -1px 0 rgba(0, 0, 0, .2),
        /* bottom shadow */
        0 1px 0 rgba(255, 255, 255, .04);
      /* outer glow base */
      /* Borde via outline para no interferir con border gradient */
      isolation: isolate;
    }

    /* PSEUDO-ELEMENT: línea de luz en top edge */
    .crystal::after {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, .18) 30%,
          rgba(255, 255, 255, .28) 50%,
          rgba(255, 255, 255, .18) 70%,
          transparent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }

    /* ── VARIANTE CYAN (El Problema, Testimonios, Métricas) ── */
    .crystal-cyan {
      background: rgba(13, 19, 33, .7);
      border: 1px solid rgba(0, 212, 255, .12);
      box-shadow:
        inset 0 1px 0 rgba(0, 212, 255, .1),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 4px 24px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(0, 212, 255, .04);
    }

    .crystal-cyan::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(0, 212, 255, .04) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    .crystal-cyan:hover {
      border-color: rgba(0, 212, 255, .22);
      box-shadow:
        inset 0 1px 0 rgba(0, 212, 255, .15),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 8px 32px rgba(0, 0, 0, .4),
        0 0 28px rgba(0, 212, 255, .06);
      transition: border-color .3s, box-shadow .3s;
    }

    /* ── VARIANTE VIOLET (Stacking cards paso 2, Pricing Pro) ── */
    .crystal-violet {
      background: rgba(17, 13, 34, .75);
      border: 1px solid rgba(124, 58, 237, .15);
      box-shadow:
        inset 0 1px 0 rgba(124, 58, 237, .12),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 4px 24px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(124, 58, 237, .05);
    }

    .crystal-violet::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(124, 58, 237, .05) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }

    .crystal-violet:hover {
      border-color: rgba(124, 58, 237, .28);
      box-shadow:
        inset 0 1px 0 rgba(124, 58, 237, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 8px 32px rgba(0, 0, 0, .45),
        0 0 28px rgba(124, 58, 237, .08);
      transition: border-color .3s, box-shadow .3s;
    }

    /* ── VARIANTE GREEN (Marketplace creator card, Stacking card 3) ── */
    .crystal-green {
      background: rgba(8, 26, 20, .8);
      border: 1px solid rgba(16, 185, 129, .18);
      box-shadow:
        inset 0 1px 0 rgba(16, 185, 129, .14),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 4px 24px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(16, 185, 129, .05);
    }

    .crystal-green::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(16, 185, 129, .06) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── VARIANTE AMBER (Pricing Elite, Creator tiles) ── */
    .crystal-amber {
      background: rgba(20, 15, 8, .75);
      border: 1px solid rgba(245, 158, 11, .14);
      box-shadow:
        inset 0 1px 0 rgba(245, 158, 11, .1),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 4px 24px rgba(0, 0, 0, .4),
        0 0 0 1px rgba(245, 158, 11, .04);
    }

    .crystal-amber::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(245, 158, 11, .05) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── VARIANTE NEUTRAL (Testimonios, FAQ, Pricing Starter) ── */
    .crystal-neutral {
      background: rgba(11, 16, 27, .72);
      border: 1px solid rgba(255, 255, 255, .07);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 4px 20px rgba(0, 0, 0, .35);
    }

    .crystal-neutral:hover {
      border-color: rgba(255, 255, 255, .12);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 8px 32px rgba(0, 0, 0, .4);
      transition: border-color .3s, box-shadow .3s;
    }

    /* Asegura que el contenido quede sobre los pseudoelementos */
    .crystal>* {
      position: relative;
      z-index: 1
    }


    .sub {
      font-size: clamp(17px, 1.8vw, 20px);
      color: var(--t2);
      line-height: 1.65;
      font-weight: 400;
      letter-spacing: -.01em
    }

    /* ═══════════════════════════════════════════════════
   BUTTON SYSTEM — style
   4 tipos: primary · secondary · ghost · text
   Principios: sin gradientes, color sólido, bordes
   precisos, hover con brightness, active con scale,
   focus-visible ring accesible, Geist font siempre
═══════════════════════════════════════════════════ */

    /* BASE — compartido por todos los botones */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-family: 'Geist', sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -.01em;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 7px;
      padding: 9px 16px;
      cursor: none;
      position: relative;
      transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
      outline: none;
      -webkit-font-smoothing: antialiased;
    }

    .btn:focus-visible {
      box-shadow: 0 0 0 3px rgba(0, 212, 255, .35);
    }

    .btn:active {
      transform: scale(.97);
    }

    /* Icon inside button */
    .btn svg {
      flex-shrink: 0;
      transition: transform .15s ease
    }

    /* ── PRIMARY — sólido, el CTA principal ── */
    /* boton: fondo color sólido, sin gradiente, texto oscuro,
   hover: brightness más alta del mismo color */
    .btn-primary {
      background: var(--cyan);
      color: #07111D;
      /* negro azulado — mejor contraste que #080C14 */
      border-color: var(--cyan);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }

    .btn-primary:hover {
      background: #19DAFF;
      border-color: #19DAFF;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .25), 0 4px 16px rgba(0, 212, 255, .2);
    }

    .btn-primary:active {
      background: #00BEE6;
      border-color: #00BEE6
    }

    /* Primary — tamaño grande (hero, CTA final) */
    .btn-primary.btn-lg {
      font-size: 15px;
      font-weight: 600;
      padding: 13px 24px;
      border-radius: 8px;
    }

    /* Primary — tamaño pequeño (nav) */
    .btn-primary.btn-sm {
      font-size: 13px;
      padding: 7px 14px;
      border-radius: 6px;
    }

    /* ── SECONDARY (outline) — borde visible, fondo transparente ── */
    /* boton: border 1px sólido con color, fondo muy sutil en hover */
    .btn-secondary {
      background: transparent;
      color: var(--t2);
      border-color: rgba(255, 255, 255, .14);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .24);
      color: var(--t1);
    }

    .btn-secondary:active {
      background: rgba(255, 255, 255, .08)
    }

    .btn-secondary.btn-lg {
      font-size: 15px;
      font-weight: 400;
      padding: 13px 22px;
      border-radius: 8px;
    }

    /* ── GHOST — sin borde, fondo hover muy sutil ── */
    /* usa esto para links de nav y acciones secundarias */
    .btn-ghost {
      background: transparent;
      color: var(--t2);
      border-color: transparent;
      padding: 9px 12px;
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, .06);
      color: var(--t1);
    }

    .btn-ghost:active {
      background: rgba(255, 255, 255, .09)
    }

    /* ── TEXT — solo texto, sin fondo ni borde ── */
    .btn-text {
      background: transparent;
      color: var(--t3);
      border-color: transparent;
      padding: 6px 4px;
      font-size: 13px;
    }

    .btn-text:hover {
      color: var(--t1)
    }

    .btn-text .btn-arrow {
      display: inline-block;
      transition: transform .2s ease;
      margin-left: 2px;
    }

    .btn-text:hover .btn-arrow {
      transform: translateX(3px)
    }

    /* ── VARIANTES DE COLOR ── */

    /* Cyan (default primary — ya está arriba) */

    /* Green — marketplace CTA */
    .btn-green {
      background: var(--green);
      color: #071A11;
      border-color: var(--green);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }

    .btn-green:hover {
      background: #14D48C;
      border-color: #14D48C;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, .25), 0 4px 16px rgba(16, 185, 129, .18);
    }

    .btn-green.btn-lg {
      font-size: 15px;
      font-weight: 600;
      padding: 13px 24px;
      border-radius: 8px
    }

    /* Amber — elite / creators */
    .btn-amber {
      background: rgba(245, 158, 11, .12);
      color: var(--amber);
      border-color: rgba(245, 158, 11, .28);
    }

    .btn-amber:hover {
      background: rgba(245, 158, 11, .2);
      border-color: rgba(245, 158, 11, .45);
    }

    /* Neutral — disabled/current plan */
    .btn-neutral {
      background: rgba(255, 255, 255, .04);
      color: var(--t3);
      border-color: rgba(255, 255, 255, .08);
      cursor: default;
      pointer-events: none;
    }

    /* ── PLAY RING (hero secondary button) ── */
    .btn-play-ring {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      flex-shrink: 0;
      transition: border-color .15s, color .15s;
    }

    .btn-secondary:hover .btn-play-ring,
    .btn-xl2:hover .btn-play-ring {
      border-color: var(--cyan);
      color: var(--cyan);
    }

    /* ── NAV BUTTON (ghost text for "Iniciar sesión") ── */
    .btn-g {
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -.01em;
      color: var(--t2);
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 7px;
      transition: color .15s, background .15s;
      cursor: none;
    }

    .btn-g:hover {
      color: var(--t1);
      background: rgba(255, 255, 255, .05)
    }

    /* ── NAV CTA ── */
    .btn-p {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      padding: 8px 18px;
      border-radius: 7px;
      cursor: none;
      text-decoration: none;
      background: var(--cyan);
      color: #07111D;
      border: 1px solid var(--cyan);
      transition: background .15s, box-shadow .15s, transform .1s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    }

    .btn-p:hover {
      background: #19DAFF;
      border-color: #19DAFF;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .2), 0 4px 12px rgba(0, 212, 255, .18)
    }

    .btn-p:active {
      transform: scale(.97)
    }

    /* ── HERO BUTTONS (xl size) ── */
    .btn-xl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.015em;
      padding: 13px 26px;
      border-radius: 8px;
      cursor: none;
      text-decoration: none;
      background: var(--cyan);
      color: #07111D;
      border: 1px solid var(--cyan);
      transition: background .15s, box-shadow .15s, transform .1s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 212, 255, .1);
    }

    .btn-xl:hover {
      background: #19DAFF;
      border-color: #19DAFF;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .3), 0 6px 20px rgba(0, 212, 255, .18);
    }

    .btn-xl:active {
      transform: scale(.97);
      background: #00BEE6
    }

    .btn-xl svg {
      transition: transform .15s
    }

    .btn-xl:hover svg {
      transform: translateX(2px)
    }

    .btn-xl2 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: -.015em;
      padding: 13px 22px;
      border-radius: 8px;
      cursor: none;
      text-decoration: none;
      background: rgba(255, 255, 255, .04);
      color: var(--t1);
      border: 1px solid rgba(255, 255, 255, .12);
      transition: background .15s, border-color .15s, transform .1s;
    }

    .btn-xl2:hover {
      background: rgba(255, 255, 255, .07);
      border-color: rgba(255, 255, 255, .22)
    }

    .btn-xl2:active {
      transform: scale(.97)
    }

    /* ── PLAN BUTTONS ── */
    .btn-plan {
      width: 100%;
      padding: 11px 16px;
      border-radius: 7px;
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      cursor: none;
      transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-plan:active {
      transform: scale(.97)
    }

    /* Starter — secondary outline */
    .bp-free {
      background: transparent;
      color: var(--t2);
      border-color: rgba(255, 255, 255, .12);
    }

    .bp-free:hover {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .22);
      color: var(--t1)
    }

    /* Pro — primary cyan */
    .bp-pro {
      background: var(--cyan);
      color: #07111D;
      border-color: var(--cyan);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
      font-weight: 600;
    }

    .bp-pro:hover {
      background: #19DAFF;
      border-color: #19DAFF;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .25), 0 4px 14px rgba(0, 212, 255, .2)
    }

    /* Elite — amber */
    .bp-elite {
      background: rgba(245, 158, 11, .1);
      color: var(--amber);
      border-color: rgba(245, 158, 11, .25);
    }

    .bp-elite:hover {
      background: rgba(245, 158, 11, .18);
      border-color: rgba(245, 158, 11, .4)
    }

    /* Current plan */
    .bp-current {
      background: rgba(255, 255, 255, .04);
      color: var(--t3);
      border-color: rgba(255, 255, 255, .08);
      cursor: default;
      pointer-events: none;
    }

    /* ── MARKETPLACE BUTTONS ── */
    .btn-out {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -.01em;
      padding: 10px 18px;
      border-radius: 7px;
      cursor: none;
      text-decoration: none;
      background: transparent;
      color: var(--t2);
      border: 1px solid rgba(255, 255, 255, .12);
      transition: background .15s, border-color .15s, color .15s, transform .1s;
    }

    .btn-out:hover {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .22);
      color: var(--t1)
    }

    .btn-out:active {
      transform: scale(.97)
    }

    /* Marketplace creator CTA — green primary */
    .mcc-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 14px 20px;
      border-radius: 8px;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.01em;
      background: var(--green);
      color: #071A11;
      border: 1px solid var(--green);
      cursor: none;
      text-decoration: none;
      transition: background .15s, box-shadow .15s, transform .1s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    }

    .mcc-cta:hover {
      background: #14D48C;
      border-color: #14D48C;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, .25), 0 6px 20px rgba(16, 185, 129, .2);
    }

    .mcc-cta:active {
      transform: scale(.97);
      background: #0EBF7A
    }

    .mcc-cta-arrow {
      font-size: 16px;
      transition: transform .2s ease;
      display: inline-block
    }

    .mcc-cta:hover .mcc-cta-arrow {
      transform: translateX(3px)
    }

    /* ── CTA FINAL BUTTON ── */
    .btn-cta-final {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Geist', sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.015em;
      padding: 15px 32px;
      border-radius: 9px;
      cursor: none;
      text-decoration: none;
      background: var(--cyan);
      color: #07111D;
      border: 1px solid var(--cyan);
      transition: background .15s, box-shadow .15s, transform .1s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 212, 255, .1);
    }

    .btn-cta-final:hover {
      background: #19DAFF;
      border-color: #19DAFF;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .3), 0 8px 24px rgba(0, 212, 255, .2);
    }

    .btn-cta-final:active {
      transform: scale(.97)
    }

    /* ── NAV ── */
    /* ══════════════════════════════════════
   NAV — floating pill, style
   Wrapper full-width, pointer-events:none
   Píldora centrada con glass crystal
══════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      /* padding para que la píldora no toque los bordes */
      padding: 14px 24px;
      pointer-events: none;
      /* el wrapper no captura clics */
      display: flex;
      justify-content: center;
      transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
      will-change: transform, opacity;
    }

    nav.nav-hidden {
      transform: translateY(calc(-100% - 12px));
      opacity: 0;
    }

    /* La píldora flotante */
    .nav-pill {
      pointer-events: auto;
      /* solo la píldora recibe eventos */
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1080px;
      height: 52px;
      padding: 0 8px 0 16px;
      border-radius: 100px;
      background: rgba(8, 12, 20, .55);
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(20px) saturate(1.6);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        /* top light edge */
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 4px 32px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(255, 255, 255, .04);
      transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
      position: relative;
      overflow: visible;
    }

    /* top shimmer line (n8n crystal signature) */
    .nav-pill::before {
      content: '';
      position: absolute;
      top: 0;
      left: 15%;
      right: 15%;
      height: 1px;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, .15) 40%,
          rgba(255, 255, 255, .22) 50%,
          rgba(255, 255, 255, .15) 60%,
          transparent);
      border-radius: 50%;
      pointer-events: none;
    }

    /* scrolled — más opaco */
    nav.on .nav-pill {
      background: rgba(8, 12, 20, .82);
      border-color: rgba(255, 255, 255, .11);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 -1px 0 rgba(0, 0, 0, .4),
        0 8px 48px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 212, 255, .06);
    }

    /* inner layout */
    .nav-i {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .nav-i .logo {
      flex-shrink: 0;
      margin-right: 24px;
    }

    .nav-i .nav-links {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-i .nav-r {
      flex-shrink: 0;
      margin-left: 24px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      font-family: 'Geist', sans-serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -.025em;
      color: var(--t1)
    }

    .logo-mark {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      display: block
    }

    .logo-wordmark {
      display: inline-flex;
      align-items: baseline
    }

    .logo-c {
      color: var(--cyan)
    }

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

    .nav-links a {
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 400;
      letter-spacing: -.01em;
      color: var(--t2);
      padding: 6px 12px;
      border-radius: 100px;
      transition: color .15s, background .15s;
      position: relative;
    }

    .nav-links a:hover {
      color: var(--t1);
      background: rgba(255, 255, 255, .06)
    }

    .nav-links a.nav-active,
    .nav-dropdown-trigger.nav-active {
      color: var(--cyan);
      background: rgba(0, 212, 255, .08);
    }

    .nav-r {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .btn-g {
      font-size: 13.5px;
      font-weight: 400;
      color: var(--t2);
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 100px;
      transition: color .15s, background .15s;
    }

    .btn-g:hover {
      color: var(--t1);
      background: rgba(255, 255, 255, .06)
    }

    /* CTA button — pill shaped to match nav */
    .btn-p {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--cyan);
      color: #080C14;
      font-family: 'Geist', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -.01em;
      padding: 8px 18px;
      border-radius: 100px;
      border: none;
      cursor: none;
      text-decoration: none;
      transition: transform .15s, box-shadow .15s, background .15s;
      box-shadow: 0 0 20px rgba(0, 212, 255, .2);
    }

    .btn-p:hover {
      transform: scale(1.03);
      box-shadow: 0 0 36px rgba(0, 212, 255, .38);
      background: #19DAFF
    }


    /* ── NAV DROPDOWN ── */
    .nav-dropdown-wrap {
      position: relative;
    }

    .nav-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: none;
    }

    .nav-chevron {
      transition: transform .2s ease;
      flex-shrink: 0;
      opacity: .6;
    }

    .nav-dropdown-wrap.open .nav-chevron {
      transform: rotate(180deg);
      opacity: 1;
    }

    .nav-dropdown-wrap.open > .nav-dropdown-trigger {
      color: var(--t1);
      background: rgba(255,255,255,.06);
    }

    .nav-dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 300;
      min-width: 280px;
    }

    .nav-dropdown-wrap.open .nav-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown-inner {
      background: rgba(10, 14, 26, .92);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px;
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 20px 60px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,.03);
      padding: 8px;
      overflow: hidden;
    }

    .nav-drop-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      text-decoration: none;
      transition: background .15s;
      cursor: none;
    }

    .nav-drop-item:hover {
      background: rgba(255,255,255,.05);
    }

    .nav-drop-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .nav-drop-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .nav-drop-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--t1);
      letter-spacing: -.01em;
    }

    .nav-drop-desc {
      font-size: 11px;
      color: var(--t3);
      line-height: 1.4;
    }

    /* ── LANGUAGE SELECTOR ── */
    .lang-selector {
      position: relative;
      margin-right: 16px;
    }

    .lang-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color: var(--t2);
      cursor: none;
      transition: all 0.2s ease;
    }

    .lang-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
      color: var(--t1);
    }

    .lang-btn svg {
      width: 14px;
      height: 14px;
      opacity: 0.7;
    }

    .lang-current {
      font-family: var(--fm);
      font-size: 11.5px;
      letter-spacing: 0.02em;
    }

    .lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 140px;
      background: rgba(10, 14, 26, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 48px rgba(0, 0, 0, 0.5);
      padding: 6px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 350;
    }

    .lang-selector.open .lang-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 12px;
      background: transparent;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--t2);
      text-align: left;
      cursor: none;
      transition: all 0.15s ease;
    }

    .lang-option:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--t1);
    }

    .lang-option.active {
      background: rgba(0, 212, 255, 0.1);
      color: var(--cyan);
    }

    .lang-flag {
      font-size: 16px;
      line-height: 1;
    }

    .lang-name {
      font-family: var(--fd);
      letter-spacing: -0.01em;
    }

    /* hero padding fix — nav flotante no ocupa espacio en el DOM */
    #hero {
      padding-top: 80px
    }


    /* ── HERO ── */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding-top: 64px;
      position: relative;
      overflow: hidden;
      z-index: 1
    }

    .hero-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(90px)
    }

    .orb1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(0, 212, 255, .11) 0%, transparent 70%);
      top: -100px;
      left: -200px
    }

    .orb2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(124, 58, 237, .1) 0%, transparent 70%);
      bottom: -100px;
      right: 5%
    }

    .orb3 {
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(0, 212, 255, .06) 0%, transparent 70%);
      top: 30%;
      right: 30%
    }

    /* HERO SPLIT LAYOUT — style */
    .hero-inner {
      display: grid;
      grid-template-columns: 52fr 48fr;
      gap: 40px;
      align-items: center;
      width: 100%;
      min-height: calc(100vh - 64px);
      padding: 100px 0 60px;
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      max-width: 520px;
    }

    .hero-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end; /* imagen pegada a la derecha */
      padding-right: 0;
    }

    html.preload-hero #h-badge,
    html.preload-hero #h-title,
    html.preload-hero #h-sub,
    html.preload-hero #h-ctas,
    html.preload-hero #h-trust,
    html.preload-hero #h-logos,
    html.preload-hero #h-visual {
      will-change: transform, opacity;
    }

    html.preload-hero #h-title {
      opacity: 0;
      transform: translateY(36px);
    }

    html.preload-hero #h-sub {
      opacity: 0;
      transform: translateY(24px);
    }

    html.preload-hero #h-ctas {
      opacity: 0;
      transform: translateY(18px);
    }

    html.preload-hero #h-trust,
    html.preload-hero #h-logos {
      opacity: 0;
      transform: translateY(12px);
    }

    html.preload-hero #h-visual {
      opacity: 0;
      transform: translateX(48px);
    }


    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 212, 255, .07);
      border: 1px solid rgba(0, 212, 255, .18);
      border-radius: 6px;
      padding: 6px 14px;
      font-family: 'Geist', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .01em;
      color: var(--cyan);
      margin-bottom: 24px;
      opacity: 0;
      transform: translateY(-12px)
    }

    .hdot {
      width: 6px;
      height: 6px;
      background: var(--cyan);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--cyan);
      animation: pulse 2s ease infinite
    }

    @keyframes pulse {

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

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

    .hero-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 40px
    }

    .btn-xl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--cyan);
      color: #080C14;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.015em;
      padding: 14px 28px;
      border-radius: 8px;
      border: none;
      cursor: none;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s, background .2s;
      box-shadow: 0 0 36px rgba(0, 212, 255, .22)
    }

    .btn-xl:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 52px rgba(0, 212, 255, .4);
      background: #19DAFF
    }

    .btn-xl2 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .04);
      color: var(--t1);
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: -.015em;
      padding: 14px 24px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, .1);
      cursor: none;
      text-decoration: none;
      transition: all .2s
    }

    .btn-xl2:hover {
      border-color: rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .07)
    }

    .play-ring {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      flex-shrink: 0;
      transition: border-color .15s, color .15s;
    }

    .btn-xl2:hover .play-ring {
      border-color: var(--cyan);
      color: var(--cyan)
    }

    .trust-note {
      font-size: 12px;
      color: var(--t3);
      margin-top: 20px;
      letter-spacing: -.005em
    }

    .trust-note span {
      margin: 0 6px;
      opacity: .3
    }

    /* LOGOS — left aligned, below copy */
    .logos-wrap {
      margin-top: 52px;
      border-top: 1px solid var(--border);
      padding-top: 24px;
      width: 100%
    }

    .logos-ttl {
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 16px;
      font-weight: 500
    }

    .logos-row2 {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap
    }

    .logo-tag {
      font-family: 'Geist Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--t3);
      letter-spacing: .05em;
      opacity: .28;
      transition: opacity .25s
    }

    .logo-tag:hover {
      opacity: .6
    }

    /* ── AUTOMATION VISUAL (right side) — static image ── */
    .hero-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%
    }

    .hero-img-wrap {
      position: relative;
      width: 115%; /* slightly wider than the column — bleeds right like n8n */
      max-width: 680px;
      margin-right: -28px; /* bleeds to page edge */
    }

    .hero-img {
      width: 100%;
      height: auto;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    /* glow removed — no frame around the image */
    .hero-img-wrap::after { display: none; }


    /* DASHBOARD MOCKUP — kept for other sections */
    .mock-wrap {
      position: relative;
      margin-top: 90px;
      width: 100%;
      max-width: 1040px
    }

    .mock-glow {
      position: absolute;
      inset: -1px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .18), rgba(124, 58, 237, .12), transparent 60%);
      pointer-events: none;
      z-index: -1
    }

    .mock-shell {
      border-radius: 16px;
      border: 1px solid rgba(0, 212, 255, .12);
      background: #080e1b;
      overflow: hidden;
      box-shadow: 0 48px 140px rgba(0, 0, 0, .7)
    }

    .mock-shell::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 45%;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none;
      z-index: 2
    }

    .mock-bar {
      background: #0c1220;
      padding: 13px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--border)
    }

    .mdot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .mdot.r {
      background: #FF5F57
    }

    .mdot.y {
      background: #FFBD2E
    }

    .mdot.g {
      background: #28C840
    }

    .mock-url {
      flex: 1;
      background: rgba(255, 255, 255, .04);
      border-radius: 6px;
      padding: 5px 12px;
      font-family: var(--fm);
      font-size: 12px;
      color: var(--t3);
      margin: 0 16px;
      text-align: center
    }

    .dash {
      display: grid;
      grid-template-columns: 210px 1fr 196px;
      height: 420px
    }

    .d-left {
      background: #070b12;
      border-right: 1px solid var(--border);
      padding: 14px;
      overflow: hidden
    }

    .d-ttl {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--t3);
      font-family: var(--fm);
      margin-bottom: 12px
    }

    .strat {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px;
      border-radius: 8px;
      margin-bottom: 5px;
      border: 1px solid transparent;
      transition: all .3s
    }

    .strat.on {
      background: rgba(0, 212, 255, .07);
      border-color: rgba(0, 212, 255, .12)
    }

    .strat:not(.on) {
      background: rgba(255, 255, 255, .02)
    }

    .sdot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .sdot.g {
      background: var(--green);
      box-shadow: 0 0 7px var(--green);
      animation: pulse 2s ease infinite
    }

    .sdot.a {
      background: var(--amber)
    }

    .sinfo .sn {
      font-size: 12px;
      font-weight: 600
    }

    .sinfo .sr {
      font-family: var(--fm);
      font-size: 11px;
      font-weight: 600
    }

    .sr.p {
      color: var(--green)
    }

    .sr.n {
      color: var(--red)
    }

    .d-mid {
      padding: 18px;
      overflow: hidden
    }

    .ch-hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px
    }

    .ch-ttl {
      font-size: 13px;
      font-weight: 600
    }

    .ch-live {
      font-family: var(--fm);
      font-size: 11px;
      background: rgba(16, 185, 129, .1);
      color: var(--green);
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid rgba(16, 185, 129, .2)
    }

    .ch-area {
      height: 190px
    }

    .ch-area svg {
      width: 100%;
      height: 100%
    }

    .tr-row {
      display: grid;
      grid-template-columns: 1fr 72px 72px 72px;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
      font-size: 11px;
      font-family: var(--fm);
      align-items: center
    }

    .tr-row.hd {
      color: var(--t3);
      font-size: 10px;
      letter-spacing: .5px
    }

    .buy {
      color: var(--cyan)
    }

    .sell {
      color: #F87171
    }

    .profit {
      color: var(--green)
    }

    .loss {
      color: var(--red)
    }

    .d-right {
      border-left: 1px solid var(--border);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden
    }

    .mc {
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px
    }

    .mc .ml {
      font-size: 10px;
      color: var(--t3);
      letter-spacing: .5px;
      text-transform: uppercase;
      font-family: var(--fm);
      margin-bottom: 4px
    }

    .mc .mv {
      font-family: var(--fm);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.1
    }

    .mv.up {
      color: var(--green)
    }

    .mv.cy {
      color: var(--cyan)
    }

    .mv.am {
      color: var(--amber)
    }

    .mc .ms {
      font-size: 10px;
      color: var(--t3);
      margin-top: 3px;
      font-family: var(--fm)
    }

    /* ── SCROLL PROGRESS LINE ── */


    /* ── SECTION DIVIDERS ── */
    .wave-div {
      position: relative;
      height: 120px;
      overflow: hidden;
      pointer-events: none
    }

    .wave-div svg {
      position: absolute;
      bottom: 0;
      width: 100%
    }

    /* ══════════════════════════════════════════════════
   PROBLEM SECTION — style
   Sin cards, sin bordes contenedores.
   Fondo transparente. Tipografía jerarquizada.
   Número grande + título + descripción pequeña.
   Línea activa como único indicador de estado.
══════════════════════════════════════════════════ */
    #problem {
      background: var(--bg2);
      overflow: hidden
    }

    /* Layout principal: 2 columnas, sin ningún contenedor */
    .prob-layout {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 80px;
      margin-top: 72px;
      align-items: start;
      min-height: 480px;
    }

    /* ── LEFT: lista de tabs — n8n style ── */
    .prob-tabs {
      display: flex;
      flex-direction: column;
      gap: 0;
      /* Sin fondo, sin borde, sin padding contenedor */
    }

    .prob-tab {
      display: flex;
      flex-direction: column;
      padding: 20px 0 20px 24px;
      cursor: none;
      position: relative;
      border: none;
      background: none;
      /* Línea izquierda como único elemento decorativo */
    }

    /* línea izquierda — siempre visible pero tenue */
    .prob-tab::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(255, 255, 255, .08);
      transition: background .25s, width .2s;
    }

    /* línea activa — se ilumina y se ensancha */
    .prob-tab.active::before {
      background: var(--red);
      width: 2px;
      box-shadow: 0 0 8px rgba(239, 68, 68, .4);
    }

    /* número grande — el elemento visual dominante */
    .pt-num {
      font-family: 'Geist', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 8px;
      font-feature-settings: 'tnum';
      transition: color .25s;
    }

    .prob-tab.active .pt-num {
      color: var(--red)
    }

    /* título — peso y tamaño n8n */
    .pt-title {
      font-family: 'Geist', sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.02em;
      line-height: 1.25;
      color: rgba(248, 250, 252, .4);
      /* atenuado en reposo */
      transition: color .25s;
      margin-bottom: 0;
    }

    .prob-tab.active .pt-title {
      color: var(--t1);
      /* blanco completo cuando activo */
    }

    .prob-tab:hover:not(.active) .pt-title {
      color: rgba(248, 250, 252, .65);
    }

    /* descripción — solo visible cuando activo */
    .pt-desc {
      font-size: 13px;
      color: var(--t3);
      line-height: 1.55;
      letter-spacing: -.005em;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      margin-top: 0;
      transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
    }

    .prob-tab.active .pt-desc {
      max-height: 60px;
      opacity: 1;
      margin-top: 6px;
    }

    /* progress bar — línea horizontal en el fondo del tab */
    .pt-progress {
      position: absolute;
      bottom: 0;
      left: 24px;
      right: 0;
      height: 1px;
      background: rgba(239, 68, 68, .3);
      width: 0%;
      transition: none;
    }

    /* ── RIGHT: panel de contenido ── */
    .prob-panel {
      /* Completamente transparente */
      background: transparent;
      position: relative;
    }

    .prob-view {
      display: none;
      flex-direction: column;
      justify-content: flex-start;
      padding: 4px 0 0;
    }

    /* etiqueta de error —  usa una pill o texto pequeño */
    .pv-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
      font-family: 'Geist Mono', monospace;
    }

    .pv-tag-dot {
      width: 5px;
      height: 5px;
      background: var(--red);
      border-radius: 50%;
      box-shadow: 0 0 5px var(--red);
    }

    /* título del panel — grande y claro */
    .pv-title {
      font-family: 'Geist', sans-serif;
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.15;
      color: var(--t1);
      margin-bottom: 12px;
    }

    /* cuerpo */
    .pv-body {
      font-size: 15px;
      color: var(--t2);
      line-height: 1.72;
      letter-spacing: -.01em;
      max-width: 480px;
      margin-bottom: 32px;
    }

    /* ── Visualizaciones: sin fondos externos, mínimo adorno ── */
    /* chart — borde muy sutil, transparente */
    .pv-chart {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .07);
      background: rgba(255, 255, 255, .02);
    }

    .pv-chart-header {
      padding: 10px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .pv-chart-title {
      font-size: 11px;
      font-weight: 500;
      font-family: 'Geist Mono', monospace;
      color: var(--t3);
      letter-spacing: .02em
    }

    .pv-chart-body {
      padding: 16px 16px 12px
    }

    /* candle chart */
    .candle-wrap {
      display: flex;
      align-items: stretch;
      gap: 4px;
      height: 108px;
      padding-top: 28px;
      margin-bottom: 8px;
    }

    /* emotion cycle — sin emojis, con puntos de color */
    .emotion-cycle {
      display: flex;
      align-items: center;
      gap: 0;
      flex-wrap: wrap;
      margin-bottom: 24px
    }

    .ec-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 56px
    }

    .ec-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, .1);
      font-size: 0;
      /* oculta el emoji */
      position: relative;
    }

    /* punto de color en lugar de emoji */
    .ec-icon::after {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: block;
    }

    .ec-icon.clr-green::after {
      background: var(--green);
      box-shadow: 0 0 8px rgba(16, 185, 129, .5)
    }

    .ec-icon.clr-amber::after {
      background: var(--amber);
      box-shadow: 0 0 8px rgba(245, 158, 11, .5)
    }

    .ec-icon.clr-red::after {
      background: var(--red);
      box-shadow: 0 0 8px rgba(239, 68, 68, .5)
    }

    .ec-icon.clr-violet::after {
      background: #A78BFA;
      box-shadow: 0 0 8px rgba(167, 139, 250, .5)
    }

    .ec-icon.clr-cyan::after {
      background: var(--cyan);
      box-shadow: 0 0 8px rgba(0, 212, 255, .5)
    }

    .ec-label {
      font-size: 10px;
      color: var(--t3);
      text-align: center;
      font-family: 'Geist', monospace;
      line-height: 1.4;
      letter-spacing: -.005em
    }

    .ec-arrow {
      font-size: 14px;
      color: rgba(255, 255, 255, .15);
      flex-shrink: 0;
      margin-bottom: 22px
    }

    /* stats row — sin cards, solo números */
    .pv-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 4px
    }

    .pv-stat {
      /* sin fondo, sin borde */
      padding: 0;
      border-left: 1px solid rgba(255, 255, 255, .08);
      padding-left: 16px;
    }

    .pv-stat:first-child {
      border-left: none;
      padding-left: 0
    }

    .pv-stat-val {
      font-family: 'Geist', sans-serif;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
    }

    .pv-stat-lbl {
      font-size: 11px;
      color: var(--t3);
      margin-top: 4px;
      letter-spacing: -.005em;
      font-family: 'Geist', sans-serif
    }

    /* trade log — borde sutil */
    .trade-log {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .tl-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 14px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      font-size: 13px;
      font-family: 'Geist Mono', monospace;
    }

    .tl-row:last-child {
      border-bottom: none
    }

    .tl-side {
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 10px;
      letter-spacing: .04em
    }

    .tl-side.b {
      background: rgba(0, 212, 255, .08);
      color: var(--cyan);
      border: 1px solid rgba(0, 212, 255, .15)
    }

    .tl-side.s {
      background: rgba(239, 68, 68, .08);
      color: var(--red);
      border: 1px solid rgba(239, 68, 68, .15)
    }

    .tl-pair {
      color: var(--t1);
      font-weight: 600
    }

    .tl-time {
      color: var(--t3)
    }

    .tl-pnl.g {
      color: var(--green)
    }

    .tl-pnl.r {
      color: var(--red)
    }

    /* heatmap */
    .heatmap {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      max-width: 200px
    }

    .hm-cell {
      width: 20px;
      height: 20px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 7px;
      font-family: 'Geist Mono', monospace;
      font-weight: 600
    }

    /* alerta info — sin emojis */
    .alert-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(239, 68, 68, .04);
      border: 1px solid rgba(239, 68, 68, .1);
      border-radius: 8px;
      margin-bottom: 8px;
      border-left: 2px solid rgba(239, 68, 68, .4);
    }

    .ar-icon {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 6px var(--red);
      flex-shrink: 0;
      margin-top: 5px;
    }

    .ar-text {
      font-size: 13px;
      color: var(--t2);
      line-height: 1.55;
      letter-spacing: -.01em
    }

    .ar-text strong {
      color: var(--t1);
      font-weight: 600
    }

    /* prob-footer */
    .prob-footer {
      margin-top: 80px
    }

    /* ── STEPS — stacking cards (style) ── */
    #steps {
      background: var(--bg);
      padding: 120px 0 0
    }

    .steps-header {
      text-align: center;
      margin-bottom: 80px
    }

    /* Outer scene — just a normal flow container, no JS height needed */
    .stack-scene {
      position: relative;
      padding-bottom: 120px;
    }

    /* Each wrap is sticky — same top so cards fully overlap */
    .scard-wrap {
      position: sticky;
      top: 88px;
      z-index: 1;
      display: flex;
      justify-content: center;
      padding: 0 28px;
    }

    /* Cards alternate with spacers: spacer(1) card(2) spacer(3) card(4) spacer(5) card(6) spacer(7) */
    #sw1 {
      z-index: 1;
    }

    #sw2 {
      z-index: 2;
    }

    #sw3 {
      z-index: 3;
    }

    /* Spacer between cards — gives scroll room for each card to enter */
    .scard-spacer {
      height: 100vh;
      pointer-events: none;
    }

    /* The card itself */
    .scard {
      width: 100%;
      max-width: 1160px;
      border-radius: 24px;
      padding: 52px 56px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      position: relative;
      overflow: hidden;
      will-change: transform;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
      transform-origin: top center;
    }

    /* Card 1 — dark teal / cyan */
    .scard-1 {
      background: linear-gradient(135deg, #1E2530 0%, #1A2840 50%, #1E2530 100%);
      border: 1px solid rgba(0, 212, 255, .18);
    }

    .scard-1::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(0, 212, 255, .08), transparent);
      pointer-events: none;
    }

    /* Card 2 — deep violet */
    .scard-2 {
      background: linear-gradient(135deg, #1C1528 0%, #201540 50%, #1C1528 100%);
      border: 1px solid rgba(124, 58, 237, .22);
    }

    .scard-2::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(124, 58, 237, .1), transparent);
      pointer-events: none;
    }

    /* Card 3 — emerald green */
    .scard-3 {
      background: linear-gradient(135deg, #201A0A 0%, #261C08 50%, #201A0A 100%);
      border: 1px solid rgba(245, 158, 11, .2);
    }

    .scard-3::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(245, 158, 11, .07), transparent);
      pointer-events: none;
    }

    /* step number watermark */
    .sc-num {
      position: absolute;
      right: 48px;
      top: 36px;
      font-family: 'Geist', sans-serif;
      font-size: 120px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.06em;
      opacity: .05;
      background: linear-gradient(135deg, #fff, transparent);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      pointer-events: none;
      user-select: none;
    }

    /* left copy */
    .sc-copy {
      position: relative;
      z-index: 1
    }

    .sc-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .sc-tag-1 {
      color: var(--cyan)
    }

    .sc-tag-2 {
      color: #A78BFA
    }

    .sc-tag-3 {
      color: var(--amber)
    }

    .sc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%
    }

    .sc-dot-1 {
      background: var(--cyan);
      box-shadow: 0 0 8px var(--cyan)
    }

    .sc-dot-2 {
      background: #A78BFA;
      box-shadow: 0 0 8px #A78BFA
    }

    .sc-dot-3 {
      background: var(--amber);
      box-shadow: 0 0 8px var(--amber);
      animation: pulse 2s ease infinite
    }

    .sc-h {
      font-family: 'Geist', sans-serif;
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.15;
      margin-bottom: 14px;
      color: var(--t1);
    }

    .sc-p {
      font-size: 15px;
      color: var(--t2);
      line-height: 1.75;
      letter-spacing: -.01em;
      margin-bottom: 24px
    }

    .sc-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
    }

    .sc-badge-1 {
      background: rgba(0, 212, 255, .08);
      border: 1px solid rgba(0, 212, 255, .2);
      color: var(--cyan)
    }

    .sc-badge-2 {
      background: rgba(124, 58, 237, .08);
      border: 1px solid rgba(124, 58, 237, .22);
      color: #A78BFA
    }

    .sc-badge-3 {
      background: rgba(245, 158, 11, .08);
      border: 1px solid rgba(245, 158, 11, .2);
      color: var(--amber)
    }

    /* right visual */
    .sc-vis {
      position: relative;
      z-index: 1;
      background: rgba(0, 0, 0, .25);
      border-radius: 16px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, .05);
      backdrop-filter: blur(4px);
    }

    .sc-vis-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .sc-vis-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      letter-spacing: .02em
    }

    .sc-vis-badge {
      font-size: 10px;
      font-family: 'Geist Mono', monospace;
      padding: 3px 8px;
      border-radius: 4px
    }

    /* node editor visual */
    .sc-nodes {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .sc-node {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-family: 'Geist Mono', monospace;
      transition: border-color .3s;
    }

    .sc-node-icon {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0
    }

    .sc-node.trigger {
      background: rgba(0, 212, 255, .06);
      border: 1px solid rgba(0, 212, 255, .2);
      color: var(--cyan)
    }

    .sc-node.trigger .sc-node-icon {
      background: rgba(0, 212, 255, .15)
    }

    .sc-node.cond {
      background: rgba(245, 158, 11, .05);
      border: 1px solid rgba(245, 158, 11, .18);
      color: var(--amber)
    }

    .sc-node.cond .sc-node-icon {
      background: rgba(245, 158, 11, .12)
    }

    .sc-node.act {
      background: rgba(16, 185, 129, .05);
      border: 1px solid rgba(16, 185, 129, .18);
      color: var(--green)
    }

    .sc-node.act .sc-node-icon {
      background: rgba(16, 185, 129, .12)
    }

    .sc-node.stop {
      background: rgba(239, 68, 68, .05);
      border: 1px solid rgba(239, 68, 68, .18);
      color: #F87171
    }

    .sc-node.stop .sc-node-icon {
      background: rgba(239, 68, 68, .12)
    }

    .sc-conn {
      width: 1.5px;
      height: 10px;
      background: rgba(255, 255, 255, .08);
      margin-left: 22px
    }

    /* backtest metrics */
    .sc-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px
    }

    .sc-metric {
      background: rgba(0, 0, 0, .3);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 10px;
      padding: 12px
    }

    .sc-metric-val {
      font-family: 'Geist Mono', monospace;
      font-size: 22px;
      font-weight: 700;
      line-height: 1
    }

    .sc-metric-lbl {
      font-size: 10px;
      color: var(--t3);
      margin-top: 4px;
      font-family: 'Geist Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    /* live trades */
    .sc-trade {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-radius: 8px;
      background: rgba(0, 0, 0, .3);
      border: 1px solid rgba(255, 255, 255, .05);
      margin-bottom: 6px;
      font-size: 12px;
      font-family: 'Geist Mono', monospace;
    }

    .sc-trade-side {
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      flex-shrink: 0
    }

    .sc-trade-side.b {
      background: rgba(0, 212, 255, .12);
      color: var(--cyan)
    }

    .sc-trade-side.s {
      background: rgba(239, 68, 68, .12);
      color: #F87171
    }

    .sc-trade-pair {
      color: var(--t1);
      font-weight: 600;
      flex: 1;
      margin: 0 10px
    }

    .sc-trade-time {
      color: var(--t3);
      font-size: 10px
    }

    .sc-trade-pnl {
      font-weight: 700
    }

    .sc-trade-pnl.g {
      color: var(--green)
    }

    .sc-trade-pnl.r {
      color: #F87171
    }

    .sc-live-sum {
      margin-top: 10px;
      padding: 10px 12px;
      background: rgba(245, 158, 11, .07);
      border: 1px solid rgba(245, 158, 11, .16);
      border-radius: 8px;
      font-family: 'Geist Mono', monospace;
      font-size: 12px;
      color: var(--amber);
    }

    /* spacer after stack scene */
    .stack-end {
      height: 80px;
      background: var(--bg)
    }

    /* ── TESTIMONIALS ── */
    #testi {
      background: var(--bg2);
      overflow: hidden;
    }

    /* ── CAROUSEL wrapper ── */
    .testi-carousel {
      position: relative;
      margin-top: 50px;
      /* fade only left/right edges, never clip top/bottom */
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    }

    .testi-track-wrap {
      overflow: hidden;
      /* vertical breathing room so hover lift and crystal top-line don't get clipped */
      padding: 12px 0 8px;
      margin: -12px 0 -8px;
    }

    .testi-track {
      display: flex;
      align-items: stretch;
      gap: 20px;
      width: max-content;
      animation: testiScroll 48s linear infinite;
    }

    .testi-track:hover {
      animation-play-state: paused;
    }

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

    /* Each card — same height, content pushes footer to bottom */
    .tc {
      border-radius: 16px;
      padding: 28px;
      transition: transform .3s, border-color .3s;
      position: relative;
      overflow: hidden;
      width: 340px;
      flex-shrink: 0;
      cursor: default;
      display: flex;
      flex-direction: column;
    }

    /* Quote grows to fill space, author stays at bottom */
    .tq { flex: 1; }

    .tc:hover {
      transform: translateY(-5px);
    }

    .stars {
      color: var(--amber);
      font-size: 13px;
      letter-spacing: 2px;
      margin-bottom: 14px;
    }

    .tq {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.72;
      font-style: italic;
      margin-bottom: 20px;
    }

    .tm {
      border-radius: 8px;
      padding: 9px 13px;
      margin-bottom: 18px;
      font-family: var(--fm);
      font-size: 12px;
    }

    .tm.g {
      background: rgba(16, 185, 129, .07);
      border: 1px solid rgba(16, 185, 129, .14);
      color: var(--green);
    }

    .tm.v {
      background: rgba(124, 58, 237, .07);
      border: 1px solid rgba(124, 58, 237, .14);
      color: #A78BFA;
    }

    .tm.c {
      background: rgba(0, 212, 255, .07);
      border: 1px solid rgba(0, 212, 255, .14);
      color: var(--cyan);
    }

    .tm.a {
      background: rgba(245, 158, 11, .07);
      border: 1px solid rgba(245, 158, 11, .14);
      color: var(--amber);
    }

    .ta {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--fd);
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .av1 { background: linear-gradient(135deg, var(--cyan), #006699); color: #080C14; }
    .av2 { background: linear-gradient(135deg, var(--amber), #D97706); color: #080C14; }
    .av3 { background: linear-gradient(135deg, var(--violet), #4C1D95); color: #F8FAFC; }
    .av4 { background: linear-gradient(135deg, var(--green), #065F46); color: #F8FAFC; }
    .av5 { background: linear-gradient(135deg, #F43F5E, #9F1239); color: #F8FAFC; }
    .av6 { background: linear-gradient(135deg, #06B6D4, #0369A1); color: #080C14; }
    .av7 { background: linear-gradient(135deg, #8B5CF6, #5B21B6); color: #F8FAFC; }
    .av8 { background: linear-gradient(135deg, var(--amber), #92400E); color: #080C14; }
    .av9 { background: linear-gradient(135deg, #10B981, #134E4A); color: #F8FAFC; }
    .av10{ background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #080C14; }

    .ta-n { font-size: 14px; font-weight: 600; }
    .ta-r { font-size: 12px; color: var(--t3); }

    /* ── METRICS ── */
    #metrics {
      background: linear-gradient(180deg, var(--bg), var(--bg2));
      padding: 80px 0
    }

    .met-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr)
    }

    .met-col {
      text-align: center;
      padding: 32px 16px;
      border-right: 1px solid var(--border)
    }

    .met-col:last-child {
      border-right: none
    }

    .met-big {
      font-family: var(--fd);
      font-size: clamp(40px, 4vw, 58px);
      font-weight: 800;
      line-height: 1
    }

    .met-desc {
      font-size: 14px;
      color: var(--t3);
      margin-top: 8px
    }

    /* ── MARQUEE ── */
    .marquee-wrap {
      overflow: hidden;
      padding: 28px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: rgba(0, 212, 255, .02)
    }

    .marquee-track {
      display: flex;
      gap: 48px;
      white-space: nowrap;
      animation: marquee 22s linear infinite
    }

    .marquee-track:hover {
      animation-play-state: paused
    }

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

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

    .mq-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--fm);
      font-size: 13px;
      color: var(--t3);
      opacity: .5;
      flex-shrink: 0
    }

    .mq-dot {
      width: 4px;
      height: 4px;
      background: var(--cyan);
      border-radius: 50%
    }

    /* ── MARKETPLACE ── */
    #market {
      background: var(--bg);
      overflow: hidden;
      position: relative
    }

    /* ambient glow behind the whole section */
    #market::before {
      content: '';
      position: absolute;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, rgba(245, 158, 11, .06) 0%, transparent 65%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* ── TOP ROW: two columns ── */
    .mkt-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
      margin-top: 56px;
    }

    /* LEFT col — browser pill */
    .mkt-left {}

    .mkt-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(245, 158, 11, .07);
      border: 1px solid rgba(245, 158, 11, .18);
      border-radius: 8px;
      padding: 7px 14px;
      margin-bottom: 20px;
      font-size: 12px;
      font-weight: 600;
      color: var(--amber);
      letter-spacing: .02em;
    }

    .mkt-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 8px var(--amber);
      animation: pulse 2s ease infinite
    }

    .mkt-left-h {
      font-family: 'Geist', sans-serif;
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.15;
      margin-bottom: 14px
    }

    .mkt-left-p {
      font-size: 15px;
      color: var(--t2);
      line-height: 1.75;
      letter-spacing: -.01em;
      margin-bottom: 28px;
      max-width: 400px
    }

    /* strategy cards browser */
    .mkt-browser {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
      /* crystal handles bg + border */
    }

    .mkt-browser-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: #0A0F1C;
      border-bottom: 1px solid var(--border);
    }

    .mkt-browser-dots {
      display: flex;
      gap: 5px
    }

    .mbd {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .mbd.r {
      background: #FF5F57
    }

    .mbd.y {
      background: #FFBD2E
    }

    .mbd.g {
      background: #28C840
    }

    .mkt-browser-tabs {
      display: flex;
      gap: 2px;
      margin-left: auto;
      align-items: center;
    }

    .mbt {
      padding: 5px 14px;
      border-radius: 6px;
      font-size: 11px;
      font-family: 'Geist Mono', monospace;
      cursor: none;
      transition: all .2s;
      border: 1px solid transparent;
      color: var(--t3);
    }

    .mbt.on {
      background: rgba(0, 212, 255, .08);
      border-color: rgba(0, 212, 255, .15);
      color: var(--cyan)
    }

    .mbt:hover:not(.on) {
      color: var(--t2);
      background: rgba(255, 255, 255, .03)
    }

    .mkt-browser-body {
      padding: 16px
    }

    /* strategy cards inside browser */
    .mkt-strat-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .mkt-strat {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      background: var(--bg3);
      border: 1px solid var(--border);
      cursor: none;
      transition: border-color .25s, transform .2s;
      position: relative;
      overflow: hidden;
    }

    .mkt-strat::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 212, 255, .03), transparent);
      opacity: 0;
      transition: opacity .25s;
    }

    .mkt-strat:hover {
      border-color: rgba(0, 212, 255, .2);
      transform: translateX(3px)
    }

    .mkt-strat:hover::before {
      opacity: 1
    }

    .ms-avatar {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .ms-info {
      min-width: 0;
    }

    .ms-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ms-author {
      font-size: 11px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace
    }

    .ms-ret {
      font-family: 'Geist Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      text-align: right;
    }

    .ms-ret.g {
      color: var(--green)
    }

    .ms-ret.r {
      color: var(--red)
    }

    .ms-price {
      font-size: 11px;
      font-family: 'Geist Mono', monospace;
      color: var(--t3);
      text-align: right;
    }

    .ms-subs {
      font-size: 10px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-top: 2px;
      text-align: right;
    }

    .ms-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      min-width: 110px;
      text-align: right;
    }

    /* ── RIGHT COL — MONETIZE HERO CARD ── */
    .mkt-right {}

    .mkt-creator-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #1C1828 0%, #201535 40%, #1A1625 100%);
      border: 1px solid rgba(124, 58, 237, .25);
      border-radius: 20px;
      padding: 36px;
      box-shadow: 0 0 0 1px rgba(124, 58, 237, .08), 0 32px 80px rgba(0, 0, 0, .45);
    }

    /* animated background glow */
    .mkt-creator-card::before {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(124, 58, 237, .12) 0%, transparent 60%);
      top: -100px;
      right: -100px;
      pointer-events: none;
      animation: slowSpin 20s linear infinite;
    }

    @keyframes slowSpin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    .mkt-creator-card::after {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(245, 158, 11, .07) 0%, transparent 60%);
      bottom: -80px;
      left: -60px;
      pointer-events: none;
    }

    .mcc-inner {
      position: relative;
      z-index: 1
    }

    /* top badge row */
    .mcc-badges {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap
    }

    .mcc-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
    }

    .mcc-badge.amber {
      background: rgba(245, 158, 11, .1);
      border: 1px solid rgba(245, 158, 11, .22);
      color: var(--amber)
    }

    .mcc-badge.green {
      background: rgba(124, 58, 237, .1);
      border: 1px solid rgba(124, 58, 237, .22);
      color: #A78BFA
    }

    .mcc-badge-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%
    }

    .mcc-h {
      font-family: 'Geist', sans-serif;
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1.1;
      color: var(--t1);
      margin-bottom: 12px;
    }

    .mcc-sub {
      font-size: 15px;
      color: var(--t2);
      line-height: 1.65;
      letter-spacing: -.01em;
      margin-bottom: 28px
    }

    /* INCOME SIMULATOR — the interactive star of the show */
    .income-sim {
      background: rgba(0, 0, 0, .35);
      border: 1px solid rgba(16, 185, 129, .15);
      border-radius: 14px;
      padding: 24px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }

    .income-sim::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .4), transparent);
    }

    .sim-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-bottom: 16px
    }

    /* slider custom */
    .sim-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px
    }

    .sim-control {}

    .sim-control-label {
      font-size: 11px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between
    }

    .sim-control-val {
      color: #A78BFA;
      font-weight: 700
    }

    input.sim-slider {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255, 255, 255, .08);
      border-radius: 2px;
      outline: none;
      cursor: none;
    }

    input.sim-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 12px rgba(16, 185, 129, .6);
      cursor: none;
      transition: transform .15s;
    }

    input.sim-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2)
    }

    input.sim-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      background: var(--green);
      box-shadow: 0 0 12px rgba(16, 185, 129, .6);
    }

    /* result display */
    .sim-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: rgba(124, 58, 237, .07);
      border: 1px solid rgba(124, 58, 237, .18);
      border-radius: 10px;
    }

    .sim-result-left {}

    .sim-result-label {
      font-size: 11px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 4px
    }

    .sim-result-amount {
      font-family: 'Geist', sans-serif;
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -.04em;
      color: #A78BFA;
      line-height: 1;
    }

    .sim-result-period {
      font-size: 12px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-top: 3px
    }

    .sim-result-right {
      text-align: right
    }

    .sim-result-annual {
      font-family: 'Geist', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--t2);
      letter-spacing: -.02em
    }

    .sim-result-annual-lbl {
      font-size: 10px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-top: 2px
    }

    /* breakdown mini */
    .sim-breakdown {
      display: flex;
      gap: 10px;
      margin-top: 12px
    }

    .sim-bd-item {
      flex: 1;
      background: rgba(0, 0, 0, .3);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 8px;
      padding: 10px 12px;
      text-align: center;
    }

    .sim-bd-val {
      font-family: 'Geist Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--t1)
    }

    .sim-bd-lbl {
      font-size: 10px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-top: 3px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    /* checklist */
    .mcc-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px
    }

    .mcc-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;
      color: var(--t2);
      line-height: 1.5
    }

    .mcc-check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(124, 58, 237, .12);
      border: 1px solid rgba(124, 58, 237, .25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: #A78BFA;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* CTA button */
    .mcc-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 16px;
      border-radius: 12px;
      background: var(--violet);
      color: #F8FAFC;
      font-family: 'Geist', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.01em;
      border: none;
      cursor: none;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s, background .2s;
      box-shadow: 0 0 40px rgba(124, 58, 237, .28);
      position: relative;
      overflow: hidden;
    }

    .mcc-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
      transform: translateX(-100%);
      transition: transform .5s ease;
    }

    .mcc-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 56px rgba(16, 185, 129, .45);
      background: #13D492
    }

    .mcc-cta:hover::before {
      transform: translateX(100%)
    }

    .mcc-cta-arrow {
      font-size: 18px;
      transition: transform .2s
    }

    .mcc-cta:hover .mcc-cta-arrow {
      transform: translateX(4px)
    }

    /* top creators live feed */
    .mkt-creators-feed {
      margin-top: 56px
    }

    .mkt-feed-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin-bottom: 20px
    }

    .mkt-feed-title {
      font-family: 'Geist', sans-serif;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .mkt-feed-live {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #A78BFA;
      font-family: 'Geist Mono', monospace
    }

    .mkt-feed-live-dot {
      width: 7px;
      height: 7px;
      background: #A78BFA;
      border-radius: 50%;
      box-shadow: 0 0 8px #A78BFA;
      animation: pulse 1.5s ease infinite
    }

    .mkt-feed-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .mkt-creator-tile {
      border-radius: 14px;
      padding: 20px 18px;
      text-align: center;
      transition: border-color .25s, transform .25s;
      cursor: none;
      position: relative;
      overflow: hidden;
      /* crystal handles bg + border */
    }

    .mkt-creator-tile::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--green), transparent);
      transform: scaleX(0);
      transition: transform .3s;
      z-index: 2;
    }

    .mkt-creator-tile:hover {
      transform: translateY(-4px)
    }

    .mkt-creator-tile:hover::before {
      transform: scaleX(1)
    }

    .mct-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Geist', sans-serif;
      font-size: 20px;
      font-weight: 700;
      border: 2px solid var(--border);
    }

    .mct-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 2px
    }

    .mct-strats {
      font-size: 11px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-bottom: 12px
    }

    .mct-earnings {
      font-family: 'Geist', sans-serif;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -.03em;
      color: #A78BFA;
    }

    .mct-earnings-lbl {
      font-size: 10px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      margin-top: 2px
    }

    /* ── BILLING TOGGLE ── */
    .billing-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 100px;
      padding: 4px;
      margin-bottom: 48px;
      width: fit-content;
      margin-inline: auto;
    }

    .bill-opt {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px;
      border-radius: 100px;
      border: none;
      background: transparent;
      color: var(--t3);
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      cursor: none;
      transition: color .2s, background .2s;
    }

    .bill-opt.active {
      background: rgba(255,255,255,.08);
      color: var(--t1);
    }

    .bill-save-badge {
      display: inline-flex;
      align-items: center;
      background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.25);
      color: var(--green);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 100px;
      letter-spacing: .01em;
    }

    .plan-annual-note {
      font-size: 12px;
      color: var(--green);
      font-family: 'Geist Mono', monospace;
      min-height: 18px;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    /* ── PRICING ── */
    #pricing {
      background: var(--bg2)
    }

    /* wallet bar */
    .wallet-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 212, 255, .04);
      border: 1px solid rgba(0, 212, 255, .12);
      border-radius: 12px;
      padding: 14px 20px;
      margin-bottom: 48px;
    }

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

    .wallet-icon {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: rgba(0, 212, 255, .1);
      border: 1px solid rgba(0, 212, 255, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0
    }

    .wallet-lbl {
      font-size: 11px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 2px
    }

    .wallet-val {
      font-family: 'Geist Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      color: var(--cyan)
    }

    .wallet-right {
      font-size: 12px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace
    }

    .wallet-right strong {
      color: var(--t2)
    }

    /* plans grid */
    .plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: start
    }

    /* plan card base */
    .plan {
      border-radius: 20px;
      padding: 32px;
      position: relative;
      transition: transform .3s;
      /* crystal handles bg + border */
    }

    .plan:hover {
      transform: translateY(-4px)
    }

    /* featured plan — Pro */
    .plan.feat {
      background: rgba(0, 212, 255, .05);
      border: 1px solid rgba(0, 212, 255, .3);
    }

    .plan.feat::before {
      display: none;
    }

    /* ── BILLING TOGGLE ── */
    .billing-toggle {
      display: flex;
      align-items: center;
      gap: 0;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 100px;
      padding: 4px;
      margin-bottom: 44px;
      width: fit-content;
      margin-inline: auto;
    }

    .bt-opt {
      padding: 8px 22px;
      border-radius: 100px;
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      color: var(--t3);
      cursor: none;
      transition: all .2s;
      position: relative;
      white-space: nowrap;
    }

    .bt-opt.active {
      background: var(--bg3);
      color: var(--t1);
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }

    .bt-save {
      display: inline-flex;
      align-items: center;
      margin-left: 8px;
      background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.25);
      color: var(--green);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 9px;
      border-radius: 100px;
      letter-spacing: .01em;
    }

    .plan-price-orig {
      font-size: 13px;
      color: var(--t3);
      text-decoration: line-through;
      margin-right: 6px;
      font-family: 'Geist Mono', monospace;
    }

    .plan-annual-note {
      font-size: 11px;
      color: var(--green);
      font-family: 'Geist Mono', monospace;
      margin-top: 2px;
      height: 16px;
      transition: opacity .2s;
    }

    .plan-pop { display: none; }

    /* elite plan */
    .plan.elite {
      border-color: rgba(245, 158, 11, .15)
    }

    .plan.elite:hover {
      border-color: rgba(245, 158, 11, .3)
    }

    /* plan header */
    .plan-emoji {
      font-size: 24px;
      margin-bottom: 10px;
      display: block
    }

    .plan-name {
      font-family: 'Geist', sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--t3);
      margin-bottom: 4px;
    }

    .plan-credits {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-family: 'Geist Mono', monospace;
      color: var(--amber);
      margin-bottom: 16px;
    }

    .plan-credits-dot {
      width: 5px;
      height: 5px;
      background: var(--amber);
      border-radius: 50%
    }

    .plan-tagline {
      font-size: 12px;
      color: var(--t3);
      line-height: 1.5;
      margin-bottom: 20px;
      letter-spacing: -.005em
    }

    /* price */
    .plan-price-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 4px
    }

    .plan-price-num {
      font-family: 'Geist', sans-serif;
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1;
    }

    .plan-price-cur {
      font-size: 20px;
      color: var(--t3);
      font-weight: 400;
      align-self: flex-start;
      margin-top: 8px
    }

    .plan-price-per {
      font-size: 14px;
      color: var(--t3);
      font-weight: 400
    }

    .plan-price-free {
      font-family: 'Geist', sans-serif;
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--t1);
    }

    .plan-div {
      height: 1px;
      background: var(--border);
      margin: 22px 0
    }

    /* features */
    .plan-feats {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 28px
    }

    .plan-feats li {
      display: flex;
      gap: 10px;
      font-size: 13px;
      color: var(--t2);
      align-items: flex-start;
      line-height: 1.45;
    }

    .pf-check {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .pf-check.on {
      background: rgba(16, 185, 129, .15);
      color: var(--green);
      border: 1px solid rgba(16, 185, 129, .25)
    }

    .pf-check.off {
      background: rgba(255, 255, 255, .04);
      color: var(--t3);
      border: 1px solid var(--border)
    }

    .pf-credit {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-family: 'Geist Mono', monospace;
      color: var(--amber);
      background: rgba(245, 158, 11, .07);
      border: 1px solid rgba(245, 158, 11, .15);
      border-radius: 4px;
      padding: 1px 6px;
      margin-left: 4px;
      white-space: nowrap;
    }

    /* plan buttons */
    .btn-plan {
      width: 100%;
      padding: 13px;
      border-radius: 10px;
      font-family: 'Geist', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.01em;
      cursor: none;
      border: none;
      transition: transform .2s, box-shadow .2s, background .2s;
    }

    .bp-free {
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--border);
      color: var(--t2)
    }

    .bp-free:hover {
      border-color: rgba(255, 255, 255, .15);
      color: var(--t1)
    }

    .bp-pro {
      background: var(--cyan);
      color: #080C14;
      box-shadow: 0 0 28px rgba(0, 212, 255, .2)
    }

    .bp-pro:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 48px rgba(0, 212, 255, .38);
      background: #19DAFF
    }

    .bp-elite {
      background: rgba(245, 158, 11, .1);
      border: 1px solid rgba(245, 158, 11, .25);
      color: var(--amber)
    }

    .bp-elite:hover {
      background: rgba(245, 158, 11, .18);
      transform: translateY(-2px)
    }

    .bp-current {
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      color: var(--t3);
      cursor: default
    }

    .pricing-trust {
      text-align: center;
      margin-top: 28px;
      font-size: 13px;
      color: var(--t3)
    }

    .pricing-trust span {
      margin: 0 10px
    }

    /* ── CREDITS TABLE ── */
    .credits-section {
      margin-top: 72px
    }

    .credits-header {
      text-align: center;
      margin-bottom: 40px
    }

    .credits-intro {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      margin-bottom: 10px;
    }

    .credits-coin {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--amber), #D97706);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 0 20px rgba(245, 158, 11, .3);
    }

    .credits-subtitle {
      font-size: 15px;
      color: var(--t2);
      margin-top: 8px
    }

    .credits-rate {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(245, 158, 11, .07);
      border: 1px solid rgba(245, 158, 11, .18);
      border-radius: 8px;
      padding: 8px 16px;
      margin-top: 16px;
      font-family: 'Geist Mono', monospace;
      font-size: 13px;
      color: var(--amber);
    }

    .credits-table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 16px;
      overflow: hidden;
      /* crystal handles bg + border */
    }

    .credits-table thead tr {
      background: rgba(255, 255, 255, .03);
      border-bottom: 1px solid var(--border)
    }

    .credits-table th {
      padding: 14px 20px;
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
    }

    .credits-table tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .2s;
    }

    .credits-table tbody tr:last-child {
      border-bottom: none
    }

    .credits-table tbody tr:hover {
      background: rgba(255, 255, 255, .02)
    }

    .credits-table td {
      padding: 16px 20px;
      font-size: 14px;
      color: var(--t2);
      vertical-align: middle;
    }

    .ct-action {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--t1);
      font-weight: 500
    }

    .ct-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    .ct-cost {
      font-family: 'Geist Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--amber);
      white-space: nowrap;
    }

    .ct-cost.recurring {
      color: var(--cyan)
    }

    .ct-cost.onetime {
      color: #A78BFA
    }

    .credits-tip {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: rgba(245, 158, 11, .05);
      border: 1px solid rgba(245, 158, 11, .15);
      border-radius: 12px;
      padding: 16px 20px;
      margin-top: 20px;
      font-size: 14px;
      color: var(--t2);
      line-height: 1.6;
    }

    .credits-tip-icon {
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 1px
    }

    /* ── FAQ ── */
    #faq {
      background: var(--bg)
    }

    .faq-list {
      max-width: 760px;
      margin: 50px auto 0
    }

    /* FAQ — crystal handles the border/bg, just keep the bottom separator */
    .fi {
      padding: 0 16px;
    }

    .fi+.fi {
      margin-top: 2px;
    }

    .fq {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 0;
      cursor: none;
      font-size: 16px;
      font-weight: 500;
      color: var(--t1);
      gap: 20px;
      user-select: none;
      transition: color .2s
    }

    .fq:hover {
      color: var(--cyan)
    }

    .fi-icon {
      width: 28px;
      height: 28px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--t3);
      flex-shrink: 0;
      transition: transform .3s, background .3s, color .3s
    }

    .fi.open .fi-icon {
      transform: rotate(45deg);
      background: rgba(0, 212, 255, .08);
      color: var(--cyan);
      border-color: rgba(0, 212, 255, .2)
    }

    .fa {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, padding .3s;
      font-size: 15px;
      color: var(--t2);
      line-height: 1.78
    }

    .fi.open .fa {
      max-height: 300px;
      padding-bottom: 22px
    }

    /* ════════════════════════════════════════
   CTA FINAL — style closing section
════════════════════════════════════════ */
    #cta-end {
      position: relative;
      background: #111111;
      /* casi negro absoluto — más oscuro que el resto */
      overflow: hidden;
      padding: 0;
    }

    /* ── GRID DE FONDO (más técnica y de trading) ── */
    /* ── GLOWS MULTICAPA ── */
    .cta-glow-main {
      position: absolute;
      width: 900px;
      height: 600px;
      background: radial-gradient(ellipse, rgba(0, 212, 255, .1) 0%, rgba(124, 58, 237, .06) 40%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      animation: ctaGlowPulse 6s ease-in-out infinite;
    }

    @keyframes ctaGlowPulse {

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

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06)
      }
    }

    .cta-glow-left {
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(0, 212, 255, .07), transparent 65%);
      top: 0;
      left: -100px;
      pointer-events: none;
      z-index: 0;
    }

    .cta-glow-right {
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(124, 58, 237, .08), transparent 65%);
      bottom: 0;
      right: -80px;
      pointer-events: none;
      z-index: 0;
    }

    /* ── FLOATING PARTICLES FIELD ── */
    #cta-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden
    }

    /* ── INNER LAYOUT — split: left copy / right image ── */
    .cta-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      padding: 120px 28px 100px;
      max-width: 1160px;
      margin: 0 auto;
    }

    .cta-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .cta-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .cta-visual-wrap {
      position: relative;
      width: 110%;
      max-width: 560px;
      margin-right: -28px;
    }

    .cta-visual-img {
      width: 100%;
      height: auto;
      display: block;
      /* image has black bg — blend it seamlessly */
      mix-blend-mode: lighten;
      filter: contrast(1.05) brightness(1.08);
    }

    /* Glow behind the image */
    .cta-visual-wrap::before {
      content: '';
      position: absolute;
      inset: -20%;
      background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0,212,255,.12), transparent 65%);
      pointer-events: none;
      z-index: -1;
    }

    /* ── BADGE TOP ── */
    .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 212, 255, .07);
      border: 1px solid rgba(0, 212, 255, .18);
      border-radius: 6px;
      padding: 6px 16px;
      margin-bottom: 36px;
      font-size: 12px;
      font-weight: 500;
      color: var(--cyan);
      letter-spacing: .02em;
      font-family: 'Geist', sans-serif;
    }

    .cta-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 8px var(--cyan);
      animation: pulse 2s ease infinite;
    }

    /* ── HEADLINE — el protagonista absoluto ── */
    .cta-headline {
      font-family: 'Geist', sans-serif;
      font-size: clamp(52px, 8.5vw, 112px);
      /* MUCHO más grande */
      font-weight: 800;
      line-height: .98;
      letter-spacing: -.045em;
      color: var(--t1);
      margin-bottom: 0;
      /* efecto de profundidad con text-shadow */
      text-shadow: 0 0 80px rgba(0, 212, 255, .12);
    }

    .cta-headline .line-dim {
      color: rgba(248, 250, 252, .35);
      /* línea atenuada */
      display: block;
    }

    .cta-headline .line-bright {
      display: block;
      background: linear-gradient(135deg, #F8FAFC 0%, rgba(248, 250, 252, .85) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta-headline .line-grad {
      display: block;
      background: linear-gradient(135deg, var(--cyan) 0%, #00AACC 40%, var(--violet) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 40px rgba(0, 212, 255, .3));
    }

    /* ── SUBLINE ── */
    .cta-sub {
      font-size: clamp(15px, 1.6vw, 18px);
      color: rgba(148, 163, 184, .7);
      max-width: 460px;
      line-height: 1.7;
      margin: 28px 0 44px;
      letter-spacing: -.01em;
      font-weight: 400;
    }

    /* ── CTA BUTTONS ── */
    .cta-actions {
      display: flex;
      gap: 14px;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 20px;
      width: 100%;
    }

    .btn-cta-final {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      background: var(--cyan);
      color: #02060E;
      font-family: 'Geist', sans-serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.02em;
      padding: 18px 40px;
      border-radius: 10px;
      border: none;
      cursor: none;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s, background .2s;
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .3), 0 0 60px rgba(0, 212, 255, .25);
      position: relative;
      overflow: hidden;
    }

    .btn-cta-final::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
      transform: translateX(-100%);
      transition: transform .55s ease;
    }

    .btn-cta-final:hover {
      transform: translateY(-3px);
      box-shadow: 0 0 0 1px rgba(0, 212, 255, .5), 0 12px 80px rgba(0, 212, 255, .45);
      background: #19DAFF;
    }

    .btn-cta-final:hover::before {
      transform: translateX(100%)
    }

    .btn-cta-final-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(2, 6, 14, .2);
      font-size: 14px;
      transition: transform .2s;
      flex-shrink: 0;
    }

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

    .btn-cta-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      background: transparent;
      color: rgba(248, 250, 252, .6);
      font-family: 'Geist', sans-serif;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: -.015em;
      padding: 18px 28px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .1);
      cursor: none;
      text-decoration: none;
      transition: all .2s;
    }

    .btn-cta-ghost:hover {
      color: var(--t1);
      border-color: rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .04);
    }

    /* ── TRUST ROW ── */
    .cta-trust {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: flex-start;
      font-size: 13px;
      color: rgba(71, 85, 105, .7);
      letter-spacing: -.005em;
    }

    .cta-trust-item {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .cta-trust-item span:first-child {
      color: rgba(16, 185, 129, .7)
    }

    /* ── STATS BAR ── */
    .cta-stats {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      margin-bottom: 48px;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12px;
      background: rgba(255, 255, 255, .02);
      backdrop-filter: blur(8px);
      overflow: hidden;
      width: 100%;
    }

    .cta-stat {
      flex: 1;
      min-width: 0;
      padding: 16px 20px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, .06);
      position: relative;
    }

    .cta-stat:last-child {
      border-right: none;
    }

    .cta-stat-val {
      font-family: 'Geist', sans-serif;
      font-size: clamp(18px, 2vw, 26px);
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
      background: linear-gradient(135deg, var(--t1), rgba(248, 250, 252, .7));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cta-stat-lbl {
      font-size: 10px;
      color: rgba(71, 85, 105, .8);
      margin-top: 4px;
      font-family: 'Geist Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    /* ── SEPARATOR LINE antes del footer ── */
    .cta-bottom-line {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .2), rgba(124, 58, 237, .15), transparent);
    }

    /* Responsive CTA */
    @media(max-width:900px) {
      .cta-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 80px 20px 60px;
      }
      .cta-right { display: none; }
      .cta-left { align-items: flex-start; }
    }

    @media(max-width:600px) {
      .cta-headline {
        font-size: clamp(40px, 12vw, 72px);
      }
      .cta-stats {
        flex-direction: column;
        gap: 0;
      }
      .cta-stat {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        padding: 14px 16px;
      }
      .cta-stat:last-child { border-bottom: none; }
      .cta-actions {
        flex-direction: column;
        align-items: stretch;
      }
      .btn-cta-final, .btn-cta-ghost { justify-content: center; }
    }

    /* ── FOOTER ── */
    /* ══════════════════════════════════════
   FOOTER — floating glass,
   No llega a los extremos, mismo sistema
   que el nav: wrapper + píldora flotante
══════════════════════════════════════ */
    footer {
      background: transparent;
      padding: 0 24px 28px;
      position: relative;
      z-index: 1;
    }

    /* The floating glass footer card */
    .ft-card {
      max-width: 1080px;
      margin: 0 auto;
      border-radius: 20px;
      padding: 48px 48px 28px;
      background: rgba(26, 26, 26, .75);
      border: 1px solid rgba(255, 255, 255, .07);
      backdrop-filter: blur(24px) saturate(1.5);
      -webkit-backdrop-filter: blur(24px) saturate(1.5);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(0, 0, 0, .3),
        0 -4px 40px rgba(0, 0, 0, .3),
        0 0 0 1px rgba(255, 255, 255, .03);
      position: relative;
      overflow: hidden;
    }

    /* top shimmer */
    .ft-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, .1) 30%,
          rgba(255, 255, 255, .18) 50%,
          rgba(255, 255, 255, .1) 70%,
          transparent);
      pointer-events: none;
    }

    .ft-g {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 40px
    }

    .ft-brand p {
      font-size: 14px;
      color: var(--t3);
      line-height: 1.7;
      margin-top: 12px;
      max-width: 240px
    }

    .ft-col h4 {
      font-family: 'Geist', sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(148, 163, 184, .5);
      margin-bottom: 16px
    }

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

    .ft-col ul li a {
      text-decoration: none;
      font-size: 13.5px;
      color: var(--t3);
      transition: color .15s;
      letter-spacing: -.01em
    }

    .ft-col ul li a:hover {
      color: var(--t1)
    }

    /* divider */
    .ft-div {
      height: 1px;
      background: rgba(255, 255, 255, .06);
      margin-bottom: 22px
    }

    .ft-bot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: rgba(71, 85, 105, .7);
      flex-wrap: wrap;
      gap: 12px;
    }

    .ft-disc {
      max-width: 560px;
      line-height: 1.5;
      font-size: 11px
    }

    .ft-sub {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding: 32px 36px;
      border-radius: 14px;
      background: rgba(0, 212, 255, .04);
      border: 1px solid rgba(0, 212, 255, .12);
      margin-bottom: 36px;
      position: relative;
      overflow: hidden;
    }

    .ft-sub::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(0,212,255,.07) 0%, transparent 70%);
      pointer-events: none;
    }

    .ft-sub-copy {
      flex: 1;
      min-width: 0;
    }

    .ft-sub-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cyan);
      background: rgba(0,212,255,.1);
      border: 1px solid rgba(0,212,255,.2);
      border-radius: 4px;
      padding: 3px 8px;
      margin-bottom: 10px;
    }

    .ft-sub-title {
      font-size: clamp(15px, 1.6vw, 18px);
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.02em;
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .ft-sub-desc {
      font-size: 13px;
      color: var(--t3);
      line-height: 1.6;
      max-width: 340px;
    }

    .ft-sub-right {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 300px;
    }

    .ft-sub-form {
      display: flex;
      gap: 8px;
    }

    .ft-sub-input-wrap {
      display: flex;
      align-items: center;
      gap: 9px;
      flex: 1;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 8px;
      padding: 0 13px;
      transition: border-color .2s;
    }

    .ft-sub-input-wrap:focus-within {
      border-color: rgba(0,212,255,.4);
      background: rgba(0,212,255,.04);
    }

    .ft-sub-input {
      background: transparent;
      border: none;
      outline: none;
      font-family: 'Geist', sans-serif;
      font-size: 13.5px;
      color: var(--t1);
      width: 100%;
      padding: 11px 0;
      letter-spacing: -.01em;
    }

    .ft-sub-input::placeholder {
      color: var(--t3);
    }

    .ft-sub-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 11px 18px;
      border-radius: 8px;
      background: var(--cyan);
      color: #07111D;
      border: none;
      font-family: 'Geist', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -.01em;
      white-space: nowrap;
      cursor: none;
      transition: background .15s, box-shadow .15s, transform .1s;
      box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }

    .ft-sub-btn:hover {
      background: #19DAFF;
      box-shadow: 0 0 0 1px rgba(0,212,255,.3), 0 4px 14px rgba(0,212,255,.2);
    }

    .ft-sub-btn:active { transform: scale(.97); }

    .ft-sub-legal {
      font-size: 11px;
      color: var(--t3);
      opacity: .7;
    }

    .ft-sub-success {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      background: rgba(16,185,129,.07);
      border: 1px solid rgba(16,185,129,.2);
    }

    .ft-sub-divider {
      height: 1px;
      background: rgba(255,255,255,.06);
      margin-bottom: 36px;
    }

    @media (max-width: 760px) {
      .ft-sub {
        flex-direction: column;
        gap: 24px;
        padding: 24px 20px;
      }
      .ft-sub-right { min-width: 0; width: 100%; }
      .ft-sub-form { flex-direction: column; }
      .ft-sub-btn { justify-content: center; }
    }

    /* footer section background */
    #footer-wrap {
      background: linear-gradient(to top, #02060E 0%, transparent 100%);
      padding-top: 40px;
    }

    /* ── PARTICLES ── */
    /* ── DISINTEGRATION PARTICLES ── */
    #disintegration-wrap {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
    }

    .dp {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      will-change: transform, opacity;
    }


      position: absolute;
      width: 2px;
      height: 2px;
      background: var(--cyan);
      border-radius: 50%;
      opacity: 0;
      animation: floatP linear infinite
    }

    @keyframes floatP {
      0% {
        opacity: 0;
        transform: translateY(0) translateX(0)
      }

      10% {
        opacity: .22
      }

      90% {
        opacity: .12
      }

      100% {
        opacity: 0;
        transform: translateY(-380px) translateX(30px)
      }
    }

    /* ── PROBLEM DOT NAV (mobile) ── */
    .prob-dot-nav {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 20px 0 4px;
    }

    .prob-dot-btn {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all .3s;
    }

    .prob-dot-btn.on {
      width: 26px;
      border-radius: 4px;
      background: var(--red);
      box-shadow: 0 0 10px rgba(239, 68, 68, .5);
    }

    .prob-mobile-step {
      display: none;
      text-align: center;
      font-size: 11px;
      color: var(--t3);
      font-family: 'Geist Mono', monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding-top: 20px;
    }


    RESPONSIVE — tablet (≤900px) ════════════════════════════════════════ */ @media(max-width:900px) {

      /* NAV floating pill on tablet */
      .nav-links {
        display: none
      }

      nav {
        padding: 12px 16px
      }

      .btn-g {
        display: none
      }

      /* FOOTER floating card */
      .ft-g {
        grid-template-columns: 1fr 1fr
      }

      .ft-brand {
        grid-column: 1/-1
      }

      /* HERO */
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .hero-left {
        align-items: flex-start;
        max-width: 100%;
      }

      .hero-right {
        display: none;
      }

      /* image hidden on tablet — shows on desktop only */

      /* ── PROBLEM — n8n transparent style ── */
      .prob-layout {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .prob-tabs {
        display: none
      }

      .prob-panel {
        min-height: auto
      }

      .prob-view {
        padding: 0
      }

      .pv-stats {
        grid-template-columns: repeat(3, 1fr)
      }

      /* ── STEPS — stacking cards become a simple vertical list ── */
      /* Disable sticky / stacking effect on mobile */
      .scard-wrap {
        position: relative;
        top: auto;
        z-index: auto;
        padding: 0 16px
      }

      .scard-spacer {
        height: 32px
      }

      .scard {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 24px;
        border-radius: 16px;
      }

      .sc-num {
        font-size: 80px
      }

      #steps {
        padding: 80px 0 0
      }

      .steps-header {
        margin-bottom: 48px
      }

      .stack-scene {
        padding-bottom: 48px
      }

      /* ── TESTIMONIALS carousel — no changes needed, works on all sizes ── */
      .testi-carousel {
        mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
      }
      .tc { width: 290px; padding: 22px; }

      /* ── METRICS ── */
      .met-row {
        grid-template-columns: repeat(2, 1fr)
      }

      .met-col {
        border-right: none;
        border-bottom: 1px solid var(--border)
      }

      .met-col:nth-child(odd) {
        border-right: 1px solid var(--border)
      }

      .met-col:last-child {
        border-bottom: none
      }

      /* ── MARKETPLACE ── */
      .mkt-top {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .mkt-left {
        order: 2
      }

      .mkt-right {
        order: 1
      }

      /* creator card FIRST on mobile */
      .mkt-browser {
        margin-top: 0
      }

      .mkt-feed-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
      }

      .sim-controls {
        grid-template-columns: 1fr
      }

      .sim-result {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start
      }

      .sim-bd-item {
        padding: 8px 10px
      }

      .sim-bd-val {
        font-size: 13px
      }

      /* ── PRICING ── */
      .plans {
        grid-template-columns: 1fr
      }

      .plan.feat {
        margin-top: 16px
      }

      /* ── CREDITS TABLE ── */
      .credits-table thead th:last-child {
        display: none
      }

      .credits-table tbody td:last-child {
        display: none
      }

      .credits-table th:nth-child(2),
      .credits-table td:nth-child(2) {
        text-align: right
      }

      /* ── FAQ ── */
      .faq-list {
        margin: 32px 0 0
      }

      /* ── FOOTER ── */
      .ft-g {
        grid-template-columns: 1fr 1fr
      }
    }

    /* ════════════════════════════════════════
   RESPONSIVE — mobile (≤600px)
════════════════════════════════════════ */
    @media(max-width:600px) {

      /* UTILS */
      .wrap {
        padding: 0 18px
      }

      .sec {
        padding: 80px 0
      }

      /* HERO */
      .hero-inner {
        padding: 60px 0 40px
      }

      .hero-ctas {
        flex-direction: column;
        align-items: stretch
      }

      .btn-xl,
      .btn-xl2 {
        width: 100%;
        justify-content: center
      }

      .logos-row2 {
        gap: 16px
      }

      .logo-tag {
        font-size: 10px
      }

      /* PROBLEM — dot navigation */
      .prob-view {
        padding: 22px 18px
      }

      .prob-dot-nav {
        gap: 6px
      }

      .pv-stats {
        grid-template-columns: 1fr
      }

      .emotion-cycle {
        flex-direction: column;
        align-items: center;
        gap: 4px
      }

      .ec-arrow {
        transform: rotate(90deg);
        margin: 0
      }

      /* STEPS */
      .scard {
        padding: 22px 18px;
        gap: 20px
      }

      .sc-num {
        font-size: 64px
      }

      .sc-h {
        font-size: 22px
      }

      .sc-p {
        font-size: 14px
      }

      .sc-metrics {
        grid-template-columns: 1fr 1fr
      }

      .sc-metric-val {
        font-size: 18px
      }

      /* TESTIMONIALS */
      .tc {
        padding: 22px 18px
      }

      /* METRICS */
      .met-row {
        grid-template-columns: 1fr 1fr
      }

      .met-big {
        font-size: 38px
      }

      /* MARKETPLACE */
      .mkt-creator-card {
        padding: 22px 18px
      }

      .mcc-h {
        font-size: 22px
      }

      .sim-breakdown {
        flex-direction: column;
        gap: 6px
      }

      .sim-result-amount {
        font-size: 28px
      }

      .mkt-feed-row {
        grid-template-columns: 1fr 1fr
      }

      .mkt-creator-tile {
        padding: 14px 12px
      }

      .mct-avatar {
        width: 38px;
        height: 38px;
        font-size: 16px
      }

      .mct-earnings {
        font-size: 15px
      }

      .mkt-browser-tabs {
        display: none
      }

      /* tabs hidden on very small, show all trending */
      .mkt-strat {
        grid-template-columns: 32px 1fr auto;
        gap: 8px
      }

      .ms-right {
        min-width: 80px
      }

      .ms-price {
        display: none
      }

      /* price hidden on very small screens */

      /* CREDITS TABLE — card layout on mobile */
      .credits-table {
        display: block
      }

      .credits-table thead {
        display: none
      }

      .credits-table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px
      }

      .credits-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        background: var(--bg3);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px;
      }

      .credits-table td {
        display: block;
        padding: 0;
        border: none;
        font-size: 13px
      }

      .credits-table td:last-child {
        display: none
      }

      /* hide description on mobile */
      .credits-table td:first-child {
        grid-column: 1
      }

      .credits-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .ct-icon {
        width: 28px;
        height: 28px;
        font-size: 13px
      }

      /* PRICING */
      .plan {
        padding: 24px 20px
      }

      .plan-price-num {
        font-size: 40px
      }

      .plan-feats li {
        font-size: 13px
      }

      /* FOOTER */
      .ft-g {
        grid-template-columns: 1fr
      }

      .ft-brand {
        grid-column: auto
      }

      .ft-bot {
        flex-direction: column;
        gap: 10px;
        text-align: center
      }

      .ft-disc {
        max-width: 100%
      }

      footer {
        padding: 0 12px 20px
      }

      .ft-card {
        padding: 32px 20px 22px;
        border-radius: 16px
      }
    }
  </style>