/* style.css */
:root{
  --blue-900:#0b5fe0;
  --blue-800:#0a57d3;
  --blue-700:#0a4ec2;
  --nav:#0c69e9;
  --dark:#0a1f49;
  --white:#fff;
  --orange:#ff8a00;
  --chip:#eef3ff;
  --muted:#7e8aa6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  color:var(--dark);
  background:var(--blue-900);
}

.wrap{width:min(1160px,92%);margin:0 auto}

/* TOPBAR */
.topbar{
  position:sticky;top:0;z-index:50;
  background:#0b5cdb;
  box-shadow:0 2px 0 rgb(0 0 0 / .05);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.dot{width:28px;height:28px;border-radius:50%;background:#ffbe2e;color:#0a2d63;display:grid;place-items:center;font-weight:800;font-size:12px}
.name{color:#e9f1ff;font-weight:700}
.name strong{font-weight:800}
.nav a{color:#e1ebff;text-decoration:none;margin-left:18px;font-weight:700}
.btn-outline{border:2px solid #e1ebff;border-radius:10px;padding:8px 12px}

/* HERO */
.hero{
  position:relative;
  background:linear-gradient(180deg,#0c69e9 0 56%, #0b5fe0 56% 100%);
  overflow:clip;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 460px at -40% 0%, var(--orange) 0 100%, transparent 101%) no-repeat;
  z-index:0;
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:28px;
  padding:46px 0 110px;
}
.hero-left h1{
  color:var(--white); font-size:56px; line-height:1.1; margin:16px 0 0; font-weight:800;
}
.since{
  display:inline-block;background:#fff;padding:8px 12px;border-radius:10px;
  font-size:12px;font-weight:800;color:#123b77;box-shadow:0 8px 24px rgb(0 0 0 / .08)
}

/* HERO right cards (absolute spacing to match 1:1) */
.hero-right{display:grid;gap:22px; align-content:start}
.card{
  background:#fff;border-radius:18px;padding:20px 22px 18px;
  box-shadow:0 16px 36px rgb(4 36 120 / .20);
}
.card.big{max-width:520px;justify-self:end}
.card h3{margin:0 0 12px;font-size:18px;line-height:1.35;color:#0b295c}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.chip{
  background:var(--chip);padding:8px 12px;border-radius:999px;
  font-weight:800;color:#0d3272;font-size:14px
}
.chip.sm{font-size:12px;padding:6px 10px}
.btn-primary,.btn-dark{
  display:inline-block;padding:12px 18px;border-radius:14px;font-weight:800;text-decoration:none
}
.btn-primary{background:#0d67ff;color:#fff}
.btn-dark{background:#0a1f49;color:#fff}

/* blue slope (separator under cards) */
.blue-slope{
  position:absolute;left:0;right:0;bottom:-1px;height:220px;
  background:linear-gradient(135deg, transparent 0 50%, #0b5fe0 50% 100%);
}

/* RESEARCH */
.research{background:#0b5fe0;color:#fff;padding:60px 0 24px}
.research h2{text-align:center;font-size:28px;font-weight:800;margin:0 0 22px}
.research-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px
}
.stat{
  display:flex;align-items:center;gap:18px;background:#fff;color:#0b295c;border-radius:18px;
  padding:22px;min-height:210px;box-shadow:0 16px 36px rgb(4 36 120 / .18)
}
.left .emoji{font-size:54px;line-height:1}
.stat h3{margin:0 0 8px;font-size:18px}
.muted{color:#7c8cb0}
.small{font-size:12px}
.right{gap:24px}
.meter{width:28px;height:162px;background:#eaf0ff;border-radius:22px;display:flex;align-items:flex-end;padding:5px}
.meter .fill{display:block;width:100%;background:#0a5be0;border-radius:16px}
.percent{font-size:42px;font-weight:800;color:#0a5be0;margin-bottom:4px}
.sources{color:#cfe0ff;font-size:12px;margin:14px 0 0}

/* NUMBERS */
.numbers{background:#0b5fe0;padding:8px 0 80px}
.numbers h2{text-align:center;color:#fff;margin:22px 0 18px;font-size:28px;font-weight:800}
.bullets{list-style:none;padding:0;margin:0 auto;max-width:720px;display:grid;gap:14px}
.bullets li{
  background:#eef3ff;color:#0b295c;border-radius:999px;padding:12px 16px;
  display:flex;align-items:center;gap:10px;font-weight:800;box-shadow:0 10px 26px rgb(4 36 120 / .12)
}
.bullets li span{font-size:18px}

/* FOOTER */
.foot{background:#084ec9;color:#dfeaff;text-align:center;padding:22px 0}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .card.big{justify-self:start;max-width:100%}
  .blue-slope{display:none}
  .research-grid{grid-template-columns:1fr}
  .hero-left h1{font-size:42px}
}