#nav > .bbs-menu-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    padding: .55rem .75rem;
    border: 1px solid #a9e3ff;
    border-radius: .65rem;
    background: #eaf8ff;
    color: #07527e;
}
#nav > .bbs-menu-link:hover { background: #cceeff; }
@media (min-width: 761px) {
    .header #nav { gap: clamp(8px, 1.35vw, 24px); }
}
@media (min-width: 761px) and (max-width: 950px) {
    .header #nav > a, .header #nav .nav-trigger { font-size: .77rem; }
    .header #nav .nav-cta { padding-inline: .55rem; }
    .header .header-inner .logo img { width: 120px; }
}

.bbs-showcase {
    padding: clamp(3rem, 7vw, 6rem) 0;
    background: radial-gradient(ellipse at 12% 0%, #154477 0%, transparent 58%),
                radial-gradient(ellipse at 100% 90%, #28205b 0%, transparent 56%), #081425;
    color: #f3f8ff;
    color-scheme: dark;
}
.bbs-inner { width: min(1180px, 100% - 32px); margin-inline: auto; }
.bbs-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.bbs-kicker { color: #83e8ff; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; }
.bbs-head h2 { color: #f3f8ff; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.1; margin: .5rem 0; }
.bbs-head p:last-child { color: #c3d7ee; }
.bbs-controls { display: flex; gap: .5rem; flex-shrink: 0; }
.bbs-controls[hidden], .bbs-track[hidden] { display: none; }
.bbs-controls button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #52789e;
    background: #142a46;
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
}
.bbs-controls button:hover { background: #23547a; }
.bbs-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 4);
    gap: 16px;
    overflow-x: auto;
    padding: 6px 3px 14px;
    margin: 1.5rem -3px 0;
    scroll-padding-inline: 3px;
    scroll-snap-type: x mandatory;
    scrollbar-color: #5484a9 #142a46;
}
.bbs-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, #183550, #101d36);
    border: 1px solid #385a7e;
    color: #f3f8ff;
    scroll-snap-align: start;
    transition: border-color .2s, box-shadow .2s;
}
.bbs-card:hover { color: #fff; border-color: #78dcff; box-shadow: 0 0 18px #40cfff29; }
.bbs-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: .65rem; background: #fff; }
.bbs-card strong { overflow-wrap: anywhere; }
.bbs-card span { margin-top: auto; color: #83e8ff; font-size: .88rem; font-weight: 700; }
.bbs-foot { margin-top: 1.8rem; text-align: center; }
.bbs-store {
    display: inline-flex;
    gap: .7rem;
    align-items: center;
    padding: .85rem 1.4rem;
    border-radius: .75rem;
    color: #061a2d;
    background: linear-gradient(115deg, #86f0ff, #83bfff);
    font-weight: 800;
    box-shadow: 0 8px 28px #45b8ff38;
}
.bbs-store:hover { color: #061a2d; background: #b1f2ff; }
.bbs-showcase :focus-visible { outline: 2px solid #87ebff; outline-offset: 2px; }
@media (max-width: 850px) { .bbs-track { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 620px) { .bbs-track { grid-auto-columns: 72%; } }