
:root{
  --primary:#0f766e;
  --accent:#14b8a6;
  --dark:#042f2e;
  --bg:#f8faf9;
  --card:#fff;
  --muted:#64748b;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.07);
}

*{box-sizing:border-box}
body{font-family:Inter,sans-serif; margin:0; background:var(--bg); color:var(--dark)}

/* NAV */
.nav{background:white; border-bottom:1px solid rgba(0,0,0,.06); padding:12px 20px; position:sticky; top:0; z-index:1000;}
.nav .logo{font-size:20px; font-weight:700; color:var(--primary); text-decoration:none;}
.nav .cta{background:var(--primary); color:white; padding:8px 14px; border-radius:12px; text-decoration:none; font-weight:600;}

/* HERO */
.hero{text-align:center; padding:60px 20px; background:linear-gradient(135deg,rgba(15,118,110,.85),rgba(20,184,166,.85)),url('https://images.unsplash.com/photo-1596496051713-93f89e11cd79?q=80&w=1600&auto=format') center/cover no-repeat; color:white;}
.hero h1{font-size:32px; margin-bottom:12px;}
.hero p{font-size:18px; opacity:.9; margin-bottom:20px;}
.hero a{background:white; color:var(--primary); padding:12px 20px; border-radius:14px; font-weight:700; text-decoration:none; box-shadow:0 6px 25px rgba(255,255,255,.4);}

/* SECTION */
.section{max-width:1000px; margin:48px auto; padding:0 20px;}
.section h2{font-size:26px; text-align:center; margin-bottom:24px; color:var(--dark);}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}

/* FEATURE CARD */
.feature-card{background:var(--card); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center;}
.feature-card i{font-size:32px; color:var(--accent); margin-bottom:14px;}

/* TESTIMONIALS */
.testimonial{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}

/* CTA */
.cta-center{text-align:center; margin:40px 0;}
.cta-center .btn{background:var(--primary); color:white; padding:14px 26px; border-radius:14px; font-size:18px; text-decoration:none; font-weight:700;}

/* ===== PRICING BANNER ===== */
.pricing-banner{
  max-width:1000px;
  margin:40px auto;
  padding:0 16px;
}

.pricing-inner{
  background:
    linear-gradient(135deg, rgba(15,118,110,.95), rgba(20,184,166,.95));
  color:white;
  border-radius:20px;
  padding:28px;
  display:flex;
  gap:24px;
  align-items:center;
  box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.price-box{
  background:white;
  color:#0f766e;
  padding:18px 22px;
  border-radius:16px;
  text-align:center;
  min-width:120px;
}

.old-price{
  text-decoration:line-through;
  font-size:16px;
  opacity:.6;
  display:block;
}

.new-price{
  font-size:36px;
  font-weight:900;
}

.pricing-text h2{
  margin:0 0 6px;
  font-size:24px;
}

.pricing-text p{
  margin:0 0 10px;
  opacity:.95;
}

.urgency{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  opacity:.95;
}

/* MOBILE */
@media(max-width:768px){
  .pricing-inner{
    flex-direction:column;
    text-align:center;
  }
}
@media(max-width:768px){
  .hero h1{font-size:28px;}
}
