:root {
  --bg:#090b18;
  --panel:#11152a;
  --text:#f2f1ff;
  --muted:#a8adc8;
  --violet:#a77aff;
  --blue:#5ecbff;
  --gold:#e9c98b;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.6;
}
a { color:inherit; text-decoration:none; }
.site-header {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 6%;
  border-bottom:1px solid #ffffff18;
  background:#090b1860;
  backdrop-filter:blur(12px);
}
.logo,.footer-logo {
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:.16em;
}
.logo span,.footer-logo span,h1 span,h2 span {
  color:var(--violet);
}
.nav { display:flex; align-items:center; gap:28px; }
.nav a { font-size:.76rem; font-weight:bold; letter-spacing:.12em; }
.nav a:hover { color:var(--blue); }
.nav .nav-play {
  border:1px solid var(--violet);
  padding:10px 17px;
  border-radius:3px;
}
.menu-toggle { display:none; }
.hero {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:130px 20px 90px;
  background:
    radial-gradient(ellipse at 50% 42%,#44307875,transparent 38%),
    radial-gradient(ellipse at 75% 65%,#174d7560,transparent 40%),
    linear-gradient(155deg,#080b19,#15122c 55%,#080b19);
}
.hero-content { position:relative; z-index:3; max-width:900px; }
.eyebrow {
  color:var(--gold);
  letter-spacing:.34em;
  font-size:.75rem;
  font-weight:bold;
}
h1 {
  font-size:clamp(3.5rem,10vw,8.5rem);
  line-height:1;
  letter-spacing:.06em;
  margin:18px 0 6px;
  text-shadow:0 0 40px #a77aff55;
}
.subtitle { letter-spacing:.55em; color:var(--blue); font-size:1rem; }
.hero-description {
  color:#cbd0e8;
  max-width:600px;
  margin:30px auto;
  font-size:1.08rem;
}
.hero-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.btn {
  display:inline-block;
  padding:15px 30px;
  border-radius:3px;
  font-size:.82rem;
  font-weight:bold;
  letter-spacing:.12em;
  transition:transform .2s,box-shadow .2s;
}
.btn:hover { transform:translateY(-3px); }
.btn-primary {
  color:#0b0a18;
  background:linear-gradient(110deg,var(--violet),var(--blue));
  box-shadow:0 0 30px #987aff55;
}
.btn-outline { border:1px solid #ffffff80; }
.availability,.section-note { color:var(--muted); font-size:.85rem; margin-top:24px; }
.scroll-hint {
  position:absolute;
  bottom:25px;
  color:#ffffff88;
  font-size:.65rem;
  letter-spacing:.3em;
}
.rift {
  position:absolute;
  width:min(58vw,570px);
  height:min(58vw,570px);
  border-radius:50%;
  border:2px solid #a77aff65;
  box-shadow:0 0 80px #7448ff55,inset 0 0 90px #397cde45;
  background:radial-gradient(circle,#060a22 18%,#4b298555 44%,transparent 67%);
  animation:riftPulse 6s ease-in-out infinite;
}
.rift:before,.rift:after {
  content:"";
  position:absolute;
  inset:8%;
  border:1px dashed #84bfff75;
  border-radius:50%;
  animation:rotate 30s linear infinite;
}
.rift:after {
  inset:17%;
  border-color:#f3d9a488;
  animation-direction:reverse;
}
.stars {
  position:absolute;
  inset:0;
  background-image:radial-gradient(#ffffffa0 1px,transparent 1px);
  background-size:67px 67px;
  opacity:.2;
}
@keyframes riftPulse {
  50% { transform:scale(1.09); opacity:.75; }
}
@keyframes rotate { to { transform:rotate(360deg); } }
.section { padding:110px 6%; text-align:center; }
.section h2 {
  font-size:clamp(2rem,4.5vw,3.6rem);
  letter-spacing:.05em;
  margin:12px 0 24px;
  line-height:1.2;
}
.section-intro {
  max-width:680px;
  margin:0 auto 45px;
  color:var(--muted);
}
.feature-grid,.hero-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  max-width:1150px;
  margin:45px auto 0;
}
.feature {
  padding:38px 25px;
  background:linear-gradient(145deg,#171a35,#101326);
  border:1px solid #b89aff25;
}
.feature-icon { font-size:2.5rem; color:var(--violet); }
.feature h3 { letter-spacing:.1em; }
.feature p { color:var(--muted); font-size:.95rem; }
.heroes { background:#0d1021; }
.hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.champion {
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:420px;
  text-align:left;
  overflow:hidden;
  border:1px solid #ffffff22;
  background:radial-gradient(circle at 50% 32%,#505a9e,#101428 70%);
}
.champion-malakor {
  background:radial-gradient(circle at 50% 32%,#743769,#151024 70%);
}
.champion-symbol {
  position:absolute;
  top:10%;
  width:100%;
  text-align:center;
  font-size:10rem;
  opacity:.25;
  filter:drop-shadow(0 0 35px #a77aff);
}
.champion-info {
  position:relative;
  width:100%;
  padding:35px;
  background:linear-gradient(transparent,#090b18ed);
}
.champion-label { color:var(--gold); letter-spacing:.2em; font-size:.7rem; }
.champion h3 { font-size:2.5rem; margin:0; }
.champion p { color:#c8cbe1; }
.battle {
  background:radial-gradient(ellipse at center,#30245d,#090b18 70%);
}
footer {
  text-align:center;
  border-top:1px solid #ffffff18;
  padding:45px 20px;
}
footer p { color:var(--blue); letter-spacing:.2em; font-size:.75rem; }
footer small { color:var(--muted); }
@media(max-width:760px) {
  .site-header { padding:18px 5%; }
  .logo { font-size:1rem; }
  .menu-toggle {
    display:block;
    background:none;
    border:0;
    color:white;
    font-size:1.6rem;
    cursor:pointer;
  }
  .nav {
    display:none;
    position:absolute;
    top:65px;
    left:0;
    right:0;
    padding:24px;
    flex-direction:column;
    background:#0b0d20;
  }
  .nav.open { display:flex; }
  .hero-grid,.feature-grid { grid-template-columns:1fr; }
  .champion { min-height:330px; }
  .subtitle { letter-spacing:.25em; }
  .section { padding:75px 6%; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; scroll-behavior:auto!important; }
}