/* =========================================================
   Rezaa Mastery Theme — exact replication of Lovable design
   Tailwind v3 Play CDN handles utility classes;
   this file defines tokens, custom utilities and animations.
   ========================================================= */

:root {
  --radius: 0.875rem;

  --background: oklch(0.12 0.02 260);
  --foreground: oklch(0.98 0.005 240);
  --card: oklch(0.16 0.025 260);
  --card-foreground: oklch(0.98 0.005 240);

  --primary: oklch(0.78 0.15 80);
  --primary-foreground: oklch(0.15 0.02 260);

  --secondary: oklch(0.22 0.04 265);
  --secondary-foreground: oklch(0.98 0.005 240);

  --muted: oklch(0.2 0.025 260);
  --muted-foreground: oklch(0.72 0.02 250);

  --accent: oklch(0.45 0.18 265);
  --accent-foreground: oklch(0.98 0.005 240);

  --destructive: oklch(0.6 0.22 25);
  --destructive-foreground: oklch(0.98 0.005 240);

  --border: oklch(1 0 0 / 0.08);
  --input: oklch(1 0 0 / 0.1);
  --ring: oklch(0.78 0.15 80);

  --gold: oklch(0.82 0.15 85);
  --gold-soft: oklch(0.88 0.1 85);
  --royal: oklch(0.5 0.2 265);
  --navy: oklch(0.18 0.04 260);
  --charcoal: oklch(0.14 0.015 260);
  --ember: oklch(0.65 0.22 25);

  --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--gold) 45%, transparent);
  --shadow-luxe: 0 30px 80px -30px oklch(0 0 0 / 0.8);

  --gradient-hero: radial-gradient(ellipse at top right, color-mix(in oklab, var(--royal) 35%, transparent), transparent 60%),
                   radial-gradient(ellipse at bottom left, color-mix(in oklab, var(--gold) 18%, transparent), transparent 55%),
                   linear-gradient(180deg, var(--background), var(--charcoal));
  --gradient-gold: linear-gradient(135deg, oklch(0.85 0.16 85), oklch(0.7 0.14 70));
}

* { border-color: var(--border); box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "Playfair Display", serif; letter-spacing: -0.02em; }

/* Token-driven helpers */
.text-foreground { color: var(--foreground); }
.bg-background { background: var(--background); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-destructive { color: var(--destructive); }
.bg-destructive\/25 { background: color-mix(in oklab, var(--destructive) 25%, transparent); }
.border-border { border-color: var(--border); }
.bg-charcoal\/60 { background: color-mix(in oklab, var(--charcoal) 60%, transparent); }
.bg-charcoal { background: var(--charcoal); }
.via-charcoal\/40 { --tw-gradient-via: color-mix(in oklab, var(--charcoal) 40%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.from-charcoal { --tw-gradient-from: var(--charcoal); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-charcoal { --tw-gradient-to: var(--charcoal); }
.via-background { --tw-gradient-via: var(--background); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.from-background { --tw-gradient-from: var(--background); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-background { --tw-gradient-to: var(--background); }
.via-background\/80 { --tw-gradient-via: color-mix(in oklab, var(--background) 80%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-background\/40 { --tw-gradient-to: color-mix(in oklab, var(--background) 40%, transparent); }
.bg-background\/40 { background: color-mix(in oklab, var(--background) 40%, transparent); }

.text-gold { color: var(--gold); }
.bg-gold { background: var(--gold); }
.fill-gold { fill: var(--gold); }
.border-gold { border-color: var(--gold); }
.text-ember { color: var(--ember); }
.bg-ember\/10 { background: color-mix(in oklab, var(--ember) 10%, transparent); }
.bg-ember\/15 { background: color-mix(in oklab, var(--ember) 15%, transparent); }
.bg-ember\/20 { background: color-mix(in oklab, var(--ember) 20%, transparent); }
.border-ember\/40 { border-color: color-mix(in oklab, var(--ember) 40%, transparent); }
.decoration-ember { text-decoration-color: var(--ember); }
.decoration-destructive { text-decoration-color: var(--destructive); }

.bg-gold\/5  { background: color-mix(in oklab, var(--gold) 5%, transparent); }
.bg-gold\/10 { background: color-mix(in oklab, var(--gold) 10%, transparent); }
.bg-gold\/20 { background: color-mix(in oklab, var(--gold) 20%, transparent); }
.bg-gold\/95 { background: color-mix(in oklab, var(--gold) 95%, transparent); }
.bg-royal\/20 { background: color-mix(in oklab, var(--royal) 20%, transparent); }
.bg-royal\/30 { background: color-mix(in oklab, var(--royal) 30%, transparent); }
.border-gold\/20 { border-color: color-mix(in oklab, var(--gold) 20%, transparent); }
.border-gold\/30 { border-color: color-mix(in oklab, var(--gold) 30%, transparent); }
.border-gold\/40 { border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.divide-gold\/15 > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid color-mix(in oklab, var(--gold) 15%, transparent); }

.from-gold\/10 { --tw-gradient-from: color-mix(in oklab, var(--gold) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-gold\/20 { --tw-gradient-from: color-mix(in oklab, var(--gold) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-gold\/30 { --tw-gradient-from: color-mix(in oklab, var(--gold) 30%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-gold\/10 { --tw-gradient-via: color-mix(in oklab, var(--gold) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-gold\/20 { --tw-gradient-to: color-mix(in oklab, var(--gold) 20%, transparent); }
.from-royal\/30 { --tw-gradient-from: color-mix(in oklab, var(--royal) 30%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-royal\/30 { --tw-gradient-to: color-mix(in oklab, var(--royal) 30%, transparent); }
.to-royal\/20 { --tw-gradient-to: color-mix(in oklab, var(--royal) 20%, transparent); }
.bg-gold\/10 { background-color: color-mix(in oklab, var(--gold) 10%, transparent); }

.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-hero { background: var(--gradient-hero); }

.glass {
  background: linear-gradient(145deg, oklch(1 0 0 / 0.04), oklch(1 0 0 / 0.01));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(1 0 0 / 0.08);
}
.glass-gold {
  background: linear-gradient(145deg, color-mix(in oklab, var(--gold) 8%, transparent), color-mix(in oklab, var(--royal) 4%, transparent));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  box-shadow: var(--shadow-gold);
}
.glow-gold { box-shadow: 0 0 60px -10px color-mix(in oklab, var(--gold) 50%, transparent); }
.glow-ember { box-shadow: 0 0 80px -20px color-mix(in oklab, var(--ember) 40%, transparent); }
.shadow-luxe { box-shadow: var(--shadow-luxe); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.hover\:shadow-gold:hover { box-shadow: var(--shadow-gold); }

.font-display { font-family: "Playfair Display", serif; }

@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes marquee-y { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.animate-fade-up { animation: fade-up 0.8s ease-out both; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse { animation: pulse-dot 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-marquee-y { animation: marquee-y 70s linear infinite; }
.animate-marquee-y-reverse { animation: marquee-y 85s linear infinite reverse; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 30%, transparent), transparent);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* FAQ accordion */
.faq-panel { display: none; }
.faq-item.open .faq-panel { display: block; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }
.faq-item.open { border-color: color-mix(in oklab, var(--gold) 40%, transparent) !important; }

/* Sticky CTA spacer for mobile */
@media (max-width: 767px) { body { padding-bottom: 84px; } }

/* Lucide icons sizing helper */
[data-lucide] { width: 1em; height: 1em; }

/* Hover line for nav links */
.nav-link:hover { color: var(--gold); }

/* Marquee column fades already handled via gradient utilities. */