/* ==========================================================================
   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 {
  background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 45%, #d946ef 70%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  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); }
.tx-btn-whatsapp {
  color: #052e16;
  background: var(--tx-grad-btn-whatsapp);
  box-shadow: 0 22px 60px rgba(34, 197, 94, 0.25);
}
.tx-btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 28px 80px rgba(34, 197, 94, 0.35); }
.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);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  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));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  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:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 22rem),
    linear-gradient(135deg, rgba(236, 72, 153, 0.44), rgba(139, 92, 246, 0.34), rgba(255, 255, 255, 0.08));
  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;
  background: linear-gradient(135deg, #ec4899 0%, #c084fc 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.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 */
.tx-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
  padding: 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-lg);
  box-shadow: var(--tx-shadow-lg);
}
.tx-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.tx-hero-stat-num {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: var(--tx-fw-ultra);
  line-height: 1;
  letter-spacing: var(--tx-ls-tighter);
  background: linear-gradient(135deg, #fff 0%, #f5d0fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 6px;
}
.tx-hero-stat-label {
  font-size: var(--tx-text-sm);
  color: var(--tx-muted);
  letter-spacing: var(--tx-ls-wide);
  font-weight: 600;
}
@media (max-width: 540px) {
  .tx-hero-stats { padding: 18px; gap: 14px; }
  .tx-hero-stat-num { font-size: 1.6rem; }
  .tx-hero-stat-label { font-size: 0.78rem; }
}

/* 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;
  background: linear-gradient(135deg, #ec4899, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  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; }
}