body {
  font-family: 'Poppins', sans-serif;
  margin:0;
  background:#f4fbff;
  color:#222;
}

.container {
  width:90%;
  max-width:1100px;
  margin:auto;
}

/* NAV */
header.glass {
  position:sticky;
  top:0;
  backdrop-filter: blur(10px);
  background:rgba(255,255,255,0.7);
  z-index:1000;
}

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
}

.logo { height:55px; }

nav a {
  margin-left:20px;
  text-decoration:none;
  color:#0277BD;
  font-weight:500;
}

/* HERO */
.hero {
  height:90vh;
  background:url('images/logo.png') center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
}

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
}

.hero-content {
  position:relative;
  z-index:2;
  max-width:700px;
}

.hero h1 {
  font-size:3rem;
}

.hero-buttons {
  margin-top:20px;
}

/* CARDS */
.features {
  display:flex;
  gap:20px;
  margin-top:-80px;
}

.card {
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(10px);
  padding:25px;
  border-radius:15px;
  flex:1;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* BUTTONS */
.btn {
  background:#0277BD;
  color:white;
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
}

.btn.outline {
  background:transparent;
  border:2px solid white;
}

.large {
  padding:15px 35px;
}

/* COMPARISON */
.comparison {
  padding:80px 20px;
  text-align:center;
}

.compare-grid {
  display:flex;
  gap:30px;
  margin-top:40px;
}

.bad, .good {
  flex:1;
  padding:30px;
  border-radius:15px;
}

.bad { background:#ffe5e5; }
.good { background:#e0f7fa; }

/* CTA */
.cta {
  text-align:center;
  padding:60px;
  background:linear-gradient(to right, #0277BD, #4FC3F7);
  color:white;
}

/* STICKY CALL */
.sticky-call {
  position:fixed;
  bottom:0;
  width:100%;
  background:#0277BD;
  text-align:center;
  padding:15px;
}

.sticky-call a {
  color:white;
  font-weight:bold;
  text-decoration:none;
}

/* MOBILE */
@media(max-width:768px){
  .features, .compare-grid {
    flex-direction:column;
  }

  .hero h1 {
    font-size:2rem;
  }
}