/* ===========================
    Banner
   =========================== */

:root{
    /* высота ленты; меняется в media-блоке ниже */
    --nb-height: 28px;

    /* палитра в стиле шапки сайта */
    --nb-bg-1: #1a1f26;     /* верх градиента */
    --nb-bg-2: #11161c;     /* низ градиента */
    --nb-text: #eef2f7;
    --nb-border: rgba(255,255,255,0.08);
    --nb-glaze: rgba(255,255,255,0.12);
}

/* фиксируем ленту поверх всего, чтобы логотип не перекрывал */
.notice-banner{
    position: relative;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    background: linear-gradient(180deg, var(--nb-bg-1) 0%, var(--nb-bg-2) 100%);
    border-bottom: 1px solid var(--nb-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    /* тонкий блик сверху */
}
.notice-banner::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:1px;
    background: linear-gradient(90deg, transparent, var(--nb-glaze), transparent);
    opacity:.9;
}

/* внутренняя обертка с текстом по центру */
.notice-banner__inner{
    min-height: var(--nb-height);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--nb-text);
    text-align: center;
    font-weight: 600;
    letter-spacing: .2px;
    font-size: clamp(11px, 1.1vw, 12.5px);
    line-height: 1.15;

    /* легкий эффект стекла — очень деликатно */
    backdrop-filter: saturate(1.05) blur(2px);
}

/* резервируем место под фикс-ленту:
   предполагается, что баннер идёт прямо перед .header */
/*.notice-banner + .wrapper{*/
/*    padding-top: var(--nb-gap, var(--nb-height));*/
/*}*/


/* адаптив — ленту компактнее на узких экранах */
@media (max-width: 480px){
    :root{ --nb-height: 26px; }
    .notice-banner__inner{ padding: 3px 6px; }
    .notice-banner__inner{ font-size: 11px; }
}