:root {
    --mb-text2: #C9D1D6;
    --mb-accent: #FFBC00;
    --mb-border: rgba(255, 255, 255, 0.07);
    --mb-bg2: #131D23;
    /* палитра снята с логотипа и скриншотов бренда; блоки быстрого ответа,
       плашек и характеристик ссылались на эти имена, а объявлены они не были */
    --bg0: #0A0E10;
    --bg1: #0F1519;
    --bg2: #131D23;
    --bg3: #1B262C;
    --bg4: #25323A;
    --accent: #FFBC00;
    --text2: #C9D1D6;
    --text4: #6B787E;
}


* { box-sizing: border-box }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 118px;
}

body {
    margin: 0;
    background-color: #0A0E10;
    background-image: url(/media/pictures/melbet-desen.svg);
    background-repeat: repeat;
    background-size: 340px 340px;
    background-attachment: fixed;
    color: #FFFFFF;
    font: 400 16px/1.65 "Inter", system-ui, sans-serif;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block }
a { color: inherit }

h1, h2, h3, .ttl {
    font-family: "Outfit", "Inter", sans-serif;
    letter-spacing: -.01em;
    margin: 0;
}

.wrap {
    width: min(1240px, 100% - 32px);
    margin-inline: auto;
}

/* ------------------------------------------------------------- шапка */
.hd {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(10, 14, 26, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.hd__in {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
}

.logo {
    display: block;
    flex: none;
    text-decoration: none;
    line-height: 0;
}

.logo img { width: 150px; height: auto }

.hd__nav {
    display: flex;
    gap: 18px;
    margin-left: 22px;
    font-size: 14px;
    color: #C9D1D6;
}

.hd__nav a { text-decoration: none }
.hd__nav a:hover { color: #FFBC00 }

.hd__cta {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #1B262C;
    color: #FFFFFF;
    font: 600 14px/1 "Outfit", sans-serif;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { border-color: rgba(255,255,255,0.12) }

.btn--y {
    background: linear-gradient(180deg, #FFD24D, #FFBC00);
    border-color: #FFBC00;
    color: #15170b;
    font-weight: 700;
}

.btn--y:hover { filter: brightness(1.06) }

.btn--lg { padding: 15px 26px; font-size: 16px; border-radius: 12px }

/* --------------------------------------------------------------- герой */
.hero {
    position: relative;
    padding: 40px 0 28px;
    background:
        radial-gradient(760px 340px at 72% 0%, rgba(255, 188, 0, .13), transparent 62%),
        linear-gradient(180deg, #0F1519, #0A0E10);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.hero__in {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 30px;
    align-items: center;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,188,0,.08);
    color: #FFBC00;
    font: 700 11px/1.2 "Outfit", sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 14px 0 10px;
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 800;
    line-height: 1.07;
}

.hero h1 em { font-style: normal; color: #FFBC00 }

.hero__sub {
    margin: 0 0 20px;
    max-width: 56ch;
    color: #C9D1D6;
    font-size: 17px;
}

.hero__btns { display: flex; flex-wrap: wrap; gap: 10px }

.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.fact {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #131D23;
}

.fact b {
    display: block;
    font: 700 19px/1.2 "Outfit", sans-serif;
    color: #FFBC00;
}

.fact span { font-size: 12.5px; color: #93A0A6 }

.shot {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    background: #131D23;
}

/* --------------------------------------------------------------- блоки */
.card {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #131D23;
}

.card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 7px;
}

.card p { margin: 0; color: #C9D1D6; font-size: 14.5px }

.grid { display: grid; gap: 12px }
.grid--2 { grid-template-columns: repeat(2, 1fr) }
.grid--3 { grid-template-columns: repeat(3, 1fr) }
.grid--4 { grid-template-columns: repeat(4, 1fr) }

.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px }

.tbl th {
    text-align: left;
    padding: 11px 13px;
    background: #1B262C;
    color: #93A0A6;
    font: 600 11.5px/1.2 "Outfit", sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tbl td {
    padding: 11px 13px;
    border-top: 1px solid rgba(255,255,255,0.07);
    color: #C9D1D6;
}

.tbl td:first-child { color: #FFFFFF; font-weight: 600 }

.tbl-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
}

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0 }

.steps li {
    counter-increment: s;
    position: relative;
    padding: 0 0 16px 46px;
    color: #C9D1D6;
    font-size: 14.5px;
}

.steps li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255,188,0,.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #FFBC00;
    font: 700 14px/1 "Outfit", sans-serif;
}

.steps b { color: #FFFFFF; display: block; font-weight: 600 }

.sec__h {
    font-size: clamp(21px, 3vw, 29px);
    font-weight: 800;
    margin-bottom: 6px;
}

.sec__d { margin: 0 0 18px; color: #93A0A6; font-size: 15px }

details.qa {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    background: #131D23;
    margin-bottom: 9px;
}

details.qa summary {
    cursor: pointer;
    padding: 14px 16px;
    font: 600 15px/1.4 "Outfit", sans-serif;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

details.qa summary::-webkit-details-marker { display: none }
details.qa summary::after { content: "+"; color: #FFBC00; font-size: 20px; line-height: 1 }
details.qa[open] summary::after { content: "\2212" }
details.qa p { margin: 0 16px 15px; color: #C9D1D6; font-size: 14.5px }

/* ------------------------------------------------------- мобильный CTA */
.bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(10, 14, 26, .95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.12);
}

.bar .btn { flex: 1 }

/* --------------------------------------------------------------- подвал */
.ft {
    margin-top: 44px;
    padding: 26px 0 34px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: #0F1519;
    color: #93A0A6;
    font-size: 13.5px;
}

.ft__in { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between }
.ft a { color: #C9D1D6; text-decoration: none; margin-right: 14px }

@media (max-width: 1000px) {
    .hero__in { grid-template-columns: 1fr }
    .shot { order: -1; max-width: 330px; margin-inline: auto }
    .hd__nav { display: none }
    .grid--4 { grid-template-columns: repeat(2, 1fr) }
    .grid--3 { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 620px) {
    html { scroll-padding-top: 104px }
    .hero { padding: 26px 0 20px }
    .facts { grid-template-columns: repeat(2, 1fr) }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr }
    .hd__cta .btn--ghost { display: none }
    body { padding-bottom: 68px }
    .bar { display: flex }
}

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px }

.tile {
    display: block;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #131D23;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.tile:hover { border-color: #FFBC00; transform: translateY(-2px) }
.tile b { display: block; font: 700 16px/1.3 "Outfit", sans-serif; margin-bottom: 4px }
.tile span { font-size: 13px; color: #93A0A6 }
.tile i { display: block; width: 24px; height: 24px; color: #FFBC00; margin-bottom: 10px }
.tile i svg { width: 100%; height: 100% }

details.acc {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    background: #131D23;
    margin-bottom: 10px;
    scroll-margin-top: 80px;
}

details.acc > summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 17px/1.3 "Outfit", sans-serif;
}

details.acc > summary::-webkit-details-marker { display: none }
details.acc > summary small { font: 400 13px/1.3 "Inter", sans-serif; color: #93A0A6 }

details.acc > summary::after {
    content: "";
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #FFBC00;
    border-bottom: 2px solid #FFBC00;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

details.acc[open] > summary::after { transform: rotate(-135deg) }
.acc__body { padding: 0 18px 20px }

@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .tiles { grid-template-columns: repeat(2, 1fr) } .tile { padding: 14px } }

/* ----------------------------------------------------------- живой фон */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 46px 0 76px;
    background: transparent;
}

/* стык героя и контента: вместо линии мягкий сход в фон страницы */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    z-index: -1;
    background: linear-gradient(180deg, transparent, #0A0E10 82%);
    pointer-events: none;
}

.hero__bg {
    position: absolute;
    inset: -20% -10%;
    z-index: -2;
}

.hero__bg i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
}

.hero__bg i:nth-child(1) {
    width: 46%;
    aspect-ratio: 1;
    left: 54%;
    top: -14%;
    background: radial-gradient(circle, rgba(255,188,0,.46), transparent 66%);
    animation: mb-drift 17s ease-in-out infinite alternate;
}

.hero__bg i:nth-child(2) {
    width: 40%;
    aspect-ratio: 1;
    left: -6%;
    top: 28%;
    background: radial-gradient(circle, rgba(72,124,255,.34), transparent 66%);
    animation: mb-drift 21s ease-in-out infinite alternate-reverse;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(760px 360px at 50% 18%, #000, transparent 76%);
}

@keyframes mb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1) }
    100% { transform: translate3d(-9%, 7%, 0) scale(1.14) }
}

/* ------------------------------------------------------------- типографика */
.hero h1 {
    margin: 15px 0 12px;
    font-size: clamp(32px, 5.4vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #FFBC00, #ffe5a0 45%, #FFBC00);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mb-sheen 6s linear infinite;
}

@keyframes mb-sheen {
    0%   { background-position: 0% 0 }
    100% { background-position: 220% 0 }
}

.hero__sub { margin: 0 0 22px; max-width: 58ch; color: #C9D1D6; font-size: 17px }

.btn--lg { position: relative; overflow: hidden }

.btn--y.btn--lg::after {
    content: "";
    position: absolute;
    top: 0;
    left: -55%;
    width: 42%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    animation: mb-shine 3.6s ease-in-out infinite;
}

@keyframes mb-shine {
    0%        { left: -55% }
    58%, 100% { left: 125% }
}

/* --------------------------------------------------------------- цифры */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px }

.fact {
    position: relative;
    padding: 14px 15px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
    overflow: hidden;
}

.fact::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 13px;
    border: 1px solid transparent;
    background: linear-gradient(130deg, rgba(255,188,0,.4), transparent 42%) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.fact b { display: block; font: 800 21px/1.15 "Outfit", sans-serif; color: #FFBC00 }
.fact span { font-size: 12.5px; color: #93A0A6 }

/* ------------------------------------------------------ лента коэффициентов */
.ticker {
    margin-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 11px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker__row { display: flex; gap: 10px; width: max-content; animation: mb-run 34s linear infinite }
.ticker:hover .ticker__row { animation-play-state: paused }

.tk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #131D23;
    font-size: 13px;
    color: #C9D1D6;
    white-space: nowrap;
}

.tk u { text-decoration: none; color: #6B787E; font-size: 11.5px }
.tk em { font-style: normal; color: #10B981; font-size: 11px }
.tk b { font: 700 13px/1 "Outfit", sans-serif; color: #FFBC00 }

@keyframes mb-run {
    0%   { transform: translateX(0) }
    100% { transform: translateX(-50%) }
}

/* ------------------------------------------------- карточка приложения */
.appcard {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(135deg, rgba(255,188,0,.10), rgba(17,22,42,.84) 55%);
    backdrop-filter: blur(6px);
}

.appcard__ico {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background: #1B262C;
}

.appcard__name { font: 800 23px/1.15 "Outfit", sans-serif }
.appcard__sub { color: #C9D1D6; font-size: 14.5px; margin-top: 2px }

.appcard__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    color: #93A0A6;
    font: 500 12.5px/1.3 "Inter", sans-serif;
}

.appcard__specs span { display: inline-flex; align-items: center; gap: 6px }

.appcard__specs i {
    width: 15px;
    height: 15px;
    color: #FFBC00;
    flex: none;
}

.pulse {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #10B981;
    font-size: 12.5px;
}

.pulse::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16,185,129,.6);
    animation: mb-pulse 2s ease-out infinite;
}

@keyframes mb-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6) }
    100% { box-shadow: 0 0 0 11px rgba(16,185,129,0) }
}

/* --------------------------------------------------------------- мозаика */
.hero--split .hero__in {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 34px;
    align-items: center;
}

.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px }

.ms {
    position: relative;
    padding: 15px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(17,22,42,.9));
    animation: mb-float 7s ease-in-out infinite;
}

.ms:nth-child(3n+2) { animation-delay: -1.6s }
.ms:nth-child(3n)   { animation-delay: -3.2s }
.ms--wide { grid-column: span 2 }

.ms b { display: block; font: 700 15px/1.2 "Outfit", sans-serif }
.ms span { display: block; margin-top: 3px; font-size: 12px; color: #93A0A6 }
.ms u { text-decoration: none; display: block; margin-top: 8px; font: 800 20px/1 "Outfit", sans-serif; color: #FFBC00 }
.ms--hot { border-color: rgba(255,188,0,.34) }

@keyframes mb-float {
    0%, 100% { transform: translateY(0) }
    50%       { transform: translateY(-7px) }
}

/* ------------------------------------------------------------- доверие */
.trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
    color: #93A0A6;
    font-size: 13.5px;
}

.trust b { color: #C9D1D6; font-weight: 600 }
.trust__pays { display: flex; gap: 8px; margin-left: auto }

/* логотипы платёжных систем нарисованы под светлый фон, на тёмном сливаются —
   поэтому каждая идёт на своей светлой подложке */
.trust__pays span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 32px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #f2f5fa;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}

.trust__pays img { max-width: 100%; max-height: 20px; width: auto; height: auto }

@media (max-width: 1000px) {
    .hero--split .hero__in { grid-template-columns: 1fr }
    .trust__pays { margin-left: 0 }
}

@media (max-width: 620px) {
    .hero { padding: 30px 0 24px }
    .facts { grid-template-columns: repeat(2, 1fr) }
    .appcard { grid-template-columns: auto 1fr; gap: 13px }
    .appcard > .btn { grid-column: 1 / -1; width: 100% }
    .appcard__ico { width: 58px; height: 58px; border-radius: 15px }
    .appcard__name { font-size: 20px }
    .mosaic { grid-template-columns: repeat(2, 1fr) }
    .ms--wide { grid-column: span 2 }
}

@media (prefers-reduced-motion: reduce) {
    .hero__bg i, .hero h1 em, .btn--y.btn--lg::after,
    .ticker__row, .ms, .pulse::before { animation: none }
}

.shelf { padding: 26px 0 4px }

.shelf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }

.shelf__i {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    background: #131D23;
    text-decoration: none;
}

.shelf__i img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: top center;
}

.shelf__lab {
    position: absolute;
    left: 11px;
    top: 11px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #FFBC00;
    color: #15170b;
    font: 700 11.5px/1 "Outfit", sans-serif;
}

.shelf__cap {
    display: block;
    padding: 11px 13px 13px;
    color: #C9D1D6;
    font-size: 13.5px;
}

@media (max-width: 620px) {
    .shelf__grid { grid-template-columns: 1fr }
}

.acc > summary h2 { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit }
.acc__body > p { color: var(--mb-text2); margin: 0 0 13px; font-size: 15px }
.acc__body > p:last-child { margin-bottom: 0 }
.acc__body .shot { width: 100%; height: auto; border-radius: 12px; margin: 4px 0 14px }

/* вертикальный скриншот во всю ширину превращается в мыло — ограничиваем */
.acc__body .shot--tall { width: auto; max-width: 280px; max-height: 560px; margin: 4px auto 16px }

.lst { margin: 0 0 14px; padding: 0; list-style: none }
.lst li { position: relative; padding: 0 0 8px 20px; color: var(--mb-text2); font-size: 14.8px }
.lst li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 2px; background: var(--mb-accent) }

.tbl-wrap { margin: 0 0 14px }
.card__t { font: 700 15.5px/1.35 "Outfit", sans-serif; margin-bottom: 5px }
.grid { margin-bottom: 14px }

.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px }
.spec { padding: 12px 13px; border-radius: 11px; border: 1px solid var(--mb-border); background: var(--mb-bg2) }
.spec__k { display: block; font-size: 11.5px; color: #93A0A6; text-transform: uppercase; letter-spacing: .06em }
.spec__v { display: block; margin-top: 3px; font: 600 14.5px/1.3 "Outfit", sans-serif }

.bns { display: block; padding: 16px; border-radius: 13px; border: 1px solid var(--mb-border); background: var(--mb-bg2); text-decoration: none; color: inherit; transition: border-color .18s ease }
.bns:hover { border-color: var(--mb-accent) }
.bns__tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,188,0,.12); color: var(--mb-accent); font: 700 11px/1 "Outfit", sans-serif; margin-bottom: 8px }
.bns__amt { font: 800 21px/1.1 "Outfit", sans-serif; color: var(--mb-accent); margin-bottom: 6px }
.bns p { margin: 0; color: var(--mb-text2); font-size: 14px }

.qa-list { margin-bottom: 14px }
.link-note { margin: 14px 0 0; color: var(--mb-text2); font-size: 15px }
.link-note a { color: var(--mb-accent) }

.phero { padding: 40px 0 34px }
.phero h1 { margin: 14px 0 10px; font-size: clamp(30px, 5vw, 48px); font-weight: 800; line-height: 1.07 }
.phero .hero__sub { margin-bottom: 20px }

.bio { display: flex; gap: 16px; align-items: flex-start; margin: 30px 0 0; padding: 18px; border-radius: 14px; border: 1px solid var(--mb-border); background: var(--mb-bg2) }
.bio img { width: 64px; height: 64px; border-radius: 50%; flex: none }
.bio b { display: block; font: 700 16px/1.3 "Outfit", sans-serif }
.bio i { font-style: normal; display: block; color: var(--mb-accent); font-size: 13px; margin: 2px 0 7px }
.bio p { margin: 0; color: var(--mb-text2); font-size: 14px }

.crumbs { padding: 14px 0 0; color: #6B787E; font-size: 13px }
.crumbs a { color: var(--mb-text2); text-decoration: none }

.sec-t { font: 700 17px/1.35 "Outfit", sans-serif }
/* длинные неразрывные строки в юридических текстах рвали вёрстку на телефоне */
/* anywhere влияет на расчёт минимальной ширины и схлопывает колонки таблиц,
   поэтому break-word: длинную строку перенесёт, слова рвать не станет */
.plain, .acc__body { overflow-wrap: break-word; word-break: normal }
.tbl th, .tbl td { overflow-wrap: normal }
@media (max-width: 620px) {
    /* на узком экране таблица не ужимается до нечитаемого, а прокручивается */
    .tbl { width: auto; min-width: 100%; font-size: 13.5px }
    .tbl th, .tbl td { padding: 10px 11px }
    .tbl td, .tbl th { white-space: normal }
    .tbl td:first-child { min-width: 92px }
    .tbl-wrap { -webkit-overflow-scrolling: touch }
    /* зона нажатия у логотипа — по размеру пальца, вид не меняется */
    .logo { padding: 9px 0; margin: -9px 0 }
}
.plain { padding: 4px 0 10px }
.plain > p { color: var(--mb-text2); margin: 0 0 13px; font-size: 15px }

.lang { position: relative; flex: none }
.lang > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px;
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--mb-border);
  background: var(--mb-bg2); font: 600 13px/1 "Outfit", sans-serif; color: var(--mb-text2) }
.lang > summary::-webkit-details-marker { display: none }
.lang > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px) }
.lang[open] > summary { border-color: var(--mb-accent); color: var(--mb-accent) }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 170px;
  margin: 0; padding: 6px; list-style: none; border-radius: 12px; border: 1px solid var(--mb-border);
  background: #101920; box-shadow: 0 16px 40px rgba(0,0,0,.55) }
.lang li a { display: flex; justify-content: space-between; gap: 14px; padding: 9px 11px;
  border-radius: 8px; text-decoration: none; color: var(--mb-text2); font-size: 14px }
.lang li a:hover { background: rgba(255,255,255,.05); color: #fff }
.lang li a b { color: var(--mb-accent); font: 700 12px/1.4 "Outfit", sans-serif }

@media (max-width: 620px) { .lang > summary { padding: 9px 11px } }
.sub { margin: 18px 0 9px; font: 700 15.5px/1.35 "Outfit", sans-serif; color: #fff }
h4.sub, h4.card__t { font-size: 15px }
h5.sub { font-size: 14.5px; color: var(--mb-text2) }
h6.sub { font-size: 14px; color: var(--mb-text2) }
.acc__body > .sub:first-child { margin-top: 0 }

.ft { margin-top: 44px; padding: 34px 0 26px; border-top: 1px solid var(--mb-border); background: #0F1519 }
.ft__top { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 26px }
.ft__brand img { margin-bottom: 12px }
.ft__brand p { margin: 0 0 12px; color: var(--mb-text2); font-size: 13.5px; max-width: 34ch }
.ft__badges { display: flex; gap: 8px; flex-wrap: wrap }
.ft__badge { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--mb-border); color: var(--mb-text2); font-size: 12px }
.ft__badge--age { border-color: rgba(255,188,0,.4); color: var(--mb-accent); font-weight: 700 }
.ft__col .ft__t { font: 700 14.5px/1.3 "Outfit", sans-serif; color: #fff; margin-bottom: 10px }
.ft__col a { display: block; margin-bottom: 7px; color: var(--mb-text2); text-decoration: none; font-size: 13.5px }
.ft__col a:hover { color: var(--mb-accent) }
.ft__pay { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; padding-top: 20px; border-top: 1px solid var(--mb-border) }
.ft__pay span { display: grid; place-items: center; width: 64px; height: 32px; padding: 5px 8px; border-radius: 8px; background: #f2f5fa }
.ft__pay img { max-width: 100%; max-height: 20px; width: auto; height: auto }
.ft__note p { margin: 0 0 6px; color: #6B787E; font-size: 12.5px }
.ft__meta { color: #4f5a60 }

@media (max-width: 900px) { .ft__top { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .ft__top { grid-template-columns: 1fr } }

@media (max-width: 760px) { .specs { grid-template-columns: repeat(2, 1fr) } }

.tldr { margin: 26px 0 4px; padding: 20px 22px; border-radius: 16px;
    background: linear-gradient(180deg, var(--bg3), var(--bg2));
    border: 1px solid rgba(255, 188, 0, .22) }
.tldr__badge { display: inline-block; font: 700 11px/1 "Outfit", sans-serif;
    letter-spacing: .08em; text-transform: uppercase; color: var(--bg0);
    background: var(--accent); padding: 6px 10px; border-radius: 999px }
.tldr__title { font: 700 clamp(19px, 2.4vw, 25px)/1.25 "Outfit", sans-serif;
    color: #fff; margin: 12px 0 14px }
.tldr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px }
.tldr__item { padding: 13px 15px; border-radius: 12px; background: var(--bg1);
    border: 1px solid var(--bg4) }
.tldr__item--wide { grid-column: span 2 }
.tldr__q { display: block; font: 700 12px/1.3 "Outfit", sans-serif;
    letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 6px }
.tldr__a { display: block; font: 400 14.5px/1.6 "Inter", sans-serif;
    color: var(--text2) }
.tldr__a b { color: #fff }
.tldr__sign { font: 400 13px/1.5 "Inter", sans-serif; color: var(--text4);
    margin: 14px 0 0 }
@media (max-width: 640px) {
    .tldr { padding: 17px 15px }
    .tldr__grid { grid-template-columns: 1fr }
    .tldr__item--wide { grid-column: span 1 }
}
[dir="rtl"] .tldr, [dir="rtl"] .tldr__title, [dir="rtl"] .tldr__sign { text-align: right }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px }
.chips span { padding: 5px 11px; border-radius: 999px; background: var(--bg3);
    border: 1px solid var(--bg4); color: var(--text2);
    font: 500 13px/1.3 "Inter", sans-serif; white-space: nowrap }
@media (max-width: 620px) { .chips span { font-size: 12.5px; padding: 4px 9px } }

.spec__v { overflow-wrap: anywhere }

.grid .card:only-child { grid-column: 1 / -1 }
.card .lst { margin: 8px 0 0 }
.card .lst li { padding-bottom: 6px }

.ft__t { font: 700 15px/1.3 "Outfit", sans-serif; color: #fff; margin-bottom: 9px }
.ft a { display: block; margin: 0 0 6px }

/* rtl-block */
[dir="rtl"] .hd__nav { margin-left: 0; margin-right: 22px }
[dir="rtl"] .hd__cta { margin-left: 0; margin-right: auto }
[dir="rtl"] .lang ul { right: auto; left: 0 }
[dir="rtl"] .steps li { padding: 0 46px 16px 0 }
[dir="rtl"] .steps li::before { left: auto; right: 0 }
[dir="rtl"] .lst li { padding: 0 20px 8px 0 }
[dir="rtl"] .lst li::before { left: auto; right: 2px }
[dir="rtl"] .tbl th, [dir="rtl"] .tbl td { text-align: right }
[dir="rtl"] .acc > summary::after { margin-left: 0; margin-right: auto }
[dir="rtl"] .hero h1, [dir="rtl"] .hero__sub, [dir="rtl"] .crumbs { text-align: right }
[dir="rtl"] .shelf__lab { left: auto; right: 11px }
[dir="rtl"] .bio { flex-direction: row-reverse; text-align: right }
[dir="rtl"] .ft__col a { text-align: right }
/* цифры и латиница внутри арабского текста не должны переворачиваться */
[dir="rtl"] .spec__v, [dir="rtl"] .fact b, [dir="rtl"] .bns__amt,
[dir="rtl"] .appcard__specs { direction: ltr; unicode-bidi: isolate }
/* значение вроде «14.88 MB» в арабском контексте переворачивалось в
   «MB 14.88»: plaintext задаёт направление по первому сильному символу,
   поэтому латиница и числа читаются слева направо, а арабский — справа */
[dir="rtl"] .spec__v, [dir="rtl"] .spec__k,
[dir="rtl"] .tbl td, [dir="rtl"] .tbl th,
[dir="rtl"] .chips span, [dir="rtl"] .tldr__a { unicode-bidi: plaintext }
[dir="rtl"] .appcard__specs { justify-content: flex-end }