/* === Base shared styles (extracted from style.css) === */
/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* VIEWPORT FIX */
:root { --vh: 1vh; }
@supports (height: 100dvh) {
  :root { --vh: 1dvh; }
}

:root {
  --bg: #0f172a;
  --text: #ffffff;
  --muted: #cbd5f5;
  --neon-blue: #00f3ff;
  --neon-purple: #bd00ff;
  --purple-glow: rgba(189, 0, 255, 0.5);
}

html, body {
  background: #020617;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  overflow-x: hidden;
}

/* Buttons (shared) */
.btn {
  padding: 14px 32px;
  border-radius: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  box-shadow: 0 14px 40px rgba(37,99,235,0.45);
}

.btn.primary:hover { transform: translateY(-3px); }

/* Noise overlay (shared) */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAlJyBoZWlnaHQ9JzIwMCUnPjxmaWx0ZXIgaWQ9J25vaXNlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC42NScgbnVtT2N0YXZlcz0nMScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNub2lzZSknIG9wYWNpdHk9JzEnLz48L3N2Zz4=');
}

/* Footer (shared) */
.site-footer {
  width: 100%;
  padding: 40px 0;
  background: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.footer-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #60a5fa, #a855f7, transparent);
}
.footer-content { display:flex; flex-direction:column; gap:10px; }
.footer-content a { color: inherit; text-decoration:none; margin-left:0px; font-size:0.9em; opacity:0.8; transition:opacity 0.3s ease; }
.footer-content a:hover { opacity:1; text-decoration:underline; color: var(--neon-blue); }
.footer-content p { color: #64748b; font-size: 0.85rem; letter-spacing: 0.05em; }
.footer-brand { color: #94a3b8; font-weight: 600; }
.footer-status { font-family: 'JetBrains Mono', monospace; font-size:0.7rem !important; color: #22c55e !important; opacity:0.8; }
.footer-status::before { content: '●'; margin-right:6px; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;}50%{opacity:0.3;} }
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 120px; /* 👈 space for side nav */
  }
}

/* Side navigation (shared) */
.side-nav {
  position: fixed;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: flex-end;
}
.nav-item { display:flex; align-items:center; gap:15px; cursor:pointer; }
.nav-label { font-family: 'JetBrains Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:2px; color:#ffffff; opacity:0.25; transform: translateX(10px); transition: all 0.3s ease; pointer-events: none; }
.nav-dot { width:8px; height:8px; background: rgba(255,255,255,0.2); border-radius:2px; transform: rotate(45deg); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border:1px solid rgba(255,255,255,0.1); }
.nav-item:hover .nav-label { opacity:1; transform: translateX(0); color: var(--neon-blue); }
.nav-item:hover .nav-dot { background: var(--neon-blue); box-shadow: 0 0 15px var(--neon-blue); }
.nav-item.active .nav-dot { background: var(--neon-blue); box-shadow: 0 0 20px var(--neon-purple); width:12px; height:12px; }
.nav-item.active .nav-label { opacity:1; transform: translateX(0); color: white; }
@media (max-width: 1024px) { .side-nav { display: none; } }
@media (max-width: 1024px) { .side-nav { display:flex !important; right:20px; } .nav-label { display:none !important; } }
@media (max-width: 768px) {
  .side-nav { top: auto; bottom: 30px; left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; background: rgba(15,23,42,0.85); backdrop-filter: blur(12px); padding: 15px 30px; border-radius: 50px; border: 1px solid rgba(0,243,255,0.2); gap:30px; width:auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  .nav-dot { width:12px; height:12px; }
  .nav-item.active .nav-dot { background: var(--neon-blue) !important; box-shadow: 0 0 20px var(--neon-blue), 0 0 40px var(--neon-blue); transform: rotate(45deg) scale(1.4); }
}