/* CTA 01 — Pulse Banner */
.cta-pulse-banner { position: relative; background: var(--grad-deep); border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; overflow: hidden; }
.cta-pulse-banner::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(37, 99, 235, .18); top: -60px; right: 120px; filter: blur(40px); pointer-events: none; }
.cta-pulse-banner::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 126, 85, .14); bottom: -40px; right: 60px; filter: blur(30px); pointer-events: none; }
.cta-pulse-banner .pb-live { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 8px; }
.cta-pulse-banner .pb-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7; animation: pulse-dot 2s ease-in-out infinite; }
.cta-pulse-banner h4 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: -.01em; }
.cta-pulse-banner p { font-size: 13px; color: var(--light-text); margin: 0; }
.cta-pulse-banner .pb-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

/* CTA 02 — Metric Punch */
.cta-metric-punch { border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: #fff; box-shadow: var(--shadow-sm); }
@media(max-width:640px) {
    .cta-metric-punch { grid-template-columns: 1fr; }
}

.cta-metric-punch .mp-numbers { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 16px; }
.cta-metric-punch .mp-stat .num { font-size: 28px; font-weight: 900; color: var(--accent); display: block; line-height: 1; letter-spacing: -.02em; }
.cta-metric-punch .mp-stat .lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.cta-metric-punch .mp-copy h4 { font-size: 17px; font-weight: 800; color: var(--primary); margin-bottom: 5px; letter-spacing: -.01em; }
.cta-metric-punch .mp-copy p { font-size: 13px; color: var(--p-color); margin: 0; }
.cta-metric-punch .mp-right { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
@media(max-width:640px) {
    .cta-metric-punch .mp-right { align-items: flex-start; }
}

.cta-metric-punch .mp-trust { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* CTA 03 — Spotlight Card */
.cta-spotlight-card { position: relative; background: var(--bg-light-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 52px 40px; text-align: center; overflow: hidden; }
.cta-spotlight-card::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .07) 0%, transparent 70%); top: -80px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.cta-spotlight-card .sc-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(37, 99, 235, .08); color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(37, 99, 235, .15); margin-bottom: 20px; position: relative; }
.cta-spotlight-card h3 { font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: var(--primary); letter-spacing: -.02em; max-width: 500px; margin: 0 auto 12px; position: relative; }
.cta-spotlight-card h3 em { font-style: normal; color: var(--accent); position: relative; }
.cta-spotlight-card h3 em::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); opacity: .3; border-radius: 2px; }
.cta-spotlight-card p { color: var(--p-color); font-size: 15px; max-width: 460px; margin: 0 auto 28px; position: relative; }
.cta-spotlight-card .sc-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-spotlight-card .sc-footer { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cta-spotlight-card .sc-footer .tick { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* CTA 04 — Switch Strip */
.cta-switch-strip { background: var(--primary); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 1fr auto; }
@media(max-width:620px) {
    .cta-switch-strip { grid-template-columns: 1fr; }
}

.cta-switch-strip .ss-left { padding: 28px 30px; position: relative; }
.cta-switch-strip .ss-left::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .08); }
.cta-switch-strip .ss-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 126, 85, .15); color: var(--secondary); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; }
.cta-switch-strip h4 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -.01em; }
.cta-switch-strip p { font-size: 13px; color: var(--light-text); margin: 0; }
.cta-switch-strip .ss-right { background: rgba(37, 99, 235, .12); padding: 28px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 200px; }
.cta-switch-strip .ss-right .migrate-text { font-size: 11px; color: rgba(255, 255, 255, .5); font-weight: 600; text-align: center; }

/* CTA 05 — Value Grid */
.cta-value-grid { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.cta-value-grid .vg-top { background: var(--grad); padding: 36px 36px 32px; text-align: center; position: relative; overflow: hidden; }
.cta-value-grid .vg-top::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, .015) 10px, rgba(255, 255, 255, .015) 20px); }
.cta-value-grid .vg-top h3 { font-size: clamp(18px, 3vw, 23px); font-weight: 900; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; position: relative; }
.cta-value-grid .vg-top p { color: rgba(255, 255, 255, .8); font-size: 14px; max-width: 420px; margin: 0 auto; position: relative; }
.cta-value-grid .vg-features { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--border); border-top: none; }
@media(max-width:580px) {
    .cta-value-grid .vg-features { grid-template-columns: 1fr; }
}

.cta-value-grid .vg-feature { padding: 24px 20px; border-right: 1px solid var(--border); }
.cta-value-grid .vg-feature:last-child { border-right: none; }
.cta-value-grid .vg-feature .icon-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cta-value-grid .vg-feature strong { display: block; font-size: 14px; font-weight: 800; color: var(--primary); margin-bottom: 5px; }
.cta-value-grid .vg-feature span { font-size: 12px; color: var(--p-color); line-height: 1.5; }
.cta-value-grid .vg-bottom { background: var(--bg-light-1); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-value-grid .vg-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-value-grid .trust-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* CTA 06 — Orange Ignite */
.cta-orange-ignite { position: relative; background: linear-gradient(135deg, #fff4ef 0%, #fff8f4 100%); border: 1.5px solid rgba(255, 126, 85, .22); border-radius: var(--r-lg); padding: 32px; overflow: hidden; }
.cta-orange-ignite::before { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 126, 85, .12); top: -60px; right: -40px; filter: blur(30px); }
.cta-orange-ignite .oi-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; position: relative; }
.cta-orange-ignite .oi-icon-wrap { width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 126, 85, .12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid rgba(255, 126, 85, .2); }
.cta-orange-ignite .oi-icon-wrap svg { width: 30px; height: 30px; color: var(--secondary); }
.cta-orange-ignite .oi-copy { flex: 1; min-width: 200px; }
.cta-orange-ignite .oi-copy .oi-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); margin-bottom: 8px; }
.cta-orange-ignite .oi-copy h4 { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 6px; letter-spacing: -.01em; }
.cta-orange-ignite .oi-copy p { font-size: 13px; color: var(--p-color); margin: 0; }
.cta-orange-ignite .oi-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: flex-start; }
.cta-orange-ignite .oi-actions .no-cc { font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: center; width: 100%; }

/* CTA 07 — Minimal Nudge */
.cta-minimal-nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: rgba(37, 99, 235, .04); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cta-minimal-nudge .mn-text { font-size: 14px; font-weight: 600; color: var(--primary); flex: 1; }
.cta-minimal-nudge .mn-text span { color: var(--accent); }

/* CTA 08 — Deep End */
.cta-deep-end { position: relative; background: var(--grad-deep); border-radius: var(--r-xl); padding: 56px 40px; text-align: center; overflow: hidden; }
.cta-deep-end::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .2) 0%, transparent 70%); top: -100px; left: -80px; pointer-events: none; }
.cta-deep-end::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 126, 85, .12) 0%, transparent 70%); bottom: -80px; right: -40px; pointer-events: none; }
.cta-deep-end .de-kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 6px 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 20px; position: relative; }
.cta-deep-end h3 { font-size: clamp(22px, 4vw, 32px); font-weight: 900; color: #fff; letter-spacing: -.025em; max-width: 520px; margin: 0 auto 14px; position: relative; line-height: 1.2; }
.cta-deep-end h3 span { color: var(--secondary); }
.cta-deep-end p { color: rgba(255, 255, 255, .65); font-size: 15px; max-width: 440px; margin: 0 auto 32px; position: relative; }
.cta-deep-end .de-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-deep-end .de-trust { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; position: relative; }
.cta-deep-end .t-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .4); font-weight: 600; }

/* CTA 09 — Slash Compare */
.cta-slash-compare { border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); }
.cta-slash-compare .sc-header { background: var(--bg-light-1); padding: 16px 28px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.cta-slash-compare .sc-grid { display: grid; grid-template-columns: 1fr auto 1fr; background: #fff; }
@media(max-width:580px) {
    .cta-slash-compare .sc-grid { grid-template-columns: 1fr; }
    .cta-slash-compare .sc-divider { display: none; }
}

.cta-slash-compare .sc-col { padding: 28px 24px; }
.cta-slash-compare .sc-col.sc-us { background: rgba(37, 99, 235, .03); }
.cta-slash-compare .sc-divider { display: flex; align-items: center; justify-content: center; padding: 20px 8px; background: #fff; }
.cta-slash-compare .vs-pill { width: 36px; height: 36px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--text-muted); }
.cta-slash-compare .col-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.sc-them .col-label { color: var(--text-muted); }
.sc-us .col-label { color: var(--accent); }
.cta-slash-compare .sc-list { list-style: none; padding: 0; margin: 0; }
.cta-slash-compare .sc-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 5px 0; font-weight: 500; }
.sc-them .sc-list li { color: var(--text-muted); }
.sc-us .sc-list li { color: var(--primary); }
.cta-slash-compare .sc-footer { background: var(--primary); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-slash-compare .sc-footer p { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .8); margin: 0; }
.cta-slash-compare .sc-footer p strong { color: #fff; }

/* CTA 10 — Booking Widget */
.cta-booking-widget { border: 1.5px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.cta-booking-widget .bw-header { background: var(--grad-cyan); padding: 28px 32px; display: flex; align-items: center; gap: 16px; }
.cta-booking-widget .bw-header .bw-icon { width: 52px; height: 52px; background: rgba(255, 255, 255, .15); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .2); }
.cta-booking-widget .bw-header h4 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: -.01em; }
.cta-booking-widget .bw-header p { font-size: 13px; color: rgba(255, 255, 255, .8); margin: 0; }
.cta-booking-widget .bw-slots { background: #fff; padding: 24px 32px; border-bottom: 1px solid var(--border); }
.cta-booking-widget .bw-slots .slot-label { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.cta-booking-widget .bw-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cta-booking-widget .bw-pill { padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; transition: all .2s; background: #fff; }
.cta-booking-widget .bw-pill:hover,
.cta-booking-widget .bw-pill.active { border-color: var(--accent); background: rgba(37, 99, 235, .05); color: var(--accent); }
.cta-booking-widget .bw-pill.active { font-weight: 700; }
.cta-booking-widget .bw-bottom { background: var(--bg-light-1); padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-booking-widget .bw-note { font-size: 13px; color: var(--p-color); font-weight: 600; }
.cta-booking-widget .bw-note strong { color: var(--primary); }
/* Calendly inline overlay */
.calendly-overlay-active { pointer-events: none; }

/* CTA 11 — Trust Ribbon */
.cta-trust-ribbon { background: var(--bg-light-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-trust-ribbon .tr-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-trust-ribbon .tr-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--primary); }
.cta-trust-ribbon .tr-badge .badge-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(37, 99, 235, .08); display: flex; align-items: center; justify-content: center; }
.cta-trust-ribbon .tr-badge .badge-icon svg { width: 14px; height: 14px; color: var(--accent); }
.cta-trust-ribbon .tr-divider { width: 1px; height: 20px; background: var(--border); }