:root{
  --navy-950:#0A1526; --navy-900:#10203A; --navy-800:#1A3050; --navy-700:#24405F;
  --gold-300:#EBC07B; --gold-500:#C9A15A; --gold-700:#9C7A3E;
  --cream:#F4EEE0; --ink:#12233E; --steel:#4A595C; --border:#C7CCD3; --muted-label:#9fb0c4;
}
*{ -webkit-font-smoothing:antialiased; }
body{ font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--ink); }
.font-display{ font-family:"Fraunces",Georgia,"Iowan Old Style",serif; }
.eyebrow{ font-family:ui-monospace,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; }
h1,h2,h3{ letter-spacing:-0.02em; }

.navy-radial{
  background: radial-gradient(ellipse 120% 90% at 12% 0%, var(--navy-800), var(--navy-950) 68%);
}
.gold-frame{ position:relative; }
.gold-frame::before, .gold-frame::after{
  content:""; position:absolute; pointer-events:none; border:1px solid;
}
.gold-frame::before{ inset:1.25rem; border-color:var(--gold-700); }
.gold-frame::after{ inset:1.75rem; border-color:rgba(201,161,90,.35); }

.rule-diamond{ display:flex; align-items:center; gap:.6rem; }
.rule-diamond::before, .rule-diamond::after{
  content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.rule-diamond .diamond{ width:6px; height:6px; background:var(--gold-500); transform:rotate(45deg); flex:none; }

.card-elevated{ box-shadow: 0 1px 2px rgba(10,21,38,.04), 0 12px 32px -12px rgba(10,21,38,.18); }
.card-floating{ box-shadow: 0 4px 10px rgba(10,21,38,.06), 0 24px 48px -16px rgba(10,21,38,.28); }

.stat-shadow{ box-shadow: 0 20px 40px -16px rgba(201,161,90,.25); }

a, button{ transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease, color .2s ease; }
.btn-gold:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(201,161,90,.45); }
.btn-gold:active{ transform: translateY(0); }
.btn-gold:focus-visible, a:focus-visible, button:focus-visible{ outline: 2px solid var(--gold-500); outline-offset: 3px; }

.hero-in{ animation: hero-rise .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

::selection{ background: var(--gold-300); color: var(--navy-950); }

@media (prefers-reduced-motion: reduce){
  .hero-in{ animation:none !important; }
  a, button{ transition:none !important; }
}