@font-face{
    font-family:"Roboto";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("../fonts/Roboto-Regular.woff2") format("woff2");
}
@font-face{
    font-family:"Roboto";
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url("../fonts/Roboto-Medium.woff2") format("woff2");
}
@font-face{
    font-family:"Roboto";
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url("../fonts/Roboto-Bold.woff2") format("woff2");
}

:root{
    --brand:#ff5c1b;
    --brand2:#ff7a2f;

    --bg0:#050a1a;
    --bg1:#07122a;

    --text:#f4f6ff;
    --muted:rgba(244,246,255,.74);
    --muted2:rgba(244,246,255,.56);

    --line:rgba(255,255,255,.10);
    --line2:rgba(255,255,255,.16);

    --surface:rgba(255,255,255,.06);
    --surface2:rgba(255,255,255,.08);

    --shadow:0 22px 60px rgba(0,0,0,.45);
    --shadow2:0 12px 34px rgba(0,0,0,.35);

    --radius:18px;
    --radius2:26px;

    --mb-blue-0:#071a33;   /* very dark */
    --mb-blue-1:#0a2a4f;   /* deep */
    --mb-blue-2:#0b3f73;   /* mid */
    --mb-blue-3:#0c5aa0;   /* accent */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size:16px;
    line-height:1.55;
    color:var(--text);

    background:  #002347;
}

a{ color:inherit; text-decoration:none; }

.skip{
    position:absolute;
    left:-9999px;
    top:12px;
    background:#111827;
    color:#fff;
    padding:10px 12px;
    border-radius:12px;
}
.skip:focus{
    left:12px;
    z-index:999;
}

.container{
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}

/* Header */
.topbar{
    background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
            linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%, rgba(255,255,255,.05));
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.topbar::after{
    content:"";
    display:block;
    height: 10px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Brand */
.topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding: 10px 0 1px;
}

.brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.brand__logo{
    width: 180px;      /* подгони: 160–220 */
    height: 40px;      /* подгони: 34–44 */
    object-fit: contain;
    display:block;

    /* убрать “квадратную карточку”, если она осталась от старых стилей */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Desktop nav */
.nav{
    display:flex;
    gap:10px;
    align-items:center;
}
.nav__link{
    font-size:14px;
    color:#fff;
    padding:6px 15px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, var(--brand2) 0%, var(--brand) 55%, #ff4a0f 100%);
    box-shadow:
            0 10px 24px rgba(255,92,27,.28),
            inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
    will-change: transform;
}
.nav__link:hover{
    transform: translateY(-2px);
    filter: saturate(1.06);
    border-color: rgba(255,255,255,.22);
    box-shadow:
            0 14px 34px rgba(255,92,27,.34),
            inset 0 1px 0 rgba(255,255,255,.22);
}
.nav__link:active{
    transform: translateY(0);
    box-shadow:
            0 8px 18px rgba(255,92,27,.26),
            inset 0 2px 10px rgba(0,0,0,.14);
}
.nav__link:focus-visible{
    outline: 3px solid rgba(255,92,27,.28);
    outline-offset: 2px;
}

/* Burger */
.navbtn{
    display:none;
    width:42px;
    height:42px;
    border-radius:14px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    cursor:pointer;
}
.navbtn span{
    display:block;
    width:18px;
    height:2px;
    margin:4px auto;
    background: rgba(244,246,255,.75);
    border-radius:2px;
}

/* Mobile nav */
.nav-mobile{ padding:10px 0 16px; }
.nav-mobile__link{
    display:block;
    margin:10px 0;
    padding: 6px 15px;
    border-radius:999px;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, var(--brand2) 0%, var(--brand) 55%, #ff4a0f 100%);
    box-shadow:
            0 10px 24px rgba(255,92,27,.26),
            inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
    will-change: transform;
    font-size: 12px;
}
.nav-mobile__link:hover{
    transform: translateY(-2px);
    filter: saturate(1.06);
    border-color: rgba(255,255,255,.22);
    box-shadow:
            0 14px 34px rgba(255,92,27,.32),
            inset 0 1px 0 rgba(255,255,255,.20);
}

/* Hero */
.hero{ padding:44px 0 22px; }
.hero__inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
h1{
    font-size: clamp(24px, 3.0vw, 36px);
    line-height:1.15;
    margin: 0 0 1.2em;
    letter-spacing:-.4px;
}
.lead{
    margin:0 0 12px;
    color: var(--muted);
    font-weight:700;
}
.text{
    margin:0 0 12px;
    color: var(--muted);
}

/* Glass media shell + local glow */
.hero__media{
    position:relative;
    border-radius: var(--radius2);
    background: var(--surface);
    border:1px solid var(--line);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.hero__media::before{
    content:"";
    position:absolute;
    inset:-80px;
    background:
            radial-gradient(520px 380px at 40% 24%, rgba(70,140,255,.28), transparent 64%),
            radial-gradient(760px 520px at 64% 36%, rgba(18,78,180,.22), transparent 62%),
            radial-gradient(520px 420px at 18% 18%, rgba(255,92,27,.14), transparent 62%);
    filter: blur(2px);
    opacity:.95;
    pointer-events:none;
}
.hero__media > *{
    position:relative;
    z-index:1;
}

/* Place actions into the 2nd grid column (where media is) */
.hero__inner .img-actions{
    grid-column: 2;
    justify-content: center;
    width: 100%;
    margin: 14px 0 0;
}

.hero__actions {
    text-align: center;
    margin: 2em auto 1em;
}

@media (max-width: 920px){
    .hero__inner .img-actions{
        grid-column: 1;
    }
}

/* Sections + headings */
.section{ padding:30px 0; }
.section__head{ margin-bottom:12px; }
.section__spacer{ height:16px; }

h2{
    font-size: clamp(20px, 2.2vw, 28px);
    line-height:1.18;
    margin: 0 0 1em;
    letter-spacing:-.2px;
}
h3{
    font-size:18px;
    margin:0 0 10px;
}

strong {
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    font-weight: 700;
}

/* Cards */
.card{
    border-radius: var(--radius);
    background: var(--surface);
    border:1px solid var(--line);
    box-shadow: var(--shadow2);
    padding:2rem;
}
.meta{
    font-size:12px;
    color: var(--muted2);
    margin:0 0 2px;
}

/* Figures / images */
.figure{ margin:0; }
.figure--center{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.figure__meta{ margin-bottom:10px; }

img,
.img{
    height:auto;
    display:block;
    border-radius: var(--radius2);
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.img--half{ width: min(900px, 100%); }
section .img--half{ margin:.5em auto; }
section.hero .img--half{ margin:0; }

/* Grids */
.features{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
    margin-top:12px;
}
.feature{
    padding:14px;
    border-radius: 18px;
    border:1px solid var(--line);
    background: var(--surface);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}
.feature__t{ font-weight:900; margin-bottom:4px; color: var(--text); }
.feature__d{ color: var(--muted); font-size:14px; }
.feature:hover{
    transform: translateY(-4px);
    border-color: rgba(255,92,27,.22);
    box-shadow: 0 16px 40px rgba(0,0,0,.42);
}

.gloss{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
    margin-top:12px;
}
.gloss__item{
    border-radius:18px;
    padding:14px;
    border:1px solid var(--line);
    background: var(--surface);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}
.gloss__t{ font-weight:900; margin-bottom:6px; color: var(--text); }
.gloss__d{ color: var(--muted); font-size:14px; }
.gloss__item:hover{
    transform: translateY(-4px);
    border-color: rgba(255,92,27,.22);
    box-shadow: 0 16px 40px rgba(0,0,0,.42);
}

/* Lists / steps */
.steps{
    margin:8px 0 0 18px;
    padding:0;
    color: var(--muted);
}
.steps li{ margin:6px 0; }

.list{
    margin:0;
    padding-left: 2em;
    color: var(--muted);
}
.list li{ margin:7px 0; }

/* Spacing helpers */
.mt{ margin-top:14px; }
.mt2{ margin-top:18px; }
.mt4{ margin-top:28px; }

/* Table */
.table{
    margin-top:12px;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    background: var(--surface);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.table__row{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:10px;
    padding:12px 14px;
    border-top:1px solid var(--line);
    align-items:center;
}
.table__row:first-child{ border-top:0; }

.table__head{
    background: linear-gradient(135deg, rgba(70,140,255,.18), rgba(18,78,180,.14));
    font-weight:900;
}
.table__cell{ color: var(--muted); }
.table__head .table__cell{ color: var(--text); }

.table__row:not(.table__head):nth-child(even){
    background: rgba(255,255,255,.03);
}
.table__row:not(.table__head){
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    will-change: transform;
}
.table__row:not(.table__head):hover{
    background: rgba(255,92,27,.07);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.table__row .table__cell:first-child{
    font-weight:600;
    color: var(--text);
}

/* Payments table layout override */
#payments .table__row{
    grid-template-columns: 1.6fr 1fr 1fr .9fr;
}
#payments .table__row .table__cell:nth-child(2),
#payments .table__row .table__cell:nth-child(3),
#payments .table__row .table__cell:nth-child(4){
    text-align:left;
    white-space:nowrap;
}

/* FAQ */
.faq{ display:grid; gap:10px; }
.faq__item{
    border-radius:18px;
    border:1px solid var(--line);
    background: var(--surface);
    overflow:hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}
.faq__item summary{
    cursor:pointer;
    padding:14px 44px 14px 16px;
    font-weight:900;
    color: var(--text);
    list-style:none;
    position:relative;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:none !important; }

/* Chevron */
.faq__item summary::before{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:10px;
    height:10px;
    transform: translateY(-50%) rotate(45deg);
    border-right:2px solid rgba(244,246,255,.65);
    border-bottom:2px solid rgba(244,246,255,.65);
    transition: transform .18s ease, border-color .18s ease;
}
.faq__item[open] summary::before{
    transform: translateY(-50%) rotate(-135deg);
    border-color: rgba(255,92,27,.85);
}
.faq__body{ padding:0 16px 14px; }

.faq__item:hover{
    transform: translateY(-4px);
    border-color: rgba(255,92,27,.22);
    box-shadow: 0 16px 40px rgba(0,0,0,.42);
}

/* Footer */
.footer{
    margin-top: 3em;
    border-top:1px solid var(--line);
    background: rgba(6,10,26,.55);
    padding:18px 0;
}
.footer__inner{
    display:block;
    text-align:center;
    color: rgba(244,246,255,.62);
    font-size:13px;
}
.footer__links{
    display:inline-flex;
    text-align:center;
    list-style:none;
    padding:0 16px;
    margin:10px 0 0;
    gap:10px;
}
.footer__links li a{
    display:block;
    font-size:14px;
    padding:0 .3em;
    color: rgba(244,246,255,.70);
}
.footer__links li a:hover{ color:#fff; }

.instr{
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.instr__item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
            0 18px 46px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.06);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    will-change: transform;
}

.instr__item:hover{
    transform: translateY(-2px);
    border-color: rgba(255,92,27,.22);
    background: rgba(255,255,255,.075);
    box-shadow:
            0 24px 60px rgba(0,0,0,.42),
            inset 0 1px 0 rgba(255,255,255,.07);
}

.instr__num{
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;

    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: #0b0a10;

    background: linear-gradient(180deg, #ff7a2f 0%, #ff5c1b 65%, #ff4a0f 100%);
    box-shadow:
            0 10px 22px rgba(255,92,27,.22),
            inset 0 1px 0 rgba(255,255,255,.22);
}

.card,
.table,
.faq__item,
.hero__media{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.instr__text{
    color: rgba(244,246,255,.92);
    font-size: 15px;
    line-height: 1.35;
}

.img-actions{
    margin: 1.4em auto 0;
    width: min(600px, 100%);
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;

    font-weight: 900;
    font-size: 14px;
    line-height: 1;

    border: 1px solid rgba(255,255,255,.14);
    text-decoration: none;

    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
    will-change: transform;
}

.btn:focus-visible{
    outline: 3px solid rgba(255,92,27,.28);
    outline-offset: 2px;
}

.btn--primary{
    color: #fff;
    background: linear-gradient(180deg, var(--brand2) 0%, var(--brand) 55%, #ff4a0f 100%);
    box-shadow:
            0 10px 24px rgba(255,92,27,.28),
            inset 0 1px 0 rgba(255,255,255,.18);
}

.btn--primary:hover{
    transform: translateY(-2px);
    filter: saturate(1.06);
    border-color: rgba(255,255,255,.22);
    box-shadow:
            0 14px 34px rgba(255,92,27,.34),
            inset 0 1px 0 rgba(255,255,255,.22);
}

.btn--ghost{
    color: rgba(244,246,255,.92);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    box-shadow:
            0 18px 46px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.06);
}

.btn--ghost:hover{
    transform: translateY(-2px);
    border-color: rgba(255,92,27,.22);
    background: rgba(255,255,255,.075);
    box-shadow:
            0 24px 60px rgba(0,0,0,.32),
            inset 0 1px 0 rgba(255,255,255,.07);
}

.btn:active{
    transform: translateY(0);
}

@media (max-width: 430px){
    .img-actions{
        width: 90%;
        justify-content: stretch;
    }
    .btn{
        flex: 1 1 auto;
        width: 100%;
        margin-bottom: .7em;
    }

    .hero__actions {

        margin: 2em 1em 1em;
    }

    .topbar__inner .btn {
        font-size: 11px;
        margin: 0;
        min-height: 32px;
        padding: 0px 9px; }
    img {
        width: 100%;
    }

    .nav__link {
        font-size: 11px;
        white-space: nowrap;
        padding: 6px 10px;
    }

  #content .figure  {
       width: 90%;
       margin: 0 auto;
   }

}


@media (max-width: 430px){
    .instr__item{ padding: 12px 14px; }
    .instr__text{ font-size: 14px; }
}


/* Responsive */
@media (max-width: 920px){
    .hero__inner{ grid-template-columns: 1fr; }
    .features{ grid-template-columns: 1fr; }
    .gloss{ grid-template-columns: 1fr; }
    .nav{ display:none; }
    .navbtn{ display:block; }

    #payments .table__row{ grid-template-columns: 1fr; }
    #payments .table__head{ display:none; }
    #payments .table{
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    #payments .table__row{
        border: 1px solid var(--line);
        border-radius: 16px;
        margin: 10px 0;
        background: var(--surface2);
        box-shadow: 0 10px 22px rgba(0,0,0,.35);
    }
    #payments .table__row .table__cell{
        border-top: 1px dashed rgba(255,255,255,.12);
        padding-top: 8px;
        margin-top: 8px;
        white-space: normal;
    }
    #payments .table__row .table__cell:first-child{
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
}

@media (max-width: 430px){
    h1, h2{ text-align:center; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/** all pages*/
.page-hero h1{
    margin-bottom: .6em;
}

.breadcrumbs{
    display:flex;
    align-items:center;
    gap:10px;
    color: rgba(244,246,255,.62);
    font-size: 13px;
    margin-bottom: 10px;
}
.breadcrumbs a{
    color: rgba(244,246,255,.72);
    text-decoration: none;
}
.breadcrumbs a:hover{
    color:#fff;
}
.breadcrumbs__sep{
    opacity:.6;
}

/* Form */
.form{
    display:grid;
    gap:12px;
}
.field{
    display:grid;
    gap:8px;
}
.field__label{
    color: rgba(244,246,255,.72);
    font-size: 13px;
    font-weight: 700;
}
.field__control{
    width:100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--text);

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    outline: none;
}
.field__control--area{
    min-height: 140px;
    resize: vertical;
}
.field__control:focus{
    border-color: rgba(255,92,27,.28);
    box-shadow: 0 0 0 4px rgba(255,92,27,.10), inset 0 1px 0 rgba(255,255,255,.06);
}

.indexbar{
    padding: 8px 0 22px;
}

.index{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    overflow: hidden;
}

.index__summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 16px;
    font-weight: 900;
    color: rgba(244,246,255,.92);
    user-select: none;
}
.index__summary::-webkit-details-marker{ display:none; }

.index__title{
    letter-spacing: .2px;
}

/* Chevron like your FAQ arrow */
.index__chev{
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    border-right: 2px solid rgba(244,246,255,.65);
    border-bottom: 2px solid rgba(244,246,255,.65);
    transition: transform .18s ease, border-color .18s ease;
}

.index[open] .index__chev{
    transform: rotate(-135deg);
    border-color: rgba(255,92,27,.85);
}

.index__body{
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 14px 14px 16px;
}

/* Buttons grid inside panel */
.index__nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 10px;
}

/* Reuse your orange pill look, but a bit calmer */
.index__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, var(--brand2) 0%, var(--brand) 55%, #ff4a0f 100%);
    box-shadow: 0 10px 24px rgba(255,92,27,.20), inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
    will-change: transform;
    text-decoration: none;
}

.index__link:hover{
    transform: translateY(-2px);
    filter: saturate(1.06);
    border-color: rgba(255,255,255,.22);
    box-shadow:
            0 14px 34px rgba(255,92,27,.26),
            inset 0 1px 0 rgba(255,255,255,.20);
}

/* Make the bar visually sit closer to hero */
.hero{ padding-bottom: 10px; }

.pagehead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin: 0 0 10px;
}

.pagehead__title{
    margin: 0;          /* важно: чтобы h1 не ломал выравнивание */
}

.index--inline{
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 14px 40px rgba(0,0,0,.28);
    overflow: hidden;
    min-width: 200px;
}

.index__summary--inline{
    padding: 10px 14px;
    justify-content: center;
}

.index__body--inline{
    padding: 12px 12px 14px;
}

/* чтобы “плитки” не растягивали строку и выглядели компактно */
.index--inline .index__nav{
    justify-content: flex-end;
    gap: 10px;
}

/* Mobile: menu goes under title */
@media (max-width: 920px){
    .pagehead{
        flex-direction: column;
        align-items: flex-start;
    }
    .index--inline{
        width: 100%;
        min-width: 0;
    }
    .index--inline .index__nav{
        justify-content: center;
    }
}

/* Mobile header layout */
.topbar__left{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar__actions{
    display:none; /* показываем только на мобиле */
    gap:10px;
    align-items:center;
    justify-content:flex-end;
}

.topbar__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    color:#fff;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, var(--brand2) 0%, var(--brand) 55%, #ff4a0f 100%);
    box-shadow:
            0 10px 20px rgba(255,92,27,.22),
            inset 0 1px 0 rgba(255,255,255,.16);
}

.topbar__link--ghost{
    color: rgba(244,246,255,.92);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    box-shadow:
            0 18px 46px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.06);
}

/* Твоя текущая мобильная точка — max-width:920px */
@media (max-width: 920px){
    .topbar__actions{ display:flex; }
    .nav{ display:none; } /* уже есть, но пусть будет явно */
}

@media (max-width: 430px){
    .brand__logo {
        width: 132px;
        height: 25px;
    }
    .topbar__link {
        min-height: 30px;
        padding: 1px 9px;
        border-radius: 999px;
        font-weight: 900;
        font-size: 11px;
    }

    .topbar__left {
        margin-left: -15px;
    }

    .indexbar {
        display: none;
    }
    .footer__links {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
    }
}


/* Mobile horizontal scroll for table */
@media (max-width: 768px) {
    .table {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table__row {
        min-width: 780px; /* гарантирует, что все 5 колонок поместятся */
    }

    .table__cell {
        white-space: nowrap;
    }
}