html {
  overflow-x: hidden;
}
/* ── fixed‑top bar ─────────────────────────────────────────────── */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  padding-block:15px;
  background:#fff;
  display:flex; align-items:center;
  transform:translateY(0);
  transition:transform .25s ease, background .25s ease;
  z-index:9999;
  font-family:"Poppins",sans-serif;
  box-shadow:none;
}
.site-nav.hidden  {transform:translateY(-100%);}
.site-nav.in-hero {
  background:transparent;
}

/* ── inner container : full‑bleed  ─────────────────────────────── */

.nav-inner{
  width: 100%;
  margin: 0 2rem;
  padding-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
}

/* ── logo ──────────────────────────────────────────────────────── */
.brand {
  display: block;
  width: 370px;
  height: 90px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;

  /* Default Logo */
  background-image: url("../images/logo-black.svg");
}

/* Hero Image Logo */
.site-nav.in-hero .brand {
  width: 440px;
  height: 120px;  
  background-image: url("../images/logo-white-2.svg");
}

/* ── centre nav links (pill) ───────────────────────────────────── */
.nav-center{
  display:flex; gap:1.2rem;
  padding:.45rem 1.2rem;
  margin-right: 100px;
  border-radius:9999px;
  background:#FDFBD4;
  backdrop-filter:blur(8px);
}
.nav-center a{
  color:#161540;
  text-decoration:none;
  font-size:1.05rem;
  padding:.3rem .55rem;
  border-radius:9999px;
  transition:background .2s;
}
.nav-center a:hover{background:rgba(0,0,0,.06);}

/* hero variant */
.site-nav.in-hero .nav-center{
  background:rgba(255,255,255,.18);
}
.site-nav.in-hero .nav-center a{
  color:#fff;
}
.site-nav.in-hero .nav-center a:hover{
  background:rgba(255,255,255,.25);
}

/* ── buttons ───────────────────────────────────────────────────── */
.btn-login,
.btn-signup{
  display:inline-block; white-space:nowrap; border:none;
  font-size:1.05rem;
  padding:.6rem 1.21rem;
  border-radius:24px;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.btn-login {background:#e2fea9; color:#0b0b0c; margin-right:.5rem;}
.btn-login:hover {background:#c8e696;}

.btn-signup {background:#000; color:#fff;}
.btn-signup:hover{background:#222;}

/* hero variant */
.site-nav.in-hero .btn-login{
  background:rgba#c8e696; color:#0b0b0c;
}
.site-nav.in-hero .btn-login:hover{
  background:rgba(226,254,169,.35);
}
.site-nav.in-hero .btn-signup{
  background:rgba(0,0,0,.4); color:#fff;
}
.site-nav.in-hero .btn-signup:hover{
  background:rgba(58, 58, 58, 0.55);
}

/* ── hamburger icon ─────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 46px;
  height: 46px;
  cursor: pointer;
  position: relative;
  z-index: 10001;
  transition: transform .3s ease;           /* 90° spin */
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 2px;
  background: #000;
}

.nav-toggle span           { top: 50%; transform: translateY(-50%); }
.nav-toggle span::before   { top: -10px; }
.nav-toggle span::after    { top:  10px; }

.site-nav.open .nav-toggle  { transform: rotate(90deg); }

.site-nav.in-hero .nav-toggle span,
.site-nav.in-hero .nav-toggle span::before,
.site-nav.in-hero .nav-toggle span::after { background: #fff; }


/* ── dropdown menu ─────────────────────────────────────────── */
.nav-menu {
  position: absolute;
  top: 100%;
  right: 2rem;
  width: min(280px, 90vw);
  display: none;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.8rem 1.6rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
}

.nav-menu-links   { display: flex; flex-direction: column; gap: 1.2rem; }
.nav-menu a       { color: #161540; font-size: 1rem; text-decoration: none; }
.nav-menu-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: .4rem; }
.nav-menu .btn-login,
.nav-menu .btn-signup { width: 100%; text-align: center; }

.site-nav.in-hero .nav-menu   { background: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.site-nav.in-hero .nav-menu a {color: #fff;}
.site-nav.in-hero .nav-menu .btn-login {color: #0b0b0c;}
.site-nav.in-hero .nav-menu .btn-signup {color: #fff;}

/* signup text always pure-white */
a.btn-signup,
a.btn-signup:link,
a.btn-signup:visited,
a.btn-signup:hover,
a.btn-signup:focus,
a.btn-signup:active {
  color: #fff;
}


/* ── responsive breakpoints ─────────────────────────────────── */
@media (min-width: 1061px) and (max-width: 1270px) {
  .site-nav.in-hero .brand  { width: 370px; height: 100px; }
  .nav-center               { gap: .6rem; padding: .3rem .8rem; }
  .nav-center a             { font-size: .9rem; padding: .2rem .4rem; }
  .btn-login,
  .btn-signup               { font-size: .9rem; padding: .4rem .9rem; }
}

@media (max-width: 1060px) {
  .nav-toggle { display: block; margin-left: auto; margin-right: 1.5rem; }
  .nav-center, 
  .nav-actions { display: none; }
  .site-nav.open .nav-menu { display: flex; }
  .nav-inner { justify-content: space-between; }
  .site-nav.in-hero .brand { width: 370px; height: 90px; }
}

@media (max-width: 800px) {
  .nav-toggle {margin-right: 5.5rem;}
  .nav-inner { margin-left: 2.5rem; margin-right: 1.5rem; }
  .brand { background-position: left center; }
}

@media (max-width: 500px) {
  .site-nav .brand {
    width: 240px;
    height: 70px;
  }
  .nav-inner { margin-right: 2.5rem; }
  .nav-toggle {margin-right: 5.5rem;}
}