:root{
  --blue:#1f4e86;
  --blue2:#2c6bb7;
  --green:#6a8f2f;
  --green2:#7ea83a;
  --text:#0f1f2d;
  --muted:#5b6773;
  --bg:#f4f6f9;
  --card:#ffffff;
  --stroke:#e4e8ee;
  --shadow:0 10px 28px rgba(16,24,40,.10);
  --shadow2:0 18px 40px rgba(16,24,40,.12);
  --radius:18px;
  --max:1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 500px at 50% 0%, #ffffff 0%, var(--bg) 60%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header{
  background:#ffffff;
  border-bottom:1px solid var(--stroke);
}
.topbar{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand img{height:46px;width:auto}
.nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:600;
  color:#2f3b47;
}
.nav a{font-size:14px;opacity:.9}
.nav a:hover{opacity:1;color:var(--blue2)}
.right{
  display:flex;
  align-items:center;
  gap:14px;
}
.phone{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#243140;
  font-size:14px;
  opacity:.9;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:#ffffff;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  box-shadow:0 3px 10px rgba(16,24,40,.06);
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background: linear-gradient(180deg, var(--blue2), var(--blue));
  border-color:#1e4f8a;
  color:#fff;
  box-shadow:0 12px 24px rgba(31,78,134,.22);
}
.btn.green{
  background: linear-gradient(180deg, var(--green2), var(--green));
  border-color:#5f8128;
  color:#fff;
  box-shadow:0 12px 24px rgba(106,143,47,.22);
}
.btn.light{
  background: linear-gradient(180deg, #ffffff, #f2f4f7);
  border-color: var(--stroke);
  color:#1d2b3a;
}
.hero{
  padding:26px 0 10px;
}
.heroPanel{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:var(--shadow2);
  border:1px solid var(--stroke);
}
.heroBg{
  position:absolute;
  inset:0;
  background-image:url('../img/hero-bg.png');
  background-size:cover;
  background-position:center;
  filter: blur(0px);
  opacity:.95;
}
.heroInner{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding:44px 42px;
  align-items:center;
}
.heroCopy h1{
  margin:0 0 12px;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#173a67;
}
.heroCopy h1 .accent{color:var(--green)}
.heroCopy p{
  margin:0 0 22px;
  max-width:56ch;
  color:#2b3643;
  font-size:18px;
  line-height:1.55;
}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.heroPerson{
  display:flex;
  justify-content:flex-end;
}
.heroPerson img{
  width:100%;
  max-width:420px;
  height:auto;
  border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.55);
}
.benefits{
  margin-top:16px;
  background:#ffffff;
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.benefit{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
}
.benefit img{width:38px;height:38px}
.benefit strong{display:block;font-size:14px;color:#1b2a3a}
.benefit span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.section{
  padding:34px 0 64px;
}
.h2{
  text-align:center;
  font-size:34px;
  letter-spacing:-.02em;
  margin:0 0 10px;
  color:#1d3f6e;
}
.h2 .accent{color:var(--green)}
.sub{
  text-align:center;
  margin:0 auto 26px;
  max-width:70ch;
  color:var(--muted);
}
.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card .imgWrap{
  background:#eaf0f6;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card .imgWrap img{
  width:100%;
  height:150px;
  object-fit:cover;
}
.card .body{
  padding:16px 14px 18px;
  text-align:center;
}
.card h3{
  margin:0 0 8px;
  font-size:18px;
  color:#173a67;
}
.card p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  min-height:34px;
}
.card .btn{padding:10px 16px;border-radius:10px}

.infoBar{
  margin-top:28px;
  background:linear-gradient(180deg,#ffffff,#f6f8fb);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.info{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 12px;
  border-right:1px solid #e9edf3;
}
.info:last-child{border-right:none}
.info .bubble{
  width:52px;height:52px;border-radius:26px;
  background:linear-gradient(180deg,#f0f6ff,#e4efff);
  border:1px solid #d7e6ff;
  display:grid;place-items:center;
}
.info .bubble img{width:34px;height:34px}
.info strong{display:block;color:#1b2a3a}
.info span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.ctaBand{
  margin-top:34px;
  background:#ffffff;
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow2);
  display:grid;
  grid-template-columns: 1fr 1fr;
  overflow:hidden;
}
.ctaLeft{padding:28px}
.ctaLeft img{height:48px}
.ctaLeft p{margin:12px 0 0;color:var(--muted);max-width:56ch}
.ctaRight{
  padding:28px;
  background:linear-gradient(180deg,#ffffff,#f4f7fb);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
.ctaRight h3{
  margin:0;
  font-size:28px;
  color:#173a67;
  letter-spacing:-.02em;
}
.ctaRight h3 .accent{color:var(--green)}
footer{
  margin-top:44px;
  background:#ffffff;
  border-top:1px solid var(--stroke);
}
.foot{
  padding:36px 0;
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:18px;
}
.foot h4{margin:0 0 10px;color:#173a67}
.foot a{display:block;color:#2f3b47;font-size:14px;margin:8px 0}
.foot a:hover{color:var(--blue2)}
.small{color:var(--muted);font-size:12px;line-height:1.6}
.copy{border-top:1px solid var(--stroke);padding:14px 0;color:var(--muted);font-size:12px}

.pageHead{
  padding:36px 0 10px;
}
.pageHead h1{
  margin:0;
  font-size:40px;
  color:#173a67;
  letter-spacing:-.02em;
}
.pageCard{
  background:#ffffff;
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input, textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--stroke);
  border-radius:10px;
  font:inherit;
}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
details{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:14px;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
}
details summary{font-weight:800;cursor:pointer;color:#173a67}
details p{color:var(--muted);margin:10px 0 0;line-height:1.6}

@media(max-width:980px){
  .nav{display:none}
  .heroInner{grid-template-columns:1fr;padding:32px 22px}
  .heroCopy h1{font-size:42px}
  .benefits{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .infoBar{grid-template-columns:1fr}
  .info{border-right:none;border-bottom:1px solid #e9edf3}
  .info:last-child{border-bottom:none}
  .ctaBand{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}
@media(max-width:520px){
  .cards{grid-template-columns:1fr}
  .right{gap:8px}
}