:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#f9fafb;
  --accent:#0b5fff;
  --max: 960px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto;
  padding:0.5rem 0.75rem; background:var(--card);
  border:1px solid var(--border);
}

header{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(1.2) blur(8px);
}
.header-inner{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding: 1rem 0;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.brand .name{
  font-weight:700;
  font-size:1.05rem;
}
.brand .tagline{
  color:var(--muted);
  font-size:0.9rem;
}

nav ul{
  list-style:none;
  display:flex;
  gap:0.9rem;
  padding:0; margin:0;
  flex-wrap:wrap;
}
nav a{
  display:inline-block;
  padding:0.35rem 0.45rem;
  border-radius:0.5rem;
}
nav a[aria-current="page"]{
  background:var(--card);
  border:1px solid var(--border);
  text-decoration:none;
}

main{
  padding: 2.25rem 0 3rem;
}

.hero{
  padding: 1.75rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background: linear-gradient(180deg, var(--card), #fff);
}
.hero h1{
  margin:0 0 0.5rem;
  font-size: 1.8rem;
  line-height:1.25;
}
.hero p{
  margin:0.35rem 0 0;
  color:var(--muted);
  max-width: 70ch;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.card{
  grid-column: span 6;
  padding: 1.25rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:var(--bg);
}
.card h2{
  margin:0 0 0.5rem;
  font-size: 1.2rem;
}
.card p{ margin:0.25rem 0 0; color:var(--muted); }

.section{
  margin-top: 2.25rem;
}
.section h2{
  font-size: 1.35rem;
  margin:0 0 0.75rem;
}
.section p, .section ul{
  max-width: 80ch;
}
.section ul{ padding-left:1.2rem; }
.section li{ margin: 0.25rem 0; }

.kpi{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.pill{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:999px;
  padding:0.35rem 0.7rem;
  color:var(--muted);
  font-size:0.9rem;
}

.notice{
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border:1px dashed var(--border);
  border-radius:1rem;
  color:var(--muted);
  background:#fff;
}

footer{
  border-top:1px solid var(--border);
  padding: 1.5rem 0;
  color:var(--muted);
  font-size:0.9rem;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.small{ font-size:0.9rem; color:var(--muted); }

@media (max-width: 800px){
  .card{ grid-column: span 12; }
  .hero h1{ font-size: 1.55rem; }
}