/* ==========================================================================
   TELEXICO v200 KERNEL v2 — COMPONENTS
   --------------------------------------------------------------------------
   Built from tokens.css. Matches live site visual language exactly:
   - Dark hero (purple/black gradient page background)
   - Massive bold typography with pink gradient accents
   - Dark glass form card
   - Trust bar row above hero
   - 3-CTA hero (pink primary, green WhatsApp, dark Call)
   - Bigger stat pills with full backgrounds
   - "Every call answered" AI hook band
   - Solutions/Industries/Areas dropdowns in header
   Refinements over live: tightened spacing, cleaner type rhythm, no inline styles.
   ========================================================================== */

@import url('./tokens.css');

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--tx-font-body);
  font-size: var(--tx-text-md);
  line-height: var(--tx-lh-normal);
  color: var(--tx-text);
  background: var(--tx-bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: 72px; /* room for mobile sticky bar */
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--tx-fw-ultra);
  letter-spacing: var(--tx-ls-tight);
  line-height: var(--tx-lh-snug);
  color: var(--tx-white);
}
h1 {
  font-size: var(--tx-text-4xl);
  letter-spacing: var(--tx-ls-tighter);
  line-height: var(--tx-lh-tight);
  font-weight: var(--tx-fw-mega);
}
h2 { font-size: var(--tx-text-3xl); font-weight: var(--tx-fw-ultra); letter-spacing: -0.06em; }
h3 { font-size: var(--tx-text-xl); }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select, textarea { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ============================ PAGE WRAPPER ============================ */
.tx-page {
  min-height: 100vh;
  background: var(--tx-page-bg);
}

.tx-container {
  width: min(var(--tx-container), calc(100% - 40px));
  margin: 0 auto;
}

/* ============================ HEADER ============================ */
.tx-header {
  position: sticky;
  top: 0;
  z-index: var(--tx-z-sticky-header);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  background: var(--tx-grad-nav);
  border-bottom: 1px solid var(--tx-border);
}
.tx-header-inner {
  width: min(var(--tx-container), calc(100% - 40px));
  margin: 0 auto;
  height: var(--tx-header-h-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tx-space-4);
}
.tx-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-weight: var(--tx-fw-mega);
  letter-spacing: var(--tx-ls-tight);
  font-size: 1.4rem;
  color: var(--tx-white);
  line-height: 1;
  text-decoration: none;
}
.tx-logo-row { display: inline-flex; align-items: center; }
.tx-logo-tagline {
  display: none;
  font-size: 0.65rem;
  font-weight: var(--tx-fw-semibold);
  letter-spacing: 0.02em;
  margin-top: 3px;
  color: var(--tx-muted-2);
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}
.tx-logo-x {
  color: #ec4899;
  font-style: italic;
}

/* Desktop nav with dropdowns */
.tx-desktop-nav { display: none; }
.tx-header-actions { display: none; }
.tx-mobile-toggle {
  width: 42px;
  height: 42px;
  border-radius: var(--tx-r-sm);
  background: var(--tx-panel);
  color: var(--tx-white);
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--tx-border);
}

@media (min-width: 1024px) {
  .tx-header-inner { height: var(--tx-header-h-desktop); }
  .tx-mobile-toggle { display: none; }
  .tx-logo-tagline { display: inline; }

  .tx-desktop-nav {
    display: flex;
    align-items: center;
    gap: var(--tx-space-6);
  }
  .tx-nav-item {
    position: relative;
    padding: var(--tx-space-2) 0;
  }
  .tx-nav-item > a, .tx-simple-link {
    color: var(--tx-white);
    font-size: 0.85rem;
    font-weight: var(--tx-fw-semibold);
    letter-spacing: 0.01em;
    transition: 220ms var(--tx-ease-out);
    padding: 9px 16px;
    border-radius: var(--tx-r-lg);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(236, 72, 153, 0.18);
    text-decoration: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 2px 10px rgba(236, 72, 153, 0.08);
  }
  .tx-nav-item > a:hover, .tx-simple-link:hover,
  .tx-nav-item > a:focus-visible, .tx-simple-link:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(139, 92, 246, 0.24));
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 8px 22px rgba(236, 72, 153, 0.28),
      0 0 0 1px rgba(236, 72, 153, 0.18);
    transform: translateY(-1px);
    outline: none;
  }
  .tx-nav-item > a:active, .tx-simple-link:active { transform: translateY(0); }
  .tx-nav-item > a::after {
    content: " ▾";
    font-size: 0.65em;
    opacity: 0.6;
    margin-left: 2px;
  }

  .tx-mega {
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 480px;
    background: rgba(18, 5, 31, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-r-md);
    padding: var(--tx-space-5);
    box-shadow: var(--tx-shadow-xl);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--tx-space-5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: 220ms var(--tx-ease-out);
    z-index: 60;
  }
  .tx-mega-small { grid-template-columns: 1fr; min-width: 240px; }
  .tx-nav-item:hover .tx-mega,
  .tx-nav-item:focus-within .tx-mega {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .tx-mega-links { display: flex; flex-direction: column; gap: var(--tx-space-2); }
  .tx-mega-links a {
    color: var(--tx-muted-2);
    font-size: var(--tx-text-sm);
    font-weight: var(--tx-fw-bold);
    padding: var(--tx-space-2) var(--tx-space-3);
    border-radius: var(--tx-r-sm);
    transition: 150ms;
  }
  .tx-mega-links a:hover { background: var(--tx-panel); color: var(--tx-white); }
  .tx-mega-feature {
    background: var(--tx-panel);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-r-sm);
    padding: var(--tx-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--tx-space-2);
  }
  .tx-mega-feature strong { color: var(--tx-white); font-size: var(--tx-text-sm); }
  .tx-mega-feature p { color: var(--tx-muted-2); font-size: var(--tx-text-xs); line-height: 1.5; }
  .tx-menu-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--tx-text-xs);
    font-weight: var(--tx-fw-black);
    background: var(--tx-grad-cta);
    color: var(--tx-white);
    border-radius: var(--tx-r-full);
  }

  .tx-header-actions {
    display: flex;
    align-items: center;
    gap: var(--tx-space-2);
  }
}

/* ============================ ANNOUNCEMENT STRIP ============================ */
.tx-ann-strip {
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.16), rgba(236, 72, 153, 0.16)),
    var(--tx-bg-soft);
  color: var(--tx-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tx-ann-inner {
  width: min(var(--tx-container), calc(100% - 40px));
  margin: 0 auto;
  padding: 9px 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: var(--tx-fw-semibold);
  letter-spacing: 0.01em;
  color: var(--tx-muted-2);
}
.tx-ann-inner a {
  text-decoration: none;
  font-weight: var(--tx-fw-bold);
  margin-left: var(--tx-space-2);
  color: var(--tx-white);
  border-bottom: 1px solid rgba(236, 72, 153, 0.6);
  padding-bottom: 1px;
  transition: 180ms var(--tx-ease-out);
}
.tx-ann-inner a:hover {
  border-bottom-color: rgba(236, 72, 153, 1);
  color: #fff;
}

/* ============================ TRUST BAR ROW (above hero) ============================ */
.tx-trustbar {
  background: rgba(0, 0, 0, 0.20);
  border-bottom: 1px solid var(--tx-border);
  padding: var(--tx-space-4) 0;
}
.tx-trustbar-inner {
  width: min(var(--tx-container), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--tx-space-4) var(--tx-space-8);
}
.tx-trustbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tx-white);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-ultra);
  letter-spacing: -0.01em;
}
.tx-trustbar-item-icon {
  font-size: 1.1em;
  display: inline-block;
}

/* ============================ BUTTONS ============================ */
.tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--tx-r-full);
  padding: 14px 22px;
  font-weight: var(--tx-fw-ultra);
  font-size: var(--tx-text-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: 220ms var(--tx-ease-out);
  white-space: nowrap;
  font-family: var(--tx-font-body);
}
.tx-btn-primary {
  color: #16051f;
  background: var(--tx-grad-btn-primary);
  box-shadow: var(--tx-shadow-cta);
  font-weight: var(--tx-fw-mega);
}
.tx-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--tx-shadow-cta-lg); }
.tx-btn-secondary {
  color: var(--tx-white);
  background: var(--tx-panel);
  border-color: var(--tx-border-strong);
}
.tx-btn-secondary:hover { background: var(--tx-panel-strong); border-color: var(--tx-border-pink); transform: translateY(-2px); }

/* Context-aware variant: when .tx-btn-secondary sits inside a light section,
   invert the colours so it reads correctly on light backgrounds.
   Previously the button was rendering as white text on light pink background,
   making it look like unformatted plain text. */
.tx-section-light .tx-btn-secondary,
.tx-on-light .tx-btn-secondary,
.tx-audit-card .tx-btn-secondary {
  color: #190724;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(236, 72, 153, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tx-section-light .tx-btn-secondary:hover,
.tx-on-light .tx-btn-secondary:hover,
.tx-audit-card .tx-btn-secondary:hover {
  background: #ffffff;
  border-color: rgba(236, 72, 153, 0.65);
  box-shadow: 0 12px 28px -6px rgba(236, 72, 153, 0.25);
  transform: translateY(-2px);
}
/* WhatsApp button — iconic green that's instantly recognisable.
   Works on both light and dark backgrounds with consistent contrast. */
.tx-btn-whatsapp {
  color: #ffffff;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-color: transparent;
  box-shadow:
    0 12px 28px -6px rgba(37, 211, 102, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  font-weight: 600;
}
.tx-btn-whatsapp:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2ee676 0%, #169a8b 100%);
  box-shadow:
    0 18px 36px -6px rgba(37, 211, 102, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.tx-btn-cta {
  color: var(--tx-white);
  background: var(--tx-grad-cta);
  box-shadow: var(--tx-shadow-cta);
  font-weight: var(--tx-fw-ultra);
}
.tx-btn-outline {
  color: var(--tx-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-weight: var(--tx-fw-black);
  font-size: var(--tx-text-xs);
  padding: 10px 18px;
  border-radius: var(--tx-r-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: 180ms var(--tx-ease-out);
}
.tx-btn-outline:hover,
.tx-btn-outline:focus-visible {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(139, 92, 246, 0.16));
  border-color: rgba(236, 72, 153, 0.38);
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.18);
  outline: none;
}
.tx-btn-block { width: 100%; }
.tx-btn-lg { padding: 16px 26px; font-size: var(--tx-text-md); }
.tx-btn-sm { padding: 8px 14px; font-size: var(--tx-text-xs); }

/* ============================ HERO ============================ */
.tx-hero {
  position: relative;
  padding: var(--tx-hero-py-mobile) 0;
  overflow: hidden;
}
.tx-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
  opacity: 0.4;
  display: none;
}
@media (min-width: 1024px) {
  .tx-hero { padding: var(--tx-hero-py-desktop) 0; }
  .tx-hero::before { display: block; }
}

.tx-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .tx-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 50px; }
}

/* Hero eyebrow with pulse dot */
.tx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff1fb;
  background: var(--tx-panel-pink);
  border: 1px solid var(--tx-border-pink-soft);
  border-radius: var(--tx-r-full);
  padding: 9px 14px;
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-ultra);
  margin-bottom: var(--tx-space-6);
  box-shadow: 0 0 38px rgba(236, 72, 153, 0.12);
}
.tx-pulse {
  width: 9px;
  height: 9px;
  background: var(--tx-rose);
  border-radius: var(--tx-r-full);
  box-shadow: 0 0 0 7px rgba(236, 72, 153, 0.18);
  animation: txPulse 2s infinite;
  flex-shrink: 0;
}
@keyframes txPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.4); }
  70%      { box-shadow: 0 0 0 10px rgba(251, 113, 133, 0); }
}

.tx-hero h1 {
  margin: 0;
  color: var(--tx-white);
  font-size: var(--tx-text-4xl);
  line-height: var(--tx-lh-tight);
  letter-spacing: var(--tx-ls-tighter);
  text-shadow: 0 0 60px rgba(236, 72, 153, 0.22);
}

/* Gradient text — for the accent word in hero */
.tx-gradient-text {
  display: inline-block;
  background: var(--tx-grad-text);
  filter: drop-shadow(0 0 26px rgba(236, 72, 153, 0.18));
}

.tx-hero-sub {
  margin: var(--tx-space-6) 0 0;
  max-width: 690px;
  color: var(--tx-muted-2);
  font-size: var(--tx-text-lg);
  line-height: var(--tx-lh-relaxed);
  font-weight: var(--tx-fw-bold);
}
@media (min-width: 1024px) {
  .tx-hero-sub { font-size: 1.36rem; }
}

/* AI hook band — "Every call answered" callout under hero h1 */
.tx-ai-hook {
  margin-top: var(--tx-space-6);
  padding: var(--tx-space-4) var(--tx-space-5);
  border-radius: var(--tx-r-md);
  background: var(--tx-grad-ai-band);
  border: 1px solid var(--tx-border-pink-soft);
  box-shadow: 0 0 38px rgba(236, 72, 153, 0.18);
}
.tx-ai-hook-inner {
  display: flex;
  align-items: center;
  gap: var(--tx-space-3);
  flex-wrap: wrap;
}
.tx-ai-hook-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.tx-ai-hook-title {
  color: var(--tx-white);
  font-size: var(--tx-text-md);
  font-weight: var(--tx-fw-ultra);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tx-ai-hook-sub {
  color: var(--tx-muted-2);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-bold);
  margin-top: 2px;
}

/* Hero CTAs — 3 stacked, then row on desktop */
.tx-hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--tx-space-2);
  margin-top: var(--tx-space-8);
}
@media (min-width: 600px) {
  .tx-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .tx-hero-actions .tx-btn {
    flex: 1 1 auto;
    min-width: 130px;
    justify-content: center;
  }
}

/* ============================ HERO FORM CARD (dark glass) ============================ */
.tx-quote-card {
  background: var(--tx-grad-form-card);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-xl);
  padding: var(--tx-space-6);
  box-shadow: var(--tx-shadow-xl);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  position: relative;
}
.tx-quote-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--tx-r-xl);
  background:
    radial-gradient(circle at 18% 0%, rgba(236, 72, 153, 0.34), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(192, 132, 252, 0.24), transparent 30%);
  pointer-events: none;
  z-index: 0;
}
.tx-quote-card > * { position: relative; z-index: 1; }

.tx-quote-eyebrow {
  color: var(--tx-soft-white);
  font-size: var(--tx-text-xs);
  font-weight: var(--tx-fw-ultra);
  letter-spacing: var(--tx-ls-widest);
  text-transform: uppercase;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tx-quote-card h3 {
  color: var(--tx-white);
  font-size: var(--tx-text-xl);
  font-weight: var(--tx-fw-ultra);
  letter-spacing: var(--tx-ls-snug);
  margin: 0 0 3px;
}
.tx-quote-sub {
  color: var(--tx-muted-2);
  font-size: var(--tx-text-sm);
  margin: 0 0 var(--tx-space-5);
}

/* Inputs — dark glass style */
.tx-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--tx-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-sm);
  transition: 180ms var(--tx-ease-out);
  font-family: var(--tx-font-body);
}
.tx-input::placeholder { color: rgba(245, 208, 254, 0.55); }
.tx-input:focus {
  outline: 0;
  border-color: var(--tx-pink);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18);
}

.tx-quote-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 9px;
}

.tx-quote-label {
  color: var(--tx-soft-white);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-ultra);
  margin: 0 0 var(--tx-space-2);
}

/* Service check chips */
.tx-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.tx-chip {
  position: relative;
  cursor: pointer;
}
.tx-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.tx-chip span {
  display: block;
  padding: 9px 6px;
  font-size: 0.74rem;
  text-align: center;
  font-weight: var(--tx-fw-ultra);
  color: var(--tx-soft-white);
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-sm);
  transition: 150ms;
}
.tx-chip:hover span { border-color: var(--tx-border-pink); }
.tx-chip input:checked + span {
  background: var(--tx-panel-pink);
  border-color: var(--tx-pink);
  color: var(--tx-white);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.20);
}

.tx-quote-foot {
  text-align: center;
  font-size: var(--tx-text-xs);
  color: var(--tx-muted-2);
  margin: 9px 0 0;
}
.tx-quote-foot a {
  color: var(--tx-pink-300);
  font-weight: var(--tx-fw-bold);
}

/* Microcopy under form */
.tx-quote-microcopy {
  margin-top: var(--tx-space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tx-space-4) var(--tx-space-6);
  color: var(--tx-muted-2);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-bold);
}
.tx-quote-microcopy span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================ HERO STAT ROW (3 bigger pills) ============================ */
.tx-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tx-space-3);
  margin-top: var(--tx-space-5);
}
.tx-trust-pill {
  text-align: center;
  padding: 18px 14px;
  border-radius: var(--tx-r-md);
  border: 1px solid var(--tx-border);
  background: var(--tx-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px rgba(15, 2, 30, 0.20);
}
.tx-trust-pill-pink {
  background: var(--tx-panel-pink);
  border-color: var(--tx-border-pink-soft);
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.10);
}
.tx-trust-pill-purple {
  background: var(--tx-panel-purple);
  border-color: rgba(139, 92, 246, 0.32);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.10);
}
.tx-trust-num {
  font-size: 2rem;
  font-weight: var(--tx-fw-mega);
  color: var(--tx-white);
  letter-spacing: -0.05em;
  line-height: 1;
}
.tx-trust-label {
  font-size: 0.74rem;
  font-weight: var(--tx-fw-ultra);
  color: var(--tx-pink-300);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: var(--tx-ls-wider);
}

/* ============================ SECTIONS ============================ */
.tx-section {
  padding: var(--tx-section-py-mobile) 0;
  position: relative;
}
@media (min-width: 1024px) {
  .tx-section { padding: var(--tx-section-py-desktop) 0; }
}

.tx-section-dark {
  background: transparent;     /* page bg shows through */
  color: var(--tx-text);
}
.tx-section-dark h2 { color: var(--tx-white); }
.tx-section-dark p { color: var(--tx-muted-2); }

.tx-section-light {
  background: var(--tx-light-bg);
  border-top: 1px solid var(--tx-border-light);
  border-bottom: 1px solid var(--tx-border-light);
  color: var(--tx-ink-dark);
}
.tx-section-light h2 { color: var(--tx-ink-dark); }
.tx-section-light h3 { color: var(--tx-ink-dark); }
.tx-section-light p  { color: var(--tx-ink-dark-2); }

/* Section kicker (small label above h2) */
.tx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--tx-r-full);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-ultra);
  margin-bottom: var(--tx-space-5);
  background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(139,92,246,0.10));
  border: 1px solid var(--tx-border-pink-soft);
  color: #7B2FA0;
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.12);
}
.tx-section-dark .tx-kicker {
  background: var(--tx-panel-pink);
  border-color: var(--tx-border-pink-soft);
  color: var(--tx-pink-300);
}

/* Section header (centered intro) */
.tx-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--tx-space-12);
}
.tx-section-head h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: var(--tx-fw-ultra);
  letter-spacing: -0.06em;
  line-height: 1.0;
  margin: 0 0 var(--tx-space-3);
}
.tx-section-head p {
  font-size: var(--tx-text-md);
  line-height: var(--tx-lh-relaxed);
  margin: 0 auto;
  max-width: 580px;
  font-weight: 500;
}

/* ============================ GRID ============================ */
.tx-grid {
  display: grid;
  gap: var(--tx-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .tx-grid-2 { grid-template-columns: 1fr 1fr; }
  .tx-grid-3 { grid-template-columns: 1fr 1fr; }
  .tx-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .tx-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tx-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--tx-space-5); }
}

/* ============================ CARDS ============================ */
.tx-card {
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-lg);
  padding: var(--tx-space-6);
  transition: 220ms var(--tx-ease-out);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tx-card:hover {
  transform: translateY(-3px);
  border-color: var(--tx-border-pink);
  box-shadow: var(--tx-shadow-md);
}
.tx-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--tx-icon-frame-bg-dark);
  border: var(--tx-icon-frame-border-dark);
  box-shadow: var(--tx-shadow-md), var(--tx-shadow-inset);
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  margin-bottom: var(--tx-space-4);
  transition: transform var(--tx-dur-base) var(--tx-ease-out), box-shadow var(--tx-dur-base) var(--tx-ease-out);
}
.tx-card:hover .tx-card-icon {
  transform: var(--tx-lift-sm);
  box-shadow: var(--tx-shadow-pink-glow), var(--tx-shadow-inset);
}
.tx-card h3 {
  font-size: var(--tx-text-md);
  margin: 0 0 var(--tx-space-2);
  color: var(--tx-white);
  font-weight: var(--tx-fw-ultra);
}
.tx-section-light .tx-card { background: var(--tx-white); border-color: var(--tx-border-light); }
.tx-section-light .tx-card h3 { color: var(--tx-ink-dark); }
.tx-section-light .tx-card p  { color: var(--tx-ink-dark-2); }
.tx-section-light .tx-card-icon {
  background: var(--tx-icon-frame-bg-light);
  border: var(--tx-icon-frame-border-light);
  box-shadow: var(--tx-shadow-md);
}

/* Pain card variant — pink left bar, dark version */
.tx-pain-card {
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  border-left: 4px solid var(--tx-pink);
  border-radius: var(--tx-r-sm);
  padding: var(--tx-space-5);
}
.tx-pain-card h3 {
  font-size: var(--tx-text-md);
  margin: 0 0 6px;
  color: var(--tx-white);
}
.tx-pain-card p {
  color: var(--tx-muted-2);
  font-size: var(--tx-text-sm);
  margin: 0;
  font-style: italic;
}
.tx-section-light .tx-pain-card {
  background: var(--tx-white);
  border-color: var(--tx-border-light);
  border-left-color: var(--tx-pink);
}
.tx-section-light .tx-pain-card h3 { color: var(--tx-ink-dark); }
.tx-section-light .tx-pain-card p { color: var(--tx-ink-dark-2); }

/* ============================ INTERNAL LINK GRID ============================ */
.tx-related {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-2);
}
@media (min-width: 600px) {
  .tx-related { grid-template-columns: 1fr 1fr; gap: var(--tx-space-3); }
}
@media (min-width: 1024px) {
  .tx-related { grid-template-columns: repeat(4, 1fr); }
}
.tx-related-card {
  display: block;
  padding: var(--tx-space-5);
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-sm);
  color: inherit;
  transition: 180ms var(--tx-ease-out);
}
.tx-related-card:hover {
  border-color: var(--tx-pink);
  background: var(--tx-panel-strong);
  transform: translateY(-2px);
}
.tx-related-tag {
  font-size: var(--tx-text-xs);
  font-weight: var(--tx-fw-ultra);
  text-transform: uppercase;
  letter-spacing: var(--tx-ls-wide);
  color: var(--tx-pink-300);
  margin-bottom: 4px;
}
.tx-related-card h4 {
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-ultra);
  margin: 0;
  color: var(--tx-white);
  line-height: 1.3;
}
.tx-section-light .tx-related-card {
  background: var(--tx-white);
  border-color: var(--tx-border-light);
}
.tx-section-light .tx-related-card h4 { color: var(--tx-ink-dark); }

/* ============================ FAQ ============================ */
.tx-faq-item {
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-sm);
  margin-bottom: var(--tx-space-3);
  background: var(--tx-panel);
  overflow: hidden;
}
.tx-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tx-space-3);
  padding: var(--tx-space-4) var(--tx-space-5);
  font-weight: var(--tx-fw-ultra);
  font-size: var(--tx-text-md);
  cursor: pointer;
  color: var(--tx-white);
  transition: 150ms;
}
.tx-faq-item summary::-webkit-details-marker { display: none; }
.tx-faq-item summary:hover { background: var(--tx-panel-strong); }
.tx-faq-icon {
  color: var(--tx-pink);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform var(--tx-dur-base) var(--tx-ease-out);
  flex-shrink: 0;
}
.tx-faq-item[open] .tx-faq-icon { transform: rotate(45deg); }
.tx-faq-answer {
  padding: 0 var(--tx-space-5) var(--tx-space-5);
  color: var(--tx-muted-2);
  line-height: var(--tx-lh-relaxed);
}
.tx-faq-answer a { color: var(--tx-pink-300); font-weight: var(--tx-fw-bold); text-decoration: underline; }
.tx-section-light .tx-faq-item {
  background: var(--tx-white);
  border-color: var(--tx-border-light);
}
.tx-section-light .tx-faq-item summary { color: var(--tx-ink-dark); }
.tx-section-light .tx-faq-item summary:hover { background: var(--tx-bg-light-2); }
.tx-section-light .tx-faq-answer { color: var(--tx-ink-dark-2); }
.tx-section-light .tx-faq-answer a { color: var(--tx-pink-700); }

/* ============================ FOOTER ============================ */
.tx-footer {
  background: var(--tx-bg-deep);
  color: var(--tx-muted-2);
  padding: 72px 0 28px;
  font-size: var(--tx-text-sm);
  border-top: 1px solid var(--tx-border);
  position: relative;
}
.tx-footer::before {
  /* subtle ambient gradient at the top of the footer for visual lift */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, 0.4) 50%, transparent 100%);
}
.tx-footer-grid {
  width: min(var(--tx-container), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--tx-border);
}
@media (min-width: 700px) {
  .tx-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}
@media (min-width: 1024px) {
  .tx-footer-grid {
    /* brand block + 5 link columns — proper 6-column balance */
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr;
    gap: 44px 28px;
  }
  .tx-footer-brand { grid-column: 1; }
}
@media (min-width: 1280px) {
  .tx-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 52px 32px;
  }
}

/* ---- BRAND BLOCK (left column on desktop) ---- */
.tx-footer-brand { max-width: 380px; }
.tx-footer-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.tx-footer-logo {
  font-family: var(--tx-font-body);
  font-weight: var(--tx-fw-mega);
  letter-spacing: var(--tx-ls-tight);
  font-size: 1.5rem;
  color: var(--tx-white);
  line-height: 1;
}
.tx-footer-tagline {
  font-size: 0.7rem;
  font-weight: var(--tx-fw-semibold);
  letter-spacing: 0.02em;
  margin-top: 4px;
  color: var(--tx-pink-300);
  line-height: 1;
}
.tx-footer-intro {
  color: var(--tx-muted-2);
  line-height: 1.55;
  font-size: 0.88rem;
  margin: 0 0 18px;
}
.tx-footer-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tx-footer-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tx-footer-cred-item {
  font-size: 0.72rem;
  color: rgba(216, 180, 254, 0.7);
  font-weight: var(--tx-fw-semibold);
  letter-spacing: 0.01em;
}

/* Inline contact list inside the brand block — keeps Get-in-touch info
   visible without needing a separate orphaned column. */
.tx-footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-footer-contact li {
  font-size: 0.82rem;
  color: var(--tx-muted-2);
  line-height: 1.5;
}
.tx-footer-contact a {
  color: var(--tx-muted-2);
  text-decoration: none;
  transition: color 180ms var(--tx-ease-out);
}
.tx-footer-contact a:hover { color: var(--tx-white); }

/* ---- LINK COLUMNS ---- */
.tx-footer h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tx-pink-300);
  margin: 0 0 14px;
  font-weight: var(--tx-fw-bold);
}
.tx-footer ul { list-style: none; padding: 0; margin: 0; }
.tx-footer ul li { margin-bottom: 9px; line-height: 1.4; }
.tx-footer a {
  color: var(--tx-muted-2);
  text-decoration: none;
  transition: color 180ms var(--tx-ease-out);
}
.tx-footer a:hover {
  color: var(--tx-white);
}
.tx-footer-address {
  /* used inside .tx-footer-contact for the address line */
  color: rgba(216, 180, 254, 0.65) !important;
  font-size: 0.8rem !important;
  line-height: 1.5;
}

/* ---- BOTTOM ROW ---- */
.tx-footer-bottom {
  width: min(var(--tx-container), calc(100% - 40px));
  margin: 24px auto 0;
  font-size: 0.78rem;
  color: rgba(216, 180, 254, 0.55);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.tx-footer-bottom-left,
.tx-footer-bottom-right {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
}
.tx-footer-bottom a {
  color: rgba(216, 180, 254, 0.7);
  text-decoration: none;
}
.tx-footer-bottom a:hover { color: var(--tx-white); }
.tx-footer-divider {
  color: rgba(216, 180, 254, 0.25);
}

/* ============================ STICKY CTA (mobile) ============================ */
.tx-sticky {
  display: none;
}
@media (max-width: 768px) {
  .tx-sticky {
    display: grid;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--tx-z-mobile-cta);
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(18, 5, 31, 0.97), rgba(7, 1, 15, 0.99));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--tx-border);
    box-shadow: 0 -16px 40px rgba(15, 2, 30, 0.5);
  }
}
.tx-sticky a, .tx-sticky button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  border-radius: var(--tx-r-full);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-ultra);
  color: white;
  border: 0;
  font-family: var(--tx-font-body);
}
.tx-sticky-call { background: var(--tx-panel-strong); border: 1px solid var(--tx-border); }
.tx-sticky-wa   { background: var(--tx-grad-btn-whatsapp); color: #052e16; }
.tx-sticky-quote {
  background: var(--tx-grad-cta);
  position: relative;
}
.tx-sticky-build {
  background: var(--tx-grad-cta);
  position: relative;
}

/* ============================ FLOATING BUILD MY PACKAGE (desktop) ============================ */
.tx-floating-build {
  position: fixed;
  right: var(--tx-space-5);
  bottom: var(--tx-space-5);
  z-index: var(--tx-z-mickey-launch);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--tx-grad-cta);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--tx-r-full);
  box-shadow: 0 18px 50px rgba(236, 72, 153, 0.45);
  color: white;
  cursor: pointer;
  font-family: var(--tx-font-body);
  font-weight: var(--tx-fw-ultra);
  font-size: var(--tx-text-sm);
  transition: transform 220ms var(--tx-ease-out), box-shadow 220ms var(--tx-ease-out);
}
.tx-floating-build:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 22px 60px rgba(236, 72, 153, 0.55);
}
.tx-floating-build::before {
  content: "🟢";
  font-size: 0.7rem;
}

/* Pulse animation — runs for first 60s on the page to draw eye.
   Subtle outward ring + breathing scale. Stopped via [data-pulse="off"]. */
.tx-floating-build[data-pulse="on"]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--tx-r-full);
  border: 2px solid rgba(236, 72, 153, 0.55);
  animation: tx-mickey-ring 2.2s var(--tx-ease-out) infinite;
  pointer-events: none;
}
.tx-floating-build[data-pulse="on"] {
  animation: tx-mickey-breathe 2.6s ease-in-out infinite;
}
@keyframes tx-mickey-ring {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes tx-mickey-breathe {
  0%, 100% { box-shadow: 0 18px 50px rgba(236, 72, 153, 0.45); }
  50%      { box-shadow: 0 22px 60px rgba(236, 72, 153, 0.70); }
}

/* Preview bubble — appears above launcher on first session visit,
   dismissed on click of either the bubble or the launcher. */
.tx-mickey-preview {
  position: fixed;
  right: var(--tx-space-5);
  bottom: calc(var(--tx-space-5) + 64px);
  z-index: var(--tx-z-mickey-launch);
  max-width: 280px;
  padding: 14px 16px 14px 18px;
  background: var(--tx-glass-bg-dark);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  backdrop-filter: var(--tx-glass-blur);
  border: 1px solid rgba(236, 72, 153, 0.45);
  border-radius: var(--tx-r-lg);
  color: var(--tx-white);
  font-size: 0.88rem;
  line-height: 1.4;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 40px rgba(15, 2, 30, 0.55),
    0 0 0 1px rgba(236, 72, 153, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms var(--tx-ease-out), transform 280ms var(--tx-ease-out);
  pointer-events: none;
}
.tx-mickey-preview[data-show="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tx-mickey-preview::after {
  /* little pointer down to the launcher */
  content: "";
  position: absolute;
  right: 24px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--tx-glass-bg-dark);
  border-right: 1px solid rgba(236, 72, 153, 0.45);
  border-bottom: 1px solid rgba(236, 72, 153, 0.45);
  transform: rotate(45deg);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  backdrop-filter: var(--tx-glass-blur);
}
.tx-mickey-preview-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--tx-r-sm);
  line-height: 1;
}
.tx-mickey-preview-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

@media (max-width: 768px) {
  .tx-floating-build { display: none; }
  .tx-mickey-preview { display: none; }
}

/* ============================ MICKEY AI PANEL ============================ */
.tx-mickey-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--tx-z-mickey-panel);
  background: var(--tx-bg);
  border-top-left-radius: var(--tx-r-xl);
  border-top-right-radius: var(--tx-r-xl);
  border-top: 1px solid var(--tx-border);
  box-shadow: 0 -24px 60px rgba(15, 2, 30, 0.6);
  transform: translateY(100%);
  transition: transform var(--tx-dur-slow) var(--tx-ease-out);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.tx-mickey-panel[data-open="true"] { transform: translateY(0); }
@media (min-width: 1024px) {
  .tx-mickey-panel {
    left: auto;
    right: var(--tx-space-5);
    bottom: var(--tx-space-5);
    width: 420px;
    max-height: 600px;
    border-radius: var(--tx-r-xl);
    transform: translateX(120%);
  }
  .tx-mickey-panel[data-open="true"] { transform: translateX(0); }
}
.tx-mickey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tx-space-4) var(--tx-space-5);
  background: var(--tx-grad-cta);
  color: white;
  border-top-left-radius: var(--tx-r-xl);
  border-top-right-radius: var(--tx-r-xl);
}
.tx-mickey-head-title { display: flex; align-items: center; gap: var(--tx-space-3); }
.tx-mickey-head-title h3 { color: white; font-size: var(--tx-text-md); margin: 0; line-height: 1.2; }
.tx-mickey-head-title small { display: block; font-size: var(--tx-text-xs); opacity: 0.85; }
.tx-mickey-avatar {
  width: 32px; height: 32px;
  border-radius: var(--tx-r-full);
  background: linear-gradient(135deg, #fff, var(--tx-pink-300) 50%, var(--tx-pink-500) 90%);
  display: grid; place-items: center;
  color: var(--tx-bg);
  font-weight: var(--tx-fw-mega);
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.tx-mickey-close {
  width: 32px; height: 32px;
  border-radius: var(--tx-r-full);
  background: rgba(255,255,255,0.16);
  color: white;
  font-size: 1.2rem;
}
.tx-mickey-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--tx-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--tx-space-3);
}
.tx-mickey-msg {
  max-width: 85%;
  padding: var(--tx-space-3) var(--tx-space-4);
  border-radius: var(--tx-r-md);
  font-size: var(--tx-text-sm);
  line-height: var(--tx-lh-normal);
}
.tx-mickey-msg-bot {
  background: var(--tx-panel);
  color: var(--tx-text);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.tx-mickey-msg-user {
  background: var(--tx-grad-cta);
  color: white;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.tx-mickey-input-row {
  padding: var(--tx-space-3) var(--tx-space-4);
  border-top: 1px solid var(--tx-border);
  display: flex;
  gap: var(--tx-space-2);
}
.tx-mickey-input {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-full);
  background: var(--tx-panel);
  color: var(--tx-white);
}
.tx-mickey-input::placeholder { color: rgba(245, 208, 254, 0.5); }
.tx-mickey-send {
  width: 44px;
  height: 44px;
  border-radius: var(--tx-r-full);
  background: var(--tx-grad-cta);
  color: white;
  font-size: 1.2rem;
}

/* ============================ MOBILE DRAWER ============================ */
.tx-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;
  max-width: 360px;
  background: var(--tx-bg);
  z-index: var(--tx-z-drawer);
  transform: translateX(100%);
  transition: transform var(--tx-dur-slow) var(--tx-ease-out);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--tx-border);
}
.tx-mobile-drawer[data-open="true"] { transform: translateX(0); }
.tx-mobile-top {
  display: flex;
  justify-content: flex-end;
  padding: var(--tx-space-3);
  border-bottom: 1px solid var(--tx-border);
}
.tx-mobile-top button {
  width: 38px;
  height: 38px;
  border-radius: var(--tx-r-sm);
  background: var(--tx-panel);
  color: var(--tx-white);
  font-size: 1.4rem;
}
.tx-mobile-ctas {
  padding: var(--tx-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--tx-space-2);
  border-bottom: 1px solid var(--tx-border);
}
.tx-mobile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--tx-r-full);
  font-weight: var(--tx-fw-ultra);
  font-size: var(--tx-text-sm);
  color: var(--tx-white);
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
}
.tx-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--tx-r-full);
  font-weight: var(--tx-fw-mega);
  font-size: var(--tx-text-sm);
  color: #16051f;
  background: var(--tx-grad-btn-primary);
  box-shadow: var(--tx-shadow-cta);
}
.tx-mobile-drawer details {
  border-bottom: 1px solid var(--tx-border);
}
.tx-mobile-drawer summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tx-space-4);
  font-weight: var(--tx-fw-ultra);
  color: var(--tx-white);
  cursor: pointer;
}
.tx-mobile-drawer summary::-webkit-details-marker { display: none; }
.tx-mobile-drawer summary::after { content: "▾"; opacity: 0.6; }
.tx-mobile-drawer details[open] summary::after { transform: rotate(180deg); }
.tx-mobile-drawer details a {
  display: block;
  padding: var(--tx-space-2) var(--tx-space-6);
  color: var(--tx-muted-2);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-bold);
}
.tx-mobile-drawer details a:hover { color: var(--tx-white); background: var(--tx-panel); }

.tx-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 1, 15, 0.7);
  z-index: 79;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tx-dur-base) var(--tx-ease-out);
}
.tx-drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ============================ UTILITIES ============================ */
.tx-mt-4 { margin-top: var(--tx-space-4); }
.tx-mt-6 { margin-top: var(--tx-space-6); }
.tx-mt-8 { margin-top: var(--tx-space-8); }
.tx-mb-4 { margin-bottom: var(--tx-space-4); }
.tx-mb-6 { margin-bottom: var(--tx-space-6); }
.tx-mb-8 { margin-bottom: var(--tx-space-8); }
.tx-text-center { text-align: center; }

/* ============================ AI HOOK BAND SECTION (#2) ============================ */
.tx-aihook-band {
  text-align: center;
  padding: 56px 24px 64px;
  background: var(--tx-light-bg);
  border-top: 1px solid var(--tx-border-light);
  border-bottom: 1px solid var(--tx-border-light);
}
.tx-aihook-inner { max-width: 760px; margin: 0 auto; }
.tx-aihook-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--tx-space-6);
}
.tx-aihook-pill {
  background: var(--tx-white);
  border: 1px solid rgba(236, 72, 153, 0.22);
  border-radius: var(--tx-r-sm);
  padding: 12px 18px;
  color: #3d0a5c;
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-black);
  box-shadow: 0 6px 18px rgba(107, 33, 168, 0.06);
}
.tx-aihook-ctas {
  margin-top: var(--tx-space-8);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tx-aihook-foot {
  margin-top: var(--tx-space-4);
  color: #7B2FA0;
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-bold);
}

/* ============================ SERVICE 2-COL SECTION (#3-9) ============================ */
.tx-svc-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .tx-svc-2col { grid-template-columns: 1fr 1fr; gap: var(--tx-space-10); }
}
.tx-svc-kicker {
  display: inline-block;
  color: var(--tx-pink-300);
  font-weight: var(--tx-fw-mega);
  font-size: var(--tx-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--tx-space-3);
  padding-left: 14px;
  position: relative;
}
.tx-section-light .tx-svc-kicker { color: var(--tx-pink); }
.tx-svc-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 75%;
  background: linear-gradient(180deg, var(--tx-pink), var(--tx-purple));
  border-radius: 3px;
}
.tx-svc-headline h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0 0 var(--tx-space-4);
}
.tx-svc-lead {
  color: var(--tx-muted-2);
  font-size: var(--tx-text-md);
  line-height: var(--tx-lh-relaxed);
  margin: 0 0 var(--tx-space-6);
}
.tx-section-light .tx-svc-lead { color: #5b216d; }
.tx-svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tx-space-3);
  align-items: center;
}
.tx-text-link {
  font-weight: var(--tx-fw-black);
  font-size: var(--tx-text-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tx-pink-300);
}
.tx-section-light .tx-text-link { color: #7B2FA0; }
.tx-text-link:hover { text-decoration: underline; }

/* Service card on the side (dark theme version) */
.tx-svc-card {
  position: relative;
  overflow: hidden;
  padding: var(--tx-space-8);
  border-radius: var(--tx-r-xl);
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  box-shadow: 0 24px 70px rgba(15, 2, 30, 0.30);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tx-section-light .tx-svc-card {
  background: var(--tx-white);
  border-color: rgba(236, 72, 153, 0.16);
  box-shadow: 0 24px 65px rgba(107, 33, 168, 0.12);
}
.tx-svc-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  margin-bottom: var(--tx-space-4);
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(236, 72, 153, 0.26), rgba(139, 92, 246, 0.22));
  border: 1px solid var(--tx-border);
}
.tx-svc-card h3 {
  color: var(--tx-white);
  font-size: var(--tx-text-xl);
  line-height: 1.15;
  margin: 0 0 var(--tx-space-3);
  letter-spacing: -0.025em;
}
.tx-svc-card p {
  color: var(--tx-muted-2);
  line-height: var(--tx-lh-relaxed);
  margin: 0;
  font-size: var(--tx-text-md);
}
.tx-section-light .tx-svc-card h3 { color: var(--tx-ink-dark); }
.tx-section-light .tx-svc-card p  { color: #5b216d; }

/* ============================ PAIN/SOLUTION SPLIT (#10) ============================ */
.tx-pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-6);
  align-items: stretch;
}
@media (min-width: 900px) {
  .tx-pain-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--tx-space-6); }
}
.tx-problem-box {
  border-radius: var(--tx-r-xl);
  padding: var(--tx-space-8);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(236, 72, 153, 0.15);
  box-shadow: 0 24px 65px rgba(107, 33, 168, 0.12);
}
.tx-problem-box h3 {
  margin: 0 0 var(--tx-space-5);
  font-size: 1.6rem;
  letter-spacing: -0.045em;
  color: var(--tx-ink-dark);
}
.tx-problem-list {
  display: grid;
  gap: var(--tx-space-3);
  list-style: none;
  padding: 0;
  margin: 0;
  color: #4a205e;
  font-weight: var(--tx-fw-black);
}
.tx-problem-list li {
  padding: 14px 16px;
  border-radius: var(--tx-r-md);
  background: var(--tx-bg-light);
  border: 1px solid var(--tx-muted-2);
}
.tx-solution-box {
  border-radius: var(--tx-r-xl);
  padding: var(--tx-space-8);
  color: var(--tx-white);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 22rem),
    linear-gradient(135deg, #ec4899 0%, #8b5cf6 48%, #2e1065 100%);
  box-shadow: 0 30px 90px rgba(236, 72, 153, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.tx-solution-box h3 {
  margin: 0 0 var(--tx-space-5);
  font-size: 1.6rem;
  letter-spacing: -0.045em;
  color: var(--tx-white);
}
.tx-solution-box p {
  color: var(--tx-soft-white);
  line-height: var(--tx-lh-relaxed);
  font-size: var(--tx-text-md);
  margin: 0 0 var(--tx-space-6);
}

/* ============================ MID-PAGE FORM (#11) ============================ */
.tx-quote-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .tx-quote-wrap { grid-template-columns: 0.86fr 1.14fr; gap: var(--tx-space-8); }
}
.tx-quote-bullets {
  margin-top: var(--tx-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tx-space-3);
}
.tx-quote-bullet {
  display: flex;
  align-items: center;
  gap: var(--tx-space-3);
  color: var(--tx-muted-2);
  font-size: var(--tx-text-md);
}
.tx-quote-bullet::before {
  content: "✓";
  color: var(--tx-green);
  font-size: 1.1rem;
  font-weight: var(--tx-fw-mega);
}

/* ============================ TRUST METRICS (#12) ============================ */
.tx-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-4);
}
@media (min-width: 600px) {
  .tx-metrics-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .tx-metrics-grid { grid-template-columns: repeat(4, 1fr); gap: var(--tx-space-5); }
}
.tx-metric-big {
  background: var(--tx-white);
  border: 1px solid rgba(236, 72, 153, 0.16);
  box-shadow: 0 24px 65px rgba(107, 33, 168, 0.12);
  border-radius: var(--tx-r-xl);
  padding: var(--tx-space-6);
  position: relative;
  overflow: hidden;
}
.tx-metric-big::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tx-pink), var(--tx-purple));
}
.tx-metric-num {
  display: block;
  background: linear-gradient(135deg, var(--tx-pink), var(--tx-purple));
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.075em;
  margin-bottom: 7px;
  font-weight: var(--tx-fw-mega);
  line-height: 1;
}
.tx-metric-label {
  color: #5b216d;
  font-weight: var(--tx-fw-black);
  line-height: 1.4;
  font-size: var(--tx-text-sm);
}

/* ============================ USE CASE CARDS (#13) ============================ */
.tx-usecase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-5);
}
@media (min-width: 600px) {
  .tx-usecase-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .tx-usecase-grid { grid-template-columns: repeat(3, 1fr); }
}
.tx-usecase-card {
  border-radius: var(--tx-r-xl);
  padding: var(--tx-space-6);
  background: var(--tx-white);
  border: 1px solid rgba(236, 72, 153, 0.16);
  box-shadow: 0 24px 65px rgba(107, 33, 168, 0.12);
  transition: 280ms var(--tx-ease-out);
}
.tx-usecase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 80px rgba(107, 33, 168, 0.18);
}
.tx-usecase-card h3 {
  margin: 0 0 var(--tx-space-3);
  font-size: var(--tx-text-xl);
  letter-spacing: -0.045em;
  color: var(--tx-ink-dark);
}
.tx-usecase-card p {
  margin: 0 0 var(--tx-space-5);
  color: #6b3b78;
  line-height: var(--tx-lh-relaxed);
}

/* ============================ AI DEMO PANEL (#14) ============================ */
.tx-ai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .tx-ai-grid { grid-template-columns: 1fr 1fr; gap: var(--tx-space-8); }
}
.tx-ai-panel {
  border-radius: var(--tx-r-xl);
  padding: var(--tx-space-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  border: 1px solid var(--tx-border);
  box-shadow: var(--tx-shadow-xl);
  backdrop-filter: blur(20px);
}
.tx-call-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tx-space-4);
  padding: var(--tx-space-4);
  border-radius: var(--tx-r-md);
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  margin-bottom: var(--tx-space-3);
  transition: 200ms var(--tx-ease-out);
}
.tx-call-line:hover { transform: translateX(5px); background: var(--tx-panel-strong); }
.tx-call-line strong { color: var(--tx-white); display: block; font-size: var(--tx-text-md); }
.tx-call-line span { color: var(--tx-muted-2); font-size: var(--tx-text-sm); }
.tx-status {
  color: var(--tx-soft-white);
  font-weight: var(--tx-fw-mega);
  background: var(--tx-panel-pink);
  border: 1px solid var(--tx-border-pink-soft);
  padding: 6px 10px;
  border-radius: var(--tx-r-full);
  font-size: var(--tx-text-xs);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ============================ COMPARISON TABLE (#15) ============================ */
.tx-compare {
  background: var(--tx-white);
  border: 1px solid rgba(107, 37, 160, 0.12);
  border-radius: var(--tx-r-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(107, 33, 168, 0.1);
}
.tx-compare-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: linear-gradient(135deg, #1b0b2e, #12051f);
}
.tx-compare-head > div {
  padding: 16px 18px;
  font-size: var(--tx-text-xs);
  font-weight: var(--tx-fw-mega);
  text-transform: uppercase;
  letter-spacing: var(--tx-ls-wider);
  color: rgba(255, 255, 255, 0.5);
}
.tx-compare-head > div:nth-child(2) { text-align: center; }
.tx-compare-head > div:nth-child(3) {
  text-align: center;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.2));
  color: var(--tx-pink-300);
}
.tx-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(107, 37, 160, 0.08);
}
.tx-compare-row:nth-child(even) { background: rgba(107, 37, 160, 0.02); }
.tx-compare-row > div {
  padding: 14px 18px;
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-bold);
}
.tx-compare-row > div:first-child { color: #2D0B55; }
.tx-compare-row > div:nth-child(2) {
  text-align: center;
  color: #ef4444;
}
.tx-compare-row > div:nth-child(3) {
  text-align: center;
  color: #16a34a;
  font-weight: var(--tx-fw-black);
}
@media (max-width: 600px) {
  .tx-compare-head > div, .tx-compare-row > div {
    padding: 10px 12px;
    font-size: var(--tx-text-xs);
  }
}

/* ============================ REVIEWS (#16) ============================ */
.tx-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-4);
}
@media (min-width: 600px) {
  .tx-reviews { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .tx-reviews { grid-template-columns: repeat(3, 1fr); }
}
.tx-review {
  background: var(--tx-white);
  border: 1px solid rgba(236, 72, 153, 0.12);
  border-radius: var(--tx-r-lg);
  padding: var(--tx-space-6);
  box-shadow: 0 8px 28px rgba(107, 33, 168, 0.08);
  position: relative;
  overflow: hidden;
}
.tx-review::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 5rem;
  font-weight: 900;
  font-family: Georgia, serif;
  color: rgba(107, 37, 160, 0.06);
  line-height: 1;
}
.tx-review-stars {
  color: #F59E0B;
  font-size: var(--tx-text-md);
  letter-spacing: 2px;
  margin-bottom: var(--tx-space-3);
}
.tx-review p {
  color: #2D0B55;
  font-size: var(--tx-text-sm);
  line-height: var(--tx-lh-relaxed);
  margin-bottom: var(--tx-space-4);
  font-style: italic;
}
.tx-review-author {
  display: flex;
  align-items: center;
  gap: var(--tx-space-3);
}
.tx-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tx-grad-cta);
  display: grid;
  place-items: center;
  color: var(--tx-white);
  font-weight: var(--tx-fw-mega);
  font-size: var(--tx-text-sm);
}
.tx-review-meta { line-height: 1.3; }
.tx-review-meta strong { color: var(--tx-ink-dark); font-size: var(--tx-text-sm); display: block; }
.tx-review-meta span { color: #6b3b78; font-size: var(--tx-text-xs); }
.tx-review-verified {
  margin-left: auto;
  background: rgba(107, 37, 160, 0.07);
  border-radius: var(--tx-r-xs);
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: var(--tx-fw-black);
  color: #6B25A0;
  letter-spacing: 0.05em;
}
.tx-reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(107, 37, 160, 0.06);
  border: 1px solid rgba(107, 37, 160, 0.12);
  border-radius: var(--tx-r-md);
  padding: 10px 20px;
  margin-top: var(--tx-space-6);
  color: #2D0B55;
  font-weight: var(--tx-fw-black);
  font-size: var(--tx-text-sm);
}
.tx-reviews-summary-stars { color: #F59E0B; font-size: var(--tx-text-md); }

/* ============================ WHY SWITCH MINI-CARDS (#17) ============================ */
.tx-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tx-space-4);
  max-width: 860px;
  margin: 0 auto var(--tx-space-10);
}
@media (min-width: 600px) { .tx-why-grid { grid-template-columns: 1fr 1fr; } }
.tx-why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--tx-space-4);
  padding: var(--tx-space-6);
  background: var(--tx-panel);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-r-xl);
  transition: 200ms var(--tx-ease-out);
}
.tx-why-card:hover {
  transform: translateX(4px);
  background: var(--tx-panel-strong);
  border-color: var(--tx-border-pink-soft);
}
.tx-why-card-icon {
  font-size: 1.7rem;
  flex-shrink: 0;
}
.tx-why-card strong {
  color: var(--tx-white);
  display: block;
  font-size: var(--tx-text-md);
  margin-bottom: 5px;
}
.tx-why-card p {
  color: var(--tx-muted-2);
  font-size: var(--tx-text-sm);
  line-height: var(--tx-lh-relaxed);
  margin: 0;
}

/* ============================ FINAL CTA (#18) ============================ */
.tx-final-cta {
  text-align: center;
  border-radius: var(--tx-r-2xl);
  background: #0a0418;
  border: 1px solid var(--tx-border-strong);
  padding: clamp(38px, 7vw, 78px);
  box-shadow: var(--tx-shadow-xl);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}
.tx-final-cta h2 {
  margin: 0 auto var(--tx-space-5);
  max-width: 760px;
  color: var(--tx-white);
}
.tx-final-cta p {
  margin: 0 auto var(--tx-space-8);
  color: #fff1fb;
  max-width: 640px;
  font-size: var(--tx-text-md);
  line-height: var(--tx-lh-relaxed);
}
.tx-final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tx-space-3);
}

/* ============================ MICKEY AI TYPING INDICATOR ============================ */
.tx-mickey-typing {
  display: inline-flex !important;
  gap: 4px;
  padding: 14px 16px !important;
  align-items: center;
}
.tx-mickey-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tx-pink-300);
  opacity: 0.6;
  animation: tx-mickey-bounce 1.2s infinite;
}
.tx-mickey-dot:nth-child(2) { animation-delay: 0.15s; }
.tx-mickey-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tx-mickey-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ============================================================================
   PREMIUM TIER COMPONENTS — Phase 4 visual refinement
   ============================================================================ */

/* ============================== PREMIUM HERO ===============================
   Replaces .tx-hero on the homepage. Mesh background + animated overlay +
   noise texture + big display headline + premium stat row.
   --------------------------------------------------------------------------- */
.tx-hero-premium {
  position: relative;
  min-height: 78vh;
  padding: calc(var(--tx-header-h-desktop) + 40px) 0 64px;
  background: var(--tx-mesh-hero);
  overflow: hidden;
  isolation: isolate;
}

.tx-hero-premium::before {
  /* noise overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tx-noise);
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.tx-hero-premium::after {
  /* animated scan line — subtle, slow */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(236, 72, 153, 0.06) 50%, transparent 100%);
  background-size: 100% 30%;
  background-repeat: no-repeat;
  animation: tx-hero-scan 14s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes tx-hero-scan {
  0%   { background-position: 0 -30%; }
  100% { background-position: 0 130%; }
}

.tx-hero-premium .tx-container {
  position: relative;
  z-index: 1;
}

.tx-hero-premium-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 980px) {
  .tx-hero-premium { padding: calc(var(--tx-header-h-mobile) + 28px) 0 56px; min-height: auto; }
  .tx-hero-premium-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Live indicator pill — sits at top of hero */
.tx-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--tx-glass-bg-dark);
  border: var(--tx-glass-border-dark);
  backdrop-filter: var(--tx-glass-blur);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  border-radius: var(--tx-r-full);
  color: var(--tx-soft-white);
  font-size: var(--tx-text-sm);
  font-weight: var(--tx-fw-bold);
  letter-spacing: var(--tx-ls-wide);
  margin-bottom: 24px;
}
.tx-hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e, 0 0 4px #22c55e;
  animation: tx-pulse-green 2s ease-in-out infinite;
}
@keyframes tx-pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.9); }
}

/* Premium display headline */
.tx-hero-premium h1 {
  font-size: var(--tx-text-display);
  letter-spacing: var(--tx-ls-display);
  line-height: 0.92;
  font-weight: var(--tx-fw-ultra);
  color: var(--tx-white);
  margin: 0 0 28px;
  max-width: 14ch;
}
.tx-hero-premium h1 .tx-display-accent {
  display: block;
  color: #ec4899;
}

.tx-hero-premium-sub {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--tx-muted-2);
  max-width: 54ch;
  margin: 0 0 36px;
}

/* Hero stat row — three premium counters, properly aligned across viewports */
.tx-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px 0;
  padding: 22px 16px;
  background:
    linear-gradient(180deg, rgba(27, 11, 46, 0.55), rgba(18, 5, 31, 0.75));
  border: 1px solid rgba(236, 72, 153, 0.18);
  backdrop-filter: var(--tx-glass-blur);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  border-radius: var(--tx-r-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(15, 2, 30, 0.28),
    0 0 0 1px rgba(236, 72, 153, 0.08);
}
.tx-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 8px;
  position: relative;
}
/* Vertical hairline divider between stats — pink ambient, elite */
.tx-hero-stat + .tx-hero-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.25), transparent);
}
.tx-hero-stat-num {
  display: block;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: var(--tx-fw-ultra);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ec4899;
  margin-bottom: 8px;
  white-space: nowrap;
}
.tx-hero-stat-label {
  display: block;
  font-size: 0.78rem;
  color: var(--tx-muted-2);
  letter-spacing: 0.02em;
  font-weight: 600;
  line-height: 1.35;
  max-width: 16ch;
  margin: 0 auto;
}

/* Mobile — keep 3 columns but tighten everything for narrow viewports */
@media (max-width: 540px) {
  .tx-hero-stats {
    padding: 16px 8px;
    margin: 24px 0;
  }
  .tx-hero-stat {
    padding: 2px 4px;
  }
  .tx-hero-stat-num {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }
  .tx-hero-stat-label {
    font-size: 0.7rem;
    line-height: 1.3;
    letter-spacing: 0.005em;
  }
  .tx-hero-stat + .tx-hero-stat::before {
    top: 18%;
    bottom: 18%;
  }
}

/* Extra-narrow — drop to single column for very small phones (under 380px) */
@media (max-width: 380px) {
  .tx-hero-stats {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 16px;
  }
  .tx-hero-stat {
    padding: 8px 0;
    border-bottom: 1px solid rgba(236, 72, 153, 0.12);
  }
  .tx-hero-stat:last-child { border-bottom: none; }
  .tx-hero-stat + .tx-hero-stat::before { display: none; }
  .tx-hero-stat-num { font-size: 1.6rem; }
  .tx-hero-stat-label { font-size: 0.85rem; max-width: 28ch; }
}

/* Trust micro-strip below the form / hero */
.tx-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 28px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tx-hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tx-text-sm);
  color: var(--tx-muted-2);
  font-weight: 600;
}
.tx-hero-trust-item span:first-child {
  font-size: 1.1rem;
}

/* ============================== GLASS CARD ================================
   Replaces flat backgrounds on hero cards / featured items.
   --------------------------------------------------------------------------- */
.tx-glass-card {
  background: var(--tx-glass-bg-dark);
  border: var(--tx-glass-border-dark);
  backdrop-filter: var(--tx-glass-blur);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  border-radius: var(--tx-r-lg);
  box-shadow: var(--tx-shadow-lg);
  padding: 28px;
}
.tx-glass-card.tx-on-light {
  background: var(--tx-glass-bg-light);
  border: var(--tx-glass-border-light);
  box-shadow: var(--tx-shadow-md);
}

/* ============================== PREMIUM ICON FRAME ========================
   Replaces naked emoji in cards. Adds depth, frame, premium feel.
   --------------------------------------------------------------------------- */
.tx-icon-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--tx-icon-frame-bg-dark);
  border: var(--tx-icon-frame-border-dark);
  box-shadow: var(--tx-shadow-md), var(--tx-shadow-inset);
  font-size: 1.7rem;
  margin-bottom: 18px;
  transition: transform var(--tx-dur-base) var(--tx-ease-out), box-shadow var(--tx-dur-base) var(--tx-ease-out);
}
.tx-icon-frame.tx-on-light {
  background: var(--tx-icon-frame-bg-light);
  border: var(--tx-icon-frame-border-light);
  box-shadow: var(--tx-shadow-md);
}

/* When parent card is hovered, frame lifts and glows */
.tx-card:hover .tx-icon-frame,
.tx-pain-card:hover .tx-icon-frame {
  transform: var(--tx-lift-sm);
  box-shadow: var(--tx-shadow-pink-glow);
}

/* ============================== PREMIUM CARD HOVER ========================
   Replaces flat hover state with proper lift + glow + border shift.
   --------------------------------------------------------------------------- */
.tx-card,
.tx-pain-card {
  transition: transform var(--tx-dur-base) var(--tx-ease-out),
              box-shadow var(--tx-dur-base) var(--tx-ease-out),
              border-color var(--tx-dur-base) var(--tx-ease-out);
}
.tx-card:hover,
.tx-pain-card:hover {
  transform: var(--tx-lift-md);
  box-shadow: var(--tx-shadow-xl);
}

/* ============================== SECTION TRANSITIONS =======================
   Per Mickey: flat boundaries between sections, no gradient blends.
   Section colour changes are clean, hard edges.
   --------------------------------------------------------------------------- */
.tx-section + .tx-section {
  position: relative;
}
/* (No transition overlays — adjacent dark/light sections butt up directly.) */

/* ============================== ANNOUNCEMENT STRIP UPGRADE ================
   Bigger, glassier, more premium.
   --------------------------------------------------------------------------- */
.tx-ann-strip {
  background: var(--tx-grad-ann);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================== MOBILE-SPECIFIC REFINEMENT ================
   Tightened spacing, smarter sticky behavior, less scroll fatigue.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Tighten section vertical rhythm on mobile */
  .tx-section {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  /* Reduce card padding for tighter mobile cards */
  .tx-card, .tx-pain-card {
    padding: 22px 20px;
  }

  /* Section heads tighter on mobile */
  .tx-section-head {
    margin-bottom: 28px;
  }
  .tx-section-head h2 {
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.045em;
  }
  .tx-section-head p {
    font-size: 0.98rem;
    max-width: 38ch;
    margin: 12px auto 0;
  }

  /* Reduce grid gap on mobile */
  .tx-grid-3 { gap: 14px; }

  /* Hero on mobile: form sits below, breathing room */
  .tx-hero { padding-bottom: 32px; }

  /* CTAs stack tighter */
  .tx-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .tx-hero-actions .tx-btn {
    width: 100%;
    justify-content: center;
  }

  /* Sticky CTA gets smarter — slide down on scroll-down past threshold */
  .tx-sticky {
    transition: transform 260ms var(--tx-ease-out);
  }
  .tx-sticky.tx-sticky-hidden {
    transform: translateY(120%);
  }
}

/* ============================== AI DEMO PANEL — PREMIUM ===================
   Existing AI demo gets glass + animated tags.
   --------------------------------------------------------------------------- */
.tx-ai-demo {
  max-width: 720px;
  margin: 0 auto;
  background: var(--tx-glass-bg-dark);
  border: var(--tx-glass-border-dark);
  backdrop-filter: var(--tx-glass-blur);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  border-radius: var(--tx-r-xl);
  padding: 32px;
  box-shadow: var(--tx-shadow-2xl);
}
.tx-ai-demo-msg {
  padding: 12px 18px;
  border-radius: var(--tx-r-md);
  margin-bottom: 12px;
  font-size: var(--tx-text-md);
  max-width: 78%;
}
.tx-ai-demo-caller {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tx-soft-white);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tx-ai-demo-ai {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.20), rgba(139, 92, 246, 0.20));
  color: var(--tx-white);
  border: 1px solid rgba(236, 72, 153, 0.30);
  margin-left: auto;
  text-align: right;
}
.tx-ai-demo-status {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.tx-ai-demo-tag {
  padding: 6px 14px;
  border-radius: var(--tx-r-full);
  font-size: var(--tx-text-xs);
  font-weight: 700;
  letter-spacing: var(--tx-ls-wide);
}
.tx-ai-demo-tag-booked {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.30);
}
.tx-ai-demo-tag-done {
  background: rgba(34, 211, 238, 0.18);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.30);
}
.tx-ai-demo-tag-routed {
  background: rgba(236, 72, 153, 0.18);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.30);
}

/* ============================== AI HOOK BAND UPGRADE ======================
   The Section 2 "Unfair Advantage" band. Flat dark — no mesh gradient,
   per Mickey's flat-sections directive.
   --------------------------------------------------------------------------- */
.tx-aihook-band {
  background: var(--tx-light-bg);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--tx-border-light);
  border-bottom: 1px solid var(--tx-border-light);
  color: var(--tx-ink-dark);
}
.tx-aihook-band .tx-aihook-text h2 { color: var(--tx-ink-dark); }
.tx-aihook-band .tx-aihook-text p  { color: var(--tx-ink-dark-2); }
.tx-aihook-band::before {
  /* Subtle noise texture only — no gradient overlays */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tx-noise);
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.tx-aihook-inner {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 880px) {
  .tx-aihook-inner { grid-template-columns: 1fr; gap: 36px; }
}
.tx-aihook-text h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -0.04em;
  color: var(--tx-white);
  margin: 0 0 14px;
  line-height: 1.05;
}
.tx-aihook-text p {
  color: var(--tx-muted-2);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
}
.tx-aihook-stats {
  display: grid;
  gap: 14px;
}
.tx-aihook-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 24px;
  background:
    linear-gradient(180deg, rgba(18, 5, 31, 0.92), rgba(7, 1, 15, 0.96));
  border: 1px solid rgba(236, 72, 153, 0.28);
  backdrop-filter: var(--tx-glass-blur);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  border-radius: var(--tx-r-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 32px rgba(15, 2, 30, 0.35),
    0 0 0 1px rgba(236, 72, 153, 0.12);
  transition: 220ms var(--tx-ease-out);
}
.tx-aihook-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 18px 44px rgba(236, 72, 153, 0.28),
    0 0 0 1px rgba(236, 72, 153, 0.22);
}
.tx-aihook-stat strong {
  font-size: 1.8rem;
  font-weight: var(--tx-fw-ultra);
  letter-spacing: -0.02em;
  color: #ec4899;
  line-height: 1.1;
  display: block;
  padding-right: 2px;
}
.tx-aihook-stat span {
  color: var(--tx-muted-2);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ============================== ENTITY REINFORCEMENT BAND =================
   Thin band on every page reinforcing brand entities for SEO.
   --------------------------------------------------------------------------- */
/* ============================================================================
   ENTITY BAND — credibility strip between hero and next section
   Premium glass strip with pill-style entity chips. Anchors the page identity
   visually without competing with the hero or the next section.
   ============================================================================ */
.tx-entity-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(7, 1, 15, 0.96) 0%, rgba(18, 5, 31, 0.92) 100%);
  border-top: 1px solid rgba(236, 72, 153, 0.22);
  border-bottom: 1px solid rgba(139, 92, 246, 0.18);
  padding: 22px 0;
  overflow: hidden;
}
.tx-entity-band::before {
  /* subtle radial accent — pink left, purple right */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 0% 50%, rgba(236, 72, 153, 0.18) 0%, transparent 40%),
    radial-gradient(at 100% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.tx-entity-band::after {
  /* thin gradient hairline at top to bridge from the hero */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, 0.55) 30%, rgba(139, 92, 246, 0.55) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.tx-entity-band-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* Hide the legacy dot separators — chips have their own spacing */
.tx-entity-band-inner > span[aria-hidden] {
  display: none;
}

/* Each direct span becomes a pill */
.tx-entity-band-inner > span:not([aria-hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tx-muted-2);
  letter-spacing: 0.01em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--tx-dur-base) var(--tx-ease-out), border-color var(--tx-dur-base) var(--tx-ease-out);
}

/* First pill = brand name pill (always carries <strong>) — gets the accent treatment */
.tx-entity-band-inner > span:not([aria-hidden]):first-child {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(139, 92, 246, 0.22));
  border-color: rgba(236, 72, 153, 0.40);
  color: var(--tx-white);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.18);
}

.tx-entity-band-inner > span:not([aria-hidden]):hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.tx-entity-band strong {
  color: inherit;
  font-weight: inherit;
}

/* On mobile, allow horizontal scroll instead of wrapping — keeps band height tight */
@media (max-width: 640px) {
  .tx-entity-band {
    padding: 16px 0;
  }
  .tx-entity-band-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tx-entity-band-inner::-webkit-scrollbar {
    display: none;
  }
  .tx-entity-band-inner > span:not([aria-hidden]) {
    font-size: 0.78rem;
    padding: 6px 12px;
  }
}

/* ============================================================================
   PHASE 5 UTILITY CLASSES — replace inline styles per Mickey audit feedback
   ============================================================================ */

/* Text alignment */
.tx-text-center { text-align: center; }

/* Spacing utilities */
.tx-mt-2 { margin-top: 8px; }
.tx-mt-3 { margin-top: 12px; }
.tx-mt-4 { margin-top: 16px; }
.tx-mt-5 { margin-top: 20px; }
.tx-mt-6 { margin-top: 24px; }
.tx-mb-2 { margin-bottom: 8px; }
.tx-mb-3 { margin-bottom: 12px; }
.tx-mb-4 { margin-bottom: 16px; }
.tx-mb-5 { margin-bottom: 20px; }

/* Form-specific */
.tx-postcode-input { text-transform: uppercase; }
.tx-honeypot {
  position: absolute;
  left: -9999px;
}
.tx-form-input-spaced { margin-bottom: 9px; }
.tx-chip-group { margin-top: 12px; margin-bottom: 12px; }

/* Footer logo treatment */
.tx-footer-logo {
  margin-bottom: 12px;
  color: var(--tx-white);
}
.tx-footer-tagline {
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 18px;
}

/* Comparison section CTA disclaimer */
.tx-compare-cta {
  text-align: center;
  margin-top: 24px;
}
.tx-compare-disclaimer {
  color: var(--tx-ink-dark-2);
  font-size: 0.85rem;
  margin-top: 10px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* Why-switch CTA */
.tx-why-cta {
  text-align: center;
}
.tx-why-cta-foot {
  color: var(--tx-muted);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* Final CTA headline */
.tx-final-cta-headline {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.05em;
}

/* FAQ narrow container */
.tx-faq-section .tx-container {
  max-width: 820px;
  padding: 0 20px;
}

/* Generic centered-narrow content block */
.tx-content-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Misc */
.tx-no-decoration { text-decoration: none; }

/* tx-card as link should not be underlined */
a.tx-card { text-decoration: none; color: inherit; }

/* ============================================================================
   PHASE 7 — Hero AI-hook glass treatment for visual consistency
   When tx-ai-hook sits inside tx-hero-premium it should match the premium glass
   aesthetic, not the old soft pink-on-white treatment. This keeps industry,
   area and service heroes visually consistent with the homepage hero.
   ============================================================================ */
.tx-hero-premium .tx-ai-hook {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--tx-glass-bg-dark);
  border: var(--tx-glass-border-dark);
  backdrop-filter: var(--tx-glass-blur);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  border-radius: var(--tx-r-md);
  box-shadow: var(--tx-shadow-lg);
}
.tx-hero-premium .tx-ai-hook-inner {
  gap: 16px;
}
.tx-hero-premium .tx-ai-hook-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.30), rgba(139, 92, 246, 0.30));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--tx-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.tx-hero-premium .tx-ai-hook-title {
  color: var(--tx-white);
  font-size: 1.05rem;
  font-weight: var(--tx-fw-ultra);
  letter-spacing: -0.01em;
}
.tx-hero-premium .tx-ai-hook-sub {
  color: var(--tx-muted-2);
  font-size: 0.92rem;
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.45;
}

/* Make form card look right against the dark mesh hero — soft white card */
.tx-hero-premium .tx-quote-card {
  box-shadow: var(--tx-shadow-2xl);
}

/* ============================================================================
   FORM SUCCESS STATE — elite confirmation card
   Replaces the bare confirmation. Animated tick, gradient ribbon, reference
   number, primary WhatsApp + Call CTAs, trust micro-strip at bottom.
   ============================================================================ */
.tx-success {
  position: relative;
  padding: 40px 32px 32px;
  background:
    radial-gradient(circle at 50% -20%, rgba(34, 197, 94, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fdf2f8 100%);
  border-radius: var(--tx-r-lg);
  border: 1px solid rgba(34, 197, 94, 0.18);
  box-shadow: var(--tx-shadow-2xl), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  text-align: center;
  overflow: hidden;
  animation: tx-success-in 480ms var(--tx-ease-out);
}
@keyframes tx-success-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Soft green glow background */
.tx-success-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.20) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: tx-success-pulse 4s ease-in-out infinite;
}
@keyframes tx-success-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.85; transform: translateX(-50%) scale(1.08); }
}

/* The animated tick burst */
.tx-success-burst {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  box-shadow:
    0 16px 40px rgba(34, 197, 94, 0.35),
    0 6px 16px rgba(34, 197, 94, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: tx-success-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
}
@keyframes tx-success-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.tx-success-tick {
  display: inline-flex;
  color: white;
}
.tx-success-tick svg {
  width: 56px;
  height: 56px;
}
.tx-success-tick svg circle {
  opacity: 0;
  animation: tx-tick-circle 400ms var(--tx-ease-out) 280ms forwards;
}
.tx-success-tick svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tx-tick-path 500ms var(--tx-ease-out) 480ms forwards;
}
@keyframes tx-tick-circle {
  to { opacity: 0.6; }
}
@keyframes tx-tick-path {
  to { stroke-dashoffset: 0; }
}

/* Eyebrow label above the headline */
.tx-success-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0.10));
  border: 1px solid rgba(34, 197, 94, 0.30);
  border-radius: 999px;
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* Confirmation headline — bold, gradient-touched */
.tx-success-headline {
  position: relative;
  z-index: 1;
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  font-weight: var(--tx-fw-ultra);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--tx-ink-dark);
  margin: 0 0 12px;
}

.tx-success-body {
  position: relative;
  z-index: 1;
  color: var(--tx-ink-dark-2);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 auto 22px;
}

/* Reference number panel — gives a feeling of system / order */
.tx-success-ref {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: white;
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: var(--tx-shadow-sm);
}
.tx-success-ref-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-ink-dark-2);
}
.tx-success-ref-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--tx-ink-dark);
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(139, 92, 246, 0.10));
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.12);
}

/* "Cannot wait" label */
.tx-success-cta-label {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--tx-ink-dark-2);
  margin-bottom: 14px;
  font-weight: 600;
}

/* The two stacked next-step CTAs — full-width, icon left, arrow right */
.tx-success-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.tx-success-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--tx-r-md);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--tx-dur-base) var(--tx-ease-out),
              box-shadow var(--tx-dur-base) var(--tx-ease-out),
              filter var(--tx-dur-base) var(--tx-ease-out);
  box-shadow: var(--tx-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border: 1px solid transparent;
}
.tx-success-cta:hover {
  transform: var(--tx-lift-sm);
  filter: brightness(1.05);
  box-shadow: var(--tx-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.tx-success-cta-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #1ebe57 100%);
  color: white;
}
.tx-success-cta-call {
  background: linear-gradient(135deg, var(--tx-ink-dark) 0%, #2a0b48 100%);
  color: white;
}
.tx-success-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tx-success-cta-text {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tx-success-cta-text strong {
  font-size: 0.95rem;
  font-weight: 700;
}
.tx-success-cta-text small {
  font-size: 0.75rem;
  opacity: 0.85;
  font-weight: 500;
  margin-top: 2px;
}
.tx-success-cta-arrow {
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform var(--tx-dur-base) var(--tx-ease-out);
}
.tx-success-cta:hover .tx-success-cta-arrow {
  transform: translateX(3px);
}

/* Trust micro-strip at the bottom */
.tx-success-trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  font-size: 0.78rem;
  color: var(--tx-ink-dark-2);
  font-weight: 600;
}
.tx-success-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Mobile tightening */
@media (max-width: 480px) {
  .tx-success { padding: 32px 22px 26px; }
  .tx-success-burst { width: 72px; height: 72px; margin-bottom: 18px; }
  .tx-success-tick svg { width: 48px; height: 48px; }
  .tx-success-headline { font-size: 1.55rem; }
  .tx-success-body { font-size: 0.92rem; }
  .tx-success-cta-text strong { font-size: 0.9rem; }
  .tx-success-cta-text small { font-size: 0.72rem; }
}

/* ============================================================================
   FORM PENDING + ERROR STATES — elite treatment to match the success card
   ============================================================================ */
.tx-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: tx-spin 700ms linear infinite;
}
@keyframes tx-spin {
  to { transform: rotate(360deg); }
}

.tx-form-error {
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
  border: 1px solid rgba(239, 68, 68, 0.30);
  border-left: 4px solid #ef4444;
  border-radius: var(--tx-r-sm);
  color: #b91c1c;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  line-height: 1.45;
  animation: tx-error-shake 320ms var(--tx-ease-out);
}
@keyframes tx-error-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ============================================================================
   SECTION FLOW RHYTHM — OVERRIDES FOR FLIPPED PARTIALS
   --------------------------------------------------------------------------
   Three section-color flips applied to improve dark/light alternation across
   archetypes: why-switch (D→L), reviews/op-capabilities (L→D), service hub
   "Why Telexico" (L→D). These overrides ensure card text contrast and
   visual treatment adapt cleanly to the new context.
   ========================================================================== */

/* why-switch.njk now lives on a light section. Its .tx-why-card uses
   hardcoded white text and translucent panel bg, designed for dark context.
   Adapt for light context here. */
.tx-section-light .tx-why-card {
  background: var(--tx-white);
  border-color: var(--tx-border-light);
  box-shadow: 0 4px 14px rgba(15, 2, 30, 0.06);
}
.tx-section-light .tx-why-card:hover {
  background: #fff;
  border-color: var(--tx-border-pink-soft);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.10);
}
.tx-section-light .tx-why-card strong { color: var(--tx-ink-dark); }
.tx-section-light .tx-why-card p      { color: var(--tx-ink-dark-2); }

/* service.njk "Why Telexico" section is now dark. Its .tx-metric-big uses
   white card bg, which actually looks premium on dark — but the label color
   #5b216d (purple-on-light) needs to read more clearly on the dark page bg
   when the white card sits on it. The card itself stays white (good contrast
   for the gradient numbers); the label inside the white card stays readable
   because it's still on white. No override needed — the contrast within
   the card is unchanged. The shadow becomes invisible on dark bg, which is
   acceptable visual degradation. */

/* ============================================================================
   ADJACENT SAME-COLOR SECTION DIFFERENTIATION
   --------------------------------------------------------------------------
   Where two light or two dark sections sit next to each other (residual
   breaks from shared partials being included in varying flow positions
   across archetypes), differentiate them subtly so they don't blur visually.
   Pure CSS, additive, no template changes. Preserves the purple palette.
   ========================================================================== */

/* Two adjacent light sections: second one gets a slightly whiter shade
   (tx-bg-light is whiter than tx-light-bg) plus a subtle purple-pink hairline
   at the boundary to mark the transition. */
.tx-section-light + .tx-section-light {
  background: var(--tx-bg-light);
}

/* Three or more lights in a row: even lighter for the third+
   so the visual rhythm has progressive contrast. */
.tx-section-light + .tx-section-light + .tx-section-light {
  background: var(--tx-bg-light-3);
}

/* Two adjacent dark sections: subtle inset highlight at the top edge
   creates a hairline transition. The page bg gradient still shows through
   underneath — this just adds a faint marker line where one dark ends
   and the next begins. */
.tx-section-dark + .tx-section-dark {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Three or more darks in a row: slightly stronger hairline + a very
   faint vertical gradient inset to break monotony. */
.tx-section-dark + .tx-section-dark + .tx-section-dark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(236, 72, 153, 0.04);
}

/* Consultative form textarea — invites optional context about current setup
   without forcing structured fields that increase friction. */
.tx-quote-context {
  width: 100%;
  font-family: var(--tx-font-body);
  resize: vertical;
  min-height: 72px;
}

/* ============================================================================
   SERVICES QUICK-ACCESS ROW — under the menu bar, sitewide.
   --------------------------------------------------------------------------
   Glass-effect horizontal row of clickable service chips. Sits directly
   under the main header on every page. Replaces the older trust-bar slot.
   Sticky behaviour matches the header so the row remains accessible.
   ========================================================================== */

.tx-services-row {
  position: sticky;
  top: var(--tx-header-h-mobile);
  z-index: calc(var(--tx-z-sticky-header) - 1);
  background: var(--tx-glass-bg-dark);
  -webkit-backdrop-filter: var(--tx-glass-blur);
  backdrop-filter: var(--tx-glass-blur);
  /* Hairline divider between header above and services row.
     Single thin line — no heavy shadows, no competing borders. */
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Fade edges show users there's more to scroll to on mobile.
   Right edge fades into transparent — visual cue that more chips exist.
   Left edge fades only after user has scrolled (handled via positioning). */
.tx-services-row::before,
.tx-services-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 200ms var(--tx-ease-out);
}
.tx-services-row::before {
  left: 0;
  background: linear-gradient(90deg, rgba(18, 5, 31, 0.92) 0%, rgba(18, 5, 31, 0) 100%);
}
.tx-services-row::after {
  right: 0;
  background: linear-gradient(270deg, rgba(18, 5, 31, 0.92) 0%, rgba(18, 5, 31, 0) 100%);
  opacity: 1; /* right fade visible by default — there IS more to the right at page load */
}
.tx-services-row { position: sticky; } /* re-assert after pseudo-element rules */
.tx-services-row[data-scrolled="true"]::before { opacity: 1; }
.tx-services-row[data-end-reached="true"]::after { opacity: 0; }
.tx-services-row-inner {
  width: 100%;
  max-width: var(--tx-container);
  margin: 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  position: relative;
}
.tx-services-row-inner::-webkit-scrollbar { display: none; }

.tx-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 9px 14px;
  border-radius: var(--tx-r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--tx-white);
  font-size: 0.82rem;
  font-weight: var(--tx-fw-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: 180ms var(--tx-ease-out);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.tx-service-chip-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1;
}
.tx-service-chip:hover,
.tx-service-chip:focus-visible {
  background:
    linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(139, 92, 246, 0.20));
  border-color: rgba(236, 72, 153, 0.45);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 22px rgba(236, 72, 153, 0.22),
    0 0 0 1px rgba(236, 72, 153, 0.15);
  outline: none;
}
.tx-service-chip:active { transform: translateY(0); }

@media (min-width: 1024px) {
  .tx-services-row { top: var(--tx-header-h-desktop); }
  .tx-services-row-inner {
    gap: 8px;
    padding: 10px 0;
    justify-content: center;
    overflow-x: visible;
  }
  .tx-service-chip {
    padding: 9px 16px;
    font-size: 0.88rem;
  }
}

/* ============================================================================
   FEATURE PILL GRID — elite product-spec display.
   Used on hosted-voip Fully Loaded Seat feature inventory. Compact, scanable,
   each pill an individual feature with a pink-glow check mark. Three grouped
   blocks (Core PBX / Mobility / Platform & integration).
   ========================================================================== */

.tx-feature-block {
  margin-top: 48px;
}
.tx-feature-block:first-of-type { margin-top: 36px; }

.tx-feature-block-title {
  font-size: 1.25rem;
  font-weight: var(--tx-fw-ultra);
  color: var(--tx-white);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
}
.tx-feature-block-sub {
  font-size: 0.92rem;
  color: var(--tx-muted-2);
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 720px;
}

.tx-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.tx-feature-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background:
    linear-gradient(180deg, rgba(27, 11, 46, 0.78), rgba(7, 1, 15, 0.88));
  border: 1px solid rgba(236, 72, 153, 0.16);
  border-radius: var(--tx-r-lg);
  color: var(--tx-white);
  font-size: 0.88rem;
  font-weight: var(--tx-fw-semibold);
  letter-spacing: 0.005em;
  line-height: 1.3;
  -webkit-backdrop-filter: var(--tx-glass-blur);
  backdrop-filter: var(--tx-glass-blur);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 8px rgba(15, 2, 30, 0.18);
  transition: 180ms var(--tx-ease-out);
}
.tx-feature-pill:hover {
  border-color: rgba(236, 72, 153, 0.4);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 18px rgba(236, 72, 153, 0.18),
    0 0 0 1px rgba(236, 72, 153, 0.12);
}

.tx-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 10px rgba(236, 72, 153, 0.35);
}

/* Light-section variant — for completeness (used if section flips light) */
.tx-section-light .tx-feature-pill {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(236, 72, 153, 0.22);
  color: var(--tx-ink-dark);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 2px 8px rgba(15, 2, 30, 0.08);
}
.tx-section-light .tx-feature-pill:hover {
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 6px 18px rgba(236, 72, 153, 0.18),
    0 0 0 1px rgba(236, 72, 153, 0.18);
}
.tx-section-light .tx-feature-block-title { color: var(--tx-ink-dark); }
.tx-section-light .tx-feature-block-sub { color: var(--tx-ink-dark-2); }

/* Mobile — slightly smaller pills, tighter gaps */
@media (max-width: 700px) {
  .tx-feature-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tx-feature-pill {
    padding: 11px 14px;
    font-size: 0.84rem;
  }
  .tx-feature-block { margin-top: 36px; }
  .tx-feature-block-title { font-size: 1.1rem; }
}

/* ============================================================================
   PREMIUM SCROLL SYSTEM
   --------------------------------------------------------------------------
   Top progress rail + elite custom scrollbar in the existing pink/purple
   brand gradient. Subtle, never noisy. Matches the design language of the
   services chip row, nav pills, footer hairline, and Mickey launcher.
   Mobile gets the top progress rail (where native scrollbars are hidden);
   desktop gets both the rail AND a refined custom scrollbar.
   ========================================================================== */

/* --- 1. CUSTOM SCROLLBAR (desktop browsers only — mobile ignores) --- */

/* Firefox — minimal native styling */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.55) rgba(7, 1, 15, 0.6);
}

/* Webkit (Chrome / Edge / Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    rgba(7, 1, 15, 0.85),
    rgba(18, 5, 31, 0.90)
  );
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(236, 72, 153, 0.78) 0%,
    rgba(168, 85, 247, 0.82) 100%
  );
  border-radius: 999px;
  border: 2px solid rgba(7, 1, 15, 0.92);
  box-shadow:
    0 0 8px rgba(236, 72, 153, 0.22),
    0 0 14px rgba(139, 92, 246, 0.18);
  transition: background 180ms ease-out;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(244, 114, 182, 0.95) 0%,
    rgba(192, 132, 252, 1) 100%
  );
  box-shadow:
    0 0 12px rgba(236, 72, 153, 0.32),
    0 0 18px rgba(139, 92, 246, 0.26);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    180deg,
    #ec4899 0%,
    #a855f7 100%
  );
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* --- 2. TOP SCROLL PROGRESS RAIL (mobile + desktop) --- */

#tx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: var(--tx-z-mickey-launch, 9999);
  background: linear-gradient(
    90deg,
    rgba(236, 72, 153, 0.95) 0%,
    rgba(168, 85, 247, 0.95) 100%
  );
  box-shadow:
    0 0 8px rgba(236, 72, 153, 0.45),
    0 0 14px rgba(168, 85, 247, 0.35);
  /* Smooth width transitions — feels responsive to scroll without lag */
  transition: width 60ms linear;
  /* Hidden when at very top (no scroll yet) — fades in on first scroll */
  opacity: 0;
  pointer-events: none;
  will-change: width, opacity;
}
#tx-scroll-progress[data-active="true"] {
  opacity: 1;
}

/* Slightly thicker on mobile — native scrollbars are usually hidden there,
   so the progress rail does more visual work and benefits from extra weight. */
@media (max-width: 768px) {
  #tx-scroll-progress { height: 3px; }
}

/* Respect reduced-motion preference — disable transitions entirely */
@media (prefers-reduced-motion: reduce) {
  #tx-scroll-progress { transition: none; }
  ::-webkit-scrollbar-thumb { transition: none; }
}

/* ============================================================================
   AUDIT CTA SECTION
   Mid-page consultative CTA — "Review my current setup."
   Distinct visual treatment from the quote CTA: glass card on light bg,
   premium consultative feel rather than urgent-sale.
   ============================================================================ */

.tx-section-audit {
  position: relative;
  overflow: hidden;
}

/* Subtle ambient gradient behind the audit card */
.tx-section-audit::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 20% 30%, rgba(236, 72, 153, 0.06), transparent 70%),
    radial-gradient(800px 400px at 80% 70%, rgba(139, 92, 246, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tx-audit-card {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 255, 0.96));
  border: 1px solid var(--tx-border-light, #e8e2f0);
  border-radius: 28px;
  padding: 0;
  box-shadow:
    0 30px 80px -20px rgba(139, 92, 246, 0.12),
    0 10px 30px -10px rgba(236, 72, 153, 0.08);
  overflow: hidden;
}

.tx-audit-card-inner {
  position: relative;
  padding: 56px 64px;
}

/* Pink-purple top accent line */
.tx-audit-card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6);
}

.tx-audit-card-content {
  position: relative;
}

.tx-audit-card-content .tx-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(236, 72, 153, 0.18);
  border-radius: 999px;
  color: #8b5cf6;
  font-weight: 600;
  font-size: 0.85rem;
}

.tx-audit-card-content h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tx-ink-dark, #1a1325);
}

.tx-audit-lead {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--tx-ink-dark-2, #4a3960);
  margin: 0 0 32px 0;
  max-width: 720px;
}

.tx-audit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin: 0 0 36px 0;
}

.tx-audit-list-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tx-audit-tick {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}

.tx-audit-list-item strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--tx-ink-dark, #1a1325);
}

.tx-audit-list-item p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--tx-ink-dark-2, #4a3960);
}

.tx-audit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.tx-audit-note {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  font-size: 0.9rem;
  color: var(--tx-ink-dark-3, #6b5a82);
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tx-audit-card-inner { padding: 36px 28px; }
  .tx-audit-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tx-audit-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tx-audit-actions .tx-btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .tx-audit-card-inner { padding: 28px 22px; }
  .tx-audit-card-content h2 { font-size: 1.6rem; }
  .tx-audit-lead { font-size: 1rem; }
}

/* ============================================================================
   DESIGN POLISH PASS — section rhythm, ambient glow, motion, mobile
   ============================================================================ */

/* ------ 1. PREMIUM AMBIENT GLOW CONSISTENCY ------
   Subtle radial gradients on ALL key dark sections — matches the hero treatment
   so every dark section feels part of the same premium environment, not flat. */

.tx-section-dark {
  position: relative;
  overflow: hidden;
}

.tx-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 12% 25%, rgba(236, 72, 153, 0.05), transparent 65%),
    radial-gradient(700px 380px at 88% 75%, rgba(139, 92, 246, 0.05), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.tx-section-dark > .tx-container,
.tx-section-dark > * {
  position: relative;
  z-index: 1;
}

/* Light sections get an even subtler accent — readable but not flat */
.tx-section-light {
  position: relative;
  overflow: hidden;
}

.tx-section-light:not(.tx-section-audit)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(236, 72, 153, 0.025), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.tx-section-light > .tx-container,
.tx-section-light > * {
  position: relative;
  z-index: 1;
}

/* ------ 2. VISUAL BREATHING ROOM ------
   Bump desktop padding for premium spacing. Increase section-head spacing.
   Keep mobile tight, expand desktop. */

:root {
  --tx-section-py-mobile: 64px;
  --tx-section-py-desktop: 104px;
}

@media (min-width: 1024px) {
  .tx-section-head {
    margin-bottom: 48px;
  }
  /* First-section override — slightly tighter where it leads */
  .tx-hero + .tx-entity-band + .tx-section .tx-section-head {
    margin-bottom: 40px;
  }
}

/* ------ 3. SUBTLE MOTION — scroll-reveal for cards / pills / metrics ------
   Items fade up as they enter the viewport. Stagger via CSS variable.
   Disabled if prefers-reduced-motion. */

.tx-card,
.tx-pain-card,
.tx-feature-pill,
.tx-metric-big {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--tx-reveal-delay, 0ms);
}

.tx-card.tx-reveal-in,
.tx-pain-card.tx-reveal-in,
.tx-feature-pill.tx-reveal-in,
.tx-metric-big.tx-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback — if JS doesn't run, items are visible after a short delay */
.tx-no-js .tx-card,
.tx-no-js .tx-pain-card,
.tx-no-js .tx-feature-pill,
.tx-no-js .tx-metric-big {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tx-card,
  .tx-pain-card,
  .tx-feature-pill,
  .tx-metric-big {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Subtle hover-lift refinement — already present but enhanced consistency */
.tx-card,
.tx-pain-card {
  transition-property: opacity, transform, border-color, box-shadow;
}

/* ------ 4. BETTER MOBILE RHYTHM ------
   Tighter card grid gap, more comfortable hero spacing, refined breakpoints. */

@media (max-width: 768px) {
  /* Larger section padding on mobile — feels airier */
  :root {
    --tx-section-py-mobile: 72px;
  }
  /* Slightly tighter grid gap on mobile to prevent excessive scroll length */
  .tx-grid {
    gap: 14px;
  }
  /* Section head margin tighter on mobile */
  .tx-section-head {
    margin-bottom: 28px;
  }
}

@media (max-width: 480px) {
  /* Even tighter on small phones */
  :root {
    --tx-section-py-mobile: 56px;
  }
  .tx-section-head h2 {
    font-size: clamp(1.5rem, 6vw, 1.8rem);
    line-height: 1.2;
  }
}

/* ------ 5. SECTION TRANSITION SOFTENING ------
   Light section gets a subtle fade-edge top/bottom so the dark→light
   transition isn't a hard cut. Premium magazine feel. */

.tx-section-light::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ------ 6. INSTALL IMAGERY PLACEHOLDER SLOT ------
   Optional class — if/when Mickey adds engineer/install photos, drop them
   into a `.tx-install-strip` div in the template. Empty by default. */

.tx-install-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0 0 0;
}

.tx-install-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(236, 72, 153, 0.12);
}

.tx-install-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tx-install-caption {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  background: rgba(26, 19, 37, 0.78);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  backdrop-filter: blur(8px);
}

/* ============================================================================
   SOLUTIONS PAGE — SEO intro lead + arrow link styling
   Used in the elite intro block at the top of /solutions.html
   ============================================================================ */
.tx-intro-lead {
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--tx-ink-dark-2, #4a3960);
  margin: 0 0 18px 0;
}
.tx-intro-lead:last-child { margin-bottom: 0; }
.tx-intro-lead a {
  color: var(--tx-purple, #8b5cf6);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 92, 246, 0.25);
  transition: border-color 0.2s, color 0.2s;
}
.tx-intro-lead a:hover {
  color: var(--tx-pink, #ec4899);
  border-bottom-color: rgba(236, 72, 153, 0.6);
}

.tx-link-arrow {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--tx-purple, #8b5cf6);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.tx-link-arrow:hover {
  color: var(--tx-pink, #ec4899);
  border-bottom-color: rgba(236, 72, 153, 0.6);
  transform: translateX(2px);
}

/* ============================== INTRO GLASS BOX ============================
   Premium glass container for SEO intro paragraphs and short narrative blocks.
   Used to elevate previously-bare paragraph sections into visible card design.
   - Auto dark/light theme via parent section colour
   - Generous padding, soft border, subtle backdrop-filter for premium feel
   --------------------------------------------------------------------------- */
.tx-intro-glass {
  background: var(--tx-glass-bg-dark, rgba(255, 255, 255, 0.04));
  border: var(--tx-glass-border-dark, 1px solid rgba(255, 255, 255, 0.08));
  backdrop-filter: var(--tx-glass-blur, blur(12px));
  -webkit-backdrop-filter: var(--tx-glass-blur, blur(12px));
  border-radius: var(--tx-r-lg, 18px);
  box-shadow: var(--tx-shadow-lg, 0 24px 60px -20px rgba(0, 0, 0, 0.35));
  padding: 36px 36px 32px;
  margin: 0 auto 8px;
  max-width: 880px;
  position: relative;
}
.tx-intro-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(236, 72, 153, 0.06) 0%,
    transparent 35%,
    rgba(139, 92, 246, 0.05) 100%
  );
  opacity: 0.8;
}
.tx-intro-glass > * {
  position: relative;
  z-index: 1;
}
.tx-intro-glass p {
  margin: 0 0 14px 0;
  line-height: 1.72;
  font-size: 1.06rem;
}
.tx-intro-glass p:last-child { margin-bottom: 0; }
.tx-intro-glass a {
  color: var(--tx-pink, #ec4899);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(236, 72, 153, 0.4);
  transition: border-color 0.2s, color 0.2s;
}
.tx-intro-glass a:hover {
  color: #fff;
  border-bottom-color: rgba(236, 72, 153, 0.9);
}

/* Light-theme variant — for tx-section-light parent */
.tx-section-light .tx-intro-glass,
.tx-intro-glass.tx-on-light {
  background: var(--tx-glass-bg-light, rgba(255, 255, 255, 0.7));
  border: var(--tx-glass-border-light, 1px solid rgba(139, 92, 246, 0.12));
  box-shadow: var(--tx-shadow-md, 0 12px 36px -10px rgba(139, 92, 246, 0.18));
  color: var(--tx-ink-dark, #1a0b2e);
}
.tx-section-light .tx-intro-glass p,
.tx-intro-glass.tx-on-light p {
  color: var(--tx-ink-dark-2, #4a3960);
}
.tx-section-light .tx-intro-glass a,
.tx-intro-glass.tx-on-light a {
  color: var(--tx-purple, #8b5cf6);
  border-bottom-color: rgba(139, 92, 246, 0.3);
}
.tx-section-light .tx-intro-glass a:hover,
.tx-intro-glass.tx-on-light a:hover {
  color: var(--tx-pink, #ec4899);
  border-bottom-color: rgba(236, 72, 153, 0.6);
}

/* Mobile padding adjustment */
@media (max-width: 640px) {
  .tx-intro-glass { padding: 26px 22px 22px; }
  .tx-intro-glass p { font-size: 1.0rem; }
}

/* ============================== PROSE LIST IN CARDS ========================
   When converting a bulleted list to card-grid format, use a 'list-card'
   pattern: a card with a numbered bullet marker + bolded lead + descriptive text.
   --------------------------------------------------------------------------- */
.tx-list-card {
  background: var(--tx-glass-bg-dark, rgba(255, 255, 255, 0.04));
  border: var(--tx-glass-border-dark, 1px solid rgba(255, 255, 255, 0.08));
  backdrop-filter: var(--tx-glass-blur, blur(12px));
  border-radius: var(--tx-r-md, 14px);
  padding: 22px 22px 20px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tx-list-card:hover {
  transform: translateY(-2px);
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 18px 48px -16px rgba(236, 72, 153, 0.25);
}
.tx-list-card .tx-list-card-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-pink, #ec4899);
  margin-bottom: 8px;
}
.tx-list-card h4 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.35;
}
.tx-list-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.88;
}
.tx-section-light .tx-list-card {
  background: var(--tx-glass-bg-light, rgba(255, 255, 255, 0.7));
  border: var(--tx-glass-border-light, 1px solid rgba(139, 92, 246, 0.12));
  color: var(--tx-ink-dark, #1a0b2e);
}
.tx-section-light .tx-list-card .tx-list-card-tag {
  color: var(--tx-purple, #8b5cf6);
}

/* ============================== SOLUTION BUILDER FUNNEL =====================
   Five-step interactive solution finder. Premium glass design throughout.
   --------------------------------------------------------------------------- */

/* PROGRESS BAR */
.tx-sb-progress {
  max-width: 800px;
  margin: 0 auto 32px;
}
.tx-sb-progress-bar {
  height: 6px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.tx-sb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}
.tx-sb-progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(74, 57, 96, 0.55);
  flex-wrap: wrap;
  gap: 4px;
}
.tx-sb-step-label {
  transition: color 0.25s;
}
.tx-sb-step-label.is-active {
  color: var(--tx-pink, #ec4899);
}
.tx-sb-step-label.is-done {
  color: var(--tx-purple, #8b5cf6);
}
.tx-sb-step-label.is-done::before {
  content: '✓ ';
}

/* FUNNEL CONTAINER */
.tx-sb-funnel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: var(--tx-r-xl, 24px);
  padding: 48px 40px;
  box-shadow: 0 32px 80px -24px rgba(139, 92, 246, 0.25);
  position: relative;
  overflow: hidden;
  min-height: 540px;
}
.tx-sb-funnel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 300px at 20% -10%, rgba(236, 72, 153, 0.08), transparent),
    radial-gradient(ellipse 500px 250px at 100% 100%, rgba(139, 92, 246, 0.06), transparent);
}

/* STEPS */
.tx-sb-step {
  display: none;
  position: relative;
  z-index: 1;
  animation: tx-sb-step-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tx-sb-step.is-active {
  display: block;
}
@keyframes tx-sb-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.tx-sb-step-head {
  text-align: center;
  margin-bottom: 32px;
}
.tx-sb-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-pink, #ec4899);
  background: rgba(236, 72, 153, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tx-sb-step-head h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--tx-ink-dark, #1a0b2e);
  line-height: 1.25;
}
.tx-sb-step-head p {
  font-size: 1rem;
  color: var(--tx-ink-dark-2, #4a3960);
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* OPTION BUTTONS — Step 1, 2, 3 */
.tx-sb-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.tx-sb-options-2col {
  grid-template-columns: repeat(2, 1fr);
}
.tx-sb-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(139, 92, 246, 0.14);
  border-radius: var(--tx-r-md, 14px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  font-family: inherit;
  width: 100%;
}
.tx-sb-option:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px -16px rgba(236, 72, 153, 0.28);
}
.tx-sb-option.is-selected {
  border-color: var(--tx-pink, #ec4899);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(139, 92, 246, 0.08));
  transform: scale(1.02);
  box-shadow: 0 20px 50px -16px rgba(236, 72, 153, 0.4);
}
.tx-sb-option-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}
.tx-sb-option-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tx-ink-dark, #1a0b2e);
  margin-bottom: 4px;
  line-height: 1.3;
}
.tx-sb-option-sub {
  font-size: 0.88rem;
  color: var(--tx-ink-dark-2, #4a3960);
  opacity: 0.85;
  line-height: 1.4;
}
.tx-sb-option-feature {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.06));
  border-color: rgba(236, 72, 153, 0.25);
}
.tx-sb-option-feature .tx-sb-option-title {
  color: var(--tx-pink, #ec4899);
}

/* BACK BUTTON */
.tx-sb-back-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.tx-sb-back {
  background: none;
  border: none;
  color: var(--tx-purple, #8b5cf6);
  font-weight: 600;
  font-size: 0.96rem;
  cursor: pointer;
  padding: 8px 16px;
  font-family: inherit;
  transition: color 0.2s, transform 0.2s;
}
.tx-sb-back:hover {
  color: var(--tx-pink, #ec4899);
  transform: translateX(-2px);
}

/* STEP 4 FORM */
.tx-sb-form {
  max-width: 580px;
  margin: 0 auto;
}
.tx-sb-form-row {
  margin-bottom: 16px;
}
.tx-sb-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tx-sb-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tx-ink-dark, #1a0b2e);
  margin-bottom: 6px;
}
.tx-sb-required {
  color: var(--tx-pink, #ec4899);
  font-weight: 700;
}
.tx-sb-optional {
  color: rgba(74, 57, 96, 0.55);
  font-weight: 400;
  font-size: 0.82rem;
}
.tx-sb-form .tx-input {
  width: 100%;
  padding: 13px 16px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--tx-r-sm, 10px);
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  color: var(--tx-ink-dark, #1a0b2e);
}
.tx-sb-form .tx-input:focus {
  outline: none;
  border-color: var(--tx-pink, #ec4899);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.12);
}
.tx-sb-form .tx-postcode-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.tx-sb-form textarea.tx-input {
  resize: vertical;
  font-family: inherit;
}
.tx-sb-consent {
  font-size: 0.82rem;
  color: rgba(74, 57, 96, 0.7);
  line-height: 1.5;
  margin: 8px 0 18px;
  text-align: center;
}
.tx-sb-consent a {
  color: var(--tx-purple, #8b5cf6);
  text-decoration: underline;
}
.tx-sb-error {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  border-radius: var(--tx-r-sm, 10px);
  font-size: 0.92rem;
  text-align: center;
}

/* STEP 5 — RECOMMENDATION RESULT */
.tx-sb-result-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.06), rgba(139, 92, 246, 0.04));
  border: 2px solid rgba(236, 72, 153, 0.2);
  border-radius: var(--tx-r-lg, 18px);
  padding: 28px 28px 26px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.tx-sb-result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 400px 200px at -10% -20%, rgba(236, 72, 153, 0.12), transparent);
}
.tx-sb-result-icon {
  font-size: 3.5rem;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  padding-top: 4px;
}
.tx-sb-result-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.tx-sb-result-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-pink, #ec4899);
  margin-bottom: 6px;
}
.tx-sb-result-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--tx-ink-dark, #1a0b2e);
}
.tx-sb-result-content p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tx-ink-dark-2, #4a3960);
  margin: 0 0 14px 0;
}

/* SECONDARY SERVICES */
.tx-sb-result-secondary {
  margin-bottom: 28px;
}
.tx-sb-secondary-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tx-ink-dark-2, #4a3960);
  margin: 0 0 12px 0;
  text-align: center;
}
.tx-sb-secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.tx-sb-secondary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(139, 92, 246, 0.15);
  border-radius: var(--tx-r-sm, 10px);
  text-decoration: none;
  transition: all 0.2s;
}
.tx-sb-secondary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(236, 72, 153, 0.4);
  background: #fff;
  box-shadow: 0 12px 28px -10px rgba(236, 72, 153, 0.25);
}
.tx-sb-secondary-icon {
  font-size: 1.4rem;
}
.tx-sb-secondary-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tx-ink-dark, #1a0b2e);
}

/* 4-CTA ROW */
.tx-sb-cta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.tx-sb-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(139, 92, 246, 0.18);
  border-radius: var(--tx-r-md, 14px);
  text-decoration: none;
  transition: all 0.2s;
}
.tx-sb-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 72, 153, 0.4);
  background: #fff;
  box-shadow: 0 16px 36px -12px rgba(236, 72, 153, 0.25);
}
.tx-sb-cta-primary {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border-color: transparent;
  color: #fff;
}
.tx-sb-cta-primary:hover {
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  border-color: transparent;
  box-shadow: 0 20px 44px -10px rgba(236, 72, 153, 0.45);
}
.tx-sb-cta-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
  line-height: 1;
}
.tx-sb-cta-label {
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 2px;
  color: inherit;
}
.tx-sb-cta:not(.tx-sb-cta-primary) .tx-sb-cta-label {
  color: var(--tx-ink-dark, #1a0b2e);
}
.tx-sb-cta-sub {
  font-size: 0.78rem;
  opacity: 0.78;
  color: inherit;
}
.tx-sb-cta:not(.tx-sb-cta-primary) .tx-sb-cta-sub {
  color: var(--tx-ink-dark-2, #4a3960);
}

/* RESULT FOOTER */
.tx-sb-result-foot {
  text-align: center;
  padding-top: 22px;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
}
.tx-sb-result-foot p {
  font-size: 0.92rem;
  color: var(--tx-ink-dark-2, #4a3960);
  margin: 0 0 16px 0;
  line-height: 1.55;
}
.tx-sb-restart {
  background: none;
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  color: var(--tx-purple, #8b5cf6);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 9px 18px;
  border-radius: var(--tx-r-sm, 10px);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.tx-sb-restart:hover {
  border-color: var(--tx-pink, #ec4899);
  color: var(--tx-pink, #ec4899);
  background: rgba(236, 72, 153, 0.05);
}

/* SUMMARY CHIPS BELOW FUNNEL */
.tx-sb-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: var(--tx-r-sm, 10px);
  flex-wrap: wrap;
}
.tx-sb-summary-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(74, 57, 96, 0.6);
}
.tx-sb-summary-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tx-sb-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(139, 92, 246, 0.1);
  color: var(--tx-purple, #8b5cf6);
  padding: 4px 10px;
  border-radius: 999px;
}

/* MOBILE OVERRIDES */
@media (max-width: 720px) {
  .tx-sb-funnel { padding: 28px 20px; }
  .tx-sb-options-2col { grid-template-columns: 1fr; }
  .tx-sb-form-row-2col { grid-template-columns: 1fr; gap: 16px; }
  .tx-sb-result-card { flex-direction: column; gap: 16px; padding: 24px 22px; }
  .tx-sb-result-icon { font-size: 3rem; }
  .tx-sb-result-content h3 { font-size: 1.3rem; }
  .tx-sb-cta-row { grid-template-columns: 1fr 1fr; }
  .tx-sb-progress-steps { font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .tx-sb-funnel { padding: 22px 16px; min-height: auto; }
  .tx-sb-step-head h2 { font-size: 1.35rem; }
  .tx-sb-cta-row { grid-template-columns: 1fr; }
  .tx-sb-progress-steps span:nth-child(2),
  .tx-sb-progress-steps span:nth-child(4) { display: none; }
}

/* ============================== HOMEPAGE BUILDER TEASER ====================
   Compact entry-point card on homepage that drives to /solution-builder.html
   --------------------------------------------------------------------------- */
.tx-sb-teaser-section {
  padding: 64px 0;
  background: linear-gradient(180deg, var(--tx-bg-light, #faf7ff) 0%, #fff 100%);
}
.tx-sb-teaser {
  max-width: 920px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1a0b2e 0%, #2a1846 100%);
  border-radius: var(--tx-r-xl, 24px);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 36px 80px -24px rgba(139, 92, 246, 0.35);
  color: #fff;
}
.tx-sb-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 500px 300px at 100% -10%, rgba(236, 72, 153, 0.25), transparent),
    radial-gradient(ellipse 400px 250px at -10% 110%, rgba(139, 92, 246, 0.2), transparent);
}
.tx-sb-teaser-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.tx-sb-teaser-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbcfe8;
  background: rgba(236, 72, 153, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  border: 1px solid rgba(236, 72, 153, 0.35);
}
.tx-sb-teaser h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.2;
  color: #fff;
}
.tx-sb-teaser h2 .tx-display-accent {
  color: #ec4899;
}
.tx-sb-teaser p {
  font-size: 1.04rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 18px 0;
  max-width: 560px;
}
.tx-sb-teaser-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.75);
}
.tx-sb-teaser-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tx-sb-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  border-radius: var(--tx-r-md, 14px);
  text-decoration: none;
  transition: all 0.25s;
  white-space: nowrap;
  box-shadow: 0 18px 40px -10px rgba(236, 72, 153, 0.5);
}
.tx-sb-teaser-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -10px rgba(236, 72, 153, 0.65);
}
.tx-sb-teaser-cta-arrow {
  transition: transform 0.25s;
  display: inline-block;
}
.tx-sb-teaser-cta:hover .tx-sb-teaser-cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .tx-sb-teaser { padding: 32px 26px; }
  .tx-sb-teaser-inner { grid-template-columns: 1fr; gap: 22px; }
  .tx-sb-teaser-cta { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE v2 — Apple/Tesla feel
   Premium dark base. Massive type. Generous whitespace. Restrained density.
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================== EYEBROW (shared) ============================== */
.tx-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-pink, #ec4899);
  margin-bottom: 18px;
  position: relative;
}
.tx-text-accent {
  color: #ec4899;
}

/* ============================== HERO v2 ============================== */
.tx-hero-v2 {
  position: relative;
  background: #0a0418;
  overflow: hidden;
  padding: 140px 0 120px;
  isolation: isolate;
}
.tx-hero-v2-glow { display: none; /* removed per flat-design */ }
.tx-hero-v2-glow-a {
  top: -200px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #ff2d95, transparent 70%);
  animation: tx-glow-float-a 18s ease-in-out infinite;
}
.tx-hero-v2-glow-b {
  bottom: -200px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  animation: tx-glow-float-b 22s ease-in-out infinite;
}
@keyframes tx-glow-float-a {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(80px, 40px); opacity: 0.65; }
}
@keyframes tx-glow-float-b {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(-60px, -30px); opacity: 0.65; }
}
.tx-hero-v2-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  z-index: 0;
}
.tx-hero-v2-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.tx-hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 38px;
}
.tx-hero-v2-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
  animation: tx-pulse-dot 2s ease-in-out infinite;
}
@keyframes tx-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.tx-hero-v2-title {
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 32px;
  font-family: var(--tx-font-display, inherit);
}
.tx-hero-v2-amp {
  font-weight: 200;
  color: #ec4899;
  font-style: italic;
  padding: 0 0.08em;
}
.tx-hero-v2-accent {
  color: #ec4899;
  display: inline-block;
}
.tx-hero-v2-sub {
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 760px;
  margin: 0 auto 44px;
  font-weight: 400;
}
.tx-hero-v2-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.tx-hero-v2-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 20px 50px -12px rgba(236, 72, 153, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.tx-hero-v2-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f472b6 0%, #a78bfa 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.tx-hero-v2-primary > * { position: relative; z-index: 1; }
.tx-hero-v2-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 60px -10px rgba(236, 72, 153, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.tx-hero-v2-primary:hover::before { opacity: 1; }
.tx-hero-v2-primary svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.tx-hero-v2-primary:hover svg { transform: translateX(4px); }

.tx-hero-v2-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 500;
  border-radius: 14px;
  text-decoration: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.25s;
}
.tx-hero-v2-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.tx-hero-v2-trust {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}
.tx-hero-v2-trust span {
  white-space: nowrap;
}

/* ============================== DUAL CLUSTER ============================== */
.tx-dual-cluster {
  background: #fafaff;
  padding: 120px 0;
  position: relative;
}
.tx-dual-cluster-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.tx-dual-cluster-head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0a0418;
  margin: 0 0 22px;
}
.tx-dual-cluster-head p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #5b216d;
  margin: 0;
}
.tx-dual-cluster-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.tx-cluster-panel {
  position: relative;
  display: block;
  padding: 48px 44px;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 480px;
  isolation: isolate;
}
.tx-cluster-panel-purple {
  background: linear-gradient(180deg, #0e0820 0%, #1a0b3a 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.tx-cluster-panel-pink {
  background: linear-gradient(180deg, #1c0820 0%, #2d0a2a 100%);
  border: 1px solid rgba(236, 72, 153, 0.25);
}
.tx-cluster-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px -30px rgba(139, 92, 246, 0.45);
}
.tx-cluster-panel-purple:hover { border-color: rgba(139, 92, 246, 0.5); }
.tx-cluster-panel-pink:hover { border-color: rgba(236, 72, 153, 0.5); }
.tx-cluster-panel-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.tx-cluster-panel-purple .tx-cluster-panel-glow {
  background: radial-gradient(ellipse 500px 300px at 100% 0%, rgba(139, 92, 246, 0.28), transparent 70%);
}
.tx-cluster-panel-pink .tx-cluster-panel-glow {
  background: radial-gradient(ellipse 500px 300px at 0% 100%, rgba(236, 72, 153, 0.28), transparent 70%);
}
.tx-cluster-panel-content {
  position: relative;
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tx-cluster-panel-icon {
  font-size: 2.6rem;
  margin-bottom: 20px;
}
.tx-cluster-panel-label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.tx-cluster-panel-content h3 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: #fff;
}
.tx-cluster-panel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  flex: 1;
}
.tx-cluster-panel-list li {
  padding: 10px 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  padding-left: 22px;
}
.tx-cluster-panel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tx-cluster-panel-purple .tx-cluster-panel-list li::before {
  background: linear-gradient(135deg, #c084fc, #8b5cf6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}
.tx-cluster-panel-pink .tx-cluster-panel-list li::before {
  background: linear-gradient(135deg, #f9a8d4, #ec4899);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}
.tx-cluster-panel-list li:last-child { border-bottom: none; }
.tx-cluster-panel-cta {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  transition: transform 0.3s;
}
.tx-cluster-panel:hover .tx-cluster-panel-cta { transform: translateX(6px); }

/* ============================== STORY PANELS — superseded ============================== */
/* Original Story panel rules (single-column) removed.
   The current Story panel CSS lives in the HOMEPAGE v2.2 section further down,
   featuring the 2-col grid + per-panel signatures + meta-row layout. */

/* ============================== NUMBERS ============================== */
.tx-numbers {
  background: #fafaff;
  padding: 120px 0;
}
.tx-numbers-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 72px;
}
.tx-numbers-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0a0418;
  margin: 0;
}
.tx-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.tx-number {
  text-align: center;
  padding: 40px 24px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(139, 92, 246, 0.08);
  transition: all 0.3s;
}
.tx-number:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.18);
}
.tx-number-figure {
  display: block;
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ec4899;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.tx-number-unit {
  font-size: 0.45em;
  font-weight: 600;
  color: #8b5cf6;
  -webkit-text-fill-color: #8b5cf6;
  margin-left: 4px;
}
.tx-number-label {
  display: block;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #5b216d;
  font-weight: 500;
}

/* ============================== FULL STACK ============================== */
.tx-stack {
  background: #0a0418;
  padding: 140px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tx-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1000px 500px at 0% 0%, rgba(236, 72, 153, 0.15), transparent 60%),
    radial-gradient(ellipse 1000px 500px at 100% 100%, rgba(139, 92, 246, 0.15), transparent 60%);
  pointer-events: none;
}
.tx-stack > .tx-container { position: relative; z-index: 1; }
.tx-stack-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}
.tx-stack-head h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 22px;
}
.tx-stack-head p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.tx-stack-cluster {
  margin-bottom: 72px;
}
.tx-stack-cluster:last-child { margin-bottom: 0; }
.tx-stack-cluster-label {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tx-stack-cluster-num {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(236, 72, 153, 0.7);
  font-variant-numeric: tabular-nums;
}
.tx-stack-cluster-label h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.tx-stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tx-stack-item {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.tx-stack-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.06));
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tx-stack-item > * { position: relative; z-index: 1; }
.tx-stack-item:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 72, 153, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.tx-stack-item:hover::before { opacity: 1; }
.tx-stack-icon {
  font-size: 1.7rem;
  margin-bottom: 14px;
  line-height: 1;
}
.tx-stack-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.tx-stack-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

/* ============================== BUILDER CTA ============================== */
.tx-builder-cta {
  background: #fafaff;
  padding: 96px 0;
}
.tx-builder-card {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0418 0%, #2a0e3e 100%);
  box-shadow: 0 40px 100px -30px rgba(139, 92, 246, 0.45);
  isolation: isolate;
}
.tx-builder-card-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 100% 0%, rgba(236, 72, 153, 0.3), transparent 60%),
    radial-gradient(ellipse 500px 300px at 0% 100%, rgba(139, 92, 246, 0.25), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.tx-builder-card-inner {
  position: relative;
  z-index: 1;
  padding: 60px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
  color: #fff;
}
.tx-builder-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbcfe8;
  margin-bottom: 18px;
  padding: 6px 14px;
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 999px;
}
.tx-builder-card h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 18px;
  color: #fff;
}
.tx-builder-card p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 22px;
  max-width: 600px;
}
.tx-builder-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
}
.tx-builder-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 32px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 22px 50px -10px rgba(236, 72, 153, 0.55);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.tx-builder-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -10px rgba(236, 72, 153, 0.7);
}
.tx-builder-cta-button svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.tx-builder-cta-button:hover svg { transform: translateX(6px); }

/* ============================== INDUSTRIES STRIP ============================== */
.tx-industries {
  background: #fafaff;
  padding: 96px 0;
}
.tx-industries-head {
  text-align: center;
  margin-bottom: 48px;
}
.tx-industries-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0418;
  margin: 0;
}
.tx-industries-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.tx-industries-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 14px;
  text-decoration: none;
  color: #0a0418;
  font-weight: 600;
  font-size: 0.96rem;
  transition: all 0.25s;
}
.tx-industries-card:hover {
  border-color: rgba(236, 72, 153, 0.4);
  background: linear-gradient(135deg, #fff 0%, #fdf2f8 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(236, 72, 153, 0.22);
}
.tx-industries-icon { font-size: 1.3rem; }
.tx-industries-name { flex: 1; }
.tx-industries-arrow {
  color: rgba(139, 92, 246, 0.5);
  transition: transform 0.25s, color 0.25s;
}
.tx-industries-card:hover .tx-industries-arrow {
  color: #ec4899;
  transform: translateX(3px);
}
.tx-industries-card-all {
  background: linear-gradient(135deg, #0a0418, #2a0e3e);
  color: #fff;
  border-color: transparent;
}
.tx-industries-card-all .tx-industries-arrow { color: rgba(255, 255, 255, 0.7); }
.tx-industries-card-all:hover {
  background: linear-gradient(135deg, #1a0728, #3d1452);
  color: #fff;
}
.tx-industries-card-all:hover .tx-industries-arrow { color: #fff; }

/* ============================== DIFFERENCE ============================== */
.tx-difference {
  background: #0a0418;
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}
.tx-difference::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 500px at 50% 0%, rgba(139, 92, 246, 0.18), transparent 60%);
  pointer-events: none;
}
.tx-difference-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
}
.tx-difference-head {
  text-align: center;
  margin-bottom: 72px;
}
.tx-difference-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.tx-difference-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tx-difference-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  align-items: flex-start;
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  transition: all 0.3s;
}
.tx-difference-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(236, 72, 153, 0.2);
}
.tx-difference-row-num {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ec4899;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tx-difference-row-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 12px;
}
.tx-difference-row-content p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ============================== FINAL CTA ============================== */
.tx-final-cta {
  position: relative;
  background: #0a0418;
  padding: 140px 0 140px;
  overflow: hidden;
  isolation: isolate;
}
.tx-final-cta-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}
.tx-final-cta-glow-a {
  top: -200px;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.5), transparent 70%);
}
.tx-final-cta-glow-b {
  bottom: -100px;
  right: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
}
.tx-final-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.tx-final-cta-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(236, 72, 153, 0.85);
  margin-bottom: 24px;
}
.tx-final-cta-h {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 28px;
}
.tx-final-cta-accent {
  color: #ec4899;
  display: inline-block;
}
.tx-final-cta-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 660px;
  margin: 0 auto 44px;
}
.tx-final-cta-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.tx-final-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 36px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 25px 55px -10px rgba(236, 72, 153, 0.6);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tx-final-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 70px -10px rgba(236, 72, 153, 0.75);
}
.tx-final-cta-button svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.tx-final-cta-button:hover svg { transform: translateX(5px); }
.tx-final-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 22px 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 500;
  border-radius: 16px;
  text-decoration: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.25s;
}
.tx-final-cta-phone:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}
.tx-final-cta-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
}
.tx-final-cta-trust span { white-space: nowrap; }

/* ============================== MOBILE OVERRIDES ============================== */
@media (max-width: 1024px) {
  .tx-stack-grid { grid-template-columns: repeat(3, 1fr); }
  .tx-numbers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tx-hero-v2 { padding: 90px 0 80px; }
  .tx-hero-v2-eyebrow { font-size: 0.78rem; padding: 6px 14px; }
  .tx-hero-v2-cta { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
  .tx-hero-v2-primary, .tx-hero-v2-secondary { justify-content: center; }
  .tx-hero-v2-trust { gap: 12px 18px; font-size: 0.82rem; }

  .tx-dual-cluster { padding: 80px 0; }
  .tx-dual-cluster-split { grid-template-columns: 1fr; gap: 16px; }
  .tx-cluster-panel { padding: 36px 30px; min-height: auto; }

  .tx-story-panel { padding: 90px 0; }

  .tx-numbers { padding: 80px 0; }
  .tx-numbers-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tx-number { padding: 28px 18px; }

  .tx-stack { padding: 90px 0; }
  .tx-stack-cluster { margin-bottom: 56px; }
  .tx-stack-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tx-stack-item { padding: 20px 18px; }

  .tx-builder-cta { padding: 64px 0; }
  .tx-builder-card-inner { grid-template-columns: 1fr; gap: 32px; padding: 44px 32px; text-align: center; }
  .tx-builder-cta-button { justify-self: center; }
  .tx-builder-meta { justify-content: center; }

  .tx-industries { padding: 72px 0; }
  .tx-industries-strip { grid-template-columns: 1fr 1fr; }

  .tx-difference { padding: 90px 0; }
  .tx-difference-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .tx-difference-row-num { font-size: 1.8rem; }

  .tx-final-cta { padding: 90px 0; }
  .tx-final-cta-actions { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; }
  .tx-final-cta-button, .tx-final-cta-phone { justify-content: center; }
  .tx-final-cta-trust { gap: 8px 12px; font-size: 0.8rem; }
}
@media (max-width: 480px) {
  .tx-stack-grid { grid-template-columns: 1fr; }
  .tx-industries-strip { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE v2.1 — Inline solution-builder section + rhythm rebalance
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================== HOME BUILDER SECTION ============================== */
/* Light WARM PINK section that hosts the inline funnel between hero and dual-cluster.
   First major break from the dark hero — invites action with warmth. */
.tx-home-builder {
  position: relative;
  background: #fdf2f8;
  padding: 96px 0 110px;
  overflow: hidden;
  isolation: isolate;
}
.tx-home-builder-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.12), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1), transparent 35%);
  pointer-events: none;
  z-index: 0;
}
.tx-home-builder > .tx-container { position: relative; z-index: 1; }
.tx-home-builder-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.tx-home-builder-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #0a0418;
  margin: 16px 0 22px;
}
.tx-home-builder-head p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #5b216d;
  margin: 0;
  max-width: 620px;
  margin: 0 auto;
}
.tx-home-builder .tx-eyebrow {
  background: rgba(236, 72, 153, 0.1);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(236, 72, 153, 0.2);
}

/* Override inner funnel section so it doesn't double-wrap the bg/padding */
.tx-home-builder .tx-section.tx-section-light {
  background: transparent;
  padding: 0;
}
.tx-home-builder .tx-sb-funnel {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(236, 72, 153, 0.12);
  box-shadow: 0 30px 80px -30px rgba(236, 72, 153, 0.25);
}

/* ============================== RHYTHM REBALANCE ============================== */
/* Numbers section moved from cool blue-white to warm pink — gives second pink moment
   in the page and breaks the dark Story → dark Stack streak with warm relief. */
.tx-numbers {
  background: #fdf2f8;
}

/* Industries strip stays cool-white — keeps a palette break.
   Already correctly set to #fafaff. */

/* ============================== MOBILE FINE-TUNING ============================== */
@media (max-width: 768px) {
  .tx-home-builder { padding: 64px 0 80px; }
  .tx-home-builder-head { margin-bottom: 40px; }
}

/* Smooth scroll for anchor links — hero CTA → inline solution builder */
html { scroll-behavior: smooth; }

/* Scroll target offset so sticky header doesn't overlap when jumping to funnel */
#solution-builder { scroll-margin-top: 100px; }
@media (max-width: 768px) {
  #solution-builder { scroll-margin-top: 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SOLUTION BUILDER v2 — Multi-select on Step 1
   ═══════════════════════════════════════════════════════════════════════ */

/* Multi-select checked state — distinct from brief auto-advance flash on Steps 2/3 */
.tx-sb-option.is-checked {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.05));
  border-color: #ec4899;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.18), 0 10px 24px -8px rgba(236, 72, 153, 0.22);
  transform: translateY(-1px);
  position: relative;
}
.tx-sb-option.is-checked::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 10px -2px rgba(236, 72, 153, 0.5);
  animation: tx-sb-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tx-sb-check-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Step 1 footer with counter + Next button */
.tx-sb-step1-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(236, 72, 153, 0.12);
  border-radius: 14px;
  flex-wrap: wrap;
  gap: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tx-sb-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.95rem;
}
.tx-sb-counter-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ec4899;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 24px;
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tx-sb-counter-label {
  color: #5b216d;
  font-weight: 500;
}
.tx-sb-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 14px 30px -8px rgba(236, 72, 153, 0.45);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.4;
  pointer-events: none;
}
.tx-sb-next.is-ready {
  opacity: 1;
  pointer-events: auto;
}
.tx-sb-next:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -8px rgba(236, 72, 153, 0.6);
}
.tx-sb-next:not(:disabled):hover svg {
  transform: translateX(4px);
}
.tx-sb-next svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tx-sb-next[disabled] {
  cursor: not-allowed;
}

/* Multi-primary results in Step 5 */
.tx-sb-primaries-intro {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5b216d;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.tx-sb-multi-body {
  margin-top: 18px;
  padding: 20px 22px;
  background: rgba(236, 72, 153, 0.04);
  border-left: 3px solid #ec4899;
  border-radius: 10px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #190724;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .tx-sb-step1-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .tx-sb-counter {
    justify-content: center;
  }
  .tx-sb-next {
    justify-content: center;
  }
  .tx-sb-option.is-checked::after {
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE v2.2 — Story panels redesign + dark-section differentiation
   Each Story panel gets a distinctive inline SVG visual and unique mood.
   The Stack and Final CTA sections get unique visual treatments too,
   so the homepage's dark sections each have their own identity.
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================== STORY GRID ============================== */
.tx-story {
  background: #0a0418;
  overflow: hidden;
}
.tx-story-panel {
  position: relative;
  padding: 130px 0;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tx-story-panel:last-child { border-bottom: none; }

/* Per-panel signature glows — each panel has a distinct visual mood */
.tx-story-panel-1 {
  background: transparent;
}
.tx-story-panel-2 {
  background: transparent;
}
.tx-story-panel-3 {
  background: transparent;
}

/* Two-column grid: text + visual */
.tx-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.tx-story-grid-reverse {
  direction: rtl;
}
.tx-story-grid-reverse > * {
  direction: ltr;
}

.tx-story-content {
  position: relative;
  z-index: 1;
}

/* Bigger, bolder numbering */
.tx-story-num {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #ec4899;
  margin-bottom: 24px;
  font-variant-numeric: tabular-nums;
  position: relative;
  padding-left: 50px;
}
.tx-story-num::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, #ec4899, transparent);
}

/* Panel 2 uses cyan-tinged numbering; Panel 3 uses orange */
.tx-story-panel-2 .tx-story-num {
  color: #ec4899;
}
.tx-story-panel-2 .tx-story-num::before {
  background: linear-gradient(90deg, #22d3ee, transparent);
}
.tx-story-panel-3 .tx-story-num {
  color: #ec4899;
}
.tx-story-panel-3 .tx-story-num::before {
  background: linear-gradient(90deg, #fb923c, transparent);
}

/* Heading typography refinement */
.tx-story-h {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.034em;
  color: #fff;
  margin: 0 0 30px;
}

.tx-story-accent {
  color: #ec4899;
  display: inline-block;
}
.tx-story-panel-2 .tx-story-accent {
  color: #ec4899;
}
.tx-story-panel-3 .tx-story-accent {
  color: #ec4899;
}

.tx-story-body {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 40px;
  max-width: 540px;
}

/* Meta rows — properly stacked, label/value structure */
.tx-story-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 540px;
}
.tx-story-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-story-meta-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 72, 153, 0.85);
}
.tx-story-panel-2 .tx-story-meta-label {
  color: rgba(34, 211, 238, 0.85);
}
.tx-story-panel-3 .tx-story-meta-label {
  color: rgba(251, 146, 60, 0.9);
}
.tx-story-meta-value {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
}

/* Visual column */
.tx-story-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tx-story-svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

/* ============================== STACK SECTION — DIFFERENT TREATMENT ============================== */
/* Was previously the same "dark with bloom" pattern as Story panels.
   Now: tighter top-down structure with a soft horizon glow at top
   added VIA ::after so the existing ::before bloom is preserved. */
.tx-stack {
  background: #0a0418;
}
.tx-stack::after {
  /* Subtle vertical line pattern — server-rack/infrastructure feel */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.018) 50%, transparent 100%);
  background-size: 120px 100%;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}

/* ============================== FINAL CTA — PREMIUM CLOSE ============================== */
/* Was previously similar to Story/Stack. Now: deeper black base with a
   subtle horizon line at the top suggesting "closing curtain". */
.tx-final-cta {
  background: #0a0418;
}
.tx-final-cta::after {
  /* Subtle horizon line at top — a "spotlight cone" feel */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.5), transparent);
  z-index: 1;
}

/* ============================== MOBILE — STORY PANELS ============================== */
@media (max-width: 1024px) {
  .tx-story-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tx-story-grid-reverse {
    direction: ltr;
  }
  .tx-story-visual {
    order: -1;  /* visual above text on mobile */
  }
  .tx-story-svg {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .tx-story-panel {
    padding: 48px 0;
  }
  .tx-story-svg {
    max-width: 100%;
    width: 100%;
  }
  .tx-story-num {
    margin-top: 12px;
    margin-bottom: 14px;
  }
  .tx-story-h {
    margin-bottom: 18px;
    font-size: clamp(2rem, 7vw, 2.6rem);
  }
  .tx-story-content p {
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .tx-story-num {
    font-size: 0.9rem;
    padding-left: 40px;
  }
  .tx-story-num::before {
    width: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION DIVIDERS — Vercel/Linear-style hairline + centred glow node
   Used between major section transitions on the homepage.
   Two variants:
   - .tx-divider (main): for transitions between full sections
   - .tx-divider-inner (subtle): for transitions between sub-panels within a section
   Each divider has real height (60px) so the hairline + node have rendering space.
   The background is transparent so it inherits the surface colour of the gap.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-divider {
  position: relative;
  width: 100%;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  pointer-events: none;
  z-index: 5;
  background: transparent;
  /* Hide the divider entirely — clean section-to-section transitions per flat-design direction */
  display: none;
}

/* All blend variants are now no-ops — kept for backward compatibility of class names but render nothing */
.tx-divider-blend-dark-to-light,
.tx-divider-blend-light-to-dark,
.tx-divider-blend-dark-to-cool,
.tx-divider-blend-cool-to-dark,
.tx-divider-blend-light-to-cool,
.tx-divider-blend-cool-to-light {
  display: none;
}

/* The hairline */
.tx-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(236, 72, 153, 0.15) 20%,
    rgba(236, 72, 153, 0.55) 50%,
    rgba(139, 92, 246, 0.15) 80%,
    transparent 100%
  );
  transform: translateY(-50%);
}

/* The centred glow node */
.tx-divider-node {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  box-shadow:
    0 0 0 4px rgba(236, 72, 153, 0.08),
    0 0 0 10px rgba(236, 72, 153, 0.04),
    0 0 20px 4px rgba(236, 72, 153, 0.5),
    0 0 40px 8px rgba(139, 92, 246, 0.25);
  z-index: 1;
  display: block;
}

/* Subtle pulse animation — slow, barely perceptible */
.tx-divider-node::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 60%);
  animation: tx-divider-pulse 4s ease-in-out infinite;
}
@keyframes tx-divider-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.4); }
}

/* Inner-panel variant — used between Story sub-panels (01/02/03).
   Lives INSIDE the .tx-story section so background is transparent.
   Subtler so it doesn't compete with the main section dividers. */
.tx-divider-inner {
  display: none;
  /* Hidden per flat-design direction */
}
.tx-divider-inner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(236, 72, 153, 0.28) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%
  );
  transform: translateY(-50%);
}
.tx-divider-inner .tx-divider-node {
  width: 5px;
  height: 5px;
  box-shadow:
    0 0 0 3px rgba(236, 72, 153, 0.06),
    0 0 12px 2px rgba(236, 72, 153, 0.3);
}
.tx-divider-inner .tx-divider-node::after {
  display: none;  /* inner dividers don't pulse — keeps them quieter */
}

/* Mobile fine-tuning */
@media (max-width: 768px) {
  .tx-divider { height: 50px; }
  .tx-divider-inner { height: 36px; }
  .tx-divider-node {
    width: 6px;
    height: 6px;
    box-shadow:
      0 0 0 3px rgba(236, 72, 153, 0.08),
      0 0 0 8px rgba(236, 72, 153, 0.04),
      0 0 16px 3px rgba(236, 72, 153, 0.4),
      0 0 32px 6px rgba(139, 92, 246, 0.2);
  }
  .tx-divider-inner .tx-divider-node {
    width: 4px;
    height: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPACT SOLUTION-BUILDER CTA BANNER
   Site-wide CTA banner on all pages except those with the full inline funnel.
   Lightweight (~2KB rendered), brand-consistent, single conversion path
   pointing to /solution-builder.html.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-solution-cta {
  position: relative;
  padding: 90px 0;
  background: #0a0418;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.tx-solution-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  max-width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.45), transparent);
  z-index: 1;
}

.tx-solution-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.tx-solution-cta-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ec4899;
  margin-bottom: 16px;
}

.tx-solution-cta-h {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 18px;
}

.tx-solution-cta-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
  max-width: 580px;
}

.tx-solution-cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.tx-solution-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 14px;
  box-shadow:
    0 18px 40px -10px rgba(236, 72, 153, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tx-solution-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.tx-solution-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 50px -10px rgba(236, 72, 153, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tx-solution-cta-btn:hover::before {
  opacity: 1;
}

.tx-solution-cta-btn:hover svg {
  transform: translateX(4px);
}

.tx-solution-cta-btn svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-solution-cta-trust {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}

/* Mobile — stack content and CTA vertically */
@media (max-width: 1024px) {
  .tx-solution-cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tx-solution-cta-action {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .tx-solution-cta {
    padding: 70px 0;
  }
  .tx-solution-cta-btn {
    width: 100%;
    justify-content: center;
    font-size: 1.02rem;
    padding: 18px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHATSAPP CTA — solution-cta-banner secondary link variant
   ═══════════════════════════════════════════════════════════════════════ */

/* Secondary WhatsApp link inside the solution-cta-banner.
   Smaller than the primary green button to keep visual hierarchy clear:
   primary = "Start the builder", secondary = "Or WhatsApp us". */
.tx-solution-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.12));
  border: 1px solid rgba(37, 211, 102, 0.45);
  color: #d1fae5;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: fit-content;
}
.tx-solution-cta-whatsapp:hover {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.28), rgba(18, 140, 126, 0.2));
  border-color: rgba(37, 211, 102, 0.65);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.3);
}
.tx-solution-cta-whatsapp > span:first-child {
  font-size: 1.15rem;
  line-height: 1;
}

/* Audit-actions and final-actions — make sure 3 buttons wrap nicely on smaller screens */
.tx-audit-actions,
.tx-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

@media (max-width: 640px) {
  .tx-audit-actions .tx-btn,
  .tx-final-actions .tx-btn {
    width: 100%;
    justify-content: center;
  }
  .tx-solution-cta-whatsapp {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING WHATSAPP BUTTON — DESKTOP only
   Mobile already has WhatsApp in the sticky bottom nav; on desktop there's
   no equivalent. This floating button sits above the existing "Build My
   Package" launch button (vertical stack pattern, like Intercom/Drift).
   Hidden on mobile to avoid duplication with the sticky nav.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-whatsapp-float {
  position: fixed;
  /* Stack above the existing tx-floating-build button: 
     tx-floating-build is at bottom + space-5 (~24px), height ~48px, gap 14px */
  bottom: 86px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  text-decoration: none;
  box-shadow:
    0 10px 30px -4px rgba(37, 211, 102, 0.55),
    0 0 0 4px rgba(37, 211, 102, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  z-index: 9998;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: tx-wa-pulse 3.5s ease-in-out infinite;
}

.tx-whatsapp-float:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 18px 40px -4px rgba(37, 211, 102, 0.75),
    0 0 0 6px rgba(37, 211, 102, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  animation: none;
}

@keyframes tx-wa-pulse {
  0%, 100% { box-shadow: 0 10px 30px -4px rgba(37, 211, 102, 0.55), 0 0 0 4px rgba(37, 211, 102, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; }
  50%      { box-shadow: 0 10px 30px -4px rgba(37, 211, 102, 0.65), 0 0 0 10px rgba(37, 211, 102, 0.0), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; }
}

.tx-whatsapp-float-label {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: #128C7E;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.tx-whatsapp-float-label::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #128C7E;
}
.tx-whatsapp-float:hover .tx-whatsapp-float-label {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

/* Hide on mobile — sticky bottom nav already has WhatsApp */
@media (max-width: 768px) {
  .tx-whatsapp-float {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RELATED X — Semantic relationship section
   Renders 4 cross-link panels + locations strip on every page that
   declares relatedTopic in frontmatter. Drives internal linking,
   crawl depth, and semantic topic-cluster signals for SEO.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-related-x {
  position: relative;
  padding: 100px 0;
  background: #0a0418;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.tx-related-x::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.5), transparent);
  z-index: 1;
}

.tx-related-x-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.tx-related-x-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ec4899;
  margin-bottom: 16px;
}

.tx-related-x-h {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 14px;
}

.tx-related-x-sub {
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* 4-panel grid — 2x2 on desktop, stacks on tablet/mobile */
.tx-related-x-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.tx-related-x-panel {
  position: relative;
  padding: 32px 30px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-related-x-panel:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(236, 72, 153, 0.22);
}

/* Per-panel coloured top accent — gives each panel a distinct mood */
.tx-related-x-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6);
  opacity: 0.6;
}
.tx-related-x-panel-services::before {
  background: linear-gradient(90deg, #22d3ee, #ec4899);
}
.tx-related-x-panel-money::before {
  background: linear-gradient(90deg, #fb923c, #ec4899);
}
.tx-related-x-panel-alsochose::before {
  background: linear-gradient(90deg, #a78bfa, #ec4899);
}

.tx-related-x-panel-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 72, 153, 0.85);
  margin-bottom: 10px;
}
.tx-related-x-panel-services .tx-related-x-panel-eyebrow {
  color: rgba(34, 211, 238, 0.9);
}
.tx-related-x-panel-money .tx-related-x-panel-eyebrow {
  color: rgba(251, 146, 60, 0.9);
}
.tx-related-x-panel-alsochose .tx-related-x-panel-eyebrow {
  color: rgba(167, 139, 250, 0.95);
}

.tx-related-x-panel-h {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 22px;
  letter-spacing: -0.012em;
}

/* The link rows inside each panel */
.tx-related-x-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tx-related-x-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin: 0 -14px;  /* extend hit-area to panel edges */
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.tx-related-x-link:hover {
  background: rgba(236, 72, 153, 0.08);
}

.tx-related-x-link-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tx-related-x-link-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tx-related-x-link-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}

.tx-related-x-link-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.tx-related-x-link-arrow {
  font-size: 1rem;
  color: rgba(236, 72, 153, 0.65);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.tx-related-x-link:hover .tx-related-x-link-arrow {
  opacity: 1;
  transform: translateX(0);
  color: #ec4899;
}

/* Locations strip — full-width below the panels */
.tx-related-x-locations {
  margin-top: 40px;
  padding: 26px 30px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.tx-related-x-locations-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.tx-related-x-locations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tx-related-x-location-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-related-x-location-chip:hover {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

.tx-related-x-location-all {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.16), rgba(139, 92, 246, 0.12));
  border-color: rgba(236, 72, 153, 0.32);
  color: #fce7f3;
}

/* Responsive */
@media (max-width: 1024px) {
  .tx-related-x-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tx-related-x {
    padding: 70px 0;
  }
  .tx-related-x-panel {
    padding: 26px 22px;
  }
  .tx-related-x-link {
    padding: 10px 12px;
    margin: 0 -12px;
    gap: 12px;
  }
  .tx-related-x-link-icon {
    width: 28px;
    height: 28px;
    font-size: 1.15rem;
  }
  .tx-related-x-link-title {
    font-size: 0.92rem;
  }
  .tx-related-x-link-sub {
    font-size: 0.78rem;
  }
  .tx-related-x-locations {
    padding: 20px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE D — UX REFINEMENT
   Three targeted improvements driven by density audit:

   1. Mobile horizontal-scroll for tx-grid-3 sections with 6+ cards
      Eliminates vertical card-stacking fatigue on mobile.
   2. Tighter hero typography on tx-hero-premium (service hubs)
      Makes the H1 more statement-architectural, less "feature page".
   3. Premium section rhythm — tx-section padding refinements + subtle
      between-section separator marks on dark sections.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- 1. MOBILE HORIZONTAL SCROLL FOR CARD-HEAVY SECTIONS --- */
/* Only on mobile, only on sections that have at least 4 cards, the tx-grid-3
   becomes a horizontal scroll-snap container. Each card occupies ~85% of
   viewport width with snap-stop on each. Eliminates infinite-scroll-fatigue. */

@media (max-width: 768px) {
  .tx-grid-3,
  .tx-grid-2 {
    /* Only trigger horizontal scroll if there are 4+ children */
    /* CSS can't count children directly — instead we apply scroll behaviour
       and let small grids (2-3 cards) wrap normally via overflow:visible */
  }

  /* Apply to any grid inside a tx-section — but only when there are many cards.
     We use the :has() selector which is now widely supported (96%+ of UK traffic). */
  .tx-section .tx-grid-3:has(> .tx-card:nth-child(4)) {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    gap: 16px;
    padding-bottom: 20px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(236, 72, 153, 0.4) transparent;
  }

  .tx-section .tx-grid-3:has(> .tx-card:nth-child(4)) > .tx-card {
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Subtle visual indicator that you can scroll horizontally */
  .tx-section .tx-grid-3:has(> .tx-card:nth-child(4))::after {
    content: '';
    flex: 0 0 4px;
  }

  /* Webkit scrollbar styling */
  .tx-section .tx-grid-3:has(> .tx-card:nth-child(4))::-webkit-scrollbar {
    height: 4px;
  }
  .tx-section .tx-grid-3:has(> .tx-card:nth-child(4))::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
  }
  .tx-section .tx-grid-3:has(> .tx-card:nth-child(4))::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.5), rgba(139, 92, 246, 0.5));
    border-radius: 2px;
  }
}

/* --- 2. TIGHTER HERO TYPOGRAPHY ON SERVICE HUBS --- */
/* The .tx-hero-premium hero on service hubs currently uses a loose clamp.
   Bring it closer to homepage v2.2's tighter, more architectural scale. */

.tx-hero-premium h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: 700;
}

.tx-hero-premium h1 .tx-display-accent {
  display: block;
  margin-top: 6px;
  color: #ec4899;
  font-weight: 600;
  font-size: 0.88em;  /* Slightly smaller than the main H1 line */
  letter-spacing: -0.028em;
}

/* Tighten the hero sub paragraph too */
.tx-hero-premium-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 580px;
  color: rgba(255, 255, 255, 0.78);
}

/* --- 3. PREMIUM SECTION RHYTHM ON SERVICE HUBS --- */
/* Section padding is now controlled by --tx-section-py-mobile / --tx-section-py-desktop
   tokens (bumped from 56/88 → 72/104 in tokens.css for more breathing room). */

.tx-section.tx-section-dark {
  position: relative;
}

/* Add a barely-perceptible centered pink mark at the top of dark sections —
   only on sections that don't already have one. Establishes visual rhythm
   between sections without adding markup. */
.tx-section.tx-section-dark::before { display: none; /* removed per flat-design direction */ }

/* But don't override sections that already have a deliberate top border treatment */
.tx-section.tx-section-dark.tx-hero-premium::before,
.tx-section.tx-section-dark.tx-section-no-divider::before {
  display: none;
}

/* --- 4. SLIGHTLY MORE GENEROUS SECTION-HEAD SPACING --- */
/* The .tx-section-head currently has 48px margin-bottom. Bumping to 64px
   on service-hub-style sections gives the eye more whitespace before
   content begins. */

.tx-section-head {
  margin-bottom: 64px;
  max-width: 740px;
}

.tx-section-head h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.tx-section-head .tx-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

@media (max-width: 768px) {
  .tx-section-head {
    margin-bottom: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RELATED X LITE — Tier-2 internal linking for area/industry/postcode pages
   Visually distinct from the commercial Related X (4 panels) — single
   horizontal strip of context-aware links. Lighter weight, different
   signal to Google than the boilerplate of a sitewide identical block.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-related-lite {
  position: relative;
  padding: 64px 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(236, 72, 153, 0.04) 50%, transparent 100%);
  overflow: hidden;
}

.tx-related-lite-head {
  text-align: center;
  margin-bottom: 32px;
}

.tx-related-lite-kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(236, 72, 153, 0.82);
  margin-bottom: 8px;
}

.tx-related-lite-h {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  line-height: 1.2;
}

/* Strip: horizontal grid that flexes to row on desktop, wraps on tablet,
   horizontal scroll-snap on mobile (consistent with Phase D pattern) */
.tx-related-lite-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tx-related-lite-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

/* Light-section variant (when this lite section is used on light bg) */
.tx-section-light + .tx-related-lite,
.tx-on-light .tx-related-lite-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(253, 242, 248, 0.4) 100%);
}

.tx-section-light .tx-related-lite-card,
.tx-related-lite.tx-on-light .tx-related-lite-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(236, 72, 153, 0.18);
  color: #190724;
}

.tx-related-lite-card:hover {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.35);
  transform: translateY(-1px);
}

.tx-related-lite-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.tx-related-lite-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tx-related-lite-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-related-lite-sub {
  font-size: 0.78rem;
  opacity: 0.65;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .tx-related-lite {
    padding: 48px 0;
  }
  .tx-related-lite-strip {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 1: prefers-reduced-motion support

   When a user has reduced-motion enabled (system accessibility setting),
   disable all infinite animations, all decorative transforms on hover,
   all scroll-triggered animations, all blur/glow pulses.

   Benefits:
   - Accessibility for vestibular-disorder users (legal requirement increasingly)
   - Battery life on mobile (CSS animations consume GPU)
   - Performance on low-end Android (where the GPU is the bottleneck)
   - Cleaner experience for users who simply find animation distracting

   Strategy: NOT just `animation: none`. Some animations are functional
   (success ticks, error shakes — these communicate state). Those we keep
   but shorten. Decorative animations (glow pulses, hover transforms,
   ambient scans) we fully disable.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* === Disable all infinite-loop decorative animations === */
  .tx-divider-node::after,
  .tx-whatsapp-float,
  .tx-mickey-launch,
  .tx-mickey-preview-pulse,
  .tx-hero-live-dot,
  .tx-hero-glow,
  .tx-hero-blob,
  .tx-success-pulse,
  .tx-status-dot {
    animation: none !important;
  }

  /* === Disable all background scan / pan animations === */
  .tx-hero-scan,
  [class*="hero-scan"],
  [class*="hero-pulse"],
  [class*="ambient-"] {
    animation: none !important;
  }

  /* === Reduce transition durations to near-instant on hover === */
  /* But not zero — instant transitions feel jarring; ~80ms reads as "immediate" */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
    scroll-behavior: auto !important;
  }

  /* === Keep functional animations (success tick, error shake) — but shorten === */
  .tx-success-pop,
  .tx-tick-circle,
  .tx-tick-path,
  .tx-success-in {
    animation-duration: 200ms !important;
    animation-iteration-count: 1 !important;
  }

  /* === Disable hover transforms (they feel jittery without motion) === */
  .tx-card:hover,
  .tx-btn:hover,
  .tx-related-x-link:hover,
  .tx-related-lite-card:hover,
  .tx-solution-cta-btn:hover,
  .tx-related-x-location-chip:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 2: Accordion component

   Reusable expandable section for dense content. Uses HTML <details>/<summary>
   for free accessibility (keyboard navigation, screen reader announce, no JS
   required). Styled to match the brand without screaming "click me".

   Usage in templates:
     <div class="tx-accordion">
       <details class="tx-accordion-item">
         <summary class="tx-accordion-summary">
           <span class="tx-accordion-icon">📋</span>
           <span class="tx-accordion-title">Section title</span>
           <span class="tx-accordion-toggle">+</span>
         </summary>
         <div class="tx-accordion-body">
           <p>Body content here.</p>
         </div>
       </details>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

.tx-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.tx-accordion-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-accordion-item[open] {
  border-color: rgba(236, 72, 153, 0.3);
  background: rgba(255, 255, 255, 0.045);
}

.tx-accordion-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Remove default disclosure triangle */
.tx-accordion-summary::-webkit-details-marker { display: none; }
.tx-accordion-summary::marker { content: ""; }

.tx-accordion-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 72, 153, 0.12);
  border-radius: 8px;
}

.tx-accordion-title {
  flex: 1;
  min-width: 0;
  letter-spacing: -0.012em;
}

.tx-accordion-toggle {
  font-size: 1.4rem;
  font-weight: 300;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(236, 72, 153, 0.8);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.tx-accordion-item[open] .tx-accordion-toggle {
  transform: rotate(45deg);
}

.tx-accordion-body {
  padding: 0 22px 22px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.tx-accordion-body p { margin: 0 0 12px; }
.tx-accordion-body p:last-child { margin-bottom: 0; }
.tx-accordion-body ul {
  margin: 8px 0 12px;
  padding-left: 20px;
}
.tx-accordion-body ul li { margin-bottom: 6px; }

/* Light-section variant */
.tx-section-light .tx-accordion-item,
.tx-on-light .tx-accordion-item {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(236, 72, 153, 0.15);
  color: #190724;
}

.tx-section-light .tx-accordion-item[open],
.tx-on-light .tx-accordion-item[open] {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(236, 72, 153, 0.3);
}

.tx-section-light .tx-accordion-summary,
.tx-on-light .tx-accordion-summary { color: #190724; }

.tx-section-light .tx-accordion-body,
.tx-on-light .tx-accordion-body { color: rgba(25, 7, 36, 0.75); }

.tx-section-light .tx-accordion-body,
.tx-on-light .tx-accordion-body { border-top-color: rgba(236, 72, 153, 0.1); }

/* Mobile-specific tightening */
@media (max-width: 640px) {
  .tx-accordion-summary {
    padding: 16px 18px;
    gap: 12px;
    font-size: 0.96rem;
  }
  .tx-accordion-icon {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
  }
  .tx-accordion-body {
    padding: 14px 18px 18px 18px;
    font-size: 0.92rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 3: Tab system component

   Reusable tab navigation for comparison content. Mobile-first design:
   on small screens, tabs become a horizontal scroll-snap row.

   Uses native HTML radio inputs for state (no JavaScript required for
   basic functionality, fully accessible by default, works without JS).

   Usage in templates:
     <div class="tx-tabs">
       <input type="radio" id="tab1" name="tabset1" class="tx-tabs-input" checked>
       <label for="tab1" class="tx-tabs-label">Tab 1 title</label>
       <input type="radio" id="tab2" name="tabset1" class="tx-tabs-input">
       <label for="tab2" class="tx-tabs-label">Tab 2 title</label>
       <div class="tx-tabs-panels">
         <div class="tx-tabs-panel" data-for="tab1">Panel 1 content</div>
         <div class="tx-tabs-panel" data-for="tab2">Panel 2 content</div>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════════ */

.tx-tabs {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

/* Hide the radio inputs visually; keep them accessible */
.tx-tabs-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Tab label row — uses flex on desktop, horizontal scroll on mobile */
.tx-tabs > .tx-tabs-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 8px;
  margin-bottom: 24px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.tx-tabs > .tx-tabs-label:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Active tab state */
.tx-tabs-input:checked + .tx-tabs-label {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.15));
  border-color: rgba(236, 72, 153, 0.5);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(236, 72, 153, 0.4);
}

/* Focus state for keyboard accessibility */
.tx-tabs-input:focus-visible + .tx-tabs-label {
  outline: 2px solid rgba(236, 72, 153, 0.7);
  outline-offset: 2px;
}

/* Panels — hidden by default */
.tx-tabs-panel {
  display: none;
  animation: tx-tab-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Show the panel that matches the checked radio
   Sibling-attribute selectors that work for the 4-tab pattern */
.tx-tabs-input:nth-of-type(1):checked ~ .tx-tabs-panels .tx-tabs-panel:nth-of-type(1),
.tx-tabs-input:nth-of-type(2):checked ~ .tx-tabs-panels .tx-tabs-panel:nth-of-type(2),
.tx-tabs-input:nth-of-type(3):checked ~ .tx-tabs-panels .tx-tabs-panel:nth-of-type(3),
.tx-tabs-input:nth-of-type(4):checked ~ .tx-tabs-panels .tx-tabs-panel:nth-of-type(4),
.tx-tabs-input:nth-of-type(5):checked ~ .tx-tabs-panels .tx-tabs-panel:nth-of-type(5) {
  display: block;
}

@keyframes tx-tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light-section variant */
.tx-section-light .tx-tabs > .tx-tabs-label,
.tx-on-light .tx-tabs > .tx-tabs-label {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(236, 72, 153, 0.2);
  color: rgba(25, 7, 36, 0.7);
}

.tx-section-light .tx-tabs-input:checked + .tx-tabs-label,
.tx-on-light .tx-tabs-input:checked + .tx-tabs-label {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  border-color: transparent;
}

/* Mobile: tabs become horizontal scroll-snap row */
@media (max-width: 768px) {
  .tx-tabs {
    /* Wrap tab labels in horizontal scroll on mobile */
  }
  .tx-tabs > .tx-tabs-label {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* Use a wrapping technique: flex with horizontal scroll */
  /* The tabs naturally inline-flow; we just need to make them scrollable */
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 4: Hero typography mobile statement scale

   On mobile (<640px), make the hero feel more like a statement
   ("national infrastructure brand") and less like a feature page.

   Specifically: shorter line-height, tighter letter-spacing, bigger
   first-line, more architectural feel.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .tx-hero-premium h1 {
    font-size: clamp(2.1rem, 9.5vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: -0.038em;
    margin-bottom: 14px;
  }
  .tx-hero-premium h1 .tx-display-accent {
    font-size: 0.82em;
    margin-top: 4px;
    letter-spacing: -0.032em;
  }
  .tx-hero-premium-sub {
    font-size: 1.02rem;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  /* More breathing room around the hero on mobile */
  .tx-hero-premium {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  /* Section-head tightening on mobile — less competing visual weight */
  .tx-section-head h2 {
    font-size: clamp(1.55rem, 6.5vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: -0.028em;
  }
  .tx-section-head .tx-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }
  .tx-section-head p {
    font-size: 0.96rem;
    line-height: 1.55;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 5: Tap-target sizing

   WCAG 2.5.5 (Target Size) and Apple HIG both recommend minimum 44x44pt
   tap targets. Audit current implementations and ensure compliance.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* All anchors and buttons should have minimum 44px tap height */
  .tx-btn,
  .tx-card a,
  .tx-related-x-link,
  .tx-related-lite-card,
  .tx-related-x-location-chip,
  .tx-accordion-summary,
  .tx-tabs-label {
    min-height: 44px;
  }

  /* Ensure form inputs are tappable */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 6: Accessibility & focus-visible

   :focus-visible only shows the focus ring when navigating by keyboard,
   not on mouse/touch click. Makes touch UX cleaner while preserving
   keyboard accessibility.
   ═══════════════════════════════════════════════════════════════════════ */

/* Remove default outline; add proper focus-visible ring */
*:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(236, 72, 153, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}

.tx-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(236, 72, 153, 0.4),
    0 0 0 1px rgba(236, 72, 153, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 7: iOS-specific mobile polish

   iOS Safari has specific rendering quirks. These rules address them.
   ═══════════════════════════════════════════════════════════════════════ */

/* Prevent iOS auto-zoom on form focus by ensuring inputs are >=16px */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Remove iOS button-element default styling */
button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Smooth momentum scrolling for horizontal scroll regions on iOS */
.tx-related-x-locations-list,
.tx-related-lite-strip,
.tx-tabs {
  -webkit-overflow-scrolling: touch;
}

/* Better text rendering on iOS retina screens */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Disable iOS callout (long-press menu) on buttons + interactive elements */
.tx-btn,
.tx-card a,
.tx-whatsapp-float,
.tx-floating-build,
.tx-sticky a {
  -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ELITE PASS — Part 8: Print stylesheet (basic)

   When users print a page (most often the audit-cta / proposal pages),
   strip the noise so the print-out is readable.
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  /* Hide all interactive / decorative elements */
  .tx-sticky,
  .tx-floating-build,
  .tx-whatsapp-float,
  .tx-mickey-preview,
  .tx-mickey-panel,
  .tx-divider,
  .tx-divider-inner,
  .tx-solution-cta,
  .tx-related-x,
  .tx-related-lite,
  .tx-final-cta,
  .tx-audit-cta,
  nav,
  footer,
  iframe { display: none !important; }

  /* Use print-friendly colours */
  body {
    background: #fff !important;
    color: #000 !important;
  }
  h1, h2, h3 { color: #000 !important; }
  p { color: #222 !important; }
  a { color: #000 !important; text-decoration: underline; }

  /* Show URLs in print */
  a[href^="http"]:after,
  a[href^="/"]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  /* Page break management */
  h1, h2 { page-break-after: avoid; }
  .tx-card, .tx-pain-card, .tx-faq-item { page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURED SERVICES — Homepage section between Dual Cluster and Story.
   4 services with prominent showcase blocks. Each links to its hub.
   Flat-colour design (no gradients) per design direction.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-featured-services {
  background: #0a0418;
  padding: 96px 0;
  color: #fff;
}

.tx-featured-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 56px;
}

.tx-featured-service {
  display: flex;
  gap: 22px;
  padding: 32px 30px;
  background: #110624;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.tx-featured-service:hover {
  background: #150828;
  border-color: rgba(236, 72, 153, 0.32);
}

.tx-featured-service-icon {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 72, 153, 0.12);
  border-radius: 14px;
  border: 1px solid rgba(236, 72, 153, 0.18);
}

.tx-featured-service-content {
  flex: 1;
  min-width: 0;
}

.tx-featured-service-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ec4899;
  margin-bottom: 8px;
}

.tx-featured-service-content h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #fff;
}

.tx-featured-service-content p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 18px;
}

.tx-featured-service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 20px;
}

.tx-featured-service-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.tx-featured-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.94rem;
  font-weight: 600;
  color: #ec4899;
  transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-featured-service:hover .tx-featured-service-link {
  gap: 12px;
}

.tx-featured-services-foot {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tx-featured-services-foot p {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 8px;
}

.tx-featured-services-foot .tx-text-link {
  color: #ec4899;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.96rem;
}

.tx-featured-services-foot .tx-text-link:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .tx-featured-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tx-featured-service {
    padding: 26px 22px;
    gap: 18px;
  }
  .tx-featured-service-icon {
    width: 52px;
    height: 52px;
    font-size: 2rem;
  }
  .tx-featured-service-content h3 {
    font-size: 1.22rem;
  }
}

@media (max-width: 640px) {
  .tx-featured-services {
    padding: 70px 0;
  }
  .tx-featured-service {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
  .tx-featured-service-icon {
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAIN POINTS — Light section, 6 cards with quote-style headers.
   Uses existing .tx-pain-card from earlier CSS, only adding section wrap.
   ═══════════════════════════════════════════════════════════════════════ */

.tx-pain-points {
  background: #fdf2f8;
  padding: 96px 0;
}

@media (max-width: 640px) {
  .tx-pain-points {
    padding: 70px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CASE STUDIES PREVIEW — Dark section, 3 case study cards + hub link
   ═══════════════════════════════════════════════════════════════════════ */

.tx-case-preview {
  background: #0a0418;
  padding: 96px 0;
  color: #fff;
}

.tx-case-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ec4899;
  margin-bottom: 12px;
  margin-top: 6px;
}

.tx-case-preview .tx-card {
  background: #110624;
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-case-preview .tx-card:hover {
  background: #150828;
  border-color: rgba(236, 72, 153, 0.32);
}

.tx-case-preview .tx-card h3 {
  font-size: 1.18rem;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -0.018em;
}

.tx-case-preview .tx-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 18px;
}

.tx-case-preview-foot {
  margin-top: 48px;
}

@media (max-width: 640px) {
  .tx-case-preview {
    padding: 70px 0;
  }
}

/* Text-center utility (used on new sections) */
.tx-text-center {
  text-align: center;
}
.tx-section-head.tx-text-center {
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   INDUSTRIES TRUST STRIP — Homepage section right after Hero
   Compact authority signal — "trusted across UK sectors"
   ═══════════════════════════════════════════════════════════════════════ */

.tx-trust-strip {
  background: #0a0418;
  padding: 28px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tx-trust-strip-label {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 18px;
}

.tx-trust-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.tx-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-trust-chip span {
  font-size: 1.05rem;
  line-height: 1;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tx-trust-chip:hover {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.3);
  color: #fff;
}

@media (max-width: 640px) {
  .tx-trust-strip {
    padding: 22px 0 28px;
  }
  .tx-trust-strip-label {
    font-size: 0.72rem;
    margin-bottom: 14px;
  }
  .tx-trust-chip {
    padding: 6px 12px;
    font-size: 0.82rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHY SWITCH (homepage) — Dark section between Pain Points and Numbers
   8 reasons grid + comparison CTA
   ═══════════════════════════════════════════════════════════════════════ */

.tx-why-switch-home {
  background: #0a0418;
  padding: 96px 0;
}

.tx-why-switch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 56px;
}

.tx-why-switch-item {
  padding: 24px 22px;
  background: #110624;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-why-switch-item:hover {
  background: #150828;
  border-color: rgba(236, 72, 153, 0.32);
}

.tx-why-switch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(236, 72, 153, 0.14);
  border-radius: 10px;
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.tx-why-switch-item h3 {
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: #fff;
}

.tx-why-switch-item p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.tx-why-switch-foot {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tx-why-switch-foot p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 16px 0 0;
}

.tx-why-switch-foot a {
  color: #ec4899;
  font-weight: 600;
  text-decoration: none;
}

.tx-why-switch-foot a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .tx-why-switch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tx-why-switch-home {
    padding: 70px 0;
  }
  .tx-why-switch-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tx-why-switch-item {
    padding: 22px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BREATHING ROOM — Tighter section-head spacing on mobile
   Reduces "between kicker/H2 and first row of content" gap from 64px to 40px.
   Cumulative ~240px less scroll across homepage. No desktop change.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .tx-section-head {
    margin-bottom: 40px;
  }
  .tx-section-head p {
    margin-top: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ELITE POLISH PASS — homepage cinematic upgrade
   Five scoped improvements per brief:
     1. Massive typography hierarchy (desktop)
     2. More vertical breathing room (desktop only)
     3. Stronger section-head presence
     4. Story panel typography drama
     5. Hero asymmetric weight emphasis
   Mobile rules from previous polish pass preserved.
   Override-only — no existing rules deleted.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Bigger desktop hero typography — Apple-keynote scale */
@media (min-width: 1024px) {
  .tx-hero-premium h1 {
    font-size: clamp(3.2rem, 6.5vw, 6rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    margin-bottom: 36px;
  }

  .tx-hero-premium-sub {
    font-size: clamp(1.2rem, 1.4vw, 1.45rem);
    line-height: 1.6;
    max-width: 58ch;
    margin-bottom: 44px;
  }

  /* The accent line now breaks cleanly onto its own visual weight */
  .tx-hero-premium h1 .tx-display-accent {
    display: block;
    margin-top: 8px;
    line-height: 0.98;
  }
}

/* 2. More desktop section breathing room */
@media (min-width: 1024px) {
  :root {
    --tx-section-py-desktop: 140px;
  }

  /* Section heads get more space below */
  .tx-section-head {
    margin-bottom: 88px;
  }

  /* Section h2 bigger — more presence */
  .tx-section-head h2 {
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.038em;
    margin-bottom: 20px;
  }

  /* Eyebrow kicker gets more separation from H2 */
  .tx-section-head .tx-kicker {
    margin-bottom: 18px;
    letter-spacing: 0.14em;
  }

  /* Section sub-paragraph gets more breathing room + slight size lift */
  .tx-section-head p {
    font-size: 1.18rem;
    line-height: 1.6;
    max-width: 56ch;
    margin: 18px auto 0;
  }
}

/* 3. Story panel headings — cinematic scale on desktop */
@media (min-width: 1024px) {
  .tx-story-h {
    font-size: clamp(3rem, 5.6vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.038em;
    margin-bottom: 32px;
  }

  .tx-story-panel {
    padding: 130px 0;
  }

  /* Story body copy slightly larger for readability + drama */
  .tx-story-content p {
    font-size: 1.18rem;
    line-height: 1.65;
    max-width: 54ch;
  }

  .tx-story-num {
    font-size: 0.95rem;
    letter-spacing: 0.4em;
    margin-bottom: 32px;
  }
}

/* 4. Tighter hero grid — left-heavy asymmetry */
@media (min-width: 1024px) {
  .tx-hero-premium-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .tx-hero-premium-side {
    padding-top: 24px;
  }

  /* Hero feature card softer + more premium */
  .tx-hero-feature-card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* 5. Stronger contrast rhythm — light sections get more presence */
.tx-section-light {
  /* Slightly warmer light background for more contrast against the dark sections */
  background: #ffffff;
}

@media (min-width: 1024px) {
  /* Light sections get even more vertical breath */
  .tx-section-light {
    padding: 160px 0;
  }

  /* Light section heads slightly tighter colour for premium feel */
  .tx-section-light .tx-section-head h2 {
    color: #0a0418;
  }

  .tx-section-light .tx-section-head p {
    color: #2a1f3e;
    opacity: 0.78;
  }
}

/* 6. Final CTA — bigger heading for closing impact */
@media (min-width: 1024px) {
  .tx-final-cta h2,
  .tx-final-cta h1 {
    font-size: clamp(3rem, 5.8vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
  }

  .tx-final-cta {
    padding: 160px 0;
  }
}

/* 7. Numbers section — bigger statistical figures on desktop */
@media (min-width: 1024px) {
  .tx-numbers-num,
  .tx-number-figure,
  [class*="tx-number"][class*="figure"] {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .tx-numbers {
    padding: 120px 0;
  }
}

/* 8. Body line-height across content for readability */
@media (min-width: 1024px) {
  .tx-card p,
  .tx-intro-glass p {
    line-height: 1.65;
  }

  .tx-intro-glass {
    padding: 56px;
  }

  .tx-intro-glass p {
    font-size: 1.18rem;
  }
}

/* 9. Mobile typography — keep tighter density established earlier,
   but add subtle hierarchy boost for hero specifically */
@media (max-width: 768px) {
  .tx-hero-premium h1 {
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
  }

  .tx-hero-premium-sub {
    font-size: 1.02rem;
    line-height: 1.55;
    margin-bottom: 28px;
  }

  .tx-hero-premium h1 .tx-display-accent {
    display: block;
    margin-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHATSAPP CONSISTENCY + FLOATING BUTTON HIERARCHY  (one clean pass)
   1. Both floating launchers stay bottom-RIGHT with clean separation:
        · AI "Build My Package" pill  → bottom-right (primary CTA)
        · WhatsApp circle             → stacked cleanly ABOVE it, clear gap
   2. Every WhatsApp button across the site uses ONE consistent green
        (official WhatsApp gradient #25D366 → #128C7E, white text)
        so the action is instantly recognisable everywhere.
   Desktop ≥769px for floats; greens apply everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 1. Floating stack (bottom-right) — three elements, never overlapping ----
   Vertical order from the bottom up:
     [AI pill]  bottom 24px        (~48px tall, primary CTA anchor)
     [WhatsApp] bottom 88px        (56px circle, clear gap above pill)
     [preview]  appears ABOVE WhatsApp, pointing down to the stack
   The Mickey preview bubble is repositioned to sit above the WhatsApp
   circle so the green button never covers it. */
@media (min-width: 769px) {
  /* AI launcher — bottom anchor */
  .tx-floating-build {
    right: 24px;
    bottom: 24px;
  }
  /* WhatsApp circle — directly above the AI pill, clear gap */
  .tx-whatsapp-float {
    right: 24px;
    left: auto;
    bottom: 88px;
  }
  /* Hover label opens to the LEFT (button is on the right edge) */
  .tx-whatsapp-float-label {
    right: 68px;
    left: auto;
  }
  .tx-whatsapp-float-label::after {
    right: -5px;
    left: auto;
  }
  .tx-whatsapp-float:hover .tx-whatsapp-float-label {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
  }
  /* Mickey preview bubble — lift it ABOVE the WhatsApp circle so the green
     button never sits on top of it. WhatsApp top edge ≈ 88+56 = 144px;
     place the bubble at 160px for a clean gap, and point it down. */
  .tx-mickey-preview {
    bottom: 160px;
  }
  /* The bubble's little pointer should aim down toward the stack */
  .tx-mickey-preview::after {
    bottom: -7px;
  }
}

/* ---- 2. Consistent WhatsApp green across ALL buttons ---- */

/* Canonical WhatsApp gradient — single source of truth */
:root {
  --tx-wa-green: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  --tx-wa-green-hover: linear-gradient(135deg, #2ee676 0%, #169a8b 100%);
}

/* Mobile sticky bar WhatsApp button — was washed-out light green, now canonical */
.tx-sticky-wa {
  background: var(--tx-wa-green) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Success-screen WhatsApp CTA — align to canonical green */
.tx-success-cta-whatsapp {
  background: var(--tx-wa-green) !important;
  color: #ffffff !important;
}

/* In-page solution WhatsApp CTA (sits on dark glass) — make it solidly green
   so it reads as WhatsApp, not a faded outline. */
.tx-solution-cta-whatsapp {
  background: var(--tx-wa-green) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
.tx-solution-cta-whatsapp:hover {
  background: var(--tx-wa-green-hover) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

/* In-page WhatsApp CTAs marked with [data-wa] that currently use the plain
   outline style — give them the canonical WhatsApp green so the action is
   recognisable everywhere, while the paired "Call" button stays outline
   (creating clear visual distinction between the two contact options). */
a[data-wa].tx-btn-outline,
.tx-btn-outline[data-wa] {
  background: var(--tx-wa-green) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 600;
}
a[data-wa].tx-btn-outline:hover,
.tx-btn-outline[data-wa]:hover {
  background: var(--tx-wa-green-hover) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING STACK — z-index + open-panel behaviour
   · Preview bubble must layer ABOVE the WhatsApp circle (never covered)
   · When the full Mickey chat panel is open, hide the WhatsApp float so it
     doesn't sit on top of the 420px chat panel (and it's redundant mid-chat)
   ═══════════════════════════════════════════════════════════════════════ */

/* Preview bubble sits above WhatsApp in the layer order */
.tx-mickey-preview {
  z-index: 9999;   /* above WhatsApp float (9998) */
}

/* When Mickey chat panel is open, hide the WhatsApp float to avoid overlap.
   JS adds .tx-mickey-open to <body> when chat opens (reliable regardless of
   DOM order). Smooth fade so it doesn't pop. */
.tx-whatsapp-float {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.25s ease;
}
body.tx-mickey-open .tx-whatsapp-float {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8) translateY(10px);
}