/* ==========================================================================
   Brigadeur — Production Design System
   Multi-page site with 3D effects, scroll animations, and premium interactions
   ========================================================================== */

/* ─── Design Tokens ─────────────────────────────────────────────────────────
   Identity: volt on graphite. One accent, one neutral family.

   The previous palette was indigo #6366f1 with cyan and pink gradients — the
   single most recognisable "AI default" in web design. Names are kept so the
   five pages need no markup changes; only the values move. Surfaces carry a
   faint green tint so the volt accent sits in the same light as the page
   rather than floating on top of it, and every shadow is tinted with that
   same hue instead of pure black.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — one neutral family, faintly green-tinted */
  --bg-deep: #070806;
  --bg-base: #0c0e0b;
  --bg-elevated: #131610;
  --bg-surface: #1a1e17;
  --bg-surface-hover: #232820;

  --text-primary: #f1f4ec;
  --text-secondary: #a3ab99;
  --text-muted: #6c7365;
  --text-dim: #3d423a;

  /* Brand — one accent. Volt, held off full saturation so it reads
     expensive rather than neon. Everything else stays neutral. */
  --primary: #c7eb45;
  --primary-light: #d9f871;
  --primary-dark: #9cbd2c;
  --primary-rgb: 199, 235, 69;
  --on-primary: #0e1204;

  /* Secondary hues exist only for semantic states — never for decoration.
     Desaturated to sit under the accent, not compete with it. */
  --accent-cyan: #8aa0a6;
  --accent-pink: #d9a08a;
  --accent-green: #8fc46f;
  --accent-amber: #e0b44c;
  --accent-red: #e0705f;

  /* Gradients — off-axis and uneven on purpose; a 135deg two-stop fade is
     the tell of a generated palette. */
  --grad-primary: linear-gradient(118deg, var(--primary-light) 0%, var(--primary) 48%, var(--primary-dark) 100%);
  --grad-hero: linear-gradient(96deg, var(--text-primary) 0%, #e8f5b8 38%, var(--primary) 72%, var(--primary-dark) 100%);
  --grad-glow: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(var(--primary-rgb), 0.13), transparent 72%);

  /* Spacing — the original 1/2/4/8rem scale jumped too coarsely to place
     anything between "tight" and "airy". Intermediate steps added; the
     original values are untouched so existing layouts keep their rhythm. */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-ms: 0.75rem;
  --space-md: 1rem;
  --space-mp: 1.5rem;
  --space-lg: 2rem;
  --space-lp: 3rem;
  --space-xl: 4rem;
  --space-xp: 6rem;
  --space-2xl: 8rem;
  --space-3xl: 12rem;

  /* Typography — Bricolage Grotesque carries real character in display
     sizes and is variable on width as well as weight, which the scroll
     animation uses. Instrument Sans replaces Inter for body. */
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 3rem;
  --text-5xl: 4.5rem;
  --text-6xl: 7rem;
  --text-7xl: 9.5rem;

  /* Radius — containers soften, inner elements stay tight */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 34px;
  --radius-full: 9999px;

  /* Shadows — tinted with the page hue, single light source from above */
  --shadow-sm: 0 1px 2px rgba(6, 8, 5, 0.5);
  --shadow-md: 0 6px 24px rgba(6, 8, 5, 0.55);
  --shadow-lg: 0 18px 52px rgba(6, 8, 5, 0.66);
  --shadow-xl: 0 34px 90px rgba(6, 8, 5, 0.72);
  --shadow-glow: 0 0 42px rgba(var(--primary-rgb), 0.17);
  --shadow-glow-strong: 0 0 74px rgba(var(--primary-rgb), 0.27);
  --shadow-inset-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Motion — expo-out for entrances, spring for anything the pointer drives */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);
  --transition-spring: 600ms var(--ease-spring);

  /* Z-index — a real scale. The cursor was on 9999. */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-modal: 1000;
  --z-cursor: 1100;

  /* 3D */
  --perspective: 1200px;
  --perspective-near: 800px;
}

/* Motion is decoration; content is not. Everything scroll- or pointer-driven
   collapses to a plain fade when the OS asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Reset ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ─── Typography ───────────────────────────────────────────────────────────
   Display sizes ride the width axis as well as weight — Bricolage Grotesque
   is variable on wdth, and a wider cut at hero size is what gives large type
   presence rather than just bulk. Tracking tightens as size grows. */
.heading-hero {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8.5vw, var(--text-6xl));
  font-variation-settings: 'wght' 800, 'wdth' 100, 'opsz' 96;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.heading-1 {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 5vw, var(--text-5xl));
  font-variation-settings: 'wght' 780, 'wdth' 100, 'opsz' 48;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.heading-2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, var(--text-3xl));
  font-variation-settings: 'wght' 720, 'wdth' 96;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.heading-3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

.text-body {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 62ch; /* prose past ~65ch gets hard to track back to */
  text-wrap: pretty;
}

/* Every figure that means something — counters, prices, stats — sits on
   tabular mono so digits don't jitter as they animate. */
.num,
[data-counter] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.text-small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

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

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-narrow {
  max-width: 960px;
}

.section {
  padding: var(--space-2xl) 0;
  position: relative;
}

.section-alt {
  background: var(--bg-elevated);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.btn:hover::before {
  transform: translateX(100%);
}

/* Volt is a light accent — white label on it fails contrast outright.
   Near-black label, and the glow is tinted to the accent, not to black. */
.btn-primary {
  background: var(--grad-primary);
  color: var(--on-primary);
  font-weight: 700;
  box-shadow:
    0 4px 20px rgba(var(--primary-rgb), 0.22),
    var(--shadow-inset-edge);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 34px rgba(var(--primary-rgb), 0.3),
    var(--shadow-glow-strong);
}

/* Pressed feedback — the physical click. Overrides the magnetic transform
   deliberately: release beats follow while the button is held. */
.btn:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 60ms;
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.12);
}

.btn-outline:hover {
  background: var(--bg-surface);
  border-color: var(--primary-light);
  box-shadow: 0 0 20px rgba(199, 235, 69,0.1);
}

.btn-ghost {
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: var(--text-base);
}

.btn-block {
  width: 100%;
}

/* ─── Badge / Tag ─── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.4rem 1rem;
  background: rgba(199, 235, 69,0.1);
  border: 1px solid rgba(199, 235, 69,0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary-light);
  letter-spacing: 0.02em;
}

/* ─── Cards ─── */
.card {
  background: var(--bg-surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-cyan));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(199, 235, 69,0.2);
  box-shadow: 0 20px 50px rgba(6, 8, 5,0.4), var(--shadow-glow);
}

.card:hover::before {
  opacity: 1;
}

.card-3d {
  transform-style: preserve-3d;
  perspective: var(--perspective);
  transition: transform var(--transition-base);
}

/* ─── Glass ─── */
.glass {
  background: rgba(19, 22, 16, 0.7);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.06);
}

.glass-strong {
  background: rgba(19, 22, 16, 0.85);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
}

/* ─── 3D Effects ─── */
.perspective-container {
  perspective: var(--perspective);
  perspective-origin: center center;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.tilt-3d {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.tilt-3d .tilt-inner {
  transform: translateZ(40px);
}

.tilt-3d .tilt-bg {
  transform: translateZ(20px);
}

.tilt-3d .tilt-icon {
  transform: translateZ(60px);
}

/* ─── Magnetic Button ─── */
.magnetic {
  transition: transform var(--transition-fast);
  will-change: transform;
}

/* ─── Custom Cursor ─── */
.cursor-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor-follower.hover {
  width: 50px;
  height: 50px;
  background: rgba(199, 235, 69,0.1);
  border-color: var(--accent-cyan);
}

.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--primary-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
}

@media (pointer: coarse) {
  .cursor-follower, .cursor-dot { display: none; }
}

/* ─── Scroll Animations ─── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-rotate {
  opacity: 0;
  transform: perspective(1000px) rotateX(15deg) translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-rotate.visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0) translateY(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ─── Text Scramble / Reveal ─── */
.scramble-text {
  font-family: var(--font-mono);
}

/* ─── Parallax ─── */
.parallax-slow {
  will-change: transform;
}

.parallax-fast {
  will-change: transform;
}

/* ─── Floating Animation ─── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(2deg); }
  66% { transform: translateY(10px) rotate(-1deg); }
}

.float { animation: float 8s ease-in-out infinite; }
.float-delay-1 { animation-delay: -2s; }
.float-delay-2 { animation-delay: -4s; }
.float-delay-3 { animation-delay: -6s; }

/* ─── Pulse Glow ─── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(199, 235, 69,0.2); }
  50% { box-shadow: 0 0 40px rgba(199, 235, 69,0.4), 0 0 80px rgba(199, 235, 69,0.1); }
}

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

/* ─── Gradient Orbs ─── */
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(40px, 10px) scale(1.02); }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  animation: orb-float 12s ease-in-out infinite;
}

/* ─── Shine Effect ─── */
@keyframes shine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shine {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shine 3s ease-in-out infinite;
}

/* ─── Scroll Progress ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-cyan));
  z-index: 10000;
  transform-origin: left;
  transform: scaleX(0);
}

/* ─── Page Transition ─── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 9998;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition.active {
  transform: translateY(0);
}

.page-transition.exit {
  transform: translateY(-100%);
}

/* ─── Grid System ─── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

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

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: var(--space-xl) 0; }
  .cursor-follower, .cursor-dot { display: none; }
}

/* ─── Utilities ─── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Selection ─── */
::selection {
  background: rgba(199, 235, 69,0.3);
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM SURFACE LAYER
   Appended last so it overrides the base rules above. Everything here is
   depth and texture — the things that separate "has effects" from "feels
   built". No new markup is required for the grain, focus rings or scroll
   reveals; the spotlight and stack utilities are opt-in per element.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Grain ────────────────────────────────────────────────────────────────
   Flat vector surfaces read as sterile at large sizes. A fixed, very low
   opacity noise field sits over the whole page and breaks the flatness
   without ever being consciously visible. Inline SVG so it costs no request. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Ambient light ────────────────────────────────────────────────────────
   A single soft source above the fold, so the volt accent has somewhere to
   have come from. Replaces the three floating blurred orbs, which are the
   most recognisable generated-hero pattern there is. */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  background: var(--grad-glow);
  pointer-events: none;
}

/* ─── True glass ───────────────────────────────────────────────────────────
   Blur alone looks like a screenshot behind frosted plastic. Real glass has
   a bright top edge where light catches the bevel and a darker inner base. */
.glass,
.glass-strong {
  box-shadow:
    var(--shadow-inset-edge),
    inset 0 -1px 0 rgba(6, 8, 5, 0.5),
    var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Spotlight border ─────────────────────────────────────────────────────
   The card edge illuminates under the pointer. --mx/--my are written by the
   interaction engine; with no JS the card simply keeps its static border. */
.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(var(--primary-rgb), 0.55),
    rgba(var(--primary-rgb), 0.08) 38%,
    transparent 65%
  );
  /* Mask the fill so only the 1px ring shows. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 1;
}

.spotlight:hover::before {
  opacity: 1;
}

/* ─── Cards ────────────────────────────────────────────────────────────────
   The stock look — 1px border plus drop shadow plus raised background — is
   the default card everywhere. Depth here comes from the inset top edge and
   a tinted shadow that shares the page hue, not from an outline. */
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 40%),
    var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow-inset-edge), var(--shadow-md);
  transition:
    transform 400ms var(--ease-out),
    box-shadow 400ms var(--ease-out),
    border-color 400ms var(--ease-out);
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--primary-rgb), 0.22);
  box-shadow: var(--shadow-inset-edge), var(--shadow-xl);
}

/* The 2px accent bar that swept across every card on hover was pure
   decoration and fired on all of them at once. Depth carries it instead. */
.card::before {
  display: none;
}

/* ─── Focus ────────────────────────────────────────────────────────────────
   Keyboard users get a real ring everywhere. :focus-visible so it never
   fires on pointer clicks. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: calc(var(--z-cursor) + 1);
  padding: 0.7rem 1.2rem;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--transition-base);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ─── Scroll-driven 3D ─────────────────────────────────────────────────────
   Where the browser supports scroll-driven animations these run entirely off
   the main thread — no scroll listener, no layout read, no jank. The
   IntersectionObserver path in the engine stays as the fallback. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-3d {
      animation: rise-3d linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
      transform-origin: 50% 100%;
    }

    @keyframes rise-3d {
      from {
        opacity: 0;
        transform: perspective(var(--perspective)) translate3d(0, 42px, -90px) rotateX(9deg);
      }
      to {
        opacity: 1;
        transform: perspective(var(--perspective)) translate3d(0, 0, 0) rotateX(0deg);
      }
    }

    /* Hero visual keeps rotating as the page scrolls away beneath it. */
    .scroll-tilt {
      animation: scroll-tilt linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes scroll-tilt {
      from { transform: perspective(var(--perspective)) rotateX(14deg) scale(0.94); }
      50%  { transform: perspective(var(--perspective)) rotateX(0deg) scale(1); }
      to   { transform: perspective(var(--perspective)) rotateX(-9deg) scale(0.97); }
    }
  }
}

/* ─── Sticky card stack ────────────────────────────────────────────────────
   Sections that pin and physically stack over one another as you scroll.
   Each card needs --i (its index) set inline so the offsets step. */
.stack {
  --stack-top: 12vh;
}

.stack-card {
  position: sticky;
  top: calc(var(--stack-top) + (var(--i, 0) * 1.6rem));
  transform-origin: 50% 0%;
  will-change: transform;
}

/* ─── Marquee ──────────────────────────────────────────────────────────────
   Duplicate the track's children in markup; the second copy is aria-hidden. */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-xl);
  padding-right: var(--space-xl);
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* ─── Selection & scrollbar, retuned to the accent ─────────────────────── */
::selection {
  background: var(--primary);
  color: var(--on-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* Coarse pointers get no hover-dependent depth and no custom cursor. */
@media (pointer: coarse) {
  .spotlight::before { display: none; }
  .card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED CHROME — navbar + footer
   These lived in a <style> block inside index.html only, so the nav on
   about / contact / features / pricing rendered unstyled despite using the
   same markup. Moved here so every page picks them up.
   ══════════════════════════════════════════════════════════════════════════ */

.navbar-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 1rem 0;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    padding var(--transition-base);
}

.navbar-main.scrolled {
  background: rgba(12, 14, 11, 0.82);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-ms);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.nav-links-main {
  display: flex;
  gap: var(--space-lg);
}

.nav-links-main a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  position: relative;
  padding: 0.25rem 0;
}

/* Underline grows from the left rather than fading in — cheaper to read
   at a glance, and it animates transform-adjacent rather than layout. */
.nav-links-main a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--transition-base);
}

.nav-links-main a:hover,
.nav-links-main a.active {
  color: var(--text-primary);
}

.nav-links-main a:hover::after,
.nav-links-main a.active::after {
  transform: scaleX(1);
}

.nav-links-main a.active {
  font-weight: 600;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.footer-main {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.footer-col a {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--primary);
}

@media (max-width: 900px) {
  .nav-links-main { display: none; }
  .nav-toggle { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO 3D COMPOSITION
   Each transform-owning layer is a separate element: .hero-visual-depth
   takes the pointer parallax from JS, .dashboard-3d takes the scroll-driven
   tilt from CSS, .dash-frame takes the cursor tilt and spotlight. Collapsing
   these onto one node means the last writer wins and the others vanish.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-visual-depth {
  perspective: var(--perspective);
  transform-style: preserve-3d;
  will-change: transform;
}

.dashboard-3d {
  transform-style: preserve-3d;
}

.dash-frame {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    var(--shadow-inset-edge),
    var(--shadow-xl),
    0 0 90px rgba(var(--primary-rgb), 0.06);
}

/* Specular sweep, written by the engine from pointer position. */
.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  transition: background var(--transition-fast);
}

/* Without scroll-driven animation support the frame still sits at a slight
   angle, so the 3D reads on every browser rather than only the newest. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .dashboard-3d {
      transform: perspective(var(--perspective)) rotateX(6deg) rotateY(-9deg);
    }
  }
}

/* Stat figures are data — mono, tabular, and large enough to read as the
   point of the row rather than as caption text. */
.hero-stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.hero-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}

/* Badge — square-shouldered rather than a pill, and no emoji. */
.hero-badge {
  border-radius: var(--radius-sm) !important;
  background: rgba(var(--primary-rgb), 0.09) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.22) !important;
  color: var(--primary-light) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700 !important;
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 0.55rem;
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.9);
}

/* Trusted row — wordmarks, not emoji. */
.trusted-logo {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 600, 'wdth' 88;
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  color: var(--text-muted);
  transition: color var(--transition-base);
}

.trusted-logo:hover {
  color: var(--text-secondary);
}

.trusted-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE GRID + ICONS
   ══════════════════════════════════════════════════════════════════════════ */

/* Three equal columns is the most generated-looking feature layout there is.
   The lead card — the one capability nobody else has — spans two, so the
   grid has a subject rather than six peers. */
.feature-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-mp);
  align-items: start;
}

.feature-wide {
  grid-column: span 2;
}

.feature-preview-grid .tilt-inner {
  position: relative;
  z-index: 2;
}

.feature-preview-grid .text-small {
  line-height: 1.75;
  max-width: 58ch;
}

/* Stroke icons at one consistent weight, in a tinted well rather than
   floating. Emoji read as placeholder at this size. */
.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-mp);
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  font-size: 0;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-mp);
}

@media (max-width: 1024px) {
  .feature-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-wide { grid-column: span 2; }
  .steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .feature-preview-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEAM + UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */

/* Three real people, so three columns — not a four-up grid with a filler.
   Initials in a squircle rather than emoji avatars or stock portraits. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-mp);
}

.team-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 30%;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.24);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.team-avatar::after { content: none; }

.team-bio {
  margin-top: var(--space-ms);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

.team-card {
  text-align: left;
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Visually hidden but read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRICING + FEATURE LIST DETAIL
   ══════════════════════════════════════════════════════════════════════════ */

/* An excluded line has to read as excluded at a glance, or a tier comparison
   is just two identical lists. Struck through and dimmed, not hidden — what a
   tier does NOT include is half the decision. */
.feature-check.off {
  color: var(--text-dim);
}

.pricing-features li:has(.feature-check.off) {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.18);
}

/* "per person / month" needs its own line; the old "/mo" sat inline. */
.price-period {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
}

.price-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.pricing-badge {
  white-space: nowrap;
}

/* Feature-page list bullets: a small volt square rather than an emoji. */
.feature-list-icon {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary);
  margin-top: 0.55rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.5);
}

.feature-list-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}