:root {
  --ink:#08222a; --soft:#123844; --paper:#f7f3e8; --white:#fffdf7;
  --gold:#e9c46a; --coral:#f06449; --blue:#5da9b5; --moss:#5d7c6f; --text:#344a50;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0; background:var(--paper); color:var(--text);
  font:16px/1.62 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a { color:#17697a; text-underline-offset:3px }
.skip { position:absolute; left:-999px; top:8px; background:#fff; padding:10px; z-index:5 }
.skip:focus { left:8px }
header {
  background:var(--ink); color:#fff; padding:16px max(20px,calc((100% - 1180px)/2));
  display:flex; gap:24px; align-items:center; justify-content:space-between;
}
.brand { color:#fff; text-decoration:none; display:flex; align-items:center; gap:12px; min-width:270px }
.brand img {
  width:52px; height:52px; border-radius:14px;
  animation:gate-breathe 4.8s ease-in-out infinite;
}
.brand b,.brand small { display:block }
.brand small { font-size:11px; color:#cfe0e2 }
nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
nav a { color:#fff; text-decoration:none; padding:9px 10px; border-radius:8px; font-size:13px }
nav a:hover,nav a:focus-visible { background:#244751; outline:2px solid var(--gold) }
main { max-width:1180px; margin:auto; padding:42px 24px 72px }
.hero {
  display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center;
  border-bottom:6px solid var(--coral); padding-bottom:34px;
  position:relative; overflow:hidden;
}
.hero::after {
  content:""; position:absolute; left:-28%; bottom:0; width:28%; height:6px;
  background:linear-gradient(90deg,transparent,var(--gold),#fff,transparent);
  animation:lane-scan 7s linear infinite;
}
.hero h1 {
  font-size:clamp(38px,6vw,72px); line-height:1.02; color:var(--ink);
  margin:8px 0 18px; letter-spacing:-.035em;
}
.hero img { width:100%; max-height:330px; object-fit:cover; border-radius:20px; box-shadow:18px 18px 0 var(--gold) }
.eyebrow { font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#b94735; font-size:12px }
.lede { font-size:20px; max-width:760px }
.split { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-top:64px }
.split img { width:100%; border-radius:18px }
.split h2,section>h2 { font-size:36px; line-height:1.1; color:var(--ink) }
.button { display:inline-block; background:var(--coral); color:#fff; text-decoration:none; font-weight:800; padding:13px 18px; border-radius:10px }
.text-link { font-weight:800 }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.metrics div { background:var(--ink); color:#fff; padding:18px; border-radius:12px }
.metrics b,.metrics span { display:block }
.metrics b { font-size:32px; color:var(--gold) }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:34px }
.card,.source-list article,.policy-section {
  background:var(--white); border:1px solid #cbd7d5; border-radius:14px; padding:20px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover,.card:focus-within,.source-list article:hover,.source-list article:focus-within,.policy-section:hover {
  transform:translateY(-3px); border-color:var(--blue); box-shadow:0 10px 24px rgba(8,34,42,.12);
}
.card h2,.source-list h2,.policy-section h2 { font-size:18px; color:var(--ink); margin:0 0 8px }
.limit,.notice { margin-top:34px; background:#fff0e9; border-left:7px solid var(--coral); padding:20px 24px; border-radius:8px }
.notice { background:#e6f0ef; border-color:var(--blue) }
.source-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px }
.policy { display:grid; gap:12px; margin-top:24px }
.policy-section { scroll-margin-top:16px }
.policy-section p { margin-bottom:0 }
footer { background:var(--ink); color:#d6e6e8; padding:34px max(24px,calc((100% - 1180px)/2)); font-size:14px }
footer p { margin:4px 0 }
@media(max-width:800px) {
  header { display:block }
  .brand { margin-bottom:14px }
  nav { justify-content:flex-start }
  .hero,.split { grid-template-columns:1fr }
  .hero img { box-shadow:10px 10px 0 var(--gold) }
  .card-grid,.source-list { grid-template-columns:1fr }
  .metrics { grid-template-columns:1fr 1fr }
  main { padding-top:28px }
}
@keyframes lane-scan { from { left:-28% } to { left:100% } }
@keyframes gate-breathe {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(233,196,106,0) }
  50% { transform:scale(1.035); box-shadow:0 0 0 5px rgba(233,196,106,.18) }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; animation:none!important; transition:none!important }
  .card:hover,.card:focus-within,.source-list article:hover,.source-list article:focus-within,.policy-section:hover { transform:none }
}
:focus-visible { outline:3px solid var(--coral); outline-offset:3px }
