/* ===============================
   HEADER — GLASS NAV SYSTEM v1.0
   =============================== */

:root{
  --header-bg: rgba(10,10,10,.45);
  --header-stroke: rgba(255,255,255,.12);
  --header-shadow: 0 18px 40px rgba(0,0,0,.25);
  --header-radius: 20px 50px 20px 50px;
  --header-accent: rgba(255,255,255,.25);
  --ink:#fff;
}

/* Main wrapper (fixed top) */
.nav-wrap{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(96%,1320px);
  z-index:1100;
}

/* Glass container */
.nav-glass{
  background:var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--header-stroke);
  border-radius:var(--header-radius);
  box-shadow:var(--header-shadow);
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Brand */
.brand img{
  height:50px;
  display:block;
}

/* Navigation */
nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:12px;
}

nav a{
  font-family:Poppins, sans-serif;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  padding:10px 18px;
  border-radius:100px;
  display:flex;
  align-items:center;
  position:relative;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}

/* Subtle ripple */
nav a::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:0;
  height:0;
  border-radius:999px;
  opacity:0;
  background:radial-gradient(60px 60px at center, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
  transition:width .36s cubic-bezier(.22,1,.36,1),
              height .36s cubic-bezier(.22,1,.36,1),
              opacity .36s;
}
nav a:hover::before{
  width:140%;
  height:220%;
  opacity:1;
}

nav a:hover{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 12px 26px rgba(0,0,0,.30), 0 0 22px rgba(35,69,255,.35);
}

/* Actions (social + CTA) */
.actions{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Social Icons */
.actions .social{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid var(--header-stroke);
  backdrop-filter: blur(8px);
  transition:all .35s cubic-bezier(.22,1,.36,1);
}
.actions .social:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

/* CTA Button */
.actions .cta{
  font-family:Poppins, sans-serif;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-size:14px;
  padding:0 30px;
  height:48px;
  border-radius:100px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  backdrop-filter:blur(10px);
  transition:.35s cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:hidden;
}

.actions .cta:hover{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.45);
  box-shadow:0 14px 28px rgba(0,0,0,.35), 0 0 28px rgba(35,69,255,.5);
}

/* CTA Shine */
.actions .cta::before{
  content:"";
  position:absolute;
  inset:-150% -50% auto -50%;
  height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%, rgba(255,255,255,.18));
  transform:skewX(-25deg) translateX(-20%);
  transition:transform .7s ease;
}
.actions .cta:hover::before{ transform:skewX(-25deg) translateX(35%); }

/* RESPONSIVE MENU (Phase 2 later, structure ready) */
@media(max-width:992px){
  nav ul{
    display:none;
  }
  .actions .cta{
    font-size:12px;
    padding:0 20px;
  }
}