:root {
  /* ── Semantic colors (shadcn-inspired) ────────────────────────────────── */
  --color-primary:            #FF6B2B;
  --color-primary-foreground: #FFFFFF;
  --color-secondary:          #1B2A4A;
  --color-secondary-foreground: #FFFFFF;
  --color-accent:             #E55A1A;
  --color-accent-foreground:    #FFFFFF;
  --color-muted:              #6B7280;
  --color-muted-foreground:   #6B7280;
  --color-destructive:        #DC2626;
  --color-destructive-foreground: #FFFFFF;

  /* Surfaces */
  --color-background:   #F9FAFB;
  --color-foreground:   #1A1A1A;
  --color-card:         #FFFFFF;
  --color-card-foreground: #1A1A1A;

  /* Borders & inputs */
  --color-border: #E5E7EB;
  --color-input:  #E5E7EB;

  /* Focus ring */
  --color-ring: #FF6B2B;

  /* ── Legacy aliases ───────────────────────────────────────────────────── */
  --color-text:        var(--color-foreground);
  --color-text-muted:  var(--color-muted);
  --color-bg-light:    var(--color-background);
  --color-bg-dark:     var(--color-secondary);
  --color-white:       #FFFFFF;
  --color-accent-dark: var(--color-accent);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-primary:   'Inter', sans-serif;
  --font-heading:   'Syne', sans-serif;
  --font-mono:      'Geist Mono', monospace;
  --font-size-base: 16px;

  /* ── Font sizes ───────────────────────────────────────────────────────── */
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --spacing-section:  96px;
  --spacing-card-pad: 32px;

  /* ── Animation ────────────────────────────────────────────────────────── */
  --transition-speed: 300ms;
  --transition-ease:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Border radius ────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ── Border widths ────────────────────────────────────────────────────── */
  --border-width-default: 1px;
  --border-width-2:       2px;
  --border-width-4:       4px;

  /* ── Container max widths ─────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1400px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
}

/* ── Site navigation ─────────────────────────────────────────────── */
#site-nav {
  transition: background-color var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease),
              backdrop-filter var(--transition-speed) var(--transition-ease),
              top var(--transition-speed) var(--transition-ease),
              left var(--transition-speed) var(--transition-ease),
              right var(--transition-speed) var(--transition-ease),
              border-radius var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease);
}

.nav-transparent {
  background: transparent;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.nav-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  top: 0.5rem !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
}

.nav-transparent .nav-link,
.nav-transparent .nav-logo {
  color: var(--color-white);
}

.nav-scrolled .nav-link,
.nav-scrolled .nav-logo {
  color: var(--color-text);
}

.nav-link {
  transition: color var(--transition-speed) var(--transition-ease);
}

.nav-link:hover {
  color: var(--color-accent);
}

/* Mobile full-screen overlay menu */
.nav-mobile-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity var(--transition-speed) var(--transition-ease),
              visibility var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
}

.nav-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Social proof marquee ─────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee 25s linear infinite;
}

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

/* ── Scroll progress bar ────────────────────────────────────────── */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  z-index: 9999;
  width: 0%;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
#scrollProgress.visible {
  opacity: 1;
}