/* Hash links land below the fixed nav (pages may override). */
html{scroll-padding-top:76px}

:root{
  --bg:#050208;
  --ink:#F0E9FB;
  --glow:#CDA6FF;
  --pink:#E879F9;
  --violet:#7C3AED;
  --purple:#A855F7;
  --muted:#9D89C2;
  --dim:#5C4A7D;
  --line:rgba(205,166,255,.16);
  --nav-h:68px;
  --f-d:'Unbounded','Arial Black',Arial,sans-serif;
  --f-b:'Geist','Helvetica Neue',Arial,sans-serif;
  --f-m:'Geist Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-b);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* =====================================================================
   1. NAV BAR (option 12 · glow underline)
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(5,2,8,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s ease}
.nav.scrolled{background:rgba(9,4,16,.9)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{font-family:var(--f-d);font-weight:600;font-size:22px;letter-spacing:-.05em;color:var(--ink);
  display:inline-flex;align-items:center;line-height:1;flex-shrink:0}
.logo b{font-weight:600;background:linear-gradient(90deg,var(--glow),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.14em;margin-right:-.14em}
.logo i{width:.32em;height:.32em;margin-left:.36em;border-radius:50%;background:var(--pink);
  box-shadow:0 0 .45em var(--pink);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.6)}}

/* nav lockup: wordmark · intelligent systems */
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;line-height:1}
.brand-tag{font-family:var(--f-b);font-size:13.5px;text-transform:lowercase;color:var(--muted);white-space:nowrap;
  transition:color .25s ease}
.brand-tag::before{content:"·";margin-right:4px}
.brand:hover .brand-tag{color:var(--glow)}

/* nav call to action: gradient pill with a round arrow */
.btn.btn-start{gap:14px;padding:6px 6px 6px 22px;font-size:15px;font-weight:600;
  background:linear-gradient(90deg,var(--violet) 0%,var(--purple) 55%,var(--pink) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 28px -6px rgba(232,121,249,.55)}
.btn-arrow{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--violet);
  transition:transform .25s ease}
.btn.btn-start .btn-arrow svg{width:15px;height:15px}
.btn.btn-start:hover .btn-arrow{transform:translateX(2px)}

.links{display:flex;align-items:stretch;gap:36px;height:100%;margin-left:auto;margin-right:16px}
.links a{position:relative;display:flex;align-items:center;font-size:15.5px;
  color:rgba(240,233,251,.8);transition:color .2s ease;white-space:nowrap}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--glow),var(--pink));box-shadow:0 0 10px var(--pink);
  transform:scaleX(0);transition:transform .25s ease}
.links a:hover,.links a.active{color:var(--ink)}
.links a:hover::after,.links a.active::after{transform:scaleX(1)}

.actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#fff;
  padding:10px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--violet),var(--purple));
  box-shadow:0 0 0 1px rgba(205,166,255,.25) inset,0 6px 24px -6px rgba(168,85,247,.6);
  transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(205,166,255,.4) inset,0 10px 30px -6px rgba(232,121,249,.6)}
.btn svg{width:14px;height:14px}

.glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--purple) 30%,var(--pink) 70%,transparent);
  opacity:.55;transition:opacity .3s ease}
.nav.scrolled .glow-line{opacity:1}

.menu-btn{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:rgba(18,8,31,.6);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0}
.menu-btn span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav.open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.open .menu-btn span:nth-child(2){opacity:0}
.nav.open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{display:none}

@media (max-width:900px){
  .links{display:none}
  .menu-btn{display:flex}
  .mobile-menu{display:block;max-height:0;overflow:hidden;transition:max-height .35s ease;background:rgba(9,4,16,.96)}
  .nav.open .mobile-menu{max-height:420px}
  .mobile-menu nav{display:flex;flex-direction:column;padding:8px 24px 24px}
  .mobile-menu nav a{padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:16px}
  .mobile-menu nav a:hover{color:var(--ink)}
  .mobile-menu .btn{margin-top:20px;justify-content:center}
}
@media (min-width:901px) and (max-width:1060px){
  .brand-tag{display:none}                    /* make room for the links on small laptops */
}
@media (max-width:380px){
  .brand-tag{display:none}
}
@media (max-width:520px){
  .nav-inner{padding:0 16px}
  .actions .btn{display:none}
  .mobile-menu nav{padding:8px 16px 20px}
}