/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background: linear-gradient(145deg,#f8f8f8,#e0e0e0);
  color: #111;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  text-align: center;
  padding: 80px 20px; /* Reduced padding for better mobile fit */
  overflow: hidden;
}

.hero-title {
  font-size: clamp(36px, 6vw, 60px);
  color: #111;
  opacity: 0;
  transform: scale(0.8);
  animation: heroZoomFade 1.5s forwards;
}

.hero-subtitle {
  margin-top: 15px;
  font-size: 1.1rem;
  opacity: 0;
  animation: heroZoomFade 1.5s forwards 0.3s;
}

@keyframes heroZoomFade {
  to { opacity:1; transform: scale(1);}
}

/* ===== CTA BUTTONS ===== */
.cta {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.btn {
  padding: 14px 28px;
  margin: 8px;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Dark & Light buttons */
.btn.dark { background: linear-gradient(45deg,#1ebc65,#0a9158); color:#fff; }
.btn.dark:hover { transform: translateY(-4px); box-shadow:0 6px 15px rgba(0,0,0,0.2);}
.btn.light { border: 2px solid #111; color: #111; background: #fff; }
.btn.light:hover { background: #111; color: #fff; }

/* Glow Animation */
.glow { animation: glow 1.8s infinite alternate; }
@keyframes glow { from{box-shadow:0 0 10px #1ebc65;} to{box-shadow:0 0 25px #0a9158;} }

/* Hero Animation Circles */
.hero-animation .circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  animation: floatfade 8s ease-in-out infinite;
}
.c1 { width: 250px; height: 250px; background: #1ebc65; top: -60px; left: -60px;}
.c2 { width: 180px; height: 180px; background: #0a9158; bottom: -40px; right: -50px;}
.c3 { width: 100px; height: 100px; background: #ff4b5c; top: 120px; right: -30px;}

@keyframes floatfade {
  0%,100% { transform:translateY(0) translateX(0); opacity:0.1;}
  50% { transform:translateY(30px) translateX(20px); opacity:0.2;}
}

/* ===== FEATURES ===== */
.features { padding: 70px 20px; text-align:center; }
.features h2 { font-size: clamp(28px,4vw,40px); margin-bottom:40px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 25px;
}

.feature {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
  opacity:0;
  transform: translateY(40px);
}

.feature i { font-size: 36px; color:#1ebc65; margin-bottom:15px; display:inline-block; }
.feature h3 { margin-bottom:10px; font-size:1.3rem; }
.feature p { font-size:0.95rem; color:#555; }

.feature:hover { transform:translateY(-10px); box-shadow:0 15px 40px rgba(0,0,0,0.12); }

/* Bounce Icons */
.feature-bounce i { animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* ===== OFFER ===== */
.offer {
  background: linear-gradient(135deg,#1ebc65,#0a9158);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.offer h2 { font-size: clamp(28px,4vw,42px); margin-bottom:10px; }
.offer p { margin-bottom:20px; }

/* ===== PRICING ===== */
.pricing { text-align:center; padding:70px 20px; }
.pricing h2 { font-size: clamp(28px,4vw,42px); margin-bottom:40px; }

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

.pricing-box {
  background:#fff;
  border-radius:18px;
  padding:35px 25px;
  width:260px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
  opacity:0;
  transform:translateY(50px);
}
.pricing-box h3 { font-size:1.4rem; margin-bottom:15px; }
.pricing-box .price { font-size:28px; margin:10px 0; font-weight:700; }
.pricing-box span { font-size:0.95rem; color:#555; }
.pricing-box.highlight {
  background: linear-gradient(135deg,#1ebc65,#0a9158);
  color:#fff;
  padding:30px 20px; /* smaller padding */
  width:240px; /* slightly smaller */
  border-radius:16px;
}

/* ===== CONTACT ===== */
.contact { padding:70px 20px; text-align:center; background:#f8f8f8; }
.contact h2 { font-size: clamp(28px,4vw,40px); margin-bottom:15px; }
.contact p { margin-bottom:35px; color:#555; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted for better fit and equality */
  gap: 20px;
  justify-items: center;
}

.contact-card {
  width: 100%; /* Changed to 100% for equal sizing in grid */
  min-height: 180px; /* Changed to min-height for equal appearance */
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center text vertically */
  gap: 10px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  opacity:0;
  transform:translateY(40px);
}
.contact-card i { font-size:28px; }
.contact-card span { font-weight:600; }
.contact-card.wa { color:#25D366; }
.contact-card.tg { color:#0088cc; }
.contact-card.mail { color:#ff4b5c; }
.contact-card:hover { transform:translateY(-8px); box-shadow:0 15px 40px rgba(0,0,0,0.12); }

/* ===== FLOATING ICONS ===== */
.floating-icons {
  position: fixed;
  right:18px;
  bottom:100px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.icon {
  width:52px; height:52px;
  border-radius:50%;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; text-decoration:none;
  animation:pulse 1.8s infinite;
}
.icon.wa{background:#25D366;}
.icon.tg{background:#0088cc;}
.icon.mail{background:#ff4b5c;}
@keyframes pulse {0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

/* ===== FOOTER ===== */
footer { text-align:center; padding:25px; border-top:1px solid #ddd; font-size:14px; color:#555; }

/* ===== MEDIA QUERIES ===== */
@media(max-width:900px){
  .pricing-grid{flex-wrap:wrap; justify-content:center; gap:20px;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-box{width:45%; min-width:240px;} /* Added min-width for consistency */
  .contact-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
  .feature-grid,.pricing-grid,.contact-grid{grid-template-columns:1fr;}
  .floating-icons{right:10px; bottom:70px;}
  .hero { padding: 60px 20px; } /* Further reduced for mobile */
  .features, .pricing, .contact { padding: 50px 20px; } /* Adjusted sections */
}

@media(max-width:400px){
  .btn{padding:12px 22px; font-size:0.9rem;}
  .cta{flex-direction:column; align-items:center;}
  .pricing-box { width: 100%; max-width: 260px; } /* Full width on very small screens */
}