:root {
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #05c7f2;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
  
  /* Base Colors */
  --color-base-50: #f9fafb;
  --color-base-100: #f3f4f6;
  --color-base-200: #e5e7eb;
  --color-base-300: #d1d5db;
  --color-base-400: #9ca3af;
  --color-base-500: #6b7280;
  --color-base-600: #4b5563;
  --color-base-700: #374151;
  --color-base-800: #1f2937;
  --color-base-900: #111827;
}
.bg-primary-400 {
  background-color: var(--color-primary-400);
}
.text-base-500 {
  color: var(--color-base-500);
}
.text-md {
  font-size: 1rem;
  line-height: 1.55rem
}
.font-bold {
  font-weight: 700
}
.rounded-xl {
  border-radius: 1rem
}
.rounded-t-xl {
  border-radius: 1rem 1rem 0 0
}
.opacity-50 {
  opacity: 0.5
}
.bg-black {
  background-color: #000
}
.text-white {
  color: #fff
}

.hero {
  background: linear-gradient(135deg, 
    var(--color-primary-100) 0%, 
    var(--color-primary-200) 100%
  );
  backdrop-filter: blur(10px);
  padding: 4rem 2rem;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(14,165,233,0.1), transparent 50%);
  z-index: 0;
}
.hero h1 {
  font-size: 2rem;
}
.hero a {
  background: linear-gradient(135deg, 
    var(--color-primary-500), 
    var(--color-primary-700)
  );}
.hero a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(14,165,233,0.3);
}
.hero img {
  transition: transform 0.3s ease;
}
.hero img:hover {
  transform: translateY(-5px);
}
.features {
  padding: 2rem;
}
.feature-card {
  transition: all 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
}
.cta-section {
  background: var(--color-base-50);
  backdrop-filter: blur(10px);
}
.cta-section a {
  border: 1px solid var(--color-primary-500);
  color: var(--color-primary-500);
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(14,165,233,0.2);
}
.cta-section a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(14,165,233,0.3);
}

 /* Button WhatsApp */
 .whatsapp-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}
.whatsapp-floating a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: #fff;
  padding: 1rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  font-size: 1rem;
  font-weight: 600;
}
.whatsapp-floating a:hover {
  transform: scale(1.05);
}
.whatsapp-floating svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}