.ebss-showcase {
    --ebss-bg: #F5F7FD;
    --ebss-card: #FFFFFF;
    --ebss-text: #111A4B;
    --ebss-muted: #6A7390;
    --ebss-blue: #3255F7;
    --ebss-yellow: #F4D44E;
    --ebss-badge: #EAF0FF;
    --ebss-radius: 26px;
    --ebss-gap: 24px;
    --ebss-spv: 3;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% -2%, rgba(50,85,247,.08), transparent 24%),
        radial-gradient(circle at -5% 72%, rgba(50,85,247,.10), transparent 25%),
        linear-gradient(180deg, #f7f8fd 0%, var(--ebss-bg) 100%);
    color: var(--ebss-text);
    border-radius: 32px;
    box-sizing: border-box;
}
.ebss-showcase * { box-sizing: border-box; }
.ebss-bg-circle,
.ebss-bg-dots {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.ebss-bg-circle {
    border-radius: 50%;
    border: 24px solid rgba(73,103,255,.08);
}
.ebss-bg-circle-top {
    width: 260px;
    height: 260px;
    top: -120px;
    right: -70px;
}
.ebss-bg-circle-left {
    width: 340px;
    height: 340px;
    bottom: -180px;
    left: -140px;
}
.ebss-bg-dots {
    width: 180px;
    height: 130px;
    right: 42px;
    top: 255px;
    background-image: radial-gradient(rgba(50,85,247,.18) 2px, transparent 2px);
    background-size: 32px 32px;
}
.ebss-heading-row,
.ebss-slider-wrap,
.ebss-dots,
.ebss-swipe-hint { position: relative; z-index: 2; }
.ebss-heading-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 28px;
    margin-bottom: 24px;
}
.ebss-heading { max-width: 1080px; }
.ebss-eyebrow {
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--ebss-blue);
    text-transform:uppercase;
    font-size:13px;
    font-weight:800;
    letter-spacing:.24em;
    margin-bottom: 18px;
}
.ebss-eyebrow i {
    width:60px;
    height:4px;
    border-radius:99px;
    background:var(--ebss-yellow);
    display:block;
}
.ebss-heading h2 {
    margin:0;
    color:var(--ebss-text);
    font-size:clamp(34px,4.2vw,72px);
    line-height: 1.02;
    letter-spacing:-.04em;
    font-weight: 900;
    max-width: 1180px;
}
.ebss-heading p {
    margin:18px 0 0;
    color:var(--ebss-muted);
    font-size:clamp(17px,1.6vw,22px);
    line-height:1.5;
    max-width: 1080px;
}
.ebss-header-cta,
.ebss-store-link {
    text-decoration:none !important;
}
.ebss-header-cta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-radius:999px;
    background:var(--ebss-yellow);
    color:#111827 !important;
    font-weight:800;
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    min-height:60px;
    padding:0 36px;
    white-space:nowrap;
    margin-top: 18px;
    box-shadow:0 12px 28px rgba(244,212,78,.28);
}
.ebss-header-cta:hover,
.ebss-store-link:hover {
    transform:translateY(-2px);
    filter:saturate(1.03);
}
.ebss-slider-wrap { position:relative; }
.ebss-viewport {
    overflow:hidden;
    width:100%;
    touch-action:pan-y;
    cursor:grab;
    outline:none;
    padding: 12px 32px 16px;
}
.ebss-viewport.is-dragging { cursor:grabbing; user-select:none; }
.ebss-track {
    display:flex;
    align-items:flex-end;
    gap:var(--ebss-gap);
    will-change:transform;
    transition:transform .55s cubic-bezier(.22,.65,.28,1);
}
.ebss-viewport.is-dragging .ebss-track { transition:none; }
.ebss-card {
    flex:0 0 calc((100% - (var(--ebss-spv) - 1) * var(--ebss-gap)) / var(--ebss-spv));
    min-width:0;
    position:relative;
    transition: transform .55s cubic-bezier(.22,.65,.28,1), opacity .35s ease, filter .35s ease;
    transform-origin: center bottom;
    opacity:.78;
    filter:saturate(.95);
}
.ebss-card.is-left,
.ebss-card.is-right {
    opacity:.94;
    transform: scale(.84) translateY(26px);
}
.ebss-card.is-center {
    opacity:1;
    transform: scale(1) translateY(0);
    z-index: 4;
}
.ebss-card.is-far:not(.is-visible) {
    opacity:.32;
}
.ebss-device-stage {
    position:relative;
    min-height: 520px;
    padding: 16px 0 8px;
    cursor:zoom-in;
}
.ebss-monitor { width:100%; margin:0 auto; position:relative; z-index:1; }
.ebss-monitor-top {
    position:absolute;
    z-index:2;
    top:10px;
    left:20px;
    display:flex;
    gap:7px;
}
.ebss-monitor-top::before,
.ebss-monitor-top::after,
.ebss-monitor-top span {
    content:'';
    display:block;
    width:8px;
    height:8px;
    border-radius:50%;
}
.ebss-monitor-top::before { background:var(--ebss-blue); }
.ebss-monitor-top span { background:var(--ebss-yellow); }
.ebss-monitor-top::after { background:#B8C2D8; }
.ebss-monitor-screen {
    position:relative;
    aspect-ratio: 4 / 3;
    border: 16px solid #202A62;
    border-bottom-width: 18px;
    border-radius: 20px 20px 12px 12px;
    overflow:hidden;
    background: var(--ebss-card);
    box-shadow:0 26px 56px rgba(17,26,75,.18);
}
.ebss-monitor-neck {
    width:15%;
    height:48px;
    margin:-2px auto 0;
    background:linear-gradient(90deg,#aeb6c3,#eef1f5,#9fa8b6);
    clip-path:polygon(23% 0,77% 0,100% 100%,0 100%);
}
.ebss-monitor-base {
    width:44%;
    height:14px;
    border-radius:60% 60% 12px 12px;
    margin:-1px auto 0;
    background:linear-gradient(90deg,#9aa3b1,#f4f6f8,#9ca5b2);
    box-shadow:0 7px 12px rgba(29,39,58,.16);
}
.ebss-phone {
    position:absolute;
    z-index:4;
    width:26%;
    right:5%;
    bottom: 8px;
    padding:10px;
    border-radius:30px;
    background:#0F173E;
    box-shadow:0 22px 36px rgba(9,16,32,.26);
}
.ebss-phone-speaker {
    position:absolute;
    z-index:5;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:42%;
    height:14px;
    border-radius:0 0 12px 12px;
    background:#0F173E;
}
.ebss-phone-screen {
    position:relative;
    aspect-ratio:9/17.5;
    border-radius:22px;
    overflow:hidden;
    background:#eef2f7;
}
.ebss-image-shell { isolation:isolate; }
.ebss-image-shell img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:top center;
    transition:opacity .32s ease, transform .45s ease;
    position:relative;
    z-index:2;
}
.ebss-card.is-center .ebss-monitor-screen img { transform:scale(1.01); }
.ebss-card:hover .ebss-monitor-screen img { transform:scale(1.02); }
.ebss-skeleton {
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg,#edf1f6 18%,#f8fafc 36%,#edf1f6 58%);
    background-size:260% 100%;
    animation:ebssShimmer 1.25s infinite;
}
.ebss-image-shell.is-loaded .ebss-skeleton {
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
}
@keyframes ebssShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.ebss-card-footer {
    padding: 6px 14px 0;
    text-align: center;
}
.ebss-store-link {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap: 3px;
    color: var(--ebss-text) !important;
    background: rgba(255,255,255,.88);
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow:0 10px 18px rgba(17,26,75,.08);
    backdrop-filter: blur(10px);
}
.ebss-store-link strong {
    font-size: 14px;
    line-height: 1.2;
}
.ebss-store-link span {
    color: var(--ebss-muted);
    font-size: 12px;
    line-height: 1.2;
}
.ebss-store-link.is-static { cursor:default; }
.ebss-showcase button.ebss-arrow {
    -webkit-appearance:none !important;
    appearance:none !important;
    position:absolute;
    z-index:10;
    top: calc(50% + 42px);
    width:64px;
    height:64px;
    padding:0 !important;
    border:1px solid rgba(25,54,103,.10) !important;
    background:#fff !important;
    background-color:#fff !important;
    color:var(--ebss-blue) !important;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 16px 30px rgba(24,41,75,.12);
    cursor:pointer;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.ebss-showcase button.ebss-arrow span { font-size:42px; line-height:1; margin-top:-4px; color:inherit !important; }
.ebss-showcase button.ebss-prev { left: 8px; }
.ebss-showcase button.ebss-next { right: 8px; }
.ebss-showcase button.ebss-arrow:hover,
.ebss-showcase button.ebss-arrow:focus,
.ebss-showcase button.ebss-arrow:focus-visible {
    background:var(--ebss-yellow) !important;
    background-color:var(--ebss-yellow) !important;
    color:var(--ebss-text) !important;
    border-color:var(--ebss-yellow) !important;
    outline:none !important;
    transform:scale(1.04);
}
.ebss-showcase button.ebss-arrow:active {
    background:var(--ebss-blue) !important;
    background-color:var(--ebss-blue) !important;
    color:#fff !important;
    border-color:var(--ebss-blue) !important;
    transform:scale(.98);
}
.ebss-arrows-hover .ebss-arrow { opacity:0; pointer-events:none; }
.ebss-arrows-hover:hover .ebss-arrow,
.ebss-arrows-hover:focus-within .ebss-arrow { opacity:1; pointer-events:auto; }
.ebss-dots {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top: 8px;
}
.ebss-dot {
    width:12px;
    height:12px;
    border:0;
    padding:0;
    border-radius:50%;
    background:#CFD8EE;
    cursor:pointer;
    transition:width .2s ease, background .2s ease, transform .2s ease;
}
.ebss-dot.is-active {
    width:20px;
    border-radius:99px;
    background:var(--ebss-blue);
    transform:scale(1.02);
}
.ebss-swipe-hint {
    display:none;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:16px;
    color:var(--ebss-muted);
    font-size:13px;
}
.ebss-swipe-hint span,
.ebss-swipe-hint i {
    color:var(--ebss-blue);
    font-style:normal;
    font-size:18px;
}
.ebss-swipe-hint em { font-style:normal; }
.ebss-lightbox {
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(7,14,29,.82);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
}
.ebss-lightbox.is-open {
    opacity:1;
    visibility:visible;
}
.ebss-lightbox-inner {
    max-width:min(1320px,92vw);
    max-height:88vh;
    background:#fff;
    padding:12px;
    border-radius:18px;
    box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.ebss-lightbox-inner img {
    display:block;
    max-width:100%;
    max-height:calc(88vh - 24px);
    width:auto;
    height:auto;
    border-radius:10px;
}
.ebss-lightbox-close {
    position:absolute;
    top:22px;
    right:24px;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#111827;
    font-size:30px;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}
body.ebss-no-scroll { overflow:hidden; }

@media (max-width: 1280px) {
    .ebss-device-stage { min-height: 470px; }
    .ebss-heading h2 { max-width: 980px; }
}

@media (max-width: 1024px) {
    .ebss-bg-dots { right: 20px; top: 235px; opacity: .6; }
    .ebss-heading-row { gap:20px; align-items: flex-start; }
    .ebss-heading { max-width: 780px; }
    .ebss-header-cta { margin-top: 12px; }
    .ebss-viewport { padding: 6px 22px 12px; }
    .ebss-card.is-left,
    .ebss-card.is-right { transform: scale(.92) translateY(18px); }
    .ebss-device-stage { min-height: 410px; }
    .ebss-monitor-screen { border-width: 13px; border-bottom-width: 16px; }
    .ebss-phone { width: 29%; border-radius: 24px; padding: 8px; }
    .ebss-phone-screen { border-radius: 18px; }
    .ebss-showcase button.ebss-arrow { top: calc(50% + 28px); width: 56px; height: 56px; }
}

@media (max-width: 767px) {
    .ebss-showcase { border-radius:24px; }
    .ebss-bg-circle-top { width: 180px; height: 180px; top: -80px; right: -60px; border-width: 18px; }
    .ebss-bg-circle-left { width: 220px; height: 220px; left: -110px; bottom: -120px; border-width: 18px; }
    .ebss-bg-dots { display:none; }
    .ebss-heading-row { display:block; margin-bottom:20px; }
    .ebss-eyebrow { font-size:10px; letter-spacing:.17em; gap:9px; margin-bottom: 12px; }
    .ebss-eyebrow i { width:34px; height:2px; }
    .ebss-heading h2 { font-size:42px; }
    .ebss-heading p { font-size:16px; margin-top: 14px; }
    .ebss-header-cta { margin-top:18px; min-height:54px; width:100%; padding: 0 20px; }
    .ebss-viewport { padding: 0 0 8px; }
    .ebss-card,
    .ebss-card.is-left,
    .ebss-card.is-right,
    .ebss-card.is-center { transform: none; opacity: 1; }
    .ebss-device-stage { min-height: 340px; padding: 8px 0 6px; }
    .ebss-monitor-screen { border-width: 10px; border-bottom-width: 13px; border-radius: 16px 16px 10px 10px; }
    .ebss-monitor-neck { height: 34px; }
    .ebss-monitor-base { height: 11px; }
    .ebss-phone { width: 31%; right: 4%; bottom: 2px; padding: 6px; border-radius: 18px; }
    .ebss-phone-speaker { width: 40%; height: 10px; top: 7px; }
    .ebss-phone-screen { border-radius: 12px; }
    .ebss-card-footer { padding-top: 0; }
    .ebss-store-link { padding: 7px 12px; }
    .ebss-showcase button.ebss-arrow {
        width:48px;
        height:48px;
        top: 55%;
        opacity:1 !important;
        pointer-events:auto !important;
    }
    .ebss-showcase button.ebss-arrow span { font-size: 34px; }
    .ebss-showcase button.ebss-prev { left: 2px; }
    .ebss-showcase button.ebss-next { right: 2px; }
    .ebss-dots { margin-top:14px; }
    .ebss-swipe-hint { display:flex; flex-wrap:wrap; text-align:center; }
    .ebss-lightbox { padding:14px; }
}