/* 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 {
  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 {
  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 { outline: 2px solid var(--hx-g1); outline-offset: 2px; }
.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); }
.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; }
.hx-main .hx-cs-media--card.hx-cs-media--image img {
  padding: 12px;
  background: var(--hx-glass-solid);
  border: 1px solid var(--hx-glass-line);
}
/* 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; }