:root {
  --bg: #05050f;
  --bg2: #0a0a1f;
  --cyan: #00fff7;
  --pink: #ff2d95;
  --purple: #a020f0;
  --blue: #2d6cff;
  --lime: #39ff14;
  --glowA: #00fff7;
  --glowB: #ff2d95;
  --glass: rgba(18,18,42,0.5);
  --glass-border: rgba(0,255,247,0.18);
}
body[data-theme="cyber"] {
  --bg: #0d001f;
  --bg2: #12001f;
  --glowA: #a020f0;
  --glowB: #ff2d95;
  --cyan: #c04fff;
  --glass: rgba(30,0,50,0.5);
  --glass-border: rgba(160,32,240,0.25);
}
body[data-theme="matrix"] {
  --bg: #01120a;
  --bg2: #02180d;
  --glowA: #39ff14;
  --glowB: #39ff14;
  --cyan: #39ff14;
  --pink: #b6ff00;
  --purple: #00cc66;
  --glass: rgba(0,30,15,0.5);
  --glass-border: rgba(57,255,20,0.2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: #e6f7ff;
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
}

.font-orb { font-family: 'Orbitron', sans-serif; }
.font-mono { font-family: 'Space Mono', monospace; }

/* ===== animated atmospheric background ===== */
.nf-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,255,247,0.10), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255,45,149,0.12), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(160,32,240,0.14), transparent 50%),
    radial-gradient(circle at 90% 70%, rgba(57,255,20,0.06), transparent 40%),
    var(--bg);
}
.nf-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,255,247,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,247,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
  animation: gridDrift 24s linear infinite;
}
.nf-bg::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px);
  pointer-events: none; opacity: 0.4;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 44px 88px, 88px 44px; }
}
.blob { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.32; z-index: 0; pointer-events: none; }
.blob1 { width: 380px; height: 380px; background: var(--cyan); top: -100px; left: -80px; animation: float1 18s ease-in-out infinite; }
.blob2 { width: 420px; height: 420px; background: var(--pink); bottom: -140px; right: -100px; animation: float2 22s ease-in-out infinite; }
.blob3 { width: 320px; height: 320px; background: var(--purple); top: 40%; left: 60%; animation: float1 26s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,80px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-70px,-60px)} }

/* ===== neon text ===== */
.neon-cyan-text { color: var(--cyan); text-shadow: 0 0 6px var(--cyan), 0 0 18px rgba(0,255,247,0.5); }
.neon-pink-text { color: var(--pink); text-shadow: 0 0 6px var(--pink), 0 0 18px rgba(255,45,149,0.5); }
.neon-white { color: #fff; text-shadow: 0 0 8px rgba(0,255,247,0.4); }
.neon-grad-text {
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--purple), var(--lime), var(--cyan));
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 7s linear infinite;
}
@keyframes gradShift { to { background-position: 400% 0; } }

.logo { text-shadow: 0 0 10px currentColor; transition: filter .2s; position: relative; }
.logo:hover { filter: brightness(1.3); animation: glitch .35s steps(2) 3; }
@keyframes glitch {
  0%{transform:translate(0,0)} 25%{transform:translate(-1.5px,1px)} 50%{transform:translate(1.5px,-1px)}
  75%{transform:translate(-1px,-1px)} 100%{transform:translate(0,0)}
}

/* ===== glass ===== */
.glass {
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

/* navbar */
.nf-nav {
  background: rgba(5,5,15,0.7);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--glass-border);
}
.nf-search input { color: #cffcff; }
.nf-search { border: 1px solid rgba(0,255,247,0.3); border-radius: 0.6rem; transition: box-shadow .25s, border-color .25s; background: rgba(0,0,0,0.3); }
.nf-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0,255,247,0.55); }

.nf-select { background: rgba(0,0,0,0.5); color: #9fd8ff; border: 1px solid rgba(160,32,240,0.5); }
.nf-select option { background: #12001f; color: #cffcff; }

/* range slider */
.nf-range { -webkit-appearance:none; appearance:none; height:5px; border-radius:5px;
  background: linear-gradient(90deg, var(--cyan), var(--pink)); outline:none; }
.nf-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); cursor:pointer; border:2px solid #05050f; }
.nf-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan); cursor:pointer; border:2px solid #05050f; }

/* ===== autocomplete ===== */
.autocomplete {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  max-height: 340px; overflow-y: auto; border-radius: 0.75rem;
  animation: fadeIn .2s ease;
}
.ac-item { transition: background .15s; cursor: pointer; }
.ac-item:hover, .ac-item.active { background: rgba(0,255,247,0.12); }

/* ===== cards ===== */
.nf-card {
  border: 1px solid rgba(0,255,247,0.15); background: #0d0d24;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .35s;
  opacity: 0; transform: translateY(16px); animation: rise .5s forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.nf-card:hover {
  transform: translateY(-10px) scale(1.04);
  border-color: var(--pink);
  box-shadow: 0 0 28px rgba(255,45,149,0.55), 0 0 46px rgba(0,255,247,0.25);
  z-index: 5;
}
.nf-overlay {
  background: linear-gradient(to top, rgba(5,5,20,0.97) 8%, rgba(5,5,20,0.35) 55%, transparent 100%);
  opacity: 0; transition: opacity .3s;
}
.nf-card:hover .nf-overlay { opacity: 1; }
@media (hover: none) { .nf-overlay { opacity: 1; } }

.rank-num {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  -webkit-text-stroke: 3px var(--cyan); color: transparent;
  text-shadow: 0 0 20px var(--cyan);
  line-height: 0.8;
}

/* ===== row scroller ===== */
.row-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.row-scroll::-webkit-scrollbar { display: none; }
.scroll-btn {
  background: rgba(0,0,0,0.6); border: 1px solid var(--glass-border);
  backdrop-filter: blur(6px); transition: all .2s;
}
.scroll-btn:hover { background: var(--cyan); color: #05050f; box-shadow: 0 0 16px var(--cyan); }

/* skeleton */
.skeleton {
  background: linear-gradient(100deg, #0d0d24 30%, #1d1d44 50%, #0d0d24 70%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite, rise .5s forwards;
  transform: translateY(14px); border: 1px solid rgba(0,255,247,0.08);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* modal */
.modal-back {
  background: rgba(3,3,12,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.nf-modal {
  background: rgba(8,8,26,0.92); border: 1px solid rgba(0,255,247,0.3);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 40px rgba(0,255,247,0.25), 0 0 90px rgba(255,45,149,0.15);
  animation: popIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.hero-fade { animation: fadeIn .6s ease; }
.hero-grid-overlay {
  background-image: linear-gradient(rgba(0,255,247,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,247,0.04) 1px, transparent 1px);
  background-size: 60px 60px; opacity: 0.5; pointer-events: none;
}

.flicker { animation: flick 3s infinite; }
@keyframes flick { 0%,92%,100%{opacity:1} 93%,95%{opacity:.4} 94%{opacity:.9} }

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* section reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.sec-bar { width: 5px; border-radius: 4px; background: linear-gradient(var(--cyan), var(--pink)); box-shadow: 0 0 12px var(--cyan); }

.chip-glow { animation: chipPulse 2.4s ease-in-out infinite; }
@keyframes chipPulse { 0%,100%{box-shadow:0 0 10px currentColor} 50%{box-shadow:0 0 22px currentColor} }

.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

.ticker { display:flex; gap:2.5rem; white-space:nowrap; animation: tick 30s linear infinite; }
.ticker:hover { animation-play-state: paused; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.coll-tile { transition: transform .35s, box-shadow .35s; position: relative; overflow: hidden; opacity:0; animation: rise .5s forwards; }
.coll-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 30px rgba(0,255,247,0.4); }
.coll-tile::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s;
}
.coll-tile:hover::after { transform: translateX(120%); }

.social-card { opacity:0; animation: rise .5s forwards; }

.cta { position: relative; overflow: hidden; }
.cta::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .5s;
}
.cta:hover::before { transform: translateX(120%); }

.meter-ring { transform: rotate(-90deg); }

.toast { animation: toastIn .3s ease, toastOut .3s ease 2.4s forwards; }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,20px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes toastOut { to{opacity:0;transform:translate(-50%,20px)} }

.stat-num { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--cyan), var(--purple)); border-radius: 8px; }

.nav-pill { transition: all .25s; }
.nav-pill:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }