@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --bg:#04060a;
  --panel:#0b0f17;
  --red:#ff0000;
  --cyan:#00eaff;
  --text:#fbfbfb;
  --muted:#ffffff;
  --dangerGlow: 0 0 10px rgb(255, 1, 1), 0 0 30px rgba(255,43,43,.45);
  --cyanGlow: 0 0 10px rgba(0,234,255,.7), 0 0 30px rgba(0,234,255,.45);
}

/* Light theme variables */
body[data-theme="light"]{
  --bg:#f1f2f3;
  --panel:#ffffff;
  --text:#7f0303;
  --muted:#000000;
  --red:#c4161c;
  --cyan:#0077ff;
  background:
    radial-gradient(circle at 15% 20%, rgba(148, 3, 8, 0.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(1, 16, 34, 0.08), transparent 40%),
    linear-gradient(180deg,#dfeaf9,#eef3f9);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Orbitron','Share Tech Mono',monospace;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,43,43,.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,234,255,.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #080000, #02040a);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}



/* ===== NAVBAR ===== */
.nav{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;background:rgba(2,4,10,.7);
  backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,43,43,.35);
}

/* Hide hamburger on desktop */
.hamburger{
  display: none;
}
  
body[data-theme="light"] .nav{
  background:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(0,119,255,.25);
}

.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:42px;filter:drop-shadow(0 0 10px var(--red));}
.brand span{color:var(--red);letter-spacing:2px;text-shadow:var(--dangerGlow);}

.nav-links{display:flex;gap:18px;
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:.84rem;letter-spacing:1px;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;
  background:linear-gradient(90deg,var(--red),var(--cyan));transition:.25s;
}
.nav-links a:hover{color:#fff;text-shadow:var(--cyanGlow);}
body[data-theme="light"] .nav-links a:hover{color:#000;}
.nav-links a:hover::after{width:100%;}

.icon-btn{
  background:#0b1220;border:1px solid rgba(255,43,43,.5);
  color:var(--cyan);padding:8px 10px;border-radius:8px;cursor:pointer;
}
body[data-theme="light"] .icon-btn{
  background:#fff;border:1px solid rgba(0,119,255,.4);color:#0077ff;
}
.icon-btn:hover{box-shadow:var(--dangerGlow);}



/* mobile responsive header*/
@media(max-width:768px){
  .nav{padding:10px 12px;}
  .brand span{font-size:.8rem;}
  .nav-links{position:absolute;top:58px;left:0;right:0;background:#02040a;flex-direction:column;padding:14px;display:none;border-bottom:1px solid rgba(255,43,43,.35);}
  body[data-theme="light"] .nav-links{background:#fff;}
  .nav-links.active{display:flex;}
  .nav-links a{padding:10px 6px;font-size:.75rem;}
  .hamburger{
    display: inline-flex;  /* show hamburger on mobile */
  }
}


/* mobile responsive header*/
@media(max-width:480px){
  .brand img{width:42px;}
  .brand span{
    display:inline; 
    font-size:.75rem;  
    letter-spacing:1px;}}