:root{
  --bg-top:#048e8a;
  --bg-bottom:#0b3c93;
  --card-radius:18px;
  --shadow:0 12px 24px rgba(0,0,0,.18);
  --brand-yellow:#f2c100;
  --link:#e6eefc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  background-image: radial-gradient(1600px 800px at 50% 0,#0e8aa7 0%,#0b4aa1 40%,#072f7d 100%);
  background: linear-gradient(160deg, var(--bg-top) 0%, #1767b9 30%, #0c3b93 100%);
}

/* Header */
.site-header{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:14px;}
.logo{
  width:84px; height:84px; border-radius:18px;
  display:grid; place-items:center;
  background:#ffcc00; color:#004c6d;
  font:800 64px/1 Montserrat, system-ui, sans-serif;
  box-shadow:var(--shadow);
}
.brand-text{line-height:1}
.brand-line{font:800 42px/1 Montserrat, system-ui, sans-serif; letter-spacing:.5px}
.brand-line + .brand-line{font-size:36px; margin-top:4px}

.nav{display:flex; gap:28px; flex-wrap:wrap}
.nav a{
  color:var(--link); text-decoration:none; font-weight:600;
  letter-spacing:.2px;
}
.nav a:hover{opacity:.9; text-decoration:underline}

/* Hero */
.hero{max-width:1200px; margin:0 auto; padding:8px 24px 60px}
.hero h1{
  text-align:center; font:800 56px/1.1 Montserrat, system-ui, sans-serif;
  margin:24px 0 32px;
}

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap:32px;
}
.card{
  position:relative;
  border-radius:var(--card-radius);
  padding:36px 32px 88px;
  box-shadow:var(--shadow);
  min-height:200px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.card h2{margin:0 0 16px; font:800 44px/1.1 Montserrat, system-ui, sans-serif;}

.card-orange{background:#f5871f;}
.card-yellow{background:#f4c20d; color:#243;}
.card-pink{background:#e81876;}
.card-purple{background:#5e2fab;}
.card-green{background:#12ef05; color:#243;}
.card-cyan{background:#3afff7; color:#243;}

.btn{
  position:absolute; right:24px; bottom:24px;
  display:inline-block; padding:12px 24px; border-radius:10px;
  background:#109f5b; color:#fff; text-decoration:none; font:800 20px/1 Montserrat, system-ui, sans-serif;
  box-shadow:var(--shadow);
}

/* Footer */
.foot{max-width:1200px; margin:0 auto; padding:16px 24px 40px; opacity:.75}

/* Responsive */
@media (max-width: 900px){
  .hero h1{font-size:42px}
  .brand-line{font-size:34px}
  .brand-line + .brand-line{font-size:28px}
  .logo{width:68px;height:68px;font-size:52px}
}
@media (max-width: 720px){
  .cards{grid-template-columns:1fr;}
  .hero h1{font-size:36px}
  .card h2{font-size:36px}
  .nav{gap:16px}
}