.sab-widget {
    --sab-item-height: 96px;
    --sab-item-gap: 24px;
    --sab-sticky-top: 0px;
    --sab-scroll-step: 120px;
    --sab-auto-viewport-height: 336px;
    --sab-custom-viewport-height: 420px;
    --sab-top-mask-height: 60px;
    --sab-bottom-mask-height: 60px;
    --sab-top-blur: 7px;
    --sab-bottom-blur: 7px;
    --sab-bg: #F4FAFE;
    width: 100%;
    position: relative;
}

/* This is a LOCAL scroll stage. It does not create a full-screen section. */
.sab-scroll-section {
    position: relative;
    width: 100%;
    overflow: visible !important;
}

.sab-scroll-section.sab-has-scroll {
    min-height: calc(var(--sab-auto-viewport-height) + var(--sab-animation-distance, 0px));
}

.sab-sticky-viewport {
    position: sticky;
    top: var(--sab-sticky-top);
    height: var(--sab-auto-viewport-height);
    width: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--sab-bg);
    isolation: isolate;
}

.sab-no-animation .sab-sticky-viewport {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.sab-track {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sab-item-gap);
    padding: 0;
    margin: 0;
    will-change: transform;
    transform: translate3d(0,0,0);
    z-index: 1;
}

.sab-item {
    --sab-item-width: 80%;
    --sab-item-offset: 0%;
    position: relative;
    display: block;
    flex: 0 0 var(--sab-item-height);
    height: var(--sab-item-height);
    width: var(--sab-item-width);
    max-width: 100%;
    margin-left: var(--sab-item-offset);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    z-index: 1;
}

.sab-item-inner {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

.sab-icon-wrap {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #06459A;
    overflow: hidden;
    line-height: 1;
}

.sab-icon-wrap i { font-size: 30px; }
.sab-icon-wrap svg { width: 30px; height: 30px; display: block; fill: currentColor; }

.sab-content { min-width: 0; flex: 1 1 auto; }
.sab-heading { color: #06459A; font-size: 24px; line-height: 1.2; font-weight: 700; margin: 0 0 6px; }
.sab-description { color: #3D3D3D; font-size: 16px; line-height: 1.45; font-weight: 400; margin: 0; }

.sab-top-mask,
.sab-bottom-mask {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}

.sab-top-mask {
    top: 0;
    height: var(--sab-top-mask-height);
    background: linear-gradient(to bottom, var(--sab-bg) 0%, color-mix(in srgb, var(--sab-bg) 90%, transparent) 38%, transparent 100%);
    backdrop-filter: blur(var(--sab-top-blur));
    -webkit-backdrop-filter: blur(var(--sab-top-blur));
}

.sab-bottom-mask {
    bottom: 0;
    height: var(--sab-bottom-mask-height);
    background: linear-gradient(to top, var(--sab-bg) 0%, color-mix(in srgb, var(--sab-bg) 90%, transparent) 38%, transparent 100%);
    backdrop-filter: blur(var(--sab-bottom-blur));
    -webkit-backdrop-filter: blur(var(--sab-bottom-blur));
}

.sab-mask-disabled { display: none; }

.sab-scroll-section.sab-no-animation .sab-track {
    position: relative;
    transform: none !important;
}

.sab-scroll-section.sab-no-animation .sab-item { margin-bottom: var(--sab-item-gap); }

@media (max-width: 1024px) {
    .sab-item-inner { gap: 14px; }
    .sab-heading { font-size: 21px; }
    .sab-description { font-size: 15px; }
}

@media (max-width: 767px) {
    .sab-item { --sab-item-width: 92%; }
    .sab-item-inner { gap: 12px; }
    .sab-heading { font-size: 18px; }
    .sab-description { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .sab-sticky-viewport { position: relative !important; height: auto !important; }
    .sab-scroll-section.sab-has-scroll { min-height: 0 !important; }
    .sab-track { position: relative !important; transform: none !important; }
}
