/* ============ TOKENS ============ */
:root{
  --bg:#0A0710;
  --surface:#141020;
  --surface-2:#1B1529;
  --border:#2A2240;
  --ink:#F2EFFA;
  --muted:#948FA8;
  --purple:#A05CFF;
  --purple-deep:#6C2DE0;
  --purple-glow:rgba(160,92,255,.45);
  --lime:#B9FF4A;
  --display:'Anton', Impact, sans-serif;
  --body:'Inter', Arial, sans-serif;
  --mono:'JetBrains Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(160,92,255,.10), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 20%, rgba(108,45,224,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.5px;line-height:1.05}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.accent{color:var(--purple)}

/* ============ TOP NOTIFICATION TICKER ============ */
.ticker{
  position:fixed;top:0;left:0;width:100%;
  background:var(--lime);color:#0A0710;
  overflow:hidden;white-space:nowrap;
  height:28px;z-index:210;
  border-bottom:1px solid var(--bg);
}
.ticker__track{
  display:inline-flex;gap:48px;
  align-items:center;height:100%;
  padding-left:100%;
  animation:ticker 22s linear infinite;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;
}
.ticker__track span{white-space:nowrap}
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============ MAIN NAV ============ */
header{
  position:fixed;top:28px;width:100%;z-index:200;
  background:rgba(10,7,16,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 6%;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:20px;letter-spacing:.5px;
  color:var(--purple);
}
.logo__mark{width:30px;height:30px;object-fit:cover;border-radius:7px}
.logo span{color:var(--ink)}
nav ul{display:flex;list-style:none;gap:26px}
nav ul a{
  color:var(--muted);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--mono);
  transition:color .2s;position:relative;
}
nav ul a:hover{color:var(--purple)}
nav ul a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--purple);transition:width .2s;
}
nav ul a:hover::after{width:100%}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;
}
.nav-toggle span{width:24px;height:2px;background:var(--ink);display:block;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ SIDE DOT NAV ============ */
.dotnav{
  position:fixed;left:32px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;z-index:150;
}
.dotnav__dot{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1.5px solid var(--muted);
  cursor:pointer;padding:0;transition:.25s;
}
.dotnav__dot:hover{border-color:var(--purple)}
.dotnav__dot.active{
  background:var(--purple);border-color:var(--purple);
  box-shadow:0 0 10px var(--purple-glow);
  transform:scale(1.3);
}

/* ============ SOCIAL RAIL ============ */
.social-rail{
  position:fixed;right:28px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;z-index:150;
}
.social-rail a{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid var(--border);border-radius:50%;
  transition:.2s;
}
.social-rail a svg{width:15px;height:15px}
.social-rail a:hover{color:var(--purple);border-color:var(--purple)}

/* ============ HERO ============ */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;position:relative;
  padding:170px 12% 80px;
  overflow:hidden;
}
.hero__hud{position:absolute;inset:0;pointer-events:none}
.hero__scan{
  position:absolute;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--purple),transparent);
  top:0;animation:scan 6s ease-in-out infinite;opacity:.5;
}
@keyframes scan{0%,100%{top:10%}50%{top:90%}}
.eyebrow{
  font-family:var(--mono);color:var(--purple);font-size:13px;
  letter-spacing:.15em;margin-bottom:20px;
}
.hero h1{font-size:clamp(44px,8vw,88px)}
.hero span{color:var(--purple);text-shadow:0 0 30px var(--purple-glow)}
.hero__sub{
  margin:24px auto 8px;max-width:560px;color:var(--muted);
  font-size:17px;line-height:1.6;
}
.hero__cta{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.hero__stats{display:flex;gap:48px;margin-top:70px;flex-wrap:wrap;justify-content:center}
.hero__stats div{display:flex;flex-direction:column;align-items:center}
.hero__stats strong{font-family:var(--display);font-size:34px;color:var(--purple)}
.hero__stats span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:4px}
.scroll-hint{
  position:absolute;bottom:36px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;color:var(--muted);
}

/* buttons */
.btn-primary{
  padding:15px 32px;background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  border:none;color:#fff;
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;border-radius:8px;
  transition:.2s;
}
.btn-primary:hover{box-shadow:0 0 30px var(--purple-glow);transform:translateY(-2px)}
.btn-ghost{
  padding:15px 32px;background:transparent;border:1px solid var(--border);color:var(--ink);
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;border-radius:8px;
  transition:.2s;
}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple)}

/* ============ SECTIONS ============ */
section{padding:110px 12% 110px 9%;max-width:1320px;margin:0 auto}
.section-tag{
  font-family:var(--mono);color:var(--purple);font-size:12px;
  letter-spacing:.14em;margin-bottom:14px;
}
h2{font-size:clamp(30px,4vw,46px);color:var(--ink);margin-bottom:24px}
.lead{color:var(--muted);max-width:640px;font-size:16px;line-height:1.7;margin-bottom:20px}

/* about grid */
.about__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;margin-top:48px;
}
.about__grid h3{font-family:var(--mono);text-transform:uppercase;color:var(--purple);font-size:14px;letter-spacing:.08em;margin-bottom:10px}
.about__grid p{color:var(--muted);font-size:14px;line-height:1.7}

/* ============ GAME STRIP ============ */
.game-strip{
  display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 20px;
}
.game-logo-tile{
  display:flex;align-items:center;justify-content:center;
  height:64px;padding:12px 24px;
  background:#F2EFFA;border:1px solid var(--border);border-radius:12px;
  transition:.2s;
}
.game-logo-tile:hover{
  border-color:var(--purple);
  box-shadow:0 0 22px var(--purple-glow);
  transform:translateY(-3px);
}
.game-logo-tile img{
  height:100%;max-width:150px;width:auto;object-fit:contain;
}

/* ============ CARDS ============ */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;margin-top:16px;
}
.card{
  padding:32px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;position:relative;
  transition:.25s;
}
.card:hover{transform:translateY(-6px);background:var(--surface-2);border-color:var(--purple)}
.card h3{font-size:18px;margin-bottom:10px;color:var(--ink)}
.card p{color:var(--muted);font-size:14px;line-height:1.6}
.card__tag,.card__date{
  display:inline-block;font-family:var(--mono);font-size:11px;
  color:var(--purple);letter-spacing:.08em;margin-bottom:12px;
}
.card__index{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  display:block;margin-bottom:14px;
}
.card--soon{opacity:.55}
.card--soon:hover{opacity:.85}
.card--news h3{font-size:17px}

/* tournament cards */
.card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.status{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:4px 10px;border-radius:20px;border:1px solid var(--border);
}
.status--open{color:var(--purple);border-color:var(--purple)}
.status--live{color:#FF5C7A;border-color:#FF5C7A}
.status--upcoming{color:var(--muted)}
.card__meta{
  display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}

/* ============ SERVICE LIST ============ */
.service-list{margin-top:40px;border-top:1px solid var(--border)}
.service-row{
  display:flex;align-items:center;gap:24px;
  padding:26px 0;border-bottom:1px solid var(--border);
  transition:.2s;
}
.service-row:hover{padding-left:12px;border-bottom-color:var(--purple)}
.service-row__index{font-family:var(--mono);color:var(--muted);font-size:13px;width:34px}
.service-row h3{flex:1;font-size:clamp(20px,3vw,30px);color:var(--ink)}
.service-row__tag{font-family:var(--mono);font-size:11px;color:var(--purple);letter-spacing:.08em}

/* ============ PARTNERS ============ */
.partner-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:20px;
}
.partner-slot{
  padding:36px;text-align:center;color:var(--muted);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  border:1px solid var(--border);
}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;margin-top:20px}
form{max-width:520px}
input,textarea{
  width:100%;margin:0 0 14px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);color:var(--ink);
  font-family:var(--body);font-size:14px;resize:vertical;border-radius:8px;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{border-color:var(--purple);outline:none}
.contact-email{
  display:block;font-family:var(--display);font-size:clamp(20px,2.4vw,28px);
  color:var(--purple);margin:10px 0 30px;word-break:break-word;
}
.contact-blocks{display:flex;flex-direction:column;gap:20px}
.contact-blocks p{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.6}

/* ============ FOOTER ============ */
footer{
  padding:80px 9% 40px;background:var(--surface);
  border-top:1px solid var(--border);
}
.footer__top{
  display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;
  padding-bottom:40px;border-bottom:1px solid var(--border);
}
.footer__top h3{font-size:clamp(22px,3vw,32px);max-width:420px;color:var(--ink);margin-top:8px}
.footer__links{display:flex;flex-direction:column;gap:12px}
.footer__links a{color:var(--muted);font-size:14px;transition:.2s}
.footer__links a:hover{color:var(--purple)}
.footer__bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:24px;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.05em;
}

/* scroll reveal base state (JS toggles visible) */
section{opacity:0;transform:translateY(40px)}
section.visible{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease}
.hero{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .dotnav,.social-rail{display:none}
  section{padding:100px 7%}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  nav ul{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:12px 6%;
    display:none;
  }
  nav ul.open{display:flex}
  nav ul li{padding:12px 0;border-bottom:1px solid var(--border)}
  nav ul li:last-child{border-bottom:none}
  .nav-toggle{display:flex}
  .hero{padding-top:150px}
  .hero h1{font-size:44px}
  .hero__stats{gap:32px}
  section{padding-top:80px}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}