* { box-sizing: border-box; }

body {
 margin:0;
 font-family:Arial, Helvetica, sans-serif;
 color:#121827;
 background:#fff;
}

.container {
 max-width:1150px;
 margin:auto;
 padding:60px 24px;
}

.hero {
 min-height:650px;
 display:flex;
 align-items:center;
 background:#000;
 color:white;
}

.logo {
 display:block;
 width:min(100%,580px);
 height:auto;
 margin-bottom:20px;
}

.visually-hidden {
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border:0;
}

.hero h2 {
 font-size:clamp(28px, 5vw, 38px);
 max-width:800px;
}

.hero p {
 font-size:22px;
 line-height:1.6;
 max-width:750px;
}

.button {
 display:inline-block;
 margin-top:30px;
 padding:15px 35px;
 border-radius:30px;
 background:#00d9ff;
 color:#050b1d;
 text-decoration:none;
 font-weight:bold;
}

.cards {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:25px;
 margin-top:35px;
}

.cards article {
 background:#fff;
 border:1px solid #d9e0ea;
 border-radius:18px;
 padding:28px;
 box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.dark {
 background:#050b1d;
 color:white;
}

section h2 {
 font-size:clamp(30px, 5vw, 40px);
}

section p {
 font-size:19px;
 line-height:1.7;
}

footer {
 background:#fff;
 color:#121827;
 border-top:1px solid #d9e0ea;
}

.footer-inner {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:24px;
 flex-wrap:wrap;
}

.footer-logo {
 display:block;
 width:290px;
 max-width:100%;
 height:auto;
}