/* Primary CTAs — high contrast on charcoal (white / soft white gradient) */
:root {
  --cta-bg: #f4f4f4;
  --cta-bg-grad: linear-gradient(165deg, #ffffff 0%, #e8e8e8 48%, #cfcfcf 100%);
  --cta-fg: #0b0b0c;
  --cta-hover: #ffffff;
  --cta-border: rgba(255, 255, 255, 0.55);
}

[data-cta$="-phone"]:not(.cta-press-depth):not(.footer-glass-pill),
a[data-cta="hero-phone"],
a[data-cta="process-phone"]:not(.cta-press-depth),
a[data-cta="contact-phone"]:not(.cta-press-depth),
a[data-cta="video-end-phone"]:not(.cta-press-depth),
a[data-cta="ask-ai-phone"] {
  background: var(--cta-bg-grad);
  color: var(--cta-fg);
  border: 1px solid var(--cta-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-cta$="-phone"]:not(.cta-press-depth):not(.footer-glass-pill):hover,
a[data-cta="hero-phone"]:hover,
a[data-cta="process-phone"]:not(.cta-press-depth):hover,
a[data-cta="contact-phone"]:not(.cta-press-depth):hover,
a[data-cta="video-end-phone"]:not(.cta-press-depth):hover,
a[data-cta="ask-ai-phone"]:hover {
  background: var(--cta-hover);
  color: var(--cta-fg);
  border-color: #fff;
}

/* Secondary TG / messengers / Ask AI — see cta-3d-button.css (21st 3d-button)
   Do not flatten here. */

/* Footer CTAs use motion-footer glass pills — do not flatten here */