/* ── VARIABLES ── */
:root {
  --bg: #0b1120;
  --surface: #111827;
  --surface2: #16213a;
  --border: rgba(90,110,160,0.3);
  --accent: #f5c518;
  --accent2: #00c8ff;
  --text: #e8eaf0;
  --muted: #7a8499;
  --card: #131d2e;
}

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

/* ── CUSTOM CURSOR ── */
.cursor {
  width:10px; height:10px;
  background:var(--accent);
  border-radius:50%;
  position:fixed; pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .15s;
}
.cursor-ring {
  width:34px; height:34px;
  border:1.5px solid var(--accent2);
  border-radius:50%;
  position:fixed; pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  opacity:.5;
  transition:width .2s, height .2s;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 48px;
  background:rgba(11,17,32,0.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-family:'Orbitron',monospace;
  font-size:.95em; color:var(--accent);
  text-decoration:none; letter-spacing:.12em;
}
.nav-links { display:flex; gap:6px; }
.nav-links a {
  display:flex; align-items:center; gap:6px;
  padding:6px 16px; border-radius:20px;
  font-size:.82rem; font-weight:600; letter-spacing:.05em;
  text-decoration:none; color:var(--muted);
  border:1px solid transparent;
  transition:all .25s; text-transform:uppercase;
}
.nav-links a:hover,
.nav-links a.active { color:var(--text); background:var(--surface2); border-color:var(--border); }
.nav-links a.active  { background:var(--accent); color:#000; border-color:var(--accent); }

/*---hamburger for mobile---*/
.hamburger {
  display: none;flex-direction: column; gap: 5px; padding: 2px;background: none; border: none;
}
.hamburger span{
  width: 24px; height: 2px;background: var(--text);border-radius: 2px;transition: all 0.3s;
}
.hamburger.open span:nth-child(1){transform: rotate(45deg) translate(5px,5px) ;}
.hamburger.open span:nth-child(2){opacity: 0 ;}
.hamburger.open span:nth-child(3){transform: rotate(-45deg) translate(5px,-5px) ;}


/*----mobile nav----*/
.mobnav{
  display: flex;
  position:fixed;top:56px;left:0;right:0;z-index:199;
  background:rgba(11,17,32,.98);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  flex-direction:column;
  padding:16px 24px;gap:8px;
  z-index: 199;
  opacity: 0;
  pointer-events: none;   
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.mobnav.open{
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.mobnav a{padding:12px 16px;border-radius:10px;font-size:.9rem;font-weight:600;text-decoration:none;color:var(--muted);border:1px solid transparent;transition:all .25s;text-transform:uppercase;letter-spacing:.05em;}
.mobnav a.active,.mobile-nav a:hover{color:var(--text);background:var(--surface2);border-color:var(--border);}


/* ── SHARED BUTTON ── */
.btn {
  padding:10px 26px; border-radius:6px;
  font-family:'Rajdhani', sans-serif;
  font-size:.88rem; font-weight:700; letter-spacing:.08em;
  text-decoration:none; text-transform:uppercase;
  transition:all .25s; cursor:none;
}
.btn-y { background:var(--accent); color:#000; border:2px solid var(--accent); }
.btn-y:hover { background:transparent; color:var(--accent); }
.btn-b { background:transparent; color:var(--accent2); border:2px solid var(--accent2); }
.btn-b:hover { background:var(--accent2); color:#000; }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s, transform .7s; }
.reveal.visible { opacity:1; transform:none; }

/* ── KEYFRAMES ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:none} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes spin     { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes walkR    { from{transform:translateX(0)} to{transform:translateX(70px)} }
@keyframes walkL    { from{transform:scaleX(-1) translateX(0)} to{transform:scaleX(-1) translateX(70px)} }
@keyframes walkToCenter  { from{transform:translateX(0)} to{transform:translateX(90px)} }
@keyframes walkToCenterR { from{transform:scaleX(-1) translateX(0)} to{transform:scaleX(-1) translateX(90px)} }
@keyframes streamLeft    { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes walkToContentL {
  0%   { transform: translateX(0px); }
  100% { transform: translateX(120px); }  /* tweak 60px to taste */
}
@keyframes walkToContentR {
  0%   { transform: translateX(0px); }
  100% { transform: translateX(-120px); } /* negative = walks left */
}

@media(hover: none){
  .cursor,.cursor-ring{display: none;}
  body{cursor: auto;}
  nav{padding: 20px 18px;}
}

.nav-links{display:flex}
@media(max-width:768px){
  .nav-links{display: none;}
  .hamburger{display:flex}
}