.cta { padding: 40px var(--pad-x) 48px; }

.cta-card { background: var(--accent); color: var(--surface); border-radius: 22px; padding: 32px 24px; }
.cta-card h2 { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(28px, 8vw, 38px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: balance; }
.cta-card p { font-size: clamp(14px, 1.5vw, 15px); margin: 0 0 22px; }
.cta-kicker { display: inline-block; font-family: var(--font-display); font-style: italic; font-size: 15px; margin-bottom: 10px; }

.contact-actions { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 4px; }
.contact-btn { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 16px; transition: transform 0.12s; }
.contact-btn:active { transform: translateY(1px); }
.contact-btn.wa { background: var(--surface); color: var(--accent); }
.contact-btn.call { background: transparent; color: var(--surface); border: 1.5px solid rgb(255 252 247 / 45%); }
.contact-btn .cb-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.contact-btn .cb-text b { font-size: 15.5px; font-weight: 600; }
.contact-btn .cb-text small { font-size: 12px; margin-top: 2px; }
.contact-btn.wa .cb-text small { color: var(--ink-mute); }
.contact-btn.call .cb-text small { opacity: 0.7; }
.contact-btn .cb-arrow { font-size: 18px; opacity: 0.55; }
.contact-btn .cb-ico { font-size: 19px; width: 10px; text-align: center; flex: 0 0 auto; }
.contact-btn .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; position: relative; }
.contact-btn .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0.4; animation: pulse 1.9s ease-out infinite; }

@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
.contact-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: var(--focus-offset); }

/* ─── Tablet+ (≥ 600px) ─────────────────────────────────────────── */
@media (width >= 600px) {
  .cta { padding: 56px var(--pad-x) 64px; }
  .cta-card { padding: 44px 40px; max-width: 640px; margin: 0 auto; }
  .cta-card h2 { font-size: clamp(30px, 5vw, 42px); }
  .cta-card p { font-size: clamp(15px, 1.6vw, 16px); }
  .contact-actions { flex-direction: row; }
  .contact-btn { flex: 1; }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────────── */
@media (width >= 1024px) {
  .cta { padding: 72px var(--pad-x) 80px; }
  .cta-card { padding: 52px 56px; max-width: 800px; margin: 0 auto; }
}

/* ─── Hover ──────────────────────────────────────────────────────── */
@media (hover: hover) {
  .contact-btn:hover { transform: translateY(-2px); }
  .contact-btn.wa:hover { box-shadow: var(--shadow-md); }
}