@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap');
@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-gold: var(--gold);
  --color-gold-light: var(--gold-light);
  --color-gold-dark: var(--gold-dark);
  --color-brown: var(--brown);
  --color-brown-light: var(--brown-light);
}

:root {
  --radius: 0.75rem;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Gold palette */
  --gold: oklch(0.78 0.12 85);
  --gold-light: oklch(0.88 0.1 85);
  --gold-dark: oklch(0.62 0.14 75);
  --brown: oklch(0.35 0.06 55);
  --brown-light: oklch(0.45 0.06 55);

  /* Hero gradient: black to deep brown */
  --hero-gradient: linear-gradient(160deg, oklch(0.12 0.01 60) 0%, oklch(0.18 0.04 55) 50%, oklch(0.12 0.02 70) 100%);
  --section-dark-gradient: linear-gradient(160deg, oklch(0.12 0.01 60) 0%, oklch(0.18 0.04 55) 50%, oklch(0.12 0.02 70) 100%);
  --gold-gradient: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  --gold-shimmer: linear-gradient(90deg, transparent 0%, oklch(0.88 0.1 85 / 0.3) 50%, transparent 100%);
  --border-gold: oklch(0.78 0.12 85 / 0.2);
  --muted-fg: oklch(0.5 0.04 60);

  --background: oklch(0.98 0.005 80);
  --foreground: oklch(0.13 0.02 60);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.02 60);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.02 60);
  --primary: oklch(0.13 0.02 60);
  --primary-foreground: oklch(0.98 0.005 80);
  --secondary: oklch(0.95 0.01 80);
  --secondary-foreground: oklch(0.25 0.04 60);
  --muted: oklch(0.94 0.01 75);
  --muted-foreground: oklch(0.5 0.04 60);
  --accent: oklch(0.78 0.12 85);
  --accent-foreground: oklch(0.13 0.02 60);
  --bg: var(--background);
  --fg: var(--foreground);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.88 0.02 80);
  --input: oklch(0.88 0.02 80);
  --ring: oklch(0.78 0.12 85);
  --chart-1: oklch(0.78 0.12 85);
  --chart-2: oklch(0.45 0.06 55);
  --chart-3: oklch(0.35 0.06 55);
  --chart-4: oklch(0.88 0.1 85);
  --chart-5: oklch(0.62 0.14 75);
  --sidebar: oklch(0.13 0.02 60);
  --sidebar-foreground: oklch(0.95 0.01 80);
  --sidebar-primary: oklch(0.78 0.12 85);
  --sidebar-primary-foreground: oklch(0.13 0.02 60);
  --sidebar-accent: oklch(0.2 0.03 60);
  --sidebar-accent-foreground: oklch(0.95 0.01 80);
  --sidebar-border: oklch(0.25 0.03 60);
  --sidebar-ring: oklch(0.78 0.12 85);
}

.dark {
  --background: oklch(0.1 0.015 60);
  --foreground: oklch(0.95 0.01 80);
  --card: oklch(0.15 0.02 60);
  --card-foreground: oklch(0.95 0.01 80);
  --popover: oklch(0.15 0.02 60);
  --popover-foreground: oklch(0.95 0.01 80);
  --primary: oklch(0.78 0.12 85);
  --primary-foreground: oklch(0.1 0.015 60);
  --secondary: oklch(0.2 0.03 60);
  --secondary-foreground: oklch(0.95 0.01 80);
  --muted: oklch(0.2 0.03 60);
  --muted-foreground: oklch(0.6 0.04 70);
  --accent: oklch(0.78 0.12 85);
  --accent-foreground: oklch(0.1 0.015 60);
  --bg: var(--background);
  --fg: var(--foreground);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(1 0 0 / 10%);
  --border-gold: oklch(0.78 0.12 85 / 0.2);
  --muted-fg: oklch(0.6 0.04 70);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.78 0.12 85);
  --chart-1: oklch(0.78 0.12 85);
  --chart-2: oklch(0.62 0.14 75);
  --chart-3: oklch(0.88 0.1 85);
  --chart-4: oklch(0.45 0.06 55);
  --chart-5: oklch(0.35 0.06 55);
  --sidebar: oklch(0.12 0.015 60);
  --sidebar-foreground: oklch(0.95 0.01 80);
  --sidebar-primary: oklch(0.78 0.12 85);
  --sidebar-primary-foreground: oklch(0.1 0.015 60);
  --sidebar-accent: oklch(0.2 0.03 60);
  --sidebar-accent-foreground: oklch(0.95 0.01 80);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.78 0.12 85);
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.12 85 / 0.4); }
  50% { box-shadow: 0 0 20px 8px oklch(0.78 0.12 85 / 0.15); }
}

@layer base {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  * {
    border-color: var(--color-border);
  }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
}

@layer utilities {
  .fade-up { animation: fadeUp .7s ease forwards; opacity: 0; }
  .fade-up-1 { animation-delay: 0s; } .fade-up-2 { animation-delay: .15s; } .fade-up-3 { animation-delay: .3s; } .fade-up-4 { animation-delay: .45s; }
  .slide-left { animation: slideLeft .8s ease forwards; opacity: 0; } .slide-right { animation: slideRight .8s ease forwards; opacity: 0; }
  
  .text-gold-gradient {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .shimmer-line {
    width: 64px; height: 2px;
    background: var(--gold-shimmer);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
  }

  .float-animation {
    animation: float 6s ease-in-out infinite;
  }

  .pulse-gold {
    animation: pulseGold 2.5s ease-in-out infinite;
  }

  .gold-border-glow {
    box-shadow: 0 0 15px -3px oklch(0.78 0.12 85 / 0.3), inset 0 0 15px -3px oklch(0.78 0.12 85 / 0.1);
  }
}

.hero { position: relative; min-height: auto; padding: 64px 24px 128px; overflow: hidden; background: var(--hero-gradient); }

.hero .particle { position: absolute; width: 4px; height: 4px; border-radius: 999px; background: rgba(198,163,78,.28); animation: float 4s ease-in-out infinite; box-shadow: 0 0 10px rgba(198,163,78,.16); }
.hero-content { max-width: 1152px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.hero-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; color: rgba(198,163,78,.70); margin-bottom: 16px; }
.hero h1 { font-family: var(--font-heading); font-size: clamp(2.94rem, 5.88vw, 4.67rem); font-weight: 700; line-height: 1; margin-bottom: 24px; }
.hero-desc { max-width: 800px; margin: 0 auto; color: #9e8e7a; font-size: clamp(0.945rem, 1.68vw, 1.05rem); line-height: 1.6; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; }
.hero-wave svg { width: 100%; height: 84px; display: block; }
.section { background: var(--bg); padding: 96px 24px; }
.section-dark { background: var(--section-dark-gradient); position: relative; padding: 96px 24px; }
.container { max-width: 1152px; margin: 0 auto; } .container-sm { max-width: 960px; margin: 0 auto; }
.grid-2 { display: grid; gap: 64px; align-items: center; } .grid-3 { display: grid; gap: 24px; } .grid-4 { display: grid; gap: 24px; } .grid-5 { display: grid; gap: 24px; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } }
.company-img, .founder-img { border-radius: 24px; overflow: hidden; border: 1px solid var(--border-gold); }
.company-img { height: 420px; } .founder-img { height: 420px; }
.company-img img, .founder-img img { width: 100%; height: 100%; object-fit: cover; } .founder-img img { object-position: top; }
.section-label, .founder-name { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-label .bar, .founder-name .bar { width: 32px; height: 2px; background: var(--gold); }
.section-label span { font-size: .75rem; text-transform: uppercase; letter-spacing: .25em; color: var(--gold); font-weight: 600; }
h2 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 24px; color: var(--fg); }
.text-muted { color: var(--muted-fg); line-height: 1.7; margin-bottom: 16px; font-size: 1.125rem; }
.stats { max-width: 768px; margin: 80px auto 0; }
.stats-wide { max-width: 100%; margin: 80px auto 0; }
.stat-card { text-align: center; padding: 24px; border-radius: 12px; border: 1px solid var(--border-gold); background: var(--card); transition: transform .3s, box-shadow .3s; }
.stat-card:hover { transform: scale(1.05) translateY(-4px); animation: pulseGold 2.5s ease-in-out infinite; }
.stat-num { font-size: 1.875rem; font-weight: 700; font-family: var(--font-heading); }
.stat-label { font-size: .75rem; color: var(--muted-fg); margin-top: 8px; text-transform: uppercase; letter-spacing: .1em; }
.founder-title { text-align: center; margin-bottom: 64px; }
.founder-title .label { font-size: .875rem; text-transform: uppercase; letter-spacing: .2em; color: rgba(198,163,78,.72); font-weight: 600; }
.founder-title h2, .founder-name h3 { color: #f0ede8; }
.founder-name h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.founder-role { font-size: .875rem; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.founder-bio { color: #9e8e7a; font-size: .875rem; line-height: 1.7; }
.wave-top, .wave-bottom { position: absolute; left: 0; right: 0; line-height: 0; }
.wave-top { top: -1px; } .wave-bottom { bottom: -1px; }
.wave-top svg, .wave-bottom svg { width: 100%; height: 62px; display: block; }
.director-header { text-align: center; margin-bottom: 56px; }
.director-header .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; color: rgba(198,163,78,.7); font-weight: 600; }
.director-header h2 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 12px; color: var(--fg); }
.director-card { position: relative; background: var(--card); border-radius: 16px; border: 1px solid var(--border-gold); padding: 32px; overflow: hidden; cursor: pointer; transition: transform .3s, box-shadow .3s; box-shadow: 0 4px 30px -8px rgba(198,163,78,.1); }
.director-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 8px 40px -8px rgba(198,163,78,.2); }
.director-card::before { content: ""; position: absolute; inset: 0; border-radius: 16px; opacity: 0; background: radial-gradient(circle at 50% 0%, rgba(198,163,78,.08), transparent 70%); transition: opacity .5s; }
.director-card:hover::before { opacity: 1; }
.director-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(198,163,78,.4), transparent); transform: scaleX(0); transition: transform .5s; }
.director-card:hover::after { transform: scaleX(1); }
.director-card .card-inner { position: relative; }
.director-card .icon { width: 36px; height: 36px; margin-bottom: 20px; color: var(--gold); transition: transform .4s; }
.director-card:hover .icon { transform: rotate(-10deg) scale(1.2); }
.director-card h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; margin-bottom: 12px; color: var(--fg); }
.director-card p { color: var(--muted-fg); font-size: .875rem; line-height: 1.7; }