/* Design tokens: copied from app for identical look */
:root {
  --background: 0 0% 100%;
  --foreground: 220 15% 15%;
  --card: 0 0% 100%;
  --card-foreground: 220 15% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 15%;
  --primary: 0 72% 51%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 0 72% 60%;
  --primary-dark: 0 72% 40%;
  --secondary: 220 30% 20%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 220 30% 30%;
  --trust: 220 50% 45%;
  --trust-foreground: 0 0% 100%;
  --muted: 220 15% 96%;
  --muted-foreground: 220 15% 45%;
  --accent: 45 100% 60%;
  --accent-foreground: 220 15% 15%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 15% 90%;
  --input: 220 15% 96%;
  --ring: 0 72% 51%;
  --gradient-hero: linear-gradient(135deg, hsl(0 72% 51%), hsl(220 50% 45%));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 15% 98%));
  --gradient-cta: linear-gradient(135deg, hsl(0 72% 51%), hsl(0 72% 40%));
  --gradient-trust: linear-gradient(135deg, hsl(220 50% 45%), hsl(220 30% 20%));
  --shadow-card: 0 4px 20px hsl(220 15% 15% / 0.08);
  --shadow-cta: 0 8px 30px hsl(0 72% 51% / 0.3);
  --shadow-hero: 0 20px 60px hsl(220 15% 15% / 0.15);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Semantic color utilities to match app tokens */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-trust { color: hsl(var(--trust)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }
.bg-muted\/50 { background-color: hsl(var(--muted) / 0.5); }
.bg-accent\/10 { background-color: hsl(var(--accent) / 0.1); }
.bg-accent\/20 { background-color: hsl(var(--accent) / 0.2); }
.bg-trust\/10 { background-color: hsl(var(--trust) / 0.1); }
.border-border { border-color: hsl(var(--border)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2); }

/* Gradients and shadows */
.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-card { background-image: var(--gradient-card); }
.bg-gradient-cta { background-image: var(--gradient-cta); }
.bg-gradient-trust { background-image: var(--gradient-trust); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-cta { box-shadow: var(--shadow-cta); }
.shadow-hero { box-shadow: var(--shadow-hero); }

/* Fonts */
.font-inter { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; }
.font-poppins { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; }

/* Custom overlays to keep color tokens (instead of Tailwind from- via- with custom colors) */
.hero-overlay { background: linear-gradient(to right, hsl(var(--secondary) / 0.9), hsl(var(--secondary) / 0.7), transparent); }
.finalcta-overlay { background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.9), hsl(var(--trust))); }

/* Animations */
@keyframes bounce-in {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

.animate-bounce-in { animation: bounce-in .4s var(--transition-bounce); }
.animate-fade-in-up { animation: fade-in-up .3s ease-out; }
.animate-pulse-slow { animation: pulse-slow 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Ensure no horizontal overflow on small devices */
html, body { max-width: 100%; overflow-x: hidden; }

/* Accessibility: high-contrast borders for dividers referenced with bg-border */
.bg-border { background-color: hsl(var(--border)); }