@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Black.woff2) format("woff2");font-weight:900;font-display:swap}
:root{--bg:#070d24;--bg2:#0d1636;--card:rgba(255,255,255,.055);--line:rgba(255,255,255,.1);--txt:#eef1ff;--muted:#a6b0d6;--gold:#ffc83d;--gold2:#ff9f1a;--blue:#3d6bff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
html,body{max-width:100%;overflow-x:clip}
.bg-orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-2}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:radial-gradient(1200px 700px at 80% -10%,#1a2a6c 0%,transparent 60%),radial-gradient(900px 600px at -10% 40%,#2a1660 0%,transparent 60%),var(--bg);color:var(--txt);line-height:1.8;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-orbs span{position:fixed;border-radius:50%;filter:blur(90px);opacity:.35;z-index:-2;animation:orb 18s ease-in-out infinite alternate}
.bg-orbs span:nth-child(1){width:420px;height:420px;background:#3d6bff;top:10%;right:-120px}
.bg-orbs span:nth-child(2){width:360px;height:360px;background:#ff9f1a;bottom:5%;left:-100px;animation-delay:-6s;opacity:.18}
.bg-orbs span:nth-child(3){width:300px;height:300px;background:#a64dff;top:55%;right:35%;animation-delay:-12s;opacity:.2}
@keyframes orb{to{transform:translate(-60px,80px) scale(1.15)}}

/* nav */
.nav{position:fixed;top:14px;inset-inline:14px;z-index:50;display:flex;align-items:center;gap:22px;padding:10px 18px;border-radius:18px;background:rgba(10,16,44,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);transition:.3s}
.nav.scrolled{background:rgba(8,13,36,.88);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px;font-size:1.15rem}
.brand img{width:40px;height:40px;border-radius:11px}
.links{display:flex;gap:22px;margin-inline-start:auto;font-size:.95rem;color:var(--muted)}
.links a:hover{color:var(--gold)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger i{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:14px;font-weight:700;font-size:1rem;transition:transform .2s,box-shadow .2s;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(-3px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1700;box-shadow:0 10px 30px rgba(255,170,30,.35)}
.btn-gold:hover{box-shadow:0 16px 40px rgba(255,170,30,.5)}
.btn-glass{background:rgba(255,255,255,.08);border:1px solid var(--line)}
.btn-glass:hover{background:rgba(255,255,255,.14)}
.btn.sm{padding:9px 18px;font-size:.9rem}
.pill{display:inline-block;padding:6px 14px;border-radius:99px;background:rgba(255,200,61,.1);border:1px solid rgba(255,200,61,.3);color:var(--gold);font-size:.85rem;font-weight:700;margin-bottom:16px}
.gold-text{background:linear-gradient(135deg,#ffe28a,var(--gold) 40%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}

/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;max-width:1200px;margin:auto;padding:130px 24px 60px}
h1{font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:900;line-height:1.25;margin-bottom:20px}
.lead{font-size:1.15rem;color:var(--muted);max-width:560px;margin-bottom:30px}
.lead b{color:var(--gold)}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.cta.center{justify-content:center}
.stats{display:flex;gap:36px;list-style:none;margin-top:42px}
.stats b{display:block;font-size:2.2rem;font-weight:900;color:#fff}
.stats small{color:var(--muted)}

.hero-visual{position:relative;display:flex;justify-content:center;max-width:100%}
.phone{width:300px;height:600px;border-radius:44px;padding:12px;background:linear-gradient(160deg,#2a3670,#0e1535);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.08),0 0 80px rgba(61,107,255,.35);position:relative;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-1deg)}}
.notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:#060a1c;border-radius:12px;z-index:2}
.screen{height:100%;border-radius:34px;background:linear-gradient(180deg,#14205a,#0b1230);padding:56px 18px 18px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.duel-head{display:flex;justify-content:space-between;align-items:center}
.player{display:flex;flex-direction:column;align-items:center;gap:2px}
.ava{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.3rem;border:3px solid var(--gold)}
.a1{background:linear-gradient(135deg,#3d6bff,#6a8dff)}
.a2{background:linear-gradient(135deg,#ff5d7a,#ff8fa3)}
.player small{color:var(--muted);font-size:.8rem}
.score{font-size:1.2rem;color:var(--gold)}
.vs{font-weight:900;font-size:1.4rem;color:var(--gold);text-shadow:0 0 20px rgba(255,200,61,.6)}
.timer{height:8px;background:rgba(255,255,255,.1);border-radius:9px;overflow:hidden}
.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2ed3a5,var(--gold),#ff5d7a);border-radius:9px;transform-origin:right}
.q-card{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center;min-height:110px;display:flex;flex-direction:column;justify-content:center}
.q-card small{color:var(--gold);font-size:.8rem}
.q-card p{font-weight:700;font-size:1.02rem}
.answers{display:grid;gap:10px}
.answers button{font:inherit;font-weight:700;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:14px;padding:11px;transition:.25s}
.answers button.ok{background:linear-gradient(135deg,#1fbf8f,#2ed3a5);border-color:transparent;transform:scale(1.03)}
.answers button.bad{background:rgba(255,93,122,.35)}
.float-coin{position:absolute;font-size:2.6rem;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));animation:float 5s ease-in-out infinite}
.c1{top:8%;right:4%}.c2{bottom:18%;left:2%;animation-delay:-2s}.c3{top:45%;right:-2%;animation-delay:-3.5s;font-size:2rem}
.badge-float{position:absolute;bottom:8%;right:0;background:rgba(10,16,44,.85);border:1px solid rgba(255,200,61,.35);padding:10px 16px;border-radius:14px;backdrop-filter:blur(8px);animation:float 7s ease-in-out infinite;animation-delay:-1s}
.badge-float b{color:var(--gold)}

/* marquee */
.marquee{overflow:hidden;max-width:100vw;contain:paint;border-block:1px solid var(--line);background:rgba(255,255,255,.03);padding:16px 0;direction:ltr}
.track{display:flex;gap:46px;width:max-content;animation:mq 40s linear infinite}
.track span{font-weight:700;color:var(--muted);white-space:nowrap;direction:rtl}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.section{max-width:1200px;margin:auto;padding:100px 24px}
.section.narrow{max-width:820px}
.sec-head{text-align:center;margin-bottom:54px}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:900;line-height:1.35;margin-bottom:12px}
.sec-head p{color:var(--muted)}
.grid{display:grid;gap:22px}
.modes{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;backdrop-filter:blur(6px)}
.mode{position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.mode::before{content:"";position:absolute;inset:-1px;background:radial-gradient(400px 160px at 100% 0%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);opacity:.7;pointer-events:none}
.mode:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.mode .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:2rem;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);margin-bottom:18px;position:relative}
.mode h3{font-size:1.3rem;margin-bottom:8px;position:relative}
.mode p{color:var(--muted);position:relative}
.mode p b{color:var(--gold)}
.tag{display:inline-block;margin-top:16px;font-size:.8rem;padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--c) 18%,transparent);color:color-mix(in srgb,var(--c) 70%,#fff);position:relative}

.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.feat{list-style:none;margin-top:28px;display:grid;gap:16px}
.feat li{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.feat i{font-style:normal;font-size:1.8rem;width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background:rgba(255,200,61,.1)}
.feat small{display:block;color:var(--muted)}
.power-visual{position:relative;height:380px;display:grid;place-items:center}
.ring{position:absolute;width:300px;height:300px;border-radius:50%;border:2px dashed rgba(255,200,61,.3);animation:spin 30s linear infinite}
.ring.r2{width:200px;height:200px;border-color:rgba(61,107,255,.4);animation-direction:reverse;animation-duration:20s}
@keyframes spin{to{transform:rotate(360deg)}}
.pw{position:absolute;width:96px;height:96px;border-radius:28px;display:grid;place-items:center;font-size:3rem;background:linear-gradient(145deg,#1d2a6b,#0f1740);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4);animation:float 5s ease-in-out infinite}
.p1{top:30px;right:22%}.p2{bottom:40px;right:12%;animation-delay:-1.6s}.p3{top:45%;left:16%;animation-delay:-3s}

.steps{grid-template-columns:repeat(3,1fr)}
.step{text-align:center;position:relative}
.step b{display:grid;place-items:center;width:64px;height:64px;margin:-60px auto 16px;border-radius:50%;font-size:1.7rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1700;box-shadow:0 10px 30px rgba(255,170,30,.4)}
.step{margin-top:36px}
.step h3{margin-bottom:6px}
.step p{color:var(--muted)}

.prize{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:30px;padding:54px;background:linear-gradient(135deg,rgba(255,200,61,.12),rgba(61,107,255,.1));border-color:rgba(255,200,61,.25)}
.prize p{color:var(--muted);margin-bottom:26px}
.prize p b{color:var(--gold)}
.coin-stack{position:relative;height:220px}
.coin-stack span{position:absolute;left:50%;font-size:4.2rem;transform:translateX(-50%);animation:drop 3.5s ease-in-out infinite}
.coin-stack span:nth-child(1){bottom:0}.coin-stack span:nth-child(2){bottom:30px;animation-delay:.2s}.coin-stack span:nth-child(3){bottom:60px;animation-delay:.4s}.coin-stack span:nth-child(4){bottom:90px;animation-delay:.6s}.coin-stack span:nth-child(5){bottom:120px;animation-delay:.8s}
@keyframes drop{0%,100%{transform:translateX(-50%) rotateY(0)}50%{transform:translateX(-50%) rotateY(180deg)}}

details{margin-bottom:14px;padding:0;overflow:hidden}
summary{cursor:pointer;padding:20px 24px;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--gold);transition:.3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 24px 20px;color:var(--muted)}

.final{text-align:center}
.final-logo{width:150px;border-radius:34px;margin-bottom:20px;box-shadow:0 0 80px rgba(255,200,61,.35);animation:float 6s ease-in-out infinite}
.final .cta{margin-top:26px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:1200px;margin:auto;padding:30px 24px;border-top:1px solid var(--line);color:var(--muted)}
.foot div{display:flex;align-items:center;gap:10px;color:#fff}
.foot img{width:34px;border-radius:9px}
.foot .enamad{display:inline-flex;background:#fff;border-radius:12px;padding:4px;line-height:0}
.foot .enamad[hidden]{display:none}
.foot .enamad img{width:90px;height:auto;border-radius:8px;cursor:pointer}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:120px}
  .lead{margin-inline:auto}.cta{justify-content:center}.stats{justify-content:center}
  .modes,.steps{grid-template-columns:1fr 1fr}
  .split,.prize{grid-template-columns:1fr}
  .prize{text-align:center;padding:36px 24px}
  .links{display:none}
  .nav .btn{margin-inline-start:auto}
  .burger{display:block}
  body.menu-open .links{display:flex;flex-direction:column;position:absolute;top:70px;inset-inline:0;background:rgba(8,13,36,.97);padding:20px;border-radius:18px;border:1px solid var(--line)}
}
@media (max-width:600px){
  .modes,.steps{grid-template-columns:1fr}
  .nav .btn{display:none}
  .phone{width:260px;height:520px}
  .stats{gap:20px}
  .section{padding:70px 18px}
  .power-visual{height:300px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}