@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

:root{
 --navy:#0f2a44;
 --blue:#135f82;
 --cyan:#21d4fd;
 --teal:#357b78;
 --ink:#1d1e20;
 --muted:#5d6870;
 --paper:#f4f7f8;
 --white:#fff;
 --line:#dce5e8;
 --shadow:0 16px 42px rgba(15,42,68,.10)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.65 "DM Sans",sans-serif;background:var(--paper)}
header{
 min-height:94px;padding:13px max(6vw,24px);display:flex;align-items:center;
 justify-content:space-between;gap:30px;background:#fff;border-bottom:1px solid rgba(15,42,68,.08)
}
header img{width:220px;max-width:38vw;display:block}
nav{display:flex;align-items:center;justify-content:flex-end;gap:30px}
nav a{color:var(--navy);font-weight:500;text-decoration:none;position:relative;white-space:nowrap}
nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--teal);transition:right .2s ease}
nav a:hover:after,nav a:focus-visible:after{right:0}
nav a:last-child{
 color:#fff;background:#000;border-radius:999px;padding:12px 27px;
 box-shadow:0 7px 18px rgba(0,0,0,.12)
}
nav a:last-child:after{display:none}
.hero{
 min-height:485px;padding:75px max(7vw,24px);display:flex;flex-direction:column;
 justify-content:center;align-items:center;text-align:center;color:#fff;
 background:
  linear-gradient(rgba(8,25,38,.42),rgba(8,25,38,.48)),
  url('https://images.unsplash.com/photo-1603459856978-484689c76601?auto=format&fit=crop&w=1800&q=85') center 48%/cover no-repeat
}
.hero p{margin:0 0 8px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:#e8fbff}
.hero h1{
 margin:.05em 0;font-family:Montserrat,sans-serif;font-size:clamp(2.7rem,6vw,4.5rem);
 line-height:1.1;font-weight:600;letter-spacing:-.03em;text-shadow:0 2px 22px rgba(0,0,0,.22)
}
.hero h2{max-width:820px;margin:18px auto 0;font-size:clamp(1rem,2vw,1.25rem);font-weight:400;line-height:1.55}
main{max-width:1240px;margin:auto;padding:70px 24px 82px}
main>h2{font-family:Montserrat,sans-serif;color:var(--navy);font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:0 0 12px}
main>h2+ p{color:var(--muted);font-size:1.08rem;margin:0 0 35px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:25px}
.cards article{
 display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,42,68,.08);
 border-radius:25px;padding:29px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease
}
.cards article:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(15,42,68,.14)}
.cards small{color:var(--teal);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cards h3{font-family:Montserrat,sans-serif;color:var(--navy);font-size:1.42rem;line-height:1.3;margin:12px 0}
.cards p{color:#445159}
.cards p b{color:var(--navy)}
.cards strong{font-family:Montserrat,sans-serif;color:var(--navy);font-size:1.45rem;margin-top:auto;padding:17px 0}
.button{
 display:inline-block;background:var(--navy);color:var(--cyan);text-decoration:none;
 padding:13px 22px;border-radius:999px;text-align:center;font-weight:700;border:0;
 transition:transform .2s ease,background .2s ease
}
.button:hover,.button:focus-visible{background:#173b5d;transform:translateY(-1px)}
footer{background:var(--navy);color:#e9f4f6;padding:52px max(7vw,24px);text-align:center}
footer img{width:230px;background:#fff;padding:12px 16px;border-radius:14px;margin-bottom:12px}
footer p{margin:6px auto;max-width:850px}
footer a{color:var(--cyan)}
@media(max-width:900px){
 header{min-height:auto;align-items:flex-start;flex-direction:column;padding:16px 22px}
 header img{width:205px;max-width:80vw}
 nav{width:100%;justify-content:flex-start;gap:10px 20px;overflow-x:auto;padding:3px 0 8px}
 nav a:last-child{padding:8px 17px}
 .hero{min-height:420px;padding-top:62px;padding-bottom:62px}
 main{padding-top:50px}
}
@media(max-width:520px){
 header img{width:185px}
 nav{font-size:.88rem}
 .hero{min-height:390px}
 .hero h1{font-size:2.45rem}
 .cards{grid-template-columns:1fr}
 .cards article{border-radius:20px;padding:23px}
}