/* ═══ Hero showcase — dark brand + full-bleed image ═══ */

.bn-hero--showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: var(--bn-header-h);
    padding-bottom: 0;
    overflow: hidden;
    background: #0a0c14;
    color: #ffffff;
    isolation: isolate;
}

.bn-hero--showcase .bn-hero__bg--fallback .bn-hero__gradient {
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(var(--bn-primary-rgb), 0.28), transparent 55%),
        linear-gradient(125deg, #0a0c14 0%, #12141f 45%, #1a0a0e 100%);
}

.bn-hero--showcase .bn-hero-swiper {
    flex: 1 1 auto;
    width: 100%;
    min-height: clamp(420px, calc(100dvh - var(--bn-trust-h) - var(--bn-header-h) - 5.5rem), 680px);
    position: relative;
    z-index: 1;
}

.bn-hero--showcase .bn-hero-swiper .swiper-wrapper,
.bn-hero--showcase .bn-hero-swiper .swiper-slide {
    height: auto;
    min-height: clamp(420px, calc(100dvh - var(--bn-trust-h) - var(--bn-header-h) - 5.5rem), 680px);
}

.bn-hero--showcase .bn-hero__canvas {
    position: relative;
    min-height: inherit;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Full-bleed slide background */
.bn-hero--showcase .bn-hero__slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bn-hero--showcase .bn-hero__slide-bg picture,
.bn-hero--showcase .bn-hero__slide-bg img {
    display: block;
    width: 100%;
    height: 100%;
}

.bn-hero--showcase .bn-hero__slide-bg img {
    object-fit: cover;
    object-position: 68% center;
    transform: scale(1.06);
    will-change: transform;
}

.bn-hero--showcase .swiper-slide-active .bn-hero__slide-bg img {
    animation: bn-hero-kenburns 18s ease-out forwards;
}

@keyframes bn-hero-kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

.bn-hero--showcase .bn-hero__slide-bg-fallback {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 70% 55% at 18% 48%, rgba(var(--bn-primary-rgb), 0.35), transparent 58%),
        linear-gradient(125deg, #0c0e16 0%, #141824 50%, #1c0a10 100%);
}

/* Brand-tinted scrim (no white wash) */
.bn-hero--showcase .bn-hero__slide-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(8, 10, 18, 0.94) 0%,
        rgba(10, 12, 20, 0.82) 32%,
        rgba(12, 10, 18, 0.55) 48%,
        rgba(var(--bn-primary-rgb), 0.12) 62%,
        transparent 82%
    );
}

.bn-hero--showcase.bn-hero--has-media .bn-hero__slide-scrim {
    background: linear-gradient(
        100deg,
        rgba(8, 10, 18, 0.93) 0%,
        rgba(10, 12, 20, 0.78) 30%,
        rgba(14, 10, 16, 0.48) 46%,
        rgba(var(--bn-primary-rgb), 0.14) 58%,
        rgba(8, 10, 18, 0.08) 72%,
        transparent 88%
    );
}

.bn-hero--showcase .bn-hero__slide-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 70% at 12% 55%, rgba(var(--bn-primary-rgb), 0.32), transparent 62%),
        radial-gradient(ellipse 40% 50% at 85% 30%, rgba(var(--bn-primary-rgb), 0.12), transparent 55%);
    animation: bn-hero-glow-pulse 6s ease-in-out infinite;
}

@keyframes bn-hero-glow-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Floating FX orbs */
.bn-hero--showcase .bn-hero__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.bn-hero--showcase .bn-hero__fx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.5;
}

.bn-hero--showcase .bn-hero__fx-orb--1 {
    width: 280px;
    height: 280px;
    left: -4%;
    top: 18%;
    background: rgba(var(--bn-primary-rgb), 0.35);
    animation: bn-hero-orb-1 9s ease-in-out infinite;
}

.bn-hero--showcase .bn-hero__fx-orb--2 {
    width: 180px;
    height: 180px;
    left: 28%;
    bottom: 22%;
    background: rgba(var(--bn-primary-rgb), 0.2);
    animation: bn-hero-orb-2 11s ease-in-out infinite;
}

@keyframes bn-hero-orb-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(24px, -18px) scale(1.08); }
}

@keyframes bn-hero-orb-2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-16px, 14px); }
}

.bn-hero--showcase .bn-hero__fx-mesh {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(var(--bn-primary-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--bn-primary-rgb), 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(100deg, #000 0%, #000 42%, transparent 70%);
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 42%, transparent 70%);
}

/* Left content — no white card */
.bn-hero--showcase .bn-hero__slide-inner {
    position: relative;
    z-index: 2;
    width: min(var(--bn-container), calc(100% - clamp(2.5rem, 6vw, 5rem)));
    margin-inline: auto;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-block: clamp(2rem, 4vw, 3.25rem) clamp(5.5rem, 9vw, 7rem);
    padding-inline: clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

.bn-hero--showcase .bn-hero__content--showcase {
    position: relative;
    max-width: min(100%, 36rem);
    padding: 0 0 0 1.35rem;
    margin-left: clamp(0.35rem, 1.5vw, 1rem);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.bn-hero--showcase .bn-hero__accent-line {
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--bn-primary) 0%, rgba(var(--bn-primary-rgb), 0.2) 85%, transparent 100%);
    box-shadow: 0 0 20px rgba(var(--bn-primary-rgb), 0.65);
    transform-origin: top center;
    transform: scaleY(0);
    animation: bn-hero-line-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes bn-hero-line-grow {
    to { transform: scaleY(1); }
}

.bn-hero--showcase .bn-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.15rem;
    padding: 0.48rem 1rem 0.48rem 0.85rem;
    border-radius: 999px;
    background: rgba(var(--bn-primary-rgb), 0.16);
    border: 1px solid rgba(var(--bn-primary-rgb), 0.42);
    box-shadow: 0 0 28px rgba(var(--bn-primary-rgb), 0.22);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bn-hero--showcase .bn-hero__badge .bi {
    color: var(--bn-primary);
    font-size: 0.95rem;
    animation: bn-hero-badge-pulse 2.5s ease-in-out infinite;
}

@keyframes bn-hero-badge-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(var(--bn-primary-rgb), 0.5)); }
    50%      { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(var(--bn-primary-rgb), 0.9)); }
}

.bn-hero--showcase .bn-hero__title {
    margin: 0 0 0.65rem !important;
    max-width: 14ch !important;
    font-size: clamp(2.35rem, 4.8vw, 3.65rem) !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.35);
}

.bn-hero--showcase .bn-hero__title .bn-text-red {
    color: var(--bn-primary) !important;
    text-shadow: 0 0 40px rgba(var(--bn-primary-rgb), 0.45);
}

.bn-hero--showcase .bn-hero__subtitle {
    margin: 0 0 1.5rem !important;
    max-width: 46ch !important;
    padding: 0 !important;
    border: none !important;
    font-size: clamp(0.95rem, 1.25vw, 1.0625rem) !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.bn-hero--showcase .bn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 !important;
}

.bn-hero--showcase .bn-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.82rem 1.55rem !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    border-radius: 999px !important;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.bn-hero--showcase .bn-hero__btn--primary {
    background: linear-gradient(135deg, var(--bn-primary) 0%, #c41e28 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 32px rgba(var(--bn-primary-rgb), 0.45) !important;
}

.bn-hero--showcase .bn-hero__btn--primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(var(--bn-primary-rgb), 0.55) !important;
}

.bn-hero--showcase .bn-hero__btn--primary .bi {
    transition: transform 0.3s ease;
}

.bn-hero--showcase .bn-hero__btn--primary:hover .bi {
    transform: translateX(4px);
}

.bn-hero--showcase .bn-hero__btn--outline {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--bn-primary-rgb), 0.45) !important;
    box-shadow: 0 0 20px rgba(var(--bn-primary-rgb), 0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bn-hero--showcase .bn-hero__btn--outline .bi {
    color: var(--bn-primary);
    font-size: 0.85rem;
}

.bn-hero--showcase .bn-hero__btn--outline:hover {
    background: rgba(var(--bn-primary-rgb), 0.14) !important;
    border-color: rgba(var(--bn-primary-rgb), 0.65) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(var(--bn-primary-rgb), 0.28) !important;
}

/* Pagination */
.bn-hero--showcase .bn-hero__pagination {
    bottom: 5.75rem !important;
    z-index: 4;
}

.bn-hero--showcase .bn-hero__pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.28);
}

.bn-hero--showcase .bn-hero__pagination .swiper-pagination-bullet-active {
    background: var(--bn-primary);
    box-shadow: 0 0 14px rgba(var(--bn-primary-rgb), 0.65);
}

/* Hero dock shell */
.bn-hero--showcase .bn-hero__dock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    flex-shrink: 0;
    margin: 0;
    padding: 0 clamp(1rem, 3vw, 2rem) clamp(0.85rem, 2vw, 1.25rem);
    pointer-events: none;
    animation: bn-hero-dock-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

@keyframes bn-hero-dock-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bn-hero--showcase .bn-hero__dock .bn-container {
    width: min(var(--bn-container), calc(100% - clamp(2.5rem, 6vw, 5rem)));
    pointer-events: auto;
}

/* Stats dock — premium floating metrics ribbon */
.bn-hero--showcase .bn-hero__stats-dock {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bn-stat-dock-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.35rem;
}

.bn-stat-dock-head__live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
    animation: bn-stat-live-pulse 2.4s ease-in-out infinite;
}

@keyframes bn-stat-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}

.bn-stat-dock-head__text {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.bn-stat-dock-head__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--bn-primary-rgb), 0.45), transparent);
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar--premium {
    position: relative;
    border-radius: 20px;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__frame {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__shimmer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 42%,
        transparent 58%
    );
    transform: translateX(-120%);
    animation: bn-stat-shimmer 7s ease-in-out infinite;
}

@keyframes bn-stat-shimmer {
    0%, 72% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar {
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 48px rgba(var(--bn-primary-rgb), 0.14);
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__glow {
    display: block;
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(var(--bn-primary-rgb), 0.55) 0%,
        rgba(var(--bn-primary-rgb), 0.05) 38%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(var(--bn-primary-rgb), 0.05) 62%,
        rgba(var(--bn-primary-rgb), 0.4) 100%
    );
    opacity: 0.42;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__track {
    position: relative;
    z-index: 1;
    padding: 1.15rem 0.5rem;
    background:
        linear-gradient(180deg, rgba(18, 20, 32, 0.94) 0%, rgba(10, 12, 22, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__item {
    padding: 0.65rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 0.35s ease, transform 0.35s ease;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__item:hover {
    background: rgba(var(--bn-primary-rgb), 0.1) !important;
    transform: translateY(-2px);
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__icon-wrap {
    width: 46px;
    height: 46px;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__icon-ring {
    border-color: rgba(var(--bn-primary-rgb), 0.65);
    box-shadow:
        0 0 20px rgba(var(--bn-primary-rgb), 0.4),
        inset 0 0 14px rgba(var(--bn-primary-rgb), 0.18);
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    background: linear-gradient(145deg, rgba(var(--bn-primary-rgb), 0.28), rgba(var(--bn-primary-rgb), 0.1));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__label {
    margin: 0 0 0.25rem;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.625rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__value,
.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__value.bn-stat-card__value {
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.15rem, 1.55vw, 1.45rem) !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__value .bn-stat-card__number {
    background: linear-gradient(135deg, #ffffff 0%, rgba(var(--bn-primary-rgb), 1) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__hint {
    display: none;
    margin: 0.35rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
}

@media (min-width: 1100px) {
    .bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__item:hover .bn-stat-bar__hint {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bn-stat-dock-head__live,
    .bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__shimmer {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bn-hero--showcase .bn-hero__accent-line,
    .bn-hero--showcase .bn-hero__dock,
    .bn-hero--showcase .swiper-slide-active .bn-hero__slide-bg img,
    .bn-hero--showcase .bn-hero__slide-glow,
    .bn-hero--showcase .bn-hero__fx-orb,
    .bn-hero--showcase .bn-hero__badge .bi {
        animation: none !important;
    }

    .bn-hero--showcase .bn-hero__accent-line {
        transform: scaleY(1);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .bn-hero--showcase .bn-hero__slide-inner {
        padding-bottom: clamp(6rem, 14vw, 8rem);
    }

    .bn-hero--showcase .bn-hero__slide-bg img {
        object-position: 75% center;
    }

    .bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .bn-hero--showcase .bn-hero-swiper,
    .bn-hero--showcase .bn-hero-swiper .swiper-slide {
        min-height: clamp(480px, 88dvh, 620px);
    }

    .bn-hero--showcase .bn-hero__slide-inner {
        width: min(var(--bn-container), calc(100% - clamp(1.5rem, 5vw, 2.5rem)));
        padding-inline: clamp(0.85rem, 4vw, 1.25rem);
    }

    .bn-hero--showcase .bn-hero__content--showcase {
        margin-left: 0;
        padding-left: 1.1rem;
    }

    .bn-hero--showcase .bn-hero__slide-scrim,
    .bn-hero--showcase.bn-hero--has-media .bn-hero__slide-scrim {
        background: linear-gradient(
            180deg,
            rgba(8, 10, 18, 0.94) 0%,
            rgba(10, 12, 20, 0.82) 40%,
            rgba(12, 10, 18, 0.5) 58%,
            rgba(var(--bn-primary-rgb), 0.1) 72%,
            transparent 90%
        ) !important;
    }

    .bn-hero--showcase .bn-hero__slide-bg img {
        object-position: center 30%;
    }

    .bn-hero--showcase .bn-hero__title {
        max-width: none !important;
        font-size: clamp(2rem, 8vw, 2.65rem) !important;
    }

    .bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.85rem 0.5rem;
    }

    .bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__item:nth-child(2n) {
        border-right: none !important;
    }

    .bn-hero--showcase .bn-hero__stats-dock .bn-stat-bar__label {
        white-space: normal;
    }

    .bn-hero--showcase .bn-hero__pagination {
        bottom: 7.5rem !important;
    }
}

@media (max-width: 480px) {
    .bn-hero--showcase .bn-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bn-hero--showcase .bn-hero__btn {
        width: 100%;
    }
}