/* header.css */
:root{
  --header-bg:#0f172a;
  --text:#ffffff;
  --muted:#64748b;
  --primary:#ff4040;
  --primary-hover:#1e4fd6;
  --accent:#10b981;
  --border:#ff4040;
  --shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* Reset essentials */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

/* Header layout */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--header-bg);
  box-shadow:none;
  transition:box-shadow 160ms ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow); }

.header-inner{
  max-width:100%;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
}

/* Branding */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.brand__logo{
  width:36px; height:36px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--primary), #7c3aed);
  display:inline-block;
}
.brand__name{
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
}
.brand__sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* Navigation */
.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav__list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0; padding:0;
}
.nav__link{
  display:inline-block;
  padding:10px 12px;
  border-radius:8px;
  color:var(--text);
  font-weight:500;
}
.nav__link:hover,
.nav__link:focus-visible{
  background:#ff4040;
  outline:none;
  border:1px solid var(--border);
}
.nav__link--active{
  color:var(--primary);
  background:#ff4040;
}

/* CTA group */
.cta{
  display:flex; align-items:center; gap:8px;
  margin-left:8px;
}
.btn{
  padding:10px 14px;
  border-radius:2vw;
  border:1px solid var(--border);
  background:#ff4040;
  color:var(--text);
  font-weight:600;
  transition:background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.btn:hover{ background:#0f172a; }
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn--primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.btn--accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#043927;
}
.btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--muted);
}
.btn--ghost:hover{
  background:#0f172a;
  border-color:var(--border);
  color:var(--text);
}

/* Hamburger (mobile) */
.hamburger{
  display:none;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0f172a;
  align-items:center; justify-content:center;
}
.hamburger svg{ width:22px; height:22px; }
.hamburger:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }

/* Mobile menu panel */
.mobile-panel{
  position:fixed; inset:0 0 0 auto; /* right side panel */
  width:88vw; max-width:360px; height:100vh;
  background:#0f172a;
  border-left:1px solid var(--border);
  box-shadow:var(--shadow);
  transform:translateX(100%);
  transition:transform 200ms ease;
  z-index:1100;
  display:flex; flex-direction:column;
}
.mobile-panel.is-open{ transform:translateX(0); }
.mobile-panel__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.mobile-panel__list{
  list-style:none; margin:0; padding:8px;
  display:flex; flex-direction:column; gap:6px;
}
.mobile-panel__link{
  padding:12px 10px; border-radius:8px; font-weight:600;
}
.mobile-panel__link:hover,
.mobile-panel__link:focus-visible{ background:#f8fafc; outline:none; }
.mobile-panel__cta{
  margin-top:auto; padding:12px 16px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}

/* Backdrop */
.backdrop{
  position:fixed; inset:0;
  background:rgba(15,23,42,0.35);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity 200ms ease;
  z-index:1090;
}
.backdrop.is-open{ opacity:1; pointer-events:auto; }

/* Responsive rules */
@media (max-width: 992px){
  .nav__list{ gap:2px; }
  .nav__link{ padding:8px 10px; }
  .btn{ padding:8px 12px; }
}
@media (max-width: 768px){
  .nav__list, .cta{ display:none; }
  .hamburger{ display:inline-flex; margin-left:auto; }
}

/* Focus visibility */
.nav__link:focus-visible,
.btn:focus-visible,
.mobile-panel__link:focus-visible{
  outline:2px solid #93c5fd; outline-offset:2px;
}