/* ═══════════════════════════════════════════════════════════
   RightClick:AI — Shared Site CSS
   Tokens, reset, motion, focus, buttons, nav, reveal, footer
   Source of truth: this file. Per-page styles stay inline.
═══════════════════════════════════════════════════════════ */

/* ═════════════════════
   1. TOKENS
═════════════════════ */
:root {
  /* Surfaces */
  --bg: #FAFAF7;
  --bg-warm: #F3F1EB;
  --bg-dark: #08100A;
  --surface-dark-elevated: #0F1A12;

  /* Ink (light surfaces) */
  --ink: #0D120F;
  --ink-mid: #374840;
  --ink-muted: #6B7D74;
  --ink-faint: #8A968F; /* lifted from #B8C4BE for AA contrast on bg */

  /* Ink on dark surfaces */
  --on-dark-strong: rgba(255, 255, 255, 0.92);
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-mute: rgba(255, 255, 255, 0.58);
  --on-dark-faint: rgba(255, 255, 255, 0.40);
  --on-dark-deco: rgba(255, 255, 255, 0.18);

  /* Brand accent */
  --accent: #15803D;
  --accent-hover: #166534;
  --accent-light: #F0FDF4;
  --accent-on-dark: #6FBF8E;
  --accent-glow: rgba(21, 128, 61, 0.22);
  --accent-tint-08: rgba(21, 128, 61, 0.08);
  --accent-tint-14: rgba(21, 128, 61, 0.14);

  /* Borders */
  --border: rgba(13, 18, 15, 0.07);
  --border-mid: rgba(13, 18, 15, 0.12);
  --border-on-dark: rgba(255, 255, 255, 0.07);
  --border-on-dark-mid: rgba(255, 255, 255, 0.14);

  /* States (dashboard mock palette) */
  --state-error: #DC2626;
  --state-error-on-dark: #F87171;
  --state-warn-text: #92400E;
  --state-warn-tint: rgba(251, 191, 36, 0.12);

  /* Type */
  --font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --max-w: 1160px;
  --pad-x: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 10vw, 128px);

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-pill: 20px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* signature curve */
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1); /* hover/active */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Durations */
  --dur-press: 120ms;
  --dur-fast: 180ms;
  --dur-hover: 220ms;
  --dur-panel: 320ms;
  --dur-reveal: 650ms;
}

/* ═════════════════════
   2. RESET
═════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ═════════════════════
   3. FOCUS / A11Y
═════════════════════ */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.bg-dark :focus-visible,
[data-on-dark] :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Skip link — appears only on keyboard focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus-visible { top: 16px; outline-offset: 2px; }

/* ═════════════════════
   4. 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;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ═════════════════════
   5. LAYOUT UTILITIES
═════════════════════ */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

section { padding: var(--section-y) 0; }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.eyebrow-on-dark { color: var(--accent-on-dark); }

/* ═════════════════════
   6. REVEAL ON SCROLL
═════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }
.reveal-d4 { transition-delay: 240ms; }
.reveal-d5 { transition-delay: 300ms; }

/* ═════════════════════
   7. BUTTONS
   All have :active press feedback. All hover effects gated by hover-capable pointer.
═════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background var(--dur-hover) var(--ease-snap),
    color var(--dur-hover) var(--ease-snap),
    border-color var(--dur-hover) var(--ease-snap),
    transform var(--dur-press) var(--ease-snap),
    box-shadow var(--dur-hover) var(--ease-snap);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 13px 28px;
}
.btn-primary .btn-arrow { transition: transform var(--dur-hover) var(--ease-snap); }

.btn-ghost {
  background: transparent;
  color: var(--ink-mid);
  border-color: var(--border-mid);
  padding: 12px 24px;
  font-weight: 500;
  gap: 6px;
}

.btn-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-strong);
  border-color: rgba(255, 255, 255, 0.14);
  padding: 13px 28px;
}

.btn-white {
  background: #fff;
  color: var(--ink);
  padding: 14px 32px;
  font-weight: 700;
  width: 100%;
}

/* Hover effects only on hover-capable devices to prevent sticky tap-hover on touch */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--accent-glow);
  }
  .btn-primary:hover .btn-arrow { transform: translateX(3px); }

  .btn-ghost:hover {
    color: var(--ink);
    border-color: var(--ink-faint);
    background: var(--bg-warm);
  }

  .btn-dark:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.24);
  }

  .btn-white:hover {
    background: #f5f5f3;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  }
}

/* Press feedback on every button — cross-device */
.btn:active { transform: scale(0.985); }
.btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn-white:active { transform: translateY(0) scale(0.985); }

/* ═════════════════════
   8. NAV
═════════════════════ */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  transition:
    background var(--dur-panel) var(--ease-out),
    box-shadow var(--dur-panel) var(--ease-out);
}
nav.site-nav.scrolled {
  background: rgba(250, 250, 247, 0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-logo-icon { color: var(--accent); flex-shrink: 0; }
.nav-logo span { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-mid);
  transition: color var(--dur-hover) var(--ease-snap);
  padding: 6px 0;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--ink); }
}
.nav-links a:active { color: var(--accent); }

.nav-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid rgba(21, 128, 61, 0.3);
  padding: 11px 20px;
  border-radius: var(--r-sm);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition:
    background var(--dur-hover) var(--ease-snap),
    color var(--dur-hover) var(--ease-snap),
    border-color var(--dur-hover) var(--ease-snap),
    transform var(--dur-press) var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
}
.nav-cta:active { transform: scale(0.98); }

/* Mobile menu */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap);
}
.nav-toggle:active { transform: scale(0.96); }

.nav-toggle-line {
  position: relative;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out);
}
.nav-toggle-line::before,
.nav-toggle-line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  transition: transform var(--dur-panel) var(--ease-out), top var(--dur-panel) var(--ease-out);
}
.nav-toggle-line::before { top: -6px; }
.nav-toggle-line::after { top: 6px; }

nav.site-nav.menu-open .nav-toggle-line { background: transparent; }
nav.site-nav.menu-open .nav-toggle-line::before { top: 0; transform: rotate(45deg); }
nav.site-nav.menu-open .nav-toggle-line::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(250, 250, 247, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-mid);
  padding: 12px var(--pad-x) 24px;
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dur-panel) var(--ease-out),
    opacity var(--dur-panel) var(--ease-out);
  z-index: 89;
}
nav.site-nav.menu-open + .mobile-menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .nav-cta { margin-top: 16px; width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ═════════════════════
   9. SHARED ANIMATIONS
═════════════════════ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@keyframes ring-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═════════════════════
   10. FOOTER
═════════════════════ */
footer.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border-on-dark);
  padding: 28px 0;
  color: var(--on-dark-faint);
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-dark-mute);
}
.footer-logo span { color: var(--accent-on-dark); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a {
  font-size: 13px;
  color: var(--on-dark-faint);
  transition: color var(--dur-hover) var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color: var(--on-dark); }
}
.footer-copy { font-size: 12.5px; color: var(--on-dark-deco); }
.footer-email {
  font-size: 13px;
  color: var(--on-dark-faint);
  transition: color var(--dur-hover) var(--ease-snap);
}
@media (hover: hover) and (pointer: fine) {
  .footer-email:hover { color: var(--on-dark); }
}