@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-bold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-extrabold.woff2') format('woff2'); }

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/outfit-regular.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/outfit-medium.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/outfit-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/outfit-bold.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/outfit-extrabold.woff2') format('woff2'); }

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

@layer base {
  :root, .dark {
    --background: 232 59% 10%;
    --foreground: 0 0% 100%;
    --primary: 191 100% 50%;
    --primary-foreground: 232 59% 10%;
    --secondary: 334 100% 50%;
    --secondary-foreground: 232 59% 10%; 
    --accent: 111 100% 54%;
    --accent-foreground: 232 59% 10%;
    --muted: 232 40% 16%;
    --muted-foreground: 232 20% 85%;
    --card: 232 45% 12%;
    --card-foreground: 0 0% 100%;
    --popover: 232 45% 12%;
    --popover-foreground: 0 0% 100%;
    --border: 191 100% 50% / 0.3;
    --input: 191 100% 50% / 0.3;
    --ring: 191 100% 50%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 232 59% 10%;
    --radius: 0.75rem;
    
    --faq-surface: 232 45% 13%;
    --faq-surface-hover: 232 45% 16%;
    --faq-border: 191 100% 50% / 0.2;

    --perf-good: 142 71% 45%;
    --perf-needs-improvement: 38 92% 50%;
    --perf-poor: 0 84% 60%;
  }

  body {
    font-family: 'Poppins', 'Outfit', system-ui, -apple-system, sans-serif;
    overflow-x: clip;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-tap-highlight-color: transparent;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: hsl(var(--foreground));
    font-weight: 700;
  }

  html { scroll-behavior: smooth; }
  img { max-width: 100%; height: auto; content-visibility: auto; }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
  .neon-text-cyan { text-shadow: 0 0 10px hsla(191, 100%, 50%, 0.5), 0 0 20px hsla(191, 100%, 50%, 0.3); }
  .neon-border-cyan { box-shadow: 0 0 10px hsla(191, 100%, 50%, 0.2), inset 0 0 10px hsla(191, 100%, 50%, 0.1); }
  .touch-target { min-height: 44px; min-width: 44px; }
  .gradient-text-cyan-blue {
    background: linear-gradient(135deg, #00D9FF 0%, #2563EB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.75px;
    filter: drop-shadow(0 4px 6px rgba(0, 217, 255, 0.2));
  }
  
  .animate-cookie-slide-up { animation: cookie-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-cookie-fade-out { animation: cookie-fade-out 0.4s ease-in forwards; }

  .text-perf-good { color: hsl(var(--perf-good)); }
  .text-perf-warning { color: hsl(var(--perf-needs-improvement)); }
  .text-perf-poor { color: hsl(var(--perf-poor)); }
  .bg-perf-good { background-color: hsl(var(--perf-good) / 0.1); }
  .bg-perf-warning { background-color: hsl(var(--perf-needs-improvement) / 0.1); }
  .bg-perf-poor { background-color: hsl(var(--perf-poor) / 0.1); }

  /* WebP Background Fallback Utility Example */
  .bg-hero-pattern {
    background-image: url('/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
  }
  @supports (background-image: url('/images/hero-bg.webp')) {
    .bg-hero-pattern {
      background-image: url('/images/hero-bg.webp');
    }
  }
}

@keyframes cookie-slide-up {
  from { transform: translateY(100%) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes cookie-fade-out {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(100%) scale(0.95); opacity: 0; }
}

@layer components {
  .section-padding { padding-top: 5rem; padding-bottom: 5rem; }
  @media (min-width: 768px) { .section-padding { padding-top: 7rem; padding-bottom: 7rem; } }
  @media (min-width: 1024px) { .section-padding { padding-top: 8rem; padding-bottom: 8rem; } }

  .legal-prose { font-size: 1.125rem; line-height: 1.75; color: hsl(var(--muted-foreground)); max-width: 75ch; counter-reset: section; }
  .legal-prose h2 { font-size: 1.875rem; font-weight: 800; margin: 4rem 0 1.5rem; color: hsl(var(--foreground)); letter-spacing: -0.025em; text-wrap: balance; display: flex; align-items: center; gap: 0.75rem; }
  .legal-prose h2::before { content: counter(section) "."; counter-increment: section; color: hsl(var(--primary)); }
  .legal-prose h3 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 1rem; color: hsl(var(--foreground)); text-wrap: balance; }
  .legal-prose p { margin-bottom: 1.5rem; }
  .legal-prose ul { margin-bottom: 2rem; padding-left: 1.5rem; }
  .legal-prose li { margin-bottom: 0.75rem; position: relative; }
  .legal-prose ul > li::before { content: "•"; position: absolute; left: -1.25rem; color: hsl(var(--primary)); font-weight: 700; }
  .legal-prose a { color: hsl(var(--primary)); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
  .legal-prose a:hover { color: hsl(var(--secondary)); }

  .faq-accordion-item {
    background-color: hsl(var(--faq-surface));
    border: 1px solid hsl(var(--faq-border));
    border-radius: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .faq-accordion-item:hover {
    background-color: hsl(var(--faq-surface-hover));
    border-color: hsl(var(--primary) / 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}