
:root {

  --navy:#10263f;

  --blue:#1765a3;

  --gold:#d8a43d;

  --muted:#607187;

  --line:#e1e8f0;

  --bg:#f6f9fc;

}

* {box-sizing:border-box}

html {scroll-behavior:smooth}

body {

  margin:0;

  font-family:"Segoe UI",Arial,sans-serif;

  color:var(--navy);

  background:#fff;

}

a {text-decoration:none;color:inherit}

button,input,textarea {font:inherit}

.container {width:min(1180px,92%);margin:auto}

.topbar {

  background:var(--navy);

  color:white;

  padding:9px 0;

  font-size:12px;

}

.topbar .container {

  display:flex;

  justify-content:space-between;

  gap:15px;

  flex-wrap:wrap;

}

.header {

  background:white;

  position:sticky;

  top:0;

  z-index:20;

  border-bottom:1px solid var(--line);

}

.header-inner {

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:25px;

  min-height:85px;

}

.logo {

  font-size:17px;

  font-weight:750;

  line-height:1.4;

}

.logo span {color:var(--blue)}

.logo small {

  display:block;

  font-size:10px;

  font-weight:500;

  letter-spacing:1.6px;

  color:var(--muted);

}

nav {display:flex;align-items:center;gap:23px}

nav a {

  font-size:13px;

  font-weight:600;

  color:#40546a;

}

nav a:hover,nav a.active {color:var(--blue)}

.btn {

  display:inline-block;

  background:var(--blue);

  color:white!important;

  padding:14px 23px;

  border-radius:7px;

  font-weight:600;

  border:0;

  cursor:pointer;

}

.btn:hover {background:var(--navy)}

.btn-outline {

  background:transparent;

  border:1px solid var(--blue);

  color:var(--blue)!important;

}

.btn-outline:hover {background:#e9f2fa}

.menu-btn {

  display:none;

  background:none;

  border:1px solid var(--line);

  border-radius:7px;

  padding:8px 13px;

  font-size:23px;

  cursor:pointer;

}

.hero {

  background:

    radial-gradient(circle at 85% 15%,#d9eafa,transparent 38%),

    radial-gradient(circle at 8% 90%,#faedce,transparent 36%),

    #f5f8fc;

  padding:105px 0;

}

.hero-content {max-width:790px}

.kicker {

  color:var(--blue);

  font-size:12px;

  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

}

h1 {

  font-size:clamp(39px,5vw,67px);

  letter-spacing:-2px;

  line-height:1.13;

  margin:20px 0;

}

h1 span {color:var(--blue)}

h2 {

  font-size:clamp(27px,3vw,38px);

  letter-spacing:-1px;

  margin:12px 0 20px;

}

h3 {font-size:19px;margin:0 0 12px}

p {line-height:1.8;color:var(--muted)}

.hero p {font-size:17px;max-width:670px}

.actions {display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

section {padding:80px 0}

.section-light {background:var(--bg)}

.section-heading {max-width:760px;margin-bottom:35px}

.grid {

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px;

}

.card {

  background:white;

  padding:30px;

  border:1px solid var(--line);

  border-radius:12px;

}

.card:hover {border-color:#aac8e2}

.card p {font-size:14px}

.card a {

  display:inline-block;

  color:var(--blue);

  font-weight:650;

  margin-top:10px;

  font-size:13px;

}

.card .number {

  color:var(--gold);

  font-size:13px;

  font-weight:700;

  margin-bottom:17px;

}

.page-banner {

  padding:75px 0;

  background:linear-gradient(115deg,#10263f,#1765a3);

  color:white;

}

.page-banner h1 {font-size:45px;margin:12px 0}

.page-banner p {color:#dce9f6}

.page-banner .kicker {color:#e6bb65}

.info-list {padding-left:20px;line-height:2.2;color:var(--muted)}

.cta {

  background:var(--navy);

  color:white;

  padding:65px 0;

}

.cta p {color:#d1dce7}

.contact-grid {

  display:grid;

  grid-template-columns:1fr 1.3fr;

  gap:25px;

}

input,textarea {

  width:100%;

  padding:14px;

  border:1px solid #d7e1ec;

  border-radius:7px;

  margin-bottom:15px;

  background:white;

}

textarea {min-height:130px;resize:vertical}

label {display:block;font-size:13px;font-weight:600;margin-bottom:7px}

footer {

  background:#0c1e32;

  color:white;

  padding:55px 0 20px;

}

.footer-grid {

  display:grid;

  grid-template-columns:2fr 1fr 1fr;

  gap:35px;

}

footer p,footer a {color:#c3d0de;font-size:13px}

footer a {display:block;margin:12px 0}

footer a:hover {color:white}

.copyright {

  border-top:1px solid #294058;

  margin-top:35px;

  padding-top:20px;

  font-size:12px;

  color:#aabacc;

}

@media(max-width:1000px) {

  .menu-btn {display:block}

  nav {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    right:0;

    background:white;

    padding:20px 5%;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    box-shadow:0 12px 25px #10263f20;

  }

  nav.open {display:flex}

  nav a {padding:13px 8px}

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

}

@media(max-width:650px) {

  .topbar {font-size:10px}

  .logo {font-size:13px}

  .header-inner {min-height:70px}

  .hero {padding:75px 0}

  section {padding:55px 0}

  .grid,.contact-grid,.footer-grid {grid-template-columns:1fr}

  .page-banner h1 {font-size:35px}

  .card {padding:24px}

}

