/* home.css — generated from frontend/app/globals.css by docs/superpowers/tools/build-home-css.mjs.
   Scoped to .hx-main so it never touches site.css, the navbar or the footer.
   Edit the design source and rebuild, or edit this file directly if the source is gone. */
/* registered custom properties: the platform gradient cross-fades, the border beam rotates, the demo counts */
@property --hx-g1 { syntax: "<color>"; inherits: true; initial-value: #fa6b6d; }
@property --hx-g2 { syntax: "<color>"; inherits: true; initial-value: #e8474f; }
@property --hx-beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --hx-p { syntax: "<integer>"; inherits: false; initial-value: 0; }
.hx-main {
  --hx-font-display: "Bricolage Grotesque";
  --hx-font-serif: "Instrument Serif";
  --hx-font-body: "Figtree";
  --hx-font-mono: "Space Mono";
  --hx-g1: #fa6b6d;
  --hx-g2: #e8474f;
  color: var(--hx-body);
  font-family: var(--hx-font-body), system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.hx-main *, .hx-main *::before, .hx-main *::after { box-sizing: border-box; }
.hx-main img, .hx-main svg { max-width: 100%; display: block; }
.hx-main a { color: inherit; text-decoration: none; }
.hx-main button:where(:not(.btn)) { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }  /* his .btn buttons keep site.css styling; :where keeps specificity at (0,1,1) so design buttons still win */
.hx-main h1, .hx-main h2, .hx-main h3, .hx-main h4, .hx-main .hx-as-h1, .hx-main .hx-as-h2, .hx-main .hx-as-h3, .hx-main .hx-as-h4 { margin: 0; color: var(--hx-ink); font-family: var(--hx-font-display), system-ui, sans-serif; }
/* Heading tags (Pages › Heading tags): a heading printed with another tag carries .hx-as-<shipped tag>. Every hN rule
   lists that class too; these zero-specificity lines stand in for the browser's own hN defaults. */
:where(.hx-as-h1, .hx-as-h2, .hx-as-h3, .hx-as-h4, .hx-as-h5, .hx-as-h6) { display: block; font-weight: bold; }
:where(.hx-as-h1) { font-size: 2em; margin-block: 0.67em; }
:where(.hx-as-h2) { font-size: 1.5em; margin-block: 0.83em; }
:where(.hx-as-h3) { font-size: 1.17em; margin-block: 1em; }
:where(.hx-as-h4) { font-size: 1em; margin-block: 1.33em; }
:where(.hx-as-h5) { font-size: 0.83em; margin-block: 1.67em; }
:where(.hx-as-h6) { font-size: 0.67em; margin-block: 2.33em; }
.hx-main p { margin: 0; }
.hx-main ::selection { background: #fe553d; color: #fff; }
.hx-main :focus-visible { outline: 3px solid var(--hx-coral); outline-offset: 3px; border-radius: 6px; }
/* the hidden attribute must win over the design's display rules (notification rotation, the review form) */
.hx-main [hidden] { display: none !important; }
/* his siteInteractions.js reveal adds .is-revealed to [data-reveal] */
.hx-main .hx-reveal.is-revealed { opacity: 1; transform: none; }
/* the admin's how-it-works block has four steps by default (the design has three) */
/* his "Share your experience" form (site.css .rv-form) is styled by the round-6 layer below */
.hx-main .hx-rev-form-wrap .rv-form h3, .hx-main .hx-rev-form-wrap .rv-form .hx-as-h3 { font-family: var(--hx-font-display), sans-serif; }
/* reviews from the admin have no photos: initial avatar */
.hx-main .hx-rev-ava--initial { display: inline-grid; place-items: center; background: linear-gradient(135deg, #fa6b6d, #e8474f); color: #fff; font-weight: 800; font-family: var(--hx-font-display), sans-serif; }

/* ============================================================
   Twicsy UK — design system
   Palette sampled 1:1 from twicsy.uk
   ============================================================ */
.hx-main {
  /* Backgrounds — the peach family */
  --hx-peach-50: #fef0e7;
  --hx-peach-100: #fde9e0;
  --hx-peach-200: #fce0d5;
  --hx-card: #ffffff;
  --hx-pink-card: #ffefef;
  --hx-blue-card: #e9f3fd;

  /* Brand accents */
  --hx-orange: #f6772c;      /* announcement bar */
  --hx-orange-vivid: #fd4f03; /* logo mark */
  --hx-coral: #fe553d;       /* headline accent */
  --hx-coral-soft: #fc656a;  /* italic serif accent */
  --hx-cta-a: #fa6b6d;
  --hx-cta-b: #e8474f;
  --hx-band-a: #f87a63;
  --hx-band-b: #eb563e;

  /* Platform colors */
  --hx-ig-a: #a4328b;
  --hx-ig-b: #fc5c2b;
  --hx-ig-pill-a: #d33c69;
  --hx-ig-pill-b: #fcbd6a;
  --hx-tt-a: #e21b60;
  --hx-tt-b: #29ccd3;
  --hx-fb: #1878f4;
  --hx-yt: #e62117;

  /* Chart series (validated vs navy surface) */
  --hx-chart-1: #ee3d47;
  --hx-chart-2: #0d99a0;

  /* Ink */
  --hx-ink: #17120e;
  --hx-body: #6a4e4e;
  --hx-muted: #9a7f78;
  --hx-navy: #101727;
  --hx-navy-2: #182035;
  --hx-ink-on-dark: #eef1f8;
  --hx-body-on-dark: #a7aec2;
  --hx-green: #1fab55;
  --hx-whatsapp: #24d660;

  --hx-radius-lg: 28px;
  --hx-radius-md: 18px;
  --hx-radius-sm: 12px;
  --hx-shadow-card: 0 24px 60px -24px rgba(235, 86, 62, 0.18), 0 4px 16px -6px rgba(23, 18, 14, 0.06);
  --hx-shadow-pop: 0 30px 70px -20px rgba(232, 71, 79, 0.35);

  --hx-wrap: 1200px;
}
/* ---------- shared keyframes ---------- */
@keyframes hx-spin { to { transform: rotate(360deg); } }
@keyframes hx-spinRev { to { transform: rotate(-360deg); } }
@keyframes hx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes hx-heartFloat {
  0%, 100% { transform: translateY(0) rotate(-9deg) scale(1); }
  50% { transform: translateY(-24px) rotate(7deg) scale(1.05); }
}
@keyframes hx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  60% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
@keyframes hx-ping {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes hx-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes hx-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes hx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes hx-tickup {
  from { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translateY(-28px); }
}
@keyframes hx-shine { to { transform: translateX(130%); } }
@keyframes hx-bgShift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}
/* ---------- primitives ---------- */
.hx-main .hx-wrap {
  max-width: var(--hx-wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.hx-main .hx-h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.hx-main .hx-fx {
  font-family: var(--hx-font-serif), serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--hx-coral-soft);
}
.hx-main .hx-section-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  max-width: 780px;
  margin-inline: auto;
}
.hx-main .hx-section-head .hx-sub { max-width: 620px; }
.hx-main .hx-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 1.05em 1.9em;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--hx-g1, var(--hx-cta-a)), var(--hx-g2, var(--hx-cta-b)));
  box-shadow: var(--hx-shadow-pop);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.hx-main .hx-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.hx-main .hx-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hx-main .hx-btn:hover::after { animation: hx-shine 0.8s ease; }
.hx-main .hx-btn:active { transform: translateY(0); }
.hx-main .hx-btn .hx-arr { transition: transform 0.25s ease; }
.hx-main .hx-btn:hover .hx-arr { transform: translateX(4px); }
.hx-main .hx-btn--sm { padding: 0.85em 1.5em; font-size: 0.92rem; box-shadow: none; }
.hx-main .hx-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hx-main .hx-check-list li { display: flex; gap: 10px; align-items: baseline; font-size: 0.98rem; }
.hx-main .hx-check-list .hx-tick {
  flex: none;
  transform: translateY(2px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 171, 85, 0.14);
  color: var(--hx-green);
  font-size: 11px;
  font-weight: 800;
}
/* scroll reveal */
/* sections come in at once: a brief fade and a small lift, started the moment the block enters the screen
   (0.2s is the floor: shorter reads as a flicker) */
.hx-main .hx-reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.hx-main .hx-reveal.is-revealed { opacity: 1; transform: none; }
/* ---------- announcement ---------- */

/* ---------- navbar ---------- */

/* ---------- hero ---------- */
.hx-main .hx-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52rem 30rem at 82% -8%, #fcd9c8 0%, transparent 60%),
    radial-gradient(40rem 26rem at -10% 30%, #fde3d3 0%, transparent 55%),
    linear-gradient(180deg, var(--hx-peach-50) 0%, var(--hx-peach-100) 70%, var(--hx-peach-200) 100%);
}
.hx-main .hx-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(20px, 3.5vh, 48px);
  min-height: min(calc(100svh - 118px), 840px);
}
/* glossy floating hearts, twicsy-style */
.hx-main .hx-hero-heart {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 18px 30px rgba(232, 71, 79, 0.35));
  animation: hx-heartFloat 6.5s ease-in-out infinite;
}
.hx-main .hx-hero-heart svg { width: 100%; height: auto; display: block; }
.hx-main .hx-hero-copy { position: relative; display: grid; gap: 22px; justify-items: start; }
.hx-main .hx-hero-copy > * { opacity: 0; animation: hx-rise 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.hx-main .hx-hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hx-main .hx-hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hx-main .hx-hero-copy > *:nth-child(3) { animation-delay: 0.23s; }
.hx-main .hx-hero-copy > *:nth-child(4) { animation-delay: 0.32s; }
.hx-main .hx-hero-copy > *:nth-child(5) { animation-delay: 0.41s; }
.hx-main .hx-hero-copy > *:nth-child(6) { animation-delay: 0.5s; }
.hx-main .hx-hero h1, .hx-main .hx-hero .hx-as-h1 {
  font-size: clamp(2.5rem, 4.8vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.hx-main .hx-hero h1 .hx-fx, .hx-main .hx-hero .hx-as-h1 .hx-fx { font-size: 1.04em; }
.hx-main .hx-hero-sub { max-width: 480px; font-size: 1.05rem; }
.hx-main .hx-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hx-body);
}
.hx-main .hx-hero-trust span { display: inline-flex; gap: 8px; align-items: center; }
/* the proof line under the ticks: stars + rating, a link to the reviews, customer faces, the payment badge */
.hx-main .hx-hero-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 0.88rem; font-weight: 600; color: var(--hx-body); }
.hx-main .hx-hero-proof-rating { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; color: inherit; text-decoration: none; border-radius: 999px; }   /* 36px: a comfortable tap on phones */
.hx-main .hx-hero-proof-rating:hover u, .hx-main .hx-hero-proof-rating:focus-visible u { color: var(--hx-coral); }
.hx-main .hx-hero-proof-rating:focus-visible { outline: 3px solid var(--hx-coral); outline-offset: 4px; }
.hx-main .hx-hero-stars { font-size: 0.95rem; letter-spacing: 0.08em; line-height: 1; background: linear-gradient(90deg, #ffb531, #ff8a2b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-main .hx-hero-proof-text b { font-family: var(--hx-font-display), sans-serif; font-weight: 800; color: var(--hx-ink); }
.hx-main .hx-hero-proof-text u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; color: var(--hx-ink); transition: color 0.2s ease; }
.hx-main .hx-hero-proof-meta { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.hx-main .hx-hero-proof-meta::before { content: ""; width: 1px; height: 18px; background: rgba(23, 18, 14, 0.14); margin-right: 2px; }   /* a hairline between the rating and the faces when they share a line */
.hx-main .hx-hero-faces { display: inline-flex; align-items: center; }
.hx-main .hx-hero-faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgba(23, 18, 14, 0.35); margin-left: -9px; position: relative; z-index: calc(4 - var(--hx-i, 0)); }
.hx-main .hx-hero-faces img:first-child { margin-left: 0; }
.hx-main .hx-hero-pay { height: 24px; width: auto; border-radius: 4px; border: 1px solid var(--hx-glass-line); box-shadow: 0 4px 10px -6px rgba(23, 18, 14, 0.3); }
/* a small label above a section heading (Pages › Home fields) */
.hx-main .hx-section-head .hx-eyebrow { order: -1; }
.hx-main .hx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px;
  background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: 0 8px 20px -16px rgba(23, 18, 14, 0.3);
  font-family: var(--hx-font-mono), monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-ink);
}
.hx-main .hx-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); }
/* ---------- the growth atom — the signature ---------- */
.hx-main .hx-atom-stage {
  display: grid;
  place-items: center;
  opacity: 0;
  animation: hx-rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s forwards;
}
.hx-main .hx-atom {
  --hx-s: min(490px, 40vw, calc(100svh - 235px));
  position: relative;
  width: var(--hx-s);
  height: var(--hx-s);
  display: grid;
  place-items: center;
}
.hx-main .hx-atom-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(250, 107, 109, 0.28), rgba(252, 189, 106, 0.14) 55%, transparent 72%);
  filter: blur(8px);
}
/* tilted elliptical rings — the atom look */
.hx-main .hx-atom-tilt {
  position: absolute;
  width: 114%;
  height: 44%;
  border: 1.5px solid rgba(254, 85, 61, 0.20);
  border-radius: 50%;
  transform: rotate(-28deg);
}
.hx-main .hx-atom-tilt--2 {
  transform: rotate(34deg);
  border-color: rgba(24, 120, 244, 0.14);
  width: 106%;
  height: 52%;
}
/* circular orbits carrying the electrons */
.hx-main .hx-orbit {
  position: absolute;
  border: 1.5px dashed rgba(211, 60, 105, 0.35);
  border-radius: 50%;
  animation: hx-spin linear infinite;
}
.hx-main .hx-o1 { width: calc(var(--hx-s) * 0.47); height: calc(var(--hx-s) * 0.47); animation-duration: 26s; }
.hx-main .hx-o2 { width: calc(var(--hx-s) * 0.70); height: calc(var(--hx-s) * 0.70); animation-duration: 38s; animation-direction: reverse; border-color: rgba(41, 204, 211, 0.35); }
.hx-main .hx-o3 { width: calc(var(--hx-s) * 0.93); height: calc(var(--hx-s) * 0.93); animation-duration: 52s; border-color: rgba(246, 119, 44, 0.3); }
.hx-main .hx-e-pos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: grid;
  place-items: center;
}
/* the counter is centred on its orbit point (translate composes with the spin below); without it the
   chip hung from its top-left corner and swung a whole chip width further, over the headline copy */
.hx-main .hx-e-counter { display: grid; place-items: center; translate: -50% -50%; }
.hx-main .hx-c1 { animation: hx-spinRev 26s linear infinite; }
.hx-main .hx-c2 { animation: hx-spin 38s linear infinite; }
.hx-main .hx-c3 { animation: hx-spinRev 52s linear infinite; }
.hx-main .hx-atom:hover .hx-orbit, .hx-main .hx-atom:hover .hx-e-counter { animation-play-state: paused; }
.hx-main .hx-electron {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--hx-g1);
  border: 1px solid #f4d5c4;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -8px rgba(23, 18, 14, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.hx-main .hx-electron:hover { transform: scale(1.14); }
.hx-main .hx-electron[data-active] {
  background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2));
  color: #fff;
  border-color: transparent;
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.7), 0 16px 34px -10px var(--hx-g1);
}
.hx-main .hx-e-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 32px -14px rgba(23, 18, 14, 0.28);
  padding: 8px 13px;
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--hx-ink);
  white-space: nowrap;
}
/* the orders counter is the longest chip: a little smaller so it clears the nucleus on its way round */
.hx-main .hx-e-chip--star { font-size: 0.74rem; padding: 7px 11px; }
.hx-main .hx-e-chip .hx-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
/* nucleus */
.hx-main .hx-nucleus {
  position: relative;
  width: calc(var(--hx-s) * 0.36);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2));
  color: #fff;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
  box-shadow: 0 26px 60px -18px var(--hx-g1);
  z-index: 5;
  transition: box-shadow 0.4s ease;
}
.hx-main .hx-nucleus::before, .hx-main .hx-nucleus::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: hx-ping 3.2s ease-out infinite;
}
.hx-main .hx-nucleus::after { animation-delay: 1.6s; }
.hx-main .hx-nucleus-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 3px 10px;
}
.hx-main .hx-nucleus-live .hx-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dffb0;
  animation: hx-pulse 1.6s ease-in-out infinite;
}
.hx-main .hx-nucleus-n {
  font-family: var(--hx-font-mono), monospace;
  font-weight: 700;
  font-size: calc(var(--hx-s) * 0.052);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.hx-main .hx-nucleus-l { font-size: 0.78rem; opacity: 0.9; }
.hx-main .hx-nucleus-handle { font-size: 0.72rem; opacity: 0.75; }
.hx-main .hx-tickup {
  position: absolute;
  top: 16%;
  right: 12%;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  animation: hx-tickup 1.5s ease-out forwards;
  pointer-events: none;
}
/* ---------- ticker band ---------- */
.hx-main .hx-ticker {
  background: var(--hx-peach-200);
  border-block: 1px solid #f8cdb9;
  overflow: hidden;
  padding-block: 14px;
}
.hx-main .hx-ticker-track {
  display: flex;
  width: max-content;
  animation: hx-marquee 110s linear infinite;
}
/* each group is at least a viewport wide, so the -50% drift always lands on an identical frame */
.hx-main .hx-ticker-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 56px;
  flex: 0 0 auto;
  min-width: 100vw;
  padding-inline: 28px;
  box-sizing: border-box;
}
.hx-main .hx-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b3543a;
  white-space: nowrap;
}
.hx-main .hx-ticker span::after { content: "✦"; color: var(--hx-coral); font-size: 0.9em; }
/* ---------- sections ---------- */
.hx-main .hx-section { padding-block: clamp(72px, 9vw, 128px); }
.hx-main .hx-section--tint { background: linear-gradient(180deg, var(--hx-peach-100), var(--hx-peach-50)); }
/* ---------- services: stacked horizontal rows ---------- */
.hx-main .hx-stack {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: 26px;
}
.hx-main .hx-stack-item { position: sticky; }
.hx-main .hx-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: #fff;
  border-radius: var(--hx-radius-lg);
  box-shadow: 0 -16px 44px -30px rgba(235, 86, 62, 0.35), var(--hx-shadow-card);
  padding: clamp(26px, 3.6vw, 48px);
}
.hx-main .hx-service-row--pink { background: linear-gradient(150deg, #fff 30%, var(--hx-pink-card)); }
.hx-main .hx-service-row--blue { background: linear-gradient(150deg, #fff 30%, var(--hx-blue-card)); }
.hx-main .hx-service-row--warm { background: linear-gradient(150deg, #fff 30%, #fff1ea); }
.hx-main .hx-service-info { display: grid; gap: 18px; }
.hx-main .hx-service-info > p { font-size: 0.98rem; }
.hx-main .hx-service-head { display: flex; align-items: center; gap: 14px; }
.hx-main .hx-service-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(23, 18, 14, 0.35);
  animation: hx-bob 5s ease-in-out infinite;
}
.hx-main .hx-service-head h3, .hx-main .hx-service-head .hx-as-h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.hx-main .hx-service-media { align-self: stretch; display: grid; align-items: center; justify-items: center; }
.hx-main .hx-service-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
/* ---------- live platform profile mockups ---------- */
.hx-main .hx-pmock-wrap { display: grid; gap: 12px; justify-items: center; width: min(400px, 100%); }
.hx-main .hx-pmock {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 26px 56px -22px rgba(23, 18, 14, 0.38);
  transition: transform 0.35s ease;
}
.hx-main .hx-pmock-wrap--instagram .hx-pmock, .hx-main .hx-pmock-wrap--facebook .hx-pmock { transform: rotate(-2deg); }
.hx-main .hx-pmock-wrap--tiktok .hx-pmock, .hx-main .hx-pmock-wrap--youtube .hx-pmock { transform: rotate(2deg); }
.hx-main .hx-service-row:hover .hx-pmock { transform: rotate(0deg) scale(1.02); }
.hx-main .hx-pmock-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-muted);
}
.hx-main .hx-pmock-cap .hx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-green); animation: hx-blink 1.6s ease-in-out infinite; }
.hx-main .hx-pmock-cap .hx-cap-delta { color: var(--hx-green); }
.hx-main .hx-count-tick {
  position: absolute;
  top: -15px;
  right: -8px;
  font-family: var(--hx-font-mono), monospace;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--hx-green);
  animation: hx-tickup 1.4s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}
/* floating reactions rising out of the cards */
.hx-main .hx-floaters { position: absolute; inset: 0; pointer-events: none; }
.hx-main .hx-fl { position: absolute; bottom: 18%; opacity: 0; animation: hx-riseFade 4.2s ease-in infinite; }
.hx-main .hx-fl-1 { right: 7%; }
.hx-main .hx-fl-2 { right: 16%; animation-delay: 1.3s; animation-duration: 4.8s; }
.hx-main .hx-fl-3 { right: 2%; animation-delay: 2.2s; animation-duration: 3.8s; }
.hx-main .hx-fl-4 { right: 24%; animation-delay: 3.1s; animation-duration: 5.2s; }
@keyframes hx-riseFade {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  12% { opacity: 1; }
  60% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-140px) scale(1.15) rotate(8deg); }
}
.hx-main .hx-fl-chip {
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  color: var(--hx-ink);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.3);
}
.hx-main .hx-fl-chip--yt { color: #c00; }
/* Instagram profile */
.hx-main .hx-pmock--ig { padding: 16px 16px 14px; display: grid; gap: 12px; }
.hx-main .hx-ig-user { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #111; font-size: 0.95rem; }
.hx-main .hx-ig-verified { color: #0095f6; flex: none; }
.hx-main .hx-ig-head { display: flex; align-items: center; gap: 18px; }
.hx-main .hx-ig-ring { position: relative; flex: none; width: 70px; height: 70px; border-radius: 50%; }
.hx-main .hx-ig-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34);
  animation: hx-spin 5s linear infinite;
}
.hx-main .hx-ig-ring img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  border: 2.5px solid #fff;
  object-fit: cover;
  z-index: 1;
}
.hx-main .hx-ig-stats { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.hx-main .hx-ig-stats b { display: block; color: #111; font-size: 1.05rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hx-main .hx-ig-stats span { font-size: 0.72rem; color: #737373; }
.hx-main .hx-ig-stat--live { position: relative; }
.hx-main .hx-ig-bio { font-size: 0.8rem; color: #333; line-height: 1.5; }
.hx-main .hx-ig-bio b { display: block; color: #111; font-size: 0.84rem; }
.hx-main .hx-ig-actions { display: flex; gap: 8px; }
.hx-main .hx-ig-follow { flex: 1; background: #0095f6; color: #fff; font-weight: 600; font-size: 0.84rem; border-radius: 8px; padding: 7px 0; }
.hx-main .hx-ig-message { flex: 1; background: #efefef; color: #111; font-weight: 600; font-size: 0.84rem; border-radius: 8px; padding: 7px 0; }
.hx-main .hx-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: 8px; overflow: hidden; }
.hx-main .hx-ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* TikTok profile */
.hx-main .hx-pmock--tt { background: #161616; color: #fff; padding: 22px 16px 18px; display: grid; justify-items: center; gap: 8px; }
.hx-main .hx-tt-avatar img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid #2a2a2a; }
.hx-main .hx-tt-user { display: flex; gap: 6px; align-items: center; font-weight: 700; font-size: 0.95rem; }
.hx-main .hx-tt-verified { color: #20d5ec; flex: none; }
.hx-main .hx-tt-stats { display: flex; gap: 28px; text-align: center; margin-top: 2px; }
.hx-main .hx-tt-stats b { display: block; font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-main .hx-tt-stats span { font-size: 0.68rem; color: #8a8a8a; }
.hx-main .hx-tt-stat--live { position: relative; }
.hx-main .hx-pmock--tt .hx-count-tick { color: #3ecf74; }
.hx-main .hx-tt-follow { background: #fe2c55; color: #fff; font-weight: 700; font-size: 0.88rem; border-radius: 4px; padding: 8px 46px; margin-top: 4px; }
.hx-main .hx-tt-bio { font-size: 0.76rem; color: #a8a8a8; }
/* Facebook page */
.hx-main .hx-fb-cover { border-radius: 20px 20px 0 0; overflow: hidden; }
.hx-main .hx-fb-cover img { width: 100%; height: 92px; object-fit: cover; display: block; }
.hx-main .hx-fb-body { padding: 0 16px 16px; position: relative; }
.hx-main .hx-fb-avatar { display: inline-block; margin-top: -26px; position: relative; z-index: 1; }
.hx-main .hx-fb-avatar img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.hx-main .hx-fb-name { font-weight: 700; color: #050505; font-size: 1rem; display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.hx-main .hx-fb-verified { color: #1877f2; flex: none; }
.hx-main .hx-fb-sub { font-size: 0.76rem; color: #65676b; }
.hx-main .hx-fb-follows { display: flex; align-items: center; font-size: 0.8rem; color: #65676b; margin-top: 8px; position: relative; }
.hx-main .hx-fb-follows b { color: #050505; font-variant-numeric: tabular-nums; }
.hx-main .hx-fb-facepile { display: flex; margin-right: 10px; }
.hx-main .hx-fb-facepile img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-right: -7px; }
.hx-main .hx-fb-actions { display: flex; gap: 8px; margin-top: 10px; }
.hx-main .hx-fb-follow { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; background: #1877f2; color: #fff; font-weight: 600; font-size: 0.84rem; border-radius: 7px; padding: 7px 0; }
.hx-main .hx-fb-message { flex: 1; background: #e4e6eb; color: #050505; font-weight: 600; font-size: 0.84rem; border-radius: 7px; padding: 7px 0; }
.hx-main .hx-fb-bubble { width: 22px; height: 22px; border-radius: 50%; background: #1877f2; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
/* YouTube channel */
.hx-main .hx-yt-banner { border-radius: 20px 20px 0 0; overflow: hidden; }
.hx-main .hx-yt-banner img { width: 100%; height: 64px; object-fit: cover; display: block; }
.hx-main .hx-yt-body { display: flex; gap: 12px; padding: 14px 16px 16px; align-items: flex-start; }
.hx-main .hx-yt-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.hx-main .hx-yt-meta { display: grid; gap: 4px; }
.hx-main .hx-yt-name { font-weight: 700; color: #0f0f0f; display: flex; gap: 6px; align-items: center; font-size: 0.95rem; }
.hx-main .hx-yt-verified { color: #606060; flex: none; }
.hx-main .hx-yt-sub { font-size: 0.76rem; color: #606060; position: relative; }
.hx-main .hx-yt-sub b { color: #0f0f0f; font-variant-numeric: tabular-nums; }
.hx-main .hx-yt-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.hx-main .hx-yt-subscribe { background: #0f0f0f; color: #fff; font-weight: 600; font-size: 0.8rem; border-radius: 999px; padding: 7px 16px; }
.hx-main .hx-yt-bell { width: 32px; height: 32px; border-radius: 50%; background: #f2f2f2; color: #0f0f0f; display: grid; place-items: center; animation: hx-bellring 4s ease-in-out infinite; }
@keyframes hx-bellring {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(14deg); }
  92% { transform: rotate(-12deg); }
  96% { transform: rotate(6deg); }
}
.hx-main .hx-yt-play { color: #f00; font-size: 12px; }
/* ---------- dark analytics ---------- */
/* symmetric rows: before→after strip / 2 balanced panels */
@keyframes hx-flowdot {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
/* delivery health panel */
/* push notifications — the way growth actually shows up */

/* ---------- audience split ---------- */
/* two worlds, one engine */
.hx-main .hx-aud-duel {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr minmax(128px, 148px) 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.hx-main .hx-aud-duel > .hx-reveal { display: grid; }
.hx-main .hx-aud-spine { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-block: 24px; height: 100%; }
.hx-main .hx-spine-line {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(232, 71, 79, 0.12), rgba(232, 71, 79, 0.5) 35%, rgba(24, 120, 244, 0.45) 65%, rgba(24, 120, 244, 0.12));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s ease 0.2s;
}
.hx-main .is-revealed .hx-spine-line { transform: scaleY(1); }
.hx-main .hx-spine-line i {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--hx-cta-b);
  box-shadow: 0 0 10px rgba(232, 71, 79, 0.7);
  animation: hx-spinedrip 3.4s linear infinite;
}
.hx-main .hx-spine-line i:nth-child(2) { background: #a4328b; box-shadow: 0 0 10px rgba(164, 50, 139, 0.7); animation-delay: 1.15s; }
.hx-main .hx-spine-line i:nth-child(3) { background: var(--hx-fb); box-shadow: 0 0 10px rgba(24, 120, 244, 0.7); animation-delay: 2.3s; }
@keyframes hx-spinedrip {
  0% { top: 2%; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(98% - 8px); opacity: 0; }
}
.hx-main .hx-spine-cap {
  position: relative;
  z-index: 1;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b3543a;
  background: #fff;
  border: 1px solid #f4d5c4;
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 8px 20px -10px rgba(235, 86, 62, 0.3);
  white-space: nowrap;
}
.hx-main .hx-spine-badge {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 10px;
  width: 104px;
  box-shadow: var(--hx-shadow-card);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hx-main .is-revealed .hx-spine-badge { opacity: 1; transform: none; }
.hx-main .is-revealed .hx-spine-badge:nth-of-type(3) { transition-delay: 0.04s; }
.hx-main .is-revealed .hx-spine-badge:nth-of-type(4) { transition-delay: 0.08s; }
.hx-main .hx-spine-badge b { font-family: var(--hx-font-mono), monospace; font-weight: 700; font-size: 1.02rem; color: var(--hx-ink); }
.hx-main .hx-spine-badge span { font-family: var(--hx-font-mono), monospace; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main .hx-aud-card {
  border-radius: var(--hx-radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--hx-shadow-card);
  transition: transform 0.3s ease;
}
.hx-main .hx-aud-card:hover { transform: translateY(-4px); }
.hx-main .hx-aud-card--pink { background: linear-gradient(160deg, #fff 0%, var(--hx-pink-card) 70%); }
.hx-main .hx-aud-card--blue { background: linear-gradient(160deg, #fff 0%, var(--hx-blue-card) 70%); }
.hx-main .hx-aud-card > p { min-height: 3.4em; }
.hx-main .hx-aud-card h3, .hx-main .hx-aud-card .hx-as-h3 { white-space: nowrap; }
.hx-main .hx-aud-card .hx-who {
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hx-muted);
}
.hx-main .hx-aud-card h3, .hx-main .hx-aud-card .hx-as-h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.hx-main .hx-aud-card--blue .hx-fx { color: #76a6f4; }
/* persona strip with orbiting platform glyph */
.hx-main .hx-aud-persona { display: flex; align-items: center; gap: 18px; background: rgba(255, 255, 255, 0.85); border-radius: var(--hx-radius-md); padding: 14px 18px; }
.hx-main .hx-aud-ava { position: relative; flex: none; width: 56px; height: 56px; }
.hx-main .hx-aud-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hx-main .hx-aud-ava--pink img { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--hx-coral-soft); }
.hx-main .hx-aud-ava--blue img { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--hx-fb); }
.hx-main .hx-aud-orbit { position: absolute; inset: -11px; border: 1.5px dashed rgba(212, 60, 105, 0.45); border-radius: 50%; animation: hx-spin 14s linear infinite; }
.hx-main .hx-aud-card--blue .hx-aud-orbit { border-color: rgba(24, 120, 244, 0.45); }
.hx-main .hx-aud-orbit span {
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #d33c69;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(23, 18, 14, 0.2);
  animation: hx-spinRev 14s linear infinite;
}
.hx-main .hx-aud-card--blue .hx-aud-orbit span { color: var(--hx-fb); }
.hx-main .hx-aud-pinfo { display: grid; gap: 1px; }
.hx-main .hx-aud-pinfo b { color: var(--hx-ink); font-family: var(--hx-font-display), sans-serif; font-size: 0.98rem; }
.hx-main .hx-aud-pinfo .hx-role { font-size: 0.78rem; color: var(--hx-muted); }
.hx-main .hx-aud-pinfo .hx-pquote { font-family: var(--hx-font-serif), serif; font-style: italic; font-size: 0.92rem; color: var(--hx-coral-soft); margin-top: 3px; }
.hx-main .hx-aud-card--blue .hx-pquote { color: #76a6f4; }
/* win rows — staggered in, metric pills on the right */
.hx-main .hx-aud-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hx-main .hx-aud-win {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--hx-radius-md);
  padding: 14px 16px;
  opacity: 0;
  transition: transform 0.25s ease;
}
.hx-main .is-revealed .hx-aud-win { animation: hx-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hx-main .is-revealed .hx-aud-win:nth-child(2) { animation-delay: 0.12s; }
.hx-main .is-revealed .hx-aud-win:nth-child(3) { animation-delay: 0.24s; }
.hx-main .hx-aud-win:hover { transform: translateX(4px); }
.hx-main .hx-aud-win .hx-w-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #ffe0e2; color: var(--hx-cta-b); }
.hx-main .hx-aud-card--blue .hx-aud-win .hx-w-ico { background: #e3ecfd; color: var(--hx-fb); }
.hx-main .hx-aud-win .hx-w-body { flex: 1; display: grid; gap: 1px; }
.hx-main .hx-aud-win b { color: var(--hx-ink); font-family: var(--hx-font-display), sans-serif; font-size: 1rem; }
.hx-main .hx-aud-win p { font-size: 0.9rem; }
.hx-main .hx-w-metric {
  flex: none;
  align-self: center;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hx-cta-b);
  background: #ffe0e2;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.hx-main .hx-aud-card--blue .hx-w-metric { color: var(--hx-fb); background: #e3ecfd; }
.hx-main .hx-aud-stats { display: flex; gap: 34px; border-top: 1px solid rgba(23, 18, 14, 0.08); padding-top: 20px; flex-wrap: wrap; margin-top: auto; }
.hx-main .hx-aud-stat .hx-n { font-family: var(--hx-font-mono), monospace; font-weight: 700; font-size: 1.5rem; color: var(--hx-cta-b); }
.hx-main .hx-aud-card--blue .hx-aud-stat .hx-n { color: var(--hx-fb); }
.hx-main .hx-aud-stat .hx-l { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-muted); }
/* ---------- how it works ---------- */
/* ---------- trust trio ---------- */
.hx-main .hx-trust-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.hx-main .hx-trust-grid > .hx-reveal { display: grid; }
.hx-main .hx-trust-card {
  background: #fff;
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-card);
  padding: 34px 30px 26px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  align-content: start;
  transition: transform 0.3s ease;
}
.hx-main .hx-trust-card:hover { transform: translateY(-4px); }
.hx-main .hx-trust-card h3, .hx-main .hx-trust-card .hx-as-h3 { font-size: 1.2rem; font-weight: 800; }
.hx-main .hx-trust-card p { font-size: 0.95rem; }
/* rotating guarantee seal */
.hx-main .hx-seal { position: relative; width: 118px; height: 118px; margin-bottom: 6px; }
.hx-main .hx-seal svg { width: 100%; height: 100%; overflow: visible; }
.hx-main .hx-seal-spin { transform-origin: 60px 60px; animation: hx-spin 30s linear infinite; }
.hx-main .hx-seal text { font-family: var(--hx-font-mono), monospace; text-transform: uppercase; }
.hx-main .hx-seal-ico {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: currentColor;
}
.hx-main .hx-trust-clause {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed rgba(23, 18, 14, 0.14);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-muted);
}
.hx-main .hx-trust-clause .hx-tick {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 171, 85, 0.14);
  color: var(--hx-green);
  font-size: 11px;
  font-weight: 800;
}
/* ---------- reviews ---------- */
/* scorecard + vertical comment wall */
.hx-main .hx-rev-layout {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.75fr;
  gap: 24px;
  align-items: stretch;
}
.hx-main .hx-rev-layout > .hx-reveal { display: grid; }
.hx-main .hx-rev-summary {
  background: #fff;
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-card);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.hx-main .hx-rs-badge {
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hx-cta-b);
  background: #ffdcda;
  border-radius: 999px;
  padding: 5px 13px;
}
.hx-main .hx-rs-score { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.hx-main .hx-rs-score b {
  font-family: var(--hx-font-display), sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 5vw, 4.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hx-ink);
}
.hx-main .hx-rs-of { font-family: var(--hx-font-mono), monospace; font-size: 0.9rem; color: var(--hx-muted); }
.hx-main .hx-stars--lg { font-size: 1.2rem; }
.hx-main .hx-rs-count { font-size: 0.9rem; font-weight: 600; color: var(--hx-body); }
.hx-main .hx-rs-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; width: 100%; }
.hx-main .hx-rs-bars li { display: flex; align-items: center; gap: 10px; font-family: var(--hx-font-mono), monospace; font-size: 0.68rem; font-weight: 700; color: var(--hx-muted); }
.hx-main .hx-rs-bars li > span { width: 24px; }
.hx-main .hx-rs-bars li > b { width: 36px; text-align: right; color: var(--hx-ink); }
.hx-main .hx-rs-track { flex: 1; height: 7px; border-radius: 999px; background: var(--hx-peach-100); overflow: hidden; }
.hx-main .hx-rs-track i {
  display: block;
  height: 100%;
  width: var(--hx-w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hx-cta-a), var(--hx-cta-b));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.05s;
}
.hx-main .is-revealed .hx-rs-track i { transform: scaleX(1); }
.hx-main .is-revealed .hx-rs-bars li:nth-child(2) i { transition-delay: 0.08s; }
.hx-main .is-revealed .hx-rs-bars li:nth-child(3) i { transition-delay: 0.11s; }
.hx-main .is-revealed .hx-rs-bars li:nth-child(4) i { transition-delay: 0.14s; }
.hx-main .is-revealed .hx-rs-bars li:nth-child(5) i { transition-delay: 0.17s; }
.hx-main .hx-rs-note { font-size: 0.85rem; color: var(--hx-muted); margin-top: auto; }
.hx-main .hx-rs-plats { display: flex; gap: 8px; }
.hx-main .hx-rev-wall {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 620px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}
.hx-main .hx-rev-col { animation: hx-vscroll 44s linear infinite; }
.hx-main .hx-rev-col--down { animation-duration: 52s; animation-direction: reverse; }
.hx-main .hx-rev-wall:hover .hx-rev-col { animation-play-state: paused; }
@keyframes hx-vscroll { to { transform: translateY(-50%); } }
.hx-main .hx-review-card {
  background: #fff;
  border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-card);
  padding: 22px;
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.hx-main .hx-review-card .hx-stars { color: #fb5a5f; letter-spacing: 2px; font-size: 0.82rem; }
.hx-main .hx-review-card blockquote { margin: 0; font-size: 0.94rem; color: var(--hx-body); }
.hx-main .hx-rev-head { display: flex; align-items: center; gap: 10px; }
.hx-main .hx-rev-ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.hx-main .hx-rev-id { display: grid; }
.hx-main .hx-rev-id b { color: var(--hx-ink); font-size: 0.92rem; font-family: var(--hx-font-display), sans-serif; }
.hx-main .hx-rev-meta { font-size: 0.7rem; color: var(--hx-muted); }
.hx-main .hx-rev-plat {
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
}
.hx-main .hx-rev-foot { display: flex; align-items: center; gap: 10px; }
.hx-main .hx-review-card .hx-svc {
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--hx-peach-100);
  color: #b3543a;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
@keyframes hx-heartbeat {
  0%, 55%, 100% { transform: scale(1); }
  12% { transform: scale(1.28); }
  24% { transform: scale(1); }
  36% { transform: scale(1.18); }
}
/* ---------- FAQ ---------- */

/* ---------- final CTA ---------- */
.hx-main .hx-cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--hx-radius-lg);
  background:
    radial-gradient(38rem 22rem at 88% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(120deg, var(--hx-band-a), var(--hx-band-b), var(--hx-band-a));
  background-size: 170% 170%;
  animation: hx-bgShift 9s ease-in-out infinite alternate;
  color: #fff;
  text-align: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
  display: grid;
  justify-items: center;
  gap: 22px;
}
.hx-main .hx-cta-band h2, .hx-main .hx-cta-band .hx-as-h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; font-weight: 800; }
.hx-main .hx-cta-band .hx-fx { color: #ffe1d6; }
.hx-main .hx-cta-band p { max-width: 520px; color: rgba(255, 255, 255, 0.88); }
.hx-main .hx-cta-band .hx-btn { background: #fff; color: var(--hx-cta-b); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.35); }
.hx-main .hx-cta-orbit {
  position: absolute;
  right: -130px;
  top: -130px;
  width: 340px;
  height: 340px;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: hx-spin 36s linear infinite;
  pointer-events: none;
}
.hx-main .hx-cta-orbit i {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
}
.hx-main .hx-cta-orbit--2 {
  right: auto;
  top: auto;
  left: -110px;
  bottom: -110px;
  width: 280px;
  height: 280px;
  animation-direction: reverse;
  animation-duration: 30s;
}
/* ---------- footer ---------- */

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
.hx-main .hx-hero-inner { grid-template-columns: 1fr; }
.hx-main .hx-atom-stage { margin-top: 16px; }
.hx-main .hx-atom { --hx-s: min(480px, 76vw); }
.hx-main .hx-aud-duel { grid-template-columns: 1fr; }
.hx-main .hx-aud-spine-wrap { display: none; }
.hx-main .hx-rev-layout { grid-template-columns: 1fr; }
.hx-main .hx-rev-wall { height: 540px; }

}
@media (max-width: 820px) {
.hx-main .hx-service-row { grid-template-columns: 1fr; }
.hx-main .hx-stack-item { position: static; }
.hx-main .hx-trust-grid { grid-template-columns: 1fr; }

}
@media (max-width: 640px) {
.hx-main .hx-review-card { width: 300px; }
.hx-main .hx-hero h1, .hx-main .hx-hero .hx-as-h1 { font-size: clamp(2.3rem, 9.5vw, 2.9rem); }
.hx-main .hx-atom { --hx-s: min(340px, 88vw); }
.hx-main .hx-electron { width: 40px; height: 40px; }
.hx-main .hx-e-chip { font-size: 0.72rem; padding: 6px 10px; }
.hx-main .hx-e-chip--star { display: none; }
.hx-main .hx-nucleus-l, .hx-main .hx-nucleus-handle { font-size: 0.66rem; }
.hx-main .hx-w-metric { display: none; }
.hx-main .hx-aud-card h3, .hx-main .hx-aud-card .hx-as-h3 { white-space: normal; }
.hx-main .hx-aud-card > p { min-height: 0; }
.hx-main .hx-rev-wall { grid-template-columns: 1fr; height: 500px; }
.hx-main .hx-rev-col--down { display: none; }
.hx-main .hx-hero-heart { opacity: 0.55; }

}
/* ---------- ?noanim QA switch: everything visible, no motion ---------- */
html.hx-noanim { scroll-behavior: auto; }
html.hx-noanim .hx-main .hx-reveal { opacity: 1; transform: none; transition: none; }
html.hx-noanim .hx-main .hx-aud-win { opacity: 1; }
html.hx-noanim .hx-main .hx-spine-badge { opacity: 1; transform: none; }
html.hx-noanim .hx-main .hx-spine-line { transform: none; transition: none; }
html.hx-noanim .hx-main .hx-rs-track i { transform: none; transition: none; }
html.hx-noanim .hx-main .hx-hero-copy > *, html.hx-noanim .hx-main .hx-atom-stage { opacity: 1; animation: none; }
html.hx-noanim .hx-main .hx-fl { opacity: 0.9; transform: translateY(-30px); }
html.hx-noanim .hx-main *, html.hx-noanim .hx-main *::before, html.hx-noanim .hx-main *::after { animation: none !important; transition: none !important; }
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.hx-main .hx-reveal { opacity: 1; transform: none; transition: none; }
.hx-main .hx-hero-copy > *, .hx-main .hx-atom-stage { opacity: 1; animation: none; }
.hx-main .hx-ticker-track, .hx-main .hx-hero-heart, .hx-main .hx-orbit, .hx-main .hx-e-counter, .hx-main .hx-atom-tilt, .hx-main .hx-nucleus::before, .hx-main .hx-nucleus::after, .hx-main .hx-nucleus-live .hx-dot, .hx-main .hx-eyebrow::before, .hx-main .hx-service-ico, .hx-main .hx-trust-card .hx-ico, .hx-main .hx-cta-band, .hx-main .hx-cta-orbit, .hx-main .hx-ig-ring::before, .hx-main .hx-yt-bell, .hx-main .hx-fl, .hx-main .hx-pmock-cap .hx-live-dot, .hx-main .hx-aud-orbit, .hx-main .hx-aud-orbit span, .hx-main .hx-spine-line i, .hx-main .hx-seal-spin, .hx-main .hx-rev-likes svg, .hx-main .hx-rev-col, .hx-main .hx-count-tick, .hx-main .hx-tickup { animation: none; }
.hx-main .hx-rs-track i { transform: none; transition: none; }
.hx-main .hx-aud-win { opacity: 1; animation: none; }
.hx-main .hx-spine-badge { opacity: 1; transform: none; transition: none; }
.hx-main .hx-spine-line { transform: none; transition: none; }
.hx-main *::before, .hx-main *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }

}

/* ============================================================
   round 6 ▸ tokens, background, glass
   ============================================================ */
.hx-main {
  --hx-cream: #fff7f2;
  --hx-glass: rgba(255, 255, 255, 0.72);
  --hx-glass-solid: rgba(255, 255, 255, 0.88);
  --hx-glass-line: rgba(255, 255, 255, 0.9);
  --hx-glass-shadow: 0 30px 60px -34px rgba(235, 86, 62, 0.28), 0 2px 10px -4px rgba(23, 18, 14, 0.06);
  --hx-radius-card: 26px;
  --hx-sec-pad: clamp(44px, 5.5vw, 72px);       /* every section, top and bottom */
  --hx-head-gap: clamp(26px, 3.2vw, 40px);      /* section head → its content */
  --hx-block-gap: 22px;                         /* between two content blocks of one section */
  background:
    radial-gradient(rgba(23, 18, 14, 0.055) 0.8px, transparent 0.9px) 0 0 / 22px 22px,
    var(--hx-cream);
}
/* every section carries its own soft colour bloom, mirrored on alternate sections */
.hx-main .hx-section { position: relative; isolation: isolate; overflow: clip; padding-block: var(--hx-sec-pad); }
.hx-main .hx-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48rem 26rem at 6% 18%, rgba(255, 214, 192, 0.6), transparent 62%),
    radial-gradient(40rem 24rem at 96% 88%, rgba(255, 228, 206, 0.55), transparent 60%);
}
.hx-main section.hx-section:nth-of-type(even)::before {
  background:
    radial-gradient(48rem 26rem at 94% 14%, rgba(255, 214, 214, 0.55), transparent 62%),
    radial-gradient(40rem 24rem at 4% 92%, rgba(255, 232, 214, 0.55), transparent 60%);
}
.hx-main .hx-section--tint { background: rgba(255, 255, 255, 0.34); border-block: 1px solid rgba(255, 255, 255, 0.7); }
/* the blooms drift a little as a section scrolls through the viewport (scroll-driven, progressive) */
@supports (animation-timeline: view()) {
  .hx-main .hx-section::before { animation: hx-bloomDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes hx-bloomDrift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
.hx-main .hx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* glass cards */
.hx-main :is(.hx-service-row, .hx-panel, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-plat, .hx-demo, .hx-rev-form-wrap) {
  position: relative;
  isolation: isolate;
  background: var(--hx-glass);
  border: 1px solid var(--hx-glass-line);
  box-shadow: var(--hx-glass-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* border beam: a gradient arc runs around a card while it is hovered (Magic UI border-beam, adapted) */
.hx-main :is(.hx-service-row, .hx-panel, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-plat, .hx-demo)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--hx-beam-a), transparent 0 72%, var(--hx-g1) 86%, var(--hx-g2) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s ease;
  animation: hx-beam 3.2s linear infinite paused;
}
.hx-main :is(.hx-service-row, .hx-panel, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-plat, .hx-demo):hover::after { opacity: 1; animation-play-state: running; }
@keyframes hx-beam { to { --hx-beam-a: 360deg; } }

/* ============================================================
   round 6 ▸ rhythm — one padding, one centred head with a rule, one head→body gap
   ============================================================ */
.hx-main .hx-h2 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.025em; text-wrap: balance; }
.hx-main .hx-section-head {
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center;
  gap: 14px; max-width: 780px; margin: 0 auto var(--hx-head-gap);
}
.hx-main .hx-section-head::after { content: ""; order: 1; width: 52px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--hx-cta-a), var(--hx-cta-b)); }
.hx-main .hx-section-head .hx-h2 { max-width: 22ch; }
.hx-main .hx-section-head .hx-sub { order: 2; max-width: 62ch; text-wrap: pretty; }
.hx-main .hx-section-head .hx-sub p + p { margin-top: 10px; }
/* long admin intros (platforms, growth): two left-aligned columns under the centred heading instead of one tall centred column */
.hx-main .hx-section-head--wide { max-width: 1040px; }
.hx-main .hx-section-head--wide .hx-sub { max-width: none; width: 100%; }
.hx-main .hx-section-head--wide .hx-more-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 44px; text-align: left; }
.hx-main .hx-section-head--wide .hx-sub p + p { margin-top: 0; }
.hx-main .hx-section-head--wide .hx-more-body > p:only-child { grid-column: 1 / -1; max-width: 62ch; margin-inline: auto; text-align: center; }
.hx-main .hx-stack, .hx-main .hx-aud-duel, .hx-main .hx-trust-grid, .hx-main .hx-rev-layout { margin-top: 0; }
.hx-main .hx-ticker { padding-block: 12px; background: rgba(255, 255, 255, 0.5); border-block: 1px solid rgba(255, 255, 255, 0.8); }
.hx-main .hx-stepno { font-family: var(--hx-font-mono), monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hx-muted); }

/* see more / see less */
.hx-main .hx-more { display: grid; gap: 8px; justify-items: start; }
.hx-main .hx-more-body { --hx-more-h: 10.2em; width: 100%; max-height: var(--hx-more-c, 10.2em); overflow: hidden; transition: max-height 0.45s cubic-bezier(0.3, 0.8, 0.3, 1); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.hx-main .hx-more[data-open="true"] .hx-more-body { max-height: var(--hx-more-h); -webkit-mask-image: none; mask-image: none; }
.hx-main .hx-more-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--hx-cta-b); padding: 4px 0; }
.hx-main .hx-more-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease; }
.hx-main .hx-more[data-open="true"] .hx-more-chev { transform: translateY(2px) rotate(225deg); }
.hx-main .hx-section-head .hx-more { justify-items: center; }

/* ============================================================
   round 6 ▸ hero — copy + the original growth atom, aurora behind
   ============================================================ */
.hx-main .hx-hero { background: none; }
.hx-main .hx-hero::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 32%, rgba(252, 141, 143, 0.42), transparent 62%),
    radial-gradient(34% 34% at 74% 22%, rgba(255, 205, 150, 0.5), transparent 62%),
    radial-gradient(42% 42% at 62% 82%, rgba(255, 181, 167, 0.42), transparent 62%);
  filter: blur(36px);
  animation: hx-aurora 38s ease-in-out infinite alternate;
}
@keyframes hx-aurora {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-4%, 3%) rotate(6deg) scale(1.08); }
  100% { transform: translate(3%, -4%) rotate(-5deg) scale(1.02); }
}
.hx-main .hx-hero-inner {
  z-index: 1;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(36px, 5vh, 64px);
  padding-bottom: clamp(28px, 4vh, 56px);
  min-height: min(calc(100svh - 118px), 800px);
}
.hx-main .hx-hero-copy { gap: 20px; max-width: 580px; }
.hx-main .hx-hero h1, .hx-main .hx-hero .hx-as-h1 { font-size: clamp(2.4rem, 4.4vw, 3.5rem); text-wrap: balance; }
.hx-main .hx-hero h1.hx-hero-title--long, .hx-main .hx-hero .hx-as-h1.hx-hero-title--long { font-size: clamp(2.1rem, 3.7vw, 3rem); }   /* a headline of more than ~40 characters steps down so it stays a few lines */
.hx-main .hx-hero-sub { max-width: 46ch; }
.hx-main .hx-hero-heart { z-index: 1; }
.hx-main .hx-hh-1 { top: 6%; right: 3%; opacity: 0.9; }
.hx-main .hx-hh-2 { bottom: 9%; left: 2%; opacity: 0.85; }
.hx-main .hx-atom-stage { z-index: 1; }

/* the platform word: the words stack in one grid cell, the sizer reserves the widest, one is "in" and the rest wait above/below */
.hx-main .hx-swap { position: relative; display: inline-grid; vertical-align: baseline; overflow: hidden; line-height: 1.18; padding-inline: 0.06em; margin-inline: -0.06em; }
.hx-main .hx-swap-sizer, .hx-main .hx-swap-word { grid-area: 1 / 1; font-family: var(--hx-font-serif), serif; font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.04em; white-space: nowrap; }
.hx-main .hx-swap-sizer { visibility: hidden; }
/* the sizer and the platform names waiting their turn are drawn from data-text, so the heading's real text holds
   the platform name once (search engines and screen readers read one sentence) */
.hx-main .hx-swap-sizer::before, .hx-main .hx-swap-word[data-text]::before { content: attr(data-text); }
.hx-main .hx-swap-word {
  background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease; will-change: transform;
}
.hx-main .hx-swap-word[data-state="in"] { transform: translateY(0); opacity: 1; }
.hx-main .hx-swap-word[data-state="above"] { transform: translateY(-115%); opacity: 0; }
.hx-main .hx-swap-word[data-state="below"] { transform: translateY(115%); opacity: 0; }

/* one button: the platform's gradient, a white badge with a nudging arrow */
.hx-main .hx-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hx-main .hx-btn--lg { padding: 0.5em 0.5em 0.5em 1.7em; font-size: 1.06rem; gap: 1em; }
.hx-main .hx-hero-go { box-shadow: 0 18px 40px -16px var(--hx-g1), 0 2px 8px -2px rgba(23, 18, 14, 0.15); transition: --hx-g1 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), --hx-g2 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s ease, box-shadow 0.3s ease; }
.hx-main .hx-go-badge { flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: #fff; color: var(--hx-g2); display: grid; place-items: center; transition: color 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s ease; }
.hx-main .hx-go-badge svg { width: 1.05em; height: 1.05em; animation: hx-nudge 1.8s ease-in-out infinite; }
.hx-main .hx-hero-go:hover .hx-go-badge { transform: scale(1.08); }
@keyframes hx-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.hx-main .hx-hero-trust { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 28px; font-size: 0.88rem; }
.hx-main .hx-hero-trust .hx-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(31, 171, 85, 0.14); color: var(--hx-green); font-size: 11px; font-weight: 800; font-style: normal;
}
/* colour handover: the atom eases between platform gradients, the active electron fades its fill in, the nucleus text crossfades */
.hx-main .hx-atom { transition: --hx-g1 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), --hx-g2 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hx-main .hx-electron { position: relative; isolation: isolate; background: var(--hx-glass-solid); transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.9s ease, color 0.9s ease, border-color 0.9s ease; }
.hx-main .hx-electron::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); opacity: 0; transition: opacity 0.9s ease; }
.hx-main .hx-electron[data-active] { background: var(--hx-glass-solid); }
.hx-main .hx-electron[data-active]::before { opacity: 1; }
.hx-main .hx-nucleus > * { transition: opacity 0.28s ease, transform 0.28s ease; }
.hx-main .hx-nucleus.is-swap > :not(.hx-nucleus-live) { opacity: 0; transform: translateY(6px); }
.hx-main .hx-atom.hx-tilt { transition: --hx-g1 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), --hx-g2 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s ease; }

/* ============================================================
   round 6 ▸ platform panels — every platform alongside its services
   ============================================================ */
.hx-main .hx-plats { display: flex; gap: 14px; height: 380px; }
.hx-main .hx-plat {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  padding: 26px 22px; border-radius: var(--hx-radius-card); overflow: hidden; isolation: isolate; contain: layout paint;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: none; -webkit-backdrop-filter: none;   /* blur under a width animation is what made it stutter */
  box-shadow: 0 18px 40px -30px rgba(235, 86, 62, 0.35), 0 2px 8px -4px rgba(23, 18, 14, 0.06);
  transition: flex-grow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hx-main .hx-plat::after { display: none; }   /* the expansion is the hover state; no border beam on top of it */
.hx-main .hx-plat-name, .hx-main .hx-plat-promise, .hx-main .hx-plat-bubbles { max-width: 230px; }   /* fixed measure: nothing re-wraps mid-animation */
.hx-main .hx-plat-body { contain: layout; }
.hx-main .hx-plat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--hx-g1) 16%, transparent), transparent 58%); }
.hx-main .hx-plat[data-open="true"] { flex-grow: 2.2; box-shadow: 0 26px 54px -30px color-mix(in srgb, var(--hx-g1) 50%, transparent), 0 2px 8px -4px rgba(23, 18, 14, 0.06); }
.hx-main .hx-plat-head { display: grid; justify-items: start; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.hx-main .hx-plat-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); box-shadow: 0 14px 30px -12px var(--hx-g1); animation: hx-bob 5s ease-in-out infinite; }
.hx-main .hx-plat:nth-child(2) .hx-plat-ico { animation-delay: 0.7s; }
.hx-main .hx-plat:nth-child(3) .hx-plat-ico { animation-delay: 1.4s; }
.hx-main .hx-plat:nth-child(4) .hx-plat-ico { animation-delay: 2.1s; }
.hx-main .hx-plat-name { font-family: var(--hx-font-display), sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--hx-ink); line-height: 1.1; }
.hx-main .hx-plat-promise { font-size: 0.92rem; color: var(--hx-body); line-height: 1.45; text-wrap: pretty; }
.hx-main .hx-plat-bubbles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; transition: opacity 0.3s ease, transform 0.3s ease; }
.hx-main .hx-plat-hint { margin-top: auto; font-family: var(--hx-font-mono), monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-muted); white-space: nowrap; transition: opacity 0.3s ease; }
.hx-main .hx-plat[data-open="true"] .hx-plat-hint { opacity: 0; }
.hx-main .hx-plat-mark { position: absolute; right: -34px; bottom: -30px; width: 170px; height: 170px; color: var(--hx-g1); opacity: 0.07; transform: rotate(-12deg); z-index: -1; pointer-events: none; }
.hx-main .hx-plat-bubble { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--hx-g1); box-shadow: 0 8px 18px -8px rgba(23, 18, 14, 0.3); animation: hx-bob 4.5s ease-in-out infinite; animation-delay: calc(var(--hx-i) * -0.7s); }
.hx-main .hx-plat-body { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 10px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s; }
.hx-main .hx-plat[data-open="true"] .hx-plat-body { opacity: 1; transform: none; pointer-events: auto; }
.hx-main .hx-plat[data-open="true"] .hx-plat-bubbles { opacity: 0; transform: translateY(8px); pointer-events: none; }
.hx-main .hx-plat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hx-main .hx-plat-list li { opacity: 0; transform: translateX(-8px); transition: opacity 0.2s ease, transform 0.2s ease; transition-delay: calc(var(--hx-i) * 20ms); }
.hx-main .hx-plat[data-open="true"] .hx-plat-list li { opacity: 1; transform: none; }
.hx-main .hx-plat-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; min-width: 0;
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(23, 18, 14, 0.06);
  font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--hx-ink);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.hx-main .hx-plat-link:hover { transform: translateX(3px); background: #fff; border-color: var(--hx-g1); color: var(--hx-g1); }
.hx-main .hx-plat-link-ico { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); }
.hx-main .hx-plat-link-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-main .hx-plat-link .hx-arr { margin-left: auto; color: var(--hx-g1); }
.hx-main .hx-plat-cta { justify-self: start; margin-top: 2px; background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); }
.hx-main .hx-burst { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.hx-main .hx-burst-g { position: absolute; bottom: -30px; left: calc(8% + var(--hx-i) * 15%); color: var(--hx-g1); opacity: 0; animation: hx-burst 4.6s ease-in infinite; animation-delay: calc(var(--hx-i) * 0.75s); animation-play-state: paused; }
.hx-main .hx-plat[data-open="true"] .hx-burst-g { animation-play-state: running; }
@keyframes hx-burst {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.75; }
  100% { transform: translateY(-460px) translateX(24px) scale(1.15); opacity: 0; }
}

/* ============================================================
   round 6 ▸ growth rows (provisional) — icon + title, copy, bullets, one CTA, live preview
   ============================================================ */
.hx-main .hx-service-row { border-radius: var(--hx-radius-card); }
.hx-main .hx-service-row--flip .hx-service-media { order: -1; }   /* TikTok and YouTube: media left, copy right */
.hx-main .hx-service-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; background: linear-gradient(150deg, transparent 40%, color-mix(in srgb, var(--hx-g1) 9%, transparent)); }
.hx-main .hx-service-row > * { position: relative; z-index: 1; }
.hx-main .hx-service-info { display: grid; gap: 18px; justify-items: start; }
.hx-main .hx-service-head { display: flex; align-items: center; gap: 14px; }
.hx-main .hx-service-head h3, .hx-main .hx-service-head .hx-as-h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.hx-main .hx-service-blurb, .hx-main .hx-service-blurb p { font-size: 0.98rem; }
/* Links the admin writes into the card copy (sources, sister services): the brand coral with a soft underline
   that fills in on hover, so a reference reads as a link without breaking the paragraph's rhythm. */
.hx-main .hx-service-blurb a, .hx-main .hx-cs-text a, .hx-main .hx-svc-split-text a {
  color: var(--hx-g2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--hx-g2) 38%, transparent);
  text-underline-offset: 3px;
  border-radius: 4px;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease, background-color 0.18s ease;
}
.hx-main .hx-service-blurb a:hover, .hx-main .hx-service-blurb a:focus-visible,
.hx-main .hx-cs-text a:hover, .hx-main .hx-cs-text a:focus-visible,
.hx-main .hx-svc-split-text a:hover, .hx-main .hx-svc-split-text a:focus-visible {
  color: var(--hx-ink);
  text-decoration-color: var(--hx-g1);
  background: color-mix(in srgb, var(--hx-g1) 16%, transparent);
}
.hx-main .hx-service-blurb a:focus-visible, .hx-main .hx-cs-text a:focus-visible, .hx-main .hx-svc-split-text a:focus-visible { outline: 2px solid var(--hx-g1); outline-offset: 2px; }
/* Highlight from the dashboard editor: a marker-pen band in the page's platform colour under the words */
.hx-main mark {
  background: linear-gradient(to top, color-mix(in srgb, var(--hx-g1) 34%, transparent) 0 44%, transparent 44%);
  color: inherit;
  font-weight: 600;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  border-radius: 3px;
}
.hx-main .hx-service-foot { display: flex; align-items: center; gap: 16px; }
.hx-main .hx-service-foot .hx-btn { background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); }
.hx-main .hx-service-media { min-width: 0; overflow: hidden; }
.hx-main .hx-service-photo { margin: 0; width: min(400px, 100%); justify-self: center; border-radius: 22px; overflow: hidden; box-shadow: var(--hx-shadow-card); background: #fff; }
.hx-main .hx-service-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ============================================================
   round 6 ▸ growth section (light) — before → after, notifications, where it shows up
   ============================================================ */
.hx-main .hx-panel { border-radius: var(--hx-radius-card); padding: clamp(20px, 2.6vw, 30px); }
.hx-main .hx-panel-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hx-main .hx-panel-head h3, .hx-main .hx-panel-head .hx-as-h3 { font-size: 1.15rem; font-weight: 800; }
.hx-main .hx-panel-delta { margin-left: auto; font-family: var(--hx-font-mono), monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-green); background: rgba(31, 171, 85, 0.12); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.hx-main .hx-panel-delta--hot { color: var(--hx-cta-b); background: #ffe0e2; }
.hx-main .hx-ba-strip { display: grid; grid-template-columns: 1fr minmax(200px, 0.9fr) 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.hx-main .hx-ba-card { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.95); }
.hx-main .hx-ba-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.hx-main .hx-ba-card--before { color: var(--hx-muted); }
.hx-main .hx-ba-card--before .hx-ba-avatar { filter: grayscale(0.85); opacity: 0.75; }
.hx-main .hx-ba-card--after { background: linear-gradient(160deg, #fff, #fff0ec); border-color: rgba(232, 71, 79, 0.3); box-shadow: 0 24px 50px -28px rgba(232, 71, 79, 0.5); }
.hx-main .hx-ba-card--after .hx-ba-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hx-cta-b); }
.hx-main .hx-ba-avatar-wrap { position: relative; display: inline-block; line-height: 0; }
.hx-main .hx-ba-verified { position: absolute; right: -6px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--hx-fb); display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(23, 18, 14, 0.4); }
.hx-main .hx-ba-tag { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hx-muted); margin-bottom: 6px; }
.hx-main .hx-ba-tag--hot { color: var(--hx-cta-b); }
.hx-main .hx-ba-handle { font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--hx-ink); }
.hx-main .hx-ba-card--before .hx-ba-handle { color: var(--hx-muted); }
.hx-main .hx-ba-n { position: relative; font-family: var(--hx-font-mono), monospace; font-weight: 700; font-size: 2.3rem; letter-spacing: -0.02em; color: var(--hx-muted); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hx-main .hx-ba-n--live { color: var(--hx-ink); }
.hx-main .hx-ba-l { font-size: 0.78rem; color: var(--hx-muted); }
.hx-main .hx-ba-note { font-size: 0.78rem; color: var(--hx-muted); font-style: italic; margin-top: 4px; }
.hx-main .hx-ba-delta { font-family: var(--hx-font-mono), monospace; font-size: 0.7rem; font-weight: 700; color: var(--hx-green); margin-top: 4px; }
.hx-main .hx-ba-flow { display: grid; justify-items: center; gap: 12px; }
.hx-main .hx-ba-chip { font-family: var(--hx-font-mono), monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b3543a; background: var(--hx-peach-100); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.hx-main .hx-ba-chip--dim { background: none; color: var(--hx-muted); }
.hx-main .hx-ba-line { position: relative; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(23, 18, 14, 0.1), var(--hx-cta-b)); }
.hx-main .hx-ba-line::after { content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--hx-cta-b); }
.hx-main .hx-ba-line i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--hx-cta-b); box-shadow: 0 0 10px rgba(232, 71, 79, 0.8); animation: hx-flowdot 2.8s linear infinite; }
.hx-main .hx-ba-line i:nth-child(2) { animation-delay: 0.95s; }
.hx-main .hx-ba-line i:nth-child(3) { animation-delay: 1.9s; }
@keyframes hx-flowdotV { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.hx-main .hx-an-bottom { margin-top: var(--hx-block-gap); display: grid; grid-template-columns: 1fr 1fr; gap: var(--hx-block-gap); align-items: stretch; }
.hx-main .hx-an-bottom > .hx-reveal { display: grid; }
/* the growth curve: fourteen days of one order, the line draws itself on reveal (dash length measured in JS) */
/* the chart is a tilted plane (it levels out on hover); the pins float above it, a shadow pools beneath it */
.hx-main .hx-panel--chart { display: flex; flex-direction: column; perspective: 1100px; }
.hx-main .hx-chart { position: relative; margin: auto 6px; transform-style: preserve-3d; transform: rotateX(16deg) rotateY(-7deg); transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hx-main .hx-panel--chart:hover .hx-chart { transform: rotateX(5deg) rotateY(-2deg); }
.hx-main .hx-chart::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 86, 62, 0.3), transparent); filter: blur(6px); transform: translateZ(-30px); pointer-events: none; }
.hx-main .hx-chart-pin { transform: translateZ(26px); }
/* the tracer rides the curve; the readout counts followers and days as it climbs */
.hx-main .hx-chart-tracer { position: absolute; left: var(--hx-tx, 2.5%); top: var(--hx-ty, 89%); width: 0; height: 0; transform: translateZ(40px); transition: opacity 0.3s ease; pointer-events: none; }
.hx-main .hx-chart-tracer i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--hx-cta-b); box-shadow: 0 0 0 6px rgba(232, 71, 79, 0.16), 0 8px 16px -4px rgba(232, 71, 79, 0.7); }
.hx-main .hx-chart-tracer i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--hx-cta-b); opacity: 0; animation: hx-tracerPing 1.6s ease-out infinite; }
@keyframes hx-tracerPing { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }
.hx-main .hx-chart-readout { position: absolute; left: 2.5%; top: -4px; transform: translateZ(36px); white-space: nowrap; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-cta-b); background: #fff; border: 1px solid rgba(232, 71, 79, 0.25); border-radius: 999px; padding: 5px 11px; box-shadow: 0 10px 22px -12px rgba(232, 71, 79, 0.7); transition: opacity 0.3s ease; pointer-events: none; }
.hx-main .hx-chart-readout b { font-family: var(--hx-font-display), sans-serif; font-size: 0.9rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hx-main .hx-chart-tracer.is-hidden, .hx-main .hx-chart-readout.is-hidden { opacity: 0; }
.hx-main .hx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.hx-main .hx-chart-grid line { stroke: rgba(23, 18, 14, 0.08); stroke-width: 1; stroke-dasharray: 3 5; }
.hx-main .hx-chart-area { fill: url(#hx-chart-fill); opacity: 0; transition: opacity 1s ease 1.2s; }
.hx-main .hx-chart-line { fill: none; stroke: url(#hx-chart-stroke); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--hx-len, 1200); stroke-dashoffset: var(--hx-len, 1200); transition: stroke-dashoffset 2.2s cubic-bezier(0.3, 0.7, 0.3, 1) 0.25s; }
.hx-main .is-revealed .hx-chart-line { stroke-dashoffset: 0; }
.hx-main .is-revealed .hx-chart-area { opacity: 1; }
.hx-main .hx-chart-pin { position: absolute; left: var(--hx-x); top: var(--hx-y); width: 0; height: 0; opacity: 0; transition: opacity 0.3s ease; transition-delay: calc(0.15s + var(--hx-i) * 0.12s); }
.hx-main .is-revealed .hx-chart-pin { opacity: 1; }
.hx-main .hx-chart-pin i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--hx-cta-b); box-shadow: 0 0 0 4px rgba(232, 71, 79, 0.16); }
.hx-main .hx-chart-pin span { position: absolute; white-space: nowrap; font-family: var(--hx-font-mono), monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-ink); background: #fff; border: 1px solid rgba(23, 18, 14, 0.08); border-radius: 999px; padding: 4px 9px; box-shadow: 0 8px 18px -12px rgba(23, 18, 14, 0.35); }
.hx-main .hx-chart-pin--1 span { left: 12px; top: -13px; }
.hx-main .hx-chart-pin--2 span { left: 0; bottom: 13px; transform: translateX(-50%); }
.hx-main .hx-chart-pin--3 span { right: -8px; top: 14px; }
.hx-main .hx-chart-axis { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--hx-font-mono), monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main .hx-chart-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.hx-main .hx-chart-stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.06); min-width: 0; }
.hx-main .hx-chart-stat b { font-family: var(--hx-font-display), sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--hx-cta-b); line-height: 1.1; }
.hx-main .hx-chart-stat span { font-family: var(--hx-font-mono), monospace; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a phone: status bar, then whatever screen the panel shows */
.hx-main .hx-phone { width: min(100%, 316px); margin-inline: auto; border-radius: 30px; background: #fff; overflow: hidden; padding: 8px 10px 0; box-shadow: 0 0 0 6px #1b1b1d, 0 0 0 7px rgba(255, 255, 255, 0.4), 0 30px 60px -30px rgba(23, 18, 14, 0.5); }
.hx-main .hx-phone-status { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px 8px; font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.72rem; color: #111; }
.hx-main .hx-phone-sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.hx-main .hx-phone-sig i { width: 3px; background: #111; border-radius: 1px; }
.hx-main .hx-phone-sig i:nth-child(1) { height: 4px; } .hx-main .hx-phone-sig i:nth-child(2) { height: 6px; } .hx-main .hx-phone-sig i:nth-child(3) { height: 8px; } .hx-main .hx-phone-sig i:nth-child(4) { height: 10px; }
.hx-main .hx-phone-sig b { width: 22px; height: 10px; margin-left: 6px; border-radius: 3px; border: 1.5px solid #111; background: linear-gradient(90deg, #111 0 78%, transparent 78%); background-origin: content-box; padding: 1px; }
/* the DM thread: a brand's message, her reel quoted back, an offer card; the JS plays it as a loop */
.hx-main .hx-dm-top { display: flex; align-items: center; gap: 10px; margin: 0 -10px; padding: 2px 14px 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.hx-main .hx-dm-back { flex: none; width: 9px; height: 9px; border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); margin: 0 4px 0 2px; }
.hx-main .hx-dm-logo { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--hx-font-display), sans-serif; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, #2a8a6e, #0f3d33); }
.hx-main .hx-dm-who { display: grid; gap: 1px; line-height: 1.2; min-width: 0; flex: 1; }
.hx-main .hx-dm-who b { display: inline-flex; align-items: center; gap: 4px; font-size: 0.84rem; color: #111; white-space: nowrap; }
.hx-main .hx-dm-who b svg { color: var(--hx-fb); flex: none; }
.hx-main .hx-dm-who small { font-size: 0.64rem; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-main .hx-dm-call { flex: none; width: 20px; height: 20px; color: #111; }
.hx-main .hx-dm-thread { display: grid; gap: 8px; align-content: start; min-height: 336px; padding: 12px 2px 10px; }
.hx-main .hx-dm-day { justify-self: center; font-size: 0.62rem; color: #8e8e93; margin-bottom: 2px; }
.hx-main .hx-dm-msg { max-width: 82%; padding: 9px 12px; border-radius: 18px 18px 18px 6px; font-size: 0.8rem; line-height: 1.4; color: #111; background: #efefef; justify-self: start; }
.hx-main .hx-dm-msg--out { justify-self: end; border-radius: 18px 18px 6px 18px; color: #fff; background: linear-gradient(135deg, #7b3fe4, #e33e8b); }
.hx-main .hx-dm-msg--reel { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; padding: 6px; background: #f4f4f5; }
.hx-main .hx-dm-msg--reel img { width: 50px; height: 66px; object-fit: cover; border-radius: 10px; display: block; }
.hx-main .hx-dm-reel-meta { display: grid; gap: 2px; font-size: 0.68rem; color: #8e8e93; padding-right: 6px; }
.hx-main .hx-dm-reel-meta b { color: #111; font-size: 0.76rem; }
.hx-main .hx-dm-msg--offer { display: grid; gap: 4px; max-width: 88%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.4); }
.hx-main .hx-dm-offer-tag { font-family: var(--hx-font-mono), monospace; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-cta-b); }
.hx-main .hx-dm-msg--offer b { font-family: var(--hx-font-display), sans-serif; font-size: 0.9rem; font-weight: 800; }
.hx-main .hx-dm-offer-terms { font-size: 0.68rem; color: #8e8e93; }
.hx-main .hx-dm-accept { margin-top: 4px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: #111; color: #fff; font-size: 0.72rem; font-weight: 700; transition: background 0.35s ease, color 0.35s ease; }
.hx-main .hx-dm-accept.is-done { background: rgba(31, 171, 85, 0.14); color: var(--hx-green); }
.hx-main .hx-dm-typing { display: none; justify-self: start; gap: 4px; padding: 11px 12px; border-radius: 18px 18px 18px 6px; background: #efefef; }
.hx-main .hx-dm-typing.is-in { display: inline-flex; }
.hx-main .hx-dm-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; animation: hx-dmDot 1.2s ease-in-out infinite; }
.hx-main .hx-dm-typing i:nth-child(2) { animation-delay: 0.2s; }
.hx-main .hx-dm-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes hx-dmDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.hx-main .hx-dm-composer { display: flex; align-items: center; gap: 10px; margin: 0 -10px; padding: 8px 12px 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.hx-main .hx-dm-composer span { flex: 1; height: 36px; border-radius: 999px; background: #efefef; display: flex; align-items: center; padding: 0 14px; font-size: 0.8rem; color: #8e8e93; }
.hx-main .hx-dm-cam { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7b3fe4, #e33e8b); }
.hx-main .hx-dm-cam svg { width: 18px; height: 18px; }
/* live playback: the JS marks the thread and lets the messages in one by one */
.hx-main .hx-dm-thread.is-live .hx-dm-msg:not(.is-in) { display: none; }
.hx-main .hx-dm-thread.is-live .hx-dm-msg.is-in { animation: hx-dmIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes hx-dmIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ============================================================
   round 6 ▸ how it works — vertical steps + a looping order demo
   ============================================================ */
.hx-main .hx-how-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
/* the staircase: treads step right and down, each a block with a lit top and a shaded slab beneath; the flight is tilted in perspective */
.hx-main .hx-stairs-stage { perspective: 1400px; perspective-origin: 20% 40%; padding: 4px 22px 24px 4px; }
.hx-main .hx-stairs { --hx-run: 44px; --hx-depth: 12px; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; transform: rotateX(8deg) rotateY(-9deg); transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hx-main .hx-stairs-stage:hover .hx-stairs { transform: rotateX(3deg) rotateY(-3deg); }
.hx-main .hx-stair { position: relative; margin-left: calc(var(--hx-i) * var(--hx-run)); width: calc(100% - (var(--hx-n) - 1) * var(--hx-run)); transform-style: preserve-3d; opacity: 0; transform: translate3d(-30px, 26px, -60px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--hx-i) * 0.04s); }
.hx-main .is-revealed .hx-stair { opacity: 1; transform: none; }
.hx-main .hx-stair-side { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(135deg, #ffd3c6, #f0a693); transform: translate(var(--hx-depth), var(--hx-depth)); transition: transform 0.4s ease; }
.hx-main .hx-stair-face { position: relative; z-index: 1; display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, #fff, #fffaf7); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 26px 44px -30px rgba(235, 86, 62, 0.5); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.hx-main .hx-stair:hover .hx-stair-face { transform: translate(-3px, -4px); box-shadow: 0 34px 54px -30px rgba(235, 86, 62, 0.6); }
.hx-main .hx-stair:hover .hx-stair-side { transform: translate(calc(var(--hx-depth) + 3px), calc(var(--hx-depth) + 4px)); }
.hx-main .hx-stair-num { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--hx-cta-a), var(--hx-cta-b)); box-shadow: 0 12px 24px -10px rgba(232, 71, 79, 0.55); }
.hx-main .hx-stair-num::after { content: ""; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid var(--hx-cta-b); opacity: 0; animation: hx-stairPing calc(var(--hx-n) * 1.3s) ease-out infinite; animation-delay: calc(var(--hx-i) * 1.3s); }
@keyframes hx-stairPing { 0% { transform: scale(0.75); opacity: 0.9; } 35% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
.hx-main .hx-stair-body { display: grid; gap: 3px; min-width: 0; }
.hx-main .hx-stair h3, .hx-main .hx-stair .hx-as-h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.hx-main .hx-stair p { font-size: 0.93rem; }
.hx-main .hx-demo { border-radius: var(--hx-radius-card); padding: 14px; overflow: hidden; }
.hx-main .hx-demo-bar { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; }
.hx-main .hx-demo-dots { display: flex; gap: 6px; }
.hx-main .hx-demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.hx-main .hx-demo-dots i:nth-child(2) { background: #febc2e; }
.hx-main .hx-demo-dots i:nth-child(3) { background: #28c840; }
.hx-main .hx-demo-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--hx-font-mono), monospace; font-size: 0.68rem; color: var(--hx-muted); background: #fff; border-radius: 999px; padding: 5px 12px; }
.hx-main .hx-demo-stage { background: #fff; border-radius: 18px; padding: 18px; display: grid; gap: 14px; min-height: 296px; align-content: start; }
.hx-main .hx-demo-field { display: flex; align-items: center; gap: 4px; border: 1.5px solid rgba(23, 18, 14, 0.1); border-radius: 12px; padding: 12px 14px; font-family: var(--hx-font-display), sans-serif; font-weight: 600; font-size: 1rem; color: var(--hx-ink); }
.hx-main .hx-demo-at { color: var(--hx-muted); }
.hx-main .hx-demo-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: hx-demoType 12s steps(12) infinite; }
.hx-main .hx-demo-caret { width: 2px; height: 1.1em; border-radius: 2px; background: var(--hx-cta-b); animation: hx-blink 0.9s step-end infinite; }
.hx-main .hx-demo-profile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--hx-peach-50); opacity: 0; transform: translateY(10px); animation: hx-demoIn 12s ease infinite; }
.hx-main .hx-demo-profile img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hx-cta-b); }
.hx-main .hx-demo-who { display: grid; line-height: 1.25; }
.hx-main .hx-demo-who b { font-family: var(--hx-font-display), sans-serif; font-size: 0.95rem; color: var(--hx-ink); }
.hx-main .hx-demo-who span { font-size: 0.78rem; color: var(--hx-muted); }
.hx-main .hx-demo-found { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--hx-font-mono), monospace; font-size: 0.64rem; font-weight: 700; color: var(--hx-green); white-space: nowrap; }
.hx-main .hx-demo-progress { display: grid; gap: 8px; opacity: 0; animation: hx-demoShow 12s ease infinite; }
.hx-main .hx-demo-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main .hx-demo-pct { color: var(--hx-cta-b); animation: hx-demoPct 12s linear infinite; counter-reset: hxp var(--hx-p); }
.hx-main .hx-demo-pct::after { content: counter(hxp) "%"; }
.hx-main .hx-demo-track { height: 8px; border-radius: 999px; background: var(--hx-peach-100); overflow: hidden; }
.hx-main .hx-demo-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--hx-cta-a), var(--hx-cta-b)); animation: hx-demoBar 12s linear infinite; }
.hx-main .hx-demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-main .hx-demo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.06); box-shadow: 0 10px 22px -14px rgba(23, 18, 14, 0.35); font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--hx-ink); opacity: 0; transform: scale(0.6); }
.hx-main .hx-demo-chip svg { color: var(--hx-cta-b); }
.hx-main .hx-demo-chip--1 { animation: hx-demoChip1 12s cubic-bezier(0.2, 0.7, 0.3, 1.4) infinite; }
.hx-main .hx-demo-chip--2 { animation: hx-demoChip2 12s cubic-bezier(0.2, 0.7, 0.3, 1.4) infinite; }
.hx-main .hx-demo-chip--3 { animation: hx-demoChip3 12s cubic-bezier(0.2, 0.7, 0.3, 1.4) infinite; }
.hx-main .hx-demo-chip--3 svg { color: var(--hx-green); }
.hx-main .hx-demo-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding: 12px 6px 2px; font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main .hx-demo-foot span { display: inline-flex; align-items: center; gap: 6px; }
@keyframes hx-demoType { 0%, 4% { width: 0; } 16%, 92% { width: 12ch; } 100% { width: 0; } }
@keyframes hx-demoIn { 0%, 18% { opacity: 0; transform: translateY(10px); } 24%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hx-demoShow { 0%, 26% { opacity: 0; } 30%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hx-demoBar { 0%, 28% { width: 0; } 72%, 92% { width: 100%; } 100% { width: 0; } }
@keyframes hx-demoPct { 0%, 28% { --hx-p: 0; } 72%, 100% { --hx-p: 100; } }
@keyframes hx-demoChip1 { 0%, 42% { opacity: 0; transform: scale(0.6); } 47%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hx-demoChip2 { 0%, 56% { opacity: 0; transform: scale(0.6); } 61%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes hx-demoChip3 { 0%, 72% { opacity: 0; transform: scale(0.6); } 77%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ============================================================
   round 6 ▸ audience, trust
   ============================================================ */
.hx-main .hx-aud-card { border-radius: var(--hx-radius-card); }
.hx-main .hx-aud-card--pink { background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 239, 239, 0.7)); }
.hx-main .hx-aud-card--blue { background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(233, 243, 253, 0.7)); }
.hx-main .hx-trust-grid { gap: 20px; }
.hx-main .hx-trust-card { border-radius: var(--hx-radius-card); text-align: center; justify-items: center; }
.hx-main .hx-trust-card .hx-seal { margin-inline: auto; }
.hx-main .hx-trust-card .hx-trust-clause { justify-content: center; }
.hx-main .hx-aud-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-main .hx-aud-stat { min-width: 0; }
.hx-main .hx-aud-stat .hx-l { white-space: normal; line-height: 1.35; }

/* ============================================================
   round 6 ▸ reviews — scorecard, drifting wall, and the review form as its own always-open block
   ============================================================ */
.hx-main .hx-rev-summary { border-radius: var(--hx-radius-card); }
.hx-main .hx-rs-write { width: 100%; margin-top: 10px; }
.hx-main .hx-rs-note { margin-top: 0; font-size: 0.8rem; }
.hx-main .hx-review-card { background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); }
/* the form: a solid white block under the wall — coral top edge + an intro column keep it apart from the review cards */
.hx-main .hx-rev-form-wrap {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start;
  margin: clamp(36px, 4.5vw, 56px) 0 0; max-width: none; overflow: hidden;
  border-radius: var(--hx-radius-card); padding: clamp(24px, 3.4vw, 40px);
  background: #fff; border: 1px solid rgba(23, 18, 14, 0.06); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 30px 60px -34px rgba(235, 86, 62, 0.22), 0 2px 10px -4px rgba(23, 18, 14, 0.05);
}
.hx-main .hx-rev-form-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--hx-cta-a), var(--hx-cta-b) 55%, #ffb08a); }
.hx-main .hx-rev-form-intro { display: grid; gap: 12px; align-content: start; }
.hx-main .hx-rev-form-intro h3, .hx-main .hx-rev-form-intro .hx-as-h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.hx-main .hx-rev-form-intro > p { margin: 0; font-size: 0.96rem; color: var(--hx-body); max-width: 34ch; }
.hx-main .hx-rev-form-perks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; font-size: 0.88rem; font-weight: 600; color: var(--hx-body); }
.hx-main .hx-rev-form-perks li { display: flex; align-items: baseline; gap: 9px; }
.hx-main .hx-rev-form-perks .hx-tick { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(31, 171, 85, 0.14); color: var(--hx-green); font-size: 11px; font-weight: 800; font-style: normal; transform: translateY(2px); }
.hx-main .hx-rev-form-wrap .rv-form { display: grid; gap: 16px; padding: 0; margin: 0; max-width: none; min-width: 0; background: none; border: 0; box-shadow: none; }
.hx-main .hx-rev-form-fields { display: grid; gap: 14px; }
.hx-main .hx-rev-form-fields .field { display: grid; gap: 8px; margin: 0; }
.hx-main .hx-rev-form-fields label { margin: 0; font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-muted); }
.hx-main .hx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hx-main .hx-field-row--3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.hx-main .hx-field-row--service { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
.hx-main .hx-rev-form-fields input[type="text"], .hx-main .hx-rev-form-fields input[type="email"], .hx-main .hx-rev-form-fields select, .hx-main .hx-rev-form-fields textarea {
  width: 100%; border: 1.5px solid rgba(23, 18, 14, 0.1); border-radius: 12px; background: #fff; margin: 0;
  padding: 11px 14px; font: inherit; font-size: 0.95rem; color: var(--hx-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hx-main .hx-rev-form-fields :is(input, select, textarea):focus { outline: none; border-color: var(--hx-coral); box-shadow: 0 0 0 4px rgba(254, 85, 61, 0.14); }
.hx-main .hx-rev-form-fields textarea { min-height: 92px; resize: vertical; }
.hx-main .hx-rating-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 46px; }
.hx-main .hx-rating-label { font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-cta-b); background: #ffdcda; border-radius: 999px; padding: 0.45em 1em; }
.hx-main .hx-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hx-main .hx-counter { font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--hx-muted); }
.hx-main .hx-rev-form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hx-main .hx-rev-form-fields .btn.btn-primary { width: auto; margin: 0; }
.hx-main .hx-form-note { font-size: 0.82rem; color: var(--hx-muted); margin: 0; }

/* ============================================================
   round 6 ▸ FAQ — one centred column, topic pills, accordion, contact strip
   ============================================================ */
.hx-main .hx-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 22px; }
.hx-main .hx-faq-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hx-main .hx-faq-topic { padding: 8px 16px; border-radius: 999px; background: var(--hx-glass-solid); border: 1px solid var(--hx-glass-line); box-shadow: 0 8px 20px -16px rgba(23, 18, 14, 0.3); font-weight: 600; font-size: 0.88rem; color: var(--hx-ink); transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease; }
.hx-main .hx-faq-topic:hover { background: #fff; color: var(--hx-cta-b); transform: translateY(-1px); }
.hx-main .hx-faq-list { display: grid; gap: 10px; }
.hx-main .hx-faq-item { background: var(--hx-glass); border: 1px solid var(--hx-glass-line); border-radius: 18px; box-shadow: 0 10px 30px -24px rgba(235, 86, 62, 0.35); overflow: hidden; transition: box-shadow 0.3s ease, background 0.3s ease; }
.hx-main .hx-faq-item[data-open="true"] { background: #fff; box-shadow: 0 18px 40px -22px rgba(235, 86, 62, 0.45); }
.hx-main .hx-faq-q { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 22px; font-family: var(--hx-font-display), sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--hx-ink); }
.hx-main .hx-faq-qtext { flex: 1 1 auto; }
.hx-main .hx-plus { position: relative; margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ffe0e2; transition: background 0.3s ease, transform 0.35s ease; }
.hx-main .hx-plus i { position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--hx-cta-b); transition: background 0.3s ease; }
.hx-main .hx-plus i:nth-child(2) { transform: rotate(90deg); }
.hx-main .hx-faq-item[data-open="true"] .hx-plus { background: var(--hx-cta-b); transform: rotate(135deg); }
.hx-main .hx-faq-item[data-open="true"] .hx-plus i { background: #fff; }
.hx-main .hx-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.hx-main .hx-faq-item[data-open="true"] .hx-faq-a { grid-template-rows: 1fr; }
.hx-main .hx-faq-a > div { overflow: hidden; }
.hx-main .hx-faq-a > div > * { margin: 0; padding: 0 22px; font-size: 0.96rem; }
.hx-main .hx-faq-a > div > ul { padding-left: 42px; }
.hx-main .hx-faq-a > div > * + * { margin-top: 10px; }
.hx-main .hx-faq-a > div > :last-child { padding-bottom: 20px; }
.hx-main .hx-faq-help { display: grid; justify-items: center; gap: 12px; text-align: center; padding-top: 6px; }
.hx-main .hx-faq-help-lead { font-weight: 600; color: var(--hx-body); }
.hx-main .hx-faq-help-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hx-main .hx-faq-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(23, 18, 14, 0.06); box-shadow: 0 10px 24px -16px rgba(23, 18, 14, 0.3); font-weight: 600; font-size: 0.9rem; color: var(--hx-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hx-main .hx-faq-chip:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(23, 18, 14, 0.35); }
.hx-main .hx-faq-chip svg { color: var(--hx-cta-b); }
.hx-main .hx-faq-chip--wa { background: var(--hx-whatsapp); color: #fff; border-color: transparent; }
.hx-main .hx-faq-chip--wa svg { color: #fff; }
.hx-main .hx-faq-chip--all { color: var(--hx-cta-b); }
/* answers reveal as a blurred stagger: words stay unbreakable, each character fades in from a blur in turn */
.hx-main .hx-blur-w { display: inline-block; white-space: nowrap; }
.hx-main .hx-blur-c { display: inline-block; }
.hx-main .is-blur .hx-blur-c { opacity: 0; filter: blur(10px); animation: hx-blurIn 0.3s ease both; animation-delay: var(--hx-d, 0ms); }
@keyframes hx-blurIn { to { opacity: 1; filter: blur(0); } }

/* ============================================================
   round 6 ▸ CTA band — copy + proof cluster, orbits, meteors
   ============================================================ */
.hx-main .hx-cta-band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px 48px; align-items: center; text-align: left; border-radius: var(--hx-radius-card); }
.hx-main .hx-cta-copy { display: grid; gap: 18px; justify-items: start; position: relative; z-index: 1; }
.hx-main .hx-cta-band h2, .hx-main .hx-cta-band .hx-as-h2 { line-height: 1.08; max-width: 14ch; }
.hx-main .hx-cta-band p { max-width: 46ch; margin-inline: 0; }
.hx-main .hx-cta-stats { display: grid; gap: 12px; position: relative; z-index: 1; }
.hx-main .hx-cta-stat {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px); color: #fff;
}
.hx-main .hx-cta-stat b { font-family: var(--hx-font-display), sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.hx-main .hx-cta-stat span { font-family: var(--hx-font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.hx-main .hx-meteors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hx-main .hx-meteors i { position: absolute; top: -12%; left: calc(6% + var(--hx-i) * 14%); width: 2px; height: 90px; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), transparent); opacity: 0; animation: hx-meteor 6.5s linear infinite; animation-delay: calc(var(--hx-i) * 0.9s); }
@keyframes hx-meteor {
  0% { transform: translate(0, 0) rotate(38deg); opacity: 0; }
  8% { opacity: 0.9; }
  55% { transform: translate(-260px, 440px) rotate(38deg); opacity: 0; }
  100% { transform: translate(-260px, 440px) rotate(38deg); opacity: 0; }
}

/* ============================================================
   round 15 ▸ background — a slow mesh of warm light behind the page, the dot grid fixed over it, a whisper of grain
   ============================================================ */
.hx-main { position: relative; isolation: isolate; background: var(--hx-cream); }
.hx-main::before {
  content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 18%, rgba(255, 196, 168, 0.62), transparent 70%),
    radial-gradient(36% 34% at 88% 22%, rgba(252, 150, 150, 0.4), transparent 70%),
    radial-gradient(40% 36% at 20% 86%, rgba(255, 214, 150, 0.44), transparent 70%),
    radial-gradient(34% 32% at 84% 84%, rgba(186, 212, 255, 0.36), transparent 70%);
  animation: hx-mesh 46s ease-in-out infinite alternate;
  will-change: transform;
}
.hx-main::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 240px 240px,
    radial-gradient(rgba(23, 18, 14, 0.07) 0.8px, transparent 0.9px) 0 0 / 22px 22px;
}
@keyframes hx-mesh {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2.5%, 0) scale(1.06); }
  100% { transform: translate3d(2.5%, -3%, 0) scale(1.02); }
}

/* ============================================================
   round 9 ▸ life — a pointer spotlight on glass cards, 3D tilt on the previews and the atom, magnetic buttons
   ============================================================ */
.hx-main .hx-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(280px circle at var(--hx-mx, 50%) var(--hx-my, 50%), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%); }
.hx-main :is(.hx-service-row, .hx-aud-card, .hx-trust-card, .hx-plat, .hx-panel, .hx-rev-summary, .hx-demo):hover .hx-spot { opacity: 1; }
.hx-main .hx-tilt { transform: perspective(1100px) rotateX(var(--hx-rx, 0deg)) rotateY(var(--hx-ry, 0deg)); transition: transform 0.4s ease; transform-style: preserve-3d; }
.hx-main .hx-btn.is-magnet { transition: transform 0.15s ease, box-shadow 0.3s ease, --hx-g1 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), --hx-g2 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* ============================================================
   round 6 ▸ responsive
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1366px) {
  .hx-main .hx-atom { --hx-s: min(440px, 36vw, calc(100svh - 235px)); }   /* laptops: the review chip must not clip */
}
@media (max-width: 1024px), (hover: none) {
  .hx-main .hx-plats { flex-wrap: wrap; height: auto; }
  .hx-main .hx-plat { flex: 1 1 calc(50% - 7px); }
  .hx-main .hx-plat[data-open="true"] { flex-grow: 1; }
  .hx-main .hx-plat-body { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 18px; }
  .hx-main .hx-plat-list li { opacity: 1; transform: none; }
  .hx-main .hx-plat-bubbles, .hx-main .hx-plat-hint { display: none; }
  .hx-main .hx-plat-list { grid-template-columns: 1fr; }
  .hx-main .hx-burst-g { animation-play-state: running; }
}
@media (max-width: 1024px) {
  .hx-main .hx-hero-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; min-height: 0; }
  .hx-main .hx-hero-copy { justify-items: center; max-width: 640px; margin-inline: auto; }
  .hx-main .hx-hero-cta, .hx-main .hx-hero-trust, .hx-main .hx-hero-proof { justify-content: center; }
  /* the shared spine turns into a strip between the two cards */
  .hx-main .hx-aud-duel > .hx-aud-spine-wrap { display: grid; }
  .hx-main .hx-aud-spine { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 8px; padding: 4px 0; height: auto; min-height: 0; }
  .hx-main .hx-spine-line { display: none; }
  .hx-main .hx-spine-cap { flex: 0 0 100%; text-align: center; margin: 0 0 2px; }
  .hx-main .hx-spine-badge { flex: 1 1 0; min-width: 0; text-align: center; }
  .hx-main .hx-how-layout { grid-template-columns: 1fr; }
  .hx-main .hx-how-layout > .hx-reveal:last-child { order: -1; }
  .hx-main .hx-demo { max-width: 560px; margin-inline: auto; }
  .hx-main .hx-stairs { --hx-run: 36px; }
  .hx-main .hx-stairs-stage { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 820px) {
  .hx-main .hx-cta-band { grid-template-columns: 1fr; }
  .hx-main .hx-cta-stats { grid-template-columns: repeat(3, 1fr); }
  .hx-main .hx-cta-stat { flex-direction: column; gap: 4px; align-items: flex-start; }
  .hx-main .hx-an-bottom { grid-template-columns: 1fr; }
  .hx-main .hx-ba-strip { grid-template-columns: 1fr; }
  .hx-main .hx-service-row--flip .hx-service-media { order: 0; }   /* stacked: copy first on every row */
  .hx-main .hx-stairs { --hx-run: 22px; --hx-depth: 10px; transform: rotateX(4deg) rotateY(-4deg); }
  /* stacked cards: the connector stands vertically between them, the dots flowing down */
  .hx-main .hx-ba-flow { gap: 10px; padding: 4px 0; }
  .hx-main .hx-ba-line { width: 2px; height: 64px; background: linear-gradient(180deg, rgba(23, 18, 14, 0.1), var(--hx-cta-b)); }
  .hx-main .hx-ba-line::after { right: auto; top: auto; bottom: -3px; left: 50%; transform: translateX(-50%); border-left-color: transparent; border-top-color: var(--hx-cta-b); }
  .hx-main .hx-ba-line i { top: 0; left: 50%; margin: 0 0 0 -4px; animation-name: hx-flowdotV; }
  .hx-main .hx-field-row--3, .hx-main .hx-field-row--service { grid-template-columns: 1fr; }
  .hx-main .hx-rev-form-wrap { grid-template-columns: 1fr; gap: 20px; }
  .hx-main .hx-section-head--wide .hx-more-body { grid-template-columns: 1fr; gap: 10px; text-align: center; }
}
@media (max-width: 640px) {
  /* phone-first scale: smaller type, tighter rhythm, lighter cards, calmer motion — nothing shouts */
  .hx-main { font-size: 1rem; line-height: 1.6; --hx-sec-pad: 40px; --hx-head-gap: 22px; --hx-block-gap: 16px; --hx-radius-card: 20px; }
  .hx-main .hx-wrap { padding-inline: 18px; }
  .hx-main::before { inset: -6%; animation: none; }
  .hx-main .hx-h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); line-height: 1.1; }
  .hx-main .hx-section-head { gap: 12px; }
  .hx-main .hx-section-head::after { width: 40px; height: 3px; }
  .hx-main .hx-section-head .hx-sub { font-size: 0.97rem; line-height: 1.58; }
  .hx-main .hx-reveal { transform: translateY(6px); transition-duration: 0.18s; }
  .hx-main :is(.hx-service-row, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-panel, .hx-demo, .hx-plat) { padding: 22px 18px; }
  .hx-main :is(.hx-service-row, .hx-panel, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-plat, .hx-demo)::after { display: none; }   /* no hover beam on touch */
  /* hero */
  .hx-main .hx-hero-inner { padding-top: 22px; padding-bottom: 20px; gap: 22px; }
  .hx-main .hx-hero-copy { gap: 16px; }
  .hx-main .hx-hero h1, .hx-main .hx-hero .hx-as-h1 { font-size: clamp(1.95rem, 8.6vw, 2.45rem); }
  .hx-main .hx-hero-sub { font-size: 0.97rem; max-width: 38ch; }
  .hx-main .hx-hero-cta { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 360px; }
  .hx-main .hx-hero-cta .hx-btn { width: 100%; }
  .hx-main .hx-hero-trust { gap: 8px 16px; font-size: 0.82rem; }
  .hx-main .hx-hero-proof { font-size: 0.84rem; gap: 8px 10px; }
  .hx-main .hx-hero-proof-meta::before { display: none; }   /* the faces sit on their own line here, no divider */
  .hx-main .hx-atom-stage { margin-top: 0; }
  .hx-main .hx-atom { --hx-s: min(300px, 78vw); }
  .hx-main .hx-hh-2 { display: none; }
  .hx-main .hx-hh-1 { width: 44px !important; top: 6px; right: 6px; opacity: 0.5; }
  /* platforms */
  .hx-main .hx-plat { flex-basis: 100%; }
  .hx-main .hx-plat-cta { justify-self: stretch; }
  /* growth rows */
  .hx-main .hx-service-head { flex-wrap: wrap; gap: 12px 14px; }
  .hx-main .hx-service-head h3, .hx-main .hx-service-head .hx-as-h3 { flex: 1 1 0; min-width: 0; font-size: 1.2rem; }
  .hx-main .hx-service-blurb, .hx-main .hx-service-blurb p, .hx-main .hx-service-info > p { font-size: 0.94rem; }
  .hx-main .hx-check-list li { font-size: 0.92rem; }
  .hx-main .hx-service-info { gap: 14px; }
  /* the staircase on phones: flat, a small run, the block depth kept */
  .hx-main .hx-stairs-stage { perspective: none; padding: 0 10px 12px 0; }
  .hx-main .hx-stairs { --hx-run: 10px; --hx-depth: 8px; gap: 12px; transform: none; }
  .hx-main .hx-stairs-stage:hover .hx-stairs { transform: none; }
  .hx-main .hx-stair-face { padding: 16px; gap: 12px; }
  .hx-main .hx-stair-num { width: 40px; height: 40px; border-radius: 12px; }
  .hx-main .hx-stair h3, .hx-main .hx-stair .hx-as-h3 { font-size: 1.05rem; }
  .hx-main .hx-stair p { font-size: 0.9rem; }
  /* audience, trust, CTA */
  .hx-main .hx-aud-card h3, .hx-main .hx-aud-card .hx-as-h3 { font-size: 1.45rem; }
  .hx-main .hx-aud-card > p, .hx-main .hx-trust-card p { font-size: 0.94rem; }
  .hx-main .hx-aud-stats { gap: 8px; padding-top: 16px; }
  .hx-main .hx-aud-stat { text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
  .hx-main .hx-aud-stat .hx-n { font-size: 1.25rem; }
  .hx-main .hx-aud-stat .hx-l { font-size: 0.54rem; letter-spacing: 0.1em; }
  .hx-main .hx-spine-badge { padding: 10px 6px; }
  .hx-main .hx-chart-stat { padding: 8px 8px; }
  .hx-main .hx-chart-stat b { font-size: 1rem; }
  .hx-main .hx-chart-stat span { white-space: normal; overflow: visible; font-size: 0.5rem; line-height: 1.3; }
  .hx-main .hx-cta-band h2, .hx-main .hx-cta-band .hx-as-h2 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .hx-main .hx-cta-band p { font-size: 0.97rem; }
  /* reviews: full-width centred cards, a centred scorecard, the form stacked and centred */
  .hx-main .hx-review-card { width: auto; padding: 18px; margin-bottom: 14px; }
  .hx-main .hx-review-card blockquote { font-size: 0.92rem; }
  .hx-main .hx-rev-wall { height: 440px; }
  .hx-main .hx-rev-layout { gap: 16px; }
  .hx-main .hx-rev-summary { align-items: center; text-align: center; }
  .hx-main .hx-rs-score, .hx-main .hx-rs-plats { justify-content: center; }
  .hx-main .hx-rev-form-wrap { margin-top: 28px; padding: 26px 18px 22px; gap: 18px; }
  .hx-main .hx-chart-pin span { font-size: 0.54rem; padding: 3px 7px; }
  .hx-main .hx-chart { margin-inline: 0; transform: rotateX(9deg); }
  .hx-main .hx-panel--chart:hover .hx-chart { transform: rotateX(9deg); }
  .hx-main .hx-chart-readout { font-size: 0.54rem; padding: 4px 9px; }
  .hx-main .hx-chart-readout b { font-size: 0.78rem; }
  .hx-main .hx-chart-pin--2 span { bottom: auto; top: 12px; }   /* below its dot, clear of the Explore label */
  .hx-main .hx-panel-foot, .hx-main .hx-chart-axis { font-size: 0.56rem; }
  .hx-main .hx-rev-form-intro { justify-items: center; text-align: center; }
  .hx-main .hx-rev-form-intro > p { max-width: none; font-size: 0.94rem; }
  .hx-main .hx-rev-form-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; font-size: 0.78rem; }
  .hx-main .hx-rev-form-perks li { align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #fff4ef; }
  .hx-main .hx-rev-form-perks .hx-tick { width: 16px; height: 16px; font-size: 10px; transform: none; }
  .hx-main .hx-field-row { grid-template-columns: 1fr; }
  .hx-main .hx-rev-form-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .hx-main .hx-rev-form-fields .btn.btn-primary { width: 100%; }
  /* FAQ */
  .hx-main .hx-faq { gap: 16px; }
  .hx-main .hx-faq-topic { font-size: 0.82rem; padding: 7px 13px; }
  .hx-main .hx-faq-item { border-radius: 16px; }
  .hx-main .hx-faq-q { padding: 14px 16px; gap: 12px; font-size: 0.95rem; }
  .hx-main .hx-plus { width: 26px; height: 26px; }
  .hx-main .hx-plus i { width: 10px; margin-left: -5px; }
  .hx-main .hx-faq-a > div > * { padding-inline: 16px; font-size: 0.92rem; }
  .hx-main .hx-faq-a > div > ul { padding-left: 34px; }
  .hx-main .hx-faq-a > div > :last-child { padding-bottom: 16px; }
  .hx-main .hx-faq-help-lead { font-size: 0.92rem; }
  .hx-main .hx-faq-chip { font-size: 0.84rem; padding: 8px 13px; }
}
@media (max-width: 480px) {
  .hx-main .hx-cta-stats { grid-template-columns: 1fr; gap: 8px; width: 100%; justify-self: stretch; }
  .hx-main .hx-cta-stat { flex-direction: row; align-items: baseline; gap: 12px; padding: 10px 16px; }
  .hx-main .hx-plat-list { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .hx-main .hx-wrap { padding-inline: 14px; }
  .hx-main .hx-chart-pin--2 span { display: none; }   /* the middle milestone is a plain dot on the smallest phones */
  .hx-main :is(.hx-service-row, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-panel, .hx-demo, .hx-plat) { padding: 20px 16px; }
  .hx-main .hx-service-info { min-width: 0; }
  .hx-main .hx-pmock-wrap, .hx-main .hx-pmock { max-width: 100%; min-width: 0; }
}

/* ---------- no motion: ?noanim QA switch and reduced-motion users ---------- */
html.hx-noanim .hx-main .hx-hero::before, html.hx-noanim .hx-main .hx-meteors i, html.hx-noanim .hx-main .hx-burst-g { animation: none; }
html.hx-noanim .hx-main .hx-demo-type { width: 12ch; animation: none; }
html.hx-noanim .hx-main :is(.hx-demo-profile, .hx-demo-progress, .hx-demo-chip) { opacity: 1; transform: none; animation: none; }
html.hx-noanim .hx-main .hx-demo-track i { width: 100%; animation: none; }
html.hx-noanim .hx-main .hx-demo-pct { --hx-p: 100; animation: none; }
html.hx-noanim .hx-main .hx-more-body { transition: none; }
html.hx-noanim .hx-main .hx-chart-line { stroke-dashoffset: 0; }
html.hx-noanim .hx-main .hx-stair { opacity: 1; transform: none; }
html.hx-noanim .hx-main :is(.hx-chart-tracer, .hx-chart-readout) { opacity: 1; }
html.hx-noanim .hx-main .hx-section::before { animation: none; }
html.hx-noanim .hx-main::before { animation: none; }
html.hx-noanim .hx-main :is(.hx-chart-area, .hx-chart-pin) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hx-main .hx-hero::before, .hx-main .hx-meteors i, .hx-main .hx-burst-g, .hx-main .hx-plat-ico, .hx-main .hx-plat-bubble, .hx-main .hx-ba-line i, .hx-main .hx-demo-caret { animation: none; }
  .hx-main .hx-demo-type { width: 12ch; animation: none; }
  .hx-main :is(.hx-demo-profile, .hx-demo-progress, .hx-demo-chip) { opacity: 1; transform: none; animation: none; }
  .hx-main .hx-demo-track i { width: 100%; animation: none; }
  .hx-main .hx-demo-pct { --hx-p: 100; animation: none; }
  .hx-main .hx-chart-line { stroke-dashoffset: 0; transition: none; }
  .hx-main .hx-chart { transform: none; transition: none; }
  .hx-main .hx-chart-tracer, .hx-main .hx-chart-readout { display: none; }
  .hx-main .hx-stair { opacity: 1; transform: none; transition: none; }
  .hx-main .hx-stairs { transform: none; transition: none; }
  .hx-main .hx-stair-num::after { animation: none; }
  .hx-main :is(.hx-chart-area, .hx-chart-pin) { opacity: 1; transform: none; transition: none; }
  .hx-main .hx-dm-typing i { animation: none; }
  .hx-main .hx-plat, .hx-main .hx-plat-body, .hx-main .hx-plat-list li, .hx-main .hx-plat-bubbles, .hx-main .hx-more-body, .hx-main .hx-faq-a, .hx-main .hx-plus { transition: none; }
  .hx-main .hx-atom, .hx-main .hx-hero-go, .hx-main .hx-swap-word, .hx-main .hx-electron, .hx-main .hx-electron::before, .hx-main .hx-nucleus > * { transition: none; }
  .hx-main .hx-section::before { animation: none; }
  .hx-main::before { animation: none; }
  .hx-main .hx-go-badge svg { animation: none; }
  .hx-main :is(.hx-service-row, .hx-panel, .hx-aud-card, .hx-trust-card, .hx-rev-summary, .hx-plat, .hx-demo)::after { display: none; }
}

/* ---------- ticker ▸ press logos (2026-09-04) ----------
   The ticker now carries the six "Trusted & featured" logos instead of text. The bar, its
   drift and the ✦ separators are the rules above; these only size and tint the logos. */
.hx-main .hx-ticker-logo { padding-block: 2px; }
.hx-main .hx-ticker-logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.55) sepia(0.35);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.hx-main .hx-ticker-logo:hover img { filter: none; opacity: 1; }
.hx-main .hx-ticker:hover .hx-ticker-track { animation-play-state: paused; }
@media (max-width: 640px) {
  .hx-main .hx-ticker-group { gap: 36px; padding-inline: 18px; }
  .hx-main .hx-ticker-logo img { height: 27px; max-width: 160px; }
}

/* ============================================================
   Admin-built sections (dashboard › Pages › Sections)
   The Visibility split from the service pages, available on every page: a heading and text beside
   a visual, the visual on the right, the left, or alternating down the rows. Values mirror
   .hx-svc-split in service.css so the spacing matches the reference block exactly.
   ============================================================ */
.hx-main .hx-cs-slot { display: contents; }
.hx-main .hx-cs .hx-wrap { display: grid; gap: clamp(40px, 5vw, 64px); }
/* two of the admin's sections in a row share one gap, like the rows inside a section */
.hx-main .hx-cs-slot .hx-cs + .hx-cs:not(.hx-section--tint) { padding-top: 0; }
.hx-main .hx-cs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hx-main .hx-cs-row--flip .hx-cs-media { order: -1; }
.hx-main .hx-cs-row--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hx-main .hx-cs-copy { display: grid; gap: 18px; max-width: 560px; justify-items: start; }
.hx-main .hx-cs-row--solo .hx-cs-copy { max-width: 780px; justify-items: center; }
.hx-main .hx-cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--hx-glass-solid);
  border: 1px solid var(--hx-glass-line);
  box-shadow: 0 8px 20px -16px rgba(23, 18, 14, 0.3);
  font-family: var(--hx-font-mono), monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-ink);
}
.hx-main .hx-cs-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--hx-g1), var(--hx-g2)); }
.hx-main .hx-cs-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; text-wrap: balance; }
.hx-main .hx-cs-text { display: grid; gap: 12px; color: var(--hx-body); font-size: 1rem; line-height: 1.7; }
.hx-main .hx-cs-text p, .hx-main .hx-cs-text h3, .hx-main .hx-cs-text ul, .hx-main .hx-cs-text ol, .hx-main .hx-cs-text .hx-as-h3 { margin: 0; }
.hx-main .hx-cs-text ul, .hx-main .hx-cs-text ol { padding-left: 1.25em; display: grid; gap: 6px; }
.hx-main .hx-cs-text h3, .hx-main .hx-cs-text .hx-as-h3 { font-family: var(--hx-font-display), sans-serif; font-size: 1.18rem; line-height: 1.3; color: var(--hx-ink); margin-top: 4px; }
.hx-main .hx-cs-text strong { color: var(--hx-ink); }
/* copy folded behind See more keeps the paragraph rhythm inside the fold */
.hx-main .hx-cs-text .hx-more { gap: 10px; }
.hx-main .hx-cs-text .hx-more-body { display: grid; gap: 12px; }
.hx-main .hx-cs-list li { color: var(--hx-body); }
.hx-main .hx-cs-row--solo .hx-cs-list li { justify-content: center; }
.hx-main .hx-cs-actions { margin-top: 4px; }
.hx-main .hx-cs .hx-cs-btn--lg { padding: 1.2em 2.3em; font-size: 1.12rem; }
.hx-main .hx-cs-row--solo .hx-cs-actions { justify-self: center; }
.hx-main .hx-cs-media { min-width: 0; width: 100%; display: grid; justify-items: center; }
.hx-main .hx-cs-media--image img {
  /* the admin's size in pixels (--hx-cs-img-w/-h on the wrapper); a set height crops the image to cover it */
  width: min(var(--hx-cs-img-w, 440px), 100%);
  height: auto;
  border-radius: var(--hx-radius-card, 26px);
  box-shadow: var(--hx-glass-shadow), 0 30px 60px -36px var(--hx-g1);
}
.hx-main .hx-cs-media--cover.hx-cs-media--image img { height: var(--hx-cs-img-h, auto); object-fit: cover; }
/* the "card" frame once drew a padded white box round the image; the picture now stands on its own */
/* a picture whose backdrop was made transparent: no box shadow (it would outline the empty rectangle), a soft drop shadow on the artwork instead */
.hx-main .hx-cs-media--nobg img { box-shadow: none; filter: drop-shadow(0 22px 30px rgba(23, 18, 14, 0.16)); }
/* the builder's preview: the section being edited is ringed */
html.hx-builder .hx-main .hx-cs.is-builder-focus { outline: 3px solid #ff553c; outline-offset: -3px; }
html.hx-builder .hx-main .hx-cs.is-builder-focus::after {
  content: "Editing";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ff553c;
  color: #fff;
  font: 700 11px/1 var(--hx-font-body), system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .hx-main .hx-cs .hx-wrap { gap: clamp(36px, 6vw, 48px); }
  .hx-main .hx-cs-row { grid-template-columns: 1fr; gap: 30px; }
  .hx-main .hx-cs-row--flip .hx-cs-media { order: 0; }
  .hx-main .hx-cs-copy { max-width: 640px; }
}
@media (max-width: 640px) {
  .hx-main .hx-cs-copy { gap: 14px; }
  .hx-main .hx-cs-text { font-size: 0.97rem; line-height: 1.6; }
  .hx-main .hx-cs-media--cover.hx-cs-media--image img { height: min(var(--hx-cs-img-h, auto), 80vw); }
}

/* ============================================================
   Stats bar under the hero (sections/service/hx-numbers, shared figures from Global content › By the numbers)
   The same band as the service pages, scoped to the home page.
   ============================================================ */
.hx-main .hx-home-numbers .hx-svc-numbers { padding-block: clamp(36px, 4.6vw, 64px); }
.hx-main .hx-home-numbers .hx-svc-kicker { font-family: var(--hx-font-mono), monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hx-g2); }
.hx-main .hx-home-numbers .hx-section-head { margin-bottom: clamp(22px, 3vw, 34px); }
.hx-main .hx-home-numbers .hx-svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hx-main .hx-home-numbers .hx-svc-stat { display: grid; gap: 6px; justify-items: center; text-align: center; padding: clamp(18px, 2.4vw, 28px) 12px; border-radius: var(--hx-radius-card, 26px); background: var(--hx-glass); border: 1px solid var(--hx-glass-line); box-shadow: var(--hx-glass-shadow); min-width: 0; }
.hx-main .hx-home-numbers .hx-svc-stat-v { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--hx-font-display), sans-serif; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.hx-main .hx-home-numbers .hx-svc-stat-sfx { font-size: 0.6em; background: linear-gradient(120deg, var(--hx-g1), var(--hx-g2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-main .hx-home-numbers .hx-svc-stat-l { font-family: var(--hx-font-mono), monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(23, 18, 14, 0.62); text-wrap: balance; }
@media (max-width: 640px) {
  .hx-main .hx-home-numbers .hx-svc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hx-main .hx-home-numbers .hx-svc-stat { padding: 16px 8px; border-radius: 18px; gap: 4px; }
  .hx-main .hx-home-numbers .hx-svc-stat-v { font-size: 1.7rem; }
  .hx-main .hx-home-numbers .hx-svc-stat-l { font-size: 0.56rem; letter-spacing: 0.1em; }
}


/* ── Built-in animated visuals (Pages › Sections, Visual: Animated visual) ──────────────────────────────
   Two 440x400 scenes ported from the Figma Make files: "Growth dashboard" (a floating phone with orbiting
   stat cards that swap sets) and "Platform growth" (a post card launching mini logos to four platform
   pills). The frame keeps the design's pixel coordinates and scales to its column: the ratio comes from
   --hx-vis-scale, which siteInteractions.js sets from the measured width (a ResizeObserver keeps it right).
   Older phone browsers cannot resolve a container width inside trig functions, so the CSS does not try: until the
   script runs the box is clipped at its own size and can never push the page wider than the screen. */
.hx-main .hx-cs-media--anim { width: 100%; }
.hx-main .hx-vis { position: relative; width: min(440px, 100%); max-width: 100%; aspect-ratio: 440 / 400; overflow: hidden; border-radius: var(--hx-radius-card, 26px); font-family: inherit; color: #26222c; line-height: 1.5; }
.hx-main .hx-vis-frame {
  position: absolute; top: 0; left: 0; width: 440px; height: 400px; overflow: hidden; isolation: isolate;
  border-radius: var(--hx-radius-card, 26px);
  transform-origin: 0 0;
  transform: scale(var(--hx-vis-scale, 1));
}
.hx-main .hx-vis p, .hx-main .hx-vis strong, .hx-main .hx-vis span { margin: 0; }
.hx-main .hx-vis svg { display: block; }
.hx-main .hx-vis-eyebrow { display: block; color: #a69ca1; font-size: 8px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 3px; }

/* Growth dashboard */
.hx-main .hx-vis--dashboard .hx-vis-frame { background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.88) 0, rgba(255, 255, 255, 0.88) 17%, rgba(255, 255, 255, 0) 46%), #fbf1ea; }
.hx-main .hx-vis-ambient { position: absolute; z-index: 0; border-radius: 999px; filter: blur(4px); pointer-events: none; }
.hx-main .hx-vis-ambient--one { width: 390px; height: 390px; top: -190px; right: -100px; background: rgba(255, 183, 168, 0.2); }
.hx-main .hx-vis-ambient--two { width: 330px; height: 330px; bottom: -190px; left: -110px; background: rgba(242, 84, 91, 0.08); }
.hx-main .hx-vis-stage { position: absolute; top: 50%; left: 50%; width: 940px; height: 720px; transform: translate(-50%, -50%) scale(0.5); }
.hx-main .hx-vis-phone-shadow { position: absolute; z-index: 1; bottom: 52px; left: 50%; width: 230px; height: 42px; border-radius: 50%; background: rgba(120, 66, 58, 0.17); filter: blur(19px); transform: translateX(-50%); }
.hx-main .hx-vis-phone-float { position: absolute; z-index: 4; top: 50%; left: 50%; width: 276px; height: 558px; will-change: transform; animation: hx-vis-phone-float 4s ease-in-out infinite; }
.hx-main .hx-vis-phone {
  position: relative; width: 100%; height: 100%; padding: 9px; overflow: hidden; border-radius: 44px;
  background: linear-gradient(145deg, #ff8a7a 0%, #f2545b 52%, #df3f4a 100%);
  border: 2px solid rgba(255, 255, 255, 0.52);
  box-shadow: 0 40px 75px rgba(167, 57, 61, 0.22), 0 12px 24px rgba(167, 57, 61, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.hx-main .hx-vis-phone.is-pulse { animation: hx-vis-phone-pulse 0.9s ease-out; }
.hx-main .hx-vis-phone::after { content: ""; position: absolute; top: 72px; left: -3px; width: 3px; height: 52px; border-radius: 2px 0 0 2px; background: #c93641; }
.hx-main .hx-vis-phone-speaker { position: absolute; z-index: 3; top: 17px; left: 50%; width: 72px; height: 20px; border-radius: 20px; background: #2b2025; transform: translateX(-50%); }
.hx-main .hx-vis-phone-screen { height: 100%; padding: 38px 17px 18px; overflow: hidden; border-radius: 35px; background: #fffaf7; }
.hx-main .hx-vis-screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hx-main .hx-vis-screen-title { font-size: 18px; font-weight: 700; letter-spacing: -0.04em; }
.hx-main .hx-vis-profile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #f2545b; background: #fff0eb; border: 1px solid #f9d8d2; }
.hx-main .hx-vis-profile svg { width: 16px; height: 16px; }
.hx-main .hx-vis-growth { position: relative; height: 174px; padding: 17px 15px 0; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid #f4e8e2; box-shadow: 0 10px 28px rgba(90, 59, 53, 0.06); }
.hx-main .hx-vis-growth > p { margin: 0 0 2px; color: #a69ca1; font-size: 9px; font-weight: 600; }
.hx-main .hx-vis-growth-total { display: flex; align-items: center; justify-content: space-between; }
.hx-main .hx-vis-growth-total strong { font-size: 26px; font-weight: 700; letter-spacing: -0.055em; }
.hx-main .hx-vis-growth-total span { display: flex; align-items: center; gap: 2px; color: #f2545b; font-size: 8px; font-weight: 700; }
.hx-main .hx-vis-growth-total svg { width: 10px; height: 10px; }
.hx-main .hx-vis-chart { position: absolute; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); }
.hx-main .hx-vis-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.hx-main .hx-vis-stat { padding: 12px; border-radius: 15px; background: #fff; border: 1px solid #f4e8e2; }
.hx-main .hx-vis-stat span { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; color: #a69ca1; font-size: 8px; font-weight: 600; }
.hx-main .hx-vis-stat svg { width: 10px; height: 10px; color: #f2545b; }
.hx-main .hx-vis-stat strong { font-size: 16px; font-weight: 700; letter-spacing: -0.04em; }
.hx-main .hx-vis-wallet { display: flex; align-items: center; justify-content: space-between; height: 72px; margin-top: 9px; padding: 14px 16px; border-radius: 17px; color: #fff; background: linear-gradient(120deg, #f2545b, #ff8a7a); box-shadow: 0 13px 28px rgba(242, 84, 91, 0.22); }
.hx-main .hx-vis-wallet p { margin: 0 0 2px; opacity: 0.8; font-size: 8px; }
.hx-main .hx-vis-wallet strong { font-size: 19px; font-weight: 700; letter-spacing: -0.04em; }
.hx-main .hx-vis-wallet-mark { position: relative; width: 35px; height: 25px; }
.hx-main .hx-vis-wallet-mark span { position: absolute; width: 25px; height: 25px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.52); }
.hx-main .hx-vis-wallet-mark span:last-child { right: 0; }
.hx-main .hx-vis-reward { display: flex; align-items: center; justify-content: space-between; height: 82px; margin-top: 9px; padding: 12px 15px; border-radius: 17px; background: #fff; border: 1px solid #f4e8e2; }
.hx-main .hx-vis-reward-title { font-size: 14px; font-weight: 700; letter-spacing: -0.03em; }
.hx-main .hx-vis-reward-note { margin-top: 2px; color: #a69ca1; font-size: 8px; }
.hx-main .hx-vis-wheel {
  position: relative; width: 49px; height: 49px; border-radius: 50%; border: 4px solid #ffe2dc; box-shadow: 0 4px 10px rgba(242, 84, 91, 0.15);
  background: conic-gradient(#f2545b 0 12.5%, #ffd1c8 0 25%, #ff8a7a 0 37.5%, #fff0eb 0 50%, #f2545b 0 62.5%, #ffd1c8 0 75%, #ff8a7a 0 87.5%, #fff0eb 0);
}
.hx-main .hx-vis-wheel::before { content: ""; position: absolute; top: -7px; left: 50%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #dc414a; transform: translateX(-50%); }
.hx-main .hx-vis-wheel-center { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: #f2545b; border: 3px solid #fff; transform: translate(-50%, -50%); }
.hx-main .hx-vis-slot { position: absolute; z-index: 6; opacity: 0; transform: translate(var(--hx-vis-cx), var(--hx-vis-cy)) scale(0.3); transform-origin: center center; will-change: transform, opacity; }
.hx-main .hx-vis-slot.is-entering, .hx-main .hx-vis-slot.is-holding { opacity: 1; transform: translate(0) scale(1); }
.hx-main .hx-vis-slot.is-entering { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease-out; }
.hx-main .hx-vis-slot.is-exiting { opacity: 0; transform: translate(var(--hx-vis-cx), var(--hx-vis-cy)) scale(0.3); transition: transform 0.6s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.42s ease-in; }
.hx-main .hx-vis-slot--likes { --hx-vis-cx: 298px; --hx-vis-cy: 205px; top: 118px; left: 85px; }
.hx-main .hx-vis-slot--followers { --hx-vis-cx: -297px; --hx-vis-cy: 215px; top: 106px; right: 70px; }
.hx-main .hx-vis-slot--views { --hx-vis-cx: 313px; --hx-vis-cy: -225px; bottom: 105px; left: 70px; }
.hx-main .hx-vis-slot--growth { --hx-vis-cx: -292px; --hx-vis-cy: -220px; bottom: 115px; right: 85px; }
.hx-main .hx-vis-slot--growth .hx-vis-card { min-width: 185px; }
.hx-main .hx-vis-card {
  display: flex; align-items: center; gap: 13px; min-width: 174px; padding: 16px 18px; border-radius: 20px; will-change: transform;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
  box-shadow: 0 22px 45px rgba(242, 84, 91, 0.14), 0 6px 14px rgba(121, 70, 62, 0.08);
}
.hx-main .hx-vis-card--wide { min-width: 206px; }
.hx-main .hx-vis-card-icon { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 14px; color: #f2545b; background: #fff0eb; }
.hx-main .hx-vis-card-icon svg { width: 21px; height: 21px; }
.hx-main .hx-vis-card-label { margin: 0 0 1px; color: #a79da2; font-size: 10px; font-weight: 600; }
.hx-main .hx-vis-card-value { font-size: 21px; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; }
.hx-main .hx-vis-pill { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 5px 7px; border-radius: 999px; color: #e54a52; background: #fff0eb; font-size: 8px; font-weight: 700; white-space: nowrap; }
.hx-main .hx-vis-pill svg { width: 10px; height: 10px; }
.hx-main .hx-vis-orbit--0 { animation: hx-vis-card-likes 3s ease-in-out -0.4s infinite; }
.hx-main .hx-vis-orbit--1 { animation: hx-vis-card-followers 3.5s ease-in-out -1.2s infinite; }
.hx-main .hx-vis-orbit--2 { animation: hx-vis-card-views 4s ease-in-out -2.3s infinite; }
.hx-main .hx-vis-orbit--3 { animation: hx-vis-card-growth 4.5s ease-in-out -3.1s infinite; }
@keyframes hx-vis-phone-float { 0%, 100% { transform: translate(-50%, -50%) translateY(5px) rotate(-5deg); } 50% { transform: translate(-50%, -50%) translateY(-5px) rotate(-5deg); } }
@keyframes hx-vis-card-likes { 0%, 100% { transform: translate(0) rotate(-1deg); } 50% { transform: translate(8px, -36px) rotate(1.2deg); } }
@keyframes hx-vis-card-followers { 0%, 100% { transform: translate(0) rotate(1.4deg); } 50% { transform: translate(-7px, -36px) rotate(-1deg); } }
@keyframes hx-vis-card-views { 0%, 100% { transform: translate(0) rotate(1deg); } 50% { transform: translate(6px, -36px) rotate(-1.3deg); } }
@keyframes hx-vis-card-growth { 0%, 100% { transform: translate(0) rotate(-1.2deg); } 50% { transform: translate(-8px, -36px) rotate(1.1deg); } }
@keyframes hx-vis-phone-pulse {
  0%, 100% { box-shadow: 0 40px 75px rgba(167, 57, 61, 0.22), 0 12px 24px rgba(167, 57, 61, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.6); }
  45% { box-shadow: 0 40px 75px rgba(167, 57, 61, 0.22), 0 12px 24px rgba(167, 57, 61, 0.15), 0 0 34px rgba(242, 84, 91, 0.34), inset 0 0 18px rgba(255, 180, 168, 0.2); }
}

/* Platform growth */
.hx-main .hx-vis--platforms .hx-vis-frame { background: #fcf5f2; box-shadow: 0 24px 60px rgba(91, 54, 47, 0.12); color: #1e1e24; }
.hx-main .hx-vis-glow { position: absolute; z-index: 0; border-radius: 999px; filter: blur(110px); pointer-events: none; }
.hx-main .hx-vis-glow--top { width: 280px; height: 250px; top: -100px; right: -75px; background: #fbe4dc; }
.hx-main .hx-vis-glow--bottom { width: 225px; height: 190px; bottom: -120px; left: -85px; background: #fceae4; }
.hx-main .hx-vis-radar { position: absolute; z-index: 1; top: 171px; left: 220px; width: 188px; height: 188px; opacity: 0; border-radius: 50%; border: 1.5px solid rgba(239, 75, 85, 0.2); transform: translate(-50%, -50%) scale(0.75); animation: hx-vis-radar 5s ease-out infinite; }
.hx-main .hx-vis-radar--two { animation-delay: 0.22s; }
.hx-main .hx-vis-lines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx-main .hx-vis-lines path { fill: none; stroke: rgba(239, 75, 85, 0.34); stroke-width: 1.25px; stroke-linecap: round; stroke-dasharray: 3 5; }
.hx-main .hx-vis-post-float { position: absolute; z-index: 4; top: 100px; left: 130px; width: 180px; height: 200px; animation: hx-vis-card-float 2.5s ease-in-out infinite; }
.hx-main .hx-vis-post { position: relative; width: 180px; height: 200px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(255, 255, 255, 0.86); box-shadow: 0 22px 52px rgba(201, 91, 77, 0.16); }
.hx-main .hx-vis-thumb { position: relative; display: grid; place-items: center; width: 160px; height: 142px; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, #ef4b55 0%, #f77969 51%, #ffc2a8 100%); }
.hx-main .hx-vis-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.16)); }
.hx-main .hx-vis-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); }
.hx-main .hx-vis-orb--one { width: 96px; height: 96px; top: -38px; right: -17px; }
.hx-main .hx-vis-orb--two { width: 70px; height: 70px; bottom: -31px; left: -15px; background: rgba(255, 255, 255, 0.08); }
.hx-main .hx-vis-orb--three { width: 27px; height: 27px; top: 23px; left: 21px; background: rgba(255, 255, 255, 0.08); }
.hx-main .hx-vis-logo-anchor { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; animation: hx-vis-logo-float 2.4s ease-in-out infinite; }
.hx-main .hx-vis-logo-anchor::before { content: ""; position: absolute; z-index: -1; width: 42px; height: 46px; background: #fff; clip-path: polygon(50% 0, 96% 24%, 96% 74%, 50% 100%, 4% 74%, 4% 24%); }
.hx-main .hx-vis-logo { display: block; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(200, 60, 60, 0.25)); animation: hx-vis-logo-launch 8.4s ease-in-out infinite; }
.hx-main .hx-vis-post-stats { display: flex; align-items: center; gap: 24px; height: 38px; padding: 2px 8px 0; color: #58545a; font-size: 10px; font-weight: 800; }
.hx-main .hx-vis-post-stats span { display: flex; align-items: center; gap: 5px; }
.hx-main .hx-vis-post-stats b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hx-main .hx-vis-post-stats svg { width: 13px; height: 13px; fill: #ef4b55; }
.hx-main .hx-vis-pill--instagram, .hx-main .hx-vis-pill--youtube, .hx-main .hx-vis-pill--tiktok, .hx-main .hx-vis-pill--facebook {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; height: 53px; padding: 6px 10px 6px 7px; margin: 0; border-radius: 14px;
  color: #1e1e24; background: rgba(255, 255, 255, 0.98); box-shadow: 0 12px 30px rgba(230, 90, 90, 0.08); white-space: nowrap; font-size: 10px;
}
.hx-main .hx-vis-pill-icon { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; color: #ef4b55; background: #ffe9e6; }
.hx-main .hx-vis-pill-icon::after { content: ""; position: absolute; top: -6px; right: -5px; width: 6px; height: 6px; opacity: 0; background: #ef4b55; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.hx-main .hx-vis-pill-icon svg { width: 14px; height: 14px; }
.hx-main .hx-vis-pill-copy { display: flex; flex-direction: column; gap: 2px; }
.hx-main .hx-vis-pill-name { color: #969096; font-size: 9px; font-weight: 700; line-height: 1; }
.hx-main .hx-vis-pill-value { font-size: 10px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; animation: hx-vis-number-roll 8.4s ease-out infinite; }
.hx-main .hx-vis-pill--instagram { top: 29px; left: 14px; animation: hx-vis-pill-float-a 2.8s ease-in-out infinite, hx-vis-pill-hit 8.4s ease-out 2.2s infinite; }
.hx-main .hx-vis-pill--youtube { top: 31px; right: 13px; animation: hx-vis-pill-float-b 3.1s ease-in-out 0.35s infinite, hx-vis-pill-hit 8.4s ease-out 4s infinite; }
.hx-main .hx-vis-pill--tiktok { bottom: 28px; left: 13px; animation: hx-vis-pill-float-b 2.9s ease-in-out 0.7s infinite, hx-vis-pill-hit 8.4s ease-out 5.8s infinite; }
.hx-main .hx-vis-pill--facebook { bottom: 27px; right: 12px; animation: hx-vis-pill-float-a 3.2s ease-in-out 0.15s infinite, hx-vis-pill-hit 8.4s ease-out 7.6s infinite; }
.hx-main .hx-vis-pill--instagram .hx-vis-pill-icon { animation: hx-vis-icon-flash 8.4s ease-out 2.2s infinite; }
.hx-main .hx-vis-pill--youtube .hx-vis-pill-icon { animation: hx-vis-icon-flash 8.4s ease-out 4s infinite; }
.hx-main .hx-vis-pill--tiktok .hx-vis-pill-icon { animation: hx-vis-icon-flash 8.4s ease-out 5.8s infinite; }
.hx-main .hx-vis-pill--facebook .hx-vis-pill-icon { animation: hx-vis-icon-flash 8.4s ease-out 7.6s infinite; }
.hx-main .hx-vis-pill--instagram .hx-vis-pill-icon::after { animation: hx-vis-arrival 8.4s ease-out 2.2s infinite; }
.hx-main .hx-vis-pill--youtube .hx-vis-pill-icon::after { animation: hx-vis-arrival 8.4s ease-out 4s infinite; }
.hx-main .hx-vis-pill--tiktok .hx-vis-pill-icon::after { animation: hx-vis-arrival 8.4s ease-out 5.8s infinite; }
.hx-main .hx-vis-pill--facebook .hx-vis-pill-icon::after { animation: hx-vis-arrival 8.4s ease-out 7.6s infinite; }
.hx-main .hx-vis-flying-logo, .hx-main .hx-vis-flyer { position: absolute; z-index: 3; display: grid; place-items: center; opacity: 0; }
.hx-main .hx-vis-flying-logo { width: 26px; height: 26px; filter: drop-shadow(0 4px 8px rgba(200, 60, 60, 0.25)); }
.hx-main .hx-vis-flying-logo::before { content: ""; position: absolute; z-index: -1; width: 17px; height: 19px; background: #fff; clip-path: polygon(50% 0, 96% 24%, 96% 74%, 50% 100%, 4% 74%, 4% 24%); }
.hx-main .hx-vis-flying-logo::after { content: ""; position: absolute; z-index: -2; right: 22px; width: 3px; height: 3px; border-radius: 50%; background: rgba(239, 75, 85, 0.72); box-shadow: -7px 2px rgba(239, 75, 85, 0.45), -14px 4px rgba(255, 122, 112, 0.25); }
.hx-main .hx-vis-flying-logo img { display: block; width: 26px; height: 26px; object-fit: contain; }
.hx-main .hx-vis-flyer { width: 16px; height: 16px; border-radius: 6px; color: #ef4b55; background: rgba(255, 233, 230, 0.96); border: 1px solid rgba(239, 75, 85, 0.26); box-shadow: 0 4px 9px rgba(221, 76, 82, 0.14); }
.hx-main .hx-vis-flyer svg { width: 8px; height: 8px; fill: currentColor; }
.hx-main .hx-vis-route--instagram { offset-path: path("M 220 171 C 190 170 158 170 132 148 C 106 126 101 91 112 70"); }
.hx-main .hx-vis-route--youtube { offset-path: path("M 220 171 C 250 170 282 170 308 149 C 333 128 339 93 333 72"); }
.hx-main .hx-vis-route--tiktok { offset-path: path("M 220 171 C 190 173 157 179 132 205 C 106 233 101 312 112 347"); }
.hx-main .hx-vis-route--facebook { offset-path: path("M 220 171 C 250 173 283 179 308 205 C 335 233 340 311 333 346"); }
.hx-main .hx-vis-launch--instagram { animation: hx-vis-logo-flight 8.4s ease-in-out 0s infinite; }
.hx-main .hx-vis-launch--youtube { animation: hx-vis-logo-flight 8.4s ease-in-out 1.8s infinite; }
.hx-main .hx-vis-launch--tiktok { animation: hx-vis-logo-flight 8.4s ease-in-out 3.6s infinite; }
.hx-main .hx-vis-launch--facebook { animation: hx-vis-logo-flight 8.4s ease-in-out 5.4s infinite; }
.hx-main .hx-vis-launch--instagram-one { animation: hx-vis-flyer-flight 8.4s ease-in-out 0.25s infinite; }
.hx-main .hx-vis-launch--instagram-two { animation: hx-vis-flyer-flight 8.4s ease-in-out 0.5s infinite; }
.hx-main .hx-vis-launch--instagram-three { animation: hx-vis-flyer-flight 8.4s ease-in-out 0.75s infinite; }
.hx-main .hx-vis-launch--youtube-one { animation: hx-vis-flyer-flight 8.4s ease-in-out 2.05s infinite; }
.hx-main .hx-vis-launch--youtube-two { animation: hx-vis-flyer-flight 8.4s ease-in-out 2.3s infinite; }
.hx-main .hx-vis-launch--youtube-three { animation: hx-vis-flyer-flight 8.4s ease-in-out 2.55s infinite; }
.hx-main .hx-vis-launch--tiktok-one { animation: hx-vis-flyer-flight 8.4s ease-in-out 3.85s infinite; }
.hx-main .hx-vis-launch--tiktok-two { animation: hx-vis-flyer-flight 8.4s ease-in-out 4.1s infinite; }
.hx-main .hx-vis-launch--tiktok-three { animation: hx-vis-flyer-flight 8.4s ease-in-out 4.35s infinite; }
.hx-main .hx-vis-launch--facebook-one { animation: hx-vis-flyer-flight 8.4s ease-in-out 5.65s infinite; }
.hx-main .hx-vis-launch--facebook-two { animation: hx-vis-flyer-flight 8.4s ease-in-out 5.9s infinite; }
.hx-main .hx-vis-launch--facebook-three { animation: hx-vis-flyer-flight 8.4s ease-in-out 6.15s infinite; }
.hx-main .hx-vis-heart { position: absolute; z-index: 3; top: 165px; left: 214px; width: 13px; opacity: 0; color: #ef4b55; }
.hx-main .hx-vis-heart svg, .hx-main .hx-vis-spark svg { width: 100%; height: auto; fill: currentColor; }
.hx-main .hx-vis-heart--one { animation: hx-vis-heart-one 1.8s ease-out 0s infinite; }
.hx-main .hx-vis-heart--two { animation: hx-vis-heart-two 2.2s ease-out 0.35s infinite; }
.hx-main .hx-vis-heart--three { animation: hx-vis-heart-three 1.65s ease-out 0.7s infinite; }
.hx-main .hx-vis-heart--four { animation: hx-vis-heart-four 2.4s ease-out 1.05s infinite; }
.hx-main .hx-vis-heart--five { animation: hx-vis-heart-one 2.05s ease-out 1.3s infinite; }
.hx-main .hx-vis-heart--six { animation: hx-vis-heart-two 1.75s ease-out 1.55s infinite; }
.hx-main .hx-vis-spark { position: absolute; z-index: 1; opacity: 0; color: #ef4b55; pointer-events: none; }
.hx-main .hx-vis-spark--soft { color: #ff7a70; }
.hx-main .hx-vis-spark--white { color: #fff; }
.hx-main .hx-vis-spark--one { animation: hx-vis-sparkle 1.7s ease 0.1s infinite; }
.hx-main .hx-vis-spark--two { animation: hx-vis-sparkle 2.4s ease 0.7s infinite; }
.hx-main .hx-vis-spark--three { animation: hx-vis-sparkle 2.1s ease 1.2s infinite; }
.hx-main .hx-vis-spark--four { animation: hx-vis-sparkle 2.8s ease 0.35s infinite; }
.hx-main .hx-vis-spark--five { animation: hx-vis-sparkle 1.9s ease 1.4s infinite; }
.hx-main .hx-vis-spark--six { animation: hx-vis-sparkle 2.6s ease 0.2s infinite; }
.hx-main .hx-vis-spark--seven { animation: hx-vis-sparkle 1.6s ease 0.9s infinite; }
.hx-main .hx-vis-spark--eight { animation: hx-vis-sparkle 2.3s ease 1.65s infinite; }
.hx-main .hx-vis-spark--nine { animation: hx-vis-sparkle 2.9s ease 0.55s infinite; }
.hx-main .hx-vis-spark--ten { animation: hx-vis-sparkle 1.8s ease 1.1s infinite; }
.hx-main .hx-vis-spark--eleven { animation: hx-vis-sparkle 2.7s ease 1.8s infinite; }
.hx-main .hx-vis-spark--twelve { animation: hx-vis-sparkle 2s ease 0.4s infinite; }
.hx-main .hx-vis-spark--thirteen { animation: hx-vis-sparkle 1.5s ease 1.25s infinite; }
.hx-main .hx-vis-spark--fourteen { animation: hx-vis-sparkle 2.5s ease 0.85s infinite; }
.hx-main .hx-vis-spark--fifteen { animation: hx-vis-sparkle 2.2s ease 1.55s infinite; }
.hx-main .hx-vis-spark--sixteen { animation: hx-vis-sparkle 1.75s ease 0.15s infinite; }
.hx-main .hx-vis-spark--seventeen { animation: hx-vis-sparkle 2.85s ease 1.05s infinite; }
.hx-main .hx-vis-spark--eighteen { animation: hx-vis-sparkle 2.35s ease 0.6s infinite; }
.hx-main .hx-vis-dot { position: absolute; z-index: 1; width: 3px; height: 3px; opacity: 0; border-radius: 50%; background: #ffc2a8; pointer-events: none; }
.hx-main .hx-vis-dot--one { top: 250px; left: 96px; animation: hx-vis-dot-drift 4.8s ease-in 0.2s infinite; }
.hx-main .hx-vis-dot--two { top: 302px; left: 122px; width: 2px; height: 2px; animation: hx-vis-dot-sway 5.6s ease-in 1.1s infinite; }
.hx-main .hx-vis-dot--three { top: 283px; left: 317px; animation: hx-vis-dot-drift 4.3s ease-in 1.8s infinite; }
.hx-main .hx-vis-dot--four { top: 242px; left: 341px; width: 2px; height: 2px; animation: hx-vis-dot-sway 5.1s ease-in 0.7s infinite; }
.hx-main .hx-vis-dot--five { top: 341px; left: 186px; animation: hx-vis-dot-sway 5.9s ease-in 2.2s infinite; }
.hx-main .hx-vis-dot--six { top: 347px; left: 271px; width: 2px; height: 2px; animation: hx-vis-dot-drift 4.7s ease-in 1.45s infinite; }
@keyframes hx-vis-card-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes hx-vis-radar { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.78); } 3% { opacity: 0.48; } 14% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); } 100% { opacity: 0; } }
@keyframes hx-vis-logo-float { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@keyframes hx-vis-logo-launch {
  0%, 7.14%, 21.43%, 28.57%, 42.86%, 50%, 64.29%, 71.43%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  3.57%, 25%, 46.43%, 67.86% { opacity: 1; transform: translateY(-4px) scale(1.1); }
}
@keyframes hx-vis-pill-float-a { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }
@keyframes hx-vis-pill-float-b { 0%, 100% { translate: 0 3px; } 50% { translate: 0 -2px; } }
@keyframes hx-vis-pill-hit { 0%, 5.95%, 100% { scale: 1; } 2.98% { scale: 1.04; } }
@keyframes hx-vis-number-roll { 0% { opacity: 0.55; transform: translateY(3px); } 5%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes hx-vis-logo-flight {
  0% { opacity: 1; offset-distance: 0%; transform: rotate(-8deg) scale(0); }
  3.57% { opacity: 1; offset-distance: 0%; transform: rotate(-4deg) scale(1); }
  12% { opacity: 1; transform: rotate(8deg) scale(1); }
  21.43% { opacity: 1; offset-distance: 100%; transform: rotate(-3deg) scale(1); }
  26.19% { opacity: 0; offset-distance: 100%; transform: rotate(5deg) scale(0); }
  26.2%, 100% { opacity: 0; offset-distance: 0%; transform: scale(0); }
}
@keyframes hx-vis-flyer-flight {
  0% { opacity: 0.9; offset-distance: 0%; transform: rotate(-7deg) scale(0); }
  3.57% { opacity: 0.9; offset-distance: 0%; transform: rotate(-3deg) scale(1); }
  12% { opacity: 0.82; transform: rotate(8deg) scale(0.9); }
  21.43% { opacity: 0.75; offset-distance: 100%; transform: rotate(-5deg) scale(0.8); }
  26.19% { opacity: 0; offset-distance: 100%; transform: scale(0); }
  26.2%, 100% { opacity: 0; offset-distance: 0%; transform: scale(0); }
}
@keyframes hx-vis-icon-flash { 0%, 2.38%, 100% { background: #ffe9e6; } 1.19% { background: #ffc9c3; } }
@keyframes hx-vis-arrival { 0%, 5.95%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 2.38% { opacity: 1; transform: scale(1.2) rotate(35deg); } }
@keyframes hx-vis-heart-one { 0% { opacity: 0; transform: translate(0) scale(0.55); } 15% { opacity: 0.82; } 100% { opacity: 0; transform: translate(-28px, -92px) rotate(-16deg) scale(1); } }
@keyframes hx-vis-heart-two { 0% { opacity: 0; transform: translate(0) scale(0.55); } 15% { opacity: 0.75; } 100% { opacity: 0; transform: translate(25px, -98px) rotate(19deg) scale(0.9); } }
@keyframes hx-vis-heart-three { 0% { opacity: 0; transform: translate(0) scale(0.5); } 15% { opacity: 0.8; } 100% { opacity: 0; transform: translate(-11px, -105px) rotate(-9deg) scale(0.75); } }
@keyframes hx-vis-heart-four { 0% { opacity: 0; transform: translate(0) scale(0.5); } 15% { opacity: 0.72; } 100% { opacity: 0; transform: translate(38px, -82px) rotate(22deg) scale(0.8); } }
@keyframes hx-vis-sparkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 48% { opacity: 0.82; transform: scale(1) rotate(25deg); } }
@keyframes hx-vis-dot-drift { 0% { opacity: 0; transform: translateY(18px); } 20%, 70% { opacity: 0.58; } 100% { opacity: 0; transform: translateY(-52px); } }
@keyframes hx-vis-dot-sway { 0% { opacity: 0; transform: translate(0, 18px); } 20%, 70% { opacity: 0.5; } 50% { transform: translate(7px, -18px); } 100% { opacity: 0; transform: translate(-4px, -54px); } }

/* Still when the visitor asks for it (or ?noanim=1 for screenshots): the first card set and the resting frame. */
@media (prefers-reduced-motion: reduce) {
  .hx-main .hx-vis *, .hx-main .hx-vis *::before, .hx-main .hx-vis *::after { animation: none !important; transition: none !important; }
  .hx-main .hx-vis-slot[data-hx-vis-slot="0"] { opacity: 1; transform: translate(0) scale(1); }
  .hx-main .hx-vis-slot[data-hx-vis-slot="1"] { opacity: 0; }
}
.hx-noanim .hx-main .hx-vis *, .hx-noanim .hx-main .hx-vis *::before, .hx-noanim .hx-main .hx-vis *::after { animation: none !important; transition: none !important; }
.hx-noanim .hx-main .hx-vis-slot[data-hx-vis-slot="0"] { opacity: 1; transform: translate(0) scale(1); }
.hx-noanim .hx-main .hx-vis-slot[data-hx-vis-slot="1"] { opacity: 0; }

/* the paragraph after a section row's bullet points */
.hx-main .hx-cs-text--after { margin-top: 4px; }

/* copy printed as paragraphs (the admin's formatting bar): an intro or a card's text may now hold several paragraphs */
.hx-main div.hx-sub p { margin: 0; }
.hx-main div.hx-sub p + p { margin-top: 10px; }
.hx-main div.hx-sub ul, .hx-main div.hx-sub ol { margin: 10px 0 0 1.2em; padding: 0; }
.hx-main .hx-trust-card p + p, .hx-main .hx-aud-card p + p, .hx-main .hx-stair-body p + p, .hx-main article p + p, .hx-main li p + p, .hx-main form p + p { margin-top: 0.6em; }
.hx-main .hx-cta-intro p + p { margin-top: 0.6em; }