/* ==========================================================================
   home-v3.css — Homepage v3 ("platform operating layer" reposition)
   --------------------------------------------------------------------------
   Scope: every class here is prefixed `hx-` so it cannot collide with the
   shared stylesheets (css/shared/s-7b769d0663.css, s-ef39ab5d25.css), which
   must not be edited. Loaded AFTER them, so the few override blocks at the
   bottom win by cascade order.

   Palette: indigo #6366f1 is the ONLY accent. Emerald / amber / pink / blue
   have been removed from the homepage. Purple #a855f7 appears exactly once,
   as the gradient partner on the headline hairline.
   ========================================================================== */

:root {
  --hx-indigo:      #6366f1;
  --hx-indigo-600:  #4f46e5;
  --hx-indigo-700:  #4338ca;
  --hx-indigo-050:  #eef0fe;
  --hx-indigo-line: rgba(99, 102, 241, 0.32);
  --hx-purple:      #a855f7;

  --hx-ink:      #1E1E24;
  --hx-ink-70:   #4A4A54;
  --hx-ink-50:   #6E6E78;
  --hx-ink-30:   #9A9AA2;

  --hx-page:     #FFFFFF;
  --hx-tint:     #FBFCFB;
  --hx-hair:     #ECECEF;
  --hx-hair-2:   #DDDDE2;

  --hx-mock:     #13151a;   /* dark charcoal — never brown */
  --hx-mock-2:   #1b1e25;
  --hx-mock-hair: rgba(255, 255, 255, 0.09);

  --hx-maxw:   1600px;      /* matches #header / .footer .container */
  --hx-gutter: clamp(20px, 5vw, 72px);

  --hx-r-sm: 10px;
  --hx-r-md: 14px;
  --hx-r-lg: 20px;

  --hx-shadow: 0 18px 50px rgba(24, 28, 40, 0.09);
}

/* ---------- layout primitives ---------- */

.hx-section {
  position: relative;
  padding-block: clamp(88px, 10vw, 148px);
  background: var(--hx-page);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.hx-section--tint { background: var(--hx-tint); }
.hx-section--hair { border-top: 1px solid var(--hx-hair); }

.hx-wrap {
  max-width: var(--hx-maxw);
  margin: 0 auto;
  padding-inline: var(--hx-gutter);
  box-sizing: border-box;
}

/* Text-led blocks stay readable even in a 1600px shell. */
.hx-measure { max-width: 760px; }
.hx-measure--center { margin-inline: auto; text-align: center; }

.hx-head { margin-bottom: clamp(44px, 5vw, 72px); }

/* ---------- type ---------- */

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-indigo-700);
}
.hx-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--hx-indigo);
}
.hx-measure--center .hx-eyebrow { justify-content: center; }

.hx-h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--hx-ink);
}
.hx-h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--hx-ink);
}
.hx-h4 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--hx-ink);
}
.hx-lead {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.58;
  font-weight: 400;
  color: var(--hx-ink-70);
}
.hx-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--hx-ink-70);
}
.hx-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.hx-muted { color: var(--hx-ink-50); }

/* The one place a gradient earns its keep: hairline under the anchor headline. */
.hx-underline {
  position: relative;
  display: inline-block;
}
/* Sits clear of the descenders (g, y, p) rather than striking through them. */
.hx-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hx-indigo), var(--hx-purple));
}

/* ---------- buttons ---------- */

.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1.5px solid var(--hx-ink);
  border-radius: var(--hx-r-sm);
  background: transparent;
  color: var(--hx-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.hx-btn:hover {
  background: var(--hx-ink);
  color: #fff;
  transform: translateY(-1px);
}
.hx-btn svg { width: 17px; height: 17px; transition: transform .18s ease; }
.hx-btn:hover svg { transform: translateX(3px); }

/* One filled indigo button per section, maximum. */
.hx-btn--primary {
  background: var(--hx-indigo);
  border-color: var(--hx-indigo);
  color: #fff;
}
.hx-btn--primary:hover {
  background: var(--hx-indigo-600);
  border-color: var(--hx-indigo-600);
  color: #fff;
}
.hx-btn--onDark {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.hx-btn--onDark:hover { background: #fff; color: var(--hx-ink); border-color: #fff; }

.hx-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Text link with a sliding arrow. */
.hx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hx-indigo-700);
  text-decoration: none;
}
.hx-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.hx-link:hover svg { transform: translateX(3px); }

/* Visible keyboard focus, everywhere. */
.hx-btn:focus-visible,
.hx-link:focus-visible,
.hx-tab:focus-visible,
.hx-chip:focus-visible,
a:focus-visible .hx-card {
  outline: 2px solid var(--hx-indigo);
  outline-offset: 3px;
  border-radius: var(--hx-r-sm);
}

/* ---------- cards ---------- */

.hx-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-md);
  box-sizing: border-box;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hx-card:hover {
  border-color: var(--hx-indigo-line);
  transform: translateY(-2px);
  box-shadow: var(--hx-shadow);
}
.hx-card__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: var(--hx-r-sm);
  background: var(--hx-indigo-050);
  color: var(--hx-indigo-700);
}
.hx-card__ic svg { width: 18px; height: 18px; }

.hx-list { margin: 14px 0 0; padding: 0; list-style: none; }
.hx-list li {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--hx-ink-70);
}
.hx-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hx-indigo);
}

.hx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--hx-hair-2);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hx-ink-50);
}
.hx-tag--soon { border-color: var(--hx-indigo-line); color: var(--hx-indigo-700); background: var(--hx-indigo-050); }

/* ==========================================================================
   3. One operating layer — the lifecycle rail
   ========================================================================== */

.hx-rail {
  position: relative;              /* anchors the travelling light */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--hx-hair);
}
/* The divider is a border-LEFT on every stage but the first, so each column's
   text is inset from the rule beside it instead of sitting flush against it. */
.hx-stage {
  position: relative;
  padding: 30px 30px 34px 0;
}
.hx-stage + .hx-stage {
  padding-left: 28px;
  border-left: 1px solid var(--hx-hair);
}

/* The node sitting on the rail — aligned to the text, not to the rule. */
.hx-stage::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--hx-hair-2);
}
.hx-stage + .hx-stage::before { left: 28px; }
/* Only the active stage is indigo. */
.hx-stage--active::before {
  background: var(--hx-indigo);
  border-color: var(--hx-indigo);
}
.hx-stage--active { border-top: 1px solid var(--hx-indigo); margin-top: -1px; }

.hx-stage__n {
  display: block;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--hx-ink-30);
}
.hx-stage--active .hx-stage__n { color: var(--hx-indigo-700); }
.hx-stage__k {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hx-ink);
}
.hx-stage__d {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hx-ink-70);
}

/* "…and back to design" — the loop closing on itself. */
.hx-loop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--hx-hair-2);
  font-size: 13.5px;
  color: var(--hx-ink-50);
}
.hx-loop svg { width: 16px; height: 16px; color: var(--hx-indigo); flex-shrink: 0; }

/* ==========================================================================
   4. Mihu Assistant vs Builder Assistant
   ========================================================================== */

.hx-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.hx-vs__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-lg);
  box-sizing: border-box;
  overflow: hidden;                /* keeps the accent line inside the radius */
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hx-vs__panel--accent { border-color: var(--hx-indigo-line); }
.hx-vs__panel:hover {
  border-color: var(--hx-indigo-line);
  transform: translateY(-3px);
  box-shadow: var(--hx-shadow);
}
.hx-vs__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hx-indigo-700);
}
/* margin-top:auto pins the claim to the bottom of the panel, so in a 2x2 grid
   the four claims line up instead of floating wherever their copy ended. */
.hx-vs__claim {
  margin: 22px 0 0;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hx-hair);
  font-size: 15px;
  font-weight: 600;
  color: var(--hx-ink);
}

/* Browser-frame mockup (reuses gif.mp4) */
.hx-frame {
  margin-top: 22px;
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-md);
  overflow: hidden;
  box-shadow: var(--hx-shadow);
}
.hx-frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  background: #F8F9FA;
  border-bottom: 1px solid var(--hx-hair);
}
.hx-frame__dots { display: flex; gap: 6px; }
.hx-frame__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hx-hair-2);
}
.hx-frame__url {
  flex: 1;
  max-width: 220px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--hx-hair);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--hx-ink-30);
}
.hx-frame video,
.hx-frame img { display: block; width: 100%; height: auto; }
/* The simulator demo is an <img> (GIF), the assistant demo a <video> — both get
   the same crop treatment so the two frames read as one pair. */
.hx-frame--video video,
.hx-frame--video img { max-height: 420px; object-fit: cover; object-position: top; }

/* Zoom crop. The recording has a third-party widget badge burned into its
   bottom-right corner. Anchoring the image top-left and scaling it up pushes
   that corner outside the frame, which clips it (the frame is overflow:hidden).
   1.16 removes ~14% from the right and bottom — the badge sits within ~5% of
   the right edge and ~11% of the bottom, so this clears it with margin. */
.hx-frame--zoom img {
  transform: scale(1.16);
  transform-origin: top left;
}

/* ---- Improvement Agent mockup: 30-day trend, deltas, and what it did ---- */
.hx-imp {
  margin-top: 22px;
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-md);
  overflow: hidden;
  background: #fff;
}
.hx-imp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: #FBFBFC;
  border-bottom: 1px solid var(--hx-hair);
}
.hx-imp__title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--hx-ink-50);
}
.hx-imp__badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hx-indigo-050);
  color: var(--hx-indigo-700);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hx-imp__chart { padding: 14px 14px 0; }
.hx-imp__chart svg { display: block; width: 100%; height: 84px; }

/* The trend line draws itself, then the head-dot settles. */
@media (prefers-reduced-motion: no-preference) {
  .hx-armed .hx-imp__line {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
  }
  .hx-armed .hx-imp__area,
  .hx-armed .hx-imp__dot { opacity: 0; }

  .hx-armed .hx-reveal[data-in] .hx-imp__line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s cubic-bezier(.3, .7, .3, 1) .25s;
  }
  .hx-armed .hx-reveal[data-in] .hx-imp__area {
    opacity: 1;
    transition: opacity .8s ease .9s;
  }
  .hx-armed .hx-reveal[data-in] .hx-imp__dot {
    opacity: 1;
    transition: opacity .4s ease 1.7s;
  }
}

.hx-imp__rows { padding: 6px 14px 4px; }
.hx-imp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hx-hair);
}
.hx-imp__row:last-child { border-bottom: 0; }
.hx-imp__k { font-size: 13.5px; color: var(--hx-ink-70); }
.hx-imp__v {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.hx-imp__was { color: var(--hx-ink-30); }
.hx-imp__arw { color: var(--hx-ink-30); }
.hx-imp__now { font-weight: 600; color: var(--hx-ink); }
.hx-imp__d {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--hx-indigo-050);
  color: var(--hx-indigo-700);
  font-size: 11.5px;
  font-weight: 600;
}

.hx-imp__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--hx-hair);
  background: #FBFBFC;
}
.hx-imp__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hx-ink-50);
}
.hx-imp__chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hx-indigo);
}

/* Builder "Resources" readout — the proof it deploys real compute. */
.hx-res {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.hx-res__tile {
  padding: 14px;
  background: var(--hx-mock);
  border: 1px solid var(--hx-mock-hair);
  border-radius: var(--hx-r-sm);
}
.hx-res__k {
  display: block;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.hx-res__v {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.hx-qa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.hx-qa span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--hx-mock);
  border: 1px solid var(--hx-mock-hair);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
}
/* Semantic state INSIDE a mockup is allowed to be green. */
.hx-qa span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35c48b;
}

/* ==========================================================================
   5. One agent, every surface
   ========================================================================== */

.hx-surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 40px;
}
.hx-surface {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-md);
  transition: border-color .18s ease, transform .18s ease;
}
.hx-surface:hover { border-color: var(--hx-indigo-line); transform: translateY(-2px); }
.hx-surface svg { width: 19px; height: 19px; color: var(--hx-ink-50); }
.hx-surface:hover svg { color: var(--hx-indigo); }
.hx-surface__n { font-size: 14.5px; font-weight: 600; color: var(--hx-ink); }
.hx-surface__s { font-size: 12.5px; line-height: 1.45; color: var(--hx-ink-50); }

/* The continuity strip: one conversation crossing three channels. */
.hx-thread {
  margin-top: 40px;
  padding: 26px;
  background: var(--hx-mock);
  border-radius: var(--hx-r-lg);
}
.hx-thread__row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--hx-mock-hair);
}
.hx-thread__row:last-of-type { border-bottom: 0; }
.hx-thread__ch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.hx-thread__ch svg { width: 14px; height: 14px; }
.hx-thread__t { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.hx-thread__m {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
}
.hx-thread__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hx-mock-hair);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
}
.hx-thread__foot strong { color: #fff; font-weight: 600; }

/* ==========================================================================
   6. Sense → Decide → Act
   ========================================================================== */

.hx-sda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hx-beat { position: relative; padding-top: 22px; border-top: 2px solid var(--hx-hair); }
.hx-beat--act { border-top-color: var(--hx-indigo); }
.hx-beat__n {
  display: block;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--hx-ink-30);
}
.hx-beat--act .hx-beat__n { color: var(--hx-indigo-700); }

/* Worked example: the end-to-end trace. */
.hx-trace {
  margin-top: clamp(40px, 4vw, 60px);
  background: var(--hx-mock);
  border-radius: var(--hx-r-lg);
  overflow: hidden;
}
.hx-trace__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--hx-mock-hair);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.hx-trace__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.72);
}
.hx-trace__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35c48b;
}
.hx-trace__body { padding: 8px 22px 22px; }
.hx-trace__step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--hx-mock-hair);
}
.hx-trace__step:last-child { border-bottom: 0; }
.hx-trace__lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.hx-trace__step--act .hx-trace__lbl { color: var(--hx-indigo); }
.hx-trace__t { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.hx-trace__t em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
}
.hx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hx-acts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 999px;
  font-size: 12.5px;
  color: #c7c9ff;
}
.hx-acts svg { width: 13px; height: 13px; }

/* ==========================================================================
   7. Simulate before you ship
   ========================================================================== */

.hx-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hx-split--rev .hx-split__visual { order: -1; }

.hx-panel {
  background: #fff;
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-lg);
  box-shadow: var(--hx-shadow);
  overflow: hidden;
}
.hx-panel__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: #FBFBFC;
  border-bottom: 1px solid var(--hx-hair);
}
.hx-panel__bar .hx-frame__dots i { background: var(--hx-hair-2); }
.hx-panel__title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--hx-ink-50);
}
.hx-panel__body { padding: 22px; }

.hx-persona {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hx-hair);
}
.hx-persona:last-of-type { border-bottom: 0; }
.hx-persona__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hx-indigo-050);
  color: var(--hx-indigo-700);
  font-size: 12px;
  font-weight: 600;
}
.hx-persona__n { font-size: 14px; font-weight: 600; color: var(--hx-ink); }
.hx-persona__m { font-size: 12.5px; color: var(--hx-ink-50); }
.hx-persona__s {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--hx-ink);
}

.hx-score { margin-top: 18px; }
.hx-score__top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--hx-ink-70);
}
.hx-score__track {
  height: 5px;
  border-radius: 999px;
  background: var(--hx-hair);
  overflow: hidden;
}
.hx-score__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--hx-indigo);
}

/* ==========================================================================
   8. Quality, coaching & the workdesk
   ========================================================================== */

.hx-soon {
  margin-top: 28px;
  padding: 28px;
  background: var(--hx-tint);
  border: 1px solid var(--hx-hair);
  border-radius: var(--hx-r-lg);
}
.hx-queue { margin-top: 20px; }
.hx-q {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--hx-hair);
}
.hx-q:last-child { border-bottom: 0; }
.hx-q__who {
  padding: 5px 9px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.hx-q__who--ai { background: #EFEFF2; color: var(--hx-ink-50); }
.hx-q__who--hand { background: var(--hx-indigo-050); color: var(--hx-indigo-700); }
.hx-q__t { font-size: 14px; color: var(--hx-ink); }
.hx-q__s { display: block; font-size: 12.5px; color: var(--hx-ink-50); }
.hx-q__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--hx-ink-30);
}

/* ==========================================================================
   9. Enterprise trust
   ========================================================================== */

.hx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px;
  margin-top: clamp(40px, 4vw, 60px);
  padding-top: 40px;
  border-top: 1px solid var(--hx-hair);
}
.hx-stat__n {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hx-ink);
}
.hx-stat__l {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--hx-ink-50);
}

/* Compact API block — replaces the old full-width API-orchestration section. */
.hx-code {
  background: var(--hx-mock);
  border-radius: var(--hx-r-md);
  overflow: hidden;
}
.hx-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hx-mock-hair);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.hx-code__body {
  margin: 0;
  padding: 18px;
  overflow-x: auto;                 /* wide code scrolls in its own box */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.82);
}
.hx-code__body .v { color: #c7c9ff; }
.hx-code__body .c { color: rgba(255, 255, 255, 0.36); }

/* ==========================================================================
   11. Pricing — moved to position 11, usage-based framing
   ========================================================================== */

.hx-price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.hx-price__note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hx-hair);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hx-ink-50);
}
.hx-price__note strong { font-weight: 600; color: var(--hx-ink-70); }

/* ==========================================================================
   Motion — scroll reveal only. No floating / bobbing / pulsing.
   Content is visible by default; JS opts in by adding .hx-armed to <html>,
   so it can never stay hidden if JS fails or motion is reduced.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hx-armed .hx-reveal {
    opacity: 0;
    transform: translateY(12px);
  }
  .hx-armed .hx-reveal[data-in] {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  .hx-armed .hx-reveal[data-in].hx-d1 { transition-delay: .08s; }
  .hx-armed .hx-reveal[data-in].hx-d2 { transition-delay: .16s; }
  .hx-armed .hx-reveal[data-in].hx-d3 { transition-delay: .24s; }

  /* Auto-staggered children (used on the surfaces row, industry cards,
     stat row, capability cards) — JS tags the parent, CSS does the cascade. */
  .hx-armed .hx-stagger > * {
    opacity: 0;
    transform: translateY(12px);
  }
  .hx-armed .hx-stagger[data-in] > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  .hx-armed .hx-stagger[data-in] > *:nth-child(1) { transition-delay: .00s; }
  .hx-armed .hx-stagger[data-in] > *:nth-child(2) { transition-delay: .06s; }
  .hx-armed .hx-stagger[data-in] > *:nth-child(3) { transition-delay: .12s; }
  .hx-armed .hx-stagger[data-in] > *:nth-child(4) { transition-delay: .18s; }
  .hx-armed .hx-stagger[data-in] > *:nth-child(5) { transition-delay: .24s; }
  .hx-armed .hx-stagger[data-in] > *:nth-child(6) { transition-delay: .30s; }
  .hx-armed .hx-stagger[data-in] > *:nth-child(7) { transition-delay: .36s; }

  /* The headline hairline draws itself in, left to right. */
  .hx-armed .hx-underline::after {
    transform: scaleX(0);
    transform-origin: left;
  }
  .hx-armed .hx-reveal[data-in] .hx-underline::after,
  .hx-armed .hx-reveal[data-in].hx-underline::after {
    transform: scaleX(1);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1) .25s;
  }

  /* ---- Travelling progress line -------------------------------------------
     The indigo line runs the length of the rail one stage at a time: 01 → 02 →
     03 → 04 → 05. Each stage owns a segment of the line; segment N starts as
     segment N-1 finishes, so the segments join into a single line that appears
     to travel. Each node lights up at the moment the line reaches it.
     The grey border-top underneath is the track, and is what shows without JS. */
  .hx-armed .hx-stage--active { border-top-color: transparent; }

  .hx-armed .hx-stage::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--hx-indigo);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hx-armed .hx-rail[data-in] .hx-stage::after {
    transform: scaleX(1);
    transition: transform .55s linear;

    /* Once drawn, a brighter glint keeps travelling through the line, so the
       01 → 02 → 03 → 04 → 05 movement stays visible instead of freezing after
       the first pass. Staggered delays make the glint cross the stages in
       order, then it loops. */
    background: linear-gradient(
      90deg,
      var(--hx-indigo) 0%,
      var(--hx-indigo) 30%,
      #c7d2fe 45%,
      #eef2ff 50%,
      #c7d2fe 55%,
      var(--hx-indigo) 70%,
      var(--hx-indigo) 100%
    );
    background-size: 300% 100%;
    animation: hxGlint 3s linear infinite;
  }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(1)::after { transition-delay: .15s; animation-delay: 2.9s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(2)::after { transition-delay: .70s; animation-delay: 3.1s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(3)::after { transition-delay: 1.25s; animation-delay: 3.3s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(4)::after { transition-delay: 1.80s; animation-delay: 3.5s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(5)::after { transition-delay: 2.35s; animation-delay: 3.7s; }

  /* Nodes light as the line arrives at them (same clock as the segments). */
  .hx-armed .hx-rail[data-in] .hx-stage::before {
    background: var(--hx-indigo);
    border-color: var(--hx-indigo);
    transition: background .3s ease, border-color .3s ease;
  }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(1)::before { transition-delay: .15s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(2)::before { transition-delay: .70s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(3)::before { transition-delay: 1.25s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(4)::before { transition-delay: 1.80s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(5)::before { transition-delay: 2.35s; }

  /* The stage number turns indigo as the line passes, too. */
  .hx-armed .hx-rail[data-in] .hx-stage .hx-stage__n {
    color: var(--hx-indigo-700);
    transition: color .3s ease;
  }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(2) .hx-stage__n { transition-delay: .70s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(3) .hx-stage__n { transition-delay: 1.25s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(4) .hx-stage__n { transition-delay: 1.80s; }
  .hx-armed .hx-rail[data-in] .hx-stage:nth-child(5) .hx-stage__n { transition-delay: 2.35s; }

  /* The four assistant panels: a thin indigo line draws across the top of each,
     in order — 1 → 2 → 3 → 4. Same language as the lifecycle rail, kept minimal:
     no scaling, no bouncing, just the line and a quiet lift on hover. */
  .hx-armed .hx-vs__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--hx-indigo);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hx-armed .hx-vs[data-in] .hx-vs__panel::before {
    transform: scaleX(1);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  .hx-armed .hx-vs[data-in] .hx-vs__panel:nth-child(1)::before { transition-delay: .10s; }
  .hx-armed .hx-vs[data-in] .hx-vs__panel:nth-child(2)::before { transition-delay: .35s; }
  .hx-armed .hx-vs[data-in] .hx-vs__panel:nth-child(3)::before { transition-delay: .60s; }
  .hx-armed .hx-vs[data-in] .hx-vs__panel:nth-child(4)::before { transition-delay: .85s; }

  /* Same treatment on the other place this line appears: Sense → Decide → Act. */
  .hx-armed .hx-beat--act { border-top-color: var(--hx-hair); }
  .hx-armed .hx-beat::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--hx-indigo);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hx-armed .hx-sda[data-in] .hx-beat::after {
    transform: scaleX(1);
    transition: transform .6s linear;

    /* Same travelling glint, crossing Sense → Decide → Act in order. */
    background: linear-gradient(
      90deg,
      var(--hx-indigo) 0%,
      var(--hx-indigo) 30%,
      #c7d2fe 45%,
      #eef2ff 50%,
      #c7d2fe 55%,
      var(--hx-indigo) 70%,
      var(--hx-indigo) 100%
    );
    background-size: 300% 100%;
    animation: hxGlint 3s linear infinite;
  }
  .hx-armed .hx-sda[data-in] .hx-beat:nth-child(1)::after { transition-delay: .15s; animation-delay: 2.0s; }
  .hx-armed .hx-sda[data-in] .hx-beat:nth-child(2)::after { transition-delay: .75s; animation-delay: 2.3s; }
  .hx-armed .hx-sda[data-in] .hx-beat:nth-child(3)::after { transition-delay: 1.35s; animation-delay: 2.6s; }

  /* A light runs the whole length of the rail, 01 → 05, then loops — the
     clearest read that the loop is *moving*, not just drawn. */
  .hx-armed .hx-rail[data-in]::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hx-indigo);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.13), 0 0 12px rgba(99, 102, 241, 0.65);
    transform: translateX(-50%);
    animation: hxTravel 4.6s cubic-bezier(.6, 0, .4, 1) infinite;
    animation-delay: 3s;
    pointer-events: none;
  }

  .hx-armed .hx-sda[data-in] .hx-beat .hx-beat__n {
    color: var(--hx-indigo-700);
    transition: color .3s ease;
  }
  .hx-armed .hx-sda[data-in] .hx-beat:nth-child(2) .hx-beat__n { transition-delay: .75s; }
  .hx-armed .hx-sda[data-in] .hx-beat:nth-child(3) .hx-beat__n { transition-delay: 1.35s; }

  /* Simulator score bars fill from zero when the panel comes into view. */
  .hx-armed .hx-score__fill {
    transition: width 1s cubic-bezier(.2, .7, .2, 1) .2s;
  }

  /* Hero entrance — one soft, staggered rise on load. Position is unchanged;
     these only animate opacity/translate to the element's existing spot. */
  .hero-templates-badge,
  .hero-v2-title,
  .hero-chat-wrapper,
  .hero-action-buttons {
    animation: hxHeroIn .8s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero-templates-badge  { animation-delay: .05s; }
  .hero-v2-title         { animation-delay: .14s; }
  .hero-chat-wrapper     { animation-delay: .23s; }
  .hero-action-buttons   { animation-delay: .32s; }

  /* Icon lift on the surface tiles. */
  .hx-surface svg { transition: transform .18s ease, color .18s ease; }
  .hx-surface:hover svg { transform: translateY(-2px); }

  /* Retained sections get the same hover language as the new cards. */
  .industry-card,
  .integrations-strip-logos img { transition: transform .18s ease, border-color .18s ease, filter .2s ease, opacity .2s ease; }
  .industry-card:hover { transform: translateY(-2px); }
}

@keyframes hxHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* The glint sweeping through a drawn line, left to right. Decreasing the
   background-position percentage slides the oversized gradient rightwards. */
@keyframes hxGlint {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* The light travelling the full length of the rail. */
@keyframes hxTravel {
  0%   { left: 0;    opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

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

@media (max-width: 1100px) {
  .hx-rail { grid-template-columns: repeat(2, 1fr); }
  /* Column 1 of each row owns no divider; column 2 carries it. */
  .hx-stage:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hx-stage:nth-child(odd)::before { left: 0; }
  .hx-stage:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--hx-hair); }
  .hx-stage:nth-child(even)::before { left: 28px; }
  .hx-vs { grid-template-columns: 1fr; }
  .hx-split { grid-template-columns: 1fr; gap: 36px; }
  .hx-split--rev .hx-split__visual { order: 0; }
  .hx-sda { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 640px) {
  /* Single column: the rail becomes a vertical spine down the left. */
  .hx-rail { grid-template-columns: 1fr; border-top: 0; }
  .hx-stage,
  .hx-stage:nth-child(odd),
  .hx-stage:nth-child(even) {
    padding: 22px 0 22px 24px;
    border-left: 1px solid var(--hx-hair);
  }
  .hx-stage--active { border-top: 0; margin-top: 0; border-left-color: var(--hx-indigo); }
  .hx-stage::before,
  .hx-stage:nth-child(odd)::before,
  .hx-stage:nth-child(even)::before { top: 26px; left: -5px; }

  /* The travelling line goes vertical with the rail: it now runs top-to-bottom
     down the left spine, still 01 → 02 → 03 → 04 → 05. */
  .hx-armed .hx-stage--active { border-left-color: var(--hx-hair); }
  .hx-armed .hx-stage::after {
    top: 0;
    bottom: 0;
    left: -1px;
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
  .hx-armed .hx-rail[data-in] .hx-stage::after { transform: scaleY(1); }
  .hx-vs__panel, .hx-soon { padding: 22px; }
  .hx-res { grid-template-columns: 1fr; }
  .hx-thread { padding: 18px; }
  .hx-thread__row { grid-template-columns: 1fr; gap: 8px; }
  .hx-trace__step { grid-template-columns: 1fr; gap: 6px; }
  .hx-trace__body { padding: 8px 16px 16px; }
  .hx-trace__bar { padding: 12px 16px; }
  .hx-q { grid-template-columns: 74px 1fr; }
  .hx-q__time { display: none; }
}

/* ==========================================================================
   Overrides on retained sections (integrations strip, industries, CTA).
   These sections keep their markup; only their colour noise is neutralised.
   The shared stylesheets are NOT edited — this file simply loads later.
   ========================================================================== */

/* Integration strip: grayscale by default, colour on hover. Reads enterprise. */
.integrations-strip-logos img {
  filter: grayscale(1) !important;
  opacity: .55;
  box-shadow: none !important;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.integrations-strip-logos img:hover {
  filter: grayscale(0) !important;
  opacity: 1;
}

/* Industries: the featured card's amber chip becomes indigo. */
.industry-card.featured .industry-icon { background: var(--hx-indigo-050) !important; }
.industry-card.featured .industry-icon svg { color: var(--hx-indigo-700) !important; }
.industry-card:hover { border-color: var(--hx-indigo-line) !important; }
.industry-link { color: var(--hx-indigo-700) !important; }

/* ==========================================================================
   HERO — colour / shape / weight only.
   Layout is deliberately untouched: the templates badge, the chat bar, the
   typewriter overlay and the two action buttons keep their exact positions,
   sizes and behaviour. Only the palette, the shadows and the type weight move
   onto the v3 system: indigo is the single accent, pink is gone, and the
   pulsing glow is replaced by a still shadow.
   ========================================================================== */

/* Ambient wash. The hero was flat #ffffff; the indigo "shade" it used to have
   was really just spill from the chatbox's coloured glow, which the restyle
   removed. This puts it back as an intentional background instead — three
   low-saturation radials (indigo, violet, a cool blue-lilac) layered over a
   barely-warm off-white, so it reads as depth rather than as a tint.
   Alpha is kept under .10 so headline contrast is untouched. */
.hero-v2 {
  background:
    radial-gradient(58% 45% at 50% 2%,  rgba(99, 102, 241, 0.095), transparent 72%),
    radial-gradient(42% 38% at 84% 26%, rgba(168, 85, 247, 0.070), transparent 70%),
    radial-gradient(46% 40% at 14% 34%, rgba(129, 140, 248, 0.065), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(99, 102, 241, 0.045), transparent 75%),
    #FCFCFD;
}

/* Softer dot field — it was competing with the chatbox. */
.hero-v2::before { opacity: 0.045; }

/* A quiet halo pooling under the chat bar, so it sits *in* the wash rather
   than floating on top of it. Non-interactive and behind the content. */
.hero-chat-wrapper::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 190%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.13), transparent 70%);
  filter: blur(6px);
}

/* Templates badge: was a 3-stop indigo→violet→black gradient with a 28px
   coloured glow. Now a calm indigo pill with a hairline. Same size, same spot. */
.hero-templates-badge {
  background: var(--hx-indigo-050);
  border: 1px solid var(--hx-indigo-line);
  color: var(--hx-indigo-700);
  box-shadow: none;
}
.hero-templates-badge:hover {
  transform: none;                       /* no scale-pop */
  background: #fff;
  border-color: var(--hx-indigo);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}
.hero-templates-badge-icon,
.hero-templates-badge-arrow { color: var(--hx-indigo-700); }

/* Title: 800 → 700, near-black → ink, tracking loosened to match .hx-h2.
   Width: .hero-content caps at 680px (632px inner), which is 12px too narrow
   for "Build your AI agents the way you think" at 40px — so the line wrapped
   early and stranded "think" on a line of its own. Widening the title to the
   same width as the chat bar lets it break only at the authored <br/>.
   .hero-content is a centred flex column, so an over-wide child overflows
   symmetrically — exactly how the chat bar already behaves. Nothing moves. */
.hero-v2-title {
  color: var(--hx-ink);
  font-weight: 700;
  letter-spacing: -0.022em;
  width: min(880px, calc(100vw - 32px));
  text-wrap: balance;   /* progressive: evens the two lines where supported */
}

/* Chat wrapper: kill the infinite pulse, keep a single still shadow. */
.hero-chat-wrapper {
  animation: none;
  box-shadow:
    0 30px 80px rgba(24, 28, 40, 0.10),
    0 8px 24px rgba(24, 28, 40, 0.06),
    0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* The rotating border stays — it's the hero's signature — but pink is dropped
   and the sweep is now indigo → purple only. */
.hero-chat-wrapper::before {
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 60deg,
    rgba(99, 102, 241, 0.85) 90deg,
    rgba(168, 85, 247, 0.55) 120deg,
    transparent 160deg,
    transparent 360deg
  );
}

/* Chat bar: solid white, not glass. It was rgba(255,255,255,.32) + backdrop
   blur, so the hero's indigo/violet wash showed straight through the panel and
   tinted it purple. The box is now opaque white — the wash stays *behind* it. */
.hero-input-wrap {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--hx-hair);
  box-shadow:
    0 18px 50px rgba(24, 28, 40, 0.08),
    0 2px 8px rgba(24, 28, 40, 0.04);
}
.hero-input-wrap:focus-within {
  background: #ffffff;
  border-color: var(--hx-indigo-line);
  box-shadow:
    0 0 0 1px var(--hx-indigo-line),
    0 18px 50px rgba(24, 28, 40, 0.10);
}

/* Send button: gradient → flat indigo. Disabled state left alone. */
.hero-send-btn {
  background: var(--hx-indigo);
  box-shadow: none;
}
.hero-send-btn:not(:disabled):hover {
  transform: none;
  background: var(--hx-indigo-600);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
}

/* Primary CTA: heavy black slab → the section's one filled indigo button. */
.hero-action-btn--primary {
  background: var(--hx-indigo);
  color: #fff;
  box-shadow: none;
}
.hero-action-btn--primary:hover {
  background: var(--hx-indigo-600);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.24);
}

/* Secondary CTA: hairline outline, matching .hx-btn. */
.hero-action-btn--secondary {
  border: 1.5px solid var(--hx-hair-2);
  color: var(--hx-ink);
  box-shadow: none;
}
.hero-action-btn--secondary:hover {
  background: #fff;
  border-color: var(--hx-ink);
}

/* Respect the user's motion setting: stop the border sweep entirely. */
@media (prefers-reduced-motion: reduce) {
  .hero-chat-wrapper::before { animation: none; }
}

/* ==========================================================================
   Photographic sections — two full-bleed bands + two image/copy splits
   --------------------------------------------------------------------------
   The indigo in these photographs is light: it comes from the screens inside
   the frame. Never add a tint, wash, gradient overlay or hue-rotate on top of
   an image here — it kills the photograph and fakes the accent.

   Text over an image gets a DIRECTIONAL scrim, on the side the text sits on,
   never a flat wash across the whole frame. Measured worst-case contrast
   (brightest pixel under the text box, scrim composited, 375→1920px):
     statement line #fff .......... 6.47:1  (mobile bottom scrim: 10.3–12.2:1)
     surfaces heading  #fff ....... 8.41:1
     surfaces body     #c9cbd6 .... 5.21:1
   All clear 4.5:1 body / 3:1 heading. If one ever fails, strengthen the
   scrim — do not lighten the text.

   Motion: the bands reuse .hx-reveal (fade + 12px rise), which already lives
   inside @media (prefers-reduced-motion: no-preference). No parallax, no
   Ken Burns, no zoom-on-scroll — the photographs are still.
   ========================================================================== */

.hx-band {
  position: relative;
  display: flex;
  width: 100%;
  /* Dark before the image arrives: the band never flashes white on slow 3G. */
  background: #0a0b0f;
  overflow: hidden;
  isolation: isolate;
}

.hx-band__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The scrim. Each band sets its own direction below. */
.hx-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hx-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hx-maxw);
  margin: 0 auto;
  /* Gutter only — the band itself stays edge to edge. */
  padding-inline: var(--hx-gutter);
}

/* ---------- Band 1: the statement (ops-room) ---------- */
/* A held breath, not a hero: one quiet line in the dark right-hand third,
   where the room falls away. The restraint is the effect — do not scale
   this line up into a headline. */

.hx-band--statement {
  min-height: min(78vh, 760px);
  align-items: center;
}
.hx-band--statement::after {
  background: linear-gradient(270deg,
    rgba(10, 11, 15, 0.85) 0%,
    rgba(10, 11, 15, 0.55) 40%,
    transparent 70%);
}
.hx-band--statement .hx-band__inner {
  justify-content: flex-end;
  padding-block: clamp(56px, 8vw, 96px);
}

.hx-band__line {
  flex: 0 1 480px;
  margin: 0;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

/* RTL (ar, he): the dark third of this photograph is on the right — that is a
   fact about the image, not about reading direction. Left un-corrected, the
   flex-end above resolves to the LEFT in RTL and drops the line straight onto
   the lit monitors, with the scrim behind the wrong edge. Pin the copy back to
   the dark side; the text inside it still reads right-to-left. */
[dir="rtl"] .hx-band--statement .hx-band__inner { justify-content: flex-start; }

/* ---------- Band 2: surfaces ---------- */
/* The five objects sit in the lower half of the frame; the copy sits in the
   upper negative space above them. object-position pushes the objects down. */

.hx-band--surfaces {
  min-height: 62vh;
  align-items: flex-start;
}
/* Anchor the crop to the top of the frame: the objects begin ~28% down the
   photograph, so top-anchoring buys the copy every pixel of clear slate the
   image has. Anything else drags the objects up into the text. */
.hx-band--surfaces .hx-band__img { object-position: center top; }
.hx-band--surfaces::after {
  background: linear-gradient(180deg,
    rgba(10, 11, 15, 0.88) 0%,
    rgba(10, 11, 15, 0.62) 45%,
    transparent 78%);
}
.hx-band--surfaces .hx-band__inner {
  justify-content: center;
  padding-block: clamp(28px, 3.4vw, 56px) clamp(64px, 12vw, 140px);
}

.hx-band__copy {
  max-width: 720px;
  text-align: center;
}
.hx-band__h {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.hx-band__p {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: #c9cbd6;
}

/* A band opening a section needs air before the light content resumes. */
.hx-band + .hx-wrap { margin-top: clamp(56px, 6vw, 88px); }

/* ---------- Image + copy splits (cables, workdesk) ---------- */

.hx-split__figure { margin: 0; }

/* The cables photo argues left-to-right: tangle resolves into ordered lines.
   In RTL the grid flips and the eye enters at the ordered end, so the argument
   runs backwards — order dissolving into chaos. Mirror the frame so the motion
   still follows the reader. Only this image: it is the one carrying direction. */
[dir="rtl"] .hx-flip-rtl { transform: scaleX(-1); }

.hx-split__img {
  display: block;
  width: 100%;
  height: auto;              /* with the width/height attrs: no layout shift */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0a0b0f;       /* dark placeholder while the file is in flight */
}

/* Two columns from 1024px up. The page's other splits stack at 1100px; the
   photographic ones hold two columns down to 1024 because the image carries
   half the argument and is worth the narrower column. This sits after the
   max-width:1100px stack rule and matches its specificity, so it wins in the
   1024–1100 band — for .hx-split--media only. */
@media (min-width: 1024px) {
  .hx-split--media { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Surfaces row — the travelling signal
   --------------------------------------------------------------------------
   The section claims ONE agent stands behind every channel. So one pulse
   walks the row — voice → WhatsApp → SMS → email → social → booking → CRM —
   lighting each tile in turn rather than all of them blinking at once. It is
   the same idiom as the lifecycle rail's travelling line, and it says the
   thing the copy says: the same brain, arriving at each surface.

   Only border-colour, shadow and icon colour animate — never transform, which
   the stagger reveal already owns. Hover cancels the loop so a pointing user
   is never fighting the animation. The whole thing lives inside
   prefers-reduced-motion: no-preference and only runs once the row is in view.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-surface-signal {
    0%        { border-color: var(--hx-hair);
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    5%        { border-color: var(--hx-indigo-line);
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10); }
    11%       { border-color: var(--hx-indigo-line);
                box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.04); }
    20%, 100% { border-color: var(--hx-hair);
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  }
  @keyframes hx-surface-signal-ic {
    0%        { color: var(--hx-ink-50); }
    5%, 11%   { color: var(--hx-indigo); }
    20%, 100% { color: var(--hx-ink-50); }
  }

  /* 6.3s cycle: the pulse crosses the seven tiles in the first ~2.7s, then the
     row rests. A constant strobe would be noise; the pause is what makes it
     read as one thing moving, not seven things flashing. */
  .hx-armed .hx-surfaces[data-in] .hx-surface {
    animation: hx-surface-signal 6.3s ease-in-out infinite;
  }
  .hx-armed .hx-surfaces[data-in] .hx-surface svg {
    animation: hx-surface-signal-ic 6.3s ease-in-out infinite;
  }

  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(1),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(1) svg { animation-delay: 0s; }
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(2),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(2) svg { animation-delay: .45s; }
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(3),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(3) svg { animation-delay: .90s; }
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(4),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(4) svg { animation-delay: 1.35s; }
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(5),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(5) svg { animation-delay: 1.80s; }
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(6),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(6) svg { animation-delay: 2.25s; }
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(7),
  .hx-armed .hx-surfaces[data-in] .hx-surface:nth-child(7) svg { animation-delay: 2.70s; }

  /* Pointing at a tile stops the loop on that tile — the hover state (lift +
     indigo border + indigo icon, already defined above) takes over cleanly. */
  .hx-armed .hx-surfaces[data-in] .hx-surface:hover,
  .hx-armed .hx-surfaces[data-in] .hx-surface:hover svg { animation: none; }
}

/* ==========================================================================
   CTA — "Ready to transform your customer experience?"
   --------------------------------------------------------------------------
   The markup stays exactly as it is (form action, field names and every
   data-i18n key untouched); this is a restyle only, and it lives here rather
   than in css/shared/s-7b769d0663.css because 49 other pages read that file.

   What it was: a navy card with a violet→pink gradient headline, a purple
   radial glow and lilac feature dots. Three accents the v3 palette doesn't
   have. What it is now: the same charcoal as the mock frames and the photo
   bands, with indigo as the only accent — so the page ends in the language it
   spent the whole scroll establishing.
   ========================================================================== */

.cta-section {
  padding-block: clamp(88px, 10vw, 148px);
  background: var(--hx-page);
}

.cta-card {
  background: var(--hx-mock);              /* #13151a — charcoal, never navy */
  border: 1px solid var(--hx-mock-hair);
  border-radius: var(--hx-r-lg);
  padding: clamp(32px, 5vw, 64px);
  box-shadow: var(--hx-shadow);
}

/* The violet glow becomes a single quiet indigo one, pushed into the corner
   behind the form so it lifts the card without lighting up the copy. */
.cta-card::before {
  top: -140px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, transparent 62%);
}

.cta-content {
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
}

/* ---------- copy ---------- */

.cta-text h2 {
  margin-bottom: 18px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #fff;
}

/* Kill the gradient text fill — both spans go plain white… */
.cta-text h2 span {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
/* …and the question itself carries the accent, as a hairline under the second
   half. Solid indigo, not the indigo→purple gradient: that pairing is spent
   once on the #layer headline and stays a one-off. */
.cta-text h2 span + span {
  position: relative;
  display: inline-block;
}
.cta-text h2 span + span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 2px;
  border-radius: 2px;
  background: var(--hx-indigo);
}

.cta-text p {
  max-width: 460px;
  margin-bottom: 30px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.66);        /* 8.1:1 on the card */
}

/* ---------- the two proof chips ---------- */

.cta-features {
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-bottom: 30px;
}
.cta-feature-icon {
  background: rgba(99, 102, 241, 0.16);
  border: 1px solid rgba(99, 102, 241, 0.36);
  box-sizing: border-box;
}
.cta-feature-icon svg { color: #a5b4fc; }
.cta-feature span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);        /* 9.4:1 */
}

/* ---------- the form panel ---------- */

.cta-form {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--hx-r-md);
  padding: clamp(22px, 2.6vw, 30px);
}
.cta-form h3 { font-size: 19px; }
.cta-form > p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);        /* 6.0:1 */
}

.cta-card .form-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--hx-r-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cta-card .form-input::placeholder {
  color: rgba(255, 255, 255, 0.5);         /* 5.3:1 — placeholders are read too */
}
.cta-card .form-input:focus {
  border-color: var(--hx-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Two calls to action sat side by side in identical white. They are different
   journeys — self-serve above, talk-to-sales here — so they no longer dress
   the same: the form's button takes the indigo. */
.cta-card .form-submit {
  margin-top: 10px;
  border: 0;
  background: var(--hx-indigo-600);
  color: #fff;
}
.cta-card .form-submit:hover {
  background: var(--hx-indigo-700);
  color: #fff;
}

/* ---------- Bands on small screens ---------- */

/* Below 1024px the band is taller than the photograph is wide, so the image is
   scaled to fit the height and we see a zoomed-in centre crop — brighter slate
   ends up under the copy. Measured at 768px, the body text fell to 4.49:1,
   just under the floor. Strengthen the scrim (never lighten the text): this
   puts the whole 375–1023px range back at 5.6–8.5:1. */
@media (max-width: 1023px) {
  .hx-band--surfaces::after {
    background: linear-gradient(180deg,
      rgba(10, 11, 15, 0.92) 0%,
      rgba(10, 11, 15, 0.70) 45%,
      transparent 80%);
  }
}

/* The right-hand third is ~140px wide at 375px — unusable. Below 768px the
   statement line drops to the foot of the frame and the scrim rotates to
   match it, so the text still sits on its own darkness. */

@media (max-width: 768px) {
  .hx-band--statement {
    min-height: min(72vh, 620px);
    align-items: stretch;
  }
  .hx-band--statement::after {
    background: linear-gradient(0deg,
      rgba(10, 11, 15, 0.92) 0%,
      rgba(10, 11, 15, 0.62) 42%,
      transparent 78%);
  }
  .hx-band--statement .hx-band__inner {
    align-items: flex-end;
    padding-block: clamp(40px, 10vw, 64px);
  }
  .hx-band__line { flex: 1 1 auto; }

  .hx-band--surfaces { min-height: 56vh; }
  .hx-band--surfaces .hx-band__inner {
    padding-block: clamp(36px, 8vw, 56px) clamp(48px, 14vw, 96px);
  }
}