:root{
  --bg:#0a0a0b;
  --bg-2:#0e0e10;
  --surface:#121214;
  --surface-2:#151518;
  --surface-3:#19191c;
  --text:#f3f3f4;
  --muted:#8f8f96;
  --muted-2:#67676e;
  --line:rgba(255,255,255,.095);
  --line-strong:rgba(255,255,255,.14);
  --red:#ef2e31;
  --red-2:#ff4548;
  --max:1280px;
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 72% 5%,rgba(154,24,29,.10),transparent 28%),
    linear-gradient(180deg,#0a0a0b 0%,#09090a 100%);
  color:var(--text);
  font-family:Proxima Nova,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.28) .45px,transparent .45px);
  background-size:7px 7px;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.section{position:relative;padding:132px 0}

/* Header */
.site-header{
  height:72px;
  display:flex;
  align-items:center;
  gap:34px;
  padding:0 max(24px,calc((100vw - var(--max))/2));
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(9,9,10,.76);
  backdrop-filter:blur(20px);
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
/* .logo:before{content:"";width:3px;height:22px;background:var(--red);border-radius:2px} */
.logo span{color:#fff}
.logo:after{content:"";width:4px;height:4px;background:var(--red);margin-left:-3px}
.desktop-nav{display:flex;align-items:center;gap:27px;margin-left:46px}
.desktop-nav a{font-size:12px;color:#87878d;transition:color .2s ease}
.desktop-nav a:first-child,.desktop-nav a:hover{color:#fff}
.header-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 18px;
  border:1px solid rgba(255,69,72,.28);
  border-radius:9px;
  background:linear-gradient(180deg,#f2383b,#d9292d);
  color:#fff;
  font-size:11px;
  font-weight:900;
  transition:transform .2s,border-color .2s,filter .2s;
}
.header-btn:hover{transform:translateY(-1px);filter:brightness(1.06);border-color:rgba(255,255,255,.18)}
.mobile-menu{display:none;border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer}

/* Common type */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:#77777d;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.23em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.eyebrow:before{content:"";width:22px;height:1px;background:var(--red);flex:0 0 auto}
h1,h2,h3,p{margin-top:0}
h1,h2{font-weight:900}
h1{
  max-width:760px;
  margin-bottom:25px;
  font-size:clamp(48px,6vw,84px);
  line-height:.92;
  letter-spacing:-.025em;
}
h1 span,h2 span{color:#f04447}
h2{
  margin-bottom:16px;
  font-size:clamp(38px,4.2vw,62px);
  line-height:.98;
  letter-spacing:-.055em;
}
.section-heading{max-width:780px;margin-bottom:52px}
.section-heading.centered{text-align:center;margin-inline:auto}
.section-heading.centered .eyebrow{justify-content:center}
.section-heading p{max-width:650px;color:var(--muted);font-size:15px;line-height:1.7}
.section-heading.centered p{margin-inline:auto}

/* Hero */
.hero{
  min-height:900px;
  padding-top:176px;
  padding-bottom:82px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 77% 25%,rgba(223,38,43,.18),transparent 27%),
    radial-gradient(circle at 42% 65%,rgba(139,25,29,.08),transparent 32%),
    linear-gradient(180deg,#0d0c0e 0%,#0a090a 64%,#09090a 100%);
}
.hero-bg:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:260px;
  background:linear-gradient(180deg,transparent,#09090a 82%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;min-height:690px;align-items:center}
.hero-copy{position:relative;z-index:3;padding-top:30px}
.hero-lead{max-width:625px;color:#9b9ba1;font-size:16px;line-height:1.75}
.hero-actions{display:flex;gap:10px;margin-top:31px}
.primary-btn,.secondary-btn,.promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:50px;
  border-radius:10px;
  padding:0 21px;
  font-size:12px;
  font-weight:900;
  transition:transform .2s,border-color .2s,background .2s,filter .2s;
}
.primary-btn,.promo-btn{background:var(--red);border:1px solid #ff4649;box-shadow:0 14px 40px rgba(239,46,49,.17)}
.secondary-btn{border:1px solid var(--line-strong);background:rgba(255,255,255,.025);color:#dddde0}
.primary-btn:hover,.promo-btn:hover,.secondary-btn:hover{transform:translateY(-2px)}
.secondary-btn:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.hero-points{display:grid;grid-template-columns:repeat(3,1fr);max-width:670px;margin-top:46px;border-top:1px solid var(--line)}
.hero-points>div{padding:17px 15px 5px;border-right:1px solid var(--line)}
.hero-points>div:last-child{border-right:0}
.hero-points span{display:block;color:#6d6d73;font-size:9px;font-weight:900;letter-spacing:.15em;margin-bottom:9px}
.hero-points strong{display:block;font-size:12px}
.hero-points small{display:block;color:#6e6e74;font-size:10px;margin-top:5px;line-height:1.4}
.hero-visual{height:760px;position:relative;display:flex;justify-content:center;align-items:flex-end}
.hero-image{position:relative;z-index:3;max-height:745px;width:auto;object-fit:contain;filter:drop-shadow(0 28px 35px rgba(0,0,0,.7));transition:transform .5s ease}
.hero-visual:after{
  content:"";
  position:absolute;
  left:8%;right:0;bottom:0;height:220px;
  z-index:4;
  background:linear-gradient(180deg,transparent 0%,rgba(8,8,9,.55) 48%,#09090a 92%);
  pointer-events:none;
}
.red-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(210,30,35,.15);filter:blur(90px);right:6%;top:110px}
.hero-ring{position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.055);border-radius:50%;right:-3%;top:75px;box-shadow:0 0 90px rgba(239,46,49,.04),inset 0 0 90px rgba(239,46,49,.03)}
.hero-ring:after{content:"";position:absolute;inset:28px;border:1px solid rgba(239,46,49,.09);border-radius:50%}
.hero-orbit{position:absolute;border:1px solid rgba(255,255,255,.035);border-radius:50%;pointer-events:none}
.hero-orbit-one{width:760px;height:760px;right:-240px;top:45px}
.hero-orbit-two{width:960px;height:960px;right:-330px;top:-60px}
.hero-city{position:absolute;left:-15%;right:-10%;bottom:0;height:190px;z-index:2;opacity:.3;background:linear-gradient(180deg,transparent,#070708),repeating-linear-gradient(90deg,transparent 0 90px,#161619 91px 160px);clip-path:polygon(0 52%,7% 52%,7% 28%,14% 28%,14% 58%,20% 58%,20% 35%,28% 35%,28% 62%,35% 62%,35% 18%,41% 18%,41% 54%,50% 54%,50% 31%,57% 31%,57% 62%,65% 62%,65% 25%,72% 25%,72% 48%,79% 48%,79% 16%,86% 16%,86% 53%,92% 53%,92% 34%,100% 34%,100% 100%,0 100%)}

/* Promo */
.promo{padding-top:36px;padding-bottom:125px;background:linear-gradient(180deg,#09090a,#0b0b0c)}
.promo-card{
  position:relative;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:56px;
  padding:54px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:
    radial-gradient(circle at 87% 50%,rgba(239,46,49,.12),transparent 29%),
    linear-gradient(135deg,#111113,#151012 55%,#101012);
  box-shadow:0 28px 100px rgba(0,0,0,.28);
}
.promo-card:before{content:"";position:absolute;inset:0;border:1px solid rgba(239,46,49,.12);border-radius:20px;pointer-events:none}
.promo-noise{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(rgba(255,255,255,.18) .5px,transparent .5px);background-size:8px 8px;mask-image:linear-gradient(90deg,black,transparent 72%)}
.promo-copy,.promo-benefits{position:relative;z-index:2}
.promo-copy h2{font-size:clamp(42px,4.6vw,67px);margin-bottom:18px}
.promo-copy p{max-width:620px;color:#929298;font-size:15px;line-height:1.7}
.promo-code-wrap{margin:29px 0 17px}
.promo-code-label{display:block;color:#66666d;font-size:9px;font-weight:900;letter-spacing:.2em;margin-bottom:8px}
.promo-code{
  width:min(460px,100%);
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 18px 0 20px;
  border:1px dashed rgba(239,46,49,.62);
  border-radius:11px;
  background:rgba(239,46,49,.045);
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition:background .2s,border-color .2s,transform .2s;
}
.promo-code:hover{background:rgba(239,46,49,.08);border-color:rgba(255,69,72,.9);transform:translateY(-1px)}
.promo-code strong{font-size:29px;letter-spacing:.17em;color:#ff4b4e}
.promo-code span{font-size:9px;font-weight:900;color:#a8a0a0;white-space:nowrap}
.promo-code.copied{background:rgba(52,180,111,.07);border-color:rgba(52,180,111,.55)}
.promo-code.copied strong{color:#55d38d}
.promo-btn{margin-top:4px;min-width:220px}
.promo-timer{color:#66666d;font-size:10px;margin-top:13px}
.pulse-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(239,46,49,.08);margin-right:7px}
.promo-benefits{display:flex;flex-direction:column;justify-content:center;gap:10px}
.benefit{
  display:grid;
  grid-template-columns:31px 52px 1fr;
  align-items:center;
  gap:15px;
  min-height:105px;
  padding:17px 19px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  transition:transform .2s,border-color .2s,background .2s;
}
.benefit:hover{transform:translateX(-3px);border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.035)}
.benefit.featured{border-color:rgba(239,46,49,.28);background:linear-gradient(90deg,rgba(239,46,49,.10),rgba(255,255,255,.025))}
.benefit-number{align-self:start;color:#55555b;font-size:9px;font-weight:900;letter-spacing:.14em}
.benefit-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(239,46,49,.22);border-radius:12px;background:rgba(239,46,49,.07);color:#ff4b4e;font-size:17px;font-weight:900}
.benefit strong{display:block;font-size:18px}.benefit span{display:block;color:#7d7d83;font-size:11px;margin-top:5px}

/* Roles */
.roles{padding-top:132px;background:#0b0b0c}
.roles-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
.role-visual{height:620px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#171012,#101011)}
.role-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 26%,rgba(239,46,49,.15),transparent 34%),linear-gradient(180deg,transparent 38%,#0c0c0d 95%)}
.role-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 28px rgba(0,0,0,.55));transition:opacity .18s ease,transform .18s ease}
.role-visual img.is-changing{opacity:0;transform:scale(.985)}
.role-caption{position:absolute;left:26px;right:26px;bottom:0px;z-index:3;padding-top:70px;width: 100%;background:linear-gradient(180deg,transparent,rgba(9,9,10,.9) 68%)}
.role-caption span{display:block;color:#f2474a;font-size:9px;font-weight:900;letter-spacing:.18em;margin-bottom:8px}.role-caption strong{font-size:30px;letter-spacing:-.03em}
.role-selector{display:grid;gap:10px}
.role-btn{min-height:82px;display:flex;align-items:center;gap:13px;padding:0 17px;border:1px solid var(--line);border-radius:13px;background:#111113;color:#a6a6ac;cursor:pointer;text-align:left;font-size:11px;font-weight:900;transition:transform .18s,border-color .18s,background .18s,color .18s;outline:none}
.role-btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.17);color:#fff}
.role-btn:focus-visible{box-shadow:0 0 0 2px rgba(239,46,49,.65)}
.role-btn.active{color:#fff;border-color:rgba(239,46,49,.58);background:linear-gradient(180deg,rgba(239,46,49,.18),rgba(239,46,49,.07));box-shadow:inset 0 0 0 1px rgba(239,46,49,.05)}
.role-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:9px;color:#77777d;background:rgba(255,255,255,.025);font-size:14px;flex:0 0 auto}.role-btn.active .role-icon{color:#ff4b4e;border-color:rgba(239,46,49,.3);background:rgba(239,46,49,.09)}

/* Social */
.social{padding-top:132px;background:#0a0a0b}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.social-card{min-height:150px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:17px;padding:22px;border:1px solid var(--line);border-radius:15px;background:#111113;transition:transform .2s,border-color .2s,background .2s}
.social-card:hover{transform:translateY(-3px);border-color:var(--line-strong);background:#151518}
.social-icon{width:49px;height:49px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035);font-size:20px}
.social-card strong{display:block;font-size:19px}
.social-card span{display:block;color: rgb(219, 201, 201);font-size:11px;margin-top:6px}
.social-card>b{color: rgb(219, 201, 201);font-size:17px}
.social-card.youtube{background:linear-gradient(135deg,rgba(239,46,49,.6),#111113)}
.social-card.telegram{background:linear-gradient(135deg,rgba(48,135,183,.6),#111113)}
.social-card.discord{background:linear-gradient(135deg,rgba(91,85,194,.6),#111113)}

.social-icon.youtube {
  background: rgba(239, 46, 49, 0.8);
}

.social-icon.telegram {
  background: rgba(42, 142, 242, 0.8);
}

.social-icon.discord {
  background: rgba(88, 101, 242, 0.8);
}
/* Videos */
.videos{padding-top:132px;background:#0b0b0c}
.video-main{display:grid;grid-template-columns:1.7fr .7fr;gap:12px;margin-bottom:18px}
.video-frame{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#050506}.video-frame iframe,.video-thumb iframe{width:100%;height:100%;border:0}
.video-main-info{padding:25px;border:1px solid var(--line);border-radius:16px;background:#111113}.video-main-info>div{color:#f2474a;font-size:9px;font-weight:900;letter-spacing:.17em}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:7px;box-shadow:0 0 12px rgba(239,46,49,.8)}.video-main-info h3{margin:20px 0 10px;font-size:24px;letter-spacing:-.03em}.video-main-info p{color:#77777e;font-size:12px;line-height:1.65}
.video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.video-thumb{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#050506}.video-card h3{margin:9px 1px 0;color:#d6d6da;font-size:12px}

/* FAQ */
.faq{padding-top:132px;background:#0a0a0b}.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.faq-grid details{min-height:135px;padding:0 20px;border:1px solid var(--line);border-radius:14px;background:#111113;transition:border-color .2s,background .2s}.faq-grid details:hover{border-color:var(--line-strong);background:#141416}.faq-grid summary{padding:20px 0 13px;list-style:none;cursor:pointer;font-size:13px;font-weight:900}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid p{margin:0 0 18px;color:#808087;font-size:11px;line-height:1.65}

/* Footer */
/* .footer{border-top:1px solid var(--line);padding:35px 0;background:#080809}.footer-inner{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center}.footer strong{font-size:12px;letter-spacing:.12em}.footer span,.footer a,.copyright{font-size:10px;color:#626269}.footer span{display:block;margin-top:7px}.footer-links{display:flex;gap:18px}.footer a:hover{color:#fff} */

/* Responsive */
@media(max-width:1050px){
  .desktop-nav{display:none}.mobile-menu{display:block;margin-left:auto}
  .header-btn{display:none}
  .desktop-nav.mobile-open{display:flex;position:absolute;top:72px;left:0;right:0;margin:0;padding:18px 24px;flex-direction:column;gap:17px;background:rgba(9,9,10,.98);border-bottom:1px solid var(--line)}
  .hero-grid,.roles-grid{grid-template-columns:1fr}
  .hero{padding-top:130px}.hero-copy{order:2}.hero-visual{order:1;height:510px}.hero-image{max-height:505px}.hero-ring{right:50%;transform:translateX(50%);top:10px}.hero-orbit-one{right:50%;transform:translateX(50%)}.hero-orbit-two{display:none}
  .promo-card{grid-template-columns:1fr;gap:28px;padding:40px}.promo-benefits{display:grid;grid-template-columns:repeat(3,1fr)}.benefit{grid-template-columns:1fr;gap:9px;min-height:145px}.benefit-number{order:0}.benefit-icon{order:1}.benefit div:last-child{order:2}
  .role-visual{height:560px}.social-grid{grid-template-columns:1fr}.video-main{grid-template-columns:1fr}.video-grid{grid-template-columns:repeat(2,1fr)}.faq-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}
}
@media(max-width:650px){
  .container{width:calc(100% - 28px)}.section{padding:92px 0}.site-header{height:62px;padding-inline:14px}.desktop-nav.mobile-open{top:62px;padding-inline:14px}.logo{font-size:10px}
  h1{font-size:46px}.section-heading h2{font-size:36px}.hero{padding-top:105px;padding-bottom:60px}.hero-copy{padding-top:0}.hero-lead{font-size:14px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-points{grid-template-columns:1fr 1fr 1fr;margin-top:31px}.hero-points>div{padding:13px 7px}.hero-points strong{font-size:10px}.hero-points small{font-size:8px}.hero-visual{height:390px}.hero-image{max-height:385px}.hero-ring{width:330px;height:330px}.hero-ring:after{inset:16px}.red-glow{width:300px;height:300px}
  .promo{padding-top:10px;padding-bottom:90px}.promo-card{padding:28px 19px;border-radius:17px}.promo-copy h2{font-size:38px}.promo-code{min-height:62px}.promo-code strong{font-size:25px}.promo-code span{font-size:8px}.promo-benefits{grid-template-columns:1fr}.benefit{grid-template-columns:25px 47px 1fr;min-height:84px}.benefit strong{font-size:15px}.benefit span{font-size:10px}
  .role-visual{height:455px}.role-selector{grid-template-columns:1fr}.role-btn{min-height:64px}.role-caption strong{font-size:25px}.video-grid,.faq-grid{grid-template-columns:1fr}.social-card{min-height:118px}.footer-links{display:grid;gap:10px}
}