:root{
  --night:#1b0f2e;
  --night2:#251640;
  --night3:#2f1c50;
  --signal:#ff4f9a;
  --signal2:#ff8cc0;
  --lilac:#c9b8ff;
  --text:#f3eeff;
  --muted:#9c8fb8;
  --ok:#7ee2b8;
  --line:rgba(201,184,255,.16);
  --display:'Dela Gothic One',sans-serif;
  --body:'Onest',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--night);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap{padding:0 16px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:100px;font-weight:600;font-size:16px;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.btn--signal{background:var(--signal);color:#fff;box-shadow:0 10px 30px -8px rgba(255,79,154,.7)}
.btn--signal:hover{background:#ff3889}
.btn--signal:active{transform:scale(.98)}
.btn--quiet{border:1px solid var(--line)}
.btn--quiet:hover{border-color:var(--lilac)}
.btn--sm{padding:11px 20px;font-size:15px}
.btn--block{width:100%}

/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(27,15,46,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s}
.header.is-scrolled{border-color:var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{font:24px var(--display);display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.logo__live{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 8px;border-radius:7px;background:var(--signal);font:700 12px/1 var(--body);letter-spacing:.08em;color:#fff;box-shadow:0 6px 18px -6px rgba(255,79,154,.8)}
.logo__live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:rec 1.6s infinite}
@keyframes rec{50%{opacity:.35}}
.nav{display:flex;gap:30px;color:var(--muted);font-size:15px}
.nav a:hover{color:var(--text)}
.header__actions{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:16px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:960px){
  .burger{display:flex}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;padding:4px 16px 16px;background:rgba(27,15,46,.97);border-bottom:1px solid var(--line)}
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--text)}
}
@media(max-width:420px){.header .btn--sm{padding:10px 14px;font-size:14px}}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:110px}
.hero h1{font:400 clamp(40px,5.2vw,74px)/1 var(--display);letter-spacing:-.01em}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .ghost{color:transparent;-webkit-text-stroke:1.5px var(--lilac)}
.lead{color:var(--muted);font-size:19px;max-width:30em;margin:28px 0 36px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:flex;flex-wrap:wrap;gap:20px 32px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.facts b{display:block;font:22px var(--display)}
.facts small{color:var(--muted);font-size:14px}

.stream{position:relative;aspect-ratio:4/5;max-height:600px;width:100%;border-radius:28px;overflow:hidden;
  background:radial-gradient(60% 50% at 40% 38%,#ffb3d6 0%,#c85ca8 30%,#5a2a8a 62%,#2a1748 100%);
  box-shadow:0 50px 120px -30px rgba(255,79,154,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.stream::before{content:"";position:absolute;inset:0;background:radial-gradient(28% 34% at 42% 46%,rgba(255,236,246,.9),transparent 70%);filter:blur(10px);animation:breathe 6s ease-in-out infinite}
.stream::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;pointer-events:none}
@keyframes breathe{50%{transform:scale(1.06) translateX(6px)}}
.stream__top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;z-index:2;font-size:13px;font-weight:600}
.live{background:var(--signal);padding:5px 12px;border-radius:6px;letter-spacing:.04em}
.viewers{background:rgba(20,10,35,.55);backdrop-filter:blur(8px);padding:5px 12px;border-radius:6px}
.chat{position:absolute;left:18px;right:28%;bottom:96px;height:58%;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 30%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%)}
.chat p{flex:none;background:rgba(20,10,35,.55);backdrop-filter:blur(10px);padding:8px 12px;border-radius:14px;font-size:14px;width:fit-content;max-width:100%;animation:in .4s ease both}
.chat p b{color:var(--signal2);font-weight:600;margin-right:6px}
.chat p.gift{background:linear-gradient(90deg,rgba(255,79,154,.9),rgba(255,140,192,.75))}
.chat p.gift b{color:#fff}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.goal{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;background:rgba(20,10,35,.6);backdrop-filter:blur(12px);border-radius:16px;padding:14px 16px}
.goal div{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.goal div span{color:var(--muted)}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:42%;background:linear-gradient(90deg,var(--signal),var(--signal2));transition:width .6s}
/* hero badges */
.stage{position:relative}
.badge{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:18px;text-align:left;
  background:rgba(37,22,64,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.7);
  transform:translate(var(--mx,0),var(--my,0));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.badge>span:last-child{display:flex;flex-direction:column;line-height:1.25}
.badge b{font:400 16px var(--display)}
.badge small{color:var(--muted);font-size:12.5px}
.badge__ico{font-size:24px}
a.badge:hover,button.badge:hover{border-color:rgba(255,79,154,.6);box-shadow:0 20px 50px -14px rgba(255,79,154,.55);transform:translate(var(--mx,0),var(--my,0)) scale(1.06)}
.badge--curator{left:-80px;top:120px;animation:bob 6s ease-in-out infinite}
.badge--pay{right:-48px;bottom:130px;animation:bob 7s ease-in-out -2s infinite}
.badge--pay b{color:var(--signal2)}
.badge--gift{right:-30px;top:70px;opacity:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,79,154,.95),rgba(255,140,192,.85));border-color:transparent}
.badge--gift small{color:rgba(255,255,255,.85)}
.badge--gift.is-on{animation:giftpop 2.4s ease forwards}
@keyframes giftpop{0%{opacity:0;translate:0 14px;scale:.8}12%{opacity:1;translate:0 0;scale:1.08}20%{scale:1}80%{opacity:1}100%{opacity:0;translate:0 -18px}}
@keyframes bob{50%{translate:0 -10px}}
.pulse{position:relative;width:12px;height:12px;border-radius:50%;background:var(--ok);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 1.8s ease-out infinite}
@keyframes ping{to{transform:scale(2.8);opacity:0}}
@media(max-width:1180px){.badge--curator{left:-20px}.badge--pay{right:-10px}.badge--gift{right:-10px}}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(37,22,64,.45);padding:16px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;animation:ticker 45s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:16px;padding-right:44px}
.ticker span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:6px;box-shadow:0 0 10px var(--signal)}
.ticker em{font-style:normal;color:var(--signal2);font-weight:600}
@keyframes ticker{to{transform:translateX(-50%)}}

@media(max-width:960px){.hero{grid-template-columns:1fr;padding-top:28px;padding-bottom:80px}.stage{max-width:460px;width:100%;justify-self:center}.stream{max-height:520px}}
@media(max-width:560px){.badge{padding:9px 12px 9px 10px;gap:8px}.badge b{font-size:13px}.badge small{font-size:11px}.badge__ico{font-size:18px}
  .badge--curator{left:-6px;top:64px}.badge--pay{right:-6px;bottom:110px}.badge--gift{right:-6px;top:120px}}
@media(max-width:480px){.hero h1 span{white-space:normal}.lead{font-size:17px}}

/* sections */
.section{padding:100px 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:44px;flex-wrap:wrap}
h2{font:400 clamp(30px,4vw,52px)/1.05 var(--display)}
.head p{color:var(--muted);max-width:28em}
@media(max-width:700px){.section{padding:72px 0}.head{margin-bottom:32px}}

.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px}
.tag--adult{background:rgba(255,79,154,.18);color:var(--signal2)}
.tag--safe{background:rgba(201,184,255,.14);color:var(--lilac)}

/* deck */
.deck{position:relative;height:470px;max-width:1040px;margin:0 auto}
.card{position:absolute;left:50%;top:30px;width:250px;height:380px;margin-left:-125px;border-radius:26px;padding:24px;display:flex;flex-direction:column;text-align:left;
  border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);
  transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.card:nth-child(1){--r:-9deg;--x:-390px;--y:34px;background:linear-gradient(165deg,#3a2160,#24143e)}
.card:nth-child(2){--r:-3deg;--x:-130px;--y:4px;background:linear-gradient(165deg,#47204f,#271538)}
.card:nth-child(3){--r:3deg;--x:130px;--y:4px;background:linear-gradient(165deg,#4d1f45,#2a1436)}
.card:nth-child(4){--r:9deg;--x:390px;--y:34px;background:linear-gradient(165deg,#2c2563,#1e1640)}
.card:hover,.card[aria-pressed=true]{transform:translate(var(--x),-18px) rotate(0) scale(1.04);z-index:5;border-color:rgba(255,79,154,.6);box-shadow:0 40px 80px -24px rgba(255,79,154,.45)}
.card[aria-pressed=true]::after{content:"✓";position:absolute;bottom:-14px;left:50%;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:var(--signal);display:grid;place-items:center;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(255,79,154,.6)}
.card .tag{position:absolute;top:22px;right:22px}
.card__emoji{font-size:40px;line-height:1}
.card h3{font:400 23px/1.1 var(--display);margin:auto 0 10px}
.card p{font-size:14px;color:var(--muted);line-height:1.5}
.card__meta{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);display:grid;gap:4px;font-size:13.5px}
.card__meta div{display:flex;justify-content:space-between;gap:8px}
.card__meta dt{color:var(--muted)}
.card__meta dd{font-weight:600}
.deck__foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px}
.hint{color:var(--muted);font-size:14px}
@media(max-width:1100px){.card:nth-child(1){--x:-330px}.card:nth-child(4){--x:330px}.card:nth-child(2){--x:-110px}.card:nth-child(3){--x:110px}.card{width:228px;margin-left:-114px}}
@media(max-width:900px){
  .deck{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 16px 34px;margin:0 -16px;scrollbar-width:none}
  .deck::-webkit-scrollbar{display:none}
  .card{position:relative;left:auto;top:auto;margin:0;flex:0 0 250px;height:360px;scroll-snap-align:center;transform:none!important}
}

/* calculator */
.income{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.income__text p{color:var(--muted);margin:20px 0 28px;max-width:30em}
.income__notes{list-style:none;display:grid;gap:12px}
.income__notes li{padding-left:26px;position:relative}
.income__notes li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;border:2px solid var(--signal)}
.calc{background:linear-gradient(165deg,var(--night3),var(--night2));border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:100px;background:rgba(0,0,0,.25);margin-bottom:28px}
.seg button{padding:11px;border-radius:100px;color:var(--muted);font-weight:600;font-size:15px;transition:background .2s,color .2s}
.seg button[aria-pressed=true]{background:var(--signal);color:#fff}
.range{margin-bottom:24px}
.range label{display:flex;justify-content:space-between;font-size:15px;margin-bottom:12px}
.range label b{font:18px var(--display);color:var(--signal2)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;outline:none;background:linear-gradient(90deg,var(--signal) var(--p,50%),rgba(255,255,255,.12) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:5px solid var(--signal);cursor:pointer;box-shadow:0 4px 14px rgba(255,79,154,.6)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:5px solid var(--signal);cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:6px}
.toggle{display:flex;gap:12px;align-items:center;font-size:15px;cursor:pointer;margin-bottom:26px}
.toggle input{accent-color:var(--signal);width:18px;height:18px;flex:none}
.calc__result{border-top:1px solid var(--line);padding-top:22px;margin-bottom:22px}
.calc__result small{color:var(--muted);font-size:14px}
.calc__result output{display:block;white-space:nowrap;font:400 clamp(30px,3.6vw,46px)/1.1 var(--display);margin:6px 0 10px;background:linear-gradient(90deg,#fff,var(--signal2));-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__result p{color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:960px){.income{grid-template-columns:1fr;gap:40px}}
@media(max-width:480px){.calc{padding:24px 18px}}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--signal),var(--lilac) 60%,var(--line))}
.step{padding-right:24px;position:relative}
.step i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--night);border:2px solid var(--signal);font:16px var(--display);font-style:normal;margin-bottom:22px;position:relative}
.step h3{font-size:19px;font-weight:700;margin-bottom:6px}
.step p{color:var(--muted);font-size:15px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:36px 0}.steps::before{display:none}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* trust */
.trust{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.panel{border-radius:28px;padding:36px;border:1px solid var(--line)}
.panel h3{font:400 22px var(--display);margin-bottom:20px}
.panel ul{list-style:none;display:grid;gap:12px}
.panel li{padding-left:30px;position:relative}
.panel li::before{position:absolute;left:0;font-weight:700}
.panel--ok{background:linear-gradient(165deg,rgba(126,226,184,.08),transparent 60%),var(--night2)}
.panel--ok h3,.panel--ok li::before{color:var(--ok)}
.panel--ok li::before{content:"✓"}
.panel--bad{background:linear-gradient(165deg,rgba(255,79,154,.14),transparent 60%),var(--night2)}
.panel--bad h3,.panel--bad li::before{color:var(--signal2)}
.panel--bad li::before{content:"✕"}
@media(max-width:860px){.trust{grid-template-columns:1fr}.panel{padding:28px 22px}}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq__col{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:18px;background:var(--night2);transition:border-color .2s}
.faq details[open]{border-color:rgba(255,79,154,.5)}
.faq summary{list-style:none;cursor:pointer;padding:20px 60px 20px 24px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;background:rgba(255,79,154,.15);color:var(--signal2);font-weight:700;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--muted);font-size:15px}
@media(max-width:860px){.faq{grid-template-columns:1fr}}

/* cta */
.cta{border-radius:32px;padding:72px 40px;text-align:center;background:radial-gradient(70% 120% at 50% 0%,rgba(255,79,154,.35),transparent 70%),var(--night2);border:1px solid var(--line)}
.cta h2{max-width:14em;margin:0 auto 18px}
.cta p{color:var(--muted);margin-bottom:30px}
@media(max-width:700px){.cta{padding:44px 20px}}

/* footer */
.footer{border-top:1px solid var(--line);padding:56px 0 28px;color:var(--muted);font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer__grid>div:first-child p{margin-top:14px;max-width:300px}
.footer h4{color:var(--text);font-size:15px;font-weight:600;margin-bottom:12px}
.footer__grid a:not(.logo){display:block;padding:4px 0}
.footer__grid a:not(.logo):hover{color:var(--text)}
.footer .logo{color:var(--text)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:800px){.footer__grid{grid-template-columns:1fr 1fr}}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,4,20,.75);backdrop-filter:blur(6px)}
.modal__box{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;padding:34px;border-radius:28px;background:linear-gradient(165deg,var(--night3),var(--night));border:1px solid var(--line);box-shadow:0 40px 100px -30px rgba(255,79,154,.35);animation:in .3s ease}
.modal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);font-size:22px;color:var(--muted)}
.modal__close:hover{color:var(--text);border-color:var(--lilac)}
.progress{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-right:48px}
.progress span{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--signal),var(--signal2));transition:width .35s}
.modal__step{color:var(--muted);font-size:13px;margin:12px 0 6px}
fieldset{border:0}
legend{font:400 22px/1.2 var(--display);margin-bottom:22px}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role-pick--wide{grid-column:1/-1}
.role-pick label,.chips label{cursor:pointer}
.role-pick input,.chips input{position:absolute;opacity:0;pointer-events:none}
.role-pick span{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.role-pick small{color:var(--signal2);font-size:13px}
.role-pick input:checked+span,.chips input:checked+span{border-color:var(--signal);background:rgba(255,79,154,.14)}
.role-pick input:focus-visible+span,.chips input:focus-visible+span{outline:2px solid var(--signal);outline-offset:2px}
.row{display:grid;grid-template-columns:1fr 100px;gap:12px}
.field{display:block;margin-bottom:14px}
.field>span{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--text);font:15px var(--body);resize:vertical;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--signal)}
.field input::placeholder,.field textarea::placeholder{color:#6f6488}
.is-invalid{border-color:#ff6b6b!important}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer;margin-top:4px}
.check input{accent-color:var(--signal);width:18px;height:18px;margin-top:2px;flex:none}
.check a{color:var(--signal2);text-decoration:underline}
.group{margin-bottom:18px}
.group>span{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-block;padding:9px 16px;border-radius:100px;border:1px solid var(--line);font-size:14px;transition:border-color .2s,background .2s}
.form-error{color:#ff8a8a;font-size:14px;min-height:20px;margin-top:8px}
.modal__nav{display:flex;gap:12px;margin-top:8px}
.modal__nav[hidden]{display:none}
.modal__nav .btn{flex:1}
.success{text-align:center;padding:16px 0 4px}
.success__icon{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--signal);box-shadow:0 0 40px rgba(255,79,154,.55)}
.success h3{font:400 24px var(--display);margin-bottom:10px}
.success p{color:var(--muted);margin-bottom:24px}
@media(max-width:520px){.modal__box{padding:28px 18px}.role-pick{grid-template-columns:1fr}.row{grid-template-columns:1fr 84px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- фон «Софиты» ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.beam{position:absolute;top:-30%;width:46vw;height:150%;transform-origin:50% 0;filter:blur(30px);
  background:linear-gradient(180deg,rgba(255,140,192,.32),rgba(201,184,255,.07) 60%,transparent);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);animation:sweep 9s ease-in-out infinite alternate}
.beam--1{left:2%;--a:-14deg;--b:10deg}
.beam--2{left:28%;--a:8deg;--b:-10deg;animation-delay:-3s;background:linear-gradient(180deg,rgba(201,184,255,.28),rgba(124,58,237,.09) 60%,transparent)}
.beam--3{left:54%;--a:16deg;--b:-6deg;animation-delay:-5s}
@keyframes sweep{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
.bg__floor{position:absolute;inset:0;background:radial-gradient(70% 40% at 50% 100%,rgba(255,79,154,.18),transparent 70%)}
.bg__grain{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#stars{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:700px){.beam{width:90vw}.beam--1{left:-30%}.beam--2{left:5%}.beam--3{left:40%}}

/* ---------- курсор «Кольцо» ---------- */
.cursor{display:none}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor .cursor{display:block}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;border-radius:50%}
.cursor__dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--signal)}
.cursor__ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(255,140,192,.8);display:grid;place-items:center;
  font-size:11px;font-weight:600;color:#fff;transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s,opacity .25s}
.cursor__ring span{opacity:0;transition:opacity .2s}
.cursor.is-hover .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,79,154,.16);border-color:var(--signal)}
.cursor.is-label .cursor__ring{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(255,79,154,.78);border-color:var(--signal);backdrop-filter:blur(2px)}
.cursor.is-label .cursor__ring span{opacity:1}
.cursor.is-text .cursor__ring{opacity:0}
.cursor.is-out .cursor__dot,.cursor.is-out .cursor__ring{opacity:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}