:root{
  --navy:#123a5e; --navy-d:#0e2c47; --blue:#2b6cb0; --ink:#1c2a37;
  --mut:#5b6b7a; --bg:#f5f7fa; --line:#dde4ea;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img,svg{max-width:100%}
a{color:var(--blue)}
a:hover{color:var(--navy)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:2px}
.hero a:focus-visible,.site-foot a:focus-visible,.btn-solid:focus-visible{outline-color:#ffffff}

.wrap{max-width:900px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:100}
.skip:focus{left:8px; top:8px}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line)}
.head-in{
  max-width:900px; margin:0 auto; padding:12px 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
}
.brand{text-decoration:none; color:inherit; flex:0 1 auto}
.brand-name{display:block; font-size:15.5px; font-weight:700; line-height:1.3; color:var(--navy); letter-spacing:.01em}
.brand-strap{display:block; font-size:11.5px; line-height:1.4; color:var(--mut)}
.nav{display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin-left:auto}
.nav a{color:var(--ink); text-decoration:none; font-size:15px; padding:4px 0; border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--blue)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:11px 20px; border-radius:5px; border:2px solid transparent;
  font-size:15.5px; font-weight:600; text-decoration:none; text-align:center;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-solid:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.btn-nav{padding:8px 16px; font-size:14.5px}
.btn-outline{border-color:rgba(255,255,255,.75); color:#fff}
.btn-outline:hover{background:#fff; border-color:#fff; color:var(--navy)}
.btn-quiet{border-color:var(--line); background:#fff; color:var(--navy)}
.btn-quiet:hover{border-color:var(--navy); background:#fff; color:var(--navy)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 55%,var(--blue) 100%); color:#eef4f9}
.hero-in{padding:60px 20px 56px; max-width:900px; margin:0 auto}
.hero h1{margin:0 0 18px; font-size:clamp(1.7rem,4.4vw,2.5rem); line-height:1.22; letter-spacing:-.01em; color:#fff}
.hero p{max-width:64ch; margin:0 0 30px; font-size:1.02rem; color:#dce8f2}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- sections ---------- */
.section{padding:52px 0}
.section-alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
[id]{scroll-margin-top:86px}
h2{font-size:1.35rem; line-height:1.3; margin:0 0 18px; color:var(--navy)}
.lead{max-width:68ch; color:var(--ink)}
.muted{color:var(--mut)}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; margin:0; padding:0}
.card{background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px}
.card-label{
  display:block; margin:0 0 10px; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--mut);
}
.card-value{margin:0; font-size:1.02rem; font-weight:600; color:var(--navy); line-height:1.45}

/* ---------- lists ---------- */
.check{list-style:none; margin:0; padding:0; max-width:68ch}
.check li{position:relative; padding:8px 0 8px 30px; border-bottom:1px solid var(--line)}
.check li:last-child{border-bottom:0}
.check li::before{
  content:""; position:absolute; left:6px; top:1.05em; width:9px; height:9px;
  border-radius:2px; background:var(--blue);
}
.steps{list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:14px}
.steps li{counter-increment:step; display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:6px; padding:16px 20px}
.steps li::before{
  content:counter(step); flex:0 0 30px; height:30px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:14.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.steps .step-text{padding-top:3px}

/* ---------- contact page ---------- */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.panel{background:#fff; border:1px solid var(--line); border-radius:6px; padding:24px}
.panel h2,.panel h3{margin-top:0}
dl.facts{margin:0}
dl.facts dt{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); margin-top:14px}
dl.facts dt:first-child{margin-top:0}
dl.facts dd{margin:3px 0 0; font-size:1rem}
dl.facts dd a{text-decoration:none; border-bottom:1px solid var(--line)}
dl.facts dd a:hover{border-bottom-color:var(--blue)}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-d); color:#cbd8e3; font-size:15px; margin-top:0}
.foot-in{max-width:900px; margin:0 auto; padding:44px 20px 34px; display:grid; grid-template-columns:1fr 1fr; gap:28px 40px}
.site-foot h2{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#9fb6ca; margin:0 0 12px}
.site-foot p{margin:0 0 8px; line-height:1.6}
.site-foot a{color:#e6eef5; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28)}
.site-foot a:hover{color:#fff; border-bottom-color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.16)}
.legal-in{max-width:900px; margin:0 auto; padding:18px 20px 26px; font-size:13px; line-height:1.6; color:#a8bccd}

/* ---------- 404 ---------- */
.notfound{padding:84px 20px 96px; text-align:center}
.notfound h1{font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 14px; color:var(--navy)}
.notfound p{color:var(--mut); max-width:46ch; margin:0 auto 28px}

@media (max-width:640px){
  body{font-size:16.5px}
  .brand{flex:1 1 100%}
  .nav{margin-left:0; flex:1 1 100%; order:3; gap:4px 16px}
  .head-in{gap:8px}
  .hero-in{padding:44px 20px 40px}
  .cards{grid-template-columns:1fr}
  .cols,.foot-in{grid-template-columns:1fr}
  .section{padding:40px 0}
  .btn{width:100%}
  .btn-nav{width:auto}
  .steps li{padding:14px 16px; gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}