:root{
    --ink:#000000;
    --panel:#0b0c0d;
    --panel-2:#131517;
    --panel-3:#1a1d1f;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.14);
    --fg:#f2f4f1;
    --fg-dim:#8c938c;
    --fg-mute:#5c635d;
    --green:#34e27a;
    --green-soft:color-mix(in srgb, var(--green) 52%, #ffffff);
        --accent-ink:var(--green);
    --green-deep:color-mix(in srgb, var(--green) 20%, #06110b);
    --green-line:color-mix(in srgb, var(--green) 30%, transparent);
    --gold:#f5c518;
    --gold-deep:#241d06;
    --red:#ef5350;
    --maxw:1180px;
    --r:18px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:clip}
  body{
    margin:0;background:var(--ink);color:var(--fg);
    font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--green);color:#04120a}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3{margin:0;line-height:1.02;text-wrap:balance}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .display{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
  .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
    letter-spacing:.28em;text-transform:uppercase;color:var(--accent-ink);
  }
  .eyebrow.dim{color:var(--fg-mute)}

  /* ---------- ambient background ---------- */
  .bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--ink)}
  .bg::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(60% 45% at 78% -5%, color-mix(in srgb, var(--green) 16%, transparent), transparent 60%),
      radial-gradient(50% 40% at 8% 8%, color-mix(in srgb, var(--green) 6%, transparent), transparent 60%);
  }
  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:3px 3px;}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:50;
    backdrop-filter:blur(14px);background:color-mix(in srgb, var(--ink) 62%, transparent);
    border-bottom:1px solid var(--line);}
  .nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;gap:22px}
  .brand{display:flex;align-items:center;gap:11px;font-family:"Big Shoulders Display",sans-serif;
    font-weight:700;font-size:23px;letter-spacing:.14em;text-transform:uppercase}
  .brand img{height:26px;width:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}
  .nav-links{display:flex;gap:26px;margin-left:14px}
  .nav-links a{font-size:14.5px;color:var(--fg-dim);transition:color .18s}
  .nav-links a:hover{color:var(--fg)}
  .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
  .langtoggle{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;
    font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600}
  .langtoggle button{background:transparent;border:0;color:var(--fg-mute);
    padding:6px 11px;cursor:pointer;letter-spacing:.05em;transition:.18s}
  .langtoggle button.on{background:var(--green);color:#04120a}

  .playbtn{display:inline-flex;align-items:center;gap:10px;
    background:var(--green);color:#04120a;font-weight:700;font-size:14.5px;
    padding:10px 17px;border-radius:12px;transition:transform .16s, box-shadow .16s;
    box-shadow:0 0 0 color-mix(in srgb, var(--green) 0%, transparent)}
  .playbtn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px color-mix(in srgb, var(--green) 60%, transparent)}
  .playbtn svg{width:17px;height:17px;flex:none}
  .playbtn small{display:block;font-size:10.5px;font-weight:600;opacity:.72;letter-spacing:.02em;line-height:1}
  .playbtn .pb-t{line-height:1.05}
  /* `.ghost` y `.soon` vivian aqui para el boton de "Proximamente en App Store": fantasma y
     con borde a trazos. Se van con el, el 2026-09-03: la app salio en la App Store y los dos
     botones son ya iguales, que es lo correcto cuando las dos tiendas estan al mismo nivel. */
  .pb-pair{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* En la barra caben los dos botones de tienda, pero solo a lo ancho: se acortan un punto y,
     cuando el ancho aprieta, pierden primero el "Get it on" y luego los enlaces de seccion. */
  .playbtn.nav-cta{padding:9px 14px;font-size:14px}
  @media(max-width:1200px){.playbtn.nav-cta{padding:9px 12px}.playbtn.nav-cta small{display:none}}
  @media(max-width:1000px){.nav-links{display:none}}
  @media(max-width:820px){.playbtn.nav-cta{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:76px 0 40px}
  .hero-bg{position:absolute;inset:-120px 0 auto auto;width:60%;height:760px;z-index:-1;
    background-image:url("img/00.webp");background-size:cover;background-position:center 30%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(0deg,transparent 4%,#000 45%);
    mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(0deg,transparent 4%,#000 45%);
    -webkit-mask-composite:source-in;mask-composite:intersect;opacity:.6}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:radial-gradient(60% 60% at 70% 30%, color-mix(in srgb, var(--green) 14%, transparent), transparent 70%)}
  @media(max-width:860px){.hero-bg{width:100%;height:420px;opacity:.34}}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .hero h1{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
    text-transform:uppercase;font-size:clamp(52px,8.5vw,104px);line-height:.9;letter-spacing:.005em;margin:20px 0 0}
  .hero h1 .g{color:var(--accent-ink)}
  .hero-sub{font-size:20px;color:var(--fg-dim);max-width:30ch;margin:26px 0 0}
  .hero-cta{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
  .free-note{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--fg-mute);letter-spacing:.04em}
  .free-note b{color:var(--green-soft);font-weight:500}

  .phone{position:relative;--pw:270px;width:var(--pw);margin:0 auto;
    border-radius:calc(var(--pw)*.1333);padding:calc(var(--pw)*.0333);background:linear-gradient(160deg,#26292b,#0a0b0c);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset;}
  .phone::after{content:"";position:absolute;top:calc(var(--pw)*.0593);left:50%;transform:translateX(-50%);
    width:calc(var(--pw)*.2889);height:calc(var(--pw)*.0222);border-radius:99px;background:#000;z-index:3}
  .phone img{border-radius:calc(var(--pw)*.1037);width:100%;height:auto}
  .hero-phone{position:relative}
  .hero-phone .phone{--pw:300px;position:relative;z-index:1;
    box-shadow:0 50px 110px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 70px -18px color-mix(in srgb, var(--green) 30%, transparent)}
  .hero-phone::before{content:"";position:absolute;z-index:0;left:50%;top:50%;
    transform:translate(-50%,-50%);width:150%;height:128%;pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 72%)}
  @media(max-width:760px){
    .hero{padding:48px 0 30px}
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-phone{order:2}
    .hero h1{font-size:clamp(46px,13vw,88px)}
    .hero-sub{max-width:38ch}
  }

  /* ---------- stat band ---------- */
  .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:54px}
  .band-in{display:grid;grid-template-columns:repeat(5,1fr)}
  .stat{padding:26px 20px;border-left:1px solid var(--line);text-align:center}
  .stat:first-child{border-left:0}
  .stat .n{font-family:"Big Shoulders Display",sans-serif;font-weight:700;font-size:40px;color:var(--fg);line-height:1;letter-spacing:.01em}
  .stat .n .u{color:var(--accent-ink);font-size:24px}
  .stat .l{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);margin-top:9px}
  @media(max-width:820px){.band-in{grid-template-columns:repeat(2,1fr)}.stat:nth-child(odd){border-left:0}.stat{border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:0}}

  /* ---------- sections ---------- */
  section{padding:96px 0}
  .sec-head{max-width:640px;margin-bottom:20px}
  .sec-head h2{font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
    font-size:clamp(34px,5vw,58px);line-height:.94;margin:14px 0 0}
  .sec-head p{color:var(--fg-dim);font-size:18.5px;margin:18px 0 0;max-width:52ch}

  .feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .feature.flip .f-media{order:2}
  .f-media{display:flex;justify-content:center}
  .f-list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:2px}
  .f-list li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:flex-start}
  .f-list li:first-child{border-top:0}
  .f-list .k{font-weight:600;color:var(--fg)}
  .f-list .d{color:var(--fg-dim);font-size:15.5px;display:block;margin-top:2px;line-height:1.5}
  .tick{flex:none;width:22px;height:22px;margin-top:3px;color:var(--accent-ink)}
  @media(max-width:860px){.feature,.feature.flip{grid-template-columns:1fr;gap:36px}.feature.flip .f-media{order:0}}

  /* chips row */
  .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
  .chip{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em;
    color:var(--fg-dim);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;background:var(--panel)}
  .chip b{color:var(--green-soft);font-weight:500}

  /* progress cards */
  .measure{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
  .mcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
  .mcard .n{font-family:"Big Shoulders Display",sans-serif;font-size:34px;font-weight:700;letter-spacing:.01em}
  .mcard .n.gold{color:var(--gold)} .mcard .n.grn{color:var(--accent-ink)}
  .mcard .l{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);margin-top:8px}
  .mcard p{margin:10px 0 0;font-size:14.5px;color:var(--fg-dim);line-height:1.5}
  .two-shot{display:flex;gap:10px;justify-content:center}
  .two-shot .phone{--pw:270px}.two-shot .phone:nth-child(2){margin-top:44px}
  @media(max-width:860px){.measure{grid-template-columns:1fr;gap:36px}}

  /* rank ladder */
  .rank{position:relative;background:
      radial-gradient(70% 90% at 20% 10%, color-mix(in srgb, var(--green) 10%, transparent), transparent 60%),
      var(--panel);border:1px solid var(--line);border-radius:26px;padding:44px}
  .rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .ladder{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
  .rung{display:grid;grid-template-columns:118px 1fr auto;gap:16px;align-items:center}
  .rung .rn{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.06em;color:var(--fg-dim);text-align:right}
  .rung .bar{height:12px;border-radius:99px;background:var(--panel-3);overflow:hidden;position:relative}
  .rung .bar i{position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,color-mix(in srgb, var(--green) 62%, #000),var(--green));border-radius:99px}
  .rung .pc{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--fg-mute)}
  .rung.you .rn{color:var(--accent-ink);font-weight:600}
  .rung.top .rn{color:var(--gold);font-weight:600}
  .rung.top .bar i{background:linear-gradient(90deg,#8a6d0a,var(--gold))}
  .laurel{color:var(--accent-ink);opacity:.9;width:60px;height:60px}
  @media(max-width:860px){.rank-grid{grid-template-columns:1fr;gap:34px}.rank{padding:30px}}

  /* pro band */
  .pro{background:
      radial-gradient(60% 80% at 85% 0%, rgba(245,197,24,.10), transparent 60%),
      linear-gradient(180deg,color-mix(in srgb, var(--gold) 7%, var(--ink)),var(--ink));
    border-top:1px solid rgba(245,197,24,.20);border-bottom:1px solid rgba(245,197,24,.14)}
  .pro .eyebrow{color:var(--gold)}
  .pro .sec-head h2 .crown{color:var(--gold)}
  .pro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;margin-top:8px}
  .pro-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .pf{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:15px;padding:18px}
  .pf .h{font-weight:600;font-size:15.5px;display:flex;gap:9px;align-items:center}
  .pf .h svg{width:18px;height:18px;color:var(--gold);flex:none}
  .pf p{margin:8px 0 0;font-size:14px;color:var(--fg-dim);line-height:1.5}
  .pro-note{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--fg-mute);margin-top:22px;letter-spacing:.03em}
  .pro-note b{color:var(--green-soft);font-weight:500}
  @media(max-width:920px){.pro-grid{grid-template-columns:1fr;gap:32px}.pro-feats{grid-template-columns:1fr}}

  /* privacy */
  .priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
  .pcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
  .pcard svg{width:24px;height:24px;color:var(--accent-ink);margin-bottom:12px}
  .pcard h4{margin:0;font-size:16px;font-weight:600}
  .pcard p{margin:8px 0 0;font-size:14.5px;color:var(--fg-dim);line-height:1.5}
  .lock-note{display:flex;gap:12px;align-items:center;margin-top:24px;padding:16px 20px;
    border:1px solid var(--green-line);border-radius:14px;background:var(--green-deep);color:var(--green-soft);font-size:15px}
  .lock-note svg{width:22px;height:22px;flex:none}
  @media(max-width:820px){.priv-grid{grid-template-columns:1fr}}

  /* final cta */
  .final{text-align:center;padding:110px 0}
  .final h2{font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;
    font-size:clamp(42px,7vw,88px);line-height:.9}
  .final h2 .g{color:var(--accent-ink)}
  .final p{color:var(--fg-dim);font-size:19px;margin:22px auto 0;max-width:44ch}
  .final .hero-cta{justify-content:center;margin-top:38px}

  /* footer */
  footer{border-top:1px solid var(--line);padding:56px 0 46px}
  .foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .foot .brand{margin-bottom:16px}
  .foot p{color:var(--fg-dim);font-size:14.5px;max-width:40ch;margin:0}
  .foot a.mail{color:var(--green-soft)}
  .foot-links{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--fg-dim)}
  .foot-links a:hover{color:var(--fg)}
  .disclaimer{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
    font-size:12.5px;color:var(--fg-mute);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .disclaimer .mono{letter-spacing:.03em}

  /* reveal */
  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none;transition:none}
    .playbtn:hover{transform:none}
  }
  :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

  /* ---------- brand wordmark (A logo = the A of ATREUS) ---------- */
  .brand.wm{gap:3px}
  .brand.wm img{margin-right:0;filter:drop-shadow(0 0 12px rgba(245,197,24,.35))}

  /* ---------- customization ---------- */
  .custom{background:
      radial-gradient(52% 68% at 10% 0%, color-mix(in srgb, var(--green) 9%, transparent), transparent 60%),
      radial-gradient(52% 70% at 92% 6%, rgba(245,197,24,.10), transparent 60%),
      linear-gradient(180deg,color-mix(in srgb, var(--green) 8%, var(--ink)),var(--ink));
    border-top:1px solid var(--line)}
  .cst-head-main{max-width:720px}
  .cst-head-main .sec-head h2 .g{color:var(--accent-ink)}
  .pro-pill{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#0a0b0c;font-weight:600;
    background:linear-gradient(180deg,#ffdc55,#f5c518);border-radius:999px;padding:5px 12px}
  .pro-pill svg{width:12px;height:12px;stroke:#0a0b0c}
  .mix-pill{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--green-soft);border:1px solid var(--green-line);border-radius:999px;padding:4px 11px}
  .free-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}

  .cst-block{margin-top:52px}
  .cst-bhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
  .cst-bhead h3{font-family:"Big Shoulders Display",sans-serif;text-transform:uppercase;
    font-size:25px;font-weight:700;letter-spacing:.02em;margin:0}
  .cst-bhead p{flex-basis:100%;margin:0;color:var(--fg-dim);font-size:15.5px;max-width:60ch;line-height:1.5}
  .cst-bhead.sm h3{font-size:20px}

  /* rank crests */
  .crest-row{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}
  .crest{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);
    border-radius:18px;padding:22px 8px 15px;position:relative;transition:transform .25s,border-color .25s,box-shadow .25s}
  .crest:hover{transform:translateY(-5px);border-color:var(--line-2);
    box-shadow:0 24px 50px -28px rgba(0,0,0,.9)}
  .crest .ring{width:88px;height:88px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;position:relative;
    background:radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--c) 26%, transparent), transparent 68%)}
  .crest .ring::before{content:"";position:absolute;inset:0;border-radius:50%;
    border:1px solid color-mix(in srgb,var(--c) 42%, transparent)}
  .crest img{width:56px;height:56px;object-fit:contain;position:relative;
    filter:drop-shadow(0 0 11px color-mix(in srgb,var(--c) 62%, transparent))}
  .crest b{display:block;font-size:14.5px;font-weight:600}
  .crest .tno{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fg-mute);margin-top:4px}
  .crest.aether .ring::before{border:0;
    background:conic-gradient(from 210deg,#ff6b6b,#ffd166,#34e27a,#4dabf7,#b197fc,#ff6b6b);
    -webkit-mask:radial-gradient(closest-side,transparent 77%,#000 78%);
    mask:radial-gradient(closest-side,transparent 77%,#000 78%)}
  @media(max-width:760px){.crest-row{grid-template-columns:repeat(3,1fr)}}

  /* app icons */
  .icon-row{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
  .ic{margin:0;text-align:center;position:relative}
  .ic .thumb{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;
    border:1px solid var(--line);background:var(--panel-2);transition:transform .25s,border-color .25s}
  .ic:hover .thumb{transform:translateY(-4px);border-color:var(--line-2)}
  .ic .thumb img{width:100%;height:100%;object-fit:cover}

  .ic .thumb .la{position:absolute;left:22%;top:22%;width:56%;height:56%;object-fit:contain;
    filter:drop-shadow(0 0 10px rgba(245,197,24,.35))}
  .ic .thumb .ca{width:52%;height:52%;position:absolute;left:24%;top:24%;color:var(--accent-ink);
    filter:drop-shadow(0 0 10px color-mix(in srgb, var(--green) 60%, transparent))}
  .ic.locked .thumb::after{content:"";position:absolute;inset:0;background:rgba(4,6,5,.34)}
  .ic .lk{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:8px;
    display:grid;place-items:center;background:rgba(6,8,7,.72);backdrop-filter:blur(3px);
    border:1px solid rgba(255,255,255,.16);z-index:2}
  .ic .lk svg{width:13px;height:13px;stroke:#fff}
  .ic b{display:block;margin-top:11px;font-size:13.5px;font-weight:600}
  .ic .free-tag{display:block;margin-top:2px}
  @media(max-width:760px){.icon-row{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:440px){.icon-row{grid-template-columns:repeat(3,1fr)}}

  /* colors + themes */
  .cst-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
  .cst-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px}
  .dot-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
  .dot{width:44px;height:44px;border-radius:50%;background:var(--d);position:relative;
    display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
  .dot.rainbow{background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#34e27a,#4dabf7,#a06bff,#ff5f6d)}
  .dot.sel{box-shadow:0 0 0 2px #fff, 0 0 16px -2px var(--d)}
  .dot.sel svg{width:20px;height:20px;stroke:#04120a;stroke-width:3.4}
  .dot .plk{width:15px;height:15px;stroke:rgba(255,255,255,.92)}
  .dot.lk::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(4,6,5,.32)}
  .dot.lk .plk{position:relative;z-index:1}
  .cst-note{margin:20px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12px;
    letter-spacing:.02em;color:var(--fg-mute);line-height:1.5}
  .theme-grid{display:flex;flex-wrap:wrap;gap:13px;margin-top:4px}
  .thm{width:96px;border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line-2);
    background:var(--panel-2);padding-bottom:9px}
  .thm i{display:block;height:52px;background:var(--bg);position:relative}
  .thm i::before{content:"";position:absolute;left:12px;top:14px;width:26px;height:9px;border-radius:99px;background:var(--fg);opacity:.85}
  .thm i::after{content:"";position:absolute;left:12px;top:28px;width:44px;height:6px;border-radius:99px;background:var(--fg);opacity:.4}
  .thm b{display:block;font-size:12.5px;font-weight:600;text-align:center;margin-top:8px}
  .thm.sel{border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--green)}
  .thm .plk{position:absolute;top:7px;right:7px;width:14px;height:14px;stroke:#fff;z-index:2;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
  .thm.lk i::after{opacity:.4}
  @media(max-width:760px){.cst-two{grid-template-columns:1fr}}

  /* premium CTA */
  .pro-cta{margin-top:56px;display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap;
    padding:34px 38px;border-radius:22px;position:relative;overflow:hidden;
    background:linear-gradient(120deg,rgba(245,197,24,.10),color-mix(in srgb, var(--green) 7%, transparent));
    border:1px solid rgba(245,197,24,.28)}
  .pro-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 120% at 100% 0%,rgba(245,197,24,.16),transparent 60%)}
  .pro-cta>div{position:relative;max-width:60ch}
  .pro-cta h3{font-family:"Big Shoulders Display",sans-serif;text-transform:uppercase;
    font-size:clamp(24px,3.4vw,34px);line-height:1.02;font-weight:700;margin:12px 0 0}
  .pro-cta p{margin:12px 0 0;color:var(--fg-dim);font-size:15.5px;line-height:1.55}
  .pro-cta .playbtn{position:relative;flex:none}
  .pro-cta .pb-pair{position:relative;flex:none;max-width:none}
  @media(max-width:720px){.pro-cta{padding:26px 24px}}

  #rank .rung{grid-template-columns:30px 84px 1fr auto;gap:13px}
  #rank .rung .rc{width:26px;height:26px;background:var(--green);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
  #rank .rung.top .rc,#rank .rung.gold .rc{background:var(--gold)}
  @media(max-width:520px){#rank .rung{grid-template-columns:26px 66px 1fr auto;gap:10px}#rank .rung .rn{font-size:12px;color:var(--accent-ink)}
  #rank .rung.top .rn,#rank .rung.gold .rn{font-weight:600}}

  /* spanish-only rank screenshot */
  .es-only{display:none!important}
  html[lang="es"] .es-only{display:block!important}
  .rank-shot{margin-top:34px}
  .rank-shot .phone{--pw:270px;margin:0}
  @media(max-width:860px){.rank-shot .phone{margin:0 auto}}
  /* Tema claro: la foto del héroe y el grano están pensados para fondo negro. */
  html.lightskin .hero-bg{opacity:.25}
  html.lightskin .grain{background-image:radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px)}
  /* El monograma es plata sobre transparente: en claro hay que invertirlo o desaparece. */
  html.lightskin .brand img{filter:invert(1) brightness(.55)}
  /* El acento es un verde pensado para fondo negro: como TEXTO sobre blanco se lee mal,
     así que en claro se oscurece. El acento en sí (botones, barras) no se toca — el color
     que elige el usuario se respeta. */
  /* Patrón `accentSoftInk` de la app: en paletas claras la tinta pasa al color de
     texto y el color lo lleva el fondo. El acento en sí NO se corrige. */
  html.lightskin{--accent-ink:color-mix(in srgb, var(--green) 55%, #06120b);--green-soft:var(--accent-ink);
    /* Superficie teñida: en claro el color lo lleva el FONDO y la tinta es legible encima,
       que es el patrón `accentSoft`/`accentSoftInk` de la app. Sobre base oscura se quedaba
       negra con letra oscura encima. */
    --green-deep:color-mix(in srgb, var(--green) 14%, var(--panel))}
  /* La viñeta negra que separa el móvil del fondo sólo tiene sentido sobre negro. */
  html.lightskin .hero-phone::before{opacity:.16}
  /* Los nombres de rango llevan SIEMPRE el acento (el oro se queda en el escudo).
     Va al final y sin envolver: la primera versión cayó dentro de un @media(max-width:520px)
     y en escritorio no se aplicaba, con Aether en oro y el resto en gris. */
  #rank .rung .rn{color:var(--accent-ink)}
  #rank .rung.top .rn,#rank .rung.gold .rn{font-weight:600}
  @media(max-width:760px){
    .two-shot{flex-direction:column;align-items:center;gap:18px}
    .two-shot .phone:nth-child(2){margin-top:0}
  }