/* ==========================================================
   WHY SCANSKRIT
   PART 1
   Section • Layout • Typography
========================================================== */

.why-section{

    background:#F6F8F7;

    padding:110px 24px;

    overflow:hidden;

}

.why-container{

    max-width:1200px;

    margin:0 auto;

}

.why-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.why-label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:#DDF3E5;

    color:#2E9B57;

    font-family:'Inter',sans-serif;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.why-title{

    margin:24px 0;

    font-family:'Inter',sans-serif;

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-0.04em;

    color:#1D2433;

}

.why-description{

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:1.08rem;

    line-height:1.9;

    color:#7D879C;

}

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

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:36px;

}

/* ==========================================================
   FOOTER LINE
========================================================== */

.why-footer{

    margin-top:70px;

    text-align:center;

}

.why-footer p{

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:1.25rem;

    font-weight:500;

    color:#7D879C;

}

.why-footer span{

    color:#2E9B57;

    font-weight:700;

}

/* ==========================================================
   WHY SCANSKRIT
   PART 2
   Premium Cards
========================================================== */

.why-card{

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(10px);

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:360px;

    padding:38px;

    background:#FFFFFF;

    border:1px solid rgba(46,155,87,.08);

    border-radius:28px;

    box-shadow:
        0 12px 32px rgba(29,36,51,.05),
        0 2px 8px rgba(29,36,51,.03);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    cursor:default;

}

/* ==========================================================
   ICON
========================================================== */

.why-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#DDF3E5;

    color:#2E9B57;

    margin-bottom:28px;

    flex-shrink:0;

    transition:
        transform .35s ease,
        background .35s ease;

}

.why-icon svg{

    width:30px;

    height:30px;

    stroke:currentColor;

}

/* ==========================================================
   DIVIDER
========================================================== */

.why-divider{

    width:56px;

    height:2px;

    background:#2E9B57;

    border-radius:999px;

    margin-bottom:26px;

    opacity:.18;

    transition:opacity .35s ease;

}

/* ==========================================================
   CARD TITLE
========================================================== */

.why-card-title{

    margin:0 0 18px;

    font-family:'Inter',sans-serif;

    letter-spacing:-0.02em;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.3;

    color:#1D2433;

}

/* ==========================================================
   CARD DESCRIPTION
========================================================== */

.why-card-description{

    margin:0;

    font-family:'Inter',sans-serif;

    font-size:1rem;

    line-height:1.75;

    color:#7D879C;

    max-width:95%;

}

/* ==========================================================
   EQUAL HEIGHT SUPPORT
========================================================== */

.why-card-description{

    flex-grow:1;

}


/* ==========================================================
   WHY SCANSKRIT
   PART 3
   Premium Hover Effects
========================================================== */

.why-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:180px;

    height:180px;

    background:radial-gradient(circle,
        rgba(46,155,87,.08) 0%,
        rgba(46,155,87,0) 72%);

    opacity:0;

    transition:opacity .45s ease;

    pointer-events:none;

}

.why-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.4);

    pointer-events:none;

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:rgba(46,155,87,.28);

    box-shadow:

        0 40px 80px rgba(29,36,51,.12),

        0 12px 28px rgba(46,155,87,.10);

}

.why-card:hover::before{

    opacity:1;

}

.why-card:hover .why-icon{

    transform:scale(1.08);

    background:#2E9B57;

    color:#FFFFFF;

}

.why-card:hover .why-divider{

    width:84px;

    opacity:.8;

}

.why-card:hover .why-card-title{

    color:#2E9B57;

}

.why-card:hover .why-card-description{

    color:#5D6778;

}

/* ==========================================================
   Smooth Typography
========================================================== */

.why-card-title,
.why-card-description,
.why-divider{

    transition:all .35s ease;

}

/* ==========================================================
   Better Text Rendering
========================================================== */

.why-title,
.why-card-title,
.why-description,
.why-card-description{

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   WHY SCANSKRIT
   PART 4
   Responsive
========================================================== */

/* Tablet */

@media (max-width:991px){

    .why-section{

        padding:90px 20px;

    }

    .why-grid{

        gap:24px;

    }

    .why-card{

        padding:32px;

        min-height:330px;

    }

}


/* Mobile */

@media (max-width:768px){

    .why-section{

        padding:70px 18px;

    }

    .why-header{

        margin-bottom:48px;

    }

    .why-title{

        font-size:2.35rem;

        line-height:1.15;

    }

    .why-description{

        font-size:1rem;

        line-height:1.8;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .why-card{

        min-height:auto;

        padding:28px;

    }

    .why-icon{

        width:64px;

        height:64px;

    }

    .why-icon svg{

        width:26px;

        height:26px;

    }

    .why-card-title{

        font-size:1.25rem;

    }

    .why-footer{

        margin-top:50px;

    }

    .why-footer p{

        font-size:1.05rem;

    }

}


/* Small Phones */

@media (max-width:480px){

    .why-section{

        padding:60px 16px;

    }

    .why-title{

        font-size:2rem;

    }

    .why-label{

        font-size:.72rem;

    }

    .why-card{

        border-radius:24px;

        padding:24px;

    }

}


/* ==========================================================
   CARD 1 STORY VISUAL
========================================================== */

.why-card-visual{

    position:relative;

    width:100%;

    height:230px;

    overflow:hidden;

    border-radius:22px;

    margin-bottom:28px;

    background:linear-gradient(180deg,#F9FBFA 0%,#EEF6F1 100%);

}

.why-card-visual::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:220px;

    height:220px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(46,155,87,.14) 0%,
        rgba(46,155,87,.06) 40%,
        rgba(46,155,87,0) 72%);

    pointer-events:none;

}

/* ==========================================================
   PRODUCT IMAGE
========================================================== */



/* ===========================================
   Card 1 STORY IMAGE
=========================================== */

.why-card-visual{

    width:100%;

    height:230px;

    overflow:hidden;

    border-radius:22px;

    margin-bottom:28px;

    background:#EEF6F1;

}

.why-story-image{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    object-fit:contain;

    padding:14px;

    transition:

        transform .45s ease,

        filter .45s ease;

}

.why-card:hover .why-story-image{

    transform:

    translateY(-6px)

    scale(1.03);

    filter:

    drop-shadow(0 20px 35px rgba(46,155,87,.18));

}

/* ==========================================================
   Scroll Reveal
========================================================== */

.why-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.why-visible{

    opacity:1;

    transform:translateY(0);

}

/* Stagger Animation */

.why-card:nth-child(1){

    transition-delay:.05s;

}

.why-card:nth-child(2){

    transition-delay:.15s;

}

.why-card:nth-child(3){

    transition-delay:.25s;

}

.why-card:nth-child(4){

    transition-delay:.35s;

}

.why-card{

    will-change:transform;

}

.why-story-image{

    will-change:transform;

}

/* Card 1 */
.why-card:nth-child(1) .why-story-image{
    transform:scale(1.02);
}

/* Card 2 */
.why-card:nth-child(2) .why-story-image{
    transform:translateY(4px) scale(.98);
}

/* Card 3 */
.why-card:nth-child(3) .why-story-image{
    transform:scale(.92);
}

/* Card 4 */
.why-card:nth-child(4) .why-story-image{
    transform:scale(.96);
}

.why-card:hover:nth-child(1) .why-story-image{
    transform:translateY(-6px) scale(1.05);
}

.why-card:hover:nth-child(2) .why-story-image{
    transform:translateY(-4px) scale(1.01);
}

.why-card:hover:nth-child(3) .why-story-image{
    transform:translateY(-6px) scale(.95);
}

.why-card:hover:nth-child(4) .why-story-image{
    transform:translateY(-6px) scale(.99);
}