/* =======================================================
   HEADER
======================================================= */

.site-header {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  width: calc(100% - 2rem);
  max-width: var(--max);

  padding: var(--space-sm) var(--space-lg);
  min-height: 64px;

  border-radius: var(--radius-md);
  border: 1px solid rgba(194,255,232,0.12);

  background: rgba(6, 12, 12, 0.9);
  backdrop-filter: blur(18px);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);

  z-index: 100;

  transition: transform 0.3s ease, background 0.3s ease;
}

/* scroll state */
.site-header.is-scrolled {
  background: rgba(6, 12, 12, 0.95);
  box-shadow: 0 12px 40px rgba(0,255,156,0.08);
}


/* =======================================================
   BRAND
======================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.brand-logo {
  height: 40px;
}

.brand strong {
  font-size: var(--text-base);
  color: #fff;
}


/* =======================================================
   NAVIGATION (DESKTOP)
======================================================= */

/* =======================================================
   NAVIGATION (DESKTOP)
======================================================= */

.site-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.site-nav a {
  position: relative;
  padding: 8px 6px;

  text-decoration: none;
  color: #dffff4;
  font-size: 0.95rem;

  transition: color 0.25s ease;
}

/* =======================================================
   UNDERLINE ANIMATION
======================================================= */

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0%;
  height: 2px;

  background: linear-gradient(
    90deg,
    rgba(0,255,156,0.2),
    #00ff9c,
    rgba(0,255,156,0.2)
  );

  transition: width 0.3s ease;
}

.site-nav a:hover::after {
  width: 100%;
}

/* =======================================================
   ACTIVE STATE
======================================================= */

.site-nav a.active {
  color: #00ff9c;
}

.site-nav a.active::after {
  width: 100%;
}

/* subtle glow (not heavy) */
.site-nav a.active {
  text-shadow: 0 0 6px rgba(0,255,156,0.5);
}

/* =======================================================
   CONTACT CTA (LIGHT EMPHASIS)
======================================================= */

.site-nav a[href="#contact"] {
  color: #00ff9c;
  font-weight: 500;
}


/* =======================================================
   HEADER CTA (PHONE)
======================================================= */

.header-call {
  display: inline-flex;
  align-items: center;

  padding: var(--space-xs) var(--space-sm);

  font-size: var(--text-sm);
  font-weight: 900;

  color: #04100d;
  background: var(--green);

  border-radius: var(--radius-md);

  white-space: nowrap;

  box-shadow:
    0 10px 32px rgba(98,255,183,0.25),
    0 0 12px rgba(98,255,183,0.25);

  transition: all 0.2s ease;
}

.header-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(98,255,183,0.35);
}


/* =======================================================
   MOBILE MENU BUTTON
======================================================= */

.menu-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
}


/* =======================================================
   MOBILE NAV
======================================================= */

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 70px;
    right: 20px;

    flex-direction: column;
    gap: 10px;

    background: #021a14;
    padding: 18px;

    border-radius: 12px;
    border: 1px solid rgba(0,255,156,0.3);

    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;

    transition: all 0.3s ease;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav a {
    padding: 10px 0;
  }

}