@font-face{
  font-family:YekanCustom;
  src:url("fonts/Yekan.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#09000f; --bg2:#12001d; --card:#120b1b; --card2:#171020; --line:#352543; --text:#faf8ff;
  --muted:#b9aec5; --purple:#7b18ff; --purple2:#b53cff; --pink:#d800ff; --yellow:#ffc400; --yellow2:#ffe36a; --green:#39c27f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:YekanCustom,Yekan,"Yekan Bakh",Tahoma,Arial,sans-serif}
body{min-height:100vh;background:
 radial-gradient(circle at 80% 0%,rgba(123,24,255,.18),transparent 30%),
 radial-gradient(circle at 10% 35%,rgba(216,0,255,.10),transparent 28%),
 linear-gradient(180deg,var(--bg2),var(--bg) 55%,#070009);}
button{font:inherit}
.app{width:min(100%,520px);margin:auto;min-height:100vh;padding:18px 18px 32px;position:relative;overflow:hidden}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;font-size:13px}
.brand{font-weight:800;letter-spacing:-.2px}.campaign{color:#16001f;background:linear-gradient(135deg,var(--yellow),#ffdd43);padding:7px 12px;border-radius:999px;font-weight:900;box-shadow:0 8px 22px rgba(255,196,0,.18)}
.screen{display:none}.screen.active{display:block}
.hero{padding-top:12vh}
.eyebrow{color:var(--yellow2);font-size:14px;font-weight:700;margin-bottom:16px}
h1{font-size:40px;line-height:1.45;letter-spacing:-1.2px;margin:0 0 18px}
.hero h1 b{color:var(--yellow);text-shadow:0 0 22px rgba(255,196,0,.16)}
p{color:var(--muted);line-height:2;font-size:16px;margin:0}
.trust-row{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px}
.trust-row span{border:1px solid var(--line);padding:8px 10px;border-radius:10px;color:#ddd5e6;font-size:12px;background:rgba(255,255,255,.02)}
button{width:100%;border:0;cursor:pointer;border-radius:14px;padding:15px 18px;font-weight:800;transition:.15s}
.primary{background:linear-gradient(135deg,var(--yellow),#ffdd43);color:#17001f;box-shadow:0 14px 34px rgba(255,196,0,.16)}.primary:active{transform:scale(.99)}
.secondary{margin-top:14px;background:rgba(123,24,255,.06);color:#eee7f4;border:1px solid #4a2d60}
.tiny{font-size:11px!important;text-align:center;margin-top:14px!important;color:#777!important}
.progress-wrap{margin:8px 0 30px}
.progress{height:6px;background:#24192d;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--pink),var(--yellow));width:0;transition:.25s;box-shadow:0 0 16px rgba(181,60,255,.45)}
#stepLabel{display:block;color:#777;font-size:11px;margin-top:8px}
.question-title{font-size:25px;line-height:1.55;margin:0 0 22px}
.options{display:grid;gap:10px}
.option{background:linear-gradient(180deg,rgba(24,15,32,.98),rgba(13,8,20,.98));border:1px solid var(--line);color:#eee;text-align:right;padding:16px;border-radius:16px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.14);position:relative;overflow:hidden}.option:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--purple),var(--pink));opacity:.0;transition:.15s}.option:hover,.option:focus{border-color:#7435a3;box-shadow:0 10px 28px rgba(123,24,255,.12)}.option:hover:before,.option:focus:before{opacity:1}
.option:hover{border-color:#7435a3}.option small{display:block;color:#777;margin-top:4px;font-weight:400}
.result-head{margin-bottom:22px}.result-head h1{font-size:29px}
.course{background:linear-gradient(145deg,#171020,#0d0814);border:1px solid #4b2d61;border-radius:22px;padding:20px;box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 35px rgba(123,24,255,.08);position:relative;overflow:hidden}.course:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(123,24,255,.12);filter:blur(35px);left:-90px;top:-80px;pointer-events:none}
.course-badge{display:inline-block;background:rgba(123,24,255,.16);color:var(--yellow2);border:1px solid rgba(181,60,255,.35);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:14px}
.course h2{font-size:23px;margin:0 0 10px}.course .why{font-size:14px;color:#bbb;line-height:2;margin-bottom:18px}
.price-row{display:flex;align-items:end;gap:10px;margin:14px 0 20px}
.old{text-decoration:line-through;color:#777;font-size:13px}.new{font-size:25px;font-weight:900;color:var(--yellow);text-shadow:0 0 18px rgba(255,196,0,.12)}
.price-label{font-size:11px;color:#777;margin-right:auto}
.buy{display:block;text-align:center;text-decoration:none;background:linear-gradient(135deg,var(--yellow),#ffdb3d);color:#17001f;border-radius:14px;padding:15px;font-weight:900;box-shadow:0 12px 28px rgba(255,196,0,.14)}
@media(max-width:380px){h1{font-size:30px}.question-title{font-size:22px}}

.hero h1 b{color:var(--yellow);text-shadow:0 0 22px rgba(255,196,0,.16)} .promise{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:26px 0}.promise div{background:#151515;border:1px solid var(--line);border-radius:12px;padding:11px;text-align:center}.promise b{display:block;color:var(--gold2);font-size:17px}.promise span{font-size:10px;color:#777}.campaign-note{display:flex;gap:10px;align-items:center;margin-top:28px;padding:13px;border:1px solid #513176;background:linear-gradient(90deg,rgba(123,24,255,.10),rgba(216,0,255,.05));border-radius:14px}.campaign-note b{font-size:12px}.campaign-note small{display:block;color:#777;font-size:10px;margin-top:3px}