/*
 * Лендинг по макету Figma (docs/design/figma-notes.md).
 *
 * Десктоп (от 1024px) — холст шириной 1920 единиц макета, как в Figma. Одна единица --u равна
 * min(ширина страницы, 1920px) / 1920, поэтому на любом экране пропорции совпадают с макетом.
 * Координаты элементов заданы в разметке переменными --x, --y, --w, --h, --r, --fs в единицах макета.
 *
 * Мобильная раскладка (до 1024px) в макете не нарисована: там холст превращается в обычный поток
 * в одну колонку, а декоративные элементы скрываются.
 */

:root {
    --lp-sky: #8cd7ff;
    --lp-blue: #004eb1;
    --lp-blue-tariff: #124fb2;
    --lp-blue-border: #1559e9;
    --lp-navy: #02195d;
    --lp-footer: #03275a;
    --lp-pink: #ff00fb;
    --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Opsilon', 'Opsilon Fallback', 'Rubik', 'Inter', sans-serif;
    --font-pixel: 'Minecraft Rus', 'Monocraft', 'Pixelify Sans', monospace;
}

.lp,
.lp * {
    box-sizing: border-box;
}

body.lp-body {
    margin: 0;
    background: var(--lp-sky);
    color: #000;
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
}

.lp {
    container-type: inline-size;
    overflow-x: clip;
}

.lp-canvas,
.s7,
.s8 {
    --u: calc(min(100cqw, 1920px) / 1920);
}

.lp p,
.lp h1,
.lp h2,
.lp h3,
.lp ul {
    margin: 0;
    padding: 0;
}

.lp ul {
    list-style: none;
}

.contents {
    display: contents;
}

.m-only {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Холст и слои ---------- */

.lp-canvas {
    position: relative;
    width: calc(1920 * var(--u));
    height: calc(7588 * var(--u));
    margin-inline: auto;
}

/* Секции перекрывают друг друга рваными краями, поэтому каждая — слой на весь холст.
   Порядок наложения взят из Figma, а в разметке секции идут по смыслу. */
.layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.s1 { z-index: 2; }
.s2 { z-index: 6; }
.s3 { z-index: 3; }
.s4 { z-index: 5; }
.s5 { z-index: 4; }
.s6 { z-index: 1; }

.lp a,
.lp button,
.lp summary,
.lp details {
    pointer-events: auto;
}

.a {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
}

.a[style*="--h:"] {
    height: calc(var(--h) * var(--u));
}

.a[style*="--r:"] {
    transform: rotate(var(--r));
}

.a > img {
    display: block;
    width: 100%;
    height: 100%;
}

.a.cover > img {
    object-fit: cover;
}

/* Картинка, обрезанная рамкой: смещение и размер заданы в процентах от рамки, как в Figma. */
.a.crop {
    overflow: hidden;
}

.a.crop > img {
    position: absolute;
    max-width: none;
    left: var(--il, 0);
    top: var(--it, 0);
    width: var(--iw, 100%);
    height: var(--ih, 100%);
}

/* Вектор с тенью или обводкой выходит за свою рамку — отступы inset заданы в разметке. */
.ins {
    position: absolute;
    display: block;
}

.ins > img {
    display: block;
    width: 100%;
    height: 100%;
}

.t {
    font-size: calc(var(--fs) * var(--u));
    line-height: normal;
}

.display {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.9;
    white-space: nowrap;
}

.display.shadow {
    text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
}

.anchor {
    position: absolute;
    left: 0;
    top: calc(var(--y) * var(--u));
}

/* ---------- 1. Первый экран ---------- */

.s1-nav a {
    position: absolute;
    top: calc(80 * var(--u));
    left: calc(var(--x) * var(--u));
    color: #fff;
    font-weight: 600;
    font-size: calc(15 * var(--u));
    text-decoration: none;
    white-space: nowrap;
}

.s1-nav a:hover,
.s1-nav a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.s1-lead {
    color: #fff;
    line-height: 1.1164;
}

.s1-cta {
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: calc(22 * var(--u));
    text-decoration: none;
}

.s1-cta .ins {
    z-index: -1;
    transition: transform 0.15s ease;
}

.s1-cta:hover .ins {
    transform: translateY(calc(-2 * var(--u)));
}

.s1-cta:active .ins {
    transform: translateY(calc(2 * var(--u)));
}

.s1-cta > span:not(.ins) {
    position: relative;
}

/* ---------- 2. Боли и «после школы» ---------- */

.s2-phrase {
    font-size: calc(20 * var(--u));
    line-height: 0.9;
    white-space: nowrap;
}

.s2-list li {
    font-size: calc(20 * var(--u));
    line-height: 0.9;
    margin-bottom: calc(18 * var(--u));
}

/* ---------- 3. Кто такой Гоша ---------- */

.s3-title {
    color: var(--lp-blue);
}

.s3-text p + p {
    margin-top: calc(26 * var(--u));
}

.s3-text strong {
    font-weight: 500;
}

.s3-burst p + p {
    margin-top: calc(16 * var(--u));
}

.s3-burst em {
    font-style: normal;
    color: var(--lp-pink);
}

.shadow-comment {
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
}

/* ---------- 4. Кому подойдёт ---------- */

.s4-title {
    color: var(--lp-blue);
    white-space: nowrap;
}

.s4-subtitle {
    white-space: nowrap;
}

.s4-subtitle .dash {
    letter-spacing: calc(5.12 * var(--u));
}

.sticker {
    display: block;
}

.photo-shadow {
    box-shadow: calc(-1 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 49%);
}

.clip-shadow {
    filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 12%));
}

.s4-bubble-text {
    list-style: disc;
    padding-left: calc(36 * var(--u));
}

.s4-bubble-text li {
    font-size: calc(24 * var(--u));
    line-height: normal;
}

/* ---------- 5. Программа ---------- */

.s5-title {
    color: #fff;
}

.s5-meta {
    color: #fff;
    text-align: center;
    font-size: calc(36 * var(--u));
}

.s5-meta b {
    font-weight: 900;
}

.s5-block-label {
    color: #fff;
    font-weight: 700;
    font-size: calc(40 * var(--u));
    white-space: nowrap;
}

.s5-block-name {
    font-weight: 700;
    font-size: calc(36 * var(--u));
    white-space: nowrap;
}

.s5-result-title {
    font-weight: 700;
    font-size: calc(40 * var(--u));
    white-space: nowrap;
}

.s5-text {
    font-size: calc(24 * var(--u));
    line-height: normal;
}

.s5-text p + p {
    margin-top: calc(29 * var(--u));
}

/* ---------- 6. Тарифы ---------- */

.s6-title {
    color: var(--lp-blue-tariff);
}

.s6-cards {
    display: flex;
    justify-content: space-between;
}

.tariff-card {
    position: relative;
    width: calc(371 * var(--u));
    height: calc(568 * var(--u));
    border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
    overflow: hidden;
}

.tariff-card > .card-bg {
    position: absolute;
    left: -0.27%;
    top: -0.56%;
    width: 100.54%;
    height: 100.59%;
    max-width: none;
}

.tariff-name {
    position: absolute;
    left: calc(36 * var(--u));
    top: calc(20 * var(--u));
    color: #fff;
    font-size: calc(36 * var(--u));
    white-space: nowrap;
}

.tariff-price {
    position: absolute;
    left: calc(51 * var(--u));
    top: calc(68 * var(--u));
    color: var(--lp-navy);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.59;
    white-space: nowrap;
}

.tariff-price .head {
    font-size: calc(64 * var(--u));
}

.tariff-price .tail {
    font-size: calc(55 * var(--u));
}

.tariff-features {
    position: absolute;
    left: calc(22 * var(--u));
    top: calc(205 * var(--u));
    width: calc(328 * var(--u));
}

.tariff-features li {
    height: calc(42 * var(--u));
    margin-bottom: calc(8 * var(--u));
    padding-left: calc(10 * var(--u));
    background: #dee6f4;
    color: #011550;
    font-weight: 500;
    font-size: calc(18 * var(--u));
    line-height: calc(42 * var(--u));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tariff-features li:first-child {
    border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0;
}

.tariff-features li:last-child {
    border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u));
}

.tariff-features li.muted {
    color: #9c9c9c;
}

.tariff-buy {
    position: absolute;
    left: calc(79 * var(--u));
    top: calc(473 * var(--u));
    width: calc(213 * var(--u));
    height: calc(61 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: calc(5 * var(--u)) solid var(--lp-blue-border);
    border-radius: calc(14 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 25%);
    color: var(--lp-blue-tariff);
    font-size: calc(36 * var(--u));
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tariff-buy:hover {
    transform: translateY(calc(-2 * var(--u)));
}

.tariff-buy:active {
    transform: translateY(calc(2 * var(--u)));
    box-shadow: 0 0 0 0 rgb(0 0 0 / 25%);
}

.tariff-buy:focus-visible,
.s1-cta:focus-visible,
.support-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ---------- 7. FAQ и поддержка (обычный поток: ответы раскрываются и раздвигают страницу) ---------- */

.s7 {
    position: relative;
    z-index: 7;
    width: calc(1920 * var(--u));
    min-height: calc(926 * var(--u));
    margin: calc(-187 * var(--u)) auto 0;
    /* Запас снизу: раскрытые ответы удлиняют блок, и он не должен заезжать под футер. */
    padding: calc(266 * var(--u)) 0 calc(250 * var(--u));
    background: #e3e3e3;
}

.s7-bg {
    position: absolute;
    left: calc(-97 * var(--u));
    top: 0;
    width: calc(2069 * var(--u));
    height: calc(1164 * var(--u));
    max-width: none;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
}

.s7-inner {
    position: relative;
    margin-left: calc(172 * var(--u));
}

.s7-title {
    color: var(--lp-blue-tariff);
    font-size: calc(96 * var(--u));
}

.faq {
    width: calc(966 * var(--u));
    margin: calc(13 * var(--u)) 0 0 calc(2 * var(--u));
}

.faq details {
    margin-bottom: calc(8 * var(--u));
    background: #fff;
    border: 1px solid #dcdcdc;
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(80 * var(--u));
    padding: calc(10 * var(--u)) calc(38 * var(--u)) calc(10 * var(--u)) calc(34 * var(--u));
    font-size: calc(16 * var(--u));
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    flex: none;
    margin-left: calc(20 * var(--u));
    color: #0a4bad;
    font-size: calc(26 * var(--u));
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq .answer {
    padding: 0 calc(38 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.5;
}

.faq .answer p + p,
.faq .answer ul + p {
    margin-top: calc(10 * var(--u));
}

.faq .answer ul {
    margin: calc(8 * var(--u)) 0 0;
    padding-left: calc(22 * var(--u));
    list-style: disc;
}

.faq .answer li {
    margin-bottom: calc(4 * var(--u));
}

.support {
    position: absolute;
    left: calc(1214 * var(--u));
    top: calc(376 * var(--u));
    width: calc(561 * var(--u));
    height: calc(355 * var(--u));
    font-family: var(--font-pixel);
    text-align: center;
    text-transform: lowercase;
}

.support > img {
    display: block;
    width: 100%;
    height: 100%;
}

.support-text {
    position: absolute;
    left: calc(190 * var(--u));
    top: calc(139 * var(--u));
    width: calc(350 * var(--u));
    /* Monocraft шире, чем пиксельный шрифт макета, поэтому кегль чуть меньше. */
    font-size: calc(17 * var(--u));
    line-height: 1.35;
}

.support-button {
    position: absolute;
    left: calc(205 * var(--u));
    top: calc(188 * var(--u));
    width: calc(224 * var(--u));
    height: calc(115 * var(--u));
    overflow: hidden;
    color: #000;
    font-size: calc(21 * var(--u));
    text-decoration: none;
}

.support-button img {
    position: absolute;
    left: -53.79%;
    top: -219.56%;
    width: 304.14%;
    height: 374.36%;
    max-width: none;
}

.support-button span {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(42 * var(--u));
}

.support-button:active img {
    transform: translate(1px, 1px);
}

.support-note {
    position: absolute;
    left: calc(110 * var(--u));
    top: calc(340 * var(--u));
    width: calc(413 * var(--u));
    color: #6a6a6a;
    font-size: calc(17 * var(--u));
}

/* ---------- 8. Футер ---------- */

.s8 {
    position: relative;
    z-index: 8;
    width: calc(1920 * var(--u));
    margin: calc(-86 * var(--u)) auto 0;
    padding: calc(154 * var(--u)) 0 calc(24 * var(--u));
    background: var(--lp-footer);
    color: #fff;
    font-size: calc(16 * var(--u));
}

.s8::before {
    content: '';
    position: absolute;
    left: calc(-97 * var(--u));
    right: calc(-97 * var(--u));
    top: calc(-1 * var(--u));
    height: calc(90 * var(--u));
    background: url('/img/landing/s8/torn-edge.avif') center top / calc(1920 * var(--u)) 100% no-repeat;
}

.s8-grid {
    position: relative;
    display: grid;
    grid-template-columns: calc(293 * var(--u)) calc(277 * var(--u)) calc(372 * var(--u)) 1fr;
    row-gap: calc(30 * var(--u));
    align-items: start;
    padding-left: calc(176 * var(--u));
    padding-right: calc(160 * var(--u));
}

.s8-sticker {
    width: calc(200 * var(--u));
    margin-top: calc(-52 * var(--u));
}

.s8 h2 {
    margin: 0 0 calc(24 * var(--u));
    font-size: calc(16 * var(--u));
    font-weight: 400;
}

.s8 li + li {
    margin-top: calc(17 * var(--u));
}

.s8 a {
    color: #fff;
    text-decoration: none;
}

.s8 a:hover,
.s8 a:focus-visible {
    text-decoration: underline;
}

.s8-contacts {
    grid-column: 4;
    text-align: center;
}

.s8-social {
    display: flex;
    justify-content: center;
    gap: calc(36 * var(--u));
    margin-bottom: calc(22 * var(--u));
}

.s8-social a,
.s8-social .icon {
    display: block;
    width: calc(50 * var(--u));
    height: calc(48 * var(--u));
}

.s8-social svg {
    display: block;
    width: 100%;
    height: 100%;
}

.s8-legal {
    grid-column: 3 / 5;
    text-align: right;
    line-height: 1.5;
}

/* ---------- Мобильная раскладка ---------- */

@media (max-width: 1023px) {
    .lp-canvas,
    .s7,
    .s8 {
        --u: 0.5px;
    }

    .lp-canvas {
        width: auto;
        height: auto;
    }

    .layer {
        position: relative;
        inset: auto;
        pointer-events: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 48px 20px;
    }

    .m-only {
        display: block;
    }

    .a,
    .a[style*="--h:"] {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
    }

    .a[style*="--r:"] {
        transform: none;
    }

    .deco {
        display: none !important;
    }

    /* Метки якорей остаются в потоке: по ним работают ссылки меню. */
    .anchor {
        position: static;
        height: 0;
    }

    .t,
    .s2-phrase,
    .s2-list li,
    .s4-bubble-text li,
    .s5-text,
    .faq summary,
    .faq .answer {
        font-size: 16px;
        line-height: 1.45;
    }

    .display {
        font-size: 36px;
    }

    .bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1;
    }

    .bg > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 1 */
    .s1 {
        min-height: 100svh;
        padding-top: 20px;
        color: #fff;
        isolation: isolate;
    }

    .s1 .bg > img {
        object-position: 70% center;
    }

    .s1-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
    }

    .s1-nav a {
        position: static;
        font-size: 13px;
    }

    .s1-title {
        max-width: 520px;
        margin-top: 24px;
    }

    .s1-lead {
        max-width: 420px;
        font-size: 16px;
        text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
    }

    .s1-cta {
        width: min(300px, 100%);
        height: 64px;
        margin-top: 24px;
        font-size: 18px;
        isolation: isolate;
    }

    .s1-cta .ins {
        inset: 0 !important;
    }

    /* 2 */
    .s2 {
        background: #f4f3f0;
    }

    .s2 .bg {
        display: none;
    }

    .s2-sticker {
        max-width: 340px;
        aspect-ratio: 515 / 155;
    }

    .s2-sticker-after {
        aspect-ratio: 699 / 187;
    }

    .s2-phrases {
        display: grid;
        gap: 8px;
    }

    .s2-phrase {
        white-space: normal;
    }

    .s2-list {
        padding-left: 20px !important;
        list-style: disc;
    }

    .s2-list li {
        margin-bottom: 8px;
    }

    /* 3 */
    .s3 {
        isolation: isolate;
    }

    .s3-photo {
        max-width: 360px;
        aspect-ratio: 740 / 808;
        margin-inline: auto;
    }

    .s3-burst {
        padding: 18px;
        background: #ffe600;
        border-radius: 6px;
    }

    .s3-stats {
        display: flex;
        gap: 10px;
        overflow-x: auto;
    }

    .s3-stats .a {
        flex: 0 0 150px;
        aspect-ratio: 355 / 770;
    }

    .s3-brands {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .s3-brands .a {
        width: 40px;
        height: 54px;
    }

    .s3-comment {
        max-width: 360px;
        aspect-ratio: 424 / 120;
    }

    /* 4 */
    .s4 {
        isolation: isolate;
    }

    .s4-title,
    .s4-subtitle {
        white-space: normal;
    }

    .s4-subtitle {
        font-size: 20px !important;
    }

    .persona {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 14px;
        align-items: center;
    }

    .persona .a {
        margin: 0 !important;
    }

    .persona-photo {
        aspect-ratio: 416 / 620;
    }

    .persona-label {
        display: inline-block;
        padding: 4px 12px;
        font-weight: 700;
        color: #000;
    }

    .s4-bubble-text {
        padding-left: 18px;
    }

    /* 5 */
    .s5 {
        isolation: isolate;
        color: #000;
    }

    .s5-meta {
        font-size: 18px;
    }

    .program-block {
        padding: 20px;
        background: #fff;
        border-radius: 4px;
    }

    .program-block > * + * {
        margin-top: 10px;
    }

    .s5-block-label {
        display: inline-block;
        align-self: flex-start;
        background: var(--m-bg);
        padding: 2px 10px;
        font-size: 20px;
        border-radius: 3px;
    }

    .s5-block-name,
    .s5-result-title {
        font-size: 18px;
    }

    .s5-result {
        padding: 14px;
        background: #ffe248;
    }

    .s5-text p + p {
        margin-top: 10px;
    }

    /* 6 */
    .s6 {
        isolation: isolate;
    }

    .s6-cards {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .tariff-card {
        --u: 0.85px;
    }

    .s6 .sale {
        position: relative;
    }

    /* 7 */
    .s7 {
        width: auto;
        min-height: 0;
        margin-top: 0;
        padding: 48px 20px 90px;
    }

    .s7-bg {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s7-inner {
        margin-left: 0;
    }

    .s7-title {
        font-size: 44px;
    }

    .faq {
        width: 100%;
        margin: 16px 0 0;
    }

    .faq summary {
        min-height: 56px;
        padding: 10px 16px;
    }

    .faq .answer {
        padding: 0 16px 16px;
    }

    .support {
        --u: min(0.6px, calc((100vw - 40px) / 561));
        position: relative;
        left: auto;
        top: auto;
        margin: 32px auto 50px;
    }

    /* 8 */
    .s8 {
        --u: 1px;
        width: auto;
        margin-top: -30px;
        padding: 70px 20px 32px;
        font-size: 14px;
    }

    .s8::before {
        height: 40px;
        background-size: 1100px 100%;
    }

    .s8-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px;
        padding: 0;
    }

    .s8-sticker {
        display: none;
    }

    .s8-contacts,
    .s8-legal {
        grid-column: 1 / -1;
        margin-top: 0;
        text-align: left;
    }

    .s8-social {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp * {
        transition: none !important;
    }
}