/**
 * Evolvo White Label - Main Styles
 * CSS variables and utilities (replaces Tailwind theme)
 */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --background: 220 50% 7%;
  --foreground: 0 0% 100%;
  --card: 220 40% 11%;
  --card-foreground: 0 0% 100%;
  --popover: 220 40% 11%;
  --popover-foreground: 0 0% 100%;
  --primary: 188 100% 44%;
  --primary-foreground: 220 50% 7%;
  --secondary: 220 35% 14%;
  --secondary-foreground: 215 20% 70%;
  --muted: 220 30% 12%;
  --muted-foreground: 215 20% 69%;
  --accent: 188 100% 44%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 100% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 30% 16%;
  --input: 220 30% 16%;
  --ring: 188 100% 44%;
  --radius: 0.75rem;
  --whatsapp: 145 100% 22%;
  --telegram: 200 100% 31%;
}

html { scroll-behavior: smooth; }

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-heading { font-family: 'Syne', sans-serif; }
.font-800 { font-weight: 800; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.font-500 { font-weight: 500; }

/* Utility classes using CSS variables */
.bg-background { background: hsl(var(--background)); }
.bg-card { background: hsl(var(--card)); }
.bg-primary { background: hsl(var(--primary)); }
.bg-primary\/10 { background: hsl(var(var(--primary) / 0.1)); }
.bg-destructive\/15 { background: hsl(var(--destructive) / 0.15); }
.bg-muted\/50 { background: hsl(var(--muted) / 0.5); }
.bg-secondary\/30 { background: hsl(var(--secondary) / 0.3); }
.bg-whatsapp { background: hsl(var(--whatsapp)); }
.bg-telegram { background: hsl(var(--telegram)); }
.bg-whatsapp\/10 { background: hsl(var(--whatsapp) / 0.1); }
.bg-telegram\/10 { background: hsl(var(--telegram) / 0.1); }
.bg-whatsapp\/20 { background: hsl(var(--whatsapp) / 0.2); }
.bg-telegram\/20 { background: hsl(var(--telegram) / 0.2); }

.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-whatsapp { color: hsl(var(--whatsapp)); }
.text-telegram { color: hsl(var(--telegram)); }

.border-border { border-color: hsl(var(--border)); }
.border-border\/30 { border-color: hsl(var(--border) / 0.3); }
.border-border\/40 { border-color: hsl(var(--border) / 0.4); }
.border-border\/50 { border-color: hsl(var(--border) / 0.5); }
.border-primary\/10 { border-color: hsl(var(--primary) / 0.1); }
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2); }
.border-primary\/30 { border-color: hsl(var(--primary) / 0.3); }
.border-primary\/40 { border-color: hsl(var(--primary) / 0.4); }
.border-destructive\/30 { border-color: hsl(var(--destructive) / 0.3); }
.border-l-destructive { border-left-color: hsl(var(--destructive)); }
.border-l-2 { border-left-width: 2px; }
.border-l-4 { border-left-width: 4px; }

.rounded-2xl { border-radius: 1rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: var(--radius); }
.rounded-full { border-radius: 9999px; }

.glow-primary {
  box-shadow: 0 0 30px hsl(188 100% 44% / 0.3), 0 0 80px hsl(188 100% 44% / 0.1);
}
.glow-whatsapp {
  box-shadow: 0 0 25px hsl(145 100% 22% / 0.35), 0 0 60px hsl(145 100% 22% / 0.12);
}
.glow-telegram {
  box-shadow: 0 0 25px hsl(200 100% 31% / 0.35), 0 0 60px hsl(200 100% 31% / 0.12);
}

.text-gradient {
  background: linear-gradient(135deg, hsl(188 100% 44%), hsl(188 80% 60%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-grid {
  background-image:
    linear-gradient(hsl(var(--border) / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.bg-radial-glow {
  background: radial-gradient(ellipse at top center, hsl(188 100% 44% / 0.08) 0%, transparent 60%);
}
.divider-line {
  width: 4rem;
  height: 2px;
  background: hsl(var(--primary));
}

.section-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) { .section-container { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .section-container { padding-left: 3rem; padding-right: 3rem; } }

.section-padding { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .section-padding { padding-top: 8rem; padding-bottom: 8rem; } }
@media (min-width: 1024px) { .section-padding { padding-top: 10rem; padding-bottom: 10rem; } }

/* Animations */
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes orbPulse1 {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.8; transform: translateX(-50%) scale(1.2); }
}
@keyframes orbPulse2 {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}
@keyframes candleFadeIn {
  from { opacity: 0; }
  to { opacity: 0.25; }
}
@keyframes navSlideIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.nav-animate-in {
  animation: navSlideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroWordReveal {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-word-reveal {
  animation: heroWordReveal 0.6s ease-out both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade-up {
  animation: heroFadeUp 0.6s ease-out both;
}
.hero-orb-1 {
  animation: orbPulse1 6s ease-in-out infinite;
}
.hero-orb-2 {
  animation: orbPulse2 8s ease-in-out infinite;
  animation-delay: 2s;
}
.animate-marquee {
  animation: marquee 20s linear infinite;
}

/* Scroll reveal (optional - use .scroll-reveal-visible when in view via JS) */
.scroll-reveal-up, .scroll-reveal-down, .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-none {
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Backdrop blur utility */
.backdrop-blur-2xl { backdrop-filter: blur(24px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* CTA pulse */
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Layout helpers */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.grid { display: grid; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.pointer-events-none { pointer-events: none; }
.transition-all { transition: all 0.2s; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.hover\:scale-103:hover { transform: scale(1.03); }
.hover\:opacity-90:hover { opacity: 0.9; }
.whitespace-nowrap { white-space: nowrap; }
.select-none { user-select: none; }
.inline-flex { display: inline-flex; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.shrink-0 { flex-shrink: 0; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal-content {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 1rem;
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}