:root{
  --c-neon: #8bd450;
  --c-deepp: #1d1a2f;
  --c-violet: #965fd4;
  --c-magenta:#734f9a;
  --c-darkg:#3f6d4e;
}
*{box-sizing:border-box}
body{font-family: 'Rajdhani', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial;}
a{color:inherit;text-decoration:none}
/* Neon utilities */
.neon-text{ text-shadow: 0 0 3px var(--c-neon), 0 0 8px var(--c-violet); }
.neon-soft{ box-shadow: 0 0 12px var(--c-neon); }
.neon-soft-v{ box-shadow: 0 0 20px var(--c-violet); }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:9999px; border:1px solid var(--c-violet); transition: all .2s ease; }
.btn:hover{ box-shadow: 0 0 8px var(--c-neon); border-color: var(--c-neon); }
.btn-primary{ background: var(--c-neon); color: var(--c-deepp); border-color: var(--c-neon); }
.pill{ padding:.4rem .8rem; border-radius:9999px; border:1px solid var(--c-violet); background: rgba(115,79,154,.2); }
.pill.active{ background: var(--c-neon); color: var(--c-deepp); border-color: var(--c-neon); }
.card{ border:1px solid var(--c-magenta); background: var(--c-darkg); border-radius: 1.5rem; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 0 14px var(--c-violet); }
.header{ position:sticky; top:0; z-index:40; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--c-deepp) 80%, transparent); border-bottom:1px solid var(--c-magenta); }
.container{ max-width: 1120px; margin:0 auto; padding: 0 1.25rem; }
.hero-bg{ background: radial-gradient(circle at top right, var(--c-deepp), var(--c-magenta) 60%, var(--c-deepp)); }
.grid-overlay{ background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 70% 30%, black, transparent 70%); }
.scanline{ position:absolute; left:0; right:0; height:20%; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); animation: scan 5s linear infinite; mix-blend-mode: overlay; }
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.footer{ border-top:1px solid var(--c-violet); background: var(--c-deepp); color:#ccc; }
.text-muted{ color:#cfcfcf }
.h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; font-weight:700; letter-spacing:.15em }
.h2{ font-size:1.4rem; font-weight:600 }
.badge{ font-size:.75rem; border:1px solid var(--c-violet); padding:.15rem .5rem; border-radius:9999px; background: rgba(115,79,154,.2); margin-left:.35rem }
img{ display:block; }
figure.cover{height:12rem; width:100%; overflow:hidden}
figure.cover img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* Reveal animation */
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
.reveal { opacity: 0; transform: translateY(16px); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: translateY(0); transition: transform .6s ease, opacity .6s ease; transition-delay: var(--reveal-delay, 0ms); }