/* self-hosted fonts (step TH1): no wait for Google */
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fonts/space-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: dark glossy single page. Every section sits on its own 3D scene (grid floors, gold horizon arcs, Glass candles). Amber accent, mobile first. */
:root{
  --bg:#040507; --line:rgba(255,255,255,.10); --fg:#f2f4f8; --muted:#a9b0bd; --dim:#8a93a4;
  --accent:#f2b63c; --accent-hi:#ffd978; --accent-ink:#1a1305; --good:#3fa981; --bad:#d66a5f; --blue:#6f8fd8;
  --display:"Space Grotesk",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.wrap{position:relative;width:100%;max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.gold-text{background:linear-gradient(100deg,#fff3d6,var(--accent) 40%,#b9802a 60%,var(--accent) 80%,#fff3d6);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s linear infinite;filter:drop-shadow(0 3px 0 rgba(110,70,8,.65)) drop-shadow(0 10px 22px rgba(242,182,60,.35))}
@keyframes shine{to{background-position:200% 50%}}

/* glossy 3D buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;color:var(--fg);border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 50%,rgba(255,255,255,.10));box-shadow:0 4px 0 rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .12s,box-shadow .12s}
.btn::after{content:"";position:absolute;left:6%;right:6%;top:2px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.gold{background:linear-gradient(180deg,#ffe9a6 0%,#f7c548 45%,#d9941c 100%);color:var(--accent-ink);border-color:#ffe9b0;font-weight:700;box-shadow:0 5px 0 #8a5a0e,0 12px 28px rgba(242,182,60,.35),0 0 30px rgba(242,182,60,.25),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 6px rgba(120,70,0,.35)}
.btn.gold::after{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0))}
.btn.gold::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:40px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-18deg);animation:scan 3.6s ease-in-out infinite;pointer-events:none}
.btn.gold:active{box-shadow:0 1px 0 #8a5a0e,0 4px 12px rgba(242,182,60,.3),inset 0 1px 0 rgba(255,255,255,.8)}
@keyframes scan{0%{left:-30%}60%,100%{left:130%}}

/* 3D scene pieces, reused by every section */
.sec{position:relative;overflow:hidden;isolation:isolate;padding-block:96px}
.scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.grid3d{position:absolute;left:-50%;right:-50%;height:460px;background-image:linear-gradient(rgba(242,182,60,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(150,175,230,.18) 1px,transparent 1px);background-size:64px 64px}
.grid3d.floor{bottom:-40px;transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%)}
.grid3d.ceil{top:-40px;transform:perspective(420px) rotateX(-64deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(to bottom,#000 5%,transparent 80%);mask-image:linear-gradient(to bottom,#000 5%,transparent 80%);opacity:.7}
.grid3d.move{animation:floor 3.5s linear infinite}
@keyframes floor{to{background-position:0 64px,0 0}}
.arc{position:absolute;left:50%;width:2400px;height:1500px;margin-left:-1200px;border-radius:50%;background:var(--bg);box-shadow:0 -2px 0 rgba(255,214,120,.95),0 -26px 70px rgba(242,182,60,.55),0 -120px 220px rgba(242,182,60,.22)}
.arc.low{bottom:-1180px}
.arc.top{top:-1260px;box-shadow:0 2px 0 rgba(255,214,120,.95),0 26px 70px rgba(242,182,60,.5),0 120px 220px rgba(242,182,60,.2)}
.glow{position:absolute;border-radius:50%;filter:blur(10px)}
.sweep{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,235,190,.12) 50%,transparent 58%);background-size:250% 100%;animation:sweep 7s ease-in-out infinite}
@keyframes sweep{from{background-position:120% 0}to{background-position:-120% 0}}
.bgchart{position:absolute;left:-5%;right:-5%;bottom:-30px;height:70%;transform:perspective(900px) rotateX(38deg);transform-origin:50% 100%;opacity:.45;-webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent)}
.bgchart canvas{width:100%;height:100%;display:block}
@media (max-width:760px){.arc{width:1300px;height:900px;margin-left:-650px}.arc.low{bottom:-660px}.arc.top{top:-680px}}

/* top bars */
.pick{background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.pick .wrap{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding-block:8px}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);flex-wrap:wrap;justify-content:center}
.seg a{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:#c3cad6}
.seg a:hover{color:#fff}
.seg a.on{background:linear-gradient(180deg,#ffe9a6,#f7c548 50%,#d9941c);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 14px rgba(242,182,60,.4)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex-wrap:wrap;padding-block:8px;border-radius:20px;border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.32);background:linear-gradient(165deg,rgba(34,38,50,.78),rgba(10,12,16,.72));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 22px var(--display);letter-spacing:-.02em}
.mark{width:30px;height:30px;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.sec:not(.hero)::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,120,.7),transparent);box-shadow:0 0 18px rgba(242,182,60,.5)}
.hero h1{text-shadow:0 2px 0 rgba(255,255,255,.18),0 6px 24px rgba(0,0,0,.7)}
.stars{position:absolute;inset:0;width:100%;height:100%}
.rim{position:absolute;left:50%;width:2600px;height:1600px;margin-left:-1300px;bottom:-1220px;border-radius:50%;border-top:1px solid rgba(255,235,190,.35);box-shadow:0 -40px 90px rgba(242,182,60,.12)}
.rv{opacity:.55;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (min-width:901px){.p3{-webkit-box-reflect:below 8px linear-gradient(transparent 72%,rgba(255,255,255,.16))}}
@media (max-width:760px){.rim{width:1400px;margin-left:-700px;bottom:-680px}}
.nav{display:flex;gap:24px;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--fg)}
.top .acts{display:flex;gap:8px}
.top .btn{min-height:40px;padding:0 18px;font-size:14px}
@media (max-width:860px){.nav{display:none}}

/* hero */
.hero{padding-block:72px 0;text-align:center}
.blades{position:absolute;inset:0;width:100%;height:100%}
.blades use{animation:blade 6s ease-in-out infinite}
.blades use:nth-child(2){animation-delay:-1.5s}.blades use:nth-child(3){animation-delay:-3s}.blades use:nth-child(4){animation-delay:-4.5s}
@keyframes blade{50%{opacity:.45}}
.tag{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent)}
.hero h1{margin-top:26px;font-size:clamp(40px,8.5vw,92px);line-height:1.02;font-weight:600;letter-spacing:-.04em}
.hero .sub{margin:22px auto 0;max-width:620px;color:var(--muted);font-size:clamp(16px,2.2vw,19px)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.fine{margin-top:16px;color:var(--dim);font-size:13px}
.badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.badge{position:relative;min-width:170px;padding:12px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(4,5,7,.55);backdrop-filter:blur(8px)}
.badge b{display:block;font:600 19px var(--display)}
.badge span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9cfda}
.badge::before,.badge::after{content:"";position:absolute;width:12px;height:12px;background:var(--accent-hi);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 6px var(--accent))}
.badge::before{top:-6px;right:28px}.badge::after{bottom:-6px;left:28px}
.stage{margin-top:56px;perspective:1500px}
.panel{position:relative;margin:0 auto;max-width:960px;border:1px solid rgba(255,255,255,.2);border-radius:24px 24px 0 0;border-bottom:0;background:linear-gradient(165deg,#1d222c,#090b0f 45%,#06080b);overflow:hidden;transform:rotateX(10deg);transform-origin:50% 100%;box-shadow:0 -10px 90px rgba(242,182,60,.18),inset 0 1px 0 rgba(255,255,255,.35)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 32%);pointer-events:none}
.panel{transition:transform .25s ease-out;will-change:transform}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.pill{padding:4px 12px;border-radius:999px;border:1px solid rgba(242,182,60,.4);background:rgba(242,182,60,.1);color:var(--accent-hi);font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.pill.dev{border-color:rgba(111,143,216,.5);background:rgba(111,143,216,.14);color:#c4d3fb}
.panel canvas{display:block;width:100%;height:clamp(200px,32vw,320px)}

/* section heads + cards */
.head{max-width:680px}
.head.c{margin:0 auto;text-align:center}
.head h2{margin-top:14px;font-size:clamp(30px,5vw,52px);line-height:1.06;font-weight:600}
.head p{margin-top:14px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.card,.rule,.sum,.feat div,.notice,.p3{position:relative;overflow:hidden;isolation:isolate}
.card::before,.rule::before,.sum::before,.feat div::before,.notice::before,.p3::before{content:"";position:absolute;inset:0 0 auto 0;height:48%;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0));pointer-events:none}
.card{min-width:0;display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:22px;border:1px solid transparent;box-shadow:0 26px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s;background:linear-gradient(165deg,rgba(28,33,43,.92),rgba(10,12,17,.92) 70%) padding-box,linear-gradient(120deg,rgba(255,226,160,.8),rgba(255,255,255,.06) 25%,rgba(110,140,200,.65) 50%,rgba(255,255,255,.06) 75%,rgba(255,226,160,.8)) border-box;background-size:100% 100%,300% 300%;animation:edge 8s linear infinite;backdrop-filter:blur(6px)}
@keyframes edge{to{background-position:0 0,300% 0}}
.card:hover{transform:translateY(-4px)}
.card h3{font-size:24px;font-weight:600}
.card p{color:var(--muted);font-size:15px}
.card .go{margin-top:auto;padding-top:10px;font-weight:600;font-size:14px;color:var(--accent-hi)}
@media (max-width:860px){.grid3{grid-template-columns:1fr}.sec{padding-block:72px}}

/* platform: three tilted 3D panels */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;perspective:1300px}
.p3{min-width:0;border-radius:20px;border:1px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.34);background:linear-gradient(170deg,rgba(26,30,40,.92),rgba(7,9,12,.95));box-shadow:0 30px 60px rgba(0,0,0,.65),0 0 50px rgba(242,182,60,.08);transform:rotateY(var(--ry,0deg)) rotateX(5deg);transition:transform .35s}
.p3:nth-child(1){--ry:14deg}.p3:nth-child(3){--ry:-14deg}
.p3:hover{transform:none}
.p3 .pbar{padding:10px 14px}
.p3 h3{font-size:18px;font-weight:600}
.p3 canvas{display:block;width:100%;height:240px}
.p3 .cap{padding:14px 16px 18px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.dom{height:240px;display:flex;flex-direction:column;justify-content:center;padding:6px 12px;font:12px/1 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.dom div{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;height:19px;text-align:center}
.dom i{position:absolute;top:2px;bottom:2px;border-radius:3px}
.dom .a i{left:66%;background:linear-gradient(90deg,rgba(214,106,95,.55),rgba(214,106,95,.15))}
.dom .b i{right:66%;background:linear-gradient(270deg,rgba(63,169,129,.55),rgba(63,169,129,.15))}
.dom span{position:relative}
.dom .a span:last-child{color:#f0a89f}.dom .b span:first-child{color:#8fdcbc}
.dom .px{background:linear-gradient(90deg,transparent,rgba(242,182,60,.25),transparent);color:var(--accent-hi);font-weight:700;border-block:1px solid rgba(242,182,60,.4)}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.feat div{min-width:0;padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#1b1f28,#0b0d11);box-shadow:0 14px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.feat b{display:block;font:600 17px var(--display);margin-bottom:6px}
.feat span{color:var(--muted);font-size:14px;display:block}
@media (max-width:900px){.trio{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.p3:nth-child(n){--ry:0deg}.feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.feat{grid-template-columns:1fr}}

/* challenge */
.chal{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:stretch;margin-top:40px}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rule{padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(30,34,44,.85),rgba(10,12,16,.85));box-shadow:0 14px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.rule b{display:block;font:600 30px/1.1 var(--display);margin-top:8px;font-variant-numeric:tabular-nums}
.rule.hl{border-color:rgba(242,182,60,.45);background:linear-gradient(180deg,rgba(80,60,20,.85),rgba(20,16,8,.85))}
.rule.hl b{color:var(--accent-hi)}
.sum{display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:22px;border:1px solid rgba(242,182,60,.3);background:linear-gradient(160deg,rgba(60,46,16,.9),rgba(10,10,12,.9) 60%);box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 50px rgba(242,182,60,.1),inset 0 1px 0 rgba(255,255,255,.22)}
.sum h3{font-size:26px;font-weight:600}
.sum p{color:#d8dde5;font-size:15px}
.calc{font:13px/1.9 ui-monospace,Menlo,Consolas,monospace;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-variant-numeric:tabular-nums}
.calc div{display:flex;justify-content:space-between;gap:12px}
.calc .t{color:var(--accent-hi);font-weight:600;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.sum .btn{align-self:flex-start;margin-top:auto}
@media (max-width:860px){.chal{grid-template-columns:1fr}}
@media (max-width:420px){.rules{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps li{counter-increment:s;min-width:0;padding:28px;border-radius:22px;background:linear-gradient(180deg,#fffdf6,#e9e5d8);color:#181b20;box-shadow:0 24px 44px rgba(0,0,0,.55),inset 0 1px 0 #fff,inset 0 -4px 10px rgba(90,70,20,.12)}
.steps li::before{content:"Step " counter(s);display:inline-block;padding:4px 12px;border-radius:999px;background:linear-gradient(180deg,#ffe9b0,#f2d58a);font-size:12px;font-weight:700;color:#5a4a1e}
.steps h3{margin:16px 0 8px;font-size:21px;font-weight:600}
.steps p{color:#4d5246;font-size:14.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.notice{margin-top:40px;padding:26px 28px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(30,34,44,.85),rgba(10,12,16,.85));box-shadow:0 14px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.notice h3{font-size:19px;font-weight:600}
.notice p{margin-top:8px;color:var(--muted);font-size:14.5px}
.notice ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.notice li{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px}

/* final + footer */
.final{text-align:center;padding-block:300px 120px}
.final h2{font-size:clamp(34px,6vw,64px);line-height:1.04;font-weight:600}
.final p{margin:18px auto 0;max-width:520px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding-block:48px 40px;background:rgba(255,255,255,.015)}
.fcols{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.fcols .col{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted)}
.fcols .col a:hover{color:var(--fg)}
.fcols p{max-width:320px;color:var(--dim);font-size:13px;margin-top:10px}
.legal{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);color:#7b8494;font-size:12.5px;line-height:1.7}.legal+.legal{margin-top:6px;padding-top:0;border-top:0}.legal a{color:#c9a24a}
@media (prefers-reduced-motion:reduce){.gold-text,.btn.gold::before,.grid3d.move,.sweep,.blades use,.card{animation:none}}
.seg .soon{padding:6px 14px;font-size:12.5px;font-weight:600;color:#7b8494;display:inline-flex;gap:6px;align-items:center}.seg .soon em{font-style:normal;font-size:10px;padding:1px 7px;border-radius:999px;background:rgba(111,143,216,.18);color:#c4d3fb}

/* step TH1: the sun / moon switch and the Dashboard button (shown when fz_in=1 says the client is signed in) */
.thm{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);display:inline-grid;place-items:center;cursor:pointer;flex:none;padding:0}
.thm:hover{border-color:var(--accent)}
.thm .i-moon{display:none}
:root[data-theme=light] .thm{background:#fff}
:root[data-theme=light] .thm .i-sun{display:none}
:root[data-theme=light] .thm .i-moon{display:block}
:root[data-in="1"] .acts .out{display:none}
:root:not([data-in="1"]) .acts .in{display:none}

/* light theme: made from the dark rules above (step TH1) */
:root[data-theme=light]{--bg:#f9f7f3;--line:rgba(24,22,16,0.07);--fg:#304673;--muted:#4d525a;--dim:#676e79;--accent:#a36d00;--accent-hi:#a37500;--good:#22815d;--bad:#8c2217;--blue:#183b8b}
:where(:root[data-theme=light]) .gold-text:where(:not(.panel *)){filter:drop-shadow(0 3px 0 rgba(247,226,192,0.65)) drop-shadow(0 10px 22px rgba(242,182,60,0.245))}
:where(:root[data-theme=light]) .btn:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.165);background:linear-gradient(180deg,rgba(255,255,255,0.22),rgba(24,22,16,0.035) 50%,rgba(24,22,16,0.07));box-shadow:0 4px 0 rgba(24,22,16,0.121),0 10px 22px rgba(24,22,16,0.099),inset 0 1px 0 rgba(255,255,255,0.45)}
:where(:root[data-theme=light]) .btn:where(:not(.panel *))::after{background:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(24,22,16,0))}
:where(:root[data-theme=light]) .btn:active:where(:not(.panel *)){box-shadow:0 1px 0 rgba(24,22,16,0.121),0 4px 10px rgba(24,22,16,0.088),inset 0 1px 0 rgba(255,255,255,0.4)}
:where(:root[data-theme=light]) .btn.gold:where(:not(.panel *)){box-shadow:0 5px 0 #f3d9b0,0 12px 28px rgba(242,182,60,0.245),0 0 30px rgba(242,182,60,0.175),inset 0 1px 0 rgba(255,255,255,0.8),inset 0 -3px 6px rgba(251,224,187,0.35)}
:where(:root[data-theme=light]) .btn.gold:where(:not(.panel *))::after{background:linear-gradient(180deg,rgba(255,255,255,0.65),rgba(24,22,16,0))}
:where(:root[data-theme=light]) .btn.gold:where(:not(.panel *))::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,0.8),transparent)}
:where(:root[data-theme=light]) .btn.gold:active:where(:not(.panel *)){box-shadow:0 1px 0 #f3d9b0,0 4px 12px rgba(242,182,60,0.21),inset 0 1px 0 rgba(255,255,255,0.8)}
:where(:root[data-theme=light]) .grid3d:where(:not(.panel *)){background-image:linear-gradient(rgba(242,182,60,0.22) 1px,transparent 1px),linear-gradient(90deg,rgba(150,175,230,0.18) 1px,transparent 1px)}
:where(:root[data-theme=light]) .arc:where(:not(.panel *)){box-shadow:0 -2px 0 rgba(255,214,120,0.665),0 -26px 70px rgba(242,182,60,0.385),0 -120px 220px rgba(242,182,60,0.154)}
:where(:root[data-theme=light]) .arc.top:where(:not(.panel *)){box-shadow:0 2px 0 rgba(255,214,120,0.665),0 26px 70px rgba(242,182,60,0.35),0 120px 220px rgba(242,182,60,0.14)}
:where(:root[data-theme=light]) .sweep:where(:not(.panel *)){background:linear-gradient(105deg,transparent 42%,rgba(255,235,190,0.12) 50%,transparent 58%)}
:where(:root[data-theme=light]) .pick:where(:not(.panel *)){background:rgba(24,22,16,0.021)}
:where(:root[data-theme=light]) .seg:where(:not(.panel *)){background:rgba(24,22,16,0.035)}
:where(:root[data-theme=light]) .seg a:where(:not(.panel *)){color:#35393f}
:where(:root[data-theme=light]) .seg a:hover:where(:not(.panel *)){color:#131416}
:where(:root[data-theme=light]) .seg a.on:where(:not(.panel *)){box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 0 14px rgba(242,182,60,0.28)}
:where(:root[data-theme=light]) .top .wrap:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.105);border-top-color:rgba(24,22,16,0.2);background:linear-gradient(165deg,rgba(239,235,225,0.78),rgba(249,247,243,0.72));box-shadow:0 16px 36px rgba(24,22,16,0.11),inset 0 1px 0 rgba(255,255,255,0.12)}
:where(:root[data-theme=light]) .mark:where(:not(.panel *)){filter:drop-shadow(0 6px 10px rgba(24,22,16,0.132))}
:where(:root[data-theme=light]) .sec:not(.hero):where(:not(.panel *))::before{background:linear-gradient(90deg,transparent,rgba(255,214,120,0.7),transparent);box-shadow:0 0 18px rgba(242,182,60,0.35)}
:where(:root[data-theme=light]) .hero h1:where(:not(.panel *)){text-shadow:0 2px 0 rgba(24,22,16,0.126),0 6px 24px rgba(24,22,16,0.154)}
:where(:root[data-theme=light]) .rim:where(:not(.panel *)){border-top:1px solid rgba(255,235,190,0.35);box-shadow:0 -40px 90px rgba(242,182,60,0.084)}
:where(:root[data-theme=light]) .tag:where(:not(.panel *)){background:rgba(24,22,16,0.028)}
:where(:root[data-theme=light]) .badge:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.2);background:rgba(249,247,243,0.55)}
:where(:root[data-theme=light]) .badge span:where(:not(.panel *)){color:#313439}
:where(:root[data-theme=light]) .pill:where(:not(.panel *)){border:1px solid rgba(242,182,60,0.4);background:rgba(242,182,60,0.1)}
:where(:root[data-theme=light]) .pill.dev:where(:not(.panel *)){border-color:rgba(111,143,216,0.5);background:rgba(111,143,216,0.14);color:#002da3}
:where(:root[data-theme=light]) .card:where(:not(.panel *))::before,:where(:root[data-theme=light]) .rule:where(:not(.panel *))::before,:where(:root[data-theme=light]) .sum:where(:not(.panel *))::before,:where(:root[data-theme=light]) .feat div:where(:not(.panel *))::before,:where(:root[data-theme=light]) .notice:where(:not(.panel *))::before,:where(:root[data-theme=light]) .p3:where(:not(.panel *))::before{background:linear-gradient(180deg,rgba(24,22,16,0.091),rgba(24,22,16,0))}
:where(:root[data-theme=light]) .card:where(:not(.panel *)){box-shadow:0 26px 50px rgba(24,22,16,0.132),inset 0 1px 0 rgba(255,255,255,0.2);background:linear-gradient(165deg,rgba(241,238,230,0.92),rgba(249,247,243,0.92) 70%) padding-box,linear-gradient(120deg,rgba(255,226,160,0.8),rgba(24,22,16,0.042) 25%,rgba(110,140,200,0.65) 50%,rgba(24,22,16,0.042) 75%,rgba(255,226,160,0.8)) border-box}
:where(:root[data-theme=light]) .p3:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.135);border-top-color:rgba(24,22,16,0.2);background:linear-gradient(170deg,rgba(242,239,231,0.92),rgba(249,247,243,0.95));box-shadow:0 30px 60px rgba(24,22,16,0.143),0 0 50px rgba(242,182,60,0.056)}
:where(:root[data-theme=light]) .feat div:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.105);background:linear-gradient(180deg,#f2efe7,#f9f7f3);box-shadow:0 14px 28px rgba(24,22,16,0.11),inset 0 1px 0 rgba(255,255,255,0.2)}
:where(:root[data-theme=light]) .rule:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.105);background:linear-gradient(180deg,rgba(241,237,229,0.85),rgba(249,247,243,0.85));box-shadow:0 14px 28px rgba(24,22,16,0.11),inset 0 1px 0 rgba(255,255,255,0.2)}
:where(:root[data-theme=light]) .rule.hl:where(:not(.panel *)){border-color:rgba(242,182,60,0.45);background:linear-gradient(180deg,rgba(241,230,209,0.85),rgba(249,247,243,0.85))}
:where(:root[data-theme=light]) .sum:where(:not(.panel *)){border:1px solid rgba(242,182,60,0.3);background:linear-gradient(160deg,rgba(244,237,220,0.9),rgba(249,247,243,0.9) 60%);box-shadow:0 26px 50px rgba(24,22,16,0.121),0 0 50px rgba(242,182,60,0.07),inset 0 1px 0 rgba(255,255,255,0.22)}
:where(:root[data-theme=light]) .sum p:where(:not(.panel *)){color:#25282b}
:where(:root[data-theme=light]) .calc:where(:not(.panel *)){background:rgba(249,247,243,0.4)}
:where(:root[data-theme=light]) .steps li:where(:not(.panel *)){box-shadow:0 24px 44px rgba(24,22,16,0.121),inset 0 1px 0 #ffffff,inset 0 -4px 10px rgba(241,230,203,0.12)}
:where(:root[data-theme=light]) .notice:where(:not(.panel *)){border:1px solid rgba(24,22,16,0.105);background:linear-gradient(180deg,rgba(241,237,229,0.85),rgba(249,247,243,0.85));box-shadow:0 14px 28px rgba(24,22,16,0.11),inset 0 1px 0 rgba(255,255,255,0.2)}
:where(:root[data-theme=light]) footer:where(:not(.panel *)){background:rgba(24,22,16,0.01)}
:where(:root[data-theme=light]) .legal:where(:not(.panel *)){color:#757d89}
:where(:root[data-theme=light]) .legal a:where(:not(.panel *)){color:#88671b}
:where(:root[data-theme=light]) .seg .soon:where(:not(.panel *)){color:#757d89}
:where(:root[data-theme=light]) .seg .soon em:where(:not(.panel *)){background:rgba(111,143,216,0.18);color:#002da3}
/* light theme: hand-tuned (mockup) */
:root[data-theme=light]{
  --bg:#f6f3ec; --line:rgba(24,22,16,.13); --fg:#15171c; --muted:#4a5260; --dim:#667080;
  --accent:#9a6400; --accent-hi:#b97a08; --good:#16805a; --bad:#c0412f; --blue:#3a5cb5;
  color-scheme:light;
}
:root[data-theme=light] .gold-text{background-image:linear-gradient(100deg,#7a4d05,#c98a12 40%,#6b4204 60%,#c98a12 80%,#7a4d05);filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 8px 18px rgba(201,138,18,.25))}
:root[data-theme=light] .btn:not(.gold){color:var(--fg);border-color:rgba(24,22,16,.2);background:linear-gradient(180deg,#fff,#efebe1);box-shadow:0 4px 0 rgba(24,22,16,.16),0 10px 22px rgba(24,22,16,.12),inset 0 1px 0 #fff}
:root[data-theme=light] .btn.gold{box-shadow:0 5px 0 #8a5a0e,0 12px 26px rgba(160,105,10,.28),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 6px rgba(120,70,0,.35)}
:root[data-theme=light] .thm{background:#fff}
:root[data-theme=light] .pick{background:rgba(24,22,16,.03)}
:root[data-theme=light] .seg{background:rgba(24,22,16,.05)}
:root[data-theme=light] .seg a{color:#4a5260}
:root[data-theme=light] .seg a:hover{color:#000}
:root[data-theme=light] .seg a.on{color:#1a1305}
:root[data-theme=light] .seg .soon{color:#7a8290}
:root[data-theme=light] .seg .soon em,:root[data-theme=light] .pill.dev{color:#3a5cb5}
:root[data-theme=light] .top .wrap{background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(250,247,240,.88));box-shadow:0 10px 30px rgba(24,22,16,.10),inset 0 1px 0 #fff;border-color:rgba(24,22,16,.12)}
:root[data-theme=light] .nav .sub,:root[data-theme=light] .nav.open{background:linear-gradient(165deg,#fff,#f4f1e9);box-shadow:0 18px 40px rgba(24,22,16,.16)}
:root[data-theme=light] .nav .sub a:hover,:root[data-theme=light] .nav .sub a.cur{background:rgba(24,22,16,.06)}
:root[data-theme=light] .nav .sub a .tg{color:#9a6400}
:root[data-theme=light] .mtog{background:rgba(24,22,16,.05)}
:root[data-theme=light] .tag{background:rgba(255,255,255,.7)}
:root[data-theme=light] .badge{background:rgba(255,255,255,.78);box-shadow:0 8px 22px rgba(24,22,16,.08)}
:root[data-theme=light] .badge span{color:var(--muted)}
:root[data-theme=light] .card,:root[data-theme=light] #ways .card,:root[data-theme=light] .p3,:root[data-theme=light] .feat div,:root[data-theme=light] .rule,:root[data-theme=light] .notice,:root[data-theme=light] .steps li{background:linear-gradient(180deg,#ffffff,#f3efe6);color:var(--fg);border-color:rgba(24,22,16,.12);box-shadow:0 14px 34px rgba(24,22,16,.10),inset 0 1px 0 #fff}
:root[data-theme=light] .rule.hl,:root[data-theme=light] .sum{background:linear-gradient(170deg,#fff6dc,#f8e4a8);border-color:rgba(154,100,0,.35);box-shadow:0 14px 34px rgba(154,100,0,.14),inset 0 1px 0 #fff}
:root[data-theme=light] .sum p,:root[data-theme=light] .steps p{color:var(--muted)}
:root[data-theme=light] .calc{background:rgba(24,22,16,.05)}
:root[data-theme=light] footer{background:rgba(24,22,16,.03)}
:root[data-theme=light] .legal{color:#667080}
:root[data-theme=light] .legal a{color:#8a5a0e}
:root[data-theme=light] .fl-up,:root[data-theme=light] .fl-dn{color:inherit}
:root[data-theme=light] .tc-t{background:linear-gradient(180deg,#fff,#f1ede3);box-shadow:0 4px 12px rgba(24,22,16,.08)}
:root[data-theme=light] #ways .wc-bar i{background:rgba(24,22,16,.12)}
:root[data-theme=light] #ways .wc-bar b{color:#16805a}
:root[data-theme=light] #ways .wc-bar b:before{background:#16805a}
/* softer gold glow on a light page */
:root[data-theme=light] .arc{box-shadow:0 -2px 0 rgba(201,138,18,.9),0 -22px 60px rgba(226,160,30,.38),0 -110px 200px rgba(226,160,30,.16)}
:root[data-theme=light] .arc.top{box-shadow:0 2px 0 rgba(201,138,18,.9),0 22px 60px rgba(226,160,30,.34),0 110px 200px rgba(226,160,30,.14)}
:root[data-theme=light] .grid3d{background-image:linear-gradient(rgba(170,115,10,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(60,80,140,.16) 1px,transparent 1px)}
:root[data-theme=light] .sweep{background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%)}
:root[data-theme=light] canvas.stars{opacity:0}
/* trading screens stay dark, like the real chart on a dark skin */
:root[data-theme=light] .panel{--fg:#f2f4f8;--muted:#a9b0bd;--dim:#8a93a4;--line:rgba(255,255,255,.10);--accent:#f2b63c;--accent-hi:#ffd978;--good:#3fa981;--bad:#d66a5f;--blue:#6f8fd8;color:var(--fg);box-shadow:0 24px 50px rgba(24,22,16,.28)}
:root[data-theme=light] .hero h1{text-shadow:0 2px 0 #fff,0 12px 30px rgba(24,22,16,.10)}
:root[data-theme=light] .hero h1 .gold-text{filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 10px 20px rgba(201,138,18,.28))}
:root[data-theme=light] .top .wrap{border-color:rgba(24,22,16,.12)}
:root[data-theme=light] .logo .lw{background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%),linear-gradient(180deg,#30343d,#0e1014)}
:root[data-theme=light] .logo .lf,:root[data-theme=light] .logo .lx{background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),linear-gradient(180deg,#eaa91f,#c98a12 52%,#8a5a0e);filter:none}
:root[data-theme=light] .hero h1 .gold-text{text-shadow:none}
:root[data-theme=light] #ways h2,:root[data-theme=light] #ways .eyebrow,:root[data-theme=light] .sec h2{text-shadow:none}
:root[data-theme=light] #ways .ways-chart{background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(240,236,226,.6));border-color:rgba(24,22,16,.10);opacity:.5}