body {
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(0,240,255,0.08), transparent 60%),
    radial-gradient(800px 460px at 92% 6%, rgba(255,0,200,0.07), transparent 60%),
    var(--bg);
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:0.6;
}

.container { position:relative; z-index:1; }

.site-header {
  background: linear-gradient(180deg, rgba(18,10,36,0.92), rgba(7,5,18,0.85));
  border-bottom:1px solid var(--line);
  box-shadow: 0 0 18px rgba(0,240,255,0.12);
}

.brand, .logo { letter-spacing:0.04em; }

.nav-links a:hover { color:var(--accent); }

.hero {
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(0,240,255,0.10), transparent 65%),
    radial-gradient(600px 340px at 85% 20%, rgba(255,0,200,0.09), transparent 65%);
  border-radius: var(--radius);
}

.hero-title {
  letter-spacing:0.02em;
  font-weight:800;
  text-transform:uppercase;
  color:var(--text);
  text-shadow: 0 0 5px rgba(0,240,255,0.7), 0 0 18px rgba(0,240,255,0.4);
}

.hero-sub { color:var(--prose); }

.facts .fact {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(42,26,74,0.6), inset 0 0 18px rgba(0,240,255,0.05);
}
.facts .fact b { color:var(--accent); text-shadow:0 0 10px rgba(0,240,255,0.5); }

.badge {
  background: rgba(0,240,255,0.07);
  border:1px solid var(--line);
  color:var(--accent);
  border-radius:999px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.btn { border-radius:var(--radius); letter-spacing:0.02em; transition:all .2s ease; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border:1px solid transparent;
  box-shadow: 0 0 5px var(--accent), 0 0 15px var(--accent), 0 0 30px rgba(0,240,255,0.45);
}
.btn-primary:hover {
  box-shadow: 0 0 8px var(--accent), 0 0 22px var(--accent), 0 0 44px rgba(0,240,255,0.6);
  transform:translateY(-2px);
}
.btn-ghost {
  background: var(--panel);
  border:1px solid var(--line);
  color:var(--text);
}
.btn-ghost:hover {
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 12px rgba(0,240,255,0.3);
}

.card, .feature {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover, .feature:hover {
  border-color:var(--accent);
  box-shadow: 0 0 5px rgba(0,240,255,0.4), 0 0 24px rgba(0,240,255,0.18);
  transform:translateY(-3px);
}

.feature .icon {
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: rgba(0,240,255,0.06);
  box-shadow:0 0 14px rgba(0,240,255,0.15);
}

.tabs .tab {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text-2);
  transition:all .2s ease;
}
.tabs .tab:hover { color:var(--accent); border-color:var(--accent); }
.tabs .tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 0 14px rgba(0,240,255,0.4);
}

.tile {
  background: var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:all .2s ease;
}
.tile:hover {
  border-color:var(--accent);
  box-shadow: 0 0 5px rgba(0,240,255,0.4), 0 0 22px rgba(0,240,255,0.2);
  transform:translateY(-3px);
}
.tile .gp { color:var(--accent-2); letter-spacing:0.03em; }
.tile .nm { color:var(--text); }
.tile.noimg {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,0,200,0.10), transparent 70%),
    var(--panel);
}
.tile.noimg .nm {
  color:var(--accent);
  text-shadow:0 0 10px rgba(0,240,255,0.4);
  font-weight:700;
}

.article a, .prose a, a.link { color:var(--accent-2); text-decoration:none; }
.article a:hover { color:var(--accent); text-decoration:underline; }

.article h2 {
  color:var(--text);
  letter-spacing:0.01em;
  font-weight:700;
}
.article h2::after {
  content:"";
  display:block;
  width:54px;
  height:2px;
  margin-top:.4rem;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 10px rgba(0,240,255,0.5);
}

.table { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.table th { background: var(--panel-2); color:var(--accent); letter-spacing:0.03em; }
.table td, .table th { border-color:var(--line); }

.faq-item {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover { border-color:var(--accent); box-shadow:0 0 14px rgba(0,240,255,0.15); }
.faq-q { color:var(--text); font-weight:600; }
.faq-a { color:var(--prose); }

.site-footer {
  background: linear-gradient(180deg, transparent, rgba(18,10,36,0.6));
  border-top:1px solid var(--line);
}
.site-footer a:hover { color:var(--accent); }

::selection { background:var(--accent); color:var(--on-accent); }