/* =========================================
   WHY CHOOSE US - PREMIUM DESIGN
   Theme: Emerald Green + Champagne Gold
========================================= */

.why-section {
    padding: 90px 0;
    background: linear-gradient(135deg, #f4f8f5, #fbfdfb);
}

.why-container {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 65px;
}

/* Left Content */

.why-content {
    opacity: 1;
}

    .why-content .section-tag {
        color: #a77b32;
        letter-spacing: 2px;
        font-weight: 800;
    }

    .why-content h2 {
        margin-top: 10px;
        color: #10231f;
        font-size: clamp(30px, 4vw, 43px);
        line-height: 1.25;
        letter-spacing: -1.25px;
    }

    .why-content > p {
        margin-top: 20px;
        color: #71817b;
        line-height: 1.9;
    }

.why-button {
    display: inline-block;
    margin-top: 28px;
    padding: 14px 27px;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(110deg, #065f46, #10b981);
    box-shadow: 0 10px 24px rgba(4,120,87,.18);
    font-weight: 700;
    transition: transform .3s ease, box-shadow .3s ease;
}

    .why-button:hover {
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 16px 30px rgba(4,120,87,.25);
    }

/* =========================================
   CARDS GRID
========================================= */

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* Premium Cards */

.why-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 30px 27px;
    border: 1px solid #e3ece6;
    border-radius: 21px;
    background: linear-gradient(150deg, #ffffff 0%, #fbfdfb 100%);
    box-shadow: 0 7px 24px rgba(5,46,43,.045);
    transition: transform .38s ease, box-shadow .38s ease, border-color .38s ease;
}

    /* Gold Decorative Circle */

    .why-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 145px;
        height: 145px;
        top: -75px;
        right: -75px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(214,173,96,.20), transparent 70%);
        transition: transform .45s ease;
    }

    /* Bottom Gold-Green Line */

    .why-card::after {
        content: "";
        position: absolute;
        left: 27px;
        right: 27px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(90deg, #047857, #d6ad60);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
    }

    /* Hover Effects */

    .why-card:hover {
        transform: translateY(-9px);
        border-color: rgba(214,173,96,.60);
        box-shadow: 0 22px 50px rgba(5,46,43,.12);
    }

        .why-card:hover::before {
            transform: scale(1.5);
        }

        .why-card:hover::after {
            transform: scaleX(1);
        }

/* Card Number */

.why-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    margin-bottom: 19px;
    border: 1px solid rgba(214,173,96,.30);
    border-radius: 15px;
    color: #075c48;
    background: linear-gradient(145deg, #e4f5eb, #fff1d5);
    font-size: 20px;
    font-weight: 900;
    transition: transform .35s ease;
}

.why-card:hover .why-number {
    transform: rotate(-7deg) scale(1.08);
}

.why-card h3 {
    margin-bottom: 11px;
    color: #10231f;
    font-size: 20px;
}

.why-card p {
    margin: 0;
    color: #71817b;
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================
   CINEMATIC STAGGERED ANIMATION
========================================= */

/* Initial State */

.why-section .why-card {
    opacity: 0;
    visibility: hidden;
    transform: translateY(70px) scale(.88);
    filter: blur(10px);
    will-change: transform, opacity, filter;
}

/* Card 1 - Bottom Reveal */

.why-section.is-visible .why-card:nth-child(1) {
    animation: expertReveal 1.1s cubic-bezier(.16, 1, .3, 1) .2s both;
}

/* Card 2 - Right Side Reveal */

.why-section.is-visible .why-card:nth-child(2) {
    animation: strategyReveal 1.2s cubic-bezier(.16, 1, .3, 1) .75s both;
}

/* Card 3 - Left Side Reveal */

.why-section.is-visible .why-card:nth-child(3) {
    animation: supportReveal 1.2s cubic-bezier(.16, 1, .3, 1) 1.3s both;
}

/* Card 4 - Zoom Reveal */

.why-section.is-visible .why-card:nth-child(4) {
    animation: performanceReveal 1.3s cubic-bezier(.16, 1, .3, 1) 1.85s both;
}

/* Card 1 Animation */

@keyframes expertReveal {
    from {
        opacity: 0;
        visibility: visible;
        transform: translateY(70px) scale(.88);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Card 2 Animation */

@keyframes strategyReveal {
    from {
        opacity: 0;
        visibility: visible;
        transform: translateX(100px) rotateY(-25deg) scale(.9);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) rotateY(0) scale(1);
        filter: blur(0);
    }
}

/* Card 3 Animation */

@keyframes supportReveal {
    from {
        opacity: 0;
        visibility: visible;
        transform: translateX(-100px) rotateY(25deg) scale(.9);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) rotateY(0) scale(1);
        filter: blur(0);
    }
}

/* Card 4 Animation */

@keyframes performanceReveal {
    from {
        opacity: 0;
        visibility: visible;
        transform: scale(.65) translateY(40px);
        filter: blur(15px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .why-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .why-section {
        padding: 62px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .why-card {
        padding: 25px 22px;
    }

    /* Reduce movement on mobile */

    .why-section.is-visible .why-card {
        animation-duration: 850ms;
    }

        .why-section.is-visible .why-card:nth-child(2) {
            animation-name: expertReveal;
        }

        .why-section.is-visible .why-card:nth-child(3) {
            animation-name: expertReveal;
        }

        .why-section.is-visible .why-card:nth-child(4) {
            animation-name: expertReveal;
        }
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .why-section .why-card {
        opacity: 1;
        visibility: visible;
        transform: none;
        filter: none;
        animation: none !important;
        will-change: auto;
    }
}