/* Лендинг AID APP в языке главной приложения: синее небо сверху, тёмный фон,
   крупные плитки без рамок и свечений, один синий акцент — на главной кнопке. */

:root {
    --bg: #0b0d12;
    --panel: rgba(16, 19, 26, 0.72);
    --panel-solid: #12151c;
    --accent: #3282d7;
    --muted: rgba(255, 255, 255, 0.62);
    --soft: rgba(255, 255, 255, 0.08);
    --r: 1.75rem;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img, svg, canvas { display: block; }

.wrap {
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Небо: тот же переход, что на главной приложения. */
.sky {
    position: absolute;
    inset: 0 0 auto 0;
    height: 62rem;
    z-index: -1;
    background: linear-gradient(180deg, #2452a0 0%, #1e3f7c 16%, #1a2c52 36%, #141b2e 60%, #0d1018 84%, var(--bg) 100%);
}

/* ───── Кнопки ───── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3.375rem;
    padding: 0 1.5rem;
    border-radius: 1.125rem;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.14s ease, filter 0.15s ease, background 0.15s ease;
}

.btn:active { transform: scale(0.965); }
.btn--sm { height: 2.5rem; padding: 0 1rem; border-radius: 0.875rem; font-size: 0.875rem; }
.btn--primary { background: var(--accent); }
.btn--soft { background: rgba(255, 255, 255, 0.1); }
.btn--white { background: #fff; color: #0f1620; }
.btn--glass { background: rgba(255, 255, 255, 0.16); }

@media (hover: hover) and (pointer: fine) {
    .btn:hover { filter: brightness(1.1); }
    .btn--soft:hover, .btn--glass:hover { filter: none; background: rgba(255, 255, 255, 0.2); }
}

/* ───── Шапка ───── */

.nav {
    position: fixed;
    z-index: 20;
    top: 0.75rem;
    left: 50%;
    width: calc(100% - 1.5rem);
    max-width: 74rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.75rem;
    padding: 0 0.625rem 0 1rem;
    border-radius: 1.375rem;
    transition: background 0.25s ease;
}

.nav.is-stuck {
    background: var(--panel);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
}

.nav__logo { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; letter-spacing: -0.01em; }
.nav__logo b { font-weight: 800; }
.nav__links { display: none; margin: 0 auto; gap: 0.25rem; }
.nav__links a {
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.15s ease, background 0.15s ease;
}
.nav__act { display: flex; gap: 0.5rem; margin-left: auto; }
.nav__tg { display: none; }

@media (hover: hover) and (pointer: fine) {
    .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
}

/* ───── Первый экран ───── */

.hero { padding: 7.5rem 0 3rem; }
.hero__in { display: grid; gap: 1.5rem; }

.hero__h {
    font-size: clamp(2.625rem, 11.2vw, 5.5rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.hero__h span { display: block; color: rgba(255, 255, 255, 0.5); }

.hero__p {
    max-width: 33rem;
    margin-top: 1.25rem;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}

.hero__act { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }
.hero__act .btn { flex: 1 1 12rem; }

/* Сцена: сфера из частиц и плашки вокруг. */
.stage {
    position: relative;
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 1 / 0.86;
    margin: 0 auto;
}

.stage__orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.chip {
    --dx: 0px;
    --dy: 0px;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.875rem 0.5625rem 0.5625rem;
    border-radius: 1.125rem;
    background: rgba(16, 19, 26, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    white-space: nowrap;
    translate: var(--dx) var(--dy);
    animation: chip-float 7s ease-in-out infinite;
    transition: translate 0.5s var(--ease);
}

.chip b { display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
.chip small { display: block; font-size: 0.75rem; line-height: 1.25; color: var(--muted); }

.chip--1 { top: 4%; left: 0; }
.chip--2 { top: 20%; right: 0; animation-delay: -2.2s; }
.chip--3 { top: 47%; left: 2%; animation-delay: -4.1s; }
.chip--4 { bottom: 16%; right: 2%; animation-delay: -1.3s; }
.chip--5 { bottom: 0; left: 12%; animation-delay: -5.4s; }

@keyframes chip-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -0.5rem, 0); }
}

/* Значки вендоров. */
.vi {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-style: normal;
}

.vi svg, .vi img { width: 58%; height: 58%; }
.vi--xs { width: 1.375rem; height: 1.375rem; border-radius: 0.4375rem; }
.vi--openai { background: #10a37f; }
.vi--anthropic { background: #d97757; }
.vi--google { background: linear-gradient(135deg, #4285f4 0%, #9b72cb 55%, #d96570 100%); }
.vi--deepseek { background: #4d6bfe; }
.vi--xai { background: #000; }
.vi--qwen { background: #615ced; }
.vi--mistral { background: #fa520f; }
.vi--meta { background: #0668e1; }
.vi--perplexity { background: #20808d; }
.vi--steam { background: #1b2838; }
.vi--star { background: linear-gradient(150deg, #7a5a10 0%, #3d2d0a 100%); color: #ffc83d; }

/* ───── Разделы ───── */

.chapter { padding: 3.5rem 0 0; }
.chead { margin-bottom: 1.5rem; }

.chead__mark { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; font-size: 1rem; }
.chead__mark b { font-weight: 700; }
.chead__mark em {
    padding: 0.1875rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; overflow: hidden; }
.mark img { width: 62%; height: auto; }
.mark--ai { background: #161616; }
.mark--pay { background: linear-gradient(160deg, #2ea8ff, #0a84f0); }

.chead__h {
    max-width: 46rem;
    font-size: clamp(1.875rem, 6.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.chead__p { max-width: 34rem; margin-top: 0.75rem; font-size: clamp(1rem, 2vw, 1.1875rem); color: var(--muted); }

/* ───── Плитки ───── */

.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 0.625rem;
}

.t {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    grid-column: span 6;
    min-height: 9rem;
    padding: 1.125rem;
    border-radius: var(--r);
    background: var(--panel-solid);
    color: #fff;
    transition: transform 0.14s ease, filter 0.15s ease;
}

a.t:active { transform: scale(0.975); }

@media (hover: hover) and (pointer: fine) {
    a.t:hover { filter: brightness(1.08); }
}

.t__t {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.t__s { max-width: 24rem; margin-top: 0.3125rem; font-size: 0.875rem; line-height: 1.35; color: rgba(255, 255, 255, 0.66); }

.t__go {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    height: 2.25rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border-radius: 0.875rem;
    background: #fff;
    color: #0f1620;
    font-size: 0.875rem;
    font-weight: 700;
}

.t__go::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(50, 130, 215, 0.35) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-130%);
    animation: shine 5s ease-in-out 1.2s infinite;
}

@keyframes shine {
    0%, 72% { transform: translateX(-130%); }
    100% { transform: translateX(130%); }
}

/* — AID AI — */

.t-models {
    height: 27rem;
    padding-bottom: 0;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(138, 92, 240, 0.32) 0%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(150deg, #1d4f86 0%, #13233f 60%, #101a2e 100%);
}

.wall {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin: 1rem -0.375rem 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
}

.wall__col { display: flex; flex-direction: column; gap: 0.5rem; animation: wall-up 52s linear infinite; }
.wall__col:nth-child(2) { display: none; animation-duration: 64s; animation-direction: reverse; }
.wall:hover .wall__col { animation-play-state: paused; }

@keyframes wall-up {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, calc(-50% - 0.25rem), 0); }
}

.mrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.75rem 0.5625rem 0.5625rem;
    border-radius: 1rem;
    background: rgba(8, 12, 22, 0.42);
}

.mrow__n { min-width: 0; flex: 1; }
.mrow__n b { display: block; font-size: 0.9375rem; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__n small { display: block; font-size: 0.75rem; color: var(--muted); }
.mrow__p { flex: none; font-size: 0.875rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrow__p i { font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.45); }

.t-price { background: linear-gradient(160deg, #1a1d27 0%, #12141b 100%); }

.composer { margin-top: 1.125rem; padding: 0.875rem; border-radius: 1.25rem; background: rgba(255, 255, 255, 0.06); }
.composer__text { min-height: 2.9em; font-size: 0.9375rem; line-height: 1.45; }

.caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.15em;
    background: #fff;
    animation: caret 1s steps(1) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

.composer__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; }

.composer__model {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 2rem;
    padding: 0 0.6875rem 0 0.3125rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.composer__sum { font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.composer__sum b { font-size: 1.125rem; font-weight: 700; color: #fff; }

.meter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }
.meter b { font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
.meter__ctx { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; }
.meter__ctx i { width: 3rem; height: 0.25rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.meter__ctx u { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; transition: width 0.2s linear; }

.t-files { background: linear-gradient(160deg, #1a1d27 0%, #12141b 100%); }
.files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1.125rem; }

.file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 0.875rem 0 0.4375rem;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.875rem;
    font-weight: 600;
}

.file__ext {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5625rem;
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.file__ext--pdf { background: #e5484d; }
.file__ext--img { background: #8a5cf0; }
.file__ext--csv { background: #2f9e6b; }

.t-mode { grid-column: span 3; min-height: 8.5rem; }
.t-mode__ico { position: absolute; z-index: -1; right: -0.75rem; bottom: -0.875rem; width: 5.5rem; height: 5.5rem; opacity: 0.28; transform: rotate(-10deg); transition: transform 0.3s ease; }
.t-mode--photo { background: linear-gradient(150deg, #6a3fc4 0%, #2b1a57 100%); }
.t-mode--video { background: linear-gradient(150deg, #b0456e 0%, #45182c 100%); }
.t-mode--music { background: linear-gradient(150deg, #c46a1f 0%, #4a260a 100%); }
.t-mode--voice { background: linear-gradient(150deg, #1c8a84 0%, #0b3836 100%); }

/* — AID PAY — */

.t-steam {
    grid-column: span 4;
    min-height: 10.5rem;
    background:
        radial-gradient(100% 60% at 0% 0%, rgba(102, 192, 244, 0.28) 0%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(165deg, #23466e 0%, #172a45 55%, #111c2e 100%);
}

.t-steam__ico { width: 1.5rem; height: 1.5rem; }
.t-steam .t__s { max-width: 9rem; }
.t-steam .t__go { margin-top: auto; }

.t-steam__art {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -3rem;
    width: 11rem;
    height: 11rem;
    margin-top: -5.5rem;
    transform: rotate(-14deg);
    transition: transform 0.3s ease;
}

.t-steam__art i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.5) 0%, rgba(102, 192, 244, 0.3) 55%, rgba(102, 192, 244, 0.06) 100%);
    -webkit-mask: url('img/steam.svg') center / contain no-repeat;
    mask: url('img/steam.svg') center / contain no-repeat;
}

.t-stars { grid-column: span 2; min-height: 10.5rem; justify-content: flex-end; background: linear-gradient(150deg, #5a4410 0%, #2e2209 100%); }
.t-stars .t__t { font-size: 1.0625rem; }
.t-stars .t__s { font-size: 0.8125rem; white-space: nowrap; }
.t-stars__art { position: absolute; z-index: -1; top: 0.75rem; right: 0.625rem; width: 4rem; transform: rotate(14deg); filter: drop-shadow(0 0.625rem 0.875rem rgba(0, 0, 0, 0.4)); transition: transform 0.3s ease; }

.t-cat { grid-column: span 3; min-height: 10rem; }
.t-cat .t__t { font-size: 1.0625rem; }
.t-cat .t__s { font-size: 0.8125rem; }

.t-topups {
    background:
        radial-gradient(90% 80% at 100% 100%, rgba(255, 122, 69, 0.2) 0%, rgba(255, 122, 69, 0) 70%),
        linear-gradient(160deg, #262229 0%, #17151b 100%);
}

.t-gifts {
    background:
        radial-gradient(90% 80% at 100% 100%, rgba(72, 199, 142, 0.18) 0%, rgba(72, 199, 142, 0) 70%),
        linear-gradient(160deg, #1f2626 0%, #141a1a 100%);
}

.stack { display: flex; margin-top: auto; padding: 0.875rem 0 0 0.375rem; }

.stack img {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: -0.375rem;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 0 0 2px #1a181d, 0 0.25rem 0.625rem rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease;
}

.t-gifts .stack img { box-shadow: 0 0 0 2px #171d1d, 0 0.25rem 0.625rem rgba(0, 0, 0, 0.35); }

.t-games {
    min-height: 11.5rem;
    justify-content: center;
    background:
        radial-gradient(70% 90% at 0% 50%, rgba(102, 192, 244, 0.22) 0%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(160deg, #1b2838 0%, #0f1620 100%);
}

.t-games .t__s { max-width: 9.5rem; }

.ribbon {
    position: absolute;
    z-index: -1;
    top: -3rem;
    bottom: -3rem;
    left: 44%;
    right: -3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625rem;
    transform: rotate(-12deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}

.ribbon__row { display: flex; gap: 0.625rem; width: max-content; animation: ribbon 46s linear infinite; }
.ribbon__row:nth-child(2) { animation-direction: reverse; margin-left: -2rem; }

.ribbon img {
    width: 4.5rem;
    height: 6.75rem;
    border-radius: 0.625rem;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45);
}

@keyframes ribbon {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc((-100% - 0.625rem) / 3), 0, 0); }
}

/* — Кошелёк и друзья — */

.t-wallet { background: linear-gradient(165deg, #1b3f78 0%, #14223f 55%, #10172a 100%); }

.t-wallet__sum {
    margin-top: 1.5rem;
    font-size: clamp(3rem, 13vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.t-wallet__rows { display: grid; gap: 0.375rem; margin-top: 1.25rem; }

.t-wallet__rows span {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 2.75rem;
    padding: 0 0.875rem;
    border-radius: 0.875rem;
    background: rgba(8, 12, 22, 0.42);
    font-size: 0.875rem;
    font-weight: 600;
}

.t-wallet__rows b { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.t-wallet__rows b.plus { color: #5fd08f; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.dot--ai { background: #d97757; }
.dot--pay { background: #66c0f4; }
.dot--in { background: #5fd08f; }

.t-friends { min-height: 11rem; background: linear-gradient(150deg, #13784a 0%, #0b3a25 100%); }
.t-friends .t__s { max-width: 13rem; }
.t-friends__art { position: absolute; z-index: -1; right: -0.25rem; bottom: -0.75rem; width: 9.5rem; filter: drop-shadow(0 0.625rem 0.875rem rgba(0, 0, 0, 0.4)); transition: transform 0.3s ease; }

.t-login { min-height: 8.5rem; background: linear-gradient(160deg, #1a1d27 0%, #12141b 100%); }
.t-login .files { padding-top: 1rem; }
.t-login .file { animation: none; }
.file__ext--tg { background: #2aabee; }
.file__ext--mail { background: rgba(255, 255, 255, 0.14); }
.file__ext svg { width: 1.125rem; height: 1.125rem; }
.meter__unit { color: rgba(255, 255, 255, 0.45); }

@media (hover: hover) and (pointer: fine) {
    .t-steam:hover .t-steam__art { transform: rotate(-20deg) scale(1.05); }
    .t-stars:hover .t-stars__art { transform: rotate(4deg) scale(1.06); }
    .t-friends:hover .t-friends__art { transform: scale(1.05) rotate(-3deg); }
    .t-mode:hover .t-mode__ico { transform: rotate(-4deg) scale(1.06); }
    .t-cat:hover .stack img:nth-child(2) { transform: translateY(-3px); }
    .t-cat:hover .stack img:nth-child(3) { transform: translateY(-5px); }
    .t-cat:hover .stack img:nth-child(4) { transform: translateY(-3px); }
}

/* ───── Финал ───── */

.final { padding: 3.5rem 0 0; }

.final__box {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 3rem 1.25rem;
    border-radius: 2.25rem;
    background: linear-gradient(180deg, #2a5cb4 0%, #1c3a72 55%, #152444 100%);
    text-align: center;
}

.final__orb { position: absolute; z-index: -1; top: 50%; left: 50%; width: 34rem; max-width: none; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0.28; }
.final__h { font-size: clamp(2.125rem, 8vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.final__p { margin-top: 0.875rem; font-size: clamp(1rem, 2vw, 1.1875rem); color: rgba(255, 255, 255, 0.8); }
.final__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 1.75rem; }
.final__act .btn { flex: 1 1 12rem; max-width: 18rem; }

/* ───── Подвал ───── */

.foot { padding: 2.5rem 0 2.5rem; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; font-size: 0.875rem; color: var(--muted); }
.foot__logo { font-weight: 800; color: #fff; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.foot__copy { margin-left: auto; }

@media (hover: hover) and (pointer: fine) {
    .foot__links a:hover { color: #fff; }
}

/* ───── Появление при прокрутке ───── */

.js .rise { opacity: 0; transform: translate3d(0, 1.25rem, 0) scale(0.98); }
.js .rise.is-in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }

/* ───── Планшет ───── */

@media (min-width: 40rem) {
    .wrap { padding: 0 1.5rem; }
    .hero__act .btn, .final__act .btn { flex: none; }
    .nav__tg { display: inline-flex; }
    .t { padding: 1.5rem; }
    .t__t { font-size: 1.375rem; }
    .t-mode { min-height: 10rem; }
    .t-cat .t__t, .t-stars .t__t { font-size: 1.25rem; }
    .t-cat .t__s, .t-stars .t__s { font-size: 0.875rem; }
    .t-steam .t__s { max-width: 24rem; }
    .t-steam, .t-stars { min-height: 13rem; }
    .t-steam__art { right: -1.5rem; width: 15rem; height: 15rem; margin-top: -7.5rem; }
    .t-stars__art { width: 6rem; top: 1.25rem; right: 1.25rem; }
    .t-games { min-height: 15rem; padding-left: 2rem; }
    .t-games .t__s { max-width: 16rem; }
    .ribbon img { width: 6rem; height: 9rem; border-radius: 0.75rem; }
    .stack img { width: 3rem; height: 3rem; }
    .wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wall__col:nth-child(2) { display: flex; }
    .t-friends__art { width: 12rem; }
    .final__box { padding: 5rem 2rem; }
}

/* ───── ПК ───── */

@media (min-width: 64rem) {
    .wrap { padding: 0 2rem; }
    .nav__links { display: flex; }
    .nav { padding: 0 0.75rem 0 1.25rem; }

    .hero { padding: 9.5rem 0 4rem; }
    .hero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: 2rem; }
    .stage { max-width: 34rem; margin-right: 0; }
    .chip b { font-size: 0.9375rem; }
    .chip small { font-size: 0.8125rem; }
    .chip .vi { width: 2.5rem; height: 2.5rem; }

    .chapter { padding-top: 6.5rem; }
    .chead { margin-bottom: 2rem; }
    .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; }
    .t { padding: 1.75rem; }
    .t__t { font-size: 1.5rem; }
    .t__s { font-size: 0.9375rem; }

    .t-models { grid-column: span 7; grid-row: span 2; height: 33rem; }
    .t-price, .t-files { grid-column: span 5; }
    .t-mode { grid-column: span 3; min-height: 11rem; }
    .t-mode__ico { width: 7rem; height: 7rem; }

    .t-steam { grid-column: span 8; min-height: 16rem; }
    .t-steam .t__t { font-size: 1.875rem; }
    .t-steam__ico { width: 2rem; height: 2rem; }
    .t-steam__art { right: 1rem; width: 19rem; height: 19rem; margin-top: -9.5rem; }
    .t-stars { grid-column: span 4; min-height: 16rem; }
    .t-stars__art { width: 8.5rem; top: 1.5rem; right: 1.5rem; }
    .t-cat { grid-column: span 6; min-height: 12rem; }
    .t-games { grid-column: span 12; min-height: 18rem; padding-left: 2.5rem; }
    .t-games .t__t { font-size: 1.875rem; }
    .ribbon { left: 38%; }
    .ribbon img { width: 7rem; height: 10.5rem; }

    .t-wallet { grid-column: span 7; grid-row: span 2; }
    .t-friends, .t-login { grid-column: span 5; }
    .t-friends { min-height: 14rem; }
    .t-friends__art { width: 14rem; right: 0.5rem; }
    .t-login { min-height: 10rem; }

    .final { padding-top: 6.5rem; }
    .final__box { padding: 6.5rem 2rem; border-radius: 2.75rem; }
    .final__orb { width: 46rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .chip, .file, .wall__col, .ribbon__row, .t__go::after, .caret { animation: none; }
    .js .rise { opacity: 1; transform: none; }
}


/* — Ключ — */

.mark--key { background: linear-gradient(150deg, #6a5cf0 0%, #2f7de8 100%); }
.mark--key svg { width: 62%; height: 62%; }

.t-key {
    min-height: 15rem;
    background:
        radial-gradient(90% 70% at 100% 100%, rgba(122, 92, 240, 0.5) 0%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(155deg, #24448f 0%, #18275a 55%, #11183a 100%);
}
.t-key .t__s { max-width: 13rem; }
.t-key .t__go { margin-top: auto; }

.t-key__art {
    position: absolute;
    z-index: -1;
    right: -2rem;
    bottom: 0.75rem;
    width: 12.5rem;
    height: 8rem;
    transition: transform 0.3s ease;
}
.t-key__card {
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    transform: rotate(-7deg);
}
.t-key__card--b {
    background: linear-gradient(155deg, #1fa37a 0%, #0c4a3a 100%);
    transform: rotate(4deg) translate(-1.25rem, -1.5rem);
    opacity: 0.85;
}
.t-key__card--a {
    display: flex;
    flex-direction: column;
    padding: 0.875rem 1rem;
    background:
        radial-gradient(80% 95% at 100% 100%, rgba(255, 122, 200, 0.55) 0%, rgba(0, 0, 0, 0) 70%),
        linear-gradient(155deg, #8a5cf0 0%, #5a3fd0 52%, #2c2a8f 100%);
}
.t-key__card--a b { font-size: 0.9375rem; font-weight: 700; }
.t-key__card--a em {
    align-self: flex-start;
    margin-top: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.6875rem;
    font-weight: 700;
    font-style: normal;
}
.t-key__card--a i { margin-top: auto; font-size: 1.75rem; font-weight: 700; font-style: normal; letter-spacing: -0.02em; line-height: 1; }
.t-key__card--a small { font-size: 0.8125rem; font-weight: 600; opacity: 0.8; }

.t-dev { background: linear-gradient(150deg, #1c2333 0%, #12161f 100%); }
.t-dev__row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; padding-top: 1rem; }
.t-dev__row i {
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    font-style: normal;
}

.t-look { background: linear-gradient(150deg, #2a1f4d 0%, #14122b 100%); }
.t-look__row { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 1rem; }
.t-look__row i { width: 1.75rem; height: 1.75rem; border-radius: 0.625rem; }
.t-look__row i:nth-child(1) { background: linear-gradient(155deg, #8a5cf0, #2c2a8f); }
.t-look__row i:nth-child(2) { background: linear-gradient(155deg, #ff6aa9, #a3245f); }
.t-look__row i:nth-child(3) { background: linear-gradient(155deg, #ff9a3d, #b1451a); }
.t-look__row i:nth-child(4) { background: linear-gradient(155deg, #ffd24a, #b57a0c); }
.t-look__row i:nth-child(5) { background: linear-gradient(155deg, #2fd08f, #0c6b4a); }
.t-look__row i:nth-child(6) { background: linear-gradient(155deg, #3aa0ff, #153f9a); }
.t-look__row i:nth-child(7) { background: linear-gradient(155deg, #4a5160, #1c2028); }

.t-guest { background: linear-gradient(150deg, #13784a 0%, #0b3a25 100%); }
.t-renew { background: linear-gradient(150deg, #1c2333 0%, #12161f 100%); }
.t-guest .t__s, .t-renew .t__s { max-width: 22rem; }
.t-guest, .t-renew { min-height: 0; }

@media (hover: hover) and (pointer: fine) {
    .t-key:hover .t-key__art { transform: translate(-0.375rem, -0.375rem); }
}

@media (min-width: 64rem) {
    .t-key { grid-column: span 7; grid-row: span 2; min-height: 24rem; }
    .t-key .t__t { font-size: 1.875rem; }
    .t-key .t__s { max-width: 20rem; }
    .t-key__art { right: -2.5rem; bottom: 2rem; width: 23rem; height: 14rem; }
    .t-key__card { border-radius: 1.75rem; }
    .t-key__card--a { padding: 1.5rem 1.75rem; }
    .t-key__card--a b { font-size: 1.375rem; }
    .t-key__card--a em { font-size: 0.8125rem; }
    .t-key__card--a i { font-size: 3rem; }
    .t-key__card--a small { font-size: 1.125rem; }
    .t-dev, .t-look { grid-column: span 5; }
    .t-guest, .t-renew { grid-column: span 6; min-height: 9.5rem; }
}