:root{
  --bg:#0b1220;
  --text:#eef3ff;
  --muted:rgba(238,243,255,.75);

  --accent:#8fd3ff;
  --accent-2:#a89cff;

  /* 21k gold accent */
  --gold:#d4af37;
  --gold-soft:rgba(212,175,55,.35);

  --radius:18px;
  --max:1160px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}

a{text-decoration:none;color:inherit}

.container{
  width:min(var(--max),calc(100% - 2rem));
  margin:auto;
}

.skip-link{
  position:absolute;
  top:-40px;
}
.skip-link:focus{top:10px}

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

.site-header{
  position:sticky;
  top:0;
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:50;

  /* 🔒 isolate header from page layout reflow */
  isolation:isolate;
  contain:layout paint;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.brand-logo{height:44px}

.brand-tagline{
  font-size:.9rem;
  color:var(--muted);
}

/* NAV */
.nav{
  display:flex;
  gap:.75rem;
}

.nav-link{
  padding:.5rem .9rem;
  border-radius:999px;
  color:var(--muted);
}

.nav-link.is-active{
  color:#fff;
  border:1px solid var(--gold-soft);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  padding:.85rem 1.4rem;
  border-radius:999px;
  font-weight:700;
}

/* PRIMARY CTA — FORCED BRAND GOLD (GLOBAL) */
.btn-primary{
  background:var(--gold);
  color:#08101d;
  border:1px solid var(--gold-soft);
  box-shadow:
    0 0 0 1px var(--gold-soft),
    0 14px 30px rgba(0,0,0,.35);
}

/* Hover / focus — lighter gold */
.btn-primary:hover,
.btn-primary:focus{
  background:#e6c878;
  color:#08101d;
}

.btn-secondary{
  border:1px solid rgba(255,255,255,.25);
}

/* =========================================================
   LAYOUT
========================================================= */

.section{padding:4rem 0}

.section-alt{
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.section-head{
  max-width:720px;
  margin-bottom:2rem;
}

.grid{
  display:grid;
  gap:1rem;
}

.cards-3{
  grid-template-columns:repeat(3,1fr);
}

@media(max-width:900px){
  .cards-3{
    grid-template-columns:1fr;
  }
}

.card{
  background:rgba(255,255,255,.06);
  padding:1.25rem;
  border-radius:var(--radius);
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  padding:3rem 0 1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:2rem;
}

.footer-links a{
  display:block;
  color:var(--muted);
  margin-bottom:.4rem;
}

.footer-bottom{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.9rem;
  color:var(--muted);
}