/* ============ scale system: design width = 480px, 1rem = 10px @480 ============ */
html{font-size:min(calc(100vw / 48), 10px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%;height:auto}

:root{
  --bg:#0d0a07;
  --ink:#f4ecdd;
  --muted:#a99b83;
  --panel:rgba(26,20,12,.78);
  --panel2:rgba(16,12,7,.92);
  --line:rgba(255,196,80,.26);
  --line2:rgba(255,196,80,.14);

  --g-hi:#FFF8DC;
  --g-1:#FFE07A;
  --g-2:#FFC72C;
  --g-3:#F0A32A;
  --g-4:#B5711A;
  --g-5:#7A4A0E;
  --glow:rgba(255,178,50,.55);

  --up:#2fd07f;
  --down:#ff5757;

  --ic1:#FFE9A8; --ic2:#F0A32A;
  --gf1:#FFB84D; --gf2:#FFA028; --gf3:#FFE6B0; --gf4:#FFD37A;
  --btn:linear-gradient(180deg,#FFF0B0 0%,#FFD24A 22%,#F5B02A 55%,#E09216 78%,#FFDF7E 100%);
  --title-grad:linear-gradient(180deg,#FFFBE8 0%,#FFE486 30%,#FFC42C 50%,#C97F14 72%,#F7C74A 92%,#FFF0B8 100%);
}

/* ---- optional neon palette:  index.html?theme=neon  ---- */
[data-theme="neon"]{
  --bg:#050a1e;
  --ink:#eaf2ff;
  --muted:#8fa3c8;
  --panel:rgba(14,24,58,.78);
  --panel2:rgba(8,15,38,.92);
  --line:rgba(90,170,255,.34);
  --line2:rgba(90,170,255,.16);

  --g-hi:#ffffff;
  --g-1:#7DD3FC;
  --g-2:#38BDF8;
  --g-3:#8B5CF6;
  --g-4:#6D28D9;
  --g-5:#3b1a86;
  --glow:rgba(96,165,250,.6);

  --ic1:#A5D8FF; --ic2:#7C5CF0;
  --gf1:#F472B6; --gf2:#C026D3; --gf3:#FBCFE8; --gf4:#F0ABFC;
  --btn:linear-gradient(90deg,#22D3EE 0%,#3B82F6 42%,#A855F7 72%,#EC4899 100%);
  --title-grad:linear-gradient(180deg,#ffffff 0%,#dbeafe 40%,#93c5fd 62%,#a78bfa 100%);
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  display:flex;justify-content:center;
  overflow-x:hidden;
}
/* ambient wash behind the phone column on desktop */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 50% 22%, rgba(255,170,40,.10), transparent 70%),
    radial-gradient(80rem 60rem at 50% 100%, rgba(255,140,20,.07), transparent 70%),
    var(--bg);
}
[data-theme="neon"] body::before{
  background:
    radial-gradient(60rem 40rem at 50% 22%, rgba(80,120,255,.16), transparent 70%),
    radial-gradient(80rem 60rem at 50% 100%, rgba(168,85,247,.12), transparent 70%),
    var(--bg);
}

/* ============ stage / phone column ============ */
.stage{
  position:relative;z-index:1;
  width:48rem;max-width:100%;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(30rem 20rem at 50% 30%, rgba(255,170,40,.16), transparent 72%),
    linear-gradient(180deg,#17110a 0%,#0f0b07 38%,#0b0805 100%);
  box-shadow:0 0 0 1px rgba(255,190,70,.10), 0 3rem 9rem rgba(0,0,0,.8);
  display:flex;flex-direction:column;
}
[data-theme="neon"] .stage{
  background:
    radial-gradient(30rem 20rem at 50% 30%, rgba(80,130,255,.22), transparent 72%),
    linear-gradient(180deg,#0b1740 0%,#070f2c 40%,#04081c 100%);
  box-shadow:0 0 0 1px rgba(90,170,255,.14), 0 3rem 9rem rgba(0,0,0,.8);
}

/* room / screen-wall backdrop */
.backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.backdrop .rows{
  position:absolute;inset:-10% -10% 40% -10%;
  background-image:
    linear-gradient(rgba(255,190,80,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,190,80,.045) 1px, transparent 1px);
  background-size:4rem 3rem, 4rem 3rem;
  transform:perspective(60rem) rotateX(52deg);
  transform-origin:50% 0;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
}
[data-theme="neon"] .backdrop .rows{
  background-image:
    linear-gradient(rgba(110,180,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,180,255,.075) 1px, transparent 1px);
}
.backdrop .vig{
  position:absolute;inset:0;
  background:radial-gradient(120% 78% at 50% 40%, transparent 34%, rgba(0,0,0,.72) 100%);
}

/* ============ page ============ */
.page{position:relative;z-index:2;padding:1.6rem 1.4rem 1.8rem;display:flex;flex-direction:column;flex:1;justify-content:center}

/* --- survey badge --- */
.badge{
  align-self:center;
  display:inline-flex;align-items:center;gap:.6rem;
  height:3rem;padding:0 1.5rem;border-radius:99rem;
  background:linear-gradient(180deg,rgba(38,28,14,.95),rgba(18,13,7,.95));
  border:.12rem solid var(--line);
  box-shadow:0 0 1.6rem rgba(255,170,40,.22), inset 0 .1rem 0 rgba(255,220,140,.16);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.04em;
  color:#fff;
}
.badge svg{width:1.5rem;height:1.5rem;display:block}

/* --- title --- */
.title{
  margin-top:.9rem;text-align:center;
  font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;
  font-size:4.1rem;line-height:1.02;letter-spacing:-.025em;white-space:nowrap;
  background:var(--title-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.03rem rgba(120,66,8,.35);
  filter:drop-shadow(0 .2rem 0 rgba(105,58,6,.85)) drop-shadow(0 .55rem 1.6rem rgba(255,165,35,.45));
}
[data-theme="neon"] .title{
  -webkit-text-stroke:0;
  filter:drop-shadow(0 .2rem 0 rgba(20,40,110,.9)) drop-shadow(0 .5rem 1.8rem rgba(90,150,255,.55));
}
.sub{
  margin-top:.5rem;text-align:center;
  font-size:1.45rem;font-weight:500;color:#e6dcc8;letter-spacing:.005em;
  text-shadow:0 .1rem .6rem rgba(0,0,0,.65);
}

/* --- laurel ribbon --- */
.ribbon-row{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.3rem}
.laurel{width:3.4rem;height:3.4rem;flex:none;color:var(--g-2);filter:drop-shadow(0 0 .6rem rgba(255,180,50,.55))}
.laurel.r{transform:scaleX(-1)}
[data-theme="neon"] .laurel{color:var(--g-2)}
.ribbon{
  position:relative;flex:1;min-width:0;
  height:3.1rem;display:flex;align-items:center;justify-content:center;
  padding:0 1.2rem;
  background:linear-gradient(180deg,rgba(46,33,15,.96),rgba(20,14,7,.96));
  border:.12rem solid var(--line);
  clip-path:polygon(1.2rem 0,100% 0,calc(100% - 1.2rem) 50%,100% 100%,1.2rem 100%,0 50%);
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.18rem;letter-spacing:.045em;
  color:var(--g-1);white-space:nowrap;
  box-shadow:0 0 1.8rem rgba(255,170,40,.18);
}

/* ============ hero ============ */
.hero{position:relative;margin-top:.8rem;height:35.5rem;flex:none}

/* candlestick chart backdrop */
.chart{
  position:absolute;left:-1.4rem;right:-1.4rem;top:-1.5rem;height:27rem;
  opacity:.7;
  mask-image:linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.chart svg{
  width:100%;height:100%;display:block;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8) 0%, #000 26%, rgba(0,0,0,.5) 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.8) 0%, #000 26%, rgba(0,0,0,.5) 78%, transparent 100%);
}

/* ticker cards */
.tk{position:absolute;z-index:3}
.tk-main{
  left:0;top:3rem;
  padding:.85rem 1.1rem .9rem;border-radius:1rem;
  background:linear-gradient(180deg,rgba(28,21,12,.86),rgba(12,9,5,.86));
  border:.1rem solid var(--line2);
  backdrop-filter:blur(.6rem);-webkit-backdrop-filter:blur(.6rem);
  box-shadow:0 .6rem 2rem rgba(0,0,0,.55);
}
.tk-main .pair{display:flex;align-items:center;gap:.55rem;font-size:1.25rem;font-weight:600;color:#efe4cf}
.tk-main .pair b{font-weight:700;color:#fff}
.tk-main .px{
  margin-top:.35rem;font-family:'Montserrat',sans-serif;font-weight:800;font-size:2.15rem;letter-spacing:-.01em;
  background:linear-gradient(180deg,#FFE9A8,#F2A93B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="neon"] .tk-main .px{background:linear-gradient(180deg,#dbeafe,#60a5fa);-webkit-background-clip:text;background-clip:text}
.tk-main .chg{margin-top:.1rem;font-size:1.3rem;font-weight:700;color:var(--up)}

.tk-side{right:0;top:3rem;display:flex;flex-direction:column;gap:.5rem;width:12.2rem}
.tk-side .row{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .7rem;border-radius:.8rem;
  background:linear-gradient(180deg,rgba(28,21,12,.86),rgba(12,9,5,.86));
  border:.1rem solid var(--line2);
  backdrop-filter:blur(.6rem);-webkit-backdrop-filter:blur(.6rem);
  box-shadow:0 .4rem 1.4rem rgba(0,0,0,.5);
}
.tk-side .row .nm{flex:1;font-size:1.12rem;font-weight:600;color:#e9dcc5;white-space:nowrap}
.tk-side .row .nm b{color:#fff;font-weight:700}
.tk-side .row .up{font-size:1.1rem;font-weight:700;color:var(--up)}
.ic{width:1.7rem;height:1.7rem;flex:none;display:block}
.tk-side .ic{width:1.5rem;height:1.5rem}

/* center reward stack */
.reward{position:absolute;left:0;right:0;top:.2rem;z-index:4;text-align:center;pointer-events:none}
.winup{
  font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;
  font-size:2.1rem;letter-spacing:.08em;color:#fff;
  text-shadow:0 .2rem 0 rgba(90,50,5,.8), 0 0 1.6rem rgba(255,180,60,.7);
}
.big{
  margin-top:-.3rem;
  font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;
  font-size:9.2rem;line-height:.92;letter-spacing:-.03em;
  background:var(--title-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.05rem rgba(120,66,8,.35);
  filter:drop-shadow(0 .3rem 0 rgba(105,58,6,.9)) drop-shadow(0 .8rem 2.4rem rgba(255,160,30,.6));
}
[data-theme="neon"] .big{-webkit-text-stroke:0;filter:drop-shadow(0 .3rem 0 rgba(18,36,105,.9)) drop-shadow(0 .8rem 2.6rem rgba(96,165,250,.7))}
.big em{font-style:italic;font-size:.72em;letter-spacing:-.015em}

.hr-ribbon{
  margin:1.5rem auto 0;width:24rem;max-width:92%;
  height:2.9rem;display:flex;align-items:center;justify-content:center;gap:.8rem;
  background:linear-gradient(180deg,rgba(48,34,15,.96),rgba(20,14,7,.96));
  border:.12rem solid var(--line);
  clip-path:polygon(1.1rem 0,calc(100% - 1.1rem) 0,100% 50%,calc(100% - 1.1rem) 100%,1.1rem 100%,0 50%);
  box-shadow:0 0 1.8rem rgba(255,170,40,.25);
}
.hr-ribbon span{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.085em;color:#fff;white-space:nowrap;
  text-shadow:0 0 1rem rgba(255,190,70,.7);
}
.hr-ribbon i{color:var(--g-2);font-style:normal;font-size:1.2rem;line-height:1}

/* podium + coin */
.podium{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:30rem;height:11rem;z-index:2}
.podium .halo{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:26rem;height:14rem;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,196,60,.55), rgba(255,150,20,.16) 45%, transparent 72%);
  filter:blur(1rem);
}
[data-theme="neon"] .podium .halo{background:radial-gradient(50% 50% at 50% 50%, rgba(120,180,255,.6), rgba(168,85,247,.24) 45%, transparent 72%)}
.podium .ring{
  position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
  border:.14rem solid rgba(255,205,90,.5);
  box-shadow:0 0 1.4rem rgba(255,180,50,.5), inset 0 0 1.4rem rgba(255,180,50,.35);
}
[data-theme="neon"] .podium .ring{border-color:rgba(125,211,252,.55);box-shadow:0 0 1.4rem rgba(96,165,250,.55), inset 0 0 1.4rem rgba(168,85,247,.4)}
.podium .r1{width:27rem;height:6.6rem;bottom:1.2rem;opacity:.5}
.podium .r2{width:21rem;height:5rem;bottom:2.1rem;opacity:.75}
.podium .top{
  position:absolute;left:50%;transform:translateX(-50%);bottom:2.9rem;
  width:16.5rem;height:4rem;border-radius:50%;
  background:radial-gradient(58% 68% at 50% 30%, #FFF3C0 0%, #FFD35A 26%, #E9A22C 52%, #A9691A 80%, #5E390A 100%);
  box-shadow:0 0 2.8rem rgba(255,180,50,.7), inset 0 0 0 .14rem rgba(255,232,160,.55), inset 0 -.45rem 1rem rgba(110,64,8,.6);
}
[data-theme="neon"] .podium .top{
  background:radial-gradient(60% 70% at 50% 32%, #ffffff 0%, #93c5fd 30%, #3b82f6 60%, #7c3aed 86%, #3b1a86 100%);
  box-shadow:0 0 2.6rem rgba(96,165,250,.8), inset 0 -.3rem .8rem rgba(30,20,90,.6);
}
.podium .side{
  position:absolute;left:50%;transform:translateX(-50%);bottom:1.1rem;
  width:16.5rem;height:2.6rem;border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(180deg,#C98B22 0%,#8A5710 55%,#4E2F07 100%);
  box-shadow:0 .6rem 2.2rem rgba(255,150,30,.35);
}
[data-theme="neon"] .podium .side{background:linear-gradient(180deg,#3b82f6 0%,#4c1d95 55%,#160b3a 100%)}

.coin{
  position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%);
  width:14rem;z-index:5;
  filter:drop-shadow(0 .8rem 1.6rem rgba(0,0,0,.55)) drop-shadow(0 0 2.6rem rgba(255,180,50,.55));
  animation:float 4.2s ease-in-out infinite;
}
[data-theme="neon"] .coin{
  filter:drop-shadow(0 .8rem 1.6rem rgba(0,0,0,.55)) drop-shadow(0 0 2.8rem rgba(120,180,255,.75)) hue-rotate(178deg) saturate(1.25) brightness(1.05);
}
.coin-s{position:absolute;z-index:5;opacity:.95;filter:drop-shadow(0 .4rem .9rem rgba(0,0,0,.5)) drop-shadow(0 0 1.2rem rgba(255,180,50,.45))}
[data-theme="neon"] .coin-s{filter:drop-shadow(0 .4rem .9rem rgba(0,0,0,.5)) drop-shadow(0 0 1.4rem rgba(120,180,255,.6)) hue-rotate(178deg) saturate(1.25) brightness(1.05)}
.coin-a{width:4.4rem;left:3.6rem;bottom:7rem;transform:rotate(-16deg);animation:float 5.2s ease-in-out infinite .4s}
.coin-b{width:5.4rem;right:2.8rem;bottom:4.4rem;transform:rotate(14deg);animation:float 4.6s ease-in-out infinite .9s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -.7rem}}
@media (prefers-reduced-motion:reduce){.coin,.coin-s{animation:none}}

/* ============ feature cards ============ */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.4rem}
.f{
  position:relative;
  padding:1rem .9rem 1.05rem;border-radius:1.1rem;
  background:linear-gradient(180deg,rgba(30,22,13,.9),rgba(13,10,6,.92));
  border:.1rem solid var(--line2);
  box-shadow:0 .5rem 1.6rem rgba(0,0,0,.5), inset 0 .1rem 0 rgba(255,220,140,.06);
}
.f .fh{display:flex;align-items:flex-start;gap:.55rem}
.f .fi{width:2.1rem;height:2.1rem;flex:none;margin-top:.05rem}
.f .ft{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.22rem;line-height:1.12;letter-spacing:.01em;color:var(--g-1)}
[data-theme="neon"] .f .ft{color:#a7d8ff}
.f.c2 .ft{color:#FFC97A}[data-theme="neon"] .f.c2 .ft{color:#f0a7f5}
.f.c3 .ft{color:#FFD98A}[data-theme="neon"] .f.c3 .ft{color:#b9c0ff}
.f .fd{margin-top:.5rem;font-size:1.05rem;line-height:1.32;color:#b9ac95}
[data-theme="neon"] .f .fd{color:#9fb2d4}

/* ============ CTA ============ */
.cta{
  margin-top:1.4rem;width:100%;height:5.6rem;border:0;border-radius:99rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  background:var(--btn);
  box-shadow:0 .8rem 2.4rem rgba(255,165,35,.45), inset 0 .15rem 0 rgba(255,255,255,.65), inset 0 -.2rem .4rem rgba(140,80,10,.35);
  font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;font-size:2.4rem;letter-spacing:.02em;
  color:#3b2405;
  -webkit-tap-highlight-color:transparent;
  animation:pulse 2.4s ease-in-out infinite;
}
[data-theme="neon"] .cta{color:#fff;box-shadow:0 .8rem 2.6rem rgba(120,120,255,.5), inset 0 .15rem 0 rgba(255,255,255,.35)}
.cta:active{transform:translateY(.15rem) scale(.995)}
.cta .rk{font-size:2.2rem;font-style:normal;line-height:1}
.cta .ar{font-size:2.2rem;font-weight:900;font-style:normal;opacity:.8}
@keyframes pulse{0%,100%{box-shadow:0 .8rem 2.4rem rgba(255,165,35,.4), inset 0 .15rem 0 rgba(255,255,255,.65), inset 0 -.2rem .4rem rgba(140,80,10,.35)}50%{box-shadow:0 .8rem 3.4rem rgba(255,180,50,.72), inset 0 .15rem 0 rgba(255,255,255,.65), inset 0 -.2rem .4rem rgba(140,80,10,.35)}}
@media (prefers-reduced-motion:reduce){.cta{animation:none}}

/* ============ foot bar ============ */
.foot{
  margin-top:1.3rem;display:grid;grid-template-columns:1.3fr 1.02fr .88fr;
  border-radius:1.1rem;overflow:hidden;
  background:linear-gradient(180deg,rgba(26,19,11,.92),rgba(11,8,5,.94));
  border:.1rem solid var(--line2);
}
.foot .cell{display:flex;align-items:center;gap:.6rem;padding:.95rem .8rem}
.foot .cell + .cell{border-left:.1rem solid var(--line2)}
.foot .fi{width:2.2rem;height:2.2rem;flex:none}
.foot .k{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.02em;color:var(--g-1)}
[data-theme="neon"] .foot .k{color:#8ecbff}
.foot .v{font-size:.9rem;color:#b0a48e;margin-top:.15rem;line-height:1.25}
[data-theme="neon"] .foot .v{color:#94a8c9}
.foot .t{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.7rem;color:#fff;letter-spacing:.04em;margin-top:.1rem}

/* ============ modal ============ */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,3,2,.72);backdrop-filter:blur(.5rem);-webkit-backdrop-filter:blur(.5rem);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;
}
.modal.on{opacity:1;visibility:visible}
.sheet{
  width:48rem;max-width:100%;max-height:94vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:2.2rem 2.2rem 0 0;
  background:linear-gradient(180deg,#1a130b 0%,#100c07 55%,#0b0805 100%);
  border:.12rem solid var(--line);border-bottom:0;
  box-shadow:0 -1.6rem 5rem rgba(0,0,0,.7), 0 0 4rem rgba(255,170,40,.12);
  padding:1.6rem 1.6rem 2.2rem;
  transform:translateY(4rem);transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
[data-theme="neon"] .sheet{background:linear-gradient(180deg,#0d1a44 0%,#081128 55%,#04081c 100%)}
.modal.on .sheet{transform:translateY(0)}
@media (min-height:720px) and (min-width:481px){
  .modal{align-items:center}
  .sheet{border-radius:2.2rem;border-bottom:.12rem solid var(--line);max-height:88vh}
}

.sh-top{display:flex;align-items:center;gap:1rem}
.sh-top .lbl{flex:1;font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.06em;color:var(--g-2)}
[data-theme="neon"] .sh-top .lbl{color:#7DD3FC}
.x{
  width:3rem;height:3rem;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);color:#cdbfa6;font-size:1.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
}
.x:active{background:rgba(255,255,255,.14)}

.bar{margin-top:1rem;height:.6rem;border-radius:99rem;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:16.6%;border-radius:99rem;background:var(--btn);transition:width .3s ease;box-shadow:0 0 1.2rem rgba(255,180,50,.6)}

.q{margin-top:1.9rem}
.q .qt{font-family:'Montserrat',sans-serif;font-weight:800;font-size:2.15rem;line-height:1.24;color:#fff;
}
.opts{margin-top:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.opt{
  width:100%;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:1rem;
  min-height:5.2rem;padding:1rem 1.4rem;border-radius:1.2rem;
  background:linear-gradient(180deg,rgba(38,28,16,.9),rgba(18,13,8,.9));
  border:.12rem solid var(--line2);
  color:#f0e6d4;font-size:1.6rem;font-weight:600;font-family:inherit;
  transition:border-color .16s, background .16s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.opt .dot{
  width:2.2rem;height:2.2rem;flex:none;border-radius:50%;
  border:.16rem solid rgba(255,200,90,.4);
  display:flex;align-items:center;justify-content:center;
}
[data-theme="neon"] .opt .dot{border-color:rgba(125,211,252,.45)}
.opt .dot::after{content:"";width:1rem;height:1rem;border-radius:50%;background:var(--btn);transform:scale(0);transition:transform .16s}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:rgba(255,200,90,.85);background:linear-gradient(180deg,rgba(72,50,18,.95),rgba(32,22,10,.95));box-shadow:0 0 1.8rem rgba(255,170,40,.25)}
[data-theme="neon"] .opt.sel{border-color:rgba(125,211,252,.9);background:linear-gradient(180deg,rgba(28,50,110,.95),rgba(12,22,58,.95));box-shadow:0 0 1.8rem rgba(96,165,250,.3)}
.opt.sel .dot::after{transform:scale(1)}

.mail{margin-top:1.5rem}
.mail input{
  width:100%;height:5.4rem;padding:0 1.6rem;border-radius:1.2rem;
  background:linear-gradient(180deg,rgba(38,28,16,.9),rgba(18,13,8,.9));
  border:.12rem solid var(--line2);
  color:#fff;font-family:inherit;font-size:1.65rem;font-weight:600;
  outline:none;transition:border-color .16s, box-shadow .16s;
  -webkit-appearance:none;appearance:none;
}
.mail input::placeholder{color:#7d7261;font-weight:500}
.mail input:focus{border-color:rgba(255,200,90,.8);box-shadow:0 0 1.8rem rgba(255,170,40,.22)}
[data-theme="neon"] .mail input:focus{border-color:rgba(125,211,252,.9);box-shadow:0 0 1.8rem rgba(96,165,250,.28)}
.mail input.bad{border-color:rgba(255,90,90,.85);box-shadow:0 0 1.6rem rgba(255,70,70,.2)}
.mail .err{
  margin-top:.8rem;min-height:1.5rem;font-size:1.15rem;font-weight:600;color:#ff6b6b;
  opacity:0;transition:opacity .16s;
}
.mail .err.on{opacity:1}
.mail .note{margin-top:.9rem;display:flex;align-items:flex-start;gap:.6rem;font-size:1.08rem;line-height:1.4;color:#9d8f78}
[data-theme="neon"] .mail .note{color:#8ba0c4}
.mail .note svg{width:1.5rem;height:1.5rem;flex:none;margin-top:.1rem}

.nav{margin-top:1.6rem;display:flex;align-items:center;gap:1rem}
.back{
  height:4.6rem;padding:0 1.8rem;border-radius:99rem;cursor:pointer;
  background:rgba(255,255,255,.06);border:.1rem solid var(--line2);color:#c9bba3;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.4rem;
  -webkit-tap-highlight-color:transparent;
}
.next{
  flex:1;height:4.6rem;border:0;border-radius:99rem;cursor:pointer;
  background:var(--btn);color:#3b2405;
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:.02em;
  box-shadow:0 .5rem 1.8rem rgba(255,165,35,.4);
  -webkit-tap-highlight-color:transparent;
}
[data-theme="neon"] .next{color:#fff;box-shadow:0 .5rem 1.8rem rgba(120,120,255,.45)}
.next[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.hintline{margin-top:1.1rem;text-align:center;font-size:1.05rem;color:#8b7f6c}

/* done screen */
.done{display:none;text-align:center;padding:1rem 0 .4rem}
.done.on{display:block}
.done .tick{
  width:8.4rem;height:8.4rem;margin:1rem auto 0;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 35%, #FFF0B0, #F5B02A 55%, #A9691A 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 3rem rgba(255,175,45,.6);
}
[data-theme="neon"] .done .tick{background:radial-gradient(60% 60% at 50% 35%, #ffffff, #3b82f6 55%, #7c3aed 100%)}
.done .tick svg{width:4.2rem;height:4.2rem}
.done h3{
  margin-top:1.6rem;font-family:'Montserrat',sans-serif;font-weight:900;font-style:italic;font-size:3rem;
  background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.done p{margin-top:.9rem;font-size:1.45rem;line-height:1.5;color:#c4b69e}
[data-theme="neon"] .done p{color:#a6b8d6}
.done .card{
  margin-top:1.6rem;padding:1.4rem;border-radius:1.2rem;
  background:linear-gradient(180deg,rgba(40,29,15,.9),rgba(16,12,7,.9));
  border:.12rem solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:.9rem;
}
.done .card .lab{font-size:1.25rem;color:#b3a58e}
.done .card .val{
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.1rem;
  background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}