:root{
  --bg:#0a0a0a; --fg:#e8e6e3; --muted:#b3aea6; --gold:#c5a146; --card:#151515;
  --radius:18px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

/* ===== Reset & Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg); font:16px/1.6 var(--font);
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit;text-decoration:none}

/* ===== Header ===== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 12%;
  max-width:1600px; margin:0 auto;
  gap:60px;                         /* ← space between brand and nav */
}
.brand{display:flex; align-items:center; gap:10px}
.brand-neo{color:var(--gold); font-weight:800; font-size:22px; letter-spacing:.7px}
.brand-protocol{color:var(--fg); font-weight:700; font-size:22px}
nav{display:flex; align-items:center; gap:24px;} /* internal spacing if more items later */

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:999px; font-weight:700; border:0; cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, box-shadow .25s ease;
}
.btn.lg{padding:14px 30px; font-size:17px}
.btn.primary{background:var(--gold); color:#000}
.btn.secondary{background:transparent; border:1px solid #3a3a3a}
.btn.outline{background:transparent; border:1px solid rgba(197,161,70,.45); color:var(--fg)}
.btn:hover{opacity:.94}
.btn.primary:hover,.btn.secondary:hover,.btn.outline:hover{
  opacity:1; transform:translateY(-1px);
  box-shadow:0 0 15px rgba(197,161,70,.45);
}

/* ===== Hero ===== */
.hero{
  position:relative; flex:1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:100px 16px; min-height:82vh; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(197,161,70,.15), transparent 70%),
    radial-gradient(900px 500px at 80% 20%, rgba(197,161,70,.05), transparent 60%),
    linear-gradient(to bottom, #0a0a0a 0%, #000 100%);
}

/* Silver emblem background — smaller & a touch lower */
.hero::before{
  content:""; position:absolute; inset:-8vh 0; z-index:0; pointer-events:none;
  background:url("/assets/anchsilver.png") center 56% / 30vmax no-repeat;
  opacity:.13; filter:brightness(1.06);
}

/* Inner content */
.hero-copy{position:relative; z-index:1; max-width:900px}
h1{font-size:clamp(40px,6vw,64px); margin-bottom:16px}
.accent{color:var(--gold)}
.lede{color:var(--muted); font-size:clamp(18px,2vw,22px); margin-bottom:36px}
.cta-row{display:flex; justify-content:center}
.micro{margin-top:24px; color:#8d897f; font-size:13px}

/* ===== Footer ===== */
.site-footer{
  text-align:center; padding:24px 16px; border-top:1px solid #222; color:#999; font-size:13px;
}

/* ===== Responsive ===== */
@media (max-width:520px){
  .site-header{padding:20px 7%; gap:28px}
  .brand-neo,.brand-protocol{font-size:19px}
  nav{gap:20px}
  .btn.lg{padding:12px 20px; font-size:16px}
}

/* === Ultra-wide polish === */
@media (min-width:1400px){
  .site-header{padding:28px 14%; gap:80px}
  .hero::before{background-size:26vmax; background-position:center 58%}
}
@media (min-width:1700px){
  .site-header{padding:32px 16%; gap:96px}
  .hero::before{background-size:22vmax; background-position:center 60%}
}