/* ====== Brand: hybrid fantasy + finance ====== */
:root{
  --midnight:#0A1A2F;
  --navy:#122C4C;
  --gold:#FFD700;
  --gold-ink:#B38805;
  --parch:#F8F4E9;
  --ink:#202734;
  --muted:#6b7280;
  --panel:#ffffff;
  --line:#E8E2CF;

  --safe:#16a34a;
  --watch:#b45309;
  --risk:#b91c1c;

  --radius:16px;
  --shadow:0 8px 30px rgba(10,26,47,.12);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--parch);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2{
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color:var(--navy);
}
h1{font-weight:700; letter-spacing:.2px}
h2{font-weight:700; letter-spacing:.2px}
h3,h4{color:#304566}

a{color:#2f82ff; text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px; margin:0 auto; padding:0 20px}
.mt-m{margin-top:28px}
.mt-l{margin-top:48px}

/* ====== Header & Nav ====== */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px}

.site-header{
  background: linear-gradient(180deg, var(--midnight), #0f2644);
  border-bottom:4px solid var(--gold);
  color:#fff;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand:hover{text-decoration:none}
.logo{width:28px; height:28px}
.brand-text{font-weight:800; letter-spacing:.3px}

.nav{display:flex; gap:18px}
.nav a{color:#dfe7ff; font-weight:700}
.nav a:hover{color:#fff}

.nav-toggle{
  display:none; background:transparent; border:2px solid #334e74; color:#fff;
  padding:6px 10px; border-radius:10px; font-weight:800;
}
.nav.open{display:flex}

@media (max-width: 880px){
  .nav{display:none; position:absolute; right:20px; top:60px; flex-direction:column; background:#0f2746; padding:12px; border-radius:12px; box-shadow:var(--shadow)}
  .nav-toggle{display:inline-block}
}

/* ====== Hero ====== */
.hero{
  position:relative;
  color:#fff;
  background: radial-gradient(1200px 400px at 80% 0%, rgba(255,215,0,.18), transparent 60%), linear-gradient(180deg, #0A1A2F 0%, #122C4C 100%);
  padding:56px 0;
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center;
}
.hero-copy h1{font-size: clamp(32px, 5vw, 54px); margin:.2em 0}
.hero-copy p{color:#d9e4ff; font-size: clamp(16px, 2.4vw, 18px); margin:0 0 14px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.hero-graphic{height:220px; position:relative}
.moon{position:absolute; right:6%; top:-10px; width:200px; height:200px; background:radial-gradient(circle at 30% 30%, #ffe9a3, #d4a017); border-radius:50%; filter:blur(.2px)}
.stars{position:absolute; inset:0; background:
  radial-gradient(2px 2px at 20% 30%, #fff, transparent 60%),
  radial-gradient(2px 2px at 40% 60%, #fff, transparent 60%),
  radial-gradient(2px 2px at 70% 20%, #fff, transparent 60%),
  radial-gradient(1.5px 1.5px at 85% 70%, #fff, transparent 60%),
  radial-gradient(1.5px 1.5px at 60% 10%, #fff, transparent 60%);
  opacity:.6}

@media (max-width: 880px){
  .hero-inner{grid-template-columns:1fr}
  .hero-graphic{order:-1; height:180px}
}

/* ====== Cards & Elements ====== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow: var(--shadow);
  background-image: radial-gradient(ellipse at top, rgba(255,215,0,.05), rgba(255,255,255,0) 40%);
}

.grid.two{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
@media (max-width: 880px){ .grid.two{grid-template-columns: 1fr} }

.checklist{padding-left:20px}
.checklist li{margin:8px 0}

.poem{background:#fff7e0; border-left:4px solid var(--gold)}
.poem .verse{
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 18px; color:#3a2b16; line-height:1.6; margin:.8em 0;
}

/* Eyebrow + chips */
.eyebrow{font-weight:800; color:#1f2f49; margin-bottom:12px}
.chip{
  display:inline-block; padding:5px 10px; border-radius:999px; border:1px solid #e2c75f;
  background:rgba(255,215,0,.18); font-weight:900; margin-right:8px;
}
.chip.alt{background:rgba(255,255,255,.5)}

/* Bullets */
.bullets{padding-left:18px}
.bullets li{margin:6px 0}

/* ====== Score Cards ====== */
.cards-row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:16px;
}
@media (max-width: 1100px){ .cards-row{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 720px){ .cards-row{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 480px){ .cards-row{grid-template-columns: 1fr} }

.score-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.badge{padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid transparent}
.safe{background:rgba(22,163,74,.1);color:#0b7a2f;border-color:rgba(22,163,74,.25)}
.watch{background:rgba(180,83,9,.1);color:#8a470a;border-color:rgba(180,83,9,.25)}
.risk{background:rgba(185,28,28,.1);color:#8a1a1a;border-color:rgba(185,28,28,.25)}

.score-number{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:48px; color:var(--navy);
}
.score-body dl{display:grid; grid-template-columns: auto 1fr; gap:6px 12px; margin:8px 0 0}
.score-body dt{font-weight:800; color:#344c6d}
.score-body dd{margin:0}

/* ====== Forms ====== */
.form label{font-weight:800; display:block; margin:8px 0 4px}
.form input[type="email"]{
  width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:12px; background:#fff;
}
.btn{
  display:inline-block; cursor:pointer; border-radius:12px; font-weight:800; border:2px solid transparent;
  padding:10px 14px; text-align:center;
}
.btn.primary{background:var(--gold); color:#2b2110; border-color:#E2C75F; box-shadow:0 2px 0 #C7AE49}
.btn.ghost{background:transparent; color:#ffe27a; border-color:#3b4d6c}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ====== Footer ====== */
.site-footer{
  background:var(--midnight);
  border-top:4px solid var(--gold);
  color:#dfe7ff;
  margin-top:56px;
}
.foot-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0;
}
.site-footer a{color:#fff59a}

/* ====== Utilities ====== */
.note{color:var(--muted); font-size:.95rem}
.sr{position:absolute;left:-9999px}