/* =====================================================================
   Homepage v4
   The homepage sections that sell automation, in the visual language of
   the v4 service pages (assets/svc4.css): product windows with rows that
   arrive on a frame clock, white UI fragments on tinted panels, tag chips,
   a night band with a white form card. svc4.css is scoped to body.svc4 and
   repaints the whole page, so this file carries its own copy of the parts
   the homepage needs, under .hx, and follows the site theme toggle:
   light panels by day, night panels when html.amx-dark is on.
   Motion: entries land on an ease-out (snap), exits accelerate, siblings
   arrive a few frames apart, opacity only ever helps a movement.
   ===================================================================== */

.hx {
  --hx-text: var(--rv-text, #12121a);
  --hx-muted: var(--rv-muted, #626271);
  --hx-line: var(--rv-line, #dedee6);
  --hx-ink: #15131d;
  --hx-ink-2: #4c4958;
  --hx-ink-3: #6f6c82;
  --hx-paper: #f6f5f1;
  --hx-paper-2: #eeece6;
  --hx-on: #f5f4fa;
  --hx-on-2: rgba(245, 244, 250, .72);
  --hx-on-3: rgba(245, 244, 250, .5);
  --hx-violet: #6d5cf6;
  --hx-violet-2: #8b7bff;
  --hx-violet-ink: #4c3dd6;
  --hx-violet-soft: #e9e6ff;
  --hx-green: #14a06f;
  --hx-green-soft: #dcf3e9;
  --hx-amber-ink: #8a5a00;
  --hx-amber-soft: #fff1d1;
  --hx-snap: cubic-bezier(.16, 1, .3, 1);
  --hx-soft: cubic-bezier(.33, 1, .68, 1);
  --hx-glide: cubic-bezier(.61, 1, .88, 1);
  --hx-accel: cubic-bezier(.32, 0, .67, 0);
  --hx-inout: cubic-bezier(.65, 0, .35, 1);
  --hx-display: "Satoshi", "Inter Tight", Inter, system-ui, sans-serif;
  --hx-body: Inter, "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hx-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* product window, light by default */
  --w-bg: #fff;
  --w-text: #15131d;
  --w-sub: #6f6c82;
  --w-line: rgba(21, 19, 29, .08);
  --w-ic: #f1effb;
  --w-ic-fg: #4c3dd6;
  --w-now: rgba(109, 92, 246, .08);
  --w-now-ring: rgba(109, 92, 246, .22);
  --w-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(21,19,29,.06), 0 30px 60px -30px rgba(40,30,90,.4), 0 10px 22px -12px rgba(40,30,90,.2);
  --w-light: rgba(21, 19, 29, .12);
  --tag-auto-fg: #0b6d4a; --tag-auto-bg: #dcf3e9; --tag-auto-ring: rgba(20,160,111,.25);
  --tag-in-fg: #4c3dd6;   --tag-in-bg: #ebe8ff;   --tag-in-ring: rgba(109,92,246,.25);
  --tag-hand-fg: #8a5a00; --tag-hand-bg: #fff1d1; --tag-hand-ring: rgba(201,130,31,.28);

  font-family: var(--hx-body);
  color: var(--hx-text);
}
html.amx-dark .hx {
  --w-bg: linear-gradient(180deg, rgba(33, 29, 54, .94), rgba(20, 18, 33, .97));
  --w-text: #fff;
  --w-sub: rgba(245, 244, 250, .62);
  --w-line: rgba(255, 255, 255, .09);
  --w-ic: rgba(255, 255, 255, .07);
  --w-ic-fg: #d8d3ff;
  --w-now: rgba(139, 123, 255, .12);
  --w-now-ring: rgba(139, 123, 255, .26);
  --w-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 1px 0 rgba(255,255,255,.12) inset, 0 40px 90px -30px rgba(0,0,0,.8), 0 24px 60px -36px rgba(109,92,246,.55);
  --w-light: rgba(255, 255, 255, .16);
  --tag-auto-fg: #7ff0bf; --tag-auto-bg: rgba(61,220,151,.12); --tag-auto-ring: rgba(61,220,151,.24);
  --tag-in-fg: #d6d0ff;   --tag-in-bg: rgba(139,123,255,.16); --tag-in-ring: rgba(139,123,255,.32);
  --tag-hand-fg: #ffd28a; --tag-hand-bg: rgba(255,186,73,.12); --tag-hand-ring: rgba(255,186,73,.28);
}
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx svg { display: block; }
.hx [hidden] { display: none !important; }

/* ---------- Section frame ---------- */
.hx-sec { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.hx-head { text-align: center; max-width: 820px; margin: 0 auto clamp(36px, 5vw, 60px); }
.hx-pill {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  font: 500 13.5px/1.4 var(--hx-body); color: var(--hx-muted);
  background: color-mix(in srgb, var(--hx-text) 4%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hx-text) 10%, transparent) inset;
}
.hx-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-violet-2); box-shadow: 0 0 0 4px rgba(139,123,255,.22); flex: none; }
.hx-h2 {
  margin: 0; font-family: var(--hx-display); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.03; letter-spacing: -.04em;
  color: var(--hx-text); text-wrap: balance;
}
.hx-sub { margin: 18px auto 0; max-width: 640px; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: var(--hx-muted); text-wrap: pretty; }
.hx-head-split { display: grid; gap: 18px; text-align: left; max-width: none; align-items: end; }
.hx-head-split .hx-sub { margin: 0; max-width: 520px; }
@media (min-width: 900px) { .hx-head-split { grid-template-columns: 1fr minmax(0, 480px); } }

/* =====================================================================
   PANELS: tinted art boards that hold a product window or UI cards
   ===================================================================== */
.hx-art {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px; padding: 46px 16px 62px;
  display: grid; place-items: center; min-height: 340px;
}
.hx-art-pop { padding-bottom: 118px; }
.hx-tint-lilac { background: radial-gradient(120% 90% at 20% 0%, #f5f2ff, #ebe7fb); }
.hx-tint-sand  { background: radial-gradient(120% 90% at 20% 0%, #faf5ee, #f3eadd); }
.hx-tint-sky   { background: radial-gradient(120% 90% at 20% 0%, #f2f6fd, #e3ebf8); }
.hx-tint-mint  { background: radial-gradient(120% 90% at 20% 0%, #f1f8f4, #e0f0e7); }
html.amx-dark .hx-art { background: radial-gradient(90% 80% at 70% 0%, #2a2350, #151225 72%); box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; }
html.amx-dark .hx-tint-sand { background: radial-gradient(90% 80% at 30% 0%, #2e2440, #151225 72%); }
html.amx-dark .hx-tint-sky  { background: radial-gradient(90% 80% at 70% 0%, #1f2550, #121427 72%); }
html.amx-dark .hx-tint-mint { background: radial-gradient(90% 80% at 30% 0%, #1d2a3a, #121625 72%); }
html.amx-dark .hx-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 80%); mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 80%);
}
.hx-ex {
  position: absolute; top: 15px; left: 18px; margin: 0;
  font: 600 10.5px/1 var(--hx-mono); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hx-text) 48%, transparent);
}
html.amx-dark .hx-ex { color: rgba(245,244,250,.5); }

/* the pause control every moving panel carries */
.hx-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px 0 11px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 var(--hx-body); letter-spacing: .01em;
  color: var(--hx-ink-2); background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 1px rgba(21,19,29,.08) inset; backdrop-filter: blur(8px);
  transition: background .2s, color .2s;
}
.hx-pause::before { content: ""; position: absolute; inset: -4px; }
/* Out of sight unless a keyboard user tabs to it: the panels stay clean and can still be paused. */
.hx-pause:not(:focus-visible) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; backdrop-filter: none; }
.hx-pause:hover { background: #fff; color: var(--hx-ink); }
.hx-pause:focus-visible { outline: 2px solid var(--hx-violet); outline-offset: 2px; }
html.amx-dark .hx-pause { color: rgba(245,244,250,.8); background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
html.amx-dark .hx-pause:hover { color: #fff; background: rgba(255,255,255,.13); }
.hx-pause-ic { position: relative; width: 10px; height: 10px; }
.hx-pause-ic::before, .hx-pause-ic::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: currentColor; }
.hx-pause-ic::before { left: 1px; } .hx-pause-ic::after { right: 1px; }
.hx-pause[aria-pressed="true"] .hx-pause-ic::before { left: 1px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
.hx-pause[aria-pressed="true"] .hx-pause-ic::after { display: none; }

/* decorative loops run only while a panel is on screen and playing */
.hx-art:not(.is-playing) *, .hx-art:not(.is-playing) *::before, .hx-art:not(.is-playing) *::after { animation-play-state: paused !important; }

/* ---------- The product window (the v4 stage, small) ---------- */
.hx-win {
  position: relative; z-index: 1; margin: 0; width: 100%; max-width: 440px;
  border-radius: 18px; overflow: hidden;
  background: var(--w-bg); color: var(--w-text); box-shadow: var(--w-shadow);
}
.hx-win-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--w-line); min-height: 58px; }
.hx-lights { display: flex; gap: 6px; flex: none; }
.hx-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--w-light); }
.hx-win-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hx-win-title b { font: 700 14px/1.25 var(--hx-display); letter-spacing: -.01em; color: var(--w-text); }
.hx-win-title span { font-size: 12px; color: var(--w-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-win-clock { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none; font: 500 12px/1 var(--hx-mono); color: var(--w-sub); white-space: nowrap; }
.hx-live { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; flex: none; animation: hx-pulse 2.4s var(--hx-glide) infinite; }
@keyframes hx-pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61,220,151,0); } }

.hx-log { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; min-height: 236px; align-content: start; }
.hx-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 9px; border-radius: 12px; }
.hx-row + .hx-row::before { content: ""; position: absolute; left: 25px; top: -9px; height: 18px; width: 1px; background: linear-gradient(transparent, var(--w-line), transparent); }
.hx-row.is-now { background: var(--w-now); box-shadow: 0 0 0 1px var(--w-now-ring) inset; }
.hx-row-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--w-ic); color: var(--w-ic-fg); }
.hx-row-ic svg, .hx-chip-ic svg, .hx-node-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-row-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.32; }
.hx-row-tx b { font: 700 13.5px/1.3 var(--hx-display); letter-spacing: -.01em; color: var(--w-text); }
.hx-row-tx span { font-size: 12px; color: var(--w-sub); }
.hx-tag { justify-self: end; font: 600 11px/1 var(--hx-body); letter-spacing: .01em; padding: 5px 9px; border-radius: 999px; white-space: nowrap; color: var(--tag-auto-fg); background: var(--tag-auto-bg); box-shadow: 0 0 0 1px var(--tag-auto-ring) inset; }
.hx-tag-in { color: var(--tag-in-fg); background: var(--tag-in-bg); box-shadow: 0 0 0 1px var(--tag-in-ring) inset; }
.hx-tag-hand { color: var(--tag-hand-fg); background: var(--tag-hand-bg); box-shadow: 0 0 0 1px var(--tag-hand-ring) inset; }
/* a tag that turns from "By hand" into "Auto" */
.hx-flip { display: inline-grid; justify-self: end; }
.hx-flip > .hx-tag { grid-area: 1 / 1; justify-self: end; transition: opacity .2s linear, transform .45s var(--hx-snap); }
.hx-flip > .hx-tag + .hx-tag { opacity: 0; transform: translateY(8px) scale(.9); }
.hx-row.is-done .hx-flip > .hx-tag:first-child { opacity: 0; transform: translateY(-8px) scale(.9); }
.hx-row.is-done .hx-flip > .hx-tag + .hx-tag { opacity: 1; transform: none; }
.hx-row.is-done .hx-row-ic { color: var(--tag-auto-fg); background: var(--tag-auto-bg); transition: background .3s, color .3s; }

/* the white payoff card that lands over the window */
.hx-pop {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 56px; margin-inline: auto; max-width: 300px;
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 15px;
  background: #fff; color: var(--hx-ink);
  box-shadow: 0 0 0 1px rgba(21,19,29,.06), 0 30px 60px -24px rgba(20,14,60,.5), 0 8px 18px -10px rgba(20,14,60,.25);
}
.hx-pop div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hx-pop b { font: 700 14px/1.3 var(--hx-display); letter-spacing: -.01em; }
.hx-pop span:not(.hx-tick) { font-size: 12px; color: var(--hx-ink-3); }
.hx-tick {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--hx-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Search window ---------- */
.hx-qbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--w-ic); box-shadow: 0 0 0 1px var(--w-line) inset; font-size: 13px; color: var(--w-text); }
.hx-qbar svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--hx-violet-2); stroke-width: 2; stroke-linecap: round; }
.hx-typed { white-space: nowrap; overflow: hidden; min-width: 0; }
.hx-caret { width: 1.5px; height: 15px; background: var(--hx-violet-2); flex: none; margin-left: -6px; animation: hx-caret 1s steps(2) infinite; }
@keyframes hx-caret { 50% { opacity: 0; } }
.hx-serp { --rh: 46px; --rg: 6px; list-style: none; margin: 0; padding: 10px 10px 8px; display: grid; gap: var(--rg); }
.hx-res { position: relative; height: var(--rh); display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 12px; transition: transform .7s var(--hx-snap); }
.hx-fav { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--w-ic); color: var(--w-sub); font: 700 11px/1 var(--hx-display); }
.hx-res-lines { flex: 1; display: grid; gap: 6px; }
.hx-res-lines i { display: block; height: 6px; border-radius: 4px; background: var(--w-line); }
.hx-res-lines i:first-child { width: 62%; height: 8px; background: color-mix(in srgb, var(--w-sub) 30%, transparent); }
.hx-res-lines i:last-child { width: 86%; }
.hx-res-you { background: var(--w-now); box-shadow: 0 0 0 1px var(--w-now-ring) inset; z-index: 1; }
.hx-res-you .hx-fav { background: var(--hx-violet); color: #fff; }
.hx-res-you div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hx-res-you b { font: 700 13.5px/1.3 var(--hx-display); color: var(--w-text); }
.hx-res-you small { font-size: 11.5px; color: var(--w-sub); }
.hx-res-you .hx-tag { margin-left: auto; }
.hx-serp.is-done .hx-res-you { transform: translateY(calc(-2 * (var(--rh) + var(--rg)))); }
.hx-serp.is-done .hx-res:not(.hx-res-you) { transform: translateY(calc(var(--rh) + var(--rg))); }
.hx-checks { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 14px; min-height: 76px; align-content: flex-start; }
.hx-check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px; font: 600 12px/1.2 var(--hx-body); color: var(--w-text); background: var(--w-ic); box-shadow: 0 0 0 1px var(--w-line) inset; }
.hx-check .hx-tick { width: 17px; height: 17px; background-size: 10px; }

/* ---------- White UI fragments (services panels) ---------- */
.hx-ui {
  position: relative; background: #fff; color: var(--hx-ink); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(21,19,29,.06), 0 24px 50px -24px rgba(40,30,90,.38), 0 8px 18px -10px rgba(40,30,90,.18);
  font-size: 13.5px; line-height: 1.4;
}
html.amx-dark .hx-ui { box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 34px 70px -26px rgba(0,0,0,.75); }
.hx-ui b { font-family: var(--hx-display); font-weight: 700; letter-spacing: -.01em; }
.hx-chip-ic, .hx-node-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--hx-violet-soft); color: var(--hx-violet-ink); }
.hx-chip-ic img, .hx-node-ic img { width: 20px; height: 20px; }
.hx-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 13px/1 var(--hx-display); color: #fff; background: linear-gradient(135deg, #8b7bff, #5a48e8); }

/* automation: one trigger, four steps that happen on their own */
.hx-flow { position: relative; width: 100%; max-width: 420px; display: grid; }
.hx-flow-card { padding: 16px 16px 10px; }
.hx-flow-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid rgba(21,19,29,.07); }
.hx-flow-head div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hx-flow-head b { font-size: 15px; }
.hx-flow-head span { font-size: 12px; color: var(--hx-ink-3); }
.hx-flow-steps { list-style: none; margin: 0; padding: 6px 0 0; position: relative; }
.hx-flow-steps::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--hx-paper-2); }
.hx-flow-steps li { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 9px 0; }
.hx-flow-steps li > span:first-child { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; background: #fff; box-shadow: 0 0 0 2px var(--hx-paper-2) inset; position: relative; z-index: 1; transition: background-color .3s, box-shadow .3s; }
.hx-flow-steps b { font-size: 13.5px; line-height: 1.3; }
.hx-flow-steps small { font-size: 12px; color: var(--hx-ink-3); line-height: 1.35; }
.hx-flow-steps li.is-on > span:first-child { box-shadow: none; background: var(--hx-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.hx-flow-chip { position: absolute; right: -12px; top: -50px; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px; }
.hx-flow-chip div { display: flex; flex-direction: column; line-height: 1.25; }
.hx-flow-chip b { font-size: 13.5px; }
.hx-flow-chip span:not(.hx-chip-ic):not(.hx-tick) { font-size: 11.5px; color: var(--hx-ink-3); }

/* integration: one record, four systems */
.hx-sync { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1.3; }
.hx-sync-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hx-sync-lines path { fill: none; stroke: rgba(76,61,214,.38); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: hx-flowline 1.6s linear infinite; }
html.amx-dark .hx-sync-lines path { stroke: rgba(201,194,255,.42); }
@keyframes hx-flowline { to { stroke-dashoffset: -20; } }
.hx-sync-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 14px 18px; text-align: center; }
.hx-sync-core .hx-avatar { margin-bottom: 4px; }
.hx-sync-core b { font-size: 15px; }
.hx-sync-core > span:not(.hx-avatar):not(.hx-sync-pill) { font-size: 11.5px; color: var(--hx-ink-3); white-space: nowrap; }
.hx-sync-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 13px; }
.hx-sync-node b { font-size: 12.5px; white-space: nowrap; }
.hx-sync-node .hx-node-ic { width: 28px; height: 28px; border-radius: 8px; }
.hx-sync-node .hx-node-ic img { width: 17px; height: 17px; }
.hx-sync-node .hx-node-ic svg { width: 15px; height: 15px; }
.hx-sync-node .hx-tick { width: 16px; height: 16px; background-size: 10px; }
.hx-n1 { left: 0; top: 4%; } .hx-n2 { right: 0; top: 4%; } .hx-n3 { left: 0; bottom: 4%; } .hx-n4 { right: 0; bottom: 4%; }
.hx-sync-pill { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 5px 10px 5px 6px; border-radius: 999px; white-space: nowrap; font: 600 11.5px/1.2 var(--hx-body); color: #0b6d4a; background: var(--hx-green-soft); }
.hx-sync-pill .hx-tick { width: 15px; height: 15px; background-size: 9px; }

/* SEO: the listing, and what sits behind it */
.hx-seo { position: relative; width: 100%; max-width: 420px; display: grid; gap: 12px; }
.hx-seo-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.hx-seo-search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--hx-violet); stroke-width: 2; stroke-linecap: round; }
.hx-seo-search .hx-caret { background: var(--hx-violet); }
.hx-seo-result { padding: 16px 18px; }
.hx-seo-url { display: block; font: 500 11.5px/1.3 var(--hx-mono); color: var(--hx-ink-3); }
.hx-seo-result b { display: block; margin: 6px 0 4px; font-size: 17px; color: var(--hx-violet-ink); }
.hx-seo-result p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hx-ink-2); }
.hx-seo .hx-checks { padding: 0; min-height: 0; }
.hx-seo .hx-check { background: #fff; color: var(--hx-ink); box-shadow: 0 0 0 1px rgba(21,19,29,.08), 0 10px 22px -14px rgba(40,30,90,.4); }

/* the website reel, in a browser frame */
.hx-browser { position: relative; z-index: 1; width: 100%; max-width: 460px; border-radius: 16px; overflow: hidden; background: #0f0d18; box-shadow: var(--w-shadow); }
.hx-browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1b1828; }
.hx-browser-bar .hx-lights i { background: rgba(255,255,255,.18); }
.hx-url { flex: 1; text-align: center; font: 500 11.5px/1 var(--hx-mono); color: rgba(245,244,250,.6); padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); }
.hx-reel { height: 300px; background: #0f0d18; }
.hx-reel.is-paused > * { animation-play-state: paused !important; }
/* Eight sites, still 6s each: one 48s loop, the same hand-over timings as page-revamp.css scaled to 1/8.
   The delay counts up with --n so the sites play in page order (Frontline, then CES, then Lighting Bonanza...). */
.hx-reel > * { animation-duration: 48s; animation-delay: calc((var(--n) - 8) * 6s); }
.hx-reel > img:not(.rv-reel-pan) { animation-name: hx-reel-scroll; }
.hx-reel > video { animation-name: hx-reel-hold; }
.hx-reel > .rv-reel-pan { animation-name: hx-reel-pan; }
@keyframes hx-reel-scroll {
  0%    { opacity: 0; transform: translateY(0) }
  3%    { opacity: 1; transform: translateY(calc((100cqh - 100%) * .06)) }
  9.5%  { opacity: 1; transform: translateY(calc((100cqh - 100%) * .94)) }
  12.5% { opacity: 0; transform: translateY(calc(100cqh - 100%)) }
  100%  { opacity: 0; transform: translateY(calc(100cqh - 100%)) }
}
@keyframes hx-reel-hold {
  0%    { opacity: 0; transform: translateY(-50%) scale(1.05) }
  3%    { opacity: 1; transform: translateY(-50%) scale(1.04) }
  9.5%  { opacity: 1; transform: translateY(-50%) scale(1) }
  12.5% { opacity: 0; transform: translateY(-50%) scale(1) }
  100%  { opacity: 0; transform: translateY(-50%) scale(1) }
}
@keyframes hx-reel-pan {
  0%    { opacity: 0; transform: translateY(-50%) scale(1.08) translateX(1.5%) }
  3%    { opacity: 1; transform: translateY(-50%) scale(1.07) translateX(1.3%) }
  9.5%  { opacity: 1; transform: translateY(-50%) scale(1.01) translateX(-1.3%) }
  12.5% { opacity: 0; transform: translateY(-50%) scale(1) translateX(-1.5%) }
  100%  { opacity: 0; transform: translateY(-50%) scale(1) translateX(-1.5%) }
}
@media (prefers-reduced-motion: reduce) { .hx-reel > * { animation: none; } }

/* ---------- Scene choreography (home-v4.js adds .hx-scenes-on; without it everything shows) ---------- */
.hx-scenes-on [data-hx-scene] .hx-row[data-on] { opacity: 0; transform: translateY(12px); }
.hx-scenes-on [data-hx-scene] .hx-row[data-on].is-on { opacity: 1; transform: none; transition: transform .42s var(--hx-snap), opacity .14s linear; }
.hx-scenes-on [data-hx-scene].is-playing .hx-row.is-on .hx-tag:not(.hx-tag-hand) { animation: hx-tag-hit .5s var(--hx-glide) both; }
@keyframes hx-tag-hit { 0% { filter: brightness(1.6) saturate(1.4); } 100% { filter: none; } }
.hx-scenes-on [data-hx-scene].is-leaving .hx-row { opacity: 0; transform: translateY(-18px); transition: transform .4s var(--hx-accel), opacity .2s linear .15s; }

.hx-scenes-on [data-hx-scene] .hx-pop[data-on],
.hx-scenes-on [data-hx-scene] .hx-flow-chip[data-on],
.hx-scenes-on [data-hx-scene] .hx-sync-pill[data-on] { opacity: 0; transform: translateY(18px) scale(.96); }
.hx-scenes-on [data-hx-scene] .hx-pop[data-on].is-on,
.hx-scenes-on [data-hx-scene] .hx-flow-chip[data-on].is-on,
.hx-scenes-on [data-hx-scene] .hx-sync-pill[data-on].is-on { opacity: 1; transform: none; transition: transform .6s var(--hx-snap), opacity .15s linear; }
.hx-scenes-on [data-hx-scene].is-leaving .hx-pop,
.hx-scenes-on [data-hx-scene].is-leaving .hx-flow-chip,
.hx-scenes-on [data-hx-scene].is-leaving .hx-sync-pill { opacity: 0; transform: translateY(14px); transition: transform .4s var(--hx-accel), opacity .25s linear .1s; }

.hx-scenes-on [data-hx-scene] .hx-typed[data-on] { max-width: 0; }
.hx-scenes-on [data-hx-scene] .hx-typed[data-on].is-on { max-width: 100%; transition: max-width 1.1s steps(26, end); }
.hx-scenes-on [data-hx-scene] .hx-check[data-on],
.hx-scenes-on [data-hx-scene] .hx-sync-node[data-on] { opacity: 0; transform: scale(.88); }
.hx-scenes-on [data-hx-scene] .hx-check[data-on].is-on,
.hx-scenes-on [data-hx-scene] .hx-sync-node[data-on].is-on { opacity: 1; transform: none; transition: transform .5s var(--hx-snap), opacity .15s linear; }
.hx-scenes-on [data-hx-scene] .hx-sync-node .hx-tick { transform: scale(0); }
.hx-scenes-on [data-hx-scene] .hx-sync-node.is-on .hx-tick { transform: none; transition: transform .45s var(--hx-snap) .45s; }
.hx-scenes-on [data-hx-scene] .hx-seo-result[data-on] { opacity: 0; transform: translateY(14px); }
.hx-scenes-on [data-hx-scene] .hx-seo-result[data-on].is-on { opacity: 1; transform: none; transition: transform .55s var(--hx-snap), opacity .15s linear; }
.hx-scenes-on [data-hx-scene] .hx-flow-steps li[data-on] b,
.hx-scenes-on [data-hx-scene] .hx-flow-steps li[data-on] small { opacity: .38; transition: opacity .3s; }
.hx-scenes-on [data-hx-scene] .hx-flow-steps li.is-on b,
.hx-scenes-on [data-hx-scene] .hx-flow-steps li.is-on small { opacity: 1; }
.hx-scenes-on [data-hx-scene].is-leaving .hx-check,
.hx-scenes-on [data-hx-scene].is-leaving .hx-sync-node,
.hx-scenes-on [data-hx-scene].is-leaving .hx-seo-result { opacity: 0; transition: opacity .3s linear; }
.hx-scenes-on [data-hx-scene].is-leaving .hx-typed { opacity: 0; transition: opacity .25s linear; }
.hx-scenes-on [data-hx-scene].is-leaving .hx-serp .hx-res { opacity: 0; transition: opacity .3s linear; }

/* =====================================================================
   SOUND FAMILIAR: three problems, three fixes
   (#amx-sf is authored here, so amx-fx.js leaves it alone)
   ===================================================================== */
#amx-sf.hx-sf { margin: 0 auto; padding: 8px 0 0; }
.hx-sf-grid { display: grid; gap: 34px; max-width: 520px; margin: 0 auto; }
.hx-sf-card { display: flex; flex-direction: column; min-width: 0; }
.hx-sf-card h3 { margin: 24px 4px 10px; font: 700 clamp(21px, 1.8vw, 24px)/1.2 var(--hx-display); letter-spacing: -.025em; color: var(--hx-text); text-wrap: balance; }
.hx-sf-card > p { margin: 0 4px; font-size: 15.5px; line-height: 1.6; color: var(--hx-muted); text-wrap: pretty; }
.hx-sf-card .hx-art { min-height: 0; align-content: start; }
@media (min-width: 1000px) {
  .hx-sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 24px; }
  .hx-sf-card .hx-art { min-height: 480px; }
  .hx-sf-card .hx-win { min-height: 316px; }
}

/* =====================================================================
   SERVICES
   ===================================================================== */
#home-services.hx-svcs, #home-services.hx-svcs.amx-svc-section { margin: 0 auto !important; padding: 8px 0 0; }
.hx-svc-grid { display: grid; gap: clamp(34px, 3vw, 44px) clamp(22px, 2.4vw, 36px); }
.hx-svc { display: flex; flex-direction: column; min-width: 0; }
.hx-svc .hx-art { min-height: 380px; }
.hx-svc-body { padding: 24px 4px 0; display: flex; flex-direction: column; flex: 1; }
.hx-kicker { margin: 0 0 10px; font: 600 11.5px/1.3 var(--hx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hx-violet-ink); }
html.amx-dark .hx-kicker { color: #b9b0ff; }
.hx-svc-body h3 { margin: 0 0 12px; font: 700 clamp(24px, 2.2vw, 30px)/1.12 var(--hx-display); letter-spacing: -.03em; color: var(--hx-text); text-wrap: balance; }
.hx-svc-body > p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--hx-muted); text-wrap: pretty; max-width: 560px; }
.hx-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hx-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 650 14.5px/1.3 var(--hx-body); color: var(--hx-text) !important; text-decoration: none !important; }
.hx-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--hx-snap); }
.hx-link:hover { color: var(--hx-violet-ink) !important; }
html.amx-dark .hx-link:hover { color: #c9c2ff !important; }
.hx-link:hover svg { transform: translateX(3px); }
.hx-link:focus-visible { outline: 2px solid var(--hx-violet); outline-offset: 3px; border-radius: 4px; }
.hx-link-quiet { color: var(--hx-muted) !important; font-weight: 600; }

.hx-svc-more { display: grid; gap: 16px; margin-top: clamp(30px, 3vw, 44px); }
.hx-mini { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items: start; padding: 22px; border-radius: 20px; background: var(--rv-panel, #fff); box-shadow: 0 0 0 1px var(--hx-line) inset; }
.hx-mini .hx-chip-ic { width: 44px; height: 44px; border-radius: 12px; grid-row: 1 / span 4; }
.hx-mini > :not(.hx-chip-ic) { grid-column: 2; }
html.amx-dark .hx-mini .hx-chip-ic { background: rgba(139,123,255,.16); color: #d6d0ff; }
.hx-mini .hx-chip-ic svg { width: 20px; height: 20px; }
.hx-mini .hx-kicker { margin: 2px 0 2px; }
.hx-mini h3 { margin: 0 0 6px; font: 700 20px/1.2 var(--hx-display); letter-spacing: -.02em; color: var(--hx-text); }
.hx-mini p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--hx-muted); }
.hx-mini .hx-link { grid-column: 2; min-height: 40px; }
.hx-svc-all { display: flex; justify-content: center; margin-top: 26px; }

@media (min-width: 860px) {
  .hx-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-svc .hx-art { min-height: 0; aspect-ratio: 1.22; }
  .hx-svc-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   THE ENQUIRY: a night band with a white form card
   ===================================================================== */
#quick-enquiry.hx-enq {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  width: min(1200px, calc(100% - 32px)); margin: 28px auto 0; padding: clamp(28px, 5vw, 72px) clamp(16px, 4.6vw, 64px);
  border-radius: clamp(24px, 3vw, 36px);
  background: #0b0a13; color: var(--hx-on);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  scroll-margin-top: 84px;
}
.hx-enq-world { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 55% at 76% 40%, rgba(109,92,246,.5), transparent 72%),
    radial-gradient(36% 42% at 6% 100%, rgba(181,76,255,.26), transparent 70%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0 / 26px 26px;
}
/* phones: the intro, then the form, then what you get; wide: copy left, form right */
.hx-enq-grid { display: grid; gap: 30px; align-items: start; grid-template-areas: "top" "form" "rest"; }
.hx-enq-top { grid-area: top; }
.hx-enq-grid > .hx-form { grid-area: form; width: 100%; max-width: 640px; }
.hx-enq-rest { grid-area: rest; }
.hx-enq-top .hx-enq-lede { margin-bottom: 0; }
.hx-enq-copy .hx-pill { color: var(--hx-on-2); background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; }
.hx-enq-copy .hx-h2 { color: #fff; font-size: clamp(32px, 4vw, 52px); }
.hx-enq-lede { margin: 18px 0 28px; max-width: 520px; font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.6; color: var(--hx-on-2); }
.hx-gets-k { margin: 6px 0 12px; font-size: 13.5px; font-weight: 600; color: var(--hx-on-3); }
.hx-gets { list-style: none; margin: 0; padding: 0; counter-reset: g; display: grid; }
.hx-gets li { counter-increment: g; position: relative; padding: 13px 0 13px 50px; border-top: 1px solid rgba(255,255,255,.1); font-size: 15.5px; line-height: 1.5; color: var(--hx-on-2); }
.hx-gets li::before { content: "0" counter(g); position: absolute; left: 0; top: 13px; font: 500 12px/1 var(--hx-mono); color: var(--hx-violet-2); padding: 5px 8px; border-radius: 8px; background: rgba(139,123,255,.13); }
.hx-gets b { color: #fff; font-weight: 600; }
.hx-enq-where { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--hx-on-3); max-width: 480px; }
.hx-enq-where a { color: #c9c2ff !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,194,255,.4); }
.hx-founder { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.hx-founder img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center top; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.hx-founder div { display: flex; flex-direction: column; line-height: 1.35; }
.hx-founder b { font: 700 14.5px/1.3 var(--hx-display); color: #fff; }
.hx-founder span { font-size: 13px; color: var(--hx-on-3); }

/* ---------- the form card ---------- */
.hx-form {
  position: relative; display: flex; flex-direction: column; margin: 0;
  padding: 22px 18px 20px; border-radius: 26px; background: #fff; color: var(--hx-ink);
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.85), 0 30px 80px -40px rgba(109,92,246,.6), 0 0 0 1px rgba(255,255,255,.12);
  font-family: var(--hx-body);
}
.hx-form-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.hx-form-step { margin: 0; font-size: 13px; font-weight: 600; color: var(--hx-ink-3); white-space: nowrap; }
@media (max-width: 400px) { .hx-form-step em { display: none; } }
.hx-form-step em { font-style: normal; font-weight: 500; color: #9a97aa; }
.hx-prog { display: flex; gap: 5px; }
.hx-prog i { width: 30px; height: 5px; border-radius: 5px; background: var(--hx-paper-2); position: relative; overflow: hidden; }
.hx-prog i::after { content: ""; position: absolute; inset: 0; background: var(--hx-violet); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--hx-snap); }
.hx-prog i.is-on::after { transform: none; }
/* without JS every step shows, one after another, so the progress is noise */
.hx-form:not(.is-stepped) .hx-form-top, .hx-form:not(.is-stepped) .hx-back { display: none; }
.hx-form:not(.is-stepped) .hx-fs + .hx-fs { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(21,19,29,.08); }

.hx-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.hx-fs.is-entering { animation: hx-fs-in .5s var(--hx-snap) both; }
.hx-fs.is-back { animation-name: hx-fs-back; }
@keyframes hx-fs-in { from { opacity: 0; transform: translateX(36px); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hx-fs-back { from { opacity: 0; transform: translateX(-36px); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.hx-q { display: block; float: left; width: 100%; padding: 0; margin: 0; font: 700 clamp(22px, 2.2vw, 27px)/1.18 var(--hx-display); letter-spacing: -.03em; color: var(--hx-ink); outline: 0; }
.hx-q + * { clear: both; }
.hx-hint { margin: 0; padding-top: 8px; margin-bottom: 18px; font-size: 15px; line-height: 1.5; color: var(--hx-ink-3); }

.hx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hx-opts input, .hx-chips input, .hx-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* step 1: big choices */
.hx-opts { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 420px) { .hx-opts { grid-template-columns: 1fr 1fr; } }
.hx-opts label { position: relative; display: block; cursor: pointer; }
.hx-opt {
  display: flex; align-items: center; gap: 11px; min-height: 58px; height: 100%; padding: 10px 34px 10px 10px; border-radius: 15px;
  background: var(--hx-paper); box-shadow: 0 0 0 1px rgba(21,19,29,.09) inset;
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--hx-ink);
  transition: background .2s, color .2s, box-shadow .2s, transform .35s var(--hx-snap);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.hx-opt-ic { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #fff; color: var(--hx-violet-ink); box-shadow: 0 0 0 1px rgba(21,19,29,.06); transition: background .2s, color .2s; }
.hx-opt-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hx-opt::after { content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(21,19,29,.22) inset; transition: background .2s, box-shadow .2s, transform .35s var(--hx-snap); }
.hx-opts label:hover .hx-opt { box-shadow: 0 0 0 1px rgba(21,19,29,.26) inset; }
.hx-opts input:checked + .hx-opt { background: var(--hx-ink); color: #fff; box-shadow: none; }
.hx-opts input:checked + .hx-opt .hx-opt-ic { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.hx-opts input:checked + .hx-opt::after { box-shadow: none; background: var(--hx-violet-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hx-opts input:active + .hx-opt, .hx-chips input:active + span, .hx-seg input:active + span { transform: scale(.97); }
.hx-opts input:focus-visible + .hx-opt, .hx-chips input:focus-visible + span, .hx-seg input:focus-visible + span { outline: 2px solid var(--hx-violet); outline-offset: 2px; }

/* step 2: tools */
.hx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hx-chips label { position: relative; cursor: pointer; }
.hx-chips span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; border-radius: 999px;
  background: var(--hx-paper); box-shadow: 0 0 0 1px rgba(21,19,29,.09) inset;
  font-size: 14.5px; font-weight: 500; color: var(--hx-ink-2);
  transition: background .2s, color .2s, box-shadow .2s, transform .35s var(--hx-snap); user-select: none; -webkit-tap-highlight-color: transparent;
}
.hx-chips span img { width: 18px; height: 18px; }
.hx-chips label:hover span { box-shadow: 0 0 0 1px rgba(21,19,29,.26) inset; color: var(--hx-ink); }
.hx-chips input:checked + span { background: var(--hx-ink); color: #fff; box-shadow: none; }
.hx-chips input:checked + span::after { content: ""; width: 14px; height: 14px; margin-right: -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat; }
.hx-other { margin-top: 12px; }

/* step 3: segmented single choices */
.hx-group { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.hx-group:last-of-type { margin-bottom: 0; }
.hx-group-k { display: block; float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: var(--hx-ink-2); }
.hx-group-k em { font-style: normal; font-weight: 400; color: var(--hx-ink-3); }
.hx-group-k + * { clear: both; }
.hx-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hx-seg label { position: relative; cursor: pointer; min-width: 0; }
@media (min-width: 440px) { .hx-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hx-seg span {
  display: grid; place-items: center; min-height: 44px; padding: 6px 10px; border-radius: 12px; text-align: center;
  background: var(--hx-paper); box-shadow: 0 0 0 1px rgba(21,19,29,.09) inset;
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--hx-ink-2);
  transition: background .2s, color .2s, box-shadow .2s, transform .35s var(--hx-snap); user-select: none; -webkit-tap-highlight-color: transparent;
}
.hx-seg label:hover span { box-shadow: 0 0 0 1px rgba(21,19,29,.26) inset; color: var(--hx-ink); }
.hx-seg input:checked + span { background: var(--hx-ink); color: #fff; box-shadow: none; }

/* step 4: details */
.hx-fields { display: grid; gap: 12px; }
@media (min-width: 520px) { .hx-fields { grid-template-columns: 1fr 1fr; } .hx-fld-wide { grid-column: 1 / -1; } }
.hx-fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hx-fld > label { font-size: 14px; font-weight: 600; color: var(--hx-ink-2); }
.hx-fld em { font-style: normal; font-weight: 400; color: var(--hx-ink-3); }
.hx-fld input {
  width: 100%; height: 52px; padding: 0 15px; border-radius: 14px; border: 0; outline: 0; margin: 0;
  background: var(--hx-paper); box-shadow: 0 0 0 1px rgba(21,19,29,.1) inset;
  font: 500 16px var(--hx-body); color: var(--hx-ink); transition: box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.hx-fld input::placeholder { color: #a3a0b2; font-weight: 400; }
.hx-fld input:focus { box-shadow: 0 0 0 2px var(--hx-violet) inset, 0 0 0 5px rgba(109,92,246,.14); }
.hx-fld.is-bad input { box-shadow: 0 0 0 2px #d9533e inset; }
.hx-fld.is-bad input:focus { box-shadow: 0 0 0 2px #d9533e inset, 0 0 0 5px rgba(217,83,62,.14); }
.hx-site { position: relative; }
.hx-site svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--hx-ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hx-site input { padding-left: 42px; }
.hx-note { margin: 0; font-size: 12.5px; color: var(--hx-ink-3); }
.hx-err { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: #b03a26; }
.hx-err::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--hx-body); color: #fff; background: #d9533e; }
.hx-fld .hx-err { margin-top: 0; }
.hx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* navigation */
.hx-form-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; }
.hx-back { min-height: 48px; padding: 0 8px; margin-left: -8px; border: 0; background: none; cursor: pointer; font: 600 15px var(--hx-body); color: var(--hx-ink-3); border-radius: 10px; }
.hx-back:hover { color: var(--hx-ink); }
.hx-back:focus-visible { outline: 2px solid var(--hx-violet); }
.hx-next {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px; padding: 0 9px 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--hx-ink); color: #fff; font: 700 16.5px/1 var(--hx-display); letter-spacing: -.01em;
  transition: transform .5s var(--hx-snap), background-color .2s, box-shadow .3s;
}
.hx-next:hover { transform: translateY(-2px); }
.hx-next:active { transform: scale(.97); transition-duration: .08s; }
.hx-next:focus-visible { outline: 3px solid var(--hx-violet-2); outline-offset: 3px; }
.hx-next.is-final { background: var(--hx-violet); box-shadow: 0 16px 34px -14px rgba(109,92,246,.75); }
.hx-next-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-violet); color: #fff; transition: transform .5s var(--hx-snap); }
.hx-next.is-final .hx-next-ic { background: #fff; color: var(--hx-violet-ink); }
.hx-next-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hx-next:hover .hx-next-ic { transform: translateX(3px); }
.hx-next[disabled] { opacity: .6; pointer-events: none; }
.hx-next.is-busy .hx-next-ic svg { animation: hx-spin .8s linear infinite; }
@keyframes hx-spin { to { transform: rotate(1turn); } }
.hx-form:not(.is-stepped) .hx-next { width: 100%; }
.hx-fine { margin: 16px 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--hx-ink-3); }
.hx-fine a { color: var(--hx-ink-2) !important; text-decoration: underline; text-underline-offset: 2px; }
.hx-fine strong { color: var(--hx-ink-2); font-weight: 600; }

/* thank-you */
.hx-done { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0 4px; outline: 0; }
.hx-done-tick { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-green); box-shadow: 0 0 0 8px var(--hx-green-soft); margin-bottom: 22px; }
.hx-done-tick svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.hx-done.is-in .hx-done-tick { animation: hx-spring .7s both; }
.hx-done.is-in .hx-done-tick svg { animation: hx-draw .45s var(--hx-glide) .25s forwards; }
@keyframes hx-spring { 0% { transform: scale(.4); opacity: 0; } 35% { transform: scale(1.12); opacity: 1; } 60% { transform: scale(.96); } 80% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes hx-draw { to { stroke-dashoffset: 0; } }
.hx-done h3 { margin: 0; font: 700 clamp(24px, 2.4vw, 30px)/1.15 var(--hx-display); letter-spacing: -.03em; color: var(--hx-ink); }
.hx-done > p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--hx-ink-2); }
.hx-done-next { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.hx-done-next li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--hx-ink-2); }
.hx-done-next li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--hx-violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c3dd6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hx-done-book { display: inline-flex; align-items: center; gap: 12px; height: 52px; margin-top: 24px; padding: 0 9px 0 22px; border-radius: 999px; background: var(--hx-ink); color: #fff !important; text-decoration: none !important; font: 700 15.5px/1 var(--hx-display); transition: transform .5s var(--hx-snap); }
.hx-done-book:hover { transform: translateY(-2px); }
.hx-done-book .hx-next-ic { width: 34px; height: 34px; }
.hx-done-sum { list-style: none; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(21,19,29,.08); width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.hx-done-sum:empty { display: none; }
.hx-done-sum li { padding: 5px 11px; border-radius: 999px; background: var(--hx-paper); font-size: 13px; color: var(--hx-ink-2); }

@media (min-width: 640px) {
  .hx-form { padding: 28px 30px 26px; border-radius: 30px; }
}
@media (min-width: 1100px) {
  .hx-enq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-rows: auto 1fr; grid-template-areas: "top form" "rest form"; column-gap: clamp(40px, 5vw, 80px); row-gap: 28px; }
  .hx-enq-top { padding-top: 10px; }
  .hx-form.is-stepped { min-height: 560px; }
  .hx-form.is-stepped .hx-form-nav { margin-top: auto; padding-top: 24px; }
  .hx-form.is-stepped .hx-fs:not([hidden]) { margin-bottom: 4px; }
}

/* =====================================================================
   Narrow screens: the panels keep every part, a little smaller
   ===================================================================== */
@media (max-width: 420px) {
  .hx-art { padding: 44px 12px 60px; border-radius: 20px; }
  .hx-win-bar { padding: 11px 12px; gap: 10px; }
  .hx-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; padding: 8px 7px; }
  .hx-row + .hx-row::before { left: 21px; }
  .hx-row-ic { width: 28px; height: 28px; border-radius: 9px; }
  .hx-row-ic svg { width: 15px; height: 15px; }
  .hx-row-tx b { font-size: 13px; }
  .hx-row-tx span { font-size: 11.5px; }
  .hx-sync-node b { font-size: 12px; }
  .hx-flow-chip { right: 0; }
}

/* =====================================================================
   Reduced motion: every panel shows its finished state and stays there
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
  .hx-caret { opacity: 0; }
  .hx-pause { display: none !important; }
  .hx-done-tick svg { stroke-dashoffset: 0; }
}