@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.ttf') format('truetype'); }

:root {
  --bg: #e8e8e8;
  --bg-light: #f0f0f0;
  --dark: #141414;
  --text: #1a1a1a;
  --text-muted: #7a7a7a;
  --accent: #4a7cff;
  --accent-light: #6b9aff;
  --divider: rgba(0,0,0,0.08);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { max-width: 100vw; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ==================== NAV ==================== */
#navbar {
  background: transparent;
  transition: background 0.4s, border-color 0.4s;
}
#navbar.scrolled {
  background: rgba(232, 232, 232, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider);
}

/* ==================== GRID LINES ==================== */
/* Subtle vertical guides behind all content */
.grid-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.grid-lines-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.grid-lines-col {
  width: 1px;
  background: rgba(0,0,0,0.045);
}

/* All sections sit above the grid lines */
body > section, body > nav, body > footer {
  position: relative;
  z-index: 1;
}

/* ==================== ACCENT TEXT ==================== */
.text-accent {
  color: var(--accent);
}

/* ==================== SCROLL ANIMATIONS ==================== */
/* Long, smooth, buttery — inspired by Raine/AD */

.reveal {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: none; }

@media (min-width: 768px) {
  .reveal-left { transform: translateX(-5rem); }
  .reveal-right { transform: translateX(5rem); }
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible { opacity: 1; transform: none; }

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.4s; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.6s; opacity: 1; transform: none; }

/* Delay utilities */
.delay-1 { transition-delay: 0.15s !important; }
.delay-2 { transition-delay: 0.3s !important; }
.delay-3 { transition-delay: 0.5s !important; }

/* ==================== MOCKUP ANIMATIONS ==================== */
.mock-slider-line { animation: slider-sweep 4s ease-in-out infinite; }
.mock-after-reveal { clip-path: inset(0 0 0 50%); animation: reveal-sweep 4s ease-in-out infinite; }
@keyframes slider-sweep { 0%, 100% { left: 30%; } 50% { left: 70%; } }
@keyframes reveal-sweep { 0%, 100% { clip-path: inset(0 70% 0 0); } 50% { clip-path: inset(0 30% 0 0); } }

/* ==================== FAQ ==================== */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.open .faq-content { max-height: 20rem; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ==================== DARK SECTIONS ==================== */
.dark-section {
  background: var(--dark);
  color: #fff;
}