/* ==========================================================
   CASES
========================================================== */

.cases{
    position:relative;
    padding:160px 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(189,146,79,.09), transparent 34%),
        radial-gradient(circle at 12% 70%, rgba(189,146,79,.045), transparent 28%),
        var(--color-surface);
}

.cases::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1px;
    height:130px;
    background:linear-gradient(
        to bottom,
        rgba(189,146,79,.42),
        transparent
    );
    transform:translateX(-50%);
    pointer-events:none;
}

.cases-header{
    max-width:850px;
    margin:0 auto 76px;
    text-align:center;
}

.cases-title{
    margin:28px auto 24px;
    max-width:850px;
    font-size:clamp(2.45rem, 4vw, 5rem);
    line-height:.98;
    letter-spacing:-.06em;
    color:var(--color-text);
}

.cases-description{
    max-width:640px;
    margin:0 auto;
    font-size:1.08rem;
    line-height:1.8;
    color:var(--color-text-secondary);
}


/* ==========================================================
   PANEL
========================================================== */

.cases-panel{
    position:relative;
    padding:24px;
    border-radius:38px;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 42px 90px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(16px);
}

.cases-panel::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(189,146,79,.16), transparent 70%);
    pointer-events:none;
}

.cases-panel::after{
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    top:82px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );
    pointer-events:none;
}


/* ==========================================================
   PANEL HEADER
========================================================== */

.cases-panel-header{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:6px 8px 26px;
}

.cases-panel-header span,
.cases-panel-header small{
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.cases-panel-header span{
    color:var(--color-primary);
}

.cases-panel-header small{
    color:var(--color-text-secondary);
}


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

.cases-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:24px;
}


/* ==========================================================
   MAIN CASE
========================================================== */

.case-main{
    position:relative;
    min-height:560px;
    padding:44px;
    border-radius:30px;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(189,146,79,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.case-main::before{
    content:"+187%";
    position:absolute;
    right:-28px;
    bottom:-30px;
    font-size:clamp(7rem, 15vw, 16rem);
    line-height:.8;
    font-weight:800;
    letter-spacing:-.09em;
    color:rgba(255,255,255,.045);
    pointer-events:none;
}

.case-main::after{
    content:"";
    position:absolute;
    left:44px;
    right:44px;
    bottom:42px;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(189,146,79,.45),
        transparent
    );
    opacity:.55;
    pointer-events:none;
}

.case-main-label{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    margin-bottom:56px;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--color-primary);
    background:rgba(189,146,79,.09);
    border:1px solid rgba(189,146,79,.22);
}

.case-main h3{
    position:relative;
    z-index:2;
    max-width:650px;
    font-size:clamp(2rem, 3vw, 3.8rem);
    line-height:1;
    letter-spacing:-.055em;
    color:var(--color-text);
}

.case-main-number{
    position:relative;
    z-index:2;
    margin-top:70px;
    font-size:clamp(6rem,10vw,9rem);
    line-height:.82;
    font-weight:800;
    letter-spacing:-.08em;
    color:var(--color-primary);
}

.case-main p{
    position:relative;
    z-index:2;
    margin-top:18px;
    max-width:420px;
    font-size:1.05rem;
    line-height:1.8;
    color:var(--color-text-secondary);
}


/* ==========================================================
   METRICS
========================================================== */

.case-metrics{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.case-metrics article{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:268px;
    padding:30px;
    overflow:hidden;
    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);

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

.case-metrics article:hover{

    transform:translateY(-6px);

    border-color:rgba(189,146,79,.28);

    box-shadow:
        0 18px 45px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);

}

.case-metrics article::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-90px;
    bottom:-90px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(189,146,79,.18),
            transparent 70%);

    opacity:0;

    transition:.35s ease;

}

.case-metrics article:hover::before{

    opacity:1;

}

.case-metrics article span{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:50%;

    font-size:.72rem;
    font-weight:700;

    letter-spacing:.12em;

    color:var(--color-primary);

    background:rgba(189,146,79,.10);

    border:1px solid rgba(189,146,79,.24);

}

.case-metrics article strong{

    position:relative;
    z-index:2;

    margin-top:auto;

    font-size:clamp(2.3rem,4vw,4.2rem);

    line-height:.9;

    letter-spacing:-.06em;

    color:var(--color-text);

}

.case-metrics article p{

    position:relative;
    z-index:2;

    margin-top:14px;

    max-width:180px;

    font-size:.96rem;

    line-height:1.65;

    color:var(--color-text-secondary);

}


/* ==========================================================
   QUOTE
========================================================== */

.cases-quote{

    position:relative;

    margin-top:26px;

    padding:46px;

    border-radius:30px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.018)
        );

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

}

.cases-quote::before{

    content:"“";

    position:absolute;

    left:38px;
    top:18px;

    font-size:7rem;

    line-height:1;

    color:rgba(189,146,79,.16);

}

.cases-quote p{

    max-width:760px;

    font-size:1.35rem;

    line-height:1.8;

    letter-spacing:-.01em;

    color:var(--color-text);

}

.cases-quote span{

    display:inline-block;

    margin-top:28px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--color-text-secondary);

}


/* ==========================================================
   MICRO INTERACTIONS
========================================================== */

.case-main,
.case-metrics article,
.cases-quote{

    backdrop-filter:blur(14px);

}

.case-main{

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

}

.case-main:hover{

    transform:translateY(-8px);

    border-color:rgba(189,146,79,.25);

    box-shadow:
        0 25px 60px rgba(0,0,0,.22);

}

.case-main:hover .case-main-number{

    transform:scale(1.03);

}

.case-main-number{

    transition:transform .35s ease;

}

.case-metrics article strong{

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

}

.case-metrics article:hover strong{

    transform:translateY(-3px);

    color:var(--color-primary);

}


/* ==========================================================
   DECORATIVE DETAILS
========================================================== */

.cases-panel{

    isolation:isolate;

}

.cases-panel>*{

    position:relative;

    z-index:2;

}

.case-main::selection,
.case-metrics article::selection{

    background:rgba(189,146,79,.25);

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.case-main,
.case-metrics article{

    will-change:transform;

}

.case-main,
.case-metrics article,
.cases-quote{

    backface-visibility:hidden;

}