@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');
@theme inline {
  --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-cta: var(--cta);
  --color-cta-foreground: var(--cta-foreground);
  --color-gold: var(--gold);
  --color-gold-foreground: var(--gold-foreground);
  --color-steel: var(--steel);
  --color-steel-foreground: var(--steel-foreground);
  --color-dark-section: var(--dark-section);
  --color-dark-section-foreground: var(--dark-section-foreground);
  --color-charcoal: var(--charcoal);
  --color-charcoal-foreground: var(--charcoal-foreground);
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.03 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.03 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.03 260);
  --primary: oklch(0.55 0.22 264);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.975 0.005 247);
  --secondary-foreground: oklch(0.18 0.03 260);
  --muted: oklch(0.975 0.005 247);
  --muted-foreground: oklch(0.38 0.03 257);
  --accent: oklch(0.945 0.034 254);
  --accent-foreground: oklch(0.32 0.18 265);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.90 0.012 250);
  --input: oklch(0.90 0.012 250);
  --ring: oklch(0.55 0.22 264);
  --cta: oklch(0.55 0.22 264);
  --cta-foreground: oklch(1 0 0);
  --gold: oklch(0.32 0.18 265);
  --gold-foreground: oklch(1 0 0);
  --steel: oklch(0.945 0.034 254);
  --steel-foreground: oklch(0.32 0.18 265);
  --dark-section: oklch(0.30 0.18 265);
  --dark-section-foreground: oklch(1 0 0);
  --charcoal: oklch(0.975 0.005 247);
  --charcoal-foreground: oklch(0.18 0.03 260);
}

* { box-sizing: border-box; border-color: var(--border); }
html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; background: var(--background); }
body {
  width: 100%; max-width: 100%; overflow-x: hidden;
  background-color: var(--background); color: var(--foreground);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); letter-spacing: -0.02em; }
img, video, svg { max-width: 100%; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--muted); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cta), var(--gold));
  border-radius: 4px; border: 2px solid var(--background);
}
::selection { background: var(--cta); color: var(--cta-foreground); }

.glass {
  background: oklch(1 0 0 / 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid oklch(0.90 0.012 250 / 0.9);
}
.glass-strong {
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid oklch(0.90 0.012 250);
  box-shadow: 0 10px 30px -15px oklch(0.21 0.04 265 / 0.10);
}
.texture-grid {
  background-image:
    linear-gradient(oklch(0.96 0.005 60 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.96 0.005 60 / 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}
.text-gradient-gold { color: oklch(0.30 0.18 265); }

.btn-glow { position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px oklch(0.45 0.22 264 / 0.30), 0 10px 25px -5px oklch(0.21 0.04 265 / 0.20);
}

.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: var(--cta);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

.tilt-card { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; transform-style: preserve-3d; }
.tilt-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
  box-shadow: 0 20px 60px -20px oklch(0.21 0.04 265 / 0.18);
}

@keyframes fade-up { from { opacity:0; transform: translateY(30px);} to {opacity:1; transform: translateY(0);} }
@keyframes fade-in { from {opacity:0;} to {opacity:1;} }
@keyframes scroll-bounce { 0%,100%{transform:translateY(0); opacity:.4;} 50%{transform:translateY(8px); opacity:1;} }
@keyframes mask-reveal { from{ clip-path: inset(0 100% 0 0);} to{ clip-path: inset(0 0 0 0);} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes split-up { from { transform: translateY(110%); opacity:0;} to { transform: translateY(0); opacity:1;} }
@keyframes draw-line { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

.animate-fade-in { animation: fade-in 1s ease-out both; }
.animate-scroll-bounce { animation: scroll-bounce 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.animate-mask-reveal { animation: mask-reveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
.animate-marquee-slow { animation: marquee 45s linear infinite; }
.animate-marquee-slow:hover { animation-play-state: paused; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal-on-scroll utility (replaces framer-motion whileInView) */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="clip"] { opacity: 1; clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 1.4s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-reveal-delay="1"].is-visible { transition-delay: .08s; }
[data-reveal-delay="2"].is-visible { transition-delay: .16s; }
[data-reveal-delay="3"].is-visible { transition-delay: .24s; }
[data-reveal-delay="4"].is-visible { transition-delay: .32s; }
[data-reveal-delay="5"].is-visible { transition-delay: .40s; }
[data-reveal-delay="6"].is-visible { transition-delay: .48s; }

/* Hero split-text per-letter stagger via inline --d */
.split-char { display: inline-block; transform: translateY(110%); opacity: 0; animation: split-up .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }

/* Mobile menu transition */
.mobile-nav { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1); }
.mobile-nav.open { max-height: 500px; }

/* Hero scroll line */
.scroll-line { height: 40px; width: 1px; background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent); }

/* Typography prose */
.prose h2 { margin-top: 1.5rem; }
.prose p { color: var(--muted-foreground); line-height: 1.7; }

/* PEB SVG draw animation: lines start hidden, animate when in view */
.peb-line { stroke-dasharray: 600; stroke-dashoffset: 600; }
[data-peb-anim].is-visible .peb-line { animation: draw-line 1.4s cubic-bezier(.22,1,.36,1) forwards; }