:root{
  --blue-900:#0a2a5e;
  --blue-700:#1953a6;
  --blue-050:#f4f7fb;
  --ink:#102132;
  --muted:#5d6b82;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 10px 30px rgba(10,42,94,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 120% -10%, #e7eefb 0%, transparent 60%) no-repeat,
    var(--blue-050);
}

.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom:1px solid #e7eef7;
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 6px}

.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:8px;background:#dfe8f7;object-fit:cover}
.brand-title{display:block;font-weight:800;color:var(--blue-900);letter-spacing:.3px}
.brand-tag{display:block;font-size:12px;color:var(--muted)}

.menu a{color:var(--muted);text-decoration:none;font-weight:600;margin-left:18px}
.menu .btn{margin-left:18px;padding:10px 14px;border-radius:10px;background:var(--blue-900);color:var(--white);box-shadow:var(--shadow)}

.hero{
  color:var(--white);
  background:linear-gradient(135deg, rgba(10,42,94,.90), rgba(25,83,166,.75)),
             url('assets/hero.jpg') center/cover no-repeat;
}
.hero-inner{display:flex;align-items:center;min-height:52vh;padding:64px 0}
.hero-text{max-width:760px}
.hero h1{margin:0 0 10px;font-size:clamp(28px,5.8vw,48px);line-height:1.1}
.hero p{margin:0 0 18px;color:#e4ecfb;font-size:clamp(16px,2.5vw,18px)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--blue-700);color:#fff;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}

main{margin-top:-28px}
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin:18px 0;
  border:1px solid #e8eef7;
}
.card.accent{border-left:6px solid var(--blue-700)}

.section-head h2{color:var(--blue-900);margin:.2rem 0}
.section-head .lead{color:var(--muted);margin:.2rem 0 .6rem}
:target {
  scroll-margin-top: 70px; /* Same as header height */
}

.columns{display:grid;grid-template-columns:2fr 1fr;gap:20px}
@media (max-width:980px){.columns{grid-template-columns:1fr}}

.infobox{background:var(--blue-050);border-radius:12px;padding:14px;border:1px solid #e8eef7}
.ticks{list-style:none;padding-left:0;margin:0}
.ticks li{position:relative;padding-left:24px;margin:.35rem 0}
.ticks li::before{content:"";position:absolute;left:0;top:.4rem;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--blue-700),var(--blue-900))}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

.svc{background:#fff;border:1px solid #e8eef7;border-radius:12px;padding:16px}
.svc h3{margin-top:0;color:var(--blue-900)}

.kpi{background:#fff;border:1px solid #e8eef7;border-radius:12px;padding:18px;text-align:center}
.kpi-num{font-weight:900;color:var(--blue-900);font-size:28px}
.kpi-text{color:var(--muted);font-weight:600}

.footer{padding:28px 0 56px;text-align:center;color:var(--muted)}
.footer .tiny a{color:var(--muted);text-decoration:none}