@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: #2E096F;
  --card: #F5F3FF;
  --card-foreground: #2E096F;
  --popover: #F5F3FF;
  --popover-foreground: #2E096F;
  --primary: #401880;
  --primary-foreground: #ffffff;
  --secondary: #F2EFFB;
  --secondary-foreground: #2E096F;
  --muted: #F5F3FF;
  --muted-foreground: #65637A;
  --accent: #7557D3;
  --accent-foreground: #ffffff;
  --destructive: #EF4444;
  --destructive-foreground: #ffffff;
  --border: rgba(46, 9, 111, 0.12);
  --input: rgba(46, 9, 111, 0.08);
  --input-background: rgba(46, 9, 111, 0.05);
  --switch-background: #E9E3F5;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #401880;
  --radius: 0.75rem;
}

.dark {
  --background: #220250;
  --foreground: #ffffff;
  --card: #2E096F;
  --card-foreground: #ffffff;
  --popover: #2E096F;
  --popover-foreground: #ffffff;
  --primary: #7557D3;
  --primary-foreground: #ffffff;
  --secondary: #401880;
  --secondary-foreground: #ffffff;
  --muted: #401880;
  --muted-foreground: rgba(255,255,255,0.6);
  --accent: #9781E6;
  --accent-foreground: #ffffff;
  --destructive: #EF4444;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.1);
  --ring: #7557D3;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    font-family: 'DM Sans', sans-serif;
    border-color: var(--border);
    outline-color: var(--ring);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  html {
    font-size: var(--font-size);
  }

  h1 {
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.5;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
  }

  h3 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
  }

  h4 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }

  label {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }

  button {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }

  input {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

/* Custom Utilities and Micro-animations */
.glow-btn { 
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(129,176,230,0.8), rgba(255,255,255,0.8), rgba(129,176,230,0.8)); 
  padding: 1px; 
  border-radius: 12px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
}

.gradient-text { 
  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0.15)); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
}

.hide-scrollbar::-webkit-scrollbar { 
  display: none; 
}

.hide-scrollbar { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}

.mobile-menu-panel { 
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  height: 100vh;
  width: 100%;
  background-color: white;
  padding: 1.25rem;
  transform: translateX(100%); 
  transition: transform 0.3s ease; 
}

@media (min-width: 768px) {
  .mobile-menu-panel {
    width: 70%;
  }
}

.mobile-menu-panel.open { 
  transform: translateX(0); 
}

.nav-scrolled { 
  background-color: rgba(34,2,80,0.95) !important; 
  backdrop-filter: blur(12px); 
}

.step-content { 
  display: none; 
}

.step-content.active { 
  display: block; 
}

.step-item.active .step-dot { 
  background-color: #401880 !important; 
}

.step-item.active .step-title { 
  color: #2E096F !important; 
  font-weight: 700; 
}

/* Cycling Word Animations */
.cycling-word { 
  transition: opacity 0.4s ease, transform 0.4s ease; 
}

.cycling-word.fade-out { 
  opacity: 0; 
  transform: translateY(-10px); 
}

.cycling-word.fade-in { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Form Styles */
.form-input { 
  width: 100%; 
  padding: 12px 16px; 
  border: 1.5px solid #E5E7EB; 
  border-radius: 12px; 
  font-size: 14px; 
  color: #374151; 
  outline: none; 
  transition: border-color 0.2s; 
  background: white; 
}

.form-input:focus { 
  border-color: #9781E6; 
  box-shadow: 0 0 0 3px rgba(151,129,230,0.1); 
}

.form-input::placeholder { 
  color: #9CA3AF; 
}

.success-state { 
  display: none; 
}

.success-state.show { 
  display: flex; 
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.float-anim { 
  animation: float 4s ease-in-out infinite; 
}

@keyframes slideUp { 
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  } 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

.slide-up { 
  animation: slideUp 0.5s ease forwards; 
}

@keyframes countUp { 
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  } 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

.stat-card { 
  animation: countUp 0.6s ease forwards; 
}

.story-card:hover .story-img { 
  transform: scale(1.05); 
}

.story-img { 
  transition: transform 0.6s ease; 
}