:root{
  --primary:#0b5ed7;
  --secondary:#00a3e0;
  --dark:#0a2540;
  --light:#f5f7fa;
}

body{
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  margin:0;
  background:var(--light);
  color:#1a1a1a;
  text-align:center;
}

header{
  background:white;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding:20px 0;
}

.header-container{
  max-width:1100px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}

.logo{
  height:90px;
}

nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

nav a{
  margin:10px 15px;
  text-decoration:none;
  color:var(--dark);
  font-weight:600;
}

nav a:hover{color:var(--primary)}

.hero{
  background:linear-gradient(135deg, var(--dark), var(--primary));
  color:white;
  padding:100px 20px;
}

.hero-content{
  max-width:900px;
  margin:auto;
}

.hero h1{font-size:2.8rem;margin:0}

.btn{
  display:inline-block;
  margin-top:25px;
  background:var(--secondary);
  color:white;
  padding:12px 30px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
}

section{
  max-width:1000px;
  margin:60px auto;
  padding:0 20px;
}

.cards{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;
}

.card{
  background:white;
  border-radius:15px;
  padding:25px;
  width:280px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

footer{
  background:var(--dark);
  color:white;
  text-align:center;
  padding:30px 20px;
  margin-top:60px;
}