:root{--ink:#0b0b10;--card:#15151d;--edge:#2a2a36;--gold:#f5c542;--gold2:#ff9f1c;--red:#e63946;--mute:#a9a9b8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#eee;font:16px/1.8 Prompt,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{max-width:1180px;margin:auto;padding-inline:20px}
strong{color:var(--gold);font-weight:600}
.grad{background:linear-gradient(90deg,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(11,11,16,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.hd{display:flex;align-items:center;gap:20px;height:68px}
.logo img{width:52px}
header nav{display:flex;gap:26px;flex:1;justify-content:center}
nav a{color:#ddd;text-decoration:none;font-size:15px;position:relative}
header nav a:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transition:.2s}
header nav a:hover:after,header nav a.on:after{transform:scaleX(1)}
.btn{display:inline-block;padding:9px 22px;border-radius:10px;font-weight:600;text-decoration:none;white-space:nowrap;transition:.2s}
.btn.pri{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#1a1000}
.btn.pri:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--edge);color:#fff}
.btn.ghost:hover{border-color:var(--gold)}
.btn.lg{padding:14px 32px;font-size:18px;border-radius:12px}
.acts{display:flex;gap:10px}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:56px}
.hero:before{content:"";position:absolute;inset:-30% -10% auto auto;width:700px;height:700px;background:radial-gradient(circle,rgba(230,57,70,.35),transparent 65%);z-index:-1}
.hero-g{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.tag{display:inline-block;padding:4px 14px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:14px}
h1{font-size:clamp(30px,4.6vw,54px);line-height:1.25;margin:16px 0;font-weight:800}
.lead{color:var(--mute);font-size:18px;max-width:560px}
.hero .acts{margin-top:28px;flex-wrap:wrap}
.hero-img{border-radius:24px;box-shadow:0 30px 80px rgba(230,57,70,.35)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--edge);border-radius:18px;background:var(--card);margin-top:8px}
.stats div{padding:22px;text-align:center;border-right:1px solid var(--edge)}
.stats div:last-child{border:0}
.stats b{display:block;font-size:32px;font-weight:800}
.stats span{color:var(--mute);font-size:14px}

/* sections */
section{padding-block:72px}
.eyebrow{color:var(--red);font-weight:600;letter-spacing:.08em;font-size:14px}
h2{font-size:clamp(24px,3vw,38px);line-height:1.35;margin:6px 0 16px;font-weight:800}
.center{text-align:center}
.center .lead{margin-inline:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:20px;border:1px solid var(--edge)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.card{background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:24px;transition:.2s}
.card:hover{border-color:var(--gold);transform:translateY(-4px)}
.card i{font-style:normal;font-size:30px}
.card h3{margin:10px 0 6px;font-size:18px}
.card p{margin:0;color:var(--mute);font-size:15px}

/* commission panel */
.calc{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:linear-gradient(135deg,#2a0a0e,#15151d);border:1px solid var(--edge);border-radius:24px;padding:36px;margin-top:32px}
.big{font-size:clamp(64px,10vw,120px);font-weight:800;line-height:1}
.eq{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:20px;margin-block:8px}
.eq span{background:var(--ink);border:1px solid var(--edge);border-radius:10px;padding:6px 14px}
.small{font-size:14px;color:var(--mute)}

/* games */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:32px}
.games img{border-radius:16px;transition:.2s}
.games a:hover img{transform:scale(1.05)}


/* faq */
.faq{max-width:820px;margin:32px auto 0}
details{border-bottom:1px solid var(--edge);padding:18px 4px}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary:after{content:"+";color:var(--gold);font-size:24px;line-height:1}
details[open] summary:after{content:"−"}
details p{color:var(--mute);margin:10px 0 0}

/* cta */
.cta{text-align:center;background:linear-gradient(135deg,var(--red),#7a0f18);border-radius:28px;padding:56px 24px}
.cta h2{margin-top:0}
.cta .acts{justify-content:center;margin-top:20px;flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--edge);padding-block:40px 24px;color:var(--mute);font-size:14px}
.ft{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.ft nav{display:flex;flex-direction:column;gap:6px}
.ft h4{color:#fff;margin:0 0 10px}
.ft .logo img{width:90px}
.partners{margin-top:28px;display:grid;gap:16px;justify-items:center}
.copy{text-align:center;margin-top:24px}

@media (max-width:900px){
  header nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:center;gap:14px;padding:20px;background:var(--ink);border-bottom:1px solid var(--edge)}
  header.open nav{display:flex}
  .burger{display:block}
  .hd .acts .btn{padding:7px 14px;font-size:14px}
  .hero-g,.split,.calc,.ft{grid-template-columns:1fr}
  .split .img-first{order:-1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--edge)}
  .cards{grid-template-columns:1fr 1fr}
  .games{grid-template-columns:repeat(3,1fr)}
  section{padding-block:48px}
  .calc{padding:24px;text-align:center}
  .eq{justify-content:center}
}
@media (max-width:480px){
  .hd{gap:10px}
  .cards{grid-template-columns:1fr}
}

/* article page */
.article{max-width:860px;margin:auto}
.article h2{margin-top:48px}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:10px}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px 18px 14px 64px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:linear-gradient(90deg,var(--gold),var(--gold2));color:#1a1000;font-weight:800;display:grid;place-items:center}
.tip{background:linear-gradient(135deg,#2a0a0e,#15151d);border-left:4px solid var(--gold);border-radius:12px;padding:14px 18px}

/* promotion page */
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.promo{background:var(--card);border:1px solid var(--edge);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.promo:hover{border-color:var(--gold);transform:translateY(-4px)}
.promo-b{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.promo-b h2{font-size:20px;margin:0}
.promo-b p{margin:0;color:var(--mute);font-size:15px;flex:1}
.promo-b .tag{align-self:flex-start}
.promo-b .btn{text-align:center;margin-top:8px}

/* how-to-register page */
.steps-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:40px}
.step{position:relative;background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:20px;text-align:center}
.step img{border-radius:16px;margin:0 auto 14px;max-height:520px;width:auto}
.step h2{font-size:18px;margin:0 0 6px}
.step p{margin:0;color:var(--mute);font-size:15px}
.step .num{position:absolute;top:-14px;left:-10px;width:44px;height:44px;border-radius:50%;background:linear-gradient(90deg,var(--gold),var(--gold2));color:#1a1000;font-weight:800;font-size:20px;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}

/* about page */
.card p+p{margin-top:8px}

/* contact page */
.contact{text-decoration:none;color:#fff;text-align:center}
.contact p{color:var(--gold);font-size:17px;word-break:break-word}