/* The strip sits two pixels over the Hero's desk edge. Its negative bottom
   margin lets the search heading retain its original vertical position. */
.brand-marquee {
    --brand-visible: 9;
    --brand-gap: 14px;
    box-sizing: border-box;
    position: relative;
    z-index: 30;
    width: 100%;
    height: 72px;
    margin: -2px 0 -72px;
    padding: 8px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .8);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(90deg, #f8f7fd, #f3f0fb 48%, #f8f7fd);
    box-shadow: 0 4px 18px rgba(36, 30, 73, .08);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.brand-marquee-track {
    display: flex;
    width: max-content;
    height: 100%;
}

.brand-marquee.is-ready .brand-marquee-track {
    animation: brand-marquee-right 68s linear infinite;
    animation-play-state: paused;
}

.brand-marquee.is-visible .brand-marquee-track {
    animation-play-state: running;
    will-change: transform;
}

.brand-marquee-set {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--brand-gap);
    height: 100%;
    margin: 0;
    padding: 0 var(--brand-gap) 0 0;
    list-style: none;
}

.brand-marquee-item {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100vw / var(--brand-visible) - var(--brand-gap));
    min-width: 0;
    height: 52px;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid rgba(119, 105, 163, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    color: #35405a;
    box-shadow: 0 2px 8px rgba(49, 39, 86, .04);
}

.brand-marquee-item img {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.brand-marquee-item span {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .brand-marquee {
    border-top-color: rgba(255, 255, 255, .12);
    border-bottom-color: rgba(183, 152, 230, .3);
    background: linear-gradient(90deg, #0e1730, #1c1736 48%, #0e1730);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .brand-marquee-item {
    border-color: rgba(183, 152, 230, .31);
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
    color: #f1f0fc;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .12);
}

[data-theme="dark"] .brand-marquee-item img {
    box-sizing: border-box;
    padding: 3px;
    border-radius: 9px;
    background: #fff;
}

@keyframes brand-marquee-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@media (max-width: 1439px) { .brand-marquee { --brand-visible: 8; } }
@media (max-width: 1099px) { .brand-marquee { --brand-visible: 6; --brand-gap: 12px; } }
@media (max-width: 799px) { .brand-marquee { --brand-visible: 5; } }
@media (min-width: 600px) and (max-width: 980px) { .hero-exit { padding-top: 76px; } }
@media (max-width: 599px) {
    .brand-marquee { --brand-visible: 4; --brand-gap: 10px; height: 64px; margin-bottom: -64px; padding: 5px 0; }
    .brand-marquee-item { flex-direction: column; gap: 1px; height: 52px; padding: 3px 5px; border-radius: 11px; }
    .brand-marquee-item img { width: 31px; height: 31px; }
    .brand-marquee-item span { max-width: 100%; font-size: 9px; line-height: 1.1; }
    .hero-exit { padding-top: 76px; }
}
@media (max-width: 419px) { .brand-marquee { --brand-visible: 3; } }

@media (prefers-reduced-motion: reduce) {
    .brand-marquee.is-ready .brand-marquee-track { animation: none; transform: none; }
    .brand-marquee.is-visible .brand-marquee-track { will-change: auto; }
}