.service-showcase { padding: 64px 30px 80px; background: #f3faff; }
.showcase-container { max-width: 1320px; margin-inline: auto; }
.showcase-intro { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.showcase-eyebrow { color: #158bd3; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.showcase-intro h2 { margin-top: 10px; color: #112c5b; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.45; }
.showcase-intro > p { margin-top: 14px; color: #52647a; font-size: 16px; line-height: 1.9; }
.showcase-cards { display: flex; gap: 20px; }
.showcase-card { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; height: 520px; overflow: hidden; border-radius: 24px; background: linear-gradient(#158bd3, #ddf3ff); transition: flex-grow 650ms cubic-bezier(.22, 1, .36, 1); }
.showcase-card.is-active { flex-grow: 2.1; }
.showcase-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 750ms cubic-bezier(.22, 1, .36, 1); }
.showcase-card.is-active .showcase-image { transform: scale(1.025); }
.showcase-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(7 18 35 / 32%), transparent 45%, rgb(7 18 35 / 12%)); }
.showcase-trigger { position: absolute; inset: 0; z-index: 2; width: 100%; cursor: pointer; border: 0; background: transparent; border-radius: inherit; }
.showcase-trigger:focus-visible { outline: 3px solid #7ed4fa; outline-offset: -5px; }
.showcase-copy { position: relative; z-index: 3; pointer-events: none; margin: 16px; padding: 16px; border-radius: 14px; color: #fff; transition: background-color 350ms ease, color 350ms ease; }
.showcase-copy h3 { font-size: 22px; line-height: 1.55; font-weight: 700; }
.showcase-subtitle { margin-top: 6px; font-size: 13px; line-height: 1.8; }
.showcase-description { margin-top: 8px; font-size: 13px; line-height: 1.8; opacity: 0; visibility: hidden; transition: opacity 250ms ease; }
.showcase-card.is-active .showcase-copy { background: rgb(239 249 255 / 90%); color: #112c5b; }
.showcase-card.is-active .showcase-description { opacity: 1; visibility: visible; transition-delay: 120ms; }
.showcase-link { position: absolute; z-index: 4; bottom: 22px; inset-inline-start: 50%; translate: -50% 0; display: flex; align-items: center; justify-content: center; gap: 0; height: 54px; min-width: 54px; padding-inline: 17px; border-radius: 27px; background: linear-gradient(135deg, #18afe7, #1c5fba); color: #fff; box-shadow: 0 8px 24px rgb(17 44 91 / 18%); transition: border-radius 350ms ease, gap 350ms ease, filter 200ms ease; }
[dir="rtl"] .showcase-link { translate: 50% 0; }
.showcase-link span { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 700; transition: max-width 400ms ease, opacity 250ms ease; }
.showcase-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.showcase-card.is-active .showcase-link { border-radius: 14px; gap: 12px; }
.showcase-card.is-active .showcase-link span { max-width: 160px; opacity: 1; }
.showcase-link:hover { filter: brightness(1.12); }
.showcase-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.dark .service-showcase { background: #09182a; }
.dark .showcase-intro h2 { color: #eff9ff; }
.dark .showcase-intro > p { color: #b5c8dd; }
.dark .showcase-eyebrow { color: #7ed4fa; }
@media (min-width: 768px) and (max-width: 1100px) {
    .showcase-cards { gap: 12px; }
    .showcase-card { height: 480px; }
    .showcase-copy { margin: 10px; padding: 12px; }
    .showcase-copy h3 { font-size: 18px; }
    .showcase-card.is-active .showcase-image { top: 90px; height: calc(100% - 90px); }
}
@media (max-width: 767px) {
    .service-showcase { padding: 48px 20px; }
    .showcase-intro { margin-bottom: 28px; }
    .showcase-cards { flex-direction: column; gap: 14px; }
    .showcase-card { flex: none; height: 190px; transition: height 600ms cubic-bezier(.22, 1, .36, 1); }
    .showcase-card.is-active { flex: none; height: 480px; }
    .showcase-image { object-position: center 36%; }
    .showcase-card.is-active .showcase-image { top: 70px; height: calc(100% - 70px); object-position: center top; }
    .showcase-copy { margin: 12px; padding: 14px; }
    .showcase-copy h3 { font-size: 21px; }
    .showcase-card:not(.is-active) .showcase-copy { padding-inline-end: 50px; }
    .showcase-link { bottom: 16px; }
    .showcase-card:not(.is-active) .showcase-link { inset-inline-start: auto; inset-inline-end: 16px; translate: none; height: 44px; min-width: 44px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-card, .showcase-image, .showcase-copy, .showcase-description, .showcase-link, .showcase-link span { transition: none; }
}