/* ------------------------------------
   Shared header styles
   Logo, header, navigation, shared top-bar links
------------------------------------- */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --text-muted:#475569;
  --border:#e5e7eb;
  --muted:#f8fafc;

  --brand:#4f46e5;
  --brand-2:#22c55e;
  --brand-3:#a78bfa;
  --brand-ink:#0b1020;
  --brand-soft:#eef2ff;
  --radius:16px;
  --shadow:0 10px 25px -10px rgba(15,23,42,.15);
  --ring:0 0 0 3px rgba(79,70,229,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

.container{max-width:1200px;padding:0 24px;margin:0 auto}

.accent-line{
  height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3));
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}

@media (min-width:768px){
  .brand{font-size:26px}
}

.brand__logo{
  display:block;
  width:auto;
  height:34px;
  max-width:min(190px,46vw);
  object-fit:contain;
}

@media (min-width:768px){
  .brand__logo{
    height:40px;
    max-width:220px;
  }
}

.brand__mark{color:var(--text)}

.brand__accent{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand::after{
  content:none;
  display:none;
}

.brand:focus-visible{
  outline:none;
  border-radius:10px;
  box-shadow:var(--ring);
}

.nav{
  display:none;
  align-items:center;
  gap:24px;
}

.nav__link,
.header__cta .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-muted);
  text-decoration:none;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:none;
  cursor:pointer;
  transition:color .2s ease, opacity .2s ease, text-decoration-color .2s ease;
}

.nav__link:hover,
.header__cta .btn:hover{
  color:var(--text);
  text-decoration:none;
  box-shadow:none;
  transform:none;
  filter:none;
}

.nav__link:focus-visible,
.header__cta .btn:focus-visible{
  outline:none;
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:4px;
}

.header__cta{
  display:flex;
  align-items:center;
  gap:24px;
}

.header__cta .btn,
.header__cta .btn--brand,
.header__cta .btn--soft,
.header__cta .btn--outline{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-muted);
  box-shadow:none;
}

.header__cta .btn.full{width:auto}
.header__cta .btn .icon{display:none}

.hide-sm{display:none}

@media (min-width:768px){
  .nav{display:flex}
  .hide-sm{display:inline-flex}
}

@media (max-width:767px){
  .header__cta{gap:16px}
}