/* ================= NAVBAR ================= */
.navbar-wrap{
  position:fixed; top:18px; left:0; right:0; z-index:200;
  display:flex; justify-content:center; pointer-events:none;
  transition: top .4s var(--ease);
}
.navbar-wrap.scrolled{ top:10px; }
.navbar{
  pointer-events:auto;
  width:min(980px, 92vw);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(8,11,24,.55);
  backdrop-filter: blur(16px);
  transition: all .4s var(--ease);
}
.navbar.scrolled{
  padding:10px 20px;
  background:rgba(8,11,24,.86);
  border-color: var(--line-strong);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.nav-logo{ font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
.nav-logo span{ color:var(--text-faint); font-family:var(--font-mono); font-size:.65rem; margin-left:6px; }
.nav-links{ display:flex; gap:20px; list-style:none; margin:0; padding:0; white-space:nowrap; }
.nav-links a{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--text-dim);
  position:relative; padding-bottom:3px; transition:color .25s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--grad);
  transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:8px; color:var(--text); width:38px; height:34px; }
@media (max-width:760px){
  .nav-links{
    display:flex; position:fixed; top:78px; left:50%; transform:translateX(-50%);
    width:min(320px,88vw); flex-direction:column; gap:0; align-items:stretch;
    background:rgba(8,11,24,.94); border:1px solid var(--line-strong); border-radius:14px;
    padding:8px; backdrop-filter:blur(16px); pointer-events:none; opacity:0; translate:0 -8px;
    transition:opacity .25s ease, translate .25s ease;
  }
  .nav-links.open{ pointer-events:auto; opacity:1; translate:0 0; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:13px 14px; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:block; }
}

/* ================= SECTION HELPERS ================= */
section{ position:relative; z-index:2; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.section-pad{ padding:130px 0; }
@media (max-width:760px){ .section-pad{ padding:88px 0; } }

.kicker{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
}
.kicker::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--purple); box-shadow:0 0 8px 2px var(--purple); }

.display-xl{
  font-size:clamp(2.6rem, 8vw, 6.4rem);
  line-height:.98; font-weight:700; letter-spacing:-.02em; margin:0;
}
.display-lg{
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1.03; font-weight:700; letter-spacing:-.015em; margin:0;
}
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.reveal{ opacity:0; transform:translateY(36px); }
.reveal.blur{ filter:blur(10px); }