/* ============================================
   CTA SECTION DESKTOP REDESIGN V2
   Split Layout with 3D Card Effect - Desktop Only
   Advanced CSS: Grid, Transforms, Clip-path
   ============================================ */

/* Apply redesign ONLY on desktop (769px and above) */
@media (min-width: 769px) {

    .cta-section-modern {
        padding: 70px 40px;
        background: #f9fafb;
        position: relative;
        overflow: hidden;
    }

    /* Geometric background pattern */
    .cta-section-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
            linear-gradient(135deg, #9333ea 0%, #7c3aed 25%, #6d28d9 50%, #5b21b6 75%, #4c1d95 100%);
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        z-index: 0;
    }

    /* Animated grid pattern overlay */
    .cta-section-modern::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0.3;
        z-index: 0;
        animation: grid-scroll 20s linear infinite;
    }

    @keyframes grid-scroll {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(50px, 50px);
        }
    }

    /* Split Layout Container */
    .cta-content {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
        background: white;
        border-radius: 24px;
        padding: 0;
        overflow: hidden;
        box-shadow:
            0 20px 60px rgba(147, 51, 234, 0.2),
            0 10px 30px rgba(0, 0, 0, 0.1);
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    /* Left Side - Text Content */
    .cta-content > * {
        grid-column: 1 / -1;
    }

    .cta-content h2 {
        grid-column: 1 / 2;
        grid-row: 1;
        padding: 50px 50px 20px 50px;
        font-size: 2.75rem;
        font-weight: 900;
        color: #111827;
        margin: 0;
        line-height: 1.2;
        letter-spacing: -1px;
        position: relative;
    }

    /* Gradient accent bar */
    .cta-content h2::before {
        content: '';
        position: absolute;
        left: 50px;
        top: 35px;
        width: 60px;
        height: 5px;
        background: linear-gradient(90deg, #9333ea, #a855f7);
        border-radius: 3px;
    }

    .cta-content p {
        grid-column: 1 / 2;
        grid-row: 2;
        padding: 0 50px;
        font-size: 1.1rem;
        color: #6b7280;
        margin: 0;
        line-height: 1.7;
    }

    /* Buttons on left side */
    .cta-buttons {
        grid-column: 1 / 2;
        grid-row: 3;
        padding: 30px 50px 50px 50px;
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Right Side - Visual Element */
    .cta-content::before {
        content: '';
        grid-column: 2 / 3;
        grid-row: 1 / -1;
        background:
            linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #c084fc 100%);
        position: relative;
        height: 100%;
        display: block;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Decorative circles on right side */
    .cta-content::after {
        content: '';
        grid-column: 2 / 3;
        grid-row: 1 / -1;
        position: relative;
        background-image:
            radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
        pointer-events: none;
    }

    /* Primary Button - 3D Effect */
    .cta-btn-primary {
        padding: 16px 36px;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
        color: white;
        box-shadow:
            0 4px 15px rgba(147, 51, 234, 0.3),
            inset 0 -3px 0 rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: relative;
        border: none;
        transform: translateY(0);
    }

    .cta-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow:
            0 8px 25px rgba(147, 51, 234, 0.4),
            inset 0 -3px 0 rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .cta-btn-primary:active {
        transform: translateY(0);
        box-shadow:
            0 2px 10px rgba(147, 51, 234, 0.3),
            inset 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .cta-btn-primary i {
        transition: transform 0.3s ease;
    }

    .cta-btn-primary:hover i {
        transform: translateX(4px);
    }

    /* Secondary Button - Outlined 3D */
    .cta-btn-secondary {
        padding: 16px 36px;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        background: white;
        color: #9333ea;
        border: 2px solid #9333ea;
        box-shadow:
            0 4px 15px rgba(147, 51, 234, 0.15),
            inset 0 -3px 0 rgba(147, 51, 234, 0.1);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        position: relative;
        transform: translateY(0);
    }

    .cta-btn-secondary:hover {
        background: #f3e8ff;
        transform: translateY(-3px);
        box-shadow:
            0 8px 25px rgba(147, 51, 234, 0.2),
            inset 0 -3px 0 rgba(147, 51, 234, 0.15);
    }

    .cta-btn-secondary:active {
        transform: translateY(0);
        box-shadow:
            0 2px 10px rgba(147, 51, 234, 0.15),
            inset 0 2px 5px rgba(147, 51, 234, 0.1);
    }

    /* Hover effect on entire card */
    .cta-content:hover {
        box-shadow:
            0 25px 70px rgba(147, 51, 234, 0.25),
            0 15px 40px rgba(0, 0, 0, 0.15);
    }
}

/* Large Desktop Optimization (1200px+) */
@media (min-width: 1200px) {
    .cta-content {
        max-width: 1300px;
        gap: 60px;
    }

    .cta-content h2 {
        font-size: 3rem;
        padding: 60px 60px 25px 60px;
    }

    .cta-content h2::before {
        left: 60px;
    }

    .cta-content p {
        font-size: 1.15rem;
        padding: 0 60px;
    }

    .cta-buttons {
        padding: 35px 60px 60px 60px;
        gap: 18px;
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        padding: 18px 40px;
        font-size: 1.05rem;
    }
}

/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .cta-content {
        max-width: 1400px;
    }

    .cta-content h2 {
        font-size: 3.25rem;
    }

    .cta-content p {
        font-size: 1.2rem;
    }
}