/* Deventral marketing site styles */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

/* ---------- Layout primitives ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Top nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav.scrolled {
  border-bottom-color: var(--border-subtle);
  background: rgba(255,255,255,0.86);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
}
.brand-mark {
  width: 28px;
  height: 28px;
  position: relative;
}
.brand-name {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--fg-1); background: var(--bg-subtle); text-decoration: none; }
.nav-link.active { color: var(--fg-brand); }
.nav-cta {
  margin-left: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform 80ms var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}
.btn-primary {
  background: var(--indigo-500);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--indigo-600); }
.btn-primary:active { background: var(--indigo-700); }
.btn-secondary {
  background: var(--white);
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(2px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 160px 0 120px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  left: 50%;
  top: -200px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(48,79,254,0.18) 0%, rgba(48,79,254,0.06) 35%, transparent 65%);
  filter: blur(20px);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  margin-bottom: 28px;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(48,79,254,0.18);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  margin: 0 0 24px;
}
.hero h1 .accent {
  color: var(--indigo-500);
}
.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 560px;
  margin: 0 0 36px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* ============================================================
   HERO VISUAL — Tool-building pipeline
   ============================================================
   Visualises the Deventral product engine: workflow inputs flow
   in (chips), get processed by 4 pipeline stages
   (Discover→Assemble→Build→Launch), a "tool" gets compiled in a
   build card, a log streams events, and a finished tool flies out.
   ============================================================ */
.hero-visual {
  position: relative;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hv-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 480px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hv-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Window chrome */
.hv-chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  z-index: 1;
}
.hv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-200);
}
.hv-dot:nth-child(1) { background: #FF5F57; }
.hv-dot:nth-child(2) { background: #FEBC2E; }
.hv-dot:nth-child(3) { background: #28C840; }
.hv-chrome-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  margin-left: 12px;
}
.hv-chrome-build {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--indigo-500);
  letter-spacing: 0.04em;
  margin-left: auto;
  padding: 2px 8px;
  background: var(--indigo-50);
  border-radius: var(--radius-pill);
}

/* Pipeline */
.hv-pipeline {
  --hv-icon-size: 40px;
  --hv-pad-top: 28px;
  --hv-pad-x: 16px;
  --hv-pad-bottom: 20px;
  --hv-cols: 5;
  --hv-pulse-w: 60px;
  --hv-stage-half: calc((100% - 2 * var(--hv-pad-x)) / (var(--hv-cols) * 2));
  --hv-icon-cy: calc(var(--hv-pad-top) + var(--hv-icon-size) / 2);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--hv-cols), 1fr);
  padding: var(--hv-pad-top) var(--hv-pad-x) var(--hv-pad-bottom);
  z-index: 1;
}
.hv-rail {
  position: absolute;
  left: calc(var(--hv-pad-x) + var(--hv-stage-half));
  right: calc(var(--hv-pad-x) + var(--hv-stage-half));
  top: calc(var(--hv-icon-cy) - 1px);
  height: 2px;
  background: var(--ink-100);
  border-radius: 2px;
}
.hv-pulse {
  position: absolute;
  left: calc(var(--hv-pad-x) + var(--hv-stage-half));
  top: calc(var(--hv-icon-cy) - 4px);
  width: var(--hv-pulse-w);
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--indigo-500), transparent);
  filter: blur(1px);
  animation: hv-rail-pulse 10s linear infinite;
}
@keyframes hv-rail-pulse {
  0% { left: calc(var(--hv-pad-x) + var(--hv-stage-half)); opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: calc(100% - var(--hv-pad-x) - var(--hv-stage-half) - var(--hv-pulse-w)); opacity: 0; }
}
.hv-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.hv-stage-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--fg-3);
  display: grid;
  place-items: center;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.hv-stage-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  margin-top: 4px;
  transition: color var(--dur-base) var(--ease-out);
}
.hv-stage-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.hv-stage.is-active .hv-stage-icon {
  background: var(--indigo-500);
  border-color: var(--indigo-500);
  color: var(--white);
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}
.hv-stage.is-active .hv-stage-label {
  color: var(--fg-1);
}
.hv-stage.is-done .hv-stage-icon {
  background: var(--indigo-50);
  border-color: var(--indigo-200);
  color: var(--indigo-500);
}

/* Build card — the tool being assembled */
.hv-build {
  padding: 0 24px 16px;
  z-index: 1;
  position: relative;
}
.hv-build-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: opacity var(--dur-slow) var(--ease-out),
              background var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.hv-build.is-discover .hv-build-card {
  opacity: 0;
}

/* Discover (workflow scan) card — overlays the build card area at its native height */
.hv-discover-card {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  bottom: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
  z-index: 2;
}
.hv-build:not(.is-discover) .hv-discover-card {
  opacity: 0;
  pointer-events: none;
}
.hv-discover-card .hv-build-head {
  margin-bottom: 6px;
}
.hv-build-mark--scan {
  background: var(--indigo-500);
  position: relative;
}
.hv-build-mark--scan::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 50%;
}
.hv-d-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hv-d-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.hv-d-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hv-d-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-200);
  flex-shrink: 0;
  transition: background 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.hv-d-step.is-visible .hv-d-dot {
  background: var(--indigo-500);
  box-shadow: 0 0 0 3px var(--indigo-50);
}
.hv-d-label {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.25;
}
.hv-d-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-500);
  line-height: 1.3;
}
.hv-build-card.b-ready {
  background: var(--white);
  border-color: var(--indigo-200);
  box-shadow: var(--shadow-brand);
}
.hv-build-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.hv-build-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink-200);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-slow) var(--ease-out);
}
.hv-build-card.b-ready .hv-build-mark {
  background: var(--indigo-500);
}
.hv-build-card.b-ready .hv-build-mark::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  bottom: 2px;
  left: 2px;
}
.hv-build-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.02em;
  flex: 1;
}
.hv-build-card.b-ready .hv-build-name {
  color: var(--fg-1);
  font-weight: 600;
}
.hv-build-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border-subtle);
}
.hv-build-card.b-ready .hv-build-status {
  color: var(--success);
  background: var(--success-bg);
  border-color: transparent;
}
.hv-build-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hv-build-row {
  height: 7px;
  border-radius: 3px;
  background: var(--ink-100);
  width: 0;
  transition: width var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
}
.hv-build-card.b-progress .hv-build-row.r0 { width: 70%; background: var(--ink-200); }
.hv-build-card.b-progress .hv-build-row.r1 { width: 50%; background: var(--ink-200); }
.hv-build-card.b-progress .hv-build-row.r2 { width: 80%; background: var(--ink-200); }
.hv-build-card.b-ready .hv-build-row.r0 { width: 90%; background: var(--indigo-200); }
.hv-build-card.b-ready .hv-build-row.r1 { width: 70%; background: var(--indigo-100); }
.hv-build-card.b-ready .hv-build-row.r2 { width: 100%; background: var(--indigo-200); }

/* Activity log */
.hv-log {
  margin: 0 24px 24px;
  padding: 12px 14px;
  background: var(--black);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  z-index: 1;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.hv-log-line {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink-300);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.hv-log-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hv-log-time { color: var(--ink-500); width: 36px; flex-shrink: 0; }
.hv-log-tag {
  color: var(--indigo-300);
  background: rgba(48,79,254,0.14);
  padding: 0 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.hv-log-tag.tag-ok { color: #6BD7A8; background: rgba(19,138,92,0.18); }
.hv-log-msg { color: var(--ink-200); }

/* Floating chips — inputs flying in, tool flying out */
.hv-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-1);
  box-shadow: var(--shadow-md);
  z-index: 3;
  white-space: nowrap;
}
.hv-chip .chip-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--indigo-50);
  color: var(--indigo-500);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hv-chip .chip-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* Reusable AI capability chips — appear timed to pipeline stages,
   sit just outside the LEFT edge so they don't cover inner content.
   Cycle = 10s, 5 stages of 20% each:
   Discover 0–20% · Build 20–40% · Launch 40–60% · Learn 60–80% · Improve 80–100% */

/* Product design — visible during Build (20–40%) */
.hv-chip-cap.chip-design {
  top: 92px;
  left: -76px;
  opacity: 0;
  animation: chip-cap-design 10s var(--ease-out) infinite;
}
@keyframes chip-cap-design {
  0%, 18%   { transform: translateX(-20px); opacity: 0; }
  24%       { transform: translateX(0);     opacity: 1; }
  38%       { transform: translateX(4px);   opacity: 1; }
  44%, 100% { transform: translateX(-20px); opacity: 0; }
}

/* Customer feedback — drops in from the TOP during Learn (60–80%) */
.hv-chip-cap.chip-feedback {
  top: -28px;
  left: 50%;
  margin-left: -90px;
  opacity: 0;
  animation: chip-cap-feedback 10s var(--ease-out) infinite;
}
@keyframes chip-cap-feedback {
  0%, 58%   { transform: translateY(-20px); opacity: 0; }
  64%       { transform: translateY(0);     opacity: 1; }
  78%       { transform: translateY(4px);   opacity: 1; }
  84%, 100% { transform: translateY(-20px); opacity: 0; }
}

/* Fast iterations — slides in from the BOTTOM-LEFT during Improve (80–100%) */
.hv-chip-cap.chip-iterate {
  bottom: -28px;
  left: -56px;
  top: auto;
  right: auto;
  opacity: 0;
  animation: chip-cap-iterate 10s var(--ease-out) infinite;
}
@keyframes chip-cap-iterate {
  0%, 78% { transform: translate(-20px, 20px); opacity: 0; }
  84%     { transform: translate(0, 0);        opacity: 1; }
  98%     { transform: translate(4px, -4px);   opacity: 1; }
  100%    { transform: translate(-20px, 20px); opacity: 0; }
}

/* Finished tool flies out at "Launch" (~46%) and stays through Learn */
.hv-chip-out.chip-shipped {
  bottom: 36px;
  right: -48px;
  background: var(--indigo-500);
  color: var(--white);
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-brand);
  opacity: 0;
  animation: chip-out 10s var(--ease-out) infinite;
}
.hv-chip-out .chip-icon { background: rgba(255,255,255,0.2); color: var(--white); }
.hv-chip-out .chip-meta { color: rgba(255,255,255,0.7); }
@keyframes chip-out {
  0%, 40% { transform: translateX(-20px) scale(0.9); opacity: 0; }
  46%     { transform: translateX(0) scale(1);       opacity: 1; }
  78%     { transform: translateX(0) scale(1);       opacity: 1; }
  84%     { transform: translateX(40px) scale(0.95); opacity: 0; }
  100%    { transform: translateX(40px) scale(0.95); opacity: 0; }
}

/* Remove the now-redundant chip-out block below; it's defined in the cap section. */

/* ---------- Section scaffold ---------- */
section {
  padding: 120px 0;
  position: relative;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--indigo-500);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  margin: 0 0 24px;
  max-width: 820px;
}
.section-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 720px;
  margin: 0;
}
.section-head {
  margin-bottom: 64px;
}
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---------- What we do ---------- */
.what-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.what-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.what-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.what-card .icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--indigo-50);
  color: var(--indigo-500);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.what-card h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.what-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* ---------- Portfolio ---------- */
.portfolio-bg {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--ink-300);
  text-decoration: none;
}
.product-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.product-mark {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.product-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-live { background: var(--success-bg); color: var(--success); }
.status-live .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(19,138,92,0.18); }
.status-beta { background: var(--warning-bg); color: var(--warning); }
.status-beta .dot { background: var(--warning); }
.status-soon { background: var(--ink-100); color: var(--ink-600); }
.status-soon .dot { background: var(--ink-500); }

.product-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.product-card .pc-problem {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0 0 24px;
}
.product-card .pc-meta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card .pc-for {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.4;
}
.product-card .pc-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-brand);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.product-card .pc-cta .arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.product-card:hover .pc-cta .arrow { transform: translateX(3px); }

/* ---------- Engine: process flow ---------- */
.engine {
  background: var(--black);
  color: var(--white);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.engine::before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  left: 75%;
  top: -200px;
  background: radial-gradient(circle, rgba(48,79,254,0.35) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.engine-mark {
  position: absolute;
  top: 40px;
  right: 176px;
  width: 200px;
  height: auto;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
@media (max-width: 720px) {
  .engine-mark { width: 120px; top: 16px; right: 16px; opacity: 0.14; }
}
.engine .container { position: relative; }
.engine .section-eyebrow { color: var(--indigo-300); }
.engine .section-eyebrow::before { background: var(--indigo-300); }
.engine .section-title { color: var(--white); }
.engine .section-sub { color: var(--ink-300); }

.flow {
  margin-top: 64px;
  position: relative;
}
.flow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.flow-line {
  position: absolute;
  left: 0;
  right: calc((100% - 48px) / 5 - 36px);
  top: 36px;
  height: 1px;
  background: var(--ink-700);
  z-index: 0;
}
.flow-line .pulse {
  position: absolute;
  top: -2px;
  width: 60px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--indigo-400), transparent);
  left: calc(var(--p, 0) * (100% + 60px) - 60px);
}
.flow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.flow-num {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  position: relative;
  transition: all var(--dur-base) var(--ease-out);
}
.flow-step.active .flow-num {
  background: var(--indigo-500);
  border-color: var(--indigo-400);
  color: var(--white);
  box-shadow: 0 0 0 6px rgba(48,79,254,0.18), var(--shadow-brand);
}
.flow-step .flow-icon {
  display: block;
}
.flow-step h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--white);
  letter-spacing: -0.02em;
}
.flow-step p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-300);
  margin: 0;
}

.engine-foot {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--ink-800);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.engine-foot p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-300);
  margin: 0;
}
.engine-foot-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.engine-foot-copy .btn-secondary:hover {
  background: var(--indigo-500);
  color: var(--white);
  border-color: var(--indigo-500);
}
.engine-cap-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.engine-cap-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-200);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.engine-cap-list li .tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(48,79,254,0.2);
  color: var(--indigo-300);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ---------- Why approach: split visual + text ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why-visual {
  position: relative;
  height: 460px;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100%;
  padding: 32px;
}
.compare-handle { display: none; }
.compare-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 16px;
}
.compare-bloated {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  height: 320px;
  position: relative;
  overflow: hidden;
}
.compare-bloated::after {
  content: "Too many steps";
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cw-flow {
  width: 100%;
  height: 100%;
  display: block;
}
.cw-flow path {
  fill: none;
  stroke: var(--ink-400);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.cw-flow path.loop {
  stroke: var(--ink-300);
  stroke-dasharray: 3 3;
  stroke-width: 1.25;
}
.cw-flow .n {
  fill: var(--white);
  stroke: var(--ink-400);
  stroke-width: 1;
}
.compare-focused {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  height: 320px;
}
.focused-tool {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--dur-base) var(--ease-out);
}
.focused-tool:hover {
  border-color: var(--indigo-500);
  box-shadow: var(--shadow-brand);
}
.focused-tool .ft-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--indigo-500);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.focused-tool .ft-shape {
  display: block;
  background: var(--white);
}
.focused-tool .ft-shape--circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.focused-tool .ft-shape--diamond {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-radius: 1px;
}
.focused-tool .ft-shape--triangle {
  width: 16px;
  height: 14px;
  background: var(--white);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.focused-tool .ft-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}
.focused-tool .ft-job {
  font-size: 12px;
  color: var(--fg-3);
  margin-left: auto;
  font-family: var(--font-mono);
}

.why-points {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.why-points li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
}
.why-points .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--indigo-500);
  background: var(--indigo-50);
  border-radius: var(--radius-sm);
  height: 28px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.why-points h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fg-1);
}
.why-points p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* ---------- Audience ---------- */
.aud-bg {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.aud-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.aud-verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}
.verb {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--fg-2);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: default;
}
.verb:hover {
  border-color: var(--indigo-500);
  color: var(--indigo-500);
  background: var(--indigo-50);
}
.aud-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.role-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  transition: all var(--dur-fast) var(--ease-out);
}
.role-pill:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-sm);
}
.role-pill .role-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--indigo-50);
  color: var(--indigo-500);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
}
.about-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-2);
  letter-spacing: -0.01em;
}
.about-tagline strong {
  color: var(--fg-1);
  font-weight: 700;
}
.about-tagline + .about-tagline { margin-top: 24px; }
.about-fact-list {
  margin-top: 48px;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.about-fact {
  padding: 24px 0;
  border-right: 1px solid var(--border-subtle);
}
.about-fact:last-child { border-right: none; }
.about-fact:not(:nth-child(1)) { padding-left: 24px; }
.about-fact .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.about-fact .value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}

/* ---------- Contact ---------- */
.contact {
  background: var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  width: 1200px;
  height: 1200px;
  left: -300px;
  bottom: -700px;
  background: radial-gradient(circle, rgba(48,79,254,0.4) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.contact .section-title { color: var(--white); }
.contact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(12px);
}
.contact-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.contact-form input {
  height: 48px;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.contact-form input::placeholder { color: var(--ink-500); }
.contact-form input:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(48,79,254,0.25);
}
.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form .btn { margin-top: 8px; }
.contact-form .form-meta {
  font-size: 12px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.form-success {
  display: none;
  padding: 16px;
  background: rgba(19,138,92,0.12);
  border: 1px solid rgba(19,138,92,0.3);
  border-radius: var(--radius-sm);
  color: #6BD7A8;
  font-size: 14px;
  font-family: var(--font-mono);
}
.form-success.visible { display: flex; align-items: center; gap: 10px; }
.form-error {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(200,49,43,0.12);
  border: 1px solid rgba(200,49,43,0.3);
  border-radius: var(--radius-sm);
  color: #F09F9C;
  font-size: 13px;
  font-family: var(--font-mono);
}
.form-error.visible { display: block; }

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--white);
  transition: all var(--dur-base) var(--ease-out);
}
.contact-link-card:hover {
  border-color: var(--ink-600);
  background: rgba(255,255,255,0.06);
  text-decoration: none;
}
.contact-link-card .ttl {
  font-size: 16px;
  font-weight: 600;
}
.contact-link-card .sub {
  font-size: 13px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.contact-link-card .arrow {
  color: var(--ink-400);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-link-card:hover .arrow {
  color: var(--indigo-300);
  transform: translateX(2px);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--black);
  color: var(--ink-300);
  padding: 64px 0 40px;
  border-top: 1px solid var(--ink-800);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer-brand { grid-column: 1; grid-row: 1; }
.footer-inner > .footer-col:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.footer-inner > .footer-col:nth-of-type(3) { grid-column: 4; grid-row: 1; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand p {
  font-size: 13px;
  color: var(--ink-400);
  margin: 16px 0 0;
  max-width: 320px;
  line-height: 1.5;
}
.footer-col h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 16px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  color: var(--ink-200);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--white); text-decoration: none; }
.footer-bottom {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-800);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.footer-legal {
  font-size: 10px;
  color: var(--ink-600);
  letter-spacing: 0.03em;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 56px; }
  .hero-visual { height: 480px; }
  .what-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; gap: 24px; }
  .flow-line { display: none; }
  .engine-foot { grid-template-columns: 1fr; gap: 32px; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .aud-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-fact-list { grid-template-columns: 1fr; }
  .about-fact { border-right: none; border-bottom: 1px solid var(--border-subtle); padding-left: 0 !important; }
  .about-fact:last-child { border-bottom: none; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .section-title { font-size: 40px; }
  .nav-links .nav-link:not(.nav-cta) { display: none; }
  section { padding: 80px 0; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }

  section { padding: 64px 0; }

  .hero { padding: 112px 0 72px; }
  .hero h1 { font-size: 40px; line-height: 1.05; margin-bottom: 20px; }
  .brk-desktop { display: none; }
  .hero-eyebrow { margin-bottom: 20px; font-size: 11px; }
  .hero-sub { font-size: 17px; margin-bottom: 28px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }

  .hv-frame { height: 380px; }
  .hero-visual { height: 380px; }
  .hv-pipeline {
    --hv-icon-size: 36px;
    --hv-pad-top: 22px;
    --hv-pad-x: 12px;
    --hv-pad-bottom: 16px;
  }
  .hv-stage-icon { width: 36px; height: 36px; }
  .hv-stage-meta { display: none; }
  .hv-chrome-label-suffix { display: none; }
  .hv-build { padding: 0 16px 12px; }
  .hv-log { margin: 0 16px 16px; padding: 10px 12px; font-size: 10px; line-height: 1.55; }
  .hv-chip { display: none; }

  .section-title { font-size: 32px; line-height: 1.08; }
  .section-sub { font-size: 16px; }
  .section-head { margin-bottom: 40px; }

  .what-card,
  .product-card { padding: 22px; }
  .product-card h3 { font-size: 22px; }

  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand,
  .footer-inner > .footer-col:nth-of-type(2),
  .footer-inner > .footer-col:nth-of-type(3) { grid-column: 1; grid-row: auto; }
  .footer { padding: 48px 0 32px; }
  .footer-bottom { margin-top: 48px; }

  .engine-cap-list { grid-template-columns: 1fr; }
  .engine-foot { gap: 24px; padding-top: 32px; margin-top: 56px; }
  .flow-num { width: 56px; height: 56px; margin-bottom: 16px; }
  .flow-step h4 { font-size: 20px; }

  /* Mobile: switch comparison to a draggable before/after slider */
  .compare {
    --ba-pos: 50%;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    height: 100%;
  }
  .compare-col {
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .compare-col:nth-of-type(1) {
    clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
    z-index: 2;
  }
  .compare-col:nth-of-type(2) {
    clip-path: inset(0 0 0 var(--ba-pos));
    z-index: 1;
  }
  .compare-col:nth-of-type(2) h5 { text-align: right; }
  .compare-bloated,
  .compare-focused {
    height: auto;
    flex: 1;
  }
  .focused-tool { flex-direction: row-reverse; }
  .focused-tool .ft-job {
    margin-left: 0;
    margin-right: auto;
  }
  .compare-handle {
    display: block;
    position: absolute;
    left: var(--ba-pos);
    top: 0;
    bottom: 0;
    width: 44px;
    margin-left: -22px;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 4;
    cursor: ew-resize;
    touch-action: none;
  }
  .compare-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--indigo-500);
  }
  .compare-handle-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--indigo-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow: var(--shadow-sm);
  }
  .compare-handle-arrow {
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--indigo-500);
    border-right: 2px solid var(--indigo-500);
  }
  .compare-handle-arrow--left { transform: rotate(-135deg); }
  .compare-handle-arrow--right { transform: rotate(45deg); }
  .why-visual { height: 380px; }
  .why-grid { gap: 32px; }
  .why-points h4 { font-size: 16px; }

  .about-tagline { font-size: 18px; }
  .about-fact .value { font-size: 18px; }

  .contact-form { padding: 24px; }
}