/* ==========================================
   ULTRAKIT CALL TO ACTION — Premium
   4 Layouts × 6 Skins × Dual Buttons
   ========================================== */

.ultrakit-cta-wrapper { --ultrakit-cta-accent: #6c5ce7; width: 100%; }

.ultrakit-cta-inner {
    position: relative;
    background: var(--ultrakit-cta-accent);
    border-radius: 20px;
    padding: 60px 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ultrakit-cta-content { position: relative; z-index: 2; text-align: center; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.ultrakit-cta-eyebrow {
    display: inline-block; background: rgba(255,255,255,0.2); color: #ffffff;
    padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.ultrakit-cta-heading { font-size: 34px; font-weight: 800; color: #ffffff; margin: 4px 0 0; line-height: 1.25; }
.ultrakit-cta-subheading { font-size: 16px; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.65; }

.ultrakit-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ultrakit-cta-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 32px; border-radius: 10px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: all 0.25s ease;
}
.ultrakit-cta-btn-primary { background: #ffffff; color: var(--ultrakit-cta-accent) !important; }
.ultrakit-cta-btn-primary:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.ultrakit-cta-btn-secondary { background: transparent; color: #ffffff !important; border: 1.5px solid rgba(255,255,255,0.5); }
.ultrakit-cta-btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* ---- Decorative shapes ---- */
.ultrakit-cta-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.1); z-index: 1; pointer-events: none; }
.ultrakit-cta-shape-1 { width: 220px; height: 220px; top: -80px; right: -60px; }
.ultrakit-cta-shape-2 { width: 140px; height: 140px; bottom: -60px; left: -30px; }

/* ---- Layout: Split ---- */
.ultrakit-cta-layout-split .ultrakit-cta-inner { flex-direction: row; text-align: left; padding: 0; }
.ultrakit-cta-layout-split .ultrakit-cta-media { width: 42%; flex-shrink: 0; align-self: stretch; }
.ultrakit-cta-layout-split .ultrakit-cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.ultrakit-cta-layout-split .ultrakit-cta-content { text-align: left; align-items: flex-start; padding: 50px; max-width: none; flex: 1; }

/* ---- Layout: Boxed Floating Card ---- */
.ultrakit-cta-layout-boxed .ultrakit-cta-inner { box-shadow: 0 30px 70px -20px rgba(0,0,0,0.35); max-width: 720px; margin: 0 auto; }

/* ---- Layout: Full-Width Banner ---- */
.ultrakit-cta-layout-banner .ultrakit-cta-inner { border-radius: 0; position: relative; min-height: 260px; }
.ultrakit-cta-layout-banner .ultrakit-cta-media { position: absolute; inset: 0; z-index: 0; }
.ultrakit-cta-layout-banner .ultrakit-cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }

/* ---- Skins ---- */
.cta-skin-2 .ultrakit-cta-inner { background: linear-gradient(135deg, var(--ultrakit-cta-accent) 0%, #a29bfe 100%); }

.cta-skin-3 .ultrakit-cta-inner { background: #1a1a2e; }
.cta-skin-3 .ultrakit-cta-btn-primary { background: var(--ultrakit-cta-accent); color: #ffffff !important; }

.cta-skin-4 .ultrakit-cta-inner {
    background: rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.25);
}

.cta-skin-5 .ultrakit-cta-inner { background: #ffffff; border: 2px solid var(--ultrakit-cta-accent); box-shadow: none; }
.cta-skin-5 .ultrakit-cta-heading { color: #1a1a2e; }
.cta-skin-5 .ultrakit-cta-subheading { color: #666666; }
.cta-skin-5 .ultrakit-cta-eyebrow { background: rgba(108,92,231,0.1); color: var(--ultrakit-cta-accent) !important; }
.cta-skin-5 .ultrakit-cta-btn-primary { background: var(--ultrakit-cta-accent); color: #ffffff !important; }
.cta-skin-5 .ultrakit-cta-btn-secondary { color: var(--ultrakit-cta-accent) !important; border-color: var(--ultrakit-cta-accent); }
.cta-skin-5 .ultrakit-cta-shape { background: rgba(108,92,231,0.06); }

.cta-skin-6 .ultrakit-cta-inner { background: #1a1a2e; min-height: 320px; }
.cta-skin-6 .ultrakit-cta-media { position: absolute; inset: 0; z-index: 0; }
.cta-skin-6 .ultrakit-cta-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.cta-skin-6 .ultrakit-cta-content { position: relative; z-index: 2; }

@media (max-width: 768px) {
    .ultrakit-cta-inner { padding: 40px 26px; }
    .ultrakit-cta-heading { font-size: 24px; }
    .ultrakit-cta-layout-split .ultrakit-cta-inner { flex-direction: column; }
    .ultrakit-cta-layout-split .ultrakit-cta-media { width: 100%; }
    .ultrakit-cta-layout-split .ultrakit-cta-media img { min-height: 180px; }
    .ultrakit-cta-layout-split .ultrakit-cta-content { padding: 30px; }
}