/* ═══════════════════════════════════════════════════════════════════════════
 * PROMPT FUNNELS - Design System
 * Auto-generated theme with OKLCH color tokens
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap");

:root {
  /* ─────────────────────────────────────────────────────────────────────────
   * COLOR TOKENS (OKLCH) - Material 3 Theme
   * Brand: #8B5CF6 (Vibrant AI Purple)
   * ───────────────────────────────────────────────────────────────────────── */

  /* Primary Brand - AI Purple */
  --color-primary: oklch(0.606 0.219 292.7);
  --color-primary-foreground: oklch(0.229 0.048 299.2);
  --color-primary-light: oklch(0.75 0.18 292.7);
  --color-primary-dark: oklch(0.45 0.25 292.7);

  /* Secondary */
  --color-secondary: oklch(0.917 0.036 305.4);
  --color-secondary-foreground: oklch(0.225 0.016 302.2);

  /* Accent - Cyan for AI Glow */
  --color-accent: oklch(0.7 0.15 195);
  --color-accent-foreground: oklch(0.2 0.05 195);

  /* CTA Color - Rose Gold for high conversion */
  --color-cta: oklch(0.753 0.097 6.4);
  --color-cta-hover: oklch(0.668 0.096 6.3);
  --color-cta-glow: oklch(0.753 0.15 6.4 / 0.4);

  /* Semantic Colors */
  --color-success: oklch(0.65 0.18 145);
  --color-warning: oklch(0.75 0.18 85);
  --color-error: oklch(0.55 0.22 25);

  /* Dark Mode Default (Product is dark-first) */
  --color-background: oklch(0.13 0.02 300);
  --color-surface: oklch(0.18 0.025 300);
  --color-surface-elevated: oklch(0.22 0.02 300);
  --color-text: oklch(0.95 0.01 300);
  --color-text-secondary: oklch(0.75 0.02 300);
  --color-muted: oklch(0.65 0.02 300);
  --color-border: oklch(0.28 0.02 300);

  /* Light sections (alternate) */
  --color-light-bg: oklch(0.991 0.001 285);
  --color-light-surface: oklch(0.97 0.005 285);
  --color-light-text: oklch(0.224 0.004 308.1);
  --color-light-muted: oklch(0.55 0.02 300);

  /* ─────────────────────────────────────────────────────────────────────────
   * TYPOGRAPHY
   * ───────────────────────────────────────────────────────────────────────── */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;

  /* ─────────────────────────────────────────────────────────────────────────
   * ANIMATION TIMING
   * ───────────────────────────────────────────────────────────────────────── */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
  --duration-slower: 1s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─────────────────────────────────────────────────────────────────────────
   * SPACING & SIZING
   * ───────────────────────────────────────────────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────────────────────
   * SHADOWS
   * ───────────────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px oklch(0.1 0 0 / 0.3);
  --shadow-md:
    0 4px 6px -1px oklch(0.1 0 0 / 0.4), 0 2px 4px -2px oklch(0.1 0 0 / 0.3);
  --shadow-lg:
    0 10px 15px -3px oklch(0.1 0 0 / 0.5), 0 4px 6px -4px oklch(0.1 0 0 / 0.3);
  --shadow-xl:
    0 20px 25px -5px oklch(0.1 0 0 / 0.5), 0 8px 10px -6px oklch(0.1 0 0 / 0.3);
  --shadow-glow: 0 0 40px oklch(0.606 0.219 292.7 / 0.3);
  --shadow-cta-glow: 0 0 30px var(--color-cta-glow);
  --shadow-ai-glow: 0 0 60px oklch(0.606 0.3 292.7 / 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LIGHT MODE (optional toggle)
 * ═══════════════════════════════════════════════════════════════════════════ */

.light {
  --color-background: oklch(0.991 0.001 285);
  --color-surface: oklch(0.97 0.005 285);
  --color-surface-elevated: oklch(1 0 0);
  --color-text: oklch(0.224 0.004 308.1);
  --color-text-secondary: oklch(0.55 0.02 300);
  --color-muted: oklch(0.65 0.02 300);
  --color-border: oklch(0.85 0.01 300);
}

/* Smooth theme transition */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BASE STYLES
 * ═══════════════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

::selection {
  background: var(--color-primary);
  color: white;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ANIMATION KEYFRAMES
 * ═══════════════════════════════════════════════════════════════════════════ */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 20px var(--color-cta-glow);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 40px var(--color-cta-glow);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

@keyframes aiGlow {
  0%,
  100% {
    box-shadow: 0 0 20px oklch(0.606 0.2 292.7 / 0.3);
  }
  50% {
    box-shadow: 0 0 40px oklch(0.606 0.25 292.7 / 0.5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ANIMATION UTILITIES
 * ═══════════════════════════════════════════════════════════════════════════ */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp var(--duration-slow) var(--ease-out) forwards;
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(--duration-slow) var(--ease-out) forwards;
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInLeft var(--duration-slow) var(--ease-out) forwards;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  animation: slideInRight var(--duration-slow) var(--ease-out) forwards;
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleIn var(--duration-slow) var(--ease-spring) forwards;
}

/* Animation Delays */
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-600 {
  animation-delay: 0.6s;
}

/* Hover Effects */
.hover-lift {
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-spring);
}
.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}
.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LAYOUT UTILITIES
 * ═══════════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 4rem;
  }
}

.section {
  padding: 5rem 0;
}

.section-sm {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 8rem 0;
  }
  .section-sm {
    padding: 4rem 0;
  }
}

.section-dark {
  background: var(--color-background);
  color: var(--color-text);
}

.section-light {
  background: var(--color-light-bg);
  color: var(--color-light-text);
}

.section-alt {
  background: var(--color-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * COMPONENT BASES
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.btn-primary {
  background: var(--color-cta);
  color: white;
  box-shadow: var(--shadow-cta-glow);
  animation: pulse 3s ease-in-out infinite;
}

.btn-primary:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 50px var(--color-cta-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
}

.btn-lg {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

/* Inputs */
.input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px oklch(0.606 0.219 292.7 / 0.15);
}

.input::placeholder {
  color: var(--color-muted);
}

/* Cards */
.card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.card-glass {
  background: oklch(0.22 0.02 300 / 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid oklch(0.35 0.02 300 / 0.5);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SPECIAL EFFECTS
 * ═══════════════════════════════════════════════════════════════════════════ */

.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 50%,
    var(--color-cta) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ai-glow {
  animation: aiGlow 3s ease-in-out infinite;
}

.noise-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.grid-lines {
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.03) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CHAT UI COMPONENT STYLES
 * ═══════════════════════════════════════════════════════════════════════════ */

.chat-bubble {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  max-width: 85%;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.chat-bubble-user {
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: 0.25rem;
  margin-left: auto;
}

.chat-bubble-ai {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-bottom-left-radius: 0.25rem;
}

.chat-typing-dot {
  width: 8px;
  height: 8px;
  background: var(--color-muted);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

.chat-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.chat-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BENTO GRID
 * ═══════════════════════════════════════════════════════════════════════════ */

.bento-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .bento-span-2 {
    grid-column: span 2;
  }
}

.bento-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: all var(--duration-normal) var(--ease-out);
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE UTILITIES
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PAGE-SPECIFIC UTILITIES
 * ═══════════════════════════════════════════════════════════════════════════ */

.font-heading {
  font-family: var(--font-heading);
}

.hero-bg-image {
  background-image: url("https://images.pexels.com/photos/8728285/pexels-photo-8728285.jpeg?auto=compress&cs=tinysrgb&w=1920");
}

.ai-glow-orb {
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
}

.final-cta-section .final-cta-bg {
  background: radial-gradient(
    ellipse at center,
    var(--color-primary) 0%,
    transparent 70%
  );
}

.success-glow {
  background: radial-gradient(circle, var(--color-success) 0%, transparent 70%);
}