/* RESET + GLOBAL */
* {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
  font-family:'Poppins', sans-serif;
  background:linear-gradient(135deg,#f9f8ff,#e0e7ff);
  color:#222;
  overflow-x:hidden;
}

/* HEADER */
header {
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  padding:15px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:1000;
}
header img {height:45px;}
nav ul {
  list-style:none;
  display:flex;
  gap:25px;
  flex-wrap:wrap;
}
nav ul li a {
  text-decoration:none;
  color:#333;
  font-weight:600;
  transition:color .3s;
}
nav ul li a:hover, nav ul li a.active {color:#8b5cf6;}

/* HERO */
.hero {
  text-align:center;
  padding:100px 20px;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
  color:white;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:"";
  position:absolute;
  top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle,rgba(255,255,255,0.15) 10%,transparent 10.01%);
  background-size:80px 80px;
  animation:pulse 8s linear infinite;
  z-index:0;
}
@keyframes pulse {from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.hero h1 {
  font-size:3rem; font-weight:700; margin-bottom:20px; position:relative; z-index:1;
}
.hero p {
  font-size:1.2rem; max-width:750px; margin:0 auto 30px; line-height:1.6; position:relative; z-index:1;
}
.hero .btn-group a {
  display:inline-block; margin:10px; padding:12px 25px; background:white; color:#7c3aed; font-weight:600; border-radius:50px; text-decoration:none; transition:all .3s ease; position:relative; z-index:1;
}
.hero .btn-group a:hover {background:#6d28d9; color:white;}

/* FEATURES */
.features {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  padding:80px 10%;
}
.feature-card {
  background:white; border-radius:15px; padding:30px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,0.1);
  opacity:0; transform:translateY(40px); transition:all 0.6s ease-out;
}
.feature-card.visible {opacity:1; transform:translateY(0);}
.feature-card img {height:80px; margin-bottom:15px;}
.feature-card h3 {color:#7c3aed; margin-bottom:10px;}

/* ABOUT (updated to be visible by default) */
.about {
  background:#faf5ff;
  padding:80px 10%;
  text-align:center;
  opacity:1;
  transform:none;
}
.about h2 {color:#6d28d9; margin-bottom:20px;}
.about p {max-width:800px; margin:0 auto; line-height:1.6; font-size:1.1rem;}

/* FOOTER */
footer {
  background:#6d28d9; color:white; padding:40px 10%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
}
.footer-section h4 {margin-bottom:10px; font-weight:700;}
.footer-section ul {list-style:none; padding:0;}
.footer-section ul li a {
  text-decoration:none; color:white; display:block; margin:6px 0; font-size:.95rem; transition:opacity .3s;
}
.footer-section ul li a:hover {opacity:.7;}
.footer-bottom {text-align:center; width:100%; margin-top:20px; font-size:.9rem; color:#ede9fe;}

/* WHATSAPP CHAT BUTTON */
.chat-btn {
  position:fixed; bottom:25px; right:25px; background:#25D366; color:white; border:none; border-radius:50%; width:60px; height:60px; box-shadow:0 4px 10px rgba(0,0,0,0.3); font-size:28px; cursor:pointer; transition:transform .3s; z-index:1000;
}
.chat-btn:hover {transform:scale(1.1);}

/* CONTACT FORM (keeps the same site aesthetics) */
.contact-wrapper {padding:60px 10%; display:flex; justify-content:center; align-items:flex-start;}
.contact-card {
  width:100%; max-width:720px; background:white; border-radius:15px; padding:32px; box-shadow:0 8px 24px rgba(13,12,38,0.08);
}
.contact-card h2 {color:#6d28d9; margin-bottom:8px;}
.contact-card p.lead {color:#444; margin-bottom:18px;}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-row .full {grid-column:1 / -1;}
input[type="text"], input[type="email"], textarea {
  width:100%; padding:12px 14px; border:1px solid #e6e6f0; border-radius:10px; font-size:1rem; outline:none;
  transition:box-shadow .15s, border-color .15s;
}
input:focus, textarea:focus {box-shadow:0 6px 20px rgba(99,102,241,0.12); border-color:#8b5cf6;}
textarea {min-height:140px; resize:vertical;}
.btn-primary {
  display:inline-block; background:#7c3aed; color:white; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:700; border:none; cursor:pointer;
}
.btn-primary:hover {background:#6d28d9;}

/* UTIL */
.container {padding:40px 10%;}
.small {font-size:.95rem; color:#555;}

/* ANIMATIONS for visibility */
.fade-up {opacity:0; transform:translateY(20px); transition:all .6s ease-out;}
.fade-up.visible {opacity:1; transform:translateY(0);}

/* RESPONSIVE */
@media(max-width:768px){
  nav ul {gap:15px;}
  footer {flex-direction:column; align-items:center;}
  .hero h1 {font-size:2.2rem;}
  .form-row {grid-template-columns:1fr;}
}