/* Base */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f7f7f5;
  color: #111827;
  margin: 0;
  padding: 0;
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* HEADER */
header {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 50;
}

.logo-text {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  color: #21c5c4;
}

/* HERO */
.hero {
  position: relative;
  text-align: center;
  padding: 6rem 1.5rem;
  color: white;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* FEATURES */
.feature-card {
  background: linear-gradient(135deg, #21c5c4, #ff94b2);
  color: white;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card img {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

/* TESTIMONIALS */
.testimonial-card {
  background: linear-gradient(135deg, #f9e950, #c14f60);
  color: white;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transition: transform .2s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
}

/* PRICING */
.pricing-card {
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
  color: white;
  background: linear-gradient(135deg, #21c5c4, #ff94b2); /* Updated */
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

.pricing-section {
  background-color: #f0f0f0;
}

.testimonials-section {
  background-color: #fafafa;
}

/* CTA */
.cta {
  background: linear-gradient(90deg, #ff94b2, #f9e950);
  color: #111827;
  text-align: center;
  padding: 4rem 1.5rem;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 1.5rem;
  background: #111827;
  color: #d1d5db;
}
footer .socials {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
footer .socials a {
  color: #f9e950;
  font-size: 1.5rem;
  transition: color .2s ease;
}
footer .socials a:hover {
  color: #21c5c4;
}