/* === Aurelian brand accents === */
:root{
  --aurelian-gold: #d4af37;
  --primary: var(--aurelian-gold);      /* Pico primary colour */
  --font-family-base: 'Inter', sans-serif;
}

/* Header nav */
header{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.5rem;
}
header a{font-weight:600;}

/* Hero section on index */
.hero{
  text-align:center;
  padding:4rem 1rem 3rem;
  background:linear-gradient(145deg,#101010 0%,#1d1d1d 60%);
  color:#fff;
  border-radius:.75rem;
}
.hero h1{margin-bottom:.3rem;font-size:2.2rem}
.hero p{opacity:.9;margin-bottom:1.5rem}

/* Buttons */
button{
  font-weight:600;
  border-radius:6px;
}
/* --- nav tweaks --- */
header{
  display:flex;
  gap:1.2rem;
  justify-content:center;        /* center on page */
  font-weight:600;
  margin-bottom:2rem;
}
header a{
  color:var(--primary);           /* gold links, unvisited & visited */
  text-decoration:none;
}
header a:visited{color:var(--primary);}
/* ==== NAV PILL HIGHLIGHT ==== */
header a{
  color: var(--primary);
  text-decoration: none;
  padding: .4rem .8rem;
}
header a:hover{
  background:#2b2f3a;
  border-radius:6px;
}
header a.active{           /* only the link with class="active" gets the pill */
  background:#495065;
  border-radius:6px;
  color:#fff;
}

/* ==== PAGE MARGINS & FOOTER ==== */
body{                      /* more vertical air */
  padding-top: 1rem;
  padding-bottom: 2rem;
}
footer.container{         /* center footer the same way as main content */
  max-width: 760px;
  margin: 2rem auto 0 auto;
  font-size:.85rem;
  text-align:center;
}
footer.container a{margin:0 .4rem;}
/* ─── NAV BRAND / CREST ─────────────────────────── */
header img.logo{
  height:48px;        /* ← bump this up until it feels right (40-48-56)  */
  width:auto;         /* preserves the aspect ratio                     */
  vertical-align:middle;
  margin-right:1rem;  /* optional spacing before “About” link           */
}

/* shrink it slightly on small screens */
@media (max-width:640px){
  header img.logo{height:32px}
}
/* ---------- GLOBAL TYPE & COLORS ---------- */
:root{
  --gold:#d4af37;
  --navy:#0d1117;
  --grey:#262b39;
  --btn:#2563eb;
}
body{background:var(--navy) radial-gradient(circle at 50% 0,var(--grey) 0, var(--navy) 65%);}
main,section{padding:4rem 0;border-bottom:1px solid #1a202c;}

/* ---------- NAV ---------- */
header img.logo{height:60px;width:auto;vertical-align:middle;margin-right:1rem;}
header a{color:var(--gold);font-weight:600;text-decoration:none;padding:0 .8rem;line-height:68px;}
header a:hover{color:#fff;}

/* ---------- HERO ---------- */
.hero{position:relative;padding:4rem 2rem;background:#1116;border-radius:.75rem;box-shadow:0 4px 12px #0005;text-align:center;}
.hero::before{content:"";position:absolute;inset:0;background:url('/crest.svg') center/220px no-repeat;opacity:.03;pointer-events:none;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;padding:.85rem 1.8rem;border:0;border-radius:.4rem;
     font-weight:600;color:#fff;background:var(--btn);cursor:pointer;
     box-shadow:0 3px 8px #0003;transition:transform .15s;}
.btn:hover{transform:translateY(-2px);}

/* ---------- TESTIMONIAL CARDS ---------- */
.testi{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:3rem;
}
.testi figure{
  background:#1119;        /* translucent black */
  padding:1.6rem;
  border-radius:.6rem;
  max-width:260px;
  box-shadow:0 3px 8px #0004;
  font-size:.9rem;
  color:#ddd;
}
.testi blockquote{
  margin:0 0 .8rem;
  font-style:italic;
  line-height:1.4;
}
.testi figcaption{
  font-weight:600;
  color:#d4af37;           /* gold */
}

/* ---------- LIVE SPARKLINE PLACEHOLDER ---------- */
#spark{display:block;margin:1rem auto;width:160px;height:40px;
       background:linear-gradient(to right,#2563eb66,#2563ebaa);border-radius:4px;}
/* ---------- FADE-UP ANIMATION ---------- */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(24px);}
  to  {opacity:1; transform:translateY(0);}
}
/* default hidden state */
.fade-up{
  opacity:0;
  transform:translateY(24px);
}
/* animated-in state */
.fade-up.in{
  animation:fadeUp .8s ease-out forwards;
}
/* ─── TESTIMONIAL CARDS ───────────────────────── */
.testi{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:3rem;
}
.testi figure{
  background:#1119;                 /* translucent black */
  padding:1.6rem;
  border-radius:.6rem;
  max-width:260px;
  box-shadow:0 3px 8px #0004;
  font-size:.9rem;
  color:#ddd;
}
.testi blockquote{
  margin:0 0 .8rem;
  font-style:italic;
  line-height:1.4;
}
.testi figcaption{
  font-weight:600;
  color:#d4af37;                    /* gold */
}

/* ─── FADE-UP ANIMATION ───────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px);}
  to  {opacity:1;transform:translateY(0);}
}
.fade-up{opacity:0;transform:translateY(24px);}
.fade-up.in{animation:fadeUp .8s ease-out forwards;}