/* Set by script.js for the duration of a JS-driven in-page anchor jump —
   kills every decorative transition/animation on the page for that short
   window, since a fast programmatic scroll can cross several scroll-reveal
   sections at once and none of those are meant to be watched mid-flight;
   letting them animate anyway was heavy enough to stall the jump itself. */
html.is-jump-scrolling * {
  transition: none !important;
  animation: none !important;
}

/* ===== Base ===== */
:root {
  --bg: #f7faf6;
  --bg-alt: #edf3ec;
  --card: #ffffff;
  --card-hover: #fbfefa;
  --border: #dde8db;
  --text: #263226;
  --text-dim: #4a5a47;
  --text-dimmer: #6f7c6c;
  --accent: #35704f;
  --accent-2: #a8661f;
  --accent-rgb: 53, 112, 79;
  --accent-2-rgb: 168, 102, 31;
  --shadow-rgb: 38, 50, 38;
  --accent-soft: rgba(53, 112, 79, 0.10);
  --header-bg: rgba(247, 250, 246, 0.85);
  --btn-primary-hover: #2a5a3f;
  --avatar-text: #fdfcf8;
  --radius: 16px;
  --maxw: 1180px;
  --header-height: 72px;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0a0d14;
  --bg-alt: #0f131c;
  --card: #131826;
  --card-hover: #171d2e;
  --border: #232a3b;
  --text: #e8ebf2;
  --text-dim: #9aa4bd;
  --text-dimmer: #6b7690;
  --accent: #5b8cff;
  --accent-2: #22d3b8;
  --accent-rgb: 91, 140, 255;
  --accent-2-rgb: 34, 211, 184;
  --shadow-rgb: 0, 0, 0;
  --accent-soft: rgba(91, 140, 255, 0.12);
  --header-bg: rgba(10, 13, 20, 0.85);
  --btn-primary-hover: #4778f0;
  --avatar-text: #05070c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-align: justify;
}

h1, h2, h3, h4, .faq-q { text-align: left; }

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

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

ul { list-style: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 72px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  background: rgba(var(--accent-2-rgb), 0.09);
  border: 1px solid rgba(var(--accent-2-rgb), 0.25);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }

h2.section-title {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 14px;
}

.section-lead {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 680px;
  margin-bottom: 56px;
}

.section-head { margin-bottom: 48px; }

/* ===== Header ===== */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.logo {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo .dot { color: var(--accent-2); }

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 15px;
  color: var(--text-dim);
}
.nav-links a:hover { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle-icon { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.theme-toggle-icon svg { width: 18px; height: 18px; display: block; }
.theme-toggle:active { transform: scale(0.92); }

@media (prefers-reduced-motion: no-preference) {
  body, .card, header.site, .mobile-nav, .btn, .tag, .eyebrow, .theme-toggle,
  .cta-form input, .cta-form textarea, .price-card, .stack-icon, .avatar {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  }
  .theme-toggle-icon svg { animation: theme-icon-pop 0.35s ease; }
  @keyframes theme-icon-pop {
    from { transform: scale(0.5) rotate(-90deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
  }
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span { width: 22px; height: 2px; background: var(--text); display: block; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--btn-primary-hover); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ===== Hero ===== */
.hero {
  padding-top: 88px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -220px;
  left: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(var(--accent-2-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.15;
  margin-bottom: 24px;
  text-align: left;
}
.hero h1 .accent { color: var(--accent-2); }
.hero-sub {
  font-size: 19px;
  color: var(--text-dim);
  margin-bottom: 20px;
  text-align: left;
}
.hero-sub2 {
  font-size: 16px;
  color: var(--text-dimmer);
  margin-bottom: 40px;
  text-align: left;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; clear: both; }
.hero-lower { display: block; }
.hero-panel {
  position: relative;
  float: right;
  width: clamp(140px, 32vw, 300px);
  aspect-ratio: 4 / 3;
  margin: 6px 0 24px 32px;
  padding: 0;
  overflow: hidden;
  border-radius: clamp(8px, 2vw, 16px);
}
.mock-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 225px;
  transform: scale(calc(clamp(140px, 32vw, 300px) / 300px));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1000px) {
  .hero .wrap {
    position: relative;
    padding-right: calc(24px + clamp(240px, 22vw, 300px) + 48px);
  }
  .hero-lower { display: block; }
  .hero-panel {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    float: none;
    width: clamp(240px, 22vw, 300px);
    margin: 0;
  }
  .mock-frame { transform: scale(calc(clamp(240px, 22vw, 300px) / 300px)); }
  .hero-cta { clear: none; }
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.mock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.mock-url {
  flex: 1;
  height: 14px;
  margin-left: 8px;
  border-radius: 4px;
  background: var(--bg-alt);
}
.mock-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
.mock-row {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.mock-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 4px;
}
.mock-block {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: left center;
}
.mock-block--wide { width: 82%; }
.mock-block--mid { width: 56%; }
.mock-block--narrow { width: 34%; }
.mock-swatch {
  width: 68px; height: 68px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .mock-block, .mock-swatch { opacity: 0; animation: mock-reveal 6s ease-in-out infinite; }
  .mock-block { animation-name: mock-reveal-x; }
  .mock-swatch { animation-name: mock-reveal-scale; }
  .d0 { animation-delay: 0s; }
  .d1 { animation-delay: 0.25s; }
  .d2 { animation-delay: 0.5s; }
  .d3 { animation-delay: 0.75s; }
  .d4 { animation-delay: 1s; }
  .d5 { animation-delay: 1.25s; }
  .d6 { animation-delay: 1.5s; }
  @keyframes mock-reveal-x {
    0% { opacity: 0; transform: scaleX(0); }
    15% { opacity: 1; transform: scaleX(1); }
    85% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(0); }
  }
  @keyframes mock-reveal-scale {
    0% { opacity: 0; transform: scale(0); }
    15% { opacity: 1; transform: scale(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
  }
}

/* ===== Cards grid ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 24px; }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .cta-grid > * { min-width: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.03), 0 12px 28px -16px rgba(var(--shadow-rgb), 0.10);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.04), 0 16px 32px -16px rgba(var(--accent-rgb), 0.20); }

/* ===== Services ===== */
/* Cards fade and rise into place each time they cross into view, and
   reverse back out when they scroll back past that same point — JS
   toggles .reveal-pending on every crossing (guarded by
   prefers-reduced-motion), via IntersectionObserver; this rule just
   defines what that pending state looks like and how it transitions out
   of it. */
.service-card {
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.service-card.reveal-pending {
  opacity: 0;
  transform: translateY(44px);
}
.service-card h3 { font-size: 19px; margin-bottom: 8px; }
.service-card .desc { color: var(--text-dim); font-size: 14.5px; margin-bottom: 18px; }
.tag {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
}

.callout {
  margin-top: 40px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-2-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--radius);
  padding: 26px 30px;
  font-size: 15.5px;
  color: var(--text-dim);
}
.callout strong { color: var(--text); }

/* ===== Cases ===== */
.case-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.case-tag {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.case-card h3 { font-size: 20px; }
.case-block { font-size: 14.5px; }
.case-block .label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dimmer);
  margin-bottom: 4px;
}
.case-block p { color: var(--text-dim); }
.case-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.case-status {
  background: var(--bg-alt);
  border-left: 2px solid var(--text-dimmer);
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 14px;
  font-family: var(--mono);
}
.case-link {
  margin-top: 4px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.case-link:hover { gap: 10px; }

/* ===== Stack ===== */
/* Same scroll-reveal idea as .service-card (fades/rises in and back out on
   every crossing, driven by JS toggling .reveal-pending — see script.js),
   but visually distinct: the icon badge itself "pops" into place with a
   small overshoot, separately from the card's own fade+rise, echoing the
   section's own point — each tool is picked and dropped into place on
   purpose, not just along for the ride. */
.stack-card {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.stack-card.reveal-pending {
  opacity: 0;
  transform: translateY(32px);
}
.stack-card h3 { font-size: 18px; margin-bottom: 10px; display:flex; align-items:center; gap:10px;}
.stack-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.stack-card.reveal-pending .stack-icon {
  transform: scale(0.7);
}
.stack-for { color: var(--text-dim); font-size: 14px; margin-bottom: 10px; }
.stack-when { font-size: 13.5px; color: var(--text-dimmer); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }

/* ===== Process steps (pinned card-stack carousel) =====
   .process-track reserves real scroll distance for the whole transition.
   .process-stage is pinned directly below the sticky header. JavaScript reads
   this exact computed top offset, so the CSS sticky position and scroll
   progress cannot drift apart. Each .process-step is absolutely positioned
   inside .process-viewport and moves only with transform: translateY.

   Cards stack at most 3 deep: the active card rests at full size, and up to
   2 already-passed cards peek out above it as thin strips (--stack-peek
   tall). Anything older collapses onto that same topmost strip and is fully
   covered as newer cards arrive. The peek height (26px) is well inside the
   card's own padding (48px), so a peeking strip only ever shows plain card
   chrome, never inner content — that's what keeps the stack from leaking
   icon/text boxes at the corners.

   The viewport's own box stays exactly the size of the resting stack (front
   card + 2 peeking strips) — that's what reserves scroll track height and
   what the layout sees, so no dead space opens up before the next section.
   The *next* card, while it's rising into place, is allowed to render past
   that box (overflow: visible) rather than being clipped to it. At rest it
   sits directly below the front card, its own top edge touching the front
   card's bottom edge — next in line, in full, not overlapping it and not
   floating off in empty space either — and is fully rendered the whole way
   up, never a half-clipped sliver of cropped text/icon. Cards further back
   than that are hidden outright (visibility, set in JS) until it's their
   turn — nothing to clip in the first place.
   JS mirrors these numbers (--stack-depth=2, --stack-peek=26px) in its own
   constants; keep them in sync if you change either.

   Card height is a CSS custom property, not a hardcoded number: content
   amount is fixed but layout isn't (two columns on wide screens, one
   stacked column under 860px), so the height content actually needs
   changes with viewport width. JS measures the tallest card after layout
   and writes --process-card-h; the 480px fallback only matters before that
   first measurement (or with JS disabled). */
#process .process-track {
  position: relative;
}
#process .process-stage {
  position: sticky;
  top: var(--header-height);
}
#process .section-head {
  padding-top: 16px;
}
#process .process-viewport {
  position: relative;
  overflow: visible;
  height: calc(var(--process-card-h, 480px) + 2 * 26px);
}
.process-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--process-card-h, 480px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
  padding: 48px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 6px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 24px 44px -20px rgba(var(--shadow-rgb), 0.32);
  will-change: transform;
}
.process-step:nth-child(even) { border-top-color: var(--accent-2); }
.process-step:nth-child(even) .process-visual { order: 2; }
.process-step:nth-child(even) .process-text { order: 1; }
.process-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-2-rgb), 0.10));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-visual svg { width: 30%; height: 30%; color: var(--accent); }
.process-step-num {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.process-text h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.process-text p { color: var(--text-dim); font-size: 16.5px; }

/* Reduced-motion is the only thing that drops the scroll-pinned carousel in
   favor of a plain stacked list — some people have explicitly asked their
   OS for less motion, and that's the one case worth honoring unconditionally.
   Screen width on its own no longer disables it: the card-height custom
   property above keeps mobile's stacked single-column layout fully sized. */
@media (prefers-reduced-motion: reduce) {
  #process .process-track { height: auto !important; }
  #process .process-stage { position: static; }
  #process .process-viewport { height: auto; overflow: visible; }
  .process-step {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: 24px;
    box-shadow: none;
    transform: none !important;
  }
}

@media (max-width: 860px) {
  .process-step { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .process-step:nth-child(even) .process-visual,
  .process-step:nth-child(even) .process-text { order: initial; }
  .process-visual { aspect-ratio: 16 / 9; }
}

/* ===== Pricing ===== */
/* Scroll-reveal, same family as .service-card/.stack-card. The featured
   tier additionally gets a slow, gentle ring pulsing outward from its
   badge — a quiet nudge toward the recommended option, not a flashing
   sales banner, so the animation-iteration is long and the ring is subtle. */
.price-card {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-card.reveal-pending {
  opacity: 0;
  transform: translateY(28px);
}
.price-card { text-align: left; position: relative; }
.price-card.featured { border-color: var(--accent); }
.price-card .badge {
  position: absolute;
  top: -12px; right: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
  .price-card.featured:not(.reveal-pending) .badge {
    animation: badge-pulse 2.6s ease-out infinite;
  }
  @keyframes badge-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  }
}
.price-card h3 { font-size: 17px; color: var(--text-dim); font-weight: 600; min-height: 53px; margin-bottom: 10px; }
.price-val { font-family: var(--mono); font-size: 19px; font-weight: 700; white-space: nowrap; margin-bottom: 16px; }
.price-val span { font-size: 14px; color: var(--text-dimmer); font-weight: 400; }
.price-card ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.price-card li { font-size: 14px; color: var(--text-dim); padding-left: 18px; position: relative; }
.price-card li::before { content: '—'; position: absolute; left: 0; color: var(--accent-2); }
.price-note {
  margin-top: 32px;
  color: var(--text-dim);
  font-size: 15px;
}
.price-note strong { color: var(--text); }

/* ===== Why us ===== */
/* Scroll-reveal staggered in numbering order (01 → 06), so the motion
   traces the same order the numbers already read in. */
.why-card {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.why-card.reveal-pending {
  opacity: 0;
  transform: translateY(28px);
}
.why-card h4 { font-size: 17px; margin-bottom: 10px; }
.why-card p { font-size: 14.5px; color: var(--text-dim); }
.why-card .num { font-family: var(--mono); color: var(--text-dimmer); font-size: 13px; margin-bottom: 10px; }

/* ===== Team ===== */
/* Scroll-reveal with the avatar itself popping in slightly ahead of the
   card, like Stack's icon badge — an introduction, not just a fade. */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.team-card.reveal-pending {
  opacity: 0;
  transform: translateY(28px);
}
.avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 0 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: var(--avatar-text);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.team-card.reveal-pending .avatar {
  transform: scale(0.7);
}
.team-card h4 { font-size: 16px; margin-bottom: 3px; }
.team-role { font-size: 13.5px; color: var(--accent-2); margin-bottom: 12px; }
.team-facts { font-size: 13.5px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }

/* ===== FAQ ===== */
/* Every answer stays visible and expanded at all times — no accordion, no
   content hidden behind a click. Each Q&A pair instead fades/rises into
   place on scroll (both directions, like the other sections), plus a thin
   accent rule draws itself in above the question — the one FAQ-specific
   touch, reading as "next question" ticking into place without collapsing
   anything. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}
.faq-item {
  position: relative;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.reveal-pending {
  opacity: 0;
  transform: translateY(20px);
}
.faq-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item:not(.reveal-pending)::before {
  transform: scaleX(1);
}
.faq-q {
  padding: 22px 0 0;
  font-size: 16.5px;
  font-weight: 600;
}
.faq-a {
  color: var(--text-dim);
  font-size: 15px;
}
.faq-a-inner { padding-bottom: 22px; }

/* ===== Final CTA ===== */
.cta-final {
  border-bottom: none;
}
.cta-final h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 40px;
}
/* Scroll-reveal for the final CTA's two halves. Side by side on wide
   screens (.cta-grid is a 2-column row above 980px), so they slide in
   toward each other — form from the left, info card from the right — like
   the two sides of the pitch coming together. Below 980px .cta-grid
   collapses to one stacked column, where a horizontal slide would read as
   sideways motion for no reason (and risks horizontal overflow on a narrow
   screen), so it falls back to the same vertical fade-up used everywhere
   else on the page. */
.cta-form {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-info {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.cta-form.reveal-pending { opacity: 0; transform: translateX(-40px); }
.cta-info.reveal-pending { opacity: 0; transform: translateX(40px); }
@media (max-width: 980px) {
  .cta-form.reveal-pending,
  .cta-info.reveal-pending {
    transform: translateY(28px);
  }
}
.cta-form {
  margin: 0;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.cta-form label { font-size: 13.5px; color: var(--text-dimmer); font-family: var(--mono); display: block; margin-bottom: 8px; }
.cta-form textarea, .cta-form input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  margin-bottom: 16px;
  resize: vertical;
}
.cta-form textarea:focus, .cta-form input:focus { outline: none; border-color: var(--accent); }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-info { padding: 28px; }
.cta-info h3 { font-size: 17px; margin-bottom: 16px; }
.cta-info-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cta-info-list li { font-size: 14.5px; color: var(--text-dim); padding-left: 20px; position: relative; }
.cta-info-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent-2); }
.cta-info-links { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 20px; }
.cta-info-links a { color: var(--accent); font-weight: 600; font-size: 14.5px; }
.cta-info-links a:hover { text-decoration: underline; }

/* ===== Footer ===== */
footer.site {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; }
.footer-links { display: flex; gap: 28px; font-size: 14.5px; color: var(--text-dim); flex-wrap: wrap; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 13.5px; color: var(--text-dimmer); margin-top: 24px; }

/* ===== Case detail page ===== */
.case-hero { padding-top: 56px; padding-bottom: 56px; }
.case-hero .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 14.5px; margin-bottom: 24px; }
.case-hero .back-link:hover { color: var(--accent); }
.case-hero h1 { font-size: clamp(28px, 4vw, 42px); max-width: 780px; margin-bottom: 18px; }
.case-hero .section-lead { margin-bottom: 0; }
.case-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.case-step { display: grid; grid-template-columns: 100px 1fr; gap: 32px; padding: 56px 0; border-bottom: 1px solid var(--border); }
.case-step:last-child { border-bottom: none; }
.case-step .step-num { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--border); }
.case-step h2 { font-size: 24px; margin-bottom: 16px; }
.case-step p { color: var(--text-dim); font-size: 16px; margin-bottom: 14px; }
.case-step ul { display: flex; flex-direction: column; gap: 8px; }
.case-step li { color: var(--text-dim); font-size: 15px; padding-left: 20px; position: relative; }
.case-step li::before { content: '—'; position: absolute; left: 0; color: var(--accent-2); }

.arch-diagram {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 20px;
  overflow-x: auto;
}
.arch-diagram .flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.arch-diagram .node {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text);
  white-space: nowrap;
}
.arch-diagram .arrow { color: var(--accent-2); }

.case-step .case-status { margin-top: 20px; font-size: 15px; padding: 16px 20px; }

/* ===== Responsive ===== */

@media (max-width: 980px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .case-step { grid-template-columns: 1fr; gap: 12px; }
  .cta-grid { grid-template-columns: 1fr; }
}

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

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-cta .btn-ghost { display: none; }
  .grid-3, .grid-4, .grid-2, .grid-5 { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 26px; }
}

@media (max-width: 374px) {
  .hero-panel { display: none; }
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 12px 0; font-size: 16px; color: var(--text-dim); border-bottom: 1px solid var(--border); }