/* Success Stories / Case Studies */
.success-stories-section {
    position: relative;
    overflow: hidden;
    padding: 72px 0 76px;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.82) 40%, transparent 72%),
        linear-gradient(135deg, #f4f8ff 0%, #ffffff 46%, #f5f8ff 100%);
}

.success-stories-container { position: relative; z-index: 1; max-width: 1280px; }

.stories-dot-field,
.stories-arc { position: absolute; display: block; pointer-events: none; }

.stories-dot-field {
    width: 285px;
    height: 285px;
    opacity: 0.45;
    background-image: radial-gradient(circle, rgba(58, 122, 244, 0.45) 0 2px, transparent 2.8px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 72%);
}

.stories-dot-field-top { top: -60px; left: -70px; }
.stories-dot-field-bottom { right: -70px; bottom: -62px; }

.stories-arc {
    width: 282px;
    height: 282px;
    border: 1px solid rgba(76, 135, 244, 0.18);
    border-radius: 50%;
}

.stories-arc::before,
.stories-arc::after { position: absolute; content: ""; border: 1px solid rgba(76, 135, 244, 0.14); border-radius: 50%; }
.stories-arc::before { inset: 20px; }
.stories-arc::after { inset: 40px; }
.stories-arc-top { top: -205px; right: -80px; }
.stories-arc-bottom { bottom: -222px; left: -90px; }

.success-stories-header { margin-bottom: 58px; }

.stories-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 25px;
    border-radius: 999px;
    color: #1268ed;
    background: rgba(232, 241, 255, 0.76);
    box-shadow: inset 0 0 0 1px rgba(84, 145, 247, 0.12);
    font-size: 14px;
    font-weight: 700;
}

.stories-badge i { font-size: 18px; }

.success-stories-header h2 {
    margin: 20px 0 13px;
    color: #09183b;
    font-size: clamp(33px, 3.3vw, 48px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -1.3px;
}

.success-stories-header h2 span { color: #1768ed; }

.success-stories-header p {
    margin: 0;
    color: #5a6f98;
    font-size: 16px;
    line-height: 1.5;
}

.stories-header-divider,
.story-card-divider { display: block; height: 3px; border-radius: 999px; background: #1268ed; }

.stories-header-divider { position: relative; width: 82px; margin: 19px auto 0; }
.stories-header-divider::after { position: absolute; top: 50%; right: -14px; width: 6px; height: 6px; content: ""; border-radius: 50%; background: #1268ed; transform: translateY(-50%); }

.success-stories-grid { row-gap: 30px; }

.success-story-card {
    position: relative;
    min-height: 488px;
    overflow: hidden;
    border: 1px solid rgba(80, 137, 239, 0.17);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 30px rgba(30, 79, 158, 0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.success-story-card:hover {
    background: linear-gradient(145deg, #3157e6 0%, #126ce8 58%, #11a4dc 100%);
    box-shadow: 0 22px 42px rgba(29, 86, 190, 0.25);
    transform: translateY(-6px);
}

.story-visual {
    position: relative;
    height: 210px;
    margin: 24px 24px 0;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(135deg, #244f87, #8dc4ff);
}

.story-visual::before {
    position: absolute;
    inset: 18px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 10px;
    transform: perspective(300px) rotateX(3deg) rotateY(-7deg);
}

.story-visual::after {
    position: absolute;
    right: 17px;
    bottom: 20px;
    width: 115px;
    height: 66px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05));
    box-shadow: -16px -20px 0 -7px rgba(255, 255, 255, 0.18);
}

.story-visual-grid { position: absolute; inset: 0; opacity: 0.52; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 30px 30px; }
.story-visual > i { position: absolute; top: 50%; left: 50%; z-index: 1; color: rgba(255,255,255,.92); font-size: 53px; text-shadow: 0 7px 16px rgba(0,0,0,.22); transform: translate(-50%, -50%); }
.story-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.story-visual-commerce { background: linear-gradient(145deg, #163e68, #5797cf 52%, #c8e4ff); }
.story-visual-commerce::before,
.story-visual-commerce::after,
.story-visual-commerce .story-visual-grid { display: none; }
.story-visual-fintech::before,
.story-visual-fintech::after,
.story-visual-fintech .story-visual-grid { display: none; }
.story-visual-fintech { background: linear-gradient(145deg, #0a4eaf, #087cd7 57%, #19a6e0); }
.story-visual-saas::before,
.story-visual-saas::after,
.story-visual-saas .story-visual-grid { display: none; }
.story-visual-saas { background: linear-gradient(145deg, #263c81, #6e9cf1 56%, #deedff); }
.story-visual-healthcare::before,
.story-visual-healthcare::after,
.story-visual-healthcare .story-visual-grid { display: none; }
.story-visual-healthcare { background: linear-gradient(145deg, #1476a4, #43b7ca 57%, #d9f9fc); }
.story-visual-real-estate { background: linear-gradient(145deg, #214574, #6b9ce0 55%, #e1efff); }
.story-visual-real-estate::before,
.story-visual-real-estate::after,
.story-visual-real-estate .story-visual-grid { display: none; }
.story-visual-services { background: linear-gradient(145deg, #324ca2, #426ddd 58%, #a9d7ff); }
.story-visual-services::before,
.story-visual-services::after,
.story-visual-services .story-visual-grid { display: none; }

.story-industry-icon {
    position: absolute;
    top: 188px;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(67, 129, 244, 0.22);
    border-radius: 50%;
    color: #1268ed;
    background: #f7faff;
    box-shadow: 0 7px 15px rgba(31, 91, 195, 0.15);
    font-size: 27px;
    transform: translateX(-50%);
    transition: background 0.3s ease, color 0.3s ease;
}

.story-card-content { padding: 47px 34px 30px; text-align: left; }
.story-industry { display: block; color: #1268ed; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.story-card-content h3 { min-height: 56px; margin: 7px 0 9px; color: #09183b; font-size: 25px; font-weight: 700; line-height: 1.15; transition: color 0.3s ease; }
.story-card-divider { width: 44px; margin-bottom: 17px; }
.story-result-metric { display: flex; align-items: center; gap: 17px; min-height: 55px; margin: 0 0 24px; }
.story-result-metric strong { color: #1268ed; font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -1px; transition: color 0.3s ease; }
.story-result-metric span { color: #60739a; font-size: 14px; line-height: 1.35; transition: color 0.3s ease; }
.story-link { color: #0b1b42; font-size: 15px; font-weight: 700; transition: color 0.3s ease; }
.story-link i { margin-left: 8px; color: #1268ed; transition: color 0.3s ease, transform 0.3s ease; }
.story-link:hover { color: inherit; }

.success-story-card:hover .story-industry-icon { color: #1268ed; background: #ffffff; }
.success-story-card:hover .story-industry,
.success-story-card:hover .story-card-content h3,
.success-story-card:hover .story-result-metric strong,
.success-story-card:hover .story-result-metric span,
.success-story-card:hover .story-link,
.success-story-card:hover .story-link i { color: #ffffff; }
.success-story-card:hover .story-card-divider { background: rgba(255,255,255,.8); }
.success-story-card:hover .story-link i { transform: translate(3px, -3px); }

.success-stories-action { margin-top: 34px; }
.stories-view-all { display: inline-flex; align-items: center; gap: 26px; min-height: 58px; padding: 0 29px; border-radius: 9px; color: #ffffff; background: linear-gradient(135deg, #284fec, #1268ed); box-shadow: 0 12px 22px rgba(26, 95, 227, 0.25); font-size: 16px; font-weight: 700; }
.stories-view-all:hover { color: #ffffff; background: linear-gradient(135deg, #173cdb, #0b57d3); transform: translateY(-2px); }

@media (max-width: 991px) {
    .success-stories-section { padding: 66px 0 70px; }
    .success-stories-header { margin-bottom: 55px; }
    .success-stories-grid { row-gap: 56px; }
    .success-story-card { max-width: 430px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .success-stories-section { padding: 54px 0 62px; }
    .success-stories-header h2 { font-size: 31px; letter-spacing: -.8px; }
    .success-stories-header p { font-size: 14px; }
    .stories-badge { min-height: 40px; padding: 0 18px; font-size: 12px; }
    .story-visual { height: 184px; margin: 20px 20px 0; }
    .story-industry-icon { top: 166px; }
    .story-card-content { padding: 45px 26px 27px; }
    .story-card-content h3 { font-size: 23px; }
    .stories-dot-field { opacity: .28; }
}