/* ========= Global Styles: Neon Drift Arena ========= */

/* Local fonts (TTF in /fonts) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/Orbitron-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/Orbitron-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: #e8ecff;
  background: radial-gradient(1200px 600px at 50% -10%, #2a1150 10%, #0a0518 60%, #05030b 100%);
  font: 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:root{
  --nda-pink: #ff4bd8;
  --nda-cyan: #4bffe7;
  --nda-violet: #7a5cff;
  --nda-deep: #0b0620;
  --nda-grid: rgba(255,255,255,0.06);
  --nda-glow: drop-shadow(0 0 10px rgba(123, 94, 255, .45)) drop-shadow(0 0 30px rgba(75, 255, 231, .25));
}

/* A11y utilities */
.visually-hidden{
  position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
}

/* Layout helpers */
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.section-pad { padding: clamp(72px, 10vw, 120px) 0; }

/* Fixed header */
.nda-header {
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,5,24,.85), rgba(10,5,24,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nda-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 16px;
}
.logo{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: #fff; filter: var(--nda-glow);
}
.main-nav ul{
  display: flex; gap: clamp(10px, 3vw, 28px); list-style: none; margin:0; padding:0;
}
.main-nav a{
  display:inline-block; padding:10px 12px; text-decoration:none; color:#e8ecff;
  border-radius: 999px; border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.main-nav a:hover{ transform: translateY(-2px); border-color: var(--nda-grid); background: rgba(255,255,255,.04); }
.main-nav a.is-active{ border-color: rgba(123, 94, 255, .45); background: rgba(122,92,255,.12); }

/* Burger + drawer for small screens */
.burger{ display:none; background:transparent; border:0; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:#e8ecff; margin:5px 0; border-radius:2px; }
.nav-drawer{
  display:flex; flex-direction:column; gap:8px; padding:12px 16px;
  background: rgba(10,5,24,.94); border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-drawer a{ color:#e8ecff; text-decoration:none; padding:10px 8px; border-radius:8px; }
.nav-drawer a.is-active{ background: rgba(122,92,255,.12); }

/* Footer */
.nda-footer{ border-top: 1px solid rgba(255,255,255,.06); padding: 24px 0; background: rgba(10,5,24,.6); }

/* Media constraints for images (≤350px) */
img{ display:block; width:100%; height:auto; max-width: 350px; border-radius: 14px; }

/* Global animation bits */
@keyframes floatY { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
@keyframes pulseGlow {
  0%,100%{ box-shadow: 0 0 0px rgba(123,94,255,0.0), 0 0 0px rgba(75,255,231,0.0); }
  50%{ box-shadow: 0 0 20px rgba(123,94,255,.35), 0 0 45px rgba(75,255,231,.18); }
}

/* Responsive */
@media (max-width: 992px){
  .main-nav{ display:none; }
  .burger{ display:block; }
}
@media (max-width: 768px){
  .container{ width: min(720px, 100% - 24px); }
}
@media (max-width: 480px){
  .container{ width: min(420px, 100% - 20px); }
  .logo{ font-size: 0.95rem; }
}
.nav-drawer{
  display:flex; flex-direction:column; gap:8px; padding:12px 16px;
  background: rgba(10,5,24,.94); border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.nav-drawer[hidden]{
  display: none !important;
}
/* Drawer overlays the page */
.nav-drawer{
  position: fixed;
  inset: 0;                 /* full-screen overlay */
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: calc(var(--header-h, 64px) + 8px) 16px 16px; /* content starts under header */
  background: linear-gradient(180deg, rgba(5,3,11,.72), rgba(5,3,11,.84));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-drawer.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* keep the real hide */
.nav-drawer[hidden]{ display: none !important; }

/* drawer links look good on overlay */
.nav-drawer a{
  color:#e8ecff; text-decoration:none;
  padding:12px 10px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav-drawer a:hover{ transform: translateY(-1px); background: rgba(122,92,255,.14); border-color: rgba(122,92,255,.35); }

/* lock body scroll when drawer is open */
body.drawer-open{ overflow: hidden; }
/* Header выше всего (остается поверх меню) */
.nda-header { z-index: 2000; }

/* Тёмный бекдроп под хедером */
.nav-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1500; /* ниже хедера, выше контента */
  background: radial-gradient(80% 60% at 50% 20%, rgba(18,10,40,.72), rgba(5,3,11,.88));
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.nav-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}
.nav-backdrop[hidden]{ display: none !important; }

/* Меню-оверлей: не перекрывает хедер */
.nav-drawer{
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h, 64px);
  height: calc(100dvh - var(--header-h, 64px));
  z-index: 1800; /* ниже хедера, выше бекдропа по кликам */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, rgba(9,6,22,.90), rgba(9,6,22,.94));
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.nav-drawer.is-open{
  opacity: 1;
  pointer-events: auto;
}
.nav-drawer[hidden]{ display: none !important; }

.nav-drawer a{
  color:#e8ecff; text-decoration:none;
  padding:12px 10px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav-drawer a:hover{
  transform: translateY(-1px);
  background: rgba(122,92,255,.14);
  border-color: rgba(122,92,255,.35);
}

/* Блокируем прокрутку страницы при открытом меню */
body.drawer-open{ overflow: hidden; }
/* Fixed header */
.nda-header{
  position: fixed;       /* <— было sticky */
  top: 0; left: 0; right: 0;
  z-index: 2000;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,5,24,.90), rgba(10,5,24,.65));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Отступ под фиксированный хедер */
body.has-fixed-header{
  padding-top: var(--header-h, 64px);
}
/* Footer legal links */
.nda-footer .container{
  display: grid;
  gap: 8px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.legal-nav{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
}
.legal-nav a{
  color: #cfe0ff;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: transform .18s ease, border-color .2s ease, background .2s ease;
}
.legal-nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(122,92,255,.35);
  background: rgba(122,92,255,.12);
}
/* scrollytape dots */
.scrollytape .dot{
  /* ...твои стили... */
  left: var(--p, 0%);
}

/* seed-map points */
.seed-map span{
  position: absolute;
  left: var(--x, 0%);
  top:  var(--y, 0%);
  /* остальное без изменений */
}

/* gauge needle */
.arc .needle{
  /* ...твои стили... */
  transform: rotate(calc(var(--deg, 0) * 1deg));
}