/* AyeDu 100% Identical Static Styles */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 195 85% 7%;
  --card: 0 0% 100%;
  --card-foreground: 195 85% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 195 85% 7%;
  --primary: 322 95% 49%;
  --primary-foreground: 0 0% 100%;
  --secondary: 33 82% 91%;
  --secondary-foreground: 195 85% 7%;
  --muted: 0 0% 97.6%;
  --muted-foreground: 197 13% 35%;
  --accent: 330 100% 13%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 200 5% 91%;
  --input: 200 5% 91%;
  --ring: 322 95% 49%;
  --radius: 0.75rem;

  /* Custom brand tokens */
  --magenta: 322 95% 49%;
  --deep-magenta: 330 100% 13%;
  --rich-black: 195 85% 7%;
  --champagne: 33 82% 91%;
  --coral: 345 100% 63%;
  --brand-purple: 280 62% 58%;
  --brand-orange: 30 100% 64%;
  --brand-blue: 212 100% 49%;
  --brand-yellow: 42 100% 66%;
  --brand-green: 173 100% 27%;
  --dark-gray: 199 16% 26%;
  --gray: 197 8% 44%;
  --platinum: 200 5% 91%;
  --off-white: 0 0% 97.6%;

  /* Gradient tokens */
  --gradient-primary: linear-gradient(135deg, hsl(322, 95%, 49%), hsl(345, 100%, 63%));
  --gradient-hero: linear-gradient(160deg, hsl(33, 82%, 95%) 0%, hsl(0, 0%, 100%) 40%, hsl(322, 95%, 97%) 100%);
  --gradient-dark: linear-gradient(160deg, hsl(195, 85%, 7%) 0%, hsl(330, 100%, 13%) 100%);

  /* Shadow tokens */
  --shadow-card: 0 1px 3px 0 hsl(195 85% 7% / 0.04), 0 1px 2px -1px hsl(195 85% 7% / 0.04);
  --shadow-card-hover: 0 10px 25px -5px hsl(322 95% 49% / 0.08), 0 8px 10px -6px hsl(322 95% 49% / 0.04);
  --shadow-elevated: 0 20px 40px -12px hsl(195 85% 7% / 0.15);
}

.dark {
  --background: 195 85% 7%;
  --foreground: 0 0% 97.6%;
  --card: 199 16% 16%;
  --card-foreground: 0 0% 97.6%;
  --primary: 322 95% 49%;
  --ring: 322 95% 49%;
}

/* Base Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Host Grotesk', sans-serif;
}

/* Utilities matching index.css exactly */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-dark { background: var(--gradient-dark); }

.bg-dot-pattern {
  background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px);
  background-size: 24px 24px;
}

.glass-card {
  backdrop-filter: blur(16px);
  background: hsl(var(--card) / 0.6);
  border: 1px solid hsl(var(--border) / 0.3);
  box-shadow: 0 8px 32px hsl(var(--foreground) / 0.06);
}

.glass-pill {
  backdrop-filter: blur(12px);
  background: hsl(var(--primary) / 0.08);
  border: 1px solid hsl(var(--primary) / 0.15);
  border-radius: 9999px;
}

.glow-primary {
  box-shadow: 0 0 20px hsl(var(--primary) / 0.3), 0 0 60px hsl(var(--primary) / 0.1);
}

.card-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #041520;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
.preloader-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Scroll reveal logic */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Accordion */
.accordion-item { border-radius: 0.75rem; border: 1px solid hsl(var(--border)); margin-bottom: 0.75rem; transition: box-shadow 0.3s ease; }
.accordion-trigger { width: 100%; text-align: left; padding: 1.25rem 1.5rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color 0.2s ease; }
.accordion-trigger:hover { color: hsl(var(--primary)); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease; padding: 0 1.5rem; }
.accordion-item.active { box-shadow: var(--shadow-card-hover); }
.accordion-item.active .accordion-content { max-height: 500px; padding-bottom: 1.25rem; }
.accordion-item.active .accordion-trigger { color: hsl(var(--primary)); }
.accordion-item.active .accordion-trigger i { transform: rotate(180deg); }