/* =================================================================
   Cases Hero — module-scoped styles
   White background, typography-first (consistent with Blog & Contacts)
   ================================================================= */

.casesHero {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(40px, calc(60px - (var(--linearInterpolation500x1200) * 0.2)), 60px);
}

/* --- Content wrapper --- */

.casesHero__inner {
    position: relative;
    z-index: 1;
    animation: casesHeroFadeIn 0.6s ease both;
}

/* --- Card (no background — clean white) --- */

.casesHero__card {
    padding: 0;
}

/* --- Badge pill (light style) --- */

.casesHero__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 8px 18px;
    font-family: Lexend;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(75, 125, 225, 1);
    background: rgba(75, 125, 225, 0.06);
    border: 1px solid rgba(75, 125, 225, 0.15);
    border-radius: 50px;
}

/* --- Breadcrumb --- */

.casesHero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-family: Lexend;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: rgba(138, 141, 152, 1);
}

.casesHero__breadcrumb a {
    color: rgba(100, 103, 115, 1);
    text-decoration: none;
    transition: color 0.2s ease;
}

.casesHero__breadcrumb a:hover {
    color: rgba(75, 125, 225, 1);
}

/* --- Title --- */

.casesHero__title {
    font-family: Space_Grotesk;
    font-weight: 700;
    --fontsizeMin: 52;
    --fontsizeMax: 80;
    font-size: clamp(var(--fontsizeMin) * 1px, var(--fontsizeMax) * 1px - (var(--linearInterpolation500x1200) * ((var(--fontsizeMax) - var(--fontsizeMin)) / 100)), var(--fontsizeMax) * 1px);
    line-height: 100%;
    letter-spacing: -0.02em;
    color: rgba(11, 31, 51, 1);
}

/* --- Subtitle --- */

.casesHero__subtitle {
    margin-top: 16px;
    font-family: Lexend;
    font-weight: 300;
    --fontsizeMin: 18;
    --fontsizeMax: 22;
    font-size: clamp(var(--fontsizeMin) * 1px, var(--fontsizeMax) * 1px - (var(--linearInterpolation500x1200) * ((var(--fontsizeMax) - var(--fontsizeMin)) / 100)), var(--fontsizeMax) * 1px);
    line-height: 150%;
    color: rgba(100, 103, 115, 1);
    max-width: 560px;
}

/* --- Intro paragraph --- */

.casesHero__intro {
    margin-top: 16px;
    font-family: Lexend;
    font-weight: 300;
    font-size: 16px;
    line-height: 165%;
    color: rgba(100, 103, 115, 1);
    max-width: 640px;
}

.casesHero__intro a {
    color: rgba(75, 125, 225, 1);
    text-decoration: none;
    border-bottom: 1px solid rgba(75, 125, 225, 0.2);
    transition: border-color 0.2s ease;
}

.casesHero__intro a:hover {
    border-color: rgba(75, 125, 225, 0.6);
}

/* --- Stats row --- */

.casesHero__stats {
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    margin: 32px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid rgba(238, 240, 244, 1);
}

.casesHero__stat {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

.casesHero__statValue {
    font-family: Space_Grotesk;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(11, 31, 51, 1);
}

.casesHero__statLabel {
    font-family: Lexend;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: rgba(138, 141, 152, 1);
}

/* --- Responsive: stack stats on small screens --- */

@media (max-width: 500px) {
    .casesHero__stats {
        flex-wrap: wrap;
        gap: 20px 32px;
    }
}

/* --- Entrance animation --- */

@keyframes casesHeroFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .casesHero__inner {
        animation: none;
    }
}