/* OnCatch shared design tokens + components.
   Sibling to OnPath: same warm-paper feel, rust accent. Distinct: editorial serif moments,
   monospace metadata, calmer geometry. */

:root {
  /* Type */
  --font-sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Palette — warm paper, deep ink, rust accent, secondary teal */
  --paper: #FAF7F2;
  --paper-2: #F2EDE4;
  --paper-3: #E8E1D3;
  --ink: #1B1A17;
  --ink-2: #3A3631;
  --muted: #6B6357;
  --muted-2: #7A7263;       /* darkened 2026-05-24 for WCAG AA on paper (was #948B7E = 3.14:1) */
  --rule: #D9D2C2;
  --input-rule: #7A7263;    /* interactive borders — 3:1 non-text contrast */
  --accent: #C2410C;        /* OnCatch rust */
  --accent-soft: #FBE5D6;
  --accent-deep: #9A330A;
  --teal: #0F766E;          /* secondary "triaged/caught" */
  --teal-soft: #D7EFEC;
  --warn: #B45309;
  --ok: #0F6A33;            /* darkened 2026-05-24 for WCAG AA on accent-soft (was #15803D = 4.13:1) */

  /* Density (overridden by Tweaks) */
  --space-unit: 8px;
  --section-y: 120px;
  --container-max: 1240px;
  --container-pad: 32px;

  /* Radius + shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-1: 0 1px 2px rgba(27,26,23,.04), 0 2px 6px rgba(27,26,23,.04);
  --shadow-2: 0 8px 24px rgba(27,26,23,.08), 0 2px 6px rgba(27,26,23,.04);
  --shadow-3: 0 24px 60px rgba(27,26,23,.14), 0 4px 12px rgba(27,26,23,.06);
}

[data-density="compact"]  { --section-y: 72px;  --container-pad: 24px; }
[data-density="comfortable"] { --section-y: 120px; --container-pad: 32px; }
[data-density="spacious"] { --section-y: 168px; --container-pad: 40px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

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

::selection { background: var(--accent); color: var(--paper); }

/* Layout */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-tight { padding-top: calc(var(--section-y) * 0.6); padding-bottom: calc(var(--section-y) * 0.6); }
.section-divider { border-top: 1px solid var(--rule); }

/* Type scale */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 8px; transform: translateY(-1px);
}
.h-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.h-display em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}
.h-1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.h-2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h-3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}
.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--accent); color: var(--paper); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-arrow::after {
  content: "→";
  transition: transform .15s ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.site-header .row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 18px;
}
.brand-mark {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-serif);
  font-size: 18px; line-height: 1;
  font-style: italic;
}
.brand-mark.accent { background: var(--accent); }
.brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.nav { display: flex; gap: 28px; align-items: center; }
.nav a:not(.btn) {
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 450;
}
.nav a:not(.btn):hover { color: var(--accent); }
.nav .btn { padding: 9px 16px; font-size: 14px; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 64px;
  padding-bottom: 32px;
  background: var(--paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-grid h4 {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-grid p { color: var(--muted); font-size: 14px; max-width: 36ch; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}

/* Cards / surfaces */
.surface {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.surface-2 { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg); }

/* Tag */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}
.tag.accent { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 20%, var(--rule)); color: var(--accent-deep); }
.tag.teal { background: var(--teal-soft); border-color: color-mix(in oklab, var(--teal) 20%, var(--rule)); color: var(--teal); }

/* Decorative paper grid */
.paper-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--rule) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--rule) 70%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* Faint catch-net motif */
.net-bg {
  background-image:
    repeating-linear-gradient(45deg, color-mix(in oklab, var(--rule) 65%, transparent) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, color-mix(in oklab, var(--rule) 65%, transparent) 0 1px, transparent 1px 18px);
}

/* Code/tag block */
.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--ink);
  color: #E7E2D6;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid #2a2722;
  overflow: auto;
  line-height: 1.6;
}
.code-block .k { color: #FCB07A; }
.code-block .a { color: #E8C9A0; }
.code-block .s { color: #B6E0A8; }
.code-block .c { color: #948B7E; }

/* Award band — Clutch row + Mercury 100 row, each with section label */
.awards-band {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1080px;
  margin: 0 auto;
}
.awards-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.awards-group-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.awards-group-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.awards-group-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}
.award-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background 0.15s ease, transform 0.15s ease;
}
.award-cell:hover { background: var(--paper-2); }
.award-cell img {
  display: block;
  max-height: 100px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: saturate(0.85);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.award-cell:hover img { filter: saturate(1); transform: translateY(-2px); }
.award-cell-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .awards-band { gap: 40px; }
}
@media (max-width: 480px) {
  .awards-grid { grid-template-columns: 1fr; }
}

/* Stat */
.stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: 8px;
}

/* Mini widget mock (used in hero illustrations) */
.widget-mock {
  width: 320px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-size: 14px;
  color: var(--ink);
}
.widget-mock .wm-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}
.widget-mock .wm-title { font-weight: 600; }
.widget-mock .wm-x { color: var(--muted); }
.widget-mock .wm-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.widget-mock label.wm-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block; margin-bottom: 4px;
}
.widget-mock .wm-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  background: var(--paper);
}
.widget-mock textarea.wm-input { min-height: 60px; resize: vertical; }
.widget-mock .wm-submit {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.widget-mock .wm-foot {
  text-align: center;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.widget-mock .wm-attach {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.widget-mock .wm-attach-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--accent);
  font-size: 14px;
}

/* Services upsell card */
.services-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 56px;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.services-body { display: flex; flex-direction: column; gap: 24px; }
.services-bullets { display: flex; flex-direction: column; gap: 12px; }
.services-bullet {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  font-size: 15.5px; color: var(--ink-2);
  align-items: baseline;
}
.services-bullet .mono { color: var(--accent); font-weight: 600; }
.services-bullet b { color: var(--ink); font-weight: 600; }

/* Roadmap grid */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.roadmap-cell {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
@media (max-width: 900px) {
  .services-grid, .roadmap-grid { grid-template-columns: 1fr; }
  .services-card { padding: 32px; }
}

/* Hide-section utility tied to Tweaks */
.section[data-hidden="true"] { display: none; }

/* Pricing card — 4 tiers, responsive */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .price-grid { grid-template-columns: 1fr; }
}
.price-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.price-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.price-card.featured .muted { color: var(--paper-3); }
.price-amount {
  font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
}
.price-amount span { font-size: 16px; font-weight: 400; color: var(--muted); }
.price-card.featured .price-amount span { color: var(--paper-3); }
.price-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.price-features li { display: flex; gap: 10px; align-items: flex-start; }
.price-features li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  width: 14px; flex-shrink: 0;
}
.price-card.featured .price-features li::before { color: var(--paper); }

/* ============================================================
   Accessibility foundation (added 2026-05-24, Wave 1)
   ============================================================ */

/* Visually hidden but available to screen readers. Used for skip-link,
   form labels that don't have a visible counterpart, and aria-described content. */
.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;
}
.sr-only-focusable:focus-visible {
  position: static;
  width: auto; height: auto;
  margin: 0; clip: auto;
  white-space: normal;
}

/* Skip to main content — first focusable element on every page */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: 14px;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Global keyboard focus indicator — every interactive element gets one */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Higher-contrast focus on dark backgrounds */
.cta-band *:focus-visible,
.price-card.featured *:focus-visible {
  outline-color: var(--paper);
}

/* Respect the user's reduced-motion preference */
@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;
  }
}

/* ============================================================
   Mobile navigation (added 2026-05-24, Wave 1)
   ============================================================ */

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.nav-toggle .bars span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .15s ease, opacity .15s ease;
}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* Hide the full nav by default on mobile; reveal when open */
  .site-header .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px var(--container-pad);
    box-shadow: var(--shadow-2);
  }
  .site-header[data-mobile-open="true"] .nav {
    display: flex;
  }
  .site-header .nav a:not(.btn) {
    padding: 12px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
  }
  .site-header .nav a:not(.btn):last-of-type {
    border-bottom: none;
  }
  .site-header .nav .btn {
    margin-top: 12px;
    justify-content: center;
  }
}

/* ============================================================
   Input border contrast (added 2026-05-24, Wave 1)
   ============================================================ */
.signup-input,
.wm-input {
  border-color: var(--input-rule);
}

/* ============================================================
   Hero bug-catching stage (added 2026-05-24, Wave 1 hero rewrite)
   ============================================================ */

/* Right-column visual in the hero-split layout — centered within the grid
   column (was margin-left:auto which pushed it to the far right and created
   extra whitespace between the text column and the SVG). */
.hero-stage-bugs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.hero-stage-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Pulse rings around the widget FAB — two concentric rings, staggered */
.hero-fab-pulse {
  transform-origin: center;
  animation: hero-fab-pulse 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.hero-fab-pulse-1 { animation-delay: 0s; }
.hero-fab-pulse-2 { animation-delay: -1.3s; }

@keyframes hero-fab-pulse {
  0%   { transform: scale(0.7); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Each bug marker has a unique catch animation that moves it toward the
   widget FAB (positioned at SVG coord 240, 240). Animations are staggered
   with negative delays so the loop appears continuous instead of all firing
   at once. */
.hero-bug { transform-origin: center; }

.hero-bug-1 { animation: catch-bug-1 7s ease-in-out infinite; animation-delay: 0s; }
.hero-bug-2 { animation: catch-bug-2 7s ease-in-out infinite; animation-delay: -1.2s; }
.hero-bug-3 { animation: catch-bug-3 7s ease-in-out infinite; animation-delay: -2.4s; }
.hero-bug-4 { animation: catch-bug-4 7s ease-in-out infinite; animation-delay: -3.6s; }
.hero-bug-5 { animation: catch-bug-5 7s ease-in-out infinite; animation-delay: -4.8s; }
.hero-bug-6 { animation: catch-bug-6 7s ease-in-out infinite; animation-delay: -6.0s; }

/* Each bug's keyframe — starting at its origin (per the SVG cx/cy) and
   ending at the FAB center (240, 240). Subtle wobble in the middle. */
@keyframes catch-bug-1 {
  0%   { transform: translate(0, 0)        scale(0.4); opacity: 0; }
  12%  { transform: translate(0, 0)        scale(1);   opacity: 1; }
  70%  { transform: translate(80px, 70px)  scale(0.8); opacity: 0.85; }
  92%  { transform: translate(178px, 158px) scale(0.3); opacity: 0; }
  100% { transform: translate(180px, 160px) scale(0);   opacity: 0; }
}
@keyframes catch-bug-2 {
  0%   { transform: translate(0, 0)         scale(0.4); opacity: 0; }
  12%  { transform: translate(0, 0)         scale(1);   opacity: 1; }
  70%  { transform: translate(-100px, 60px) scale(0.8); opacity: 0.85; }
  92%  { transform: translate(-158px, 138px) scale(0.3); opacity: 0; }
  100% { transform: translate(-160px, 140px) scale(0);   opacity: 0; }
}
@keyframes catch-bug-3 {
  0%   { transform: translate(0, 0)         scale(0.4); opacity: 0; }
  12%  { transform: translate(0, 0)         scale(1);   opacity: 1; }
  70%  { transform: translate(80px, -90px)  scale(0.8); opacity: 0.85; }
  92%  { transform: translate(158px, -138px) scale(0.3); opacity: 0; }
  100% { transform: translate(160px, -140px) scale(0);   opacity: 0; }
}
@keyframes catch-bug-4 {
  0%   { transform: translate(0, 0)         scale(0.4); opacity: 0; }
  12%  { transform: translate(0, 0)         scale(1);   opacity: 1; }
  70%  { transform: translate(-100px, -80px) scale(0.8); opacity: 0.85; }
  92%  { transform: translate(-168px, -118px) scale(0.3); opacity: 0; }
  100% { transform: translate(-170px, -120px) scale(0);   opacity: 0; }
}
@keyframes catch-bug-5 {
  0%   { transform: translate(0, 0)        scale(0.4); opacity: 0; }
  12%  { transform: translate(0, 0)        scale(1);   opacity: 1; }
  70%  { transform: translate(120px, 10px) scale(0.8); opacity: 0.85; }
  92%  { transform: translate(198px, 0px)  scale(0.3); opacity: 0; }
  100% { transform: translate(200px, 0px)  scale(0);   opacity: 0; }
}
@keyframes catch-bug-6 {
  0%   { transform: translate(0, 0)         scale(0.4); opacity: 0; }
  12%  { transform: translate(0, 0)         scale(1);   opacity: 1; }
  70%  { transform: translate(-130px, 10px) scale(0.8); opacity: 0.85; }
  92%  { transform: translate(-198px, 18px) scale(0.3); opacity: 0; }
  100% { transform: translate(-200px, 20px) scale(0);   opacity: 0; }
}

/* Respect prefers-reduced-motion — show the static composition without animation */
@media (prefers-reduced-motion: reduce) {
  .hero-fab-pulse { animation: none; opacity: 0.2; transform: scale(1); }
  .hero-bug,
  .hero-bug-1, .hero-bug-2, .hero-bug-3,
  .hero-bug-4, .hero-bug-5, .hero-bug-6 { animation: none; opacity: 0.9; }
}

/* Mobile: stack the hero on narrower screens — sections.css already handles
   .hero-split at <900px, but the stage needs a max-width cap on mobile */
@media (max-width: 900px) {
  .hero-stage-bugs { max-width: 380px; margin: 24px auto 0; }
}