/* ========== Base / Global ========== */
body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  background-color: #0a0a0a;
  color: #fff;
  scroll-behavior: smooth;
}

/* ========== Hero + Cards ========== */
.hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f1419 100%);
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: 100px; /* Space for fixed header */
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0, 255, 231, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.hero h2 {
  font-size: 2.5rem;
  background: linear-gradient(90deg, #00ffe7, #7fffd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}
.hero p {
  color: #bbb;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 1rem auto;
  position: relative;
  z-index: 1;
}
.cta {
  background: rgba(0, 255, 231, 0.1);
  color: #00ffe7;
  border: 1px solid #00ffe7;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  display: inline-block;
  margin-top: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.cta:hover {
  background: rgba(0, 255, 231, 0.2);
  transform: translateY(-2px);
}

.grid-section {
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.grid-box {
  background: rgba(30, 30, 30, 0.8);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  border: 1px solid #2a2a2a;
  transition: all 0.3s ease;
}
.grid-box:hover {
  transform: translateY(-5px);
  border-color: #00ffe7;
  background: rgba(30, 30, 30, 0.95);
}
.grid-box h3 { color: #00ffe7; }
.grid-box p { color: #ccc; }

.legal-link {
  text-decoration: underline;
  font-weight: 600;
  color: #ffffff;
}
.legal-link:hover { color: #00ffe7; }

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-top: 2rem;
  color: #00ffe7;
}

/* ========== Floating Buttons (Call / WhatsApp) ========== */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white; border-radius: 50%;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 25px var(--shadow-color, rgba(37, 211, 102, 0.4)),
              0 0 20px var(--shadow-color-light, rgba(37, 211, 102, 0.2));
  z-index: 1000000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: floatPulse 3s ease-in-out infinite, gentleFloat 4s ease-in-out infinite;
  --shadow-color: rgba(37, 211, 102, 0.4);
  --shadow-color-light: rgba(37, 211, 102, 0.2);
}
.call-float {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background: linear-gradient(135deg, #1e90ff, #00b7eb);
  color: white; border-radius: 50%;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 25px var(--shadow-color, rgba(30, 144, 255, 0.4)),
              0 0 20px var(--shadow-color-light, rgba(30, 144, 255, 0.2));
  z-index: 1000000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: floatPulse 3s ease-in-out infinite, gentleFloat 4s ease-in-out infinite;
  --shadow-color: rgba(30, 144, 255, 0.4);
  --shadow-color-light: rgba(30, 144, 255, 0.2);
}
.whatsapp-float svg, .call-float svg { width: 32px; height: 32px; color: white; }
.whatsapp-float::before {
  content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
  background: linear-gradient(135deg, #25d366, #128c7e, #075e54);
  border-radius: 50%; z-index: -1; opacity: 0; animation: rippleEffect 2.5s ease-out infinite;
}
.call-float::before {
  content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
  background: linear-gradient(135deg, #1e90ff, #00b7eb, #0077b6);
  border-radius: 50%; z-index: -1; opacity: 0; animation: rippleEffect 2.5s ease-out infinite;
}
.whatsapp-float:hover, .call-float:hover { transform: scale(1.1) translateY(-5px); }
.whatsapp-float:hover {
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6), 0 0 30px rgba(37, 211, 102, 0.3);
  background: linear-gradient(135deg, #2ce071, #25d366);
}
.call-float:hover {
  box-shadow: 0 12px 35px rgba(30, 144, 255, 0.6), 0 0 30px rgba(30, 144, 255, 0.3);
  background: linear-gradient(135deg, #4dabf7, #1e90ff);
}
.whatsapp-float:hover svg, .call-float:hover svg { transform: scale(1.1); }
.whatsapp-float:active, .call-float:active { transform: scale(0.95); }

/* ========== Hidden SEO block ========== */
.seo-content {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ========== Keyframes (shared) ========== */
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes pulseGlow {
  0% { box-shadow: 0 6px 20px rgba(0, 255, 231, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(0, 255, 231, 0.2); }
  100% { box-shadow: 0 8px 25px rgba(0, 255, 231, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 40px rgba(0, 255, 231, 0.4); }
}
@keyframes gentleBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
@keyframes sparkleMove {
  0%{ right:-20px; opacity:0 } 20%{ right:8px; opacity:1 } 40%{ right:8px; opacity:1 }
  60%{ right:-20px; opacity:0 } 100%{ right:-20px; opacity:0 }
}
@keyframes floatPulse {
  0%,100%{ box-shadow:0 8px 25px var(--shadow-color, rgba(37,211,102,.4)), 0 0 20px var(--shadow-color-light, rgba(37,211,102,.2)) }
  50%{ box-shadow:0 12px 35px var(--shadow-color, rgba(37,211,102,.6)), 0 0 30px var(--shadow-color-light, rgba(37,211,102,.4)) }
}
@keyframes gentleFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes rippleEffect { 0%{opacity:0;transform:scale(.8)} 20%{opacity:.3;transform:scale(1)} 100%{opacity:0;transform:scale(1.4)} }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes shimmer { 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes float {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
@keyframes pulse {
  0%,100% { transform: translate(-50%, -70%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -70%) scale(1.2); opacity: 1; }
}