:root {
  --bg:#0a0f14; --bg-soft:#101823; --fg:#e6edf3; --muted:#9aa6b2;
  --card:#121b26; --border:#1b2a3c; --accent:#7dd3fc; --accent-2:#f6c453;
  --route:#7dd3fc; --zone:#9bf58c;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at -10% -20%, rgba(125,211,252,0.15), transparent 55%),
    radial-gradient(900px 500px at 110% 0%, rgba(246,196,83,0.12), transparent 50%),
    linear-gradient(180deg, #090e14 0%, #0b1118 55%, #0a0f14 100%);
  color:var(--fg);
}
.container { max-width: 1120px; margin: 0 auto; padding: 1.25rem; }
header .container { max-width: none; margin:0; padding:.5rem 1.25rem .25rem 1.25rem; }
header .primary-nav { width:100%; margin:0 auto; max-width:1120px; align-items:flex-start; }
h1, h2, h3 { color: var(--accent); margin:0 0 .75rem; }
h1 { font-family:"Outfit", "Space Grotesk", Arial, sans-serif; font-size:2.2rem; letter-spacing:.3px; }
.breadcrumb { display:flex; gap:.5rem; align-items:center; color:var(--muted); font-size:.95rem; margin-bottom:1.25rem; }
.breadcrumb a { color:var(--accent); text-decoration:none; }
.breadcrumb a:hover { color:#a9e6ff; }
.breadcrumb-home { display:inline-flex; align-items:center; justify-content:center; }
.breadcrumb-icon { width:18px; height:18px; display:block; }
.hero {
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(18,27,38,0.95), rgba(10,15,20,0.95));
  padding:1.6rem; box-shadow:0 18px 36px rgba(0,0,0,0.45);
}
.hero::before {
  content:""; position:absolute; inset:0; opacity:.35;
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(125,211,252,0.35), transparent 60%),
    radial-gradient(800px 400px at 90% 30%, rgba(246,196,83,0.25), transparent 65%);
}
.hero > * { position:relative; z-index:1; }
.hero-top { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.hero-note { color:var(--muted); max-width:640px; }
.pill-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.pill { padding:.4rem .7rem; border-radius:999px; background:rgba(125,211,252,0.1); border:1px solid rgba(125,211,252,0.35); color:var(--accent); font-size:.85rem; }
.grid { display:grid; gap:1rem; grid-template-columns: 1fr; margin-top:1.25rem; }
@media (min-width: 880px) { .grid { grid-template-columns: 1.05fr .95fr; } }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem;
  box-shadow:0 10px 22px rgba(0,0,0,0.32);
}
.spec-lens { margin-top:1.5rem; }
.card h3 { color:var(--accent-2); }
.route-list { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.route-item { display:flex; gap:.8rem; align-items:flex-start; }
.route-chip { min-width:64px; font-weight:600; color:var(--zone); }
.tabs { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.tab {
  appearance:none; border:1px solid var(--border); background:rgba(16,24,35,0.65);
  color:var(--fg); padding:.5rem .9rem; border-radius:10px; cursor:pointer;
  font-family:"Space Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight:600;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.tab:hover { transform:translateY(-1px); border-color:rgba(125,211,252,0.6); }
.tab[aria-selected="true"] {
  background:linear-gradient(120deg, rgba(125,211,252,0.25), rgba(16,24,35,0.9));
  border-color:rgba(125,211,252,0.7); color:#dff4ff;
}
.spec-panel { margin-top:1rem; }
.panel-grid { display:grid; gap:1rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .panel-grid { grid-template-columns: repeat(3, 1fr); } }
.panel-card { background:rgba(12,18,26,0.75); border:1px solid rgba(125,211,252,0.2); border-radius:12px; padding:1rem; }
.panel-card h4 { margin:.1rem 0 .6rem; color:#dff4ff; }
.panel-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
a.cta {
  display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .85rem; border-radius:10px;
  background:var(--accent); color:#0b1118; text-decoration:none; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.cta:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(125,211,252,0.25); }
a.ghost, span.ghost {
  display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .85rem; border-radius:10px;
  border:1px solid rgba(246,196,83,0.4); color:#f8ddb0; text-decoration:none;
}
a.ghost[aria-disabled="true"], span.ghost[aria-disabled="true"] { opacity:.5; pointer-events:none; }
.note { color:var(--muted); font-size:.95rem; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.spec-name { display:flex; align-items:center; gap:.75rem; }
.spec-icon {
  width:36px; height:36px; border-radius:10px; object-fit:cover;
  border:1px solid rgba(125,211,252,0.35); box-shadow:0 6px 14px rgba(0,0,0,0.35);
}
.section-title span { color:var(--muted); font-size:.95rem; }
.class-card { background:rgba(12,18,26,0.75); border:1px solid rgba(125,211,252,0.3); border-radius:12px; padding:1rem; }
.class-card.coming-soon { background:rgba(12,18,26,0.5); border:1px solid rgba(125,211,252,0.15); opacity:0.7; }
.class-card-header { display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.class-card-header.coming-soon { margin-bottom:.6rem; }
.class-card-icon { width:40px; height:40px; border-radius:6px; }
.class-card-title { font-weight:700; font-size:1.1rem; margin:0; }
.class-card-specs { font-size:.85rem; color:var(--muted); }
.class-card-links { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.class-card-link { text-decoration:none; padding:.4rem .6rem; border-radius:6px; font-size:.85rem; font-weight:600; transition:background .15s ease, transform .15s ease; display:block; }
.class-card-link:hover { transform:translateY(-1px); }
.class-card-link.active { background:rgba(255,124,10,0.1); border:1px solid rgba(255,124,10,0.3); color:#ff7c0a; }
.class-card-link.druid { background:rgba(255,124,10,0.1); border:1px solid rgba(255,124,10,0.3); color:#ff7c0a; }
.class-card-link.dknight { background:rgba(196,30,58,0.1); border:1px solid rgba(196,30,58,0.3); color:#c41e3a; }
.class-card-link.mage { background:rgba(63,199,235,0.12); border:1px solid rgba(63,199,235,0.35); color:#3fc7eb; }
.class-card-link.paladin { background:rgba(244,140,186,0.1); border:1px solid rgba(244,140,186,0.3); color:#f48cba; }
.class-card-link.hunter { background:rgba(170,211,114,0.12); border:1px solid rgba(170,211,114,0.35); color:#aad372; }
.class-card-link.rogue { background:rgba(255,244,104,0.12); border:1px solid rgba(255,244,104,0.35); color:#fff468; }
.class-card-link.priest { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); color:#ffffff; }
.class-card-link.shaman { background:rgba(0,112,221,0.12); border:1px solid rgba(0,112,221,0.35); color:#0070dd; }
.class-card-link.warlock { background:rgba(135,136,238,0.12); border:1px solid rgba(135,136,238,0.35); color:#8788ee; }
.class-card-link.warrior { background:rgba(199,156,110,0.1); border:1px solid rgba(199,156,110,0.3); color:#c79c6e; }
.class-card-badge { padding:.25rem .5rem; border-radius:6px; background:rgba(157,166,178,0.1); border:1px solid rgba(157,166,178,0.2); color:var(--muted); font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:.5rem; }
.reveal { animation:fadeUp .6s ease both; }
.delay-1 { animation-delay:.05s; }
.delay-2 { animation-delay:.1s; }
.delay-3 { animation-delay:.15s; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .delay-1, .delay-2, .delay-3 { animation:none; }
}