:root {
  --blue: #143b7d;
  --blue-dark: #0b1f42;
  --gold: #c79a3b;
  --paper: #f7f1e6;
  --ink: #152033;
  --muted: #657086;
  --white: #fffdf8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; }

.hero {
  min-height: 78vh;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 20%, rgba(199,154,59,.36), transparent 28rem),
    linear-gradient(135deg, rgba(11,31,66,.96), rgba(20,59,125,.94)),
    var(--blue);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 4vw, 4rem);
}

.brand { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.navlinks { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .95rem; }
.navlinks a { color: rgba(255,253,248,.82); text-decoration: none; }
.navlinks a:hover { color: var(--gold); }

.hero-content { max-width: 850px; padding: 14vh clamp(1rem, 4vw, 4rem) 6rem; }
.eyebrow { color: var(--gold); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: .9; margin-bottom: 1.5rem; }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; }
.lead { font-size: clamp(1.2rem, 2vw, 1.55rem); color: rgba(255,253,248,.88); max-width: 760px; }

.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.button { border-radius: 999px; padding: .9rem 1.25rem; font-weight: 800; text-decoration: none; }
.primary { background: var(--gold); color: var(--blue-dark); }
.secondary { border: 1px solid rgba(255,253,248,.45); color: var(--white); }

main { width: min(1120px, calc(100% - 2rem)); margin: -3rem auto 0; position: relative; }
.panel, .local-card, .module-card {
  background: var(--white);
  border: 1px solid rgba(20,59,125,.12);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(11,31,66,.11);
}
.panel { padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 2rem; }
.intro, .safeguards { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 2rem; align-items: start; }
.safeguards li { margin-bottom: .75rem; }

.modules { padding: 3rem 0; }
.section-heading { max-width: 760px; margin-bottom: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.module-card { padding: 1.25rem; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.badge { border-radius: 999px; padding: .35rem .65rem; font-size: .72rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.is-ready .badge { background: rgba(20,59,125,.1); color: var(--blue); }
.is-review .badge { background: rgba(199,154,59,.18); color: #73520f; }
details { color: var(--muted); }
summary { cursor: pointer; font-weight: 700; color: var(--blue); }

.local-card { margin: 0 0 3rem; padding: 2rem; }
pre { overflow-x: auto; padding: 1rem; border-radius: 16px; background: #101828; color: #f8fafc; }
footer { text-align: center; color: var(--muted); padding: 3rem 1rem; }

@media (max-width: 820px) {
  .intro, .safeguards, .grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
}