/* ============================================================
     THEME ENGINE
     The whole design is driven by these variables. Each theme
     below only overrides the palette core (bg trio, accents, gold,
     grad). Everything else — glows, soft gradients, tints — is
     DERIVED from the accents via color-mix(), so every component
     recolors automatically. Pick a theme from the top-right dropdown.
     ============================================================ */
  .pu{
    /* ---- DEFAULT: Aurora (theme 1 of 10) ---- */
    --bg:#08080c; --bg-2:#0e0e16; --panel:#13131e; --panel-2:#181826;
    --txt:#f4f4f8; --muted:#9a9ab0; --muted-2:#6f6f86;
    --accent:#a06bff; --accent-2:#ff5ea8; --accent-3:#5ad1ff; --gold:#ffcf6b;
    --grad:linear-gradient(115deg,#a06bff 0%,#ff5ea8 55%,#ff9a5e 100%);

    /* ---- DERIVED (shared by all themes — do not need per-theme edits) ---- */
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
    --fill:var(--fill); --fill-2:var(--fill-2);
    --ok:#4ade80; --shadow:0 24px 70px -20px rgba(0,0,0,.7);
    --grad-soft:linear-gradient(115deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent-2) 14%,transparent));
    --glow-1:color-mix(in srgb,var(--accent) 20%,transparent);
    --glow-2:color-mix(in srgb,var(--accent-2) 15%,transparent);
    --r:18px; --maxw:1120px; font-synthesis:none;
  }

  /* ===================== 10 THEMES ===================== */
  .pu[data-theme="ocean"]{
    --bg:#05080f; --bg-2:#0a1120; --panel:#0f1a2e; --panel-2:#13223b;
    --txt:#eef4fb; --muted:#93a6c4; --muted-2:#63799a;
    --accent:#4f8bff; --accent-2:#2ee6c8; --accent-3:#6fd0ff; --gold:#ffd27a;
    --grad:linear-gradient(115deg,#4f8bff 0%,#2ee6c8 60%,#7af0d4 100%);
  }
  .pu[data-theme="emerald"]{
    --bg:#06100b; --bg-2:#0a1811; --panel:#0f2018; --panel-2:#143024;
    --txt:#eefbf2; --muted:#93c4a6; --muted-2:#5f9077;
    --accent:#34d399; --accent-2:#a3e635; --accent-3:#5eead4; --gold:#ffe08a;
    --grad:linear-gradient(115deg,#34d399 0%,#5eead4 55%,#a3e635 100%);
  }
  .pu[data-theme="sunset"]{
    --bg:#120806; --bg-2:#1c0d08; --panel:#24120c; --panel-2:#301810;
    --txt:#fbeee6; --muted:#c8a493; --muted-2:#916d5f;
    --accent:#ff7a45; --accent-2:#ff4d6d; --accent-3:#ffb45e; --gold:#ffd27a;
    --grad:linear-gradient(115deg,#ff7a45 0%,#ff4d6d 55%,#ffb45e 100%);
  }
  .pu[data-theme="rosegold"]{
    --bg:#100a0c; --bg-2:#1a1013; --panel:#22161a; --panel-2:#2d1c21;
    --txt:#fbf2f0; --muted:#c9a8ad; --muted-2:#8f6d72;
    --accent:#f7a8b8; --accent-2:#e08e6d; --accent-3:#f6c177; --gold:#f6c98a;
    --grad:linear-gradient(115deg,#f7a8b8 0%,#e6a07a 55%,#f6c98a 100%);
  }
  .pu[data-theme="cyber"]{
    --bg:#030305; --bg-2:#07070b; --panel:#0c0c12; --panel-2:#111119;
    --txt:#f2fff6; --muted:#8fbfa2; --muted-2:#5a7a66;
    --accent:#4dff88; --accent-2:#00e5ff; --accent-3:#b026ff; --gold:#eaff00;
    --grad:linear-gradient(115deg,#4dff88 0%,#00e5ff 55%,#b026ff 100%);
  }
  .pu[data-theme="royal"]{
    --bg:#0a0714; --bg-2:#110b22; --panel:#17102f; --panel-2:#1f163d;
    --txt:#f3eefb; --muted:#a897c4; --muted-2:#77638f;
    --accent:#9d5cff; --accent-2:#e05cff; --accent-3:#6f7bff; --gold:#ffd27a;
    --grad:linear-gradient(115deg,#9d5cff 0%,#e05cff 55%,#6f7bff 100%);
  }
  .pu[data-theme="crimson"]{
    --bg:#0c0608; --bg-2:#150a0d; --panel:#1c0e12; --panel-2:#261318;
    --txt:#fbeef0; --muted:#c498a0; --muted-2:#8f636b;
    --accent:#ff3b5c; --accent-2:#ff6b6b; --accent-3:#ff8f70; --gold:#ffcf6b;
    --grad:linear-gradient(115deg,#ff3b5c 0%,#ff6b6b 55%,#ff9a6b 100%);
  }
  .pu[data-theme="arctic"]{
    --bg:#070a0f; --bg-2:#0d131c; --panel:#121a26; --panel-2:#172231;
    --txt:#eef4fb; --muted:#9db2c9; --muted-2:#697e96;
    --accent:#7dd3fc; --accent-2:#c4b5fd; --accent-3:#a5f3fc; --gold:#e2e8f0;
    --grad:linear-gradient(115deg,#7dd3fc 0%,#a5f3fc 55%,#c4b5fd 100%);
  }
  .pu[data-theme="golden"]{
    --bg:#0f0b06; --bg-2:#18110a; --panel:#20160c; --panel-2:#2b1e10;
    --txt:#fbf4e6; --muted:#c9b593; --muted-2:#8f7d5f;
    --accent:#ffc24b; --accent-2:#ff8a3d; --accent-3:#ffde8a; --gold:#ffd27a;
    --grad:linear-gradient(115deg,#ffc24b 0%,#ff8a3d 55%,#ffde8a 100%);
  }
  .pu[data-theme="mono"]{
    --bg:#0a0a0b; --bg-2:#111113; --panel:#161618; --panel-2:#1d1d20;
    --txt:#f5f5f6; --muted:#9d9da3; --muted-2:#6c6c72;
    --accent:#e6e6ea; --accent-2:#9aa0ff; --accent-3:#8fd6ff; --gold:#ffcf6b;
    --grad:linear-gradient(115deg,#e6e6ea 0%,#b8bcff 55%,#8fd6ff 100%);
  }

  /* ============ LIGHT MODE — shared neutrals for all 10 light themes ============ */
  .pu[data-theme="l-clean"],.pu[data-theme="l-sky"],.pu[data-theme="l-mint"],.pu[data-theme="l-peach"],
  .pu[data-theme="l-blush"],.pu[data-theme="l-lavender"],.pu[data-theme="l-coral"],.pu[data-theme="l-sand"],
  .pu[data-theme="l-ice"],.pu[data-theme="l-graphite"]{
    --panel:#ffffff; --panel-2:#f6f7fb;
    --txt:#191922; --muted:#5b5b6a; --muted-2:#9090a0;
    --line:rgba(20,20,45,.10); --line-2:rgba(20,20,45,.16);
    --fill:rgba(20,20,45,.04); --fill-2:rgba(20,20,45,.025);
    --ok:#15803d; --gold:#b7791f;
    --shadow:0 22px 55px -26px rgba(40,30,70,.28);
  }
  /* ---- 10 LIGHT PALETTES (only page bg + accents + grad differ) ---- */
  .pu[data-theme="l-clean"]{ --bg:#f5f5fa; --bg-2:#ececf5;
    --accent:#6d4bff; --accent-2:#db2f8f; --accent-3:#0e97c7;
    --grad:linear-gradient(115deg,#6d4bff 0%,#db2f8f 55%,#f59e0b 100%); }
  .pu[data-theme="l-sky"]{ --bg:#eef5fc; --bg-2:#e2eefa;
    --accent:#1f74e6; --accent-2:#0d9488; --accent-3:#0284c7;
    --grad:linear-gradient(115deg,#1f74e6 0%,#0d9488 55%,#38bdf8 100%); }
  .pu[data-theme="l-mint"]{ --bg:#eef9f1; --bg-2:#e0f3e6;
    --accent:#0f9d6b; --accent-2:#4d9a1a; --accent-3:#0d9488;
    --grad:linear-gradient(115deg,#0f9d6b 0%,#14b8a6 55%,#65a30d 100%); }
  .pu[data-theme="l-peach"]{ --bg:#fdf3ec; --bg-2:#fae6da;
    --accent:#ea6a1e; --accent-2:#e23744; --accent-3:#f59e0b;
    --grad:linear-gradient(115deg,#ea6a1e 0%,#e23744 55%,#f59e0b 100%); }
  .pu[data-theme="l-blush"]{ --bg:#fdf0f4; --bg-2:#fadfe8;
    --accent:#db2777; --accent-2:#e05c8a; --accent-3:#c026d3;
    --grad:linear-gradient(115deg,#db2777 0%,#e05c8a 55%,#f472b6 100%); }
  .pu[data-theme="l-lavender"]{ --bg:#f6f2fd; --bg-2:#ece2fa;
    --accent:#7c3aed; --accent-2:#c026d3; --accent-3:#4f46e5;
    --grad:linear-gradient(115deg,#7c3aed 0%,#c026d3 55%,#6366f1 100%); }
  .pu[data-theme="l-coral"]{ --bg:#fef1f0; --bg-2:#fadedb;
    --accent:#e23744; --accent-2:#e11d5b; --accent-3:#f4785b;
    --grad:linear-gradient(115deg,#e23744 0%,#e11d5b 55%,#fb7185 100%); }
  .pu[data-theme="l-sand"]{ --bg:#fbf6ea; --bg-2:#f4ead1; --gold:#a16207;
    --accent:#c2810c; --accent-2:#d97706; --accent-3:#ca8a04;
    --grad:linear-gradient(115deg,#c2810c 0%,#d97706 55%,#eab308 100%); }
  .pu[data-theme="l-ice"]{ --bg:#eff5fb; --bg-2:#e0ebf6;
    --accent:#0284c7; --accent-2:#4f46e5; --accent-3:#0ea5e9;
    --grad:linear-gradient(115deg,#0284c7 0%,#38bdf8 55%,#6366f1 100%); }
  .pu[data-theme="l-graphite"]{ --bg:#f3f3f5; --bg-2:#e7e7ec;
    --accent:#52525b; --accent-2:#5b52e0; --accent-3:#0e97c7;
    --grad:linear-gradient(115deg,#71717a 0%,#5b52e0 55%,#0e97c7 100%); }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  .pu{
    background:
      radial-gradient(900px 600px at 80% -5%,var(--glow-1),transparent 60%),
      radial-gradient(700px 500px at 0% 10%,var(--glow-2),transparent 55%),
      var(--bg);
    color:var(--txt);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
    transition:background-color .4s ease, color .4s ease;
  }
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .narrow{max-width:820px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-3);padding:7px 14px;border:1px solid var(--line-2);border-radius:100px;
    background:var(--fill);
  }
  .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  h1,h2,h3{line-height:1.1;letter-spacing:-.02em;font-weight:800}
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .btn{
    appearance:none;border:none;cursor:pointer;font:inherit;font-weight:700;
    padding:16px 30px;border-radius:100px;color:#0a0a12;background:var(--grad);
    font-size:16px;letter-spacing:-.01em;box-shadow:0 12px 34px -8px color-mix(in srgb,var(--accent-2) 55%,transparent);
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
    display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -8px color-mix(in srgb,var(--accent-2) 70%,transparent);filter:brightness(1.05)}
  .btn:active{transform:translateY(0)}
  .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line-2);box-shadow:none}
  .btn.ghost:hover{background:color-mix(in srgb,var(--txt) 7%,transparent)}
  .btn.big{padding:19px 42px;font-size:17.5px}
  .cta-sub{font-size:13px;color:var(--muted-2);margin-top:12px}

  /* NAV */
  nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:color-mix(in srgb,var(--bg) 60%,transparent);border-bottom:1px solid var(--line)}
  nav .wrap{max-width:1340px}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
  .logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:18px}
  .logo .mark{width:30px;height:30px;border-radius:9px;background:var(--grad);
    display:grid;place-items:center;font-size:15px;color:#0a0a12;box-shadow:0 6px 18px -4px color-mix(in srgb,var(--accent-2) 60%,transparent)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .nav-cta{font-size:14px;padding:11px 22px}
  @media(max-width:620px){.nav-cta{display:none}}

  /* THEME PICKER — custom dropdown */
  .theme-picker{display:flex;align-items:center;gap:8px}
  .theme-picker .tlabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
  @media(max-width:520px){.theme-picker .tlabel{display:none}}
  .dd{position:relative}
  .dd-btn{
    display:flex;align-items:center;gap:10px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
    color:var(--txt);background:var(--panel-2);border:1px solid var(--line-2);border-radius:100px;
    padding:9px 15px;outline:none;transition:border-color .15s;min-width:150px;justify-content:space-between;
  }
  .dd-btn:hover{border-color:var(--accent)}
  .dd-btn .caret{transition:transform .2s;color:var(--muted)}
  .dd.open .dd-btn .caret{transform:rotate(180deg)}
  .dd-menu{
    position:absolute;top:calc(100% + 8px);right:0;width:250px;max-height:min(74vh,540px);overflow-y:auto;
    background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:8px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.55);z-index:100;display:none;
  }
  .dd.open .dd-menu{display:block;animation:fade .18s ease}
  .dd-group{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
    font-weight:700;padding:12px 12px 6px}
  .dd-opt{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;font:inherit;
    font-size:13.5px;font-weight:600;color:var(--txt);background:none;border:none;border-radius:10px;
    padding:9px 12px;transition:background .13s;
  }
  .dd-opt:hover{background:var(--fill)}
  .dd-opt.active{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  .dd-opt .sw{flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2)}
  .dd-opt.active::after{content:"✓";margin-left:auto;color:var(--accent-2);font-weight:800}

  /* DEVICE (DESKTOP / MOBILE) PREVIEW TOGGLE */
  .device-toggle{display:inline-flex;background:var(--panel-2);border:1px solid var(--line-2);border-radius:100px;padding:3px}
  .dev-btn{border:none;background:none;cursor:pointer;font-size:15px;padding:7px 12px;border-radius:100px;
    color:var(--muted);transition:all .15s;line-height:1}
  .dev-btn:hover{color:var(--txt)}
  .dev-btn.active{background:var(--grad);color:#0a0a12}
  @media(max-width:640px){.device-toggle{display:none}}
  /* when this document is rendered inside the phone-preview iframe, hide the controls */
  .is-frame .nav-right{display:none}

  #phone-preview{position:fixed;inset:0;z-index:1000;display:none;place-items:center;
    background:rgba(0,0,0,.74);backdrop-filter:blur(6px)}
  #phone-preview.show{display:grid}
  .phone-shell{position:relative;width:390px;max-width:92vw;height:min(844px,86vh);
    background:#000;border-radius:46px;padding:13px;border:1px solid rgba(255,255,255,.16);
    box-shadow:0 44px 100px -18px rgba(0,0,0,.85)}
  .phone-shell iframe{width:100%;height:100%;border:none;border-radius:34px;background:#08080c;display:block}
  .phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:150px;height:26px;
    background:#000;border-radius:0 0 18px 18px;z-index:2}
  .phone-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:none;
    cursor:pointer;background:#fff;color:#000;font-size:22px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4)}
  .phone-label{position:absolute;bottom:-36px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.7}
  .pu.phone-open{overflow:hidden}

  /* HERO STYLE TOGGLE (VSL / Photo) */
  .hero-toggle{display:inline-flex;background:var(--panel-2);border:1px solid var(--line-2);border-radius:100px;padding:3px}
  .hero-btn{border:none;background:none;cursor:pointer;font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:100px;
    color:var(--muted);transition:all .15s;line-height:1;white-space:nowrap}
  .hero-btn:hover{color:var(--txt)}
  .hero-btn.active{background:var(--grad);color:#0a0a12}
  @media(max-width:760px){.hero-toggle{display:none}}

  /* PHOTO HERO VARIANT */
  .hero-photo{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left}
  @media(max-width:820px){.hero-photo{grid-template-columns:1fr;gap:30px;text-align:center}}
  .hero-photo .hp-text{min-width:0}
  .hero-photo h1{font-size:clamp(32px,5vw,52px);margin:18px 0 16px}
  .hero-photo p.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:560px}
  @media(max-width:820px){.hero-photo p.lead{margin-inline:auto}}
  .hero-photo .hero-cta{margin-top:26px}
  .hero-photo .trust{justify-content:flex-start}
  @media(max-width:820px){.hero-photo .trust{justify-content:center}
    .hero-photo .hp-photo{order:-1;max-width:420px;margin-inline:auto}}
  .hp-photo{position:relative}
  .photo-ph{position:relative;aspect-ratio:4/5;border-radius:calc(var(--r)+6px);overflow:hidden;
    border:1px solid var(--line-2);box-shadow:var(--shadow);display:grid;place-items:center;text-align:center;
    background:
      radial-gradient(400px 300px at 50% 35%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),
      linear-gradient(160deg,var(--panel-2),var(--bg))}
  .photo-ph .mono{font-size:80px}
  .photo-ph .plabel{position:absolute;bottom:16px;left:0;right:0;color:var(--muted);font-size:13px}

  /* HERO — VSL FIRST */
  header{padding:52px 0 30px;position:relative}
  .hero{max-width:860px;margin:0 auto;text-align:center}
  .hero h1{font-size:clamp(32px,5.4vw,54px);margin:18px 0 16px}
  .hero p.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:660px;margin:0 auto}
  .hero .kicker{color:var(--gold);font-weight:700}

  .video-wrap{margin:34px auto 0;max-width:900px}
  .video{
    position:relative;border-radius:calc(var(--r) + 4px);overflow:hidden;aspect-ratio:16/9;
    border:1px solid var(--line-2);
    background:
      radial-gradient(500px 300px at 50% 40%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 70%),
      linear-gradient(160deg,var(--panel-2),var(--bg));
    box-shadow:var(--shadow);display:grid;place-items:center;text-align:center;
  }
  .video::before{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(90deg,transparent 0 40px,color-mix(in srgb,var(--txt) 4%,transparent) 40px 41px)}
  .play{
    width:88px;height:88px;border-radius:50%;background:color-mix(in srgb,var(--txt) 12%,transparent);
    border:1px solid var(--line-2);backdrop-filter:blur(6px);
    display:grid;place-items:center;cursor:pointer;transition:transform .18s ease,background .18s;
    position:relative;z-index:2;
  }
  .play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid color-mix(in srgb,var(--txt) 22%,transparent);animation:ring 2.4s infinite}
  @keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
  .play:hover{transform:scale(1.06);background:color-mix(in srgb,var(--txt) 20%,transparent)}
  .video .vlabel{position:absolute;bottom:16px;left:0;right:0;color:var(--muted);font-size:13px;z-index:2}
  .video .sound{position:absolute;bottom:14px;right:16px;z-index:3;font-size:12px;color:var(--txt);
    background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line-2);padding:6px 12px;border-radius:100px}
  .video .badge{position:absolute;top:16px;left:16px;z-index:2;font-size:11.5px;
    text-transform:uppercase;letter-spacing:.12em;color:var(--accent-3);
    border:1px solid var(--line-2);padding:5px 12px;border-radius:100px;background:color-mix(in srgb,var(--panel) 85%,transparent)}
  .hero-cta{margin-top:28px}
  .trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;color:var(--muted-2);font-size:13.5px;justify-content:center}
  .trust b{color:var(--txt)}
  .trust .i{display:flex;align-items:center;gap:8px}

  section{padding:62px 0;position:relative}
  .section-head{max-width:720px;margin:0 auto 44px;text-align:center}
  .section-head .eyebrow{margin-bottom:16px}
  .section-head h2{font-size:clamp(27px,4.3vw,40px);margin-bottom:14px}
  .section-head p{color:var(--muted);font-size:17px}
  .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

  /* ONE-SENTENCE EXPLAINER + FLOW DIAGRAM */
  .explain{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent-2) 4%,transparent));
    border:1px solid var(--line-2);border-radius:calc(var(--r)+6px);padding:40px;text-align:center;box-shadow:var(--shadow)}
  .explain .one{font-size:clamp(20px,3vw,27px);font-weight:800;max-width:760px;margin:0 auto 30px;line-height:1.35}
  .flow{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap}
  .flow .node{flex:1 1 170px;max-width:200px;background:var(--panel);border:1px solid var(--line);
    border-radius:16px;padding:20px 14px}
  .flow .node .fic{font-size:30px;margin-bottom:10px}
  .flow .node h4{font-size:15px;margin-bottom:5px}
  .flow .node p{font-size:12.5px;color:var(--muted)}
  .flow .arrow{align-self:center;color:var(--accent-2);font-size:22px;font-weight:700}
  @media(max-width:760px){.flow .arrow{transform:rotate(90deg)}.flow .node{max-width:none}}

  /* CARDS */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.cards{grid-template-columns:1fr}}
  .card{background:linear-gradient(180deg,var(--panel),var(--bg-2));
    border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .18s,border-color .18s}
  .card:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .card .ic{width:46px;height:46px;border-radius:12px;background:var(--grad-soft);
    display:grid;place-items:center;font-size:22px;margin-bottom:16px;border:1px solid var(--line)}
  .card h3{font-size:19px;margin-bottom:9px}
  .card p{color:var(--muted);font-size:15px}

  /* PROOF / RECEIPTS */
  .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.proof-grid{grid-template-columns:1fr}}
  .receipt{position:relative;border-radius:var(--r);border:1px solid var(--line-2);overflow:hidden;
    background:linear-gradient(180deg,var(--panel-2),var(--bg-2));min-height:230px;display:flex;flex-direction:column}
  .receipt .img{flex:1;display:grid;place-items:center;text-align:center;padding:24px;
    background:repeating-linear-gradient(45deg,var(--fill-2) 0 12px,transparent 12px 24px);
    color:var(--muted-2);font-size:13px;border-bottom:1px dashed var(--line-2)}
  .receipt .img .amt{font-size:30px;font-weight:800;color:var(--ok);margin-bottom:6px}
  .receipt .cap{padding:16px 18px;font-size:14px;color:var(--muted)}
  .receipt .cap b{color:var(--txt)}
  .receipt .tag{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);padding:4px 10px;border-radius:100px}

  .creator-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
  @media(max-width:760px){.creator-row{grid-template-columns:1fr 1fr}}
  .creator{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
  .creator .av{width:58px;height:58px;border-radius:50%;margin:0 auto 10px;
    background:var(--grad-soft);border:1px solid var(--line-2);display:grid;place-items:center;font-size:22px}
  .creator .h{font-weight:700;font-size:14.5px}
  .creator .m{font-size:12.5px;color:var(--muted)}
  .creator .rev{color:var(--ok);font-weight:700;font-size:14px;margin-top:6px}

  .testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
  @media(max-width:860px){.testis{grid-template-columns:1fr}}
  .testi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
  .testi p{font-size:15px;color:var(--txt);margin-bottom:14px;font-style:italic}
  .testi .who{display:flex;align-items:center;gap:11px}
  .testi .who .av{width:38px;height:38px;border-radius:50%;background:var(--grad-soft);border:1px solid var(--line-2)}
  .testi .who .n{font-size:13.5px;font-weight:700}
  .testi .who .r{font-size:12px;color:var(--muted)}
  .stars{color:var(--gold);font-size:13px;margin-bottom:10px}

  /* STEPS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}
  .step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px}
  .step .n{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--accent-2);margin-bottom:12px}
  .step h3{font-size:17px;margin-bottom:8px}
  .step p{color:var(--muted);font-size:14.5px}

  /* MONEY */
  .money{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
  @media(max-width:860px){.money{grid-template-columns:1fr}}
  .money-panel{background:linear-gradient(180deg,var(--panel-2),var(--bg-2));
    border:1px solid var(--line-2);border-radius:calc(var(--r)+4px);padding:34px;box-shadow:var(--shadow)}
  .tiers{display:flex;flex-direction:column;gap:14px;margin-top:6px}
  .tier{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--fill-2)}
  .tier .lbl{font-size:14px;color:var(--muted)}
  .tier .val{font-size:clamp(20px,3vw,26px);font-weight:800}
  .tier.hot{border-color:color-mix(in srgb,var(--accent-2) 40%,transparent);background:color-mix(in srgb,var(--accent-2) 6%,transparent)}
  .money ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:8px}
  .money li{display:flex;gap:12px;color:var(--muted);font-size:15.5px}
  .money li b{color:var(--txt)}
  .check{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(74,222,128,.13);
    display:grid;place-items:center;color:var(--ok);font-size:12px;margin-top:2px}
  .fine{font-size:12px;color:var(--muted-2);margin-top:20px;line-height:1.5}

  /* FUTURE PACING */
  .future{background:linear-gradient(160deg,color-mix(in srgb,var(--accent-3) 7%,transparent),transparent);border:1px solid var(--line-2);
    border-radius:calc(var(--r)+6px);padding:40px;text-align:center}
  .future h2{font-size:clamp(24px,3.6vw,34px);margin-bottom:16px}
  .future p{color:var(--muted);max-width:620px;margin:0 auto;font-size:17px}
  .future .em{color:var(--txt);font-weight:600}

  /* OBJECTIONS */
  .obj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  @media(max-width:760px){.obj-grid{grid-template-columns:1fr}}
  .obj{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
  .obj .q{font-weight:700;font-size:16.5px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
  .obj .q span{color:var(--accent-2)}
  .obj p{color:var(--muted);font-size:15px}

  /* MENTOR / SELECTIVE */
  .mentor{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent-2) 5%,transparent));
    border:1px solid var(--line-2);border-radius:calc(var(--r)+6px);padding:44px;text-align:center;box-shadow:var(--shadow)}
  .spots{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--gold);
    border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);padding:9px 18px;border-radius:100px;background:color-mix(in srgb,var(--gold) 7%,transparent);
    margin-bottom:20px;font-size:14px}
  .spotbar{max-width:340px;margin:16px auto 4px;height:8px;border-radius:100px;background:color-mix(in srgb,var(--txt) 10%,transparent);overflow:hidden}
  .spotbar .fill{height:100%;background:var(--grad);border-radius:100px}
  .spotnote{font-size:12.5px;color:var(--muted-2);margin-bottom:20px}
  .mentor h2{font-size:clamp(26px,4vw,38px);margin-bottom:14px}
  .mentor p{color:var(--muted);max-width:620px;margin:0 auto 26px;font-size:17px}

  /* APPLY / FUNNEL */
  #apply{scroll-margin-top:80px}
  .funnel{max-width:640px;margin:0 auto;background:linear-gradient(180deg,var(--panel),var(--bg-2));
    border:1px solid var(--line-2);border-radius:calc(var(--r)+6px);padding:34px;box-shadow:var(--shadow);
    position:relative;overflow:hidden}
  .progress{height:6px;border-radius:100px;background:color-mix(in srgb,var(--txt) 9%,transparent);overflow:hidden;margin-bottom:26px}
  .progress .bar{height:100%;width:0%;background:var(--grad);border-radius:100px;transition:width .4s cubic-bezier(.4,0,.2,1)}
  .bp-ready{margin:-14px 0 22px;padding:10px 14px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--line-2);
    font-size:13.5px;color:var(--muted);text-align:center}
  .bp-ready a{color:var(--accent-2);font-weight:700;text-decoration:none;white-space:nowrap}
  .bp-ready a:hover{text-decoration:underline}
  .stepcount{font-size:12.5px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
  .screen{display:none;animation:fade .35s ease}
  .screen.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .screen h3{font-size:24px;margin-bottom:8px}
  .screen>p.sub{color:var(--muted);margin-bottom:24px;font-size:15.5px}
  .magnet{display:flex;gap:14px;align-items:center;background:color-mix(in srgb,var(--accent-3) 6%,transparent);border:1px solid var(--line-2);
    border-radius:14px;padding:14px 16px;margin-bottom:22px}
  .magnet .g{font-size:26px}
  .magnet .t{font-size:13.5px;color:var(--muted)}
  .magnet .t b{color:var(--txt);display:block;font-size:14.5px}
  .field{margin-bottom:18px}
  .field label{display:block;font-size:14px;font-weight:600;margin-bottom:9px;color:var(--txt)}
  .field input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid var(--line-2);
    background:var(--fill);color:var(--txt);font:inherit;font-size:15.5px;outline:none;transition:border-color .15s}
  .field input:focus{border-color:var(--accent)}
  .field input::placeholder{color:var(--muted-2)}
  .opts{display:flex;flex-direction:column;gap:11px}
  .opt{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1px solid var(--line-2);
    border-radius:13px;cursor:pointer;background:var(--fill-2);transition:all .15s;font-size:15.5px}
  .opt:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .opt.sel{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 9%,transparent)}
  .opt .radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);transition:all .15s}
  .opt.sel .radio{border-color:var(--accent-2);background:var(--accent-2);box-shadow:inset 0 0 0 3px var(--bg-2)}
  .fnav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px}
  .fnav .btn{padding:14px 26px;font-size:15px}
  .link-btn{background:none;border:none;color:var(--muted);cursor:pointer;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px}
  .link-btn:hover{color:var(--txt)}
  .err{color:var(--accent-2);font-size:13px;margin-top:8px;display:none}
  .result{text-align:center;padding:12px 0}
  .result .emoji{font-size:52px;margin-bottom:12px}
  .result h3{font-size:27px;margin-bottom:12px}
  .result p{color:var(--muted);font-size:16px;max-width:440px;margin:0 auto 24px}
  .cal-embed{border:1px dashed var(--line-2);border-radius:16px;padding:34px 24px;background:color-mix(in srgb,var(--accent-3) 5%,transparent);margin-top:8px}
  .cal-embed .k{font-size:13px;color:var(--accent-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
  .cal-embed p{margin-bottom:18px}
  .badge-pass{display:inline-flex;gap:8px;align-items:center;color:var(--ok);font-weight:700;font-size:14px;
    border:1px solid rgba(74,222,128,.3);background:rgba(74,222,128,.08);padding:8px 16px;border-radius:100px;margin-bottom:18px}

  /* FAQ */
  .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
  summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--accent-2);font-size:22px;font-weight:400}
  details[open] summary::after{content:"\2013"}
  details p{color:var(--muted);padding:0 0 18px;font-size:15px}

  .final{text-align:center}
  .final h2{font-size:clamp(28px,4.5vw,44px);margin-bottom:16px}
  .final p{color:var(--muted);font-size:18px;max-width:560px;margin:0 auto 28px}

  footer{border-top:1px solid var(--line);padding:40px 0;text-align:center;color:var(--muted-2);font-size:13px}
  footer .disc{max-width:720px;margin:0 auto 16px;line-height:1.6}
  .center{text-align:center}
  .ph{color:var(--gold);font-style:normal}

  /* ROCKING CTA */
  .rock{transform-origin:center bottom;animation:rock 2.6s ease-in-out infinite}
  .rock:hover{animation-play-state:paused}
  @keyframes rock{
    0%,68%,100%{transform:rotate(0)}
    73%{transform:rotate(-3.5deg)}
    79%{transform:rotate(3.5deg)}
    85%{transform:rotate(-2.5deg)}
    91%{transform:rotate(1.5deg)}
  }

  /* SMOOTH-SCROLL OFFSET so sticky nav doesn't cover headings */
  section[id]{scroll-margin-top:86px}

  /* NAV SECTION LINKS */
  .nav-left{display:flex;align-items:center;gap:22px;min-width:0}
  .nav-links{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
  .nav-links a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .15s;white-space:nowrap}
  .nav-links a:hover{color:var(--txt)}
  .nav-right{flex:none}
  @media(max-width:1080px){.nav-links{display:none}}

  /* AUTO-SCROLLING MARQUEES (receipts / creators / testimonials) */
  .marquee{overflow:hidden;position:relative;padding:6px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .marquee .track{display:flex;gap:18px;width:max-content;padding:0 9px;
    animation:scrollx var(--dur,45s) linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marquee .receipt{width:330px;flex:none}
  .marquee .creator{width:186px;flex:none}
  .marquee .testi{width:360px;flex:none;align-self:stretch}

  /* THEM vs US COMPARISON */
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:760px){.vs{grid-template-columns:1fr}}
  .vs-col{border:1px solid var(--line);border-radius:calc(var(--r)+2px);padding:26px}
  .vs-col.them{background:var(--fill-2)}
  .vs-col.us{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:var(--line-2)}
  .vs-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;padding:7px 14px;border-radius:100px;margin-bottom:16px}
  .vs-badge.them{color:#e5484d;background:color-mix(in srgb,#e5484d 12%,transparent);border:1px solid color-mix(in srgb,#e5484d 32%,transparent)}
  .vs-badge.us{color:var(--ok);background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3)}
  .vs-item{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted);line-height:1.5}
  .vs-item:first-of-type{border-top:none}
  .vs-item b{color:var(--txt)}
  .vs-item .x{flex:none;color:#e5484d;font-weight:800;font-size:16px}
  .vs-item .c{flex:none;color:var(--ok);font-weight:800;font-size:16px}
  .vs-note{margin-top:22px;background:var(--grad-soft);border:1px solid var(--line-2);border-radius:calc(var(--r)+2px);
    padding:24px 26px;font-size:16px;color:var(--txt);text-align:center;line-height:1.6}

  /* REAL-WORLD MARKET ANCHOR */
  .market{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:860px){.market{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.market{grid-template-columns:1fr}}
  .mcard{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);
    border-radius:var(--r);padding:18px;transition:transform .18s,border-color .18s}
  .mcard:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .mcard .photo{position:relative;aspect-ratio:1/1;border-radius:14px;background:var(--grad-soft);
    border:1px solid var(--line-2);display:grid;place-items:center;font-size:40px;margin-bottom:14px;overflow:hidden}
  .mcard .photo img{width:100%;height:100%;object-fit:cover;display:block}
  .mcard .estb{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;letter-spacing:.1em;
    color:var(--muted-2);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);
    padding:3px 8px;border-radius:100px}
  .mcard .mname{font-weight:700;font-size:15px;margin-bottom:6px;text-align:center}
  .mcard .mrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);
    padding:9px 0;border-top:1px solid var(--line)}
  .mcard .mrow b{color:var(--txt);font-size:14px}
  .mcard .mrow.hot b{color:var(--ok);font-size:15px}
  .mcard .msrc{font-size:11px;color:var(--muted-2);text-align:center;margin-top:8px;font-style:italic;letter-spacing:.01em}
  .market-fine{font-size:12px;color:var(--muted-2);text-align:center;margin:20px auto 0;max-width:660px;line-height:1.5}
  .pivot{margin-top:30px;background:var(--grad-soft);border:1px solid var(--line-2);
    border-radius:calc(var(--r)+6px);padding:40px;text-align:center;box-shadow:var(--shadow)}
  .pivot-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--gold);
    border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent);
    padding:8px 16px;border-radius:100px;margin-bottom:18px}
  .pivot h3{font-size:clamp(23px,3.8vw,34px);margin-bottom:16px;max-width:720px;margin-inline:auto}
  .pivot p{color:var(--muted);max-width:660px;margin:0 auto 14px;font-size:17px}
  .pivot p b{color:var(--txt)}
  .pivot-big{font-weight:700;color:var(--txt);font-size:clamp(18px,2.6vw,22px);margin-top:8px}
  .pivot .btn{margin-top:26px}
/* native render: wrapper carries theme + fills viewport */
.pu{min-height:100dvh}
.pu #hero-photo{display:none}
.pu[data-hero="photo"] #hero-vsl{display:none}
.pu[data-hero="photo"] #hero-photo{display:grid}