/**
 * Pro 7xFlow — shared gel / glass candy accents
 * Thick rounded 3D figures, translucent neon, high-gloss highlights.
 * Customer surfaces (WA + landing) bias vivid cyan / magenta / neon green.
 */
:root {
  --gel-green: #39ff8a;
  --gel-cyan: #00f0ff;
  --gel-purple: #b44cff;
  --gel-pink: #ff2bd6;
  --gel-red: #ff2d55;
  --gel-blue: #2ecbff;
  --gel-orange: #ff8a3d;

  --gel-green-deep: #0a8f4a;
  --gel-cyan-deep: #0090a8;
  --gel-purple-deep: #5b1aad;
  --gel-pink-deep: #a0126e;
  --gel-red-deep: #b01030;
  --gel-blue-deep: #0a6f9e;
  --gel-orange-deep: #b04a12;

  --gel-green-glow: rgba(57, 255, 138, .55);
  --gel-cyan-glow: rgba(0, 240, 255, .5);
  --gel-purple-glow: rgba(180, 76, 255, .45);
  --gel-pink-glow: rgba(255, 43, 214, .5);
  --gel-red-glow: rgba(255, 45, 85, .42);
  --gel-blue-glow: rgba(46, 203, 255, .48);
  --gel-orange-glow: rgba(255, 138, 61, .42);

  --gel-accent: var(--gel-green);
  --gel-accent-deep: var(--gel-green-deep);
  --gel-accent-glow: var(--gel-green-glow);
  --gel-ink-on: #06280f;
  --gel-backdrop: #05070d;
}

/* ── Shared candy material ─────────────────────────────────────── */
.gel-cta,
.gel-num,
.gel-chip,
.gel-orb {
  --_gel: var(--gel-accent);
  --_gel-deep: var(--gel-accent-deep);
  --_gel-glow: var(--gel-accent-glow);
  position: relative;
  isolation: isolate;
}

.gel-green,
.gel-accent-green { --gel-accent: var(--gel-green); --gel-accent-deep: var(--gel-green-deep); --gel-accent-glow: var(--gel-green-glow); --gel-ink-on: #06280f; }
.gel-cyan,
.gel-accent-cyan { --gel-accent: var(--gel-cyan); --gel-accent-deep: var(--gel-cyan-deep); --gel-accent-glow: var(--gel-cyan-glow); --gel-ink-on: #042028; }
.gel-purple,
.gel-accent-purple { --gel-accent: var(--gel-purple); --gel-accent-deep: var(--gel-purple-deep); --gel-accent-glow: var(--gel-purple-glow); --gel-ink-on: #1a0630; }
.gel-pink,
.gel-accent-pink { --gel-accent: var(--gel-pink); --gel-accent-deep: var(--gel-pink-deep); --gel-accent-glow: var(--gel-pink-glow); --gel-ink-on: #2a0620; }
.gel-red,
.gel-accent-red { --gel-accent: var(--gel-red); --gel-accent-deep: var(--gel-red-deep); --gel-accent-glow: var(--gel-red-glow); --gel-ink-on: #2a060e; }
.gel-blue,
.gel-accent-blue { --gel-accent: var(--gel-blue); --gel-accent-deep: var(--gel-blue-deep); --gel-accent-glow: var(--gel-blue-glow); --gel-ink-on: #061428; }
.gel-orange,
.gel-accent-orange { --gel-accent: var(--gel-orange); --gel-accent-deep: var(--gel-orange-deep); --gel-accent-glow: var(--gel-orange-glow); --gel-ink-on: #2a1206; }

/* Primary CTA — glossy neon pill */
.gel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.35rem;
  font: inherit;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--gel-ink-on);
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 38%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--_gel) 92%, #fff) 0%, var(--_gel) 42%, var(--_gel-deep) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .65),
    inset 0 -3px 8px color-mix(in srgb, var(--_gel-deep) 55%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    0 0 0 1px color-mix(in srgb, var(--_gel) 35%, transparent),
    0 8px 22px color-mix(in srgb, var(--_gel-glow) 70%, transparent),
    0 0 28px var(--_gel-glow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  transition: filter .18s ease, transform .18s ease, box-shadow .22s ease;
}
.gel-cta:hover {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .7),
    inset 0 -3px 8px color-mix(in srgb, var(--_gel-deep) 50%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .32),
    0 0 0 1px color-mix(in srgb, var(--_gel) 45%, transparent),
    0 10px 28px color-mix(in srgb, var(--_gel-glow) 80%, transparent),
    0 0 36px var(--_gel-glow);
}
.gel-cta:active { transform: translateY(0); filter: brightness(.98); }
.gel-cta:disabled,
.gel-cta[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Step / Cycle index — thick candy numeral */
.gel-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 .35rem;
  border-radius: .55rem;
  font-family: Syne, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: -.03em;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .1) 36%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--_gel) 88%, #fff), var(--_gel-deep));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -2px 5px color-mix(in srgb, var(--_gel-deep) 60%, transparent),
    0 0 14px var(--_gel-glow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Status / tone chip — translucent gel pill */
.gel-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--_gel-deep) 70%, #111);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 40%, transparent 55%),
    color-mix(in srgb, var(--_gel) 22%, #fff);
  border: 1px solid color-mix(in srgb, var(--_gel) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 0 12px color-mix(in srgb, var(--_gel-glow) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Decorative orb — empty / hero accents */
.gel-orb {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  vertical-align: middle;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .15) 28%, transparent 45%),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--_gel-deep) 70%, #000) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--_gel) 90%, #fff), var(--_gel-deep));
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .55),
    inset 0 -4px 10px color-mix(in srgb, var(--_gel-deep) 50%, transparent),
    0 0 22px var(--_gel-glow);
  animation: gel-orb-pulse 2.8s ease-in-out infinite;
}
.gel-orb--sm { width: 1.15rem; height: 1.15rem; }
.gel-orb--lg { width: 3.4rem; height: 3.4rem; }
.gel-orb--float {
  position: absolute;
  z-index: 0;
  opacity: .85;
}

@keyframes gel-orb-pulse {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .55), inset 0 -4px 10px color-mix(in srgb, var(--_gel-deep) 50%, transparent), 0 0 18px var(--_gel-glow); }
  50% { filter: brightness(1.08); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -4px 10px color-mix(in srgb, var(--_gel-deep) 45%, transparent), 0 0 32px var(--_gel-glow); }
}

/* ── Layer onto existing app surfaces (no markup required) ─────── */
.cycle-cta,
button.primary:not(.ghost):not(.gel-plain),
a.primary:not(.ghost):not(.gel-plain),
.path-list button.primary,
.path-list a.btn.primary {
  --_gel: var(--gel-accent, var(--gel-orange));
  --_gel-deep: var(--gel-accent-deep, var(--gel-orange-deep));
  --_gel-glow: var(--gel-accent-glow, var(--gel-orange-glow));
  color: var(--gel-ink-on, #2a1206) !important;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 38%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--_gel) 92%, #fff) 0%, var(--_gel) 42%, var(--_gel-deep) 100%) !important;
  border: 0 !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .65),
    inset 0 -3px 8px color-mix(in srgb, var(--_gel-deep) 55%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    0 0 0 1px color-mix(in srgb, var(--_gel) 35%, transparent),
    0 8px 22px color-mix(in srgb, var(--_gel-glow) 65%, transparent),
    0 0 26px var(--_gel-glow) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
}

/* Rotate accent by section / page region */
.cycle-phase:nth-of-type(6n+1) .cycle-cta,
.focus-sell .cycle-cta,
section#activacion .cycle-cta { --gel-accent: var(--gel-green); --gel-accent-deep: var(--gel-green-deep); --gel-accent-glow: var(--gel-green-glow); --gel-ink-on: #06280f; }
.cycle-phase:nth-of-type(6n+2) .cycle-cta,
#siguiente-paso .cycle-cta { --gel-accent: var(--gel-purple); --gel-accent-deep: var(--gel-purple-deep); --gel-accent-glow: var(--gel-purple-glow); --gel-ink-on: #1a0630; }
.cycle-phase:nth-of-type(6n+3) .cycle-cta { --gel-accent: var(--gel-pink); --gel-accent-deep: var(--gel-pink-deep); --gel-accent-glow: var(--gel-pink-glow); --gel-ink-on: #2a0620; }
.cycle-phase:nth-of-type(6n+4) .cycle-cta { --gel-accent: var(--gel-blue); --gel-accent-deep: var(--gel-blue-deep); --gel-accent-glow: var(--gel-blue-glow); --gel-ink-on: #061428; }
.cycle-phase:nth-of-type(6n+5) .cycle-cta { --gel-accent: var(--gel-orange); --gel-accent-deep: var(--gel-orange-deep); --gel-accent-glow: var(--gel-orange-glow); --gel-ink-on: #2a1206; }
.cycle-phase:nth-of-type(6n+6) .cycle-cta { --gel-accent: var(--gel-red); --gel-accent-deep: var(--gel-red-deep); --gel-accent-glow: var(--gel-red-glow); --gel-ink-on: #2a060e; }

/* Animar / Drama / Campañas / Retención primary actions */
.layout-2 .primary,
.msg-buttons-section .primary,
.page-top + .card .primary,
.compose button.primary,
.section button.primary {
  --gel-accent: var(--gel-pink);
  --gel-accent-deep: var(--gel-pink-deep);
  --gel-accent-glow: var(--gel-pink-glow);
  --gel-ink-on: #2a0620;
}
.drama-form .primary,
#drama-create-btn {
  --gel-accent: var(--gel-purple);
  --gel-accent-deep: var(--gel-purple-deep);
  --gel-accent-glow: var(--gel-purple-glow);
  --gel-ink-on: #1a0630;
}
#animate-send-wa-btn,
button[name="action"][value="send_wa"] {
  --gel-accent: var(--gel-green);
  --gel-accent-deep: var(--gel-green-deep);
  --gel-accent-glow: var(--gel-green-glow);
  --gel-ink-on: #06280f;
}

/* Cycle / step indices */
.flow-mini .n {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  border-radius: .5rem;
  color: #fff !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, transparent 48%),
    linear-gradient(180deg, var(--gel-blue), var(--gel-blue-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 0 12px var(--gel-blue-glow);
  font-size: .72rem !important;
}
.flow-mini li:nth-child(2) .n {
  background: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, transparent 48%), linear-gradient(180deg, var(--gel-purple), var(--gel-purple-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 0 12px var(--gel-purple-glow);
}
.flow-mini li:nth-child(3) .n {
  background: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, transparent 48%), linear-gradient(180deg, var(--gel-pink), var(--gel-pink-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 0 12px var(--gel-pink-glow);
}
.flow-mini li:nth-child(4) .n {
  background: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, transparent 48%), linear-gradient(180deg, var(--gel-orange), var(--gel-orange-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 0 12px var(--gel-orange-glow);
}
.flow-mini li:nth-child(5) .n {
  background: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, transparent 48%), linear-gradient(180deg, var(--gel-green), var(--gel-green-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 0 12px var(--gel-green-glow);
}
.flow-mini li:nth-child(6) .n,
.flow-mini li:nth-child(7) .n {
  background: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, transparent 48%), linear-gradient(180deg, var(--gel-red), var(--gel-red-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 0 12px var(--gel-red-glow);
}

/* Badges / tone chips */
.badge,
.ops-chip,
.pro-check li,
.flow-status,
.ttv-badge,
.tone-chip,
[data-tone-suggest],
[data-opener-suggest] {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--gel-purple) 28%, var(--line, #e6e9ef)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 10px color-mix(in srgb, var(--gel-purple-glow) 35%, transparent);
}
.game-pill {
  border: 1px solid color-mix(in srgb, var(--gel-accent, var(--gel-purple)) 35%, var(--line, #e6e9ef));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, transparent 48%),
    color-mix(in srgb, var(--gel-accent, var(--gel-purple)) 14%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 14px color-mix(in srgb, var(--gel-accent-glow, var(--gel-purple-glow)) 45%, transparent);
}
.game-pill.gel-pink { --gel-accent: var(--gel-pink); --gel-accent-glow: var(--gel-pink-glow); }
.game-pill.gel-purple { --gel-accent: var(--gel-purple); --gel-accent-glow: var(--gel-purple-glow); }
.badge.live,
.ops-chip.good,
.pro-check li.done,
.ttv-badge.won,
.flow-status.ready {
  border-color: color-mix(in srgb, var(--gel-green) 55%, transparent) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, transparent 50%),
    color-mix(in srgb, var(--gel-green) 18%, #fff) !important;
  color: #047857 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 14px var(--gel-green-glow);
}
.ops-chip.hot,
.badge.warn,
.ttv-badge.overdue {
  border-color: color-mix(in srgb, var(--gel-orange) 55%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 12px var(--gel-orange-glow);
}
.pro-active .pro-badge i {
  background: var(--gel-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gel-green) 25%, transparent), 0 0 14px var(--gel-green-glow) !important;
}

/* Empty-state soft glow backdrop */
.preview-box .empty,
.empty-state,
p.empty {
  position: relative;
}
.preview-box .empty::before,
.empty-state::before {
  content: "";
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  top: .55rem;
  right: .65rem;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0%, transparent 42%),
    linear-gradient(160deg, var(--gel-pink), var(--gel-purple-deep));
  box-shadow: 0 0 18px var(--gel-pink-glow);
  opacity: .9;
  pointer-events: none;
  animation: gel-orb-pulse 2.8s ease-in-out infinite;
}

/* ── WhatsApp sell surfaces (chrome only — bubbles stay WA-real) ─ */
/* Do NOT restyle .wa-bubble fill/colors — keep WhatsApp accuracy. */
.wa-phone__toolbar {
  border-color: color-mix(in srgb, var(--gel-green) 35%, #d1d7db) !important;
  box-shadow:
    0 2px 8px rgba(15, 40, 28, .06),
    0 0 16px color-mix(in srgb, var(--gel-green-glow) 40%, transparent) !important;
}
.wa-phone__tool,
.wa-device .wa-phone__tool,
.lead-flow-band .wa-phone__tool {
  border: 1px solid color-mix(in srgb, var(--gel-green) 40%, #d1d7db) !important;
  color: #06280f !important;
  font-weight: 800 !important;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .12) 40%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--gel-green) 75%, #fff), var(--gel-green-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 0 12px color-mix(in srgb, var(--gel-green-glow) 55%, transparent) !important;
}
.wa-phone__tool[data-wa-music],
.wa-device .wa-phone__tool[data-wa-music] {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .7) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--gel-purple) 80%, #fff), var(--gel-purple-deep)) !important;
  border-color: color-mix(in srgb, var(--gel-purple) 45%, #d1d7db) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 12px var(--gel-purple-glow) !important;
  color: #1a0630 !important;
}
.wa-phone__tool[data-wa-auto],
.wa-device .wa-phone__tool[data-wa-auto] {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .7) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--gel-blue) 80%, #fff), var(--gel-blue-deep)) !important;
  border-color: color-mix(in srgb, var(--gel-blue) 45%, #d1d7db) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 12px var(--gel-blue-glow) !important;
  color: #061428 !important;
}
.wa-phone__tool[data-wa-reset],
.wa-device .wa-phone__tool[data-wa-reset] {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .7) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--gel-orange) 80%, #fff), var(--gel-orange-deep)) !important;
  border-color: color-mix(in srgb, var(--gel-orange) 45%, #d1d7db) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 12px var(--gel-orange-glow) !important;
  color: #2a1206 !important;
}
.wa-phone__tool.is-on,
.wa-device .wa-phone__tool.is-on,
.wa-phone__tool[aria-pressed="true"] {
  filter: brightness(1.08) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 0 18px var(--gel-green-glow) !important;
}

/* Chapter pills — gel chip, not bubble chrome */
.wa-chapter,
.wa-device .wa-chapter,
.lead-flow-band .wa-chapter {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 .35rem !important;
  padding: .18rem .5rem !important;
  border-radius: 999px !important;
  letter-spacing: .08em !important;
  color: #1a0630 !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .7) 0%, transparent 50%),
    color-mix(in srgb, var(--gel-purple) 28%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--gel-purple) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 10px var(--gel-purple-glow);
}

/* Outbound product CTA chips inside preview (bubble body stays WA) */
.wa-reply-btn.is-cta {
  font-weight: 800 !important;
  color: #061428 !important;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, transparent 48%),
    color-mix(in srgb, var(--gel-blue) 16%, #fff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.wa-reply-btn.is-primary {
  color: #06280f !important;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, transparent 48%),
    color-mix(in srgb, var(--gel-green) 18%, #fff) !important;
}

/* Phone shell subtle neon rim (outside chat thread) */
.wa-device__shell {
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 28px color-mix(in srgb, var(--gel-green-glow) 35%, transparent) !important;
}

/* Marketplace / storefront hooks */
.btn-wa,
.mkt-hub .btn-wa {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, transparent 45%),
    linear-gradient(180deg, var(--gel-green), var(--gel-green-deep)) !important;
  color: #06280f !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .55),
    0 0 22px var(--gel-green-glow) !important;
  border-radius: 999px !important;
}
.row .buy,
.sf-buy,
a.buy {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .5) 0%, transparent 48%),
    linear-gradient(180deg, var(--gel-green), var(--gel-green-deep)) !important;
  color: #06280f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 16px var(--gel-green-glow);
}

/* Landing light touches */
.hero-ctas a.primary,
.explainer-end-cta a.primary,
.why-ctas .primary,
.agents-landing-cta,
.hub-cta,
.lead-flow-band__cta {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .55) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--gel-orange) 90%, #fff), var(--gel-orange-deep)) !important;
  color: #2a1206 !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .6),
    0 8px 24px var(--gel-orange-glow),
    0 0 28px color-mix(in srgb, var(--gel-orange-glow) 70%, transparent) !important;
  border: 0 !important;
}

/* Login dark surface */
body .box button[type="submit"],
.login-box button {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .45) 0%, transparent 45%),
    linear-gradient(180deg, var(--gel-pink), var(--gel-pink-deep)) !important;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), 0 0 24px var(--gel-pink-glow) !important;
  color: #fff !important;
}

/* Dark theme (7xFlow marketplace) */
html[data-theme="dark"] .gel-chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .ops-chip,
html[data-theme="dark"] .pro-check li {
  color: #eef2ff;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .18) 0%, transparent 50%),
    color-mix(in srgb, var(--_gel, var(--gel-purple)) 22%, #12171f) !important;
}
html[data-theme="dark"] .gel-cta,
html[data-theme="dark"] .cycle-cta,
html[data-theme="dark"] button.primary:not(.ghost),
html[data-theme="dark"] a.primary:not(.ghost) {
  color: var(--gel-ink-on) !important;
}

/* Reduced motion — kill glow pulse */
@media (prefers-reduced-motion: reduce) {
  .gel-orb,
  .preview-box .empty::before,
  .empty-state::before,
  .btn-wa {
    animation: none !important;
  }
  .gel-cta:hover,
  .cycle-cta:hover,
  button.primary:hover,
  a.primary:hover {
    transform: none;
  }
}