/* ─── Design Tokens ─────────────────────────────────────────────────── */
:root {
  --navy: #002047;
  --navy-2: #08315f;
  --green: #63b706;
  --green-dark: #438803;
  --yellow: #ffd42a;
  --blue: #28aeea;
  --orange: #ff8a1f;
  --ink: #102033;
  --muted: #5a6877;
  --paper: #fbfdf7;
  --line: rgba(0, 32, 71, 0.13);
  --shadow: 0 24px 70px rgba(0, 32, 71, 0.14);
  --shadow-sm: 0 8px 24px rgba(0, 32, 71, 0.10);
  --radius: 8px;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(251, 253, 247, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
}

.header-logo { width: min(148px, 46vw); }

.text-logo {
  width: 100%;
  aspect-ratio: 4 / 1.15;
  object-fit: contain;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-links a {
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  transition: background 0.15s;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(99, 183, 6, 0.15);
  outline: none;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.88rem 1.4rem;
  border: 0;
  border-radius: 7px;
  background: var(--green);
  color: #08250b;
  box-shadow: 0 14px 28px rgba(67, 136, 3, 0.22);
  font-weight: 900;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, outline 0.1s;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  background: #76ca10;
  box-shadow: 0 18px 36px rgba(67, 136, 3, 0.28);
  outline: 3px solid rgba(255, 212, 42, 0.55);
}

.button-small {
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
}

.button-large {
  width: min(100%, 340px);
  min-height: 58px;
  font-size: 1.05rem;
}

.button-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.38);
  color: #fff;
  box-shadow: none;
}

.button-outline:hover,
.button-outline:focus-visible {
  background: rgba(255,255,255,0.12);
  box-shadow: none;
}

/* ─── Denim Textures ─────────────────────────────────────────────────── */
.denim-band,
.denim-soft {
  position: relative;
  overflow: hidden;
}

.denim-band::before,
.denim-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(28deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(118deg, rgba(0,32,71,0.07) 0 1px, transparent 1px 8px);
  opacity: 0.7;
}

/* ─── Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, p { overflow-wrap: anywhere; }

h1 {
  max-width: 850px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4.3vw, 3.5rem);
  line-height: 0.94;
  font-weight: 950;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.9rem, 4.5vw, 3.8rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--green-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ─── Logo ───────────────────────────────────────────────────────────── */
.logo-stack {
  display: grid;
  position: relative;
  isolation: isolate;
  justify-items: center;
  width: min(220px, 66vw);
  gap: 0.18rem;
  margin-bottom: 0.55rem;
}

.logo-stack::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.7rem;
  left: 50%;
  width: min(215px, 62vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 34%, rgba(191, 225, 248, 0.3) 52%, rgba(191, 225, 248, 0) 74%);
  filter: blur(16px);
  pointer-events: none;
}

.full-logo {
  width: min(160px, 55vw);
  height: auto;
  object-fit: contain;
}

.logo-mark {
  filter: drop-shadow(0 18px 28px rgba(0, 32, 71, 0.2));
}

.hero-text-logo { width: min(168px, 58vw); }

/* ─── Bug Characters ─────────────────────────────────────────────────── */
.bug-runner,
.mini-bug,
.worker-bug,
.guide-bug {
  --bug-color: var(--green);
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background-color: var(--bug-color);
  background-image:
    /* 1: Left pupil */
    radial-gradient(circle at 30% 85%, var(--navy) 0 8%, transparent 9%),
    /* 2: Right pupil */
    radial-gradient(circle at 70% 85%, var(--navy) 0 8%, transparent 9%),
    /* 3: Left eye white */
    radial-gradient(circle at 30% 85%, #fff 0 20%, transparent 21%),
    /* 4: Right eye white */
    radial-gradient(circle at 70% 85%, #fff 0 20%, transparent 21%),
    
    /* 5: Bump highlight */
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.6) 0%, transparent 25%),
    /* 6: Bump crease */
    radial-gradient(ellipse at 50% 55%, rgba(0,32,71,0.35) 0%, transparent 30%),
    
    /* 7: 3D Highlight ellipse */
    radial-gradient(ellipse at 35% 15%, rgba(255,255,255,0.75) 0%, transparent 40%),
    /* 8: 3D Highlight left edge */
    linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.6) 12%, transparent 25%),
    /* 9: 3D Shadow right edge */
    linear-gradient(90deg, transparent 75%, rgba(0,32,71,0.25) 90%, rgba(0,32,71,0.5) 100%),
    /* 10: 3D Shadow bottom edge */
    linear-gradient(180deg, transparent 70%, rgba(0,32,71,0.3) 95%, rgba(0,32,71,0.6) 100%),
    
    /* 11: Segments */
    linear-gradient(180deg, rgba(0,32,71,0.12) 0%, rgba(0,32,71,0.12) 20%, transparent 20%, transparent 100%);

  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 30px;
    
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-y;

  box-shadow: 
    inset -4px -6px 14px rgba(0,32,71,0.25),
    inset 4px 6px 14px rgba(255,255,255,0.5),
    0 12px 24px rgba(0,32,71,0.3);
    
  animation: crawl-body 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll-y, 0) * -0.005s);
}

.bug-runner::before, .mini-bug::before, .worker-bug::before, .guide-bug::before {
  /* Legs */
  content: "";
  position: absolute;
  top: 10%;
  left: -8%;
  width: 116%;
  height: 60%;
  background-image: linear-gradient(
    180deg,
    var(--navy) 0%,
    var(--navy) 35%,
    transparent 35%,
    transparent 100%
  );
  background-size: 100% 25px;
  animation: crawl-legs 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll-y, 0) * -0.015s);
  z-index: -1;
  filter: drop-shadow(0 4px 4px rgba(0,32,71,0.3));
}

.bug-runner::after, .mini-bug::after, .worker-bug::after, .guide-bug::after {
  /* Antennae */
  content: "";
  position: absolute;
  bottom: -15%;
  left: 20%;
  width: 60%;
  height: 25%;
  border: 3px solid var(--navy);
  border-top: none;
  border-radius: 0 0 12px 12px;
  z-index: -1;
  filter: drop-shadow(0 4px 4px rgba(0,32,71,0.3));
  transform-origin: top center;
  animation: wiggle-antennae 0.2s ease-in-out infinite;
}

.guide-swarm {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.guide-bug {
  --bug-x: 86vw;
  --bug-y: 22vh;
  --bug-scale: 1;
  --bug-rotation: 0deg;
  left: 0; top: 0;
  width: 26px; height: 120px;
  opacity: 0.94;
  cursor: crosshair;
  pointer-events: auto;
  transform:
    translate3d(calc(var(--bug-x) - 13px), calc(var(--bug-y) - 60px), 0)
    rotate(var(--bug-rotation))
    scale(var(--bug-scale))
    scaleX(var(--squash-x, 1))
    scaleY(var(--squash-y, 1))
    rotate(var(--bug-flip, 0deg));
  transition:
    transform 460ms cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity 180ms ease;
  will-change: transform;
}

.guide-bug.green  { --bug-color: var(--green); }
.guide-bug.yellow { --bug-color: var(--yellow); }
.guide-bug.orange { --bug-color: var(--orange); }
.guide-bug.blue   { --bug-color: var(--blue); }

.guide-bug::before, .guide-bug::after {
  box-shadow: 0 5px 10px rgba(0,32,71,0.08);
}

.guide-swarm.is-resting .guide-bug { transition-duration: 620ms; }
.guide-swarm.is-at-end .guide-bug { opacity: 1; }

.bug-runner {
  width: 34px; height: 180px;
  cursor: crosshair;
  animation: float 4.5s ease-in-out infinite, crawl-body 1s linear infinite;
  animation-play-state: running, paused;
  animation-delay: 0s, calc(var(--scroll-y, 0) * -0.005s);
}
.bug-runner-green  { --bug-color: var(--green);  right: 1%;  top: 9%; }
.bug-runner-yellow { --bug-color: var(--yellow); right: 13%; bottom: 16%; animation-delay: -1.1s; }
.bug-runner-blue   { --bug-color: var(--blue);   left: 0;    bottom: 6%; animation-delay: -2s; }
.bug-runner-orange { --bug-color: var(--orange); right: 38%; top: 2%; animation-delay: -2.7s; }

.mini-bug { position: relative; display: inline-block; width: 18px; height: 88px; margin: 0.1rem; cursor: crosshair; }
.worker-bug { width: 28px; height: 140px; cursor: crosshair; }

.mini-bug, .worker-bug {
  transform: rotate(var(--bug-flip, 0deg));
  transition: transform 0.3s ease;
}

/* Squash State */
.squashed {
  --squash-x: 2 !important;
  --squash-y: 0.15 !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: transform 100ms ease-out, opacity 1s ease-out 0.3s !important;
  animation-play-state: paused !important;
}

.squashed::before, .squashed::after {
  animation-play-state: paused !important;
}

.mini-bug.green,  .worker-bug.green  { --bug-color: var(--green); }
.mini-bug.yellow, .worker-bug.yellow { --bug-color: var(--yellow); }
.mini-bug.orange, .worker-bug.orange { --bug-color: var(--orange); }
.mini-bug.blue,   .worker-bug.blue   { --bug-color: var(--blue); }

.worker-bug.green  { right: 8%;  top: 14%; }
.worker-bug.yellow { left: 7%;   bottom: 10%; }
.worker-bug.orange { right: 24%; bottom: 8%; }
.worker-bug.blue   { left: 46%;  top: 48%; }

/* ─── Sections ───────────────────────────────────────────────────────── */
.section {
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 6vw, 5rem);
}

.section-heading {
  max-width: 920px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.section-heading.compact { max-width: 820px; }

.section-heading p:not(.eyebrow),
.use-case p,
.value-grid p,
.feature-copy p,
.flow-lane p,
.character-note p {
  color: var(--muted);
  font-size: 1.02rem;
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 6vw, 5rem) clamp(3rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 72% 18%, rgba(40,174,234,0.15), transparent 32rem),
    radial-gradient(circle at 18% 80%, rgba(99,183,6,0.12), transparent 28rem),
    linear-gradient(135deg, #fafff4 0%, #f2f8ec 48%, #eaf5ff 100%);
}

.hero > * { position: relative; z-index: 1; }

.hero-lede {
  max-width: 600px;
  margin: 1rem 0 0;
  color: #304255;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.2rem;
}

.local-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(0,32,71,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 800;
}

.local-pill::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(99,183,6,0.22);
}

/* ─── Hero App Mockup ────────────────────────────────────────────────── */
.hero-visual {
  position: relative;
  min-height: 520px;
  perspective: 1200px;
}

.hero-images {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.hero-img-dash {
  position: absolute;
  right: 0;
  top: 10%;
  width: 95%;
  border-radius: 10px;
  box-shadow: var(--shadow);
  transform: rotateY(2deg) rotateX(1deg);
  border: 1px solid rgba(0,32,71,0.12);
}

.hero-img-qc {
  position: absolute;
  left: -5%;
  top: 25%;
  width: 55%;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 32, 71, 0.3);
  transform: rotateY(-4deg) rotateX(2deg) translateZ(50px);
  border: 1px solid rgba(0,32,71,0.18);
}

/* ─── Stats Strip ────────────────────────────────────────────────────── */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 200px;
  padding: 1.35rem clamp(1rem, 3vw, 2.5rem);
  border-right: 1px solid rgba(255,255,255,0.1);
}

.stat-item:last-child { border-right: none; }

.stat-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.stat-text { display: grid; gap: 0.1rem; }

.stat-label {
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.5);
}

.stat-value {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.stat-value em {
  font-style: normal;
  color: var(--green);
}

/* ─── Velocity / Problem–Solution ────────────────────────────────────── */
.velocity-section { background: var(--paper); }

.flow-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 1.2rem;
  max-width: 1180px;
  margin: 0 auto 3rem;
}

.flow-lane,
.feature-shell,
.testimonial,
.value-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-sm);
}

.flow-lane { padding: clamp(1.4rem, 3vw, 2.2rem); }

.flow-lane h3,
.feature-copy h3,
.value-grid h3 {
  margin: 0.45rem 0 0;
  color: var(--navy);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.1;
}

.flow-lane ul,
.feature-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.flow-lane li,
.feature-list li {
  position: relative;
  padding-left: 1.3rem;
  color: #314357;
  font-weight: 650;
}

.flow-lane li::before,
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.48rem; height: 0.48rem;
  border-radius: 50%;
  background: var(--green);
}

.slow-lane { background: #fff8f1; }
.fast-lane { background: #f4ffed; }

.flow-guide-gap {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 82px;
}

.flow-guide-gap::before {
  content: "";
  display: block;
  width: 3px;
  min-height: 150px;
  border-radius: 999px;
  background: linear-gradient(var(--green), var(--yellow), var(--orange), var(--blue));
  opacity: 0.42;
}

/* How It Works 3-step strip */
.how-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.how-step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: #fff;
}

.how-num {
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-dark);
}

.how-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.how-step h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 900;
}

.how-step p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ─── Features ───────────────────────────────────────────────────────── */
.features-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,212,42,0.14), transparent 24rem),
    radial-gradient(circle at 92% 25%, rgba(99,183,6,0.14), transparent 28rem),
    #f4f9f1;
}

.feature-shell {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.feature-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.feature-tab {
  min-height: 40px;
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(0,32,71,0.18);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.feature-tab.active,
.feature-tab:hover,
.feature-tab:focus-visible {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  outline: none;
}

.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 1rem;
  align-items: stretch;
}

.feature-copy { padding: clamp(1rem, 3vw, 2rem); }

.feature-visual {
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(0,32,71,0.04), rgba(99,183,6,0.05)),
    #ffffff;
  overflow: hidden;
  position: relative;
}

.visual-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(62px, auto);
  gap: 0.8rem;
  min-height: 100%;
  padding: clamp(1rem, 3vw, 2rem);
}

.plain-input {
  display: grid;
  place-items: center;
  min-height: 62px;
  border: 2px dashed rgba(0,32,71,0.2);
  border-radius: 7px;
  background: rgba(255,255,255,0.76);
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s;
}

.plain-input.wide  { grid-column: 1 / -1; }
.plain-input.tall  { grid-column: 1 / -1; min-height: 120px; }
.plain-input.duo   { grid-column: span 2; }

.status-chip {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 999px;
  background: rgba(99,183,6,0.14);
  color: var(--green-dark);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Feature visual states */
.visual-stage.evidence-view .plain-input { border-style: solid; }

.visual-stage.evidence-view .plain-input:nth-child(1)::after,
.visual-stage.evidence-view .plain-input:nth-child(2)::after,
.visual-stage.evidence-view .plain-input:nth-child(3)::after {
  content: "";
  display: block;
  width: 70%; height: 9px;
  margin-top: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
}

.visual-stage.integration-view .status-chip {
  background: var(--navy);
  color: #fff;
}

.visual-stage.ai-view .plain-input { border-color: rgba(40,174,234,0.4); background: rgba(40,174,234,0.05); }
.visual-stage.ai-view .status-chip { background: rgba(40,174,234,0.15); color: #0066a0; }

.visual-stage.dashboard-view .plain-input { border-style: solid; border-color: rgba(0,32,71,0.12); }
.visual-stage.dashboard-view .status-chip { background: rgba(255,138,31,0.14); color: #b85f00; }

.visual-stage.sync-view .plain-input { border-color: rgba(99,183,6,0.4); background: rgba(99,183,6,0.05); }
.visual-stage.sync-view .status-chip { background: var(--green); color: #08250b; }

/* ─── Mid-Page CTA ───────────────────────────────────────────────────── */
.mid-cta {
  background:
    radial-gradient(circle at 20% 50%, rgba(99,183,6,0.18), transparent 30rem),
    radial-gradient(circle at 80% 30%, rgba(40,174,234,0.15), transparent 28rem),
    #f0f9ff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 6vw, 5rem);
}

.mid-cta-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 1.4rem;
  place-items: center;
}

.mid-cta-inner h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

.mid-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.mid-cta .local-pill { background: rgba(255,255,255,0.9); }

/* ─── Proof / Testimonial ────────────────────────────────────────────── */
.proof-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

.testimonial {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--navy);
  color: #fff;
}

.testimonial blockquote {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  line-height: 1.08;
  font-weight: 900;
}

.testimonial blockquote::before { content: "\201C"; color: var(--green); }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  flex-shrink: 0;
}

.testimonial-name { font-weight: 900; color: #fff; font-size: 0.9rem; line-height: 1.2; }
.testimonial-role { font-size: 0.78rem; color: rgba(255,255,255,0.6); }

.use-case h2 { margin-bottom: 1rem; }

/* ─── Trust ──────────────────────────────────────────────────────────── */
.trust-section {
  background:
    radial-gradient(circle at 14% 18%, rgba(40,174,234,0.14), transparent 24rem),
    radial-gradient(circle at 88% 22%, rgba(255,138,31,0.11), transparent 24rem),
    linear-gradient(180deg, #f6fbff, #f9fff3);
}

.trust-section > * { position: relative; z-index: 1; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.value-grid article { padding: clamp(1.4rem, 3vw, 2rem); }

.value-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.value-icon.green  { background: rgba(99,183,6,0.12); }
.value-icon.blue   { background: rgba(40,174,234,0.12); }
.value-icon.orange { background: rgba(255,138,31,0.12); }

.accent-line {
  display: block;
  width: 72px; height: 5px;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.accent-line.green  { background: var(--green); }
.accent-line.blue   { background: var(--blue); }
.accent-line.orange { background: var(--orange); }

.character-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 880px;
  margin: 2.5rem auto 0;
  text-align: center;
}

.character-note p { flex-basis: 100%; margin: 0.65rem 0 0; }

/* ─── Final CTA ──────────────────────────────────────────────────────── */
.final-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding:
    clamp(2.25rem, 4.5vw, 4rem)
    clamp(1rem, 6vw, 5rem)
    clamp(1.25rem, 2.2vw, 2rem);
  text-align: center;
  background:
    repeating-linear-gradient(30deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, var(--navy), #0b4c83);
  color: #fff;
}

.final-logo { width: min(170px, 54vw); }

.footer-branding {
  display: grid;
  position: relative;
  isolation: isolate;
  z-index: 13;
  justify-items: center;
  gap: 0.4rem;
}

.footer-branding::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1rem;
  left: 50%;
  width: min(250px, 68vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.2) 0 34%, rgba(108, 188, 0, 0.14) 48%, rgba(0, 32, 71, 0) 74%);
  filter: blur(18px);
  pointer-events: none;
}

.footer-branding .logo-mark {
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.32));
}

.final-text-logo {
  width: min(245px, 66vw);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.2));
}

.final-copy {
  position: relative;
  z-index: 13;
}

.final-copy h2 {
  max-width: 780px;
  margin: 0 auto 0.5rem;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.final-copy p {
  color: rgba(255,255,255,0.65);
  max-width: 540px;
  margin: 0 auto 1.4rem;
  font-size: 1rem;
}

.final-copy .eyebrow { color: var(--yellow); }

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1.4rem clamp(1rem, 4vw, 2.5rem);
  background: #061b32;
  color: rgba(255,255,255,0.55);
  font-size: 0.84rem;
}

.site-footer a {
  transition: color 0.15s;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
  outline: none;
}

.site-footer .footer-sep { color: rgba(255,255,255,0.2); }
.site-footer .footer-copy { margin-left: auto; }

/* ─── Lane label ─────────────────────────────────────────────────────── */
.lane-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Help Page ──────────────────────────────────────────────────────── */
.help-body { background: var(--paper); }

.help-topbar {
  grid-template-columns: auto 1fr auto;
}

.help-page {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 92% 10%, rgba(40,174,234,0.14), transparent 24rem),
    radial-gradient(circle at 8% 4%, rgba(99,183,6,0.12), transparent 22rem),
    var(--paper);
}

/* Sidebar */
.help-sidebar { position: relative; }

.sidebar-card {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
}

.sidebar-search-wrap {
  padding: 0.7rem 0.7rem 0.4rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.sidebar-search {
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid rgba(0,32,71,0.16);
  border-radius: 6px;
  background: rgba(0,32,71,0.04);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.15s;
}

.sidebar-search::placeholder { color: rgba(90,104,119,0.6); }

.sidebar-search:focus { border-color: var(--green); }

.sidebar-eyebrow,
.help-kicker {
  margin: 0;
  color: var(--green-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sidebar-eyebrow { padding: 0.8rem 1rem 0.5rem; flex-shrink: 0; }

.sidebar-card nav {
  display: grid;
  padding: 0.3rem 0.35rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,32,71,0.15) transparent;
}

.sidebar-card a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.6rem 0.65rem;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.25;
  transition: background 0.12s, color 0.12s;
}

.sidebar-card a span {
  color: rgba(0,32,71,0.4);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.sidebar-card a:hover,
.sidebar-card a:focus-visible,
.sidebar-card a.active {
  background: var(--navy);
  color: #fff;
  outline: none;
}

.sidebar-card a:hover span,
.sidebar-card a:focus-visible span,
.sidebar-card a.active span { color: var(--green); }

.sidebar-card a.hidden { display: none; }

/* Help Content */
.help-content { display: grid; gap: 1rem; max-width: 980px; }

.help-hero-card,
.manual-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-sm);
}

.help-hero-card { padding: clamp(1.6rem, 4vw, 3rem); }

.help-hero-card h1 {
  max-width: 780px;
  margin: 0.55rem 0 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 0.98;
}

.help-hero-card p:last-child {
  max-width: 700px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.help-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.help-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--navy);
}

.help-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}

.help-badge .dot.green  { background: var(--green); }
.help-badge .dot.blue   { background: var(--blue); }
.help-badge .dot.orange { background: var(--orange); }

/* Manual Sections */
.manual-section {
  scroll-margin-top: 1.2rem;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  overflow: hidden;
}

.section-number {
  display: grid;
  place-items: start center;
  padding-top: 2rem;
  background:
    repeating-linear-gradient(32deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 8px),
    var(--navy);
  color: var(--green);
  font-size: 1rem;
  font-weight: 950;
}

.section-body { padding: clamp(1.4rem, 4vw, 2.4rem); }

.manual-section h2 {
  margin: 0.4rem 0 0;
  color: var(--navy);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.04;
  font-weight: 940;
}

.section-summary {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.manual-block {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.manual-block h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 800;
}

.manual-block p {
  margin: 0.65rem 0 0;
  color: var(--muted);
}

.manual-block ol,
.manual-block ul {
  display: grid;
  gap: 0.7rem;
  margin: 0.9rem 0 0;
  padding-left: 1.3rem;
  color: #2c4056;
}

.manual-block li { padding-left: 0.25rem; }
.manual-block li::marker { color: var(--green); font-weight: 900; }

.manual-block ul { list-style: disc; }
.manual-block ul li::marker { color: var(--green); }

.manual-callout {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-left: 5px solid var(--orange);
  border-radius: 7px;
  background: rgba(255,138,31,0.08);
  color: #34465a;
  font-weight: 680;
  font-size: 0.93rem;
}

.manual-callout.tip {
  border-color: var(--green);
  background: rgba(99,183,6,0.08);
}

.manual-callout.info {
  border-color: var(--blue);
  background: rgba(40,174,234,0.08);
}

.manual-section code,
.manual-block code {
  display: inline-block;
  padding: 0.1rem 0.38rem;
  border: 1px solid rgba(0,32,71,0.13);
  border-radius: 5px;
  background: rgba(0,32,71,0.055);
  color: var(--navy);
  font-size: 0.9em;
  font-weight: 800;
  font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
}

/* Shortcut Table */
.shortcut-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.shortcut-table th {
  padding: 0.65rem 0.9rem;
  border-bottom: 2px solid var(--line);
  text-align: left;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0,32,71,0.04);
}

.shortcut-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #2c4056;
}

.shortcut-table tr:last-child td { border-bottom: none; }
.shortcut-table tr:hover td { background: rgba(99,183,6,0.04); }

.shortcut-table .kbd-cell {
  white-space: nowrap;
  font-weight: 700;
}

kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border: 1.5px solid rgba(0,32,71,0.22);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: rgba(0,32,71,0.06);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 900;
  line-height: 1;
}

kbd + kbd { margin-left: 2px; }

.shortcut-group-header td {
  padding-top: 1.2rem;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-dark);
  border-bottom: none;
}

/* ─── Animations ─────────────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg) scaleX(var(--squash-x, 1)) scaleY(var(--squash-y, 1)) rotate(var(--bug-flip, 0deg)); }
  50%       { transform: translateY(-13px) rotate(3deg) scaleX(var(--squash-x, 1)) scaleY(var(--squash-y, 1)) rotate(var(--bug-flip, 0deg)); }
}

@keyframes guide-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg) scaleX(var(--squash-x, 1)) scaleY(var(--squash-y, 1)) rotate(var(--bug-flip, 0deg)); }
  50%       { transform: translateY(-8px) rotate(3deg) scaleX(var(--squash-x, 1)) scaleY(var(--squash-y, 1)) rotate(var(--bug-flip, 0deg)); }
}

@keyframes crawl-body {
  from {
    background-position:
      0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0;
  }
  to {
    background-position:
      0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 30px;
  }
}

@keyframes crawl-legs {
  from { background-position: 0 0; }
  to { background-position: 0 25px; }
}

@keyframes wiggle-antennae {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(1.15) rotate(6deg); }
}

/* ─── Reduced Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bug-runner { animation: none; }
  .guide-swarm { transition: none; }
}

/* ─── Responsive 1080px ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .app-mockup {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dash-window { display: none; }

  .qc-window {
    transform: none;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ─── Responsive 980px ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
  }

  .nav-links { grid-column: 1 / -1; order: 3; }

  .hero,
  .feature-layout,
  .proof-section,
  .value-grid {
    grid-template-columns: 1fr;
  }

  .hero { min-height: auto; }
  .hero-visual { min-height: 460px; }

  .flow-compare { grid-template-columns: 1fr; }

  .flow-guide-gap {
    display: flex;
    width: auto;
    justify-content: center;
  }

  .flow-guide-gap::before {
    width: min(260px, 68vw);
    height: 3px;
    min-height: 0;
  }

  .how-strip { grid-template-columns: 1fr; }

  .help-page { grid-template-columns: 1fr; }

  .sidebar-card {
    top: 0.5rem;
    z-index: 8;
    max-height: none;
  }

  .sidebar-card nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }

  .sidebar-card a { grid-template-columns: auto; gap: 0.18rem; }

  .sidebar-search-wrap { display: none; }

  .stat-item { flex: 1 1 160px; }
}

/* ─── Responsive 620px ───────────────────────────────────────────────── */
@media (max-width: 620px) {
  .site-header { position: relative; }

  .hero-actions { align-items: stretch; }
  .local-pill, .button-large { width: 100%; }
  .hero-visual, .feature-visual { min-height: 390px; }

  .bug-runner { width: 24px; height: 120px; }

  .guide-bug {
    width: 20px; height: 90px;
    transform:
      translate3d(calc(var(--bug-x) - 10px), calc(var(--bug-y) - 45px), 0)
      rotate(var(--bug-rotation))
      scale(var(--bug-scale))
      scaleX(var(--squash-x, 1))
      scaleY(var(--squash-y, 1));
  }

  .visual-stage { grid-template-columns: 1fr; }

  .help-page { padding: 0.75rem; }

  .manual-section { grid-template-columns: 1fr; }
  .section-number { display: none; }

  .help-hero-card,
  .manual-section { border-radius: 7px; }

  .shortcut-table { font-size: 0.82rem; }
  .shortcut-table th, .shortcut-table td { padding: 0.5rem 0.6rem; }
  kbd { font-size: 0.75em; padding: 0.15rem 0.35rem; }

  .how-strip { border-radius: 7px; }
}