:root{
  --bg: #0a0f12;
  --bg-soft:#0e1419;
  --panel:#0f171d;
  --ink:#d9f8ff;
  --muted:#88c7d4;
  --teal:#00e5ff;
  --teal-2:#00bcd4;
  --lime:#8ef6d1;
  --accent:#00f7ff;
  --danger:#ff3d71;
  --glow: 0 0 12px rgba(0,229,255,.55), 0 0 36px rgba(0,229,255,.25);
  --glow-strong: 0 0 20px rgba(0,229,255,.85), 0 0 60px rgba(0,229,255,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 10% -20%, #062028 0%, transparent 60%),
              radial-gradient(800px 600px at 110% 10%, #071a1f 0%, transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

.neon-vignette{
  position:fixed; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 200px rgba(0,0,0,.85);
  z-index:0;
}

#bg-particles{
  position:fixed; inset:0; z-index:0;
}

/* Floating SVG basketballs */
.floater{
  position:fixed; width:min(24vw, 280px); height:auto; opacity:.15; z-index:0;
  filter:drop-shadow(0 0 24px rgba(255,140,64,.25));
}
.floater--left{ left:-6vw; top:20vh; animation:float 18s ease-in-out infinite; }
.floater--right{ right:-6vw; bottom:10vh; animation:float 22s ease-in-out infinite reverse; }
@keyframes float{
  0%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(10deg); }
  100%{ transform:translateY(0) rotate(0deg); }
}

/* Header */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:24px; justify-content:space-between;
  padding:14px 24px;
  background: rgba(7,12,16,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,229,255,.15);
  box-shadow: var(--glow);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand__logo{font-size:22px}
.brand__text{ font-family: Orbitron, sans-serif; font-weight:800; letter-spacing:.5px }
.nav__links{display:flex; gap:18px; flex-wrap:wrap}
.nav__links a{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
  transition:all .2s ease;
}
.nav__links a:hover{ color:var(--ink); text-shadow:var(--glow) }
.nav__links a.active{ color:var(--teal); box-shadow: inset 0 0 0 1px rgba(0,229,255,.35); text-shadow:var(--glow) }

.btn{
  --pad: 10px 14px;
  background: transparent; color: var(--ink);
  padding: var(--pad); border-radius: 12px; border:1px solid rgba(255,255,255,.12);
  cursor:pointer; transition: all .2s ease; font-weight:600;
}
.btn:hover{ box-shadow:var(--glow); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn--primary{
  background: linear-gradient(90deg, var(--teal), var(--lime));
  color:#021014; border-color:transparent; text-shadow:none;
}
.btn--ghost{ color:var(--muted) }

/* Ticker */
.ticker{
  position:relative; overflow:hidden; white-space:nowrap;
  border-top:1px solid rgba(0,229,255,.2); border-bottom:1px solid rgba(0,229,255,.2);
  background:linear-gradient(0deg, rgba(0,229,255,.08), transparent);
}
.ticker__track{
  display:inline-block; padding:8px 0; animation:ticker 32s linear infinite;
}
.ticker__item{
  margin-right:38px; color:var(--ink);
  padding:6px 10px; background:rgba(0,229,255,.1); border-radius:10px;
  box-shadow: var(--glow);
}
@keyframes ticker{
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}

/* Scores ribbon */
.scores{ position:relative; padding:16px 0 }
.scores__scroller{
  display:flex; gap:12px; overflow:auto; scrollbar-width:none; padding:0 64px;
}
.scores__scroller::-webkit-scrollbar{ display:none }
.score-pill{
  min-width:180px; background:var(--panel); border-radius:16px; padding:10px 12px;
  box-shadow: var(--glow); border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:700;
}
.score-pill .final{ color:var(--muted); font-weight:600; font-size:.82rem }
.scores__prev,.scores__next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,229,255,.1)
}
.scores__prev{ left:10px } .scores__next{ right:10px }

/* Hero */
.hero{
  position:relative; display:grid; grid-template-columns:1.2fr .8fr;
  align-items:center; gap:20px; padding:40px 24px 28px;
}
.hero__content{ padding:12px 18px }
.title{
  font-family: Orbitron, sans-serif; font-weight:800; font-size: clamp(28px, 5vw, 52px);
  text-shadow: var(--glow-strong);
}
.subtitle{ color:var(--muted); margin-top:6px }
.hero__cta{ margin-top:16px; display:flex; gap:10px }
.hero__orb{
  width:100%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(40% 40% at 50% 45%, rgba(0,229,255,.65), rgba(0,229,255,.05) 60%),
              radial-gradient(60% 60% at 60% 60%, rgba(142,246,209,.4), rgba(0,0,0,0) 65%),
              linear-gradient(145deg, rgba(4,120,142,.6), rgba(0,0,0,0) 60%);
  filter: blur(0px);
  animation: orb 16s ease-in-out infinite;
  box-shadow: var(--glow-strong), inset 0 0 40px rgba(0,229,255,.22);
}
@keyframes orb{
  0%{ transform:translateY(0) rotate(0) }
  50%{ transform:translateY(-10px) rotate(8deg) }
  100%{ transform:translateY(0) rotate(0) }
}

/* Section head */
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px;
}
.section-head h2{
  font-family: Orbitron, sans-serif; font-size: clamp(22px, 3vw, 30px);
  text-shadow: var(--glow);
}
.filters{ display:flex; gap:10px }
.filters input,.filters select{
  background:#0a1318; color:var(--ink); border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:10px; min-width:220px;
}

/* Carousel */
.carousel{ margin:18px 0 12px }
.carousel__viewport{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(320px, 36%);
  gap:18px; overflow-x:auto; scroll-snap-type: x mandatory; padding:18px 24px;
}
.carousel__viewport::-webkit-scrollbar{ height:8px }
.carousel__viewport::-webkit-scrollbar-thumb{ background:rgba(0,229,255,.3); border-radius:8px }
.headline-card{
  scroll-snap-align:start; position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(0,229,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); box-shadow: var(--glow); overflow:hidden;
  display:grid; grid-template-rows:180px auto; transform-style:preserve-3d;
}
.headline-media{
  background:#061117 center/cover no-repeat;
}
.headline-body{ padding:14px 14px 12px }
.headline-title{ font-size:1.05rem; font-weight:800; margin:0 0 4px }
.headline-meta{ color:var(--muted); font-size:.86rem; display:flex; gap:12px; flex-wrap:wrap }
.card-actions{ display:flex; gap:10px; margin-top:10px }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 8px;
  border-radius:999px; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.28);
  color:#b9f8ff; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.4px;
}

/* Grid of panels */
.grid{
  display:grid; gap:18px; padding:18px 24px; align-items:start;
  grid-template-columns: repeat(12, 1fr);
}
.panel{
  background: var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow: var(--glow); padding:16px;
}
.panel--feature#feature-trending{ grid-column: span 4 }
.panel--feature#feature-timeline{ grid-column: span 5 }
.panel--feature#feature-insights{ grid-column: span 3 }
.panel--feature#feature-micro{ grid-column: 1 / -1 }

@media (max-width: 1100px){
  .hero{ grid-template-columns:1fr; }
  .panel--feature#feature-trending{ grid-column: span 6 }
  .panel--feature#feature-timeline{ grid-column: span 6 }
  .panel--feature#feature-insights{ grid-column: span 12 }
}
@media (max-width: 740px){
  .panel--feature#feature-trending,
  .panel--feature#feature-timeline,
  .panel--feature#feature-insights{ grid-column: span 12 }
}

/* Chip cloud */
.chip-cloud{ display:flex; flex-wrap:wrap; gap:10px; min-height:42px }
.chip{
  background:#0b181d; color:#c7faff; border:1px solid rgba(0,229,255,.28); border-radius:999px;
  padding:8px 12px; font-weight:700; cursor:pointer; transition:all .15s ease;
}
.chip:hover{ background:rgba(0,229,255,.16); box-shadow:var(--glow) }
.chip.active{ background:linear-gradient(90deg, var(--teal), var(--lime)); color:#001215; }

/* Timeline */
.timeline{ list-style:none; margin:0; padding:10px 6px; max-height:360px; overflow:auto }
.timeline li{
  display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; margin:10px 0;
}
.timeline .dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px #00f7ff;
  margin-top:6px;
}
.timeline .item{
  background:#0b1419; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px
}
.timeline .meta{ color:var(--muted); font-size:.84rem }

/* Heatmap */
#heatmap{
  width:100%; height:auto; display:block; background:#0b171d;
  border-radius:12px; border:1px solid rgba(255,255,255,.08);
}

/* Micro posts */
.micro-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:14px }
.micro{
  background:#091219; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:12px; position:relative; overflow:hidden;
}
.micro h4{ margin:0 0 6px; font-size:1rem }
.micro p{ margin:0; color:#cfeff6; line-height:1.4 }
.micro time{ color:var(--muted); font-size:.8rem }

/* Footer */
.site-footer{
  margin:24px 0 60px; text-align:center; color:var(--muted)
}

/* Focus */
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:8px }

/* Ensure background layers are base */
#bg-particles,
.neon-vignette { z-index: 0; }

/* Floaters should be on top of those, but behind content */
.floater {
  position: fixed;                /* you already have this */
  z-index: 1;                     /* lift above canvas/vignette */
  pointer-events: none;           /* never block clicks */
  /* keep your existing width/height/animations */
}

/* Keep big orb under content (so text and cards are clickable) */
.hero__orb { z-index: 0; }

/* Main UI sits above */
.nav, .ticker, .scores, .hero, .carousel, .grid, .site-footer {
  position: relative;             /* create stacking context */
  z-index: 2;
}


.floater--left {
  left: 5%; /* moves it right from the left edge */
  top: 25%;  /* moves it down */
  border-radius: 50%;  /* Makes it circular */
  border: 3px solid #26fdfd; 
  box-shadow: 0 0 15px #00e6e6; /* Glowing effect */
}

.floater--right {
  right: 1%; /* moves it left from the right edge */
  top: 65%;
  border-radius: 50%;  /* Makes it circular */
  border: 3px solid #26fdfd; 
  box-shadow: 0 0 15px #00e6e6; /* Glowing effect */
}