:root{
  --bg:#f7f9fc;
  --surface:#fff;
  --text:#172033;
  --muted:#5c667a;
  --primary:#173b63;
  --primary2:#245d92;
  --border:#dde4ec;
  --soft:#edf4fa;
  --success:#eaf7f0;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:inherit}

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

header{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(8px);
}

.nav{
  min-height:72px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
}

.brand{
  color:var(--primary);
  text-decoration:none;
  font-weight:800;
  font-size:24px;
}

.navlinks{
  display:flex;
  gap:20px;
  align-items:center;
}

.navlinks a{
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  color:#344054;
}

.button{
  display:inline-block;
  text-decoration:none;
  border-radius:10px;
  padding:13px 20px;
  font-weight:700;
}

.button.primary{
  background:var(--primary);
  color:#fff;
}

.button.secondary{
  background:#fff;
  border:1px solid var(--border);
  color:var(--primary);
}

.hero{
  padding:95px 0 75px;
}

.eyebrow{
  display:inline-block;
  background:var(--soft);
  color:var(--primary);
  padding:7px 13px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  margin-bottom:20px;
}

h1{
  font-size:58px;
  line-height:1.05;
  letter-spacing:-2px;
  color:#112b47;
  max-width:900px;
  margin:0 0 24px;
}

.lead{
  font-size:21px;
  color:var(--muted);
  max-width:820px;
  margin:0 0 28px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.american{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:25px;
}

.american span{
  background:#fff;
  border:1px solid var(--border);
  padding:7px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#475467;
}

section{
  padding:70px 0;
}

.alt{
  background:#eef3f8;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.title{
  max-width:800px;
  margin-bottom:34px;
}

.title h2{
  font-size:39px;
  line-height:1.15;
  letter-spacing:-1px;
  color:#112b47;
  margin:0 0 13px;
}

.title p{
  margin:0;
  font-size:18px;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.grid.two{
  grid-template-columns:repeat(2,1fr);
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:17px;
  padding:27px;
}

.card h3{
  color:#112b47;
  font-size:21px;
  margin:0 0 10px;
}

.card p{
  margin:0;
  color:var(--muted);
}

.flow{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}

.flow span{
  background:var(--soft);
  border:1px solid #d9e6f1;
  color:var(--primary);
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

.callout{
  background:var(--primary);
  color:#fff;
  border-radius:21px;
  padding:42px;
}

.callout h2{
  margin:0 0 12px;
  font-size:32px;
}

.callout p{
  color:#dce8f4;
  margin:0;
  font-size:18px;
  max-width:800px;
}

.quote{
  font-size:27px !important;
  font-weight:700;
  color:#fff !important;
}

.back{
  font-size:14px;
  margin-bottom:20px;
}

.back a{
  color:var(--primary);
  text-decoration:none;
  font-weight:700;
}

footer{
  margin-top:70px;
  border-top:1px solid var(--border);
  background:#fff;
  padding:42px 0;
}

.footer{
  display:flex;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:17px;
  flex-wrap:wrap;
}

.footer-links a{
  text-decoration:none;
  color:#475467;
}

.small{
  color:#7a8496;
  font-size:13px;
  margin-top:20px;
}

@media(max-width:850px){
  h1{font-size:43px}
  .grid,.grid.two{grid-template-columns:1fr}
  .navlinks a:not(.button){display:none}
  .hero{padding-top:58px}
}

@media(max-width:520px){
  h1{font-size:38px}
  .lead{font-size:18px}
}