/* ==========================================================================
   Sorry ISP — лендинг. Тёмный неоновый «уличный» стиль: почти чёрный фон,
   гигантская жирная типографика, оранжевый призыв, лаймово-зелёные акценты.
   Всё локально: ни одного внешнего запроса, вся графика — вектор и CSS.
   ========================================================================== */

:root {
    /* фон и поверхности */
    --bg: #0A0A0B;
    --bg-2: #0D0D0F;
    --panel: #101013;
    --panel-2: #151519;
    --line: #212126;
    --line-2: #303039;

    /* акценты */
    --green: #7CFF3F;
    --green-ink: #A6FF7A;          /* зелёный для мелкого текста — контраст выше */
    --green-soft: rgba(124, 255, 63, .10);
    --green-line: rgba(124, 255, 63, .35);
    --orange: #FF6A1A;
    --orange-2: #FF8C45;
    --orange-soft: rgba(255, 106, 26, .12);
    --orange-glow: rgba(255, 106, 26, .42);

    /* текст */
    --text: #FFFFFF;
    --gray: #9A9AA2;
    --gray-2: #8A8A93;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", "Courier New", monospace;

    --max: 1280px;
    --pad: clamp(16px, 4vw, 32px);
    --r: 4px;
    --r-2: 8px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 900; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--green-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--orange); color: #0A0A0B; }

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 2px;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    left: 12px; top: -70px;
    z-index: 200;
    padding: 12px 18px;
    background: var(--orange);
    color: #0A0A0B;
    font: 800 12px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: var(--r);
    transition: top .15s ease;
}
.skip:focus { top: 12px; text-decoration: none; }

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* ---------- типографика ---------- */

.display {
    font-size: clamp(38px, 12.5vw, 176px);
    line-height: .86;
    letter-spacing: -.045em;
    text-transform: uppercase;
    font-weight: 900;
    margin: 0 0 24px;
}

.s-title {
    font-size: clamp(34px, 6.4vw, 76px);
    line-height: .9;
    letter-spacing: -.035em;
    text-transform: uppercase;
    font-weight: 900;
    margin: 0 0 14px;
}

.s-lead {
    max-width: 62ch;
    margin: 0;
    color: var(--gray);
    font-size: clamp(15px, 1.5vw, 18px);
}

.s-title-sm { font-size: clamp(28px, 4.4vw, 50px); }

.note-inline {
    margin: 24px 0 0;
    color: var(--gray-2);
    font-size: 14px;
    max-width: 72ch;
}

.hl { color: var(--orange); }
.hl-g { color: var(--green); }

.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font: 700 12px/1 var(--mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--green);
}
.kicker::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--green);
    opacity: .6;
}

.mono { font-family: var(--mono); font-size: .92em; }

/* ---------- кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: var(--panel-2);
    color: var(--text);
    font: 800 13px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease,
                box-shadow .16s ease, transform .16s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-orange {
    background: var(--orange);
    color: #0A0A0B;
    box-shadow: 0 6px 24px -6px var(--orange-glow);
}
.btn-orange:hover {
    background: var(--orange-2);
    box-shadow: 0 10px 34px -6px var(--orange-glow), 0 0 0 1px rgba(255, 140, 69, .5);
}

.btn-line {
    background: transparent;
    border-color: var(--line-2);
    color: var(--text);
}
.btn-line:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-soft);
}

.btn-green {
    background: var(--green);
    color: #0A0A0B;
    box-shadow: 0 6px 24px -8px rgba(124, 255, 63, .5);
}
.btn-green:hover { background: #93FF63; }

.btn-xl {
    padding: 22px 38px;
    font-size: clamp(15px, 1.6vw, 20px);
    border-radius: 6px;
    letter-spacing: .06em;
}
.btn-sm { padding: 10px 16px; font-size: 11.5px; }
.btn-block { width: 100%; }

/* ---------- шапка ---------- */

.hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 11, .86);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hdr-in {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
}

.logo {
    display: inline-flex;
    align-items: baseline;
    font: 900 clamp(20px, 2.4vw, 26px)/1 var(--sans);
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo .lw { display: inline-block; }
.logo .isp { color: var(--orange); }
/* смайл стоит на месте буквы «o»: размер в em, низ — по базовой линии текста.
   overflow виден, чтобы покачивание не обрезалось вьюбоксом */
.logo .smiley {
    /* круг занимает 93 из 100 единиц вьюбокса, поэтому .84em даёт круг
       чуть выше прописных букв (см. проверку метрик в audit-runtime.js) */
    width: .84em;
    height: .84em;
    align-self: baseline;
    /* низ круга садится на базовую линию с заходом ~1 % под неё, как у «o».
       transform не влияет на раскладку — строка не разъезжается */
    transform: translateY(.04em);
    margin: 0;
    overflow: visible;
}
/* крупный логотип (блок «О нас») — та же анимация, но выразительнее */
.logo-lg { font-size: clamp(30px, 6vw, 62px); letter-spacing: -.05em; }
.about > .logo-lg { justify-self: start; }

.menu { display: none; margin-inline: auto; }
.menu a {
    padding: 9px 14px;
    color: var(--gray);
    font: 700 12px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: var(--r);
}
.menu a:hover {
    color: var(--green);
    background: var(--green-soft);
    text-decoration: none;
}

.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr-actions .btn-line { display: none; }

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.burger:hover { border-color: var(--green); color: var(--green); }

.m-nav {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}
.m-nav[data-open="true"] { display: block; }
.m-nav ul { max-width: var(--max); margin-inline: auto; padding: 6px var(--pad) 20px; }
.m-nav a {
    display: block;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font: 800 14px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.m-nav a:hover { color: var(--green); text-decoration: none; }
.m-nav .mt { margin-top: 16px; }

/* ==========================================================================
   Первый экран: кирпичная стена, неоновые потоки, граффити, стикеры
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* кирпичная кладка: рисунок задан data-URI, внешних файлов нет */
.wall {
    position: absolute;
    inset: 0;
    background-color: #0A0A0B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='62' viewBox='0 0 132 62'%3E%3Crect width='132' height='62' fill='%230A0A0C'/%3E%3Cg fill='%23181A1D'%3E%3Crect x='2' y='2' width='62' height='26' rx='2'/%3E%3Crect x='68' y='2' width='62' height='26' rx='2'/%3E%3Crect x='-31' y='34' width='62' height='26' rx='2'/%3E%3Crect x='35' y='34' width='62' height='26' rx='2'/%3E%3Crect x='101' y='34' width='62' height='26' rx='2'/%3E%3C/g%3E%3Cg fill='%23080809' opacity='.6'%3E%3Crect x='10' y='8' width='26' height='3' rx='1.5'/%3E%3Crect x='78' y='40' width='30' height='3' rx='1.5'/%3E%3Crect x='42' y='40' width='16' height='3' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 132px 62px;
}

/* свет от фонаря + виньетка + затемнение под текстом */
.wall::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 44% at 18% 24%, rgba(255, 106, 26, .12), rgba(255, 106, 26, 0) 72%),
        radial-gradient(40% 48% at 88% 70%, rgba(124, 255, 63, .11), rgba(124, 255, 63, 0) 72%),
        radial-gradient(86% 66% at 50% 46%, rgba(10, 10, 11, 0) 34%, rgba(10, 10, 11, .78) 100%),
        linear-gradient(180deg, rgba(10, 10, 11, .5) 0%, rgba(10, 10, 11, .14) 44%, rgba(10, 10, 11, .9) 100%);
}

.streams,
.tags {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* неоновые потоки данных */
.flow-base path { stroke: var(--green); stroke-opacity: .14; stroke-width: 2; fill: none; }
.flow-pulse path {
    stroke: var(--green);
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 70 900;
    animation: flow 7s linear infinite;
}
.flow-pulse path:nth-child(2) { animation-duration: 9s; animation-delay: -2s; stroke-width: 2; }
.flow-pulse path:nth-child(3) { animation-duration: 11s; animation-delay: -5s; }
.flow-pulse path:nth-child(4) { animation-duration: 8s; animation-delay: -3.5s; stroke-width: 2.8; }
.flow-pulse path:nth-child(5) { animation-duration: 13s; animation-delay: -7s; stroke-width: 1.8; }

@keyframes flow {
    from { stroke-dashoffset: 970; }
    to   { stroke-dashoffset: 0; }
}

/* граффити-теги на стене */
.tags path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tags .t-g { stroke: var(--green); stroke-opacity: .16; }
.tags .t-o { stroke: var(--orange); stroke-opacity: .14; }
.tags .t-w { stroke: #FFFFFF; stroke-opacity: .07; }

/* цифры 0 и 1, «осыпающиеся» по стене */
.bits { position: absolute; inset: 0; overflow: hidden; }
.bit {
    position: absolute;
    font: 700 14px/1 var(--mono);
    color: var(--green);
    opacity: .22;
    animation: blink 6s steps(1, end) infinite;
}
.bit:nth-child(3n) { animation-duration: 8s; animation-delay: -2s; }
.bit:nth-child(3n + 1) { animation-duration: 10s; animation-delay: -4s; }
@keyframes blink {
    0%, 62% { opacity: .22; }
    63%, 70% { opacity: .06; }
    71%, 100% { opacity: .22; }
}

/* стикеры-подписи */
.sticker {
    position: absolute;
    padding: 7px 11px;
    border: 1px solid var(--green-line);
    border-radius: 3px;
    background: rgba(10, 10, 11, .82);
    color: var(--green);
    font: 700 10.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 22px -8px rgba(124, 255, 63, .5);
}
.sticker.o {
    border-color: rgba(255, 106, 26, .5);
    color: var(--orange);
    box-shadow: 0 0 22px -8px var(--orange-glow);
}
.st-1 { top: 86px; right: 4%; transform: rotate(-4deg); }
.st-2 { top: 128px; right: 12%; transform: rotate(3deg); }
.st-3 { top: 176px; right: 5%; transform: rotate(-2deg); }

/* строчки «кода» по краям */
.ecode {
    position: absolute;
    color: var(--gray-2);
    font: 500 11px/1.7 var(--mono);
    letter-spacing: .04em;
    opacity: .42;
    white-space: pre;
}
.ec-1 { top: 22px; left: 2%; }
.ec-2 { top: 250px; right: 1.5%; text-align: right; }
.ec-3 { bottom: 20%; right: 1.5%; text-align: right; }

.hero-in {
    position: relative;
    z-index: 2;
    /* только padding-block: shorthand обнулил бы боковые отступы .wrap */
    padding-block: clamp(40px, 6vw, 84px) clamp(28px, 4vw, 52px);
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 8px 14px;
    border: 1px solid var(--green-line);
    border-radius: 999px;
    background: rgba(10, 10, 11, .7);
    color: var(--green);
    font: 700 11px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.hero-kicker .pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 255, 63, .55); }
    70% { box-shadow: 0 0 0 12px rgba(124, 255, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 255, 63, 0); }
}

.hero-sub {
    max-width: 44ch;
    margin: 0 0 34px;
    color: var(--gray);
    font-size: clamp(16px, 1.8vw, 21px);
}
.hero-sub b { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.platforms { display: flex; align-items: center; gap: 12px; }
.platforms .p-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: rgba(16, 16, 19, .82);
    color: var(--gray);
    transition: color .16s ease, border-color .16s ease;
}
.platforms .p-ico:hover { color: var(--green); border-color: var(--green); }
.platforms .p-txt {
    color: var(--gray-2);
    font: 700 10.5px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-note {
    margin: 30px 0 0;
    color: var(--gray-2);
    font: 700 11px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* полоса технических данных под первым экраном */
.stats {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    background: rgba(10, 10, 11, .72);
}
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 18px 4px; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 14px; }
.stat dt {
    margin-bottom: 7px;
    color: var(--gray-2);
    font: 700 10.5px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.stat dd {
    margin: 0;
    color: var(--green);
    font: 800 15px/1 var(--mono);
    letter-spacing: .02em;
}

/* ---------- секции ---------- */

.sec { padding: clamp(56px, 9vw, 120px) 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-alt { background: var(--bg-2); }
section[id] { scroll-margin-top: 84px; }

.s-head { max-width: 780px; margin-bottom: clamp(30px, 5vw, 52px); }

/* ---------- почему мы ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
}
.card {
    padding: 30px 26px 34px;
    background: var(--panel);
    transition: background-color .18s ease;
}
.card:hover { background: var(--panel-2); }
.card .num {
    display: block;
    margin-bottom: 22px;
    color: var(--green);
    font: 700 11.5px/1 var(--mono);
    letter-spacing: .2em;
}
.card .ico { display: block; margin-bottom: 18px; color: var(--green); }
.card h3 {
    margin: 0 0 10px;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.card p { margin: 0; color: var(--gray); font-size: 14.5px; }

/* ---------- тарифы ---------- */

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
    gap: 16px;
    align-items: stretch;
}
.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--panel);
    transition: border-color .18s ease, transform .18s ease;
}
.plan:hover { border-color: var(--line-2); transform: translateY(-3px); }
.plan.pop {
    border-color: var(--green-line);
    background: linear-gradient(180deg, rgba(124, 255, 63, .05), rgba(124, 255, 63, 0) 40%), var(--panel);
    box-shadow: 0 24px 70px -40px rgba(124, 255, 63, .8);
}
.badge {
    position: absolute;
    top: -12px; left: 22px;
    padding: 6px 10px;
    border-radius: 3px;
    background: var(--green);
    color: #0A0A0B;
    font: 800 10.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* «Выгоднее всего» — вторичная плашка, чтобы не спорила с «Популярным» */
.badge-alt {
    background: var(--bg);
    border: 1px solid var(--green-line);
    color: var(--green);
}
.plan h3 {
    margin: 0 0 16px;
    font-size: 17px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.price { display: flex; align-items: baseline; gap: 9px; margin: 0 0 6px; flex-wrap: wrap; }
.price .amount {
    font-size: clamp(34px, 3.6vw, 46px);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1;
}
.price .per {
    color: var(--gray-2);
    font: 700 11px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.per-month {
    min-height: 14px;
    margin: 0 0 20px;
    color: var(--gray-2);
    font: 700 11px/1 var(--mono);
    letter-spacing: .1em;
}
.plan-specs {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
}
.plan-specs li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--gray);
    font-size: 14px;
}
.plan-specs .plus { flex: none; color: var(--green); font: 700 13px/1.5 var(--mono); }
.plan .btn { margin-top: auto; }

/* ---------- как это работает ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
}
.step { padding: 30px 26px 34px; background: var(--panel); }
.step-num {
    display: block;
    margin-bottom: 18px;
    font: 900 clamp(38px, 5vw, 58px)/1 var(--sans);
    letter-spacing: -.04em;
    color: var(--green);
}
@supports (-webkit-text-stroke: 1px black) {
    .step-num { color: transparent; -webkit-text-stroke: 1.5px var(--green); }
}
.step h3 {
    margin: 0 0 8px;
    font-size: clamp(18px, 1.9vw, 22px);
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.step p { margin: 0; color: var(--gray); font-size: 14.5px; }

/* ---------- приложения ---------- */

.apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.app {
    display: flex;
    flex-direction: column;
    padding: 26px 22px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--panel);
}
.app-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.app-head .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--panel-2);
    color: var(--green);
}
.app-head h3 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; }
.app-os {
    margin: 0 0 20px;
    color: var(--gray-2);
    font: 700 11px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.dl-list { display: grid; gap: 10px; margin-top: auto; }
.dl {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel-2);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 600;
    transition: border-color .16s ease, background-color .16s ease;
}
.dl:hover { border-color: var(--orange); background: #191307; text-decoration: none; }
.dl .ico { flex: none; color: var(--orange); }
.dl .size {
    margin-left: auto;
    color: var(--gray-2);
    font: 700 11px/1 var(--mono);
    letter-spacing: .1em;
    white-space: nowrap;
}

/* ---------- оплата криптой ---------- */

.panel {
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: linear-gradient(180deg, rgba(255, 106, 26, .06), rgba(255, 106, 26, 0) 55%), var(--panel);
}
.crypto-grid { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
.crypto-grid p { color: var(--gray); max-width: 58ch; }
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; color: var(--gray); font-size: 14.5px; }
.checklist .mark { flex: none; color: var(--green); font: 800 13px/1.6 var(--mono); }

.coins { display: flex; flex-wrap: wrap; gap: 10px; }
.coin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--panel-2);
}
.coin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--green-line);
    border-radius: 50%;
    color: var(--green);
    font-size: 16px;
    font-weight: 700;
}
.coin .sym { display: block; font: 800 13px/1.3 var(--mono); letter-spacing: .08em; }
.coin .net {
    display: block;
    color: var(--gray-2);
    font: 700 10.5px/1.3 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- о нас ---------- */

.about {
    display: grid;
    gap: 26px;
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    border-radius: var(--r-2);
    background: var(--panel);
}
.about-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.about p { margin: 0 0 14px; color: var(--gray); font-size: clamp(15px, 1.5vw, 17px); }
.about p:last-child { margin-bottom: 0; }
.about strong { color: var(--text); font-weight: 700; }
.about .fine {
    padding-top: 16px;
    border-top: 1px dashed var(--line-2);
    color: var(--gray-2);
    font: 700 11.5px/1.7 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 8px; max-width: 900px; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
}
.faq-item[open] { border-color: var(--green-line); background: var(--panel-2); }
.faq-item summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    color: var(--text);
    font: 800 13.5px/1.4 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "+";
    flex: none;
    color: var(--green);
    font: 800 18px/1 var(--mono);
}
.faq-item[open] summary::before { content: "−"; }
.faq-item summary:hover { color: var(--green); }
.faq-body { padding: 0 20px 20px 52px; color: var(--gray); font-size: 14.5px; }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------- подвал ---------- */

.foot {
    padding: clamp(44px, 6vw, 72px) 0 30px;
    border-top: 1px solid var(--line);
    background: #08080A;
    color: var(--gray);
}
.foot-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
.foot-brand .logo { margin-bottom: 14px; }
.foot-brand p { margin: 0 0 6px; max-width: 44ch; color: var(--gray-2); font-size: 14px; }
.foot-nav { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.foot-nav h2 {
    margin: 0 0 14px;
    color: var(--gray-2);
    font: 700 10.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
}
.foot-nav ul { display: grid; gap: 11px; }
.foot-nav a { color: var(--gray); font-size: 14.5px; overflow-wrap: break-word; }
.foot-nav a:hover { color: var(--green); }

.foot-mark {
    margin: clamp(40px, 6vw, 72px) 0 0;
    font: 900 clamp(24px, 7.2vw, 100px)/.85 var(--sans);
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-2);
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}
.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: center;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.foot-bottom p {
    margin: 0;
    color: var(--gray-2);
    font: 700 11px/1.6 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.foot-bottom .spacer { margin-left: auto; }

/* ---------- служебные страницы ---------- */

.doc { max-width: 820px; padding-block: clamp(40px, 7vw, 88px) 0; }
.doc h1 {
    margin: 0 0 14px;
    font-size: clamp(30px, 5.6vw, 62px);
    line-height: .92;
    letter-spacing: -.035em;
    text-transform: uppercase;
}
.doc h2 {
    margin: 38px 0 12px;
    font-size: clamp(18px, 2.2vw, 24px);
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.doc p, .doc li { color: var(--gray); font-size: 15px; }
.doc ul { display: grid; gap: 9px; margin: 0 0 1em; }
.doc li { position: relative; padding-left: 18px; }
.doc li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--green);
    font: 800 13px/1.6 var(--mono);
}
.doc .updated {
    margin-bottom: 28px;
    color: var(--gray-2);
    font: 700 11px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.notice {
    margin: 20px auto;
    padding: 18px 20px;
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--orange);
    border-radius: var(--r);
    background: var(--panel);
    color: var(--gray);
    font-size: 14.5px;
}

/* ==========================================================================
   Адаптив: контрольные ширины 360 / 768 / 1280 / 1920
   ========================================================================== */

@media (max-width: 359px) {
    /* совсем узкие экраны: в шапке остаётся только логотип и меню,
       кнопка «Подключить» живёт в бургер-меню и в первом экране */
    .hdr-actions .btn-orange { display: none; }
}

@media (max-width: 599px) {
    .st-2, .st-3 { display: none; }
}

@media (max-width: 719px) {
    .hero-note { margin-top: 24px; }
    .stat { padding: 14px 2px; }
    .stat + .stat { padding-left: 10px; }
    .stat dt { letter-spacing: .12em; }
}

/* стикеры и «код» — только там, где не мешают заголовку */
@media (max-width: 1199px) {
    .sticker, .ecode { display: none; }
}

@media (min-width: 600px) {
    .stat { padding: 22px 6px; }
    .stat + .stat { padding-left: 20px; }
    .foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 40px; }
}

@media (min-width: 720px) {
    .crypto-grid { grid-template-columns: 1.35fr 1fr; gap: 34px; }
    .crypto-grid .coins { align-self: center; }
}

@media (min-width: 900px) {
    .hdr-actions .btn-line { display: inline-flex; }
    .about-grid { grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
}

@media (min-width: 1000px) {
    .menu { display: flex; align-items: center; gap: 4px; }
    .burger { display: none; }
    .m-nav { display: none !important; }
}

@media (min-width: 1600px) {
    :root { --max: 1420px; }
}

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