:root {
  --background: 40 20% 98%;
  --foreground: 220 30% 15%;

  --card: 0 0% 100%;
  --card-foreground: 220 30% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 30% 15%;

  --primary: 220 60% 22%;
  --primary-foreground: 40 20% 98%;

  --secondary: 40 30% 94%;
  --secondary-foreground: 220 30% 15%;

  --muted: 40 15% 95%;
  --muted-foreground: 220 10% 46%;

  --accent: 38 92% 50%;
  --accent-foreground: 220 60% 12%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 220 15% 90%;
  --input: 220 15% 90%;
  --ring: 220 60% 22%;

  --radius: 0.625rem;

  --gradient-hero: linear-gradient(135deg, hsl(220 60% 22%) 0%, hsl(220 45% 32%) 100%);
  --shadow-card: 0 4px 24px -4px hsl(220 30% 15% / 0.08);
  --shadow-card-hover: 0 8px 32px -4px hsl(220 30% 15% / 0.14);
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

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

  h1, h2, h3, h4 {
    font-family: 'DM Serif Display', serif;
  }
}

.section-padding {
  padding: 5rem 1rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding: 7rem 1rem;
  }
}

.container-narrow {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

/* Custom Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* Lucide Icon override */
[data-lucide] {
  stroke-width: 2;
}

/* Logo Styles */
.logo-wordmark {
  font-family: 'DM Serif Display', serif;
  font-weight: 400; /* Serif usually looks better at normal weight */
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
}

.logo-main {
  color: hsl(var(--primary));
  font-size: 1.4rem;
}

.logo-ext {
  color: hsl(var(--accent));
  font-size: 1.4rem;
  font-weight: 700;
  margin-left: 1px;
}

.footer-logo .logo-main {
  font-size: 1.8rem;
}

.footer-logo .logo-ext {
  font-size: 1.8rem;
}

.logo-wordmark:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 4px hsla(var(--primary) / 0.1));
}

/* FAQ Interaction Fix */
.faq-item button > * {
  pointer-events: none;
}

.faq-content {
  height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium Icon Animations */
i[data-lucide], svg[data-lucide] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover i[data-lucide], 
.group:hover svg[data-lucide] {
  transform: translateY(-4px) scale(1.1) rotate(5deg);
  filter: drop-shadow(0 4px 6px hsla(var(--primary) / 0.2));
}

/* Pulsing effect for special icons */
.icon-pulse {
  animation: icon-pulse 2s infinite;
}

@keyframes icon-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Floating animation for hero/proof section */
.icon-float {
  animation: icon-float 3s ease-in-out infinite;
}

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

/* Dropdown Styles */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: white;
  min-width: 260px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
  border-radius: 1rem;
  padding: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  border: 1px solid hsl(var(--border));
}

.nav-dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: hsl(var(--secondary));
  color: hsl(var(--primary));
  padding-left: 1.25rem;
}

.dropdown-item i {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.6;
}

/* Mobile Dropdown */
.mobile-dropdown-content {
  display: none;
  flex-direction: column;
  padding-left: 1rem;
  margin-top: 0.5rem;
  gap: 0.5rem;
  border-left: 2px solid hsl(var(--border));
}

.mobile-dropdown-content.active {
  display: flex;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
}

.nav-link i {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-link i {
  transform: rotate(180deg);
}

/* Submit PR Button Highlight */
.btn-submit-pr {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-weight: 700 !important;
  box-shadow: 0 4px 14px 0 hsla(var(--accent) / 0.39);
}

.btn-submit-pr:hover {
  background: hsl(var(--accent) / 0.9);
  box-shadow: 0 6px 20px hsla(var(--accent) / 0.23);
  transform: translateY(-2px);
}