:root{--bg:#0b0820;--bg2:#140f33;--ink:#efeaff;--muted:#a79fcf;--lav:#b9a6ff;--lav2:#8a6cff;--line:rgba(185,166,255,.16);--card:rgba(255,255,255,.035);--r:18px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:Jost,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(1200px 800px at 70% -10%,#2a1f63 0,transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg) 40%);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--lav)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}.small{font-size:.85rem}
.grad{background:linear-gradient(90deg,#fff,#c8b6ff 50%,#8f74ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--lav);font-weight:500;margin-bottom:14px}
h1,h2,h3{font-weight:400;letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:300}
h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:300;margin-bottom:18px}
h3{font-size:1.1rem;font-weight:500;letter-spacing:.02em}
.beta-bar{text-align:center;font-size:.8rem;padding:8px 14px;background:linear-gradient(90deg,#2b1f6b,#4b33a8,#2b1f6b);color:#e9e2ff;letter-spacing:.02em}
.pill{display:inline-block;font-size:.66rem;letter-spacing:.16em;font-weight:600;background:#fff;color:#2b1f6b;border-radius:99px;padding:2px 8px;margin-right:6px}
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;background:rgba(11,8,32,.6);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-color:var(--line);background:rgba(11,8,32,.82)}
.logo{display:flex;align-items:center;gap:10px;color:#e9e2ff;text-decoration:none;letter-spacing:.32em;font-size:.95rem}
.logo svg{width:26px;height:26px;color:#cdbcff}
.site-header nav{display:none;gap:28px}
.site-header nav a{color:var(--muted);text-decoration:none;font-size:.9rem;transition:color .2s}.site-header nav a:hover{color:#fff}
@media(min-width:820px){.site-header nav{display:flex}}
.btn{--g:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:inherit;font-weight:500;letter-spacing:.03em;color:#160f38;background:linear-gradient(180deg,#f2edff,#c9b8ff);border-radius:999px;padding:12px 22px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .3s,filter .2s;box-shadow:0 8px 30px -8px rgba(150,120,255,.6)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(170,140,255,.85)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-lg{padding:18px 30px;font-size:1.05rem;width:100%}
@media(min-width:560px){.btn-lg{width:auto}}
.cta{position:relative;animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 34px -8px rgba(150,120,255,.55)}50%{box-shadow:0 10px 50px -4px rgba(170,140,255,.95),0 0 0 6px rgba(170,140,255,.08)}}
.spinner{display:none;width:18px;height:18px;border:2px solid rgba(22,15,56,.25);border-top-color:#160f38;border-radius:50%;animation:spin .7s linear infinite}
.loading .spinner{display:inline-block}.loading{pointer-events:none;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
/* hero */
.hero{position:relative;overflow:hidden;padding:40px 0 120px}
.hero-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:0 22px;display:grid;gap:36px;align-items:center}
@media(min-width:920px){.hero-inner{grid-template-columns:1.05fr .95fr;padding-top:40px}}
.lede{font-size:1.1rem;color:#cfc6f2;max-width:34em;margin:20px 0 28px;font-weight:300}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;will-change:transform;transition:transform .6s var(--ease)}
.orb-a{width:520px;height:520px;background:radial-gradient(circle,#6b4cff,transparent 65%);top:-140px;right:-120px}
.orb-b{width:420px;height:420px;background:radial-gradient(circle,#3c2aa8,transparent 65%);bottom:-120px;left:-140px}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 7% 10%,#ffffffa9,transparent),radial-gradient(1px 1px at 65% 28%,#ffffffc4,transparent),radial-gradient(1px 1px at 9% 31%,#ffffffa1,transparent),radial-gradient(1px 1px at 73% 16%,#ffffffdc,transparent),radial-gradient(1.2px 1.2px at 8% 74%,#ffffffe6,transparent),radial-gradient(2px 2px at 6% 72%,#ffffff9c,transparent),radial-gradient(1.2px 1.2px at 70% 16%,#ffffffbb,transparent),radial-gradient(1.5px 1.5px at 24% 14%,#ffffffdd,transparent),radial-gradient(1.2px 1.2px at 92% 9%,#b9a6ffc5,transparent),radial-gradient(1px 1px at 88% 69%,#ffffffe5,transparent),radial-gradient(2px 2px at 59% 47%,#ffffffbe,transparent),radial-gradient(1.5px 1.5px at 90% 32%,#ffffffb5,transparent),radial-gradient(1px 1px at 64% 44%,#ffffffdf,transparent),radial-gradient(2px 2px at 10% 16%,#ffffffba,transparent),radial-gradient(2px 2px at 20% 63%,#ffffffab,transparent),radial-gradient(2px 2px at 10% 98%,#ffffff9b,transparent),radial-gradient(1.5px 1.5px at 77% 64%,#ffffffc1,transparent),radial-gradient(2px 2px at 35% 61%,#ffffff9e,transparent);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}@keyframes twinkle2{0%{opacity:.6}50%{opacity:1}100%{opacity:.75}}
.waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:160px;z-index:1}
.hero-visual{position:relative;display:flex;justify-content:center}
.pack-wrap{position:relative;z-index:1;width:min(520px,100%)}
.hero-visual img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:packfloat 8s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.glow{position:absolute;inset:10% 15%;background:radial-gradient(circle,rgba(160,130,255,.45),transparent 70%);filter:blur(40px)}
@keyframes float{50%{transform:translateY(-10px)}}@keyframes packfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(-.6deg)}}
/* claim */
.claim{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;max-width:520px;backdrop-filter:blur(6px)}
.claim fieldset{border:0;margin-bottom:16px}
.claim legend{font-size:.9rem;margin-bottom:12px;color:#ddd5ff}
.chips{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:999px;padding:4px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{position:relative;z-index:1;text-align:center;padding:11px 0;border-radius:999px;cursor:pointer;color:var(--muted);font-weight:500;transition:color .3s;user-select:none}
.chips input:checked+label{color:#160f38}
.chips input:focus-visible+label{outline:2px solid var(--lav);outline-offset:2px}
.chip-glider{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;background:linear-gradient(180deg,#f2edff,#c9b8ff);box-shadow:0 4px 18px -4px rgba(170,140,255,.8);transition:transform .45s var(--ease)}
.claim .btn-lg{width:100%}
.assure{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--muted);margin-top:14px}
.assure svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--lav)}
.form-error{margin-top:10px;color:#ffb4c8;font-size:.88rem}
/* sections */
section{position:relative}
.benefits,.formula,.how,.final{padding:96px 0}
.cards{display:grid;gap:18px;margin-top:36px}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .4s var(--ease),border-color .3s,background .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(185,166,255,.4);background:rgba(255,255,255,.05)}
.card p{color:var(--muted);margin-top:8px}
.ico{width:46px;height:46px;border-radius:50%;border:1px solid rgba(185,166,255,.45);display:grid;place-items:center;margin-bottom:18px}
.ico svg{width:22px;height:22px;fill:none;stroke:#cdbcff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.split{display:grid;gap:40px;align-items:start}
@media(min-width:880px){.split{grid-template-columns:.9fr 1.1fr}}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badges li{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.82rem;color:#ddd5ff;background:var(--card)}
.badges li::before{content:"✓ ";color:var(--lav)}
.facts{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r);padding:10px 24px 22px}
.facts>div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts>div span:last-child{font-variant-numeric:tabular-nums;color:#ddd5ff;white-space:nowrap}
.facts small{display:block;color:var(--muted);font-size:.78rem}
.facts-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--lav)}
.other{font-size:.8rem;color:var(--muted);margin-top:14px}
.steps{list-style:none;display:grid;gap:18px;margin-top:30px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{padding:28px;border-top:1px solid var(--line)}
.steps span{font-size:.8rem;letter-spacing:.2em;color:var(--lav)}
.steps h3{font-size:1.6rem;font-weight:300;margin:10px 0 6px}
.steps p{color:var(--muted)}
.final{text-align:center}
.final .wrap{background:radial-gradient(600px 240px at 50% 0,rgba(140,110,255,.25),transparent),var(--card);border:1px solid var(--line);border-radius:28px;padding:64px 24px;max-width:900px}
.final .btn{margin-top:22px}
.site-footer{border-top:1px solid var(--line);padding:48px 0 60px;margin-top:40px}
.logo-sm{letter-spacing:.3em;margin-bottom:16px}.logo-sm span{letter-spacing:.04em;color:var(--muted);font-size:.85rem}
.fine{font-size:.78rem;color:#8f87b8;max-width:860px;margin-top:10px}
/* reveal: visible by default; only hide when JS marks html.has-js so a stalled script never blanks the page */
.reveal{opacity:1;transform:none}
html.has-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.has-js .reveal.in{opacity:1;transform:none}
/* simple pages */
.page-simple{display:grid;min-height:100vh}
.simple{position:relative;overflow:hidden;display:grid;place-items:center;padding:40px 20px}
.simple-card{position:relative;z-index:1;max-width:600px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:48px 28px;backdrop-filter:blur(8px)}
.simple-card h1{font-size:clamp(2rem,6vw,3rem)}
.simple-card .lede{margin:18px auto 10px}
.moon-big{width:64px;height:64px;margin:0 auto 18px;animation:float 6s ease-in-out infinite}
.feedback{text-align:left;margin:28px 0;padding:22px;border:1px solid var(--line);border-radius:18px}
.feedback h2{font-size:1.1rem;font-weight:500;margin-bottom:10px}
.feedback ul{margin:0 0 18px 18px;color:var(--muted)}
.link{display:inline-block;margin-top:10px;text-decoration:none;font-size:.9rem}
.zzz{position:absolute;inset:0;z-index:2;pointer-events:none}
.zzz span{position:absolute;top:3%;font-size:13px;opacity:0;animation:zzz 3.4s ease-out forwards}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.7)}25%{opacity:.55}100%{opacity:0;transform:translate(14px,-46px) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.zzz{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
/* mobile section tabs */
.tabs{position:sticky;top:var(--hh,58px);z-index:49;display:grid;grid-template-columns:repeat(3,1fr);padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));background:rgba(11,8,32,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tabs a{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--muted);text-decoration:none;font-size:.88rem;letter-spacing:.04em;white-space:nowrap;transition:color .25s}
.tabs a::after{content:"";position:absolute;left:28%;right:28%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#c9b8ff,#8f74ff);transform:scaleX(0);transition:transform .3s var(--ease)}
.tabs a:hover,.tabs a[aria-current="true"]{color:#fff}.tabs a[aria-current="true"]::after{transform:scaleX(1)}
@media(min-width:820px){.tabs{display:none}}
@media(max-width:819px){
html{scroll-padding-top:116px}
.site-header{padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top))}
.wrap{padding:0 18px}
.benefits,.formula,.how,.final{padding:64px 0}
.hero{padding-bottom:90px}
.card,.steps li{padding:22px}
.facts{padding:8px 18px 18px}
.final .wrap{padding:44px 20px}
}
@media(max-width:380px){
.logo{letter-spacing:.22em;font-size:.85rem;gap:8px}.logo svg{width:22px;height:22px}
.btn-sm{padding:8px 13px;font-size:.8rem}
.tabs a{font-size:.82rem;letter-spacing:.02em}
.facts>div{flex-wrap:wrap;gap:4px 12px}
.facts>div span:last-child{white-space:normal}
}
.stars::before,.stars::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:repeat}
.stars::before{background-image:radial-gradient(1.4px 1.4px at 94% 90%,#b9a6ffcd,transparent),radial-gradient(1.2px 1.2px at 88% 58%,#ffffffca,transparent),radial-gradient(1.2px 1.2px at 86% 45%,#ffffffd3,transparent),radial-gradient(1px 1px at 79% 15%,#ffffffb3,transparent),radial-gradient(1.2px 1.2px at 37% 17%,#b9a6ff7f,transparent),radial-gradient(1.4px 1.4px at 64% 11%,#ffffff97,transparent),radial-gradient(1px 1px at 36% 18%,#ffffffb1,transparent),radial-gradient(1.2px 1.2px at 54% 46%,#ffffffbe,transparent),radial-gradient(1.4px 1.4px at 20% 11%,#ffffffa8,transparent),radial-gradient(1px 1px at 30% 2%,#b9a6ff8b,transparent),radial-gradient(1.2px 1.2px at 37% 1%,#b9a6ffc3,transparent),radial-gradient(1px 1px at 79% 73%,#ffffffad,transparent),radial-gradient(1.2px 1.2px at 66% 80%,#ffffff88,transparent),radial-gradient(1.4px 1.4px at 59% 88%,#ffffffce,transparent),radial-gradient(1.4px 1.4px at 51% 14%,#ffffffaa,transparent),radial-gradient(1.2px 1.2px at 25% 9%,#ffffffc9,transparent),radial-gradient(1px 1px at 44% 77%,#b9a6ffb0,transparent),radial-gradient(1px 1px at 20% 69%,#b9a6ff85,transparent),radial-gradient(1px 1px at 10% 27%,#ffffffa6,transparent),radial-gradient(1.4px 1.4px at 33% 45%,#b9a6ffa8,transparent),radial-gradient(1.4px 1.4px at 15% 63%,#ffffffa6,transparent),radial-gradient(1.2px 1.2px at 11% 19%,#ffffffb5,transparent);background-size:300px 260px;animation:twinkle 4.5s ease-in-out infinite alternate;animation-delay:-2s}
.stars::after{background-image:radial-gradient(0.8px 0.8px at 34% 62%,#ffffffcd,transparent),radial-gradient(1.8px 1.8px at 27% 68%,#ffffff82,transparent),radial-gradient(1px 1px at 4% 98%,#ffffff80,transparent),radial-gradient(1.8px 1.8px at 12% 90%,#ffffff94,transparent),radial-gradient(1px 1px at 22% 46%,#ffffffb0,transparent),radial-gradient(0.8px 0.8px at 65% 43%,#ffffffb2,transparent),radial-gradient(1.8px 1.8px at 98% 25%,#ffffff8a,transparent),radial-gradient(0.8px 0.8px at 30% 26%,#ffffffd6,transparent),radial-gradient(1.8px 1.8px at 4% 4%,#ffffffad,transparent),radial-gradient(1px 1px at 89% 78%,#ffffffaa,transparent),radial-gradient(1px 1px at 93% 45%,#ffffffa7,transparent),radial-gradient(1px 1px at 30% 61%,#b9a6ff78,transparent),radial-gradient(0.8px 0.8px at 80% 79%,#b9a6ff99,transparent),radial-gradient(0.8px 0.8px at 45% 83%,#ffffffab,transparent),radial-gradient(0.8px 0.8px at 50% 92%,#ffffffd8,transparent),radial-gradient(0.8px 0.8px at 56% 82%,#ffffffab,transparent);background-size:440px 400px;animation:twinkle 8s ease-in-out infinite alternate-reverse;opacity:.95}
.stars-bright{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2.4px 2.4px at 93% 51%,#ffffffe1,transparent),radial-gradient(2.4px 2.4px at 11% 93%,#fffffff5,transparent),radial-gradient(2px 2px at 4% 20%,#ffffffe6,transparent),radial-gradient(2.8px 2.8px at 19% 79%,#fffffff9,transparent),radial-gradient(2.8px 2.8px at 45% 20%,#fffffffa,transparent),radial-gradient(2.8px 2.8px at 2% 93%,#b9a6ffff,transparent),radial-gradient(2.8px 2.8px at 18% 56%,#ffffffe2,transparent),radial-gradient(2px 2px at 28% 38%,#b9a6ffe9,transparent),radial-gradient(2.8px 2.8px at 42% 34%,#ffffffeb,transparent),radial-gradient(2.8px 2.8px at 8% 95%,#fffffff6,transparent);filter:drop-shadow(0 0 3px #b9a6ff) drop-shadow(0 0 6px rgba(185,166,255,.6));background-size:620px 540px;background-repeat:repeat;animation:twinkle2 5.5s ease-in-out infinite}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 90% at 50% 120%,rgba(11,8,32,.55),transparent 60%)}
.h2-one{white-space:nowrap;font-size:min(clamp(1.9rem,4.4vw,3rem),5.8vw)}@media(max-width:300px){.h2-one{white-space:normal}}