/* ============================================================
   Приложение для Windows — страница /windows.
   Общие токены и кнопки — из site.css. Сцену с ноутбуком рисует js/windows3d.js;
   без скриптов (noscript.css) и без WebGL 2 (.is-static) — главы списком и картинка окна.
   Инструкцию (картинки шагов в «экране» справа) ведёт js/windows.js.
   ============================================================ */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nowrap { white-space: nowrap; }

.text-gradient-dark {
    background: linear-gradient(120deg, #1d1d1f 10%, #3d6fc4 60%, #2f80ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* кнопка «Скачать»: значок Windows слева; пока архива нет — плашка с датой выхода */
.wdl__icon { flex: none; width: 1.05em; height: 1.05em; margin: -.1em .05em -.1em -.1em; }
.wdl.is-soon {
    cursor: default;
    background: rgba(255, 255, 255, .1);
    color: var(--on-dark);
    border-color: rgba(255, 255, 255, .22);
}
.wdl.is-soon:active { transform: none; }
.section--light .wdl.is-soon,
.section--soft .wdl.is-soon { background: var(--surface-soft); color: var(--ink-2); border-color: var(--line); }

/* ---------- Сцена ---------- */
/* Высота секции — длина «прокрутки» сцены; холст и подписи приклеены к экрану. overflow: clip вместо hidden из site.css:
   hidden делает секцию прокручиваемым контейнером, и position: sticky внутри перестаёт работать. */
.wstage {
    height: 720vh;
    height: 720svh;
    background: #000;
    color: var(--on-dark);
    overflow: visible;
    overflow: clip;
}
.wstage__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.wstage__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 85% at 50% 52%, #0a0e17 0%, #000 62%);
}
.wstage__glow {
    position: absolute;
    left: 50%;
    top: -28%;
    width: 130vw;
    max-width: 1500px;
    height: 72vh;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(27, 100, 255, .26), transparent);
    filter: blur(24px);
    opacity: var(--hero, 1);
}
.wstage__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
}
.wstage.is-ready .wstage__canvas { opacity: 1; }
.wstage__poster { display: none; }

/* на телефоне подписи глав внизу, поверх сцены: снизу затемнение, чтобы текст читался */
.wstage__sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 52%;
    background: linear-gradient(to top, rgba(0, 0, 0, .92) 20%, rgba(0, 0, 0, .6) 55%, transparent);
    pointer-events: none;
    opacity: calc(1 - var(--hero, 1));
}

.wstage__overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* ---------- Главы ---------- */
.wchap {
    position: absolute;
    z-index: 4;
    left: 22px;
    right: 22px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, var(--ry, 0px), 0);
    will-change: opacity, transform;
}
.wchap--hero {
    top: calc(var(--nav-h) + 3.2vh);
    bottom: auto;
    text-align: center;
    opacity: 1;
    visibility: visible;
}
.wchap__title {
    margin: .28em 0 0;
    font-size: clamp(2rem, 8.4vw, 3.3rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
}
.wchap__text {
    margin: .8em 0 0;
    max-width: 520px;
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.5;
    color: var(--on-dark-2);
}
.wchap__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; pointer-events: auto; }
.wchap:not(.wchap--hero) { pointer-events: none; }
.wchap .btn { pointer-events: auto; }

.whero__title { margin: .3em 0 0; font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
.whero__name {
    display: block;
    margin-bottom: .28em;
    font-size: clamp(1.15rem, 4.2vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--on-dark);
}
.whero__tag { display: block; font-size: clamp(2.6rem, 11vw, 5.8rem); padding-bottom: .06em; }
.whero__lead {
    margin: .8em auto 0;
    max-width: 590px;
    font-size: clamp(1rem, 3.8vw, 1.28rem);
    line-height: 1.45;
    color: var(--on-dark-2);
}
.whero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.whero__meta { margin: 16px 0 0; font-size: .86rem; letter-spacing: .01em; color: var(--on-dark-3); }

.wstage__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 4;
    display: none;
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 14px;
    transform: translateX(-50%);
    opacity: var(--hero, 1);
}
.wstage__scroll span {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .75);
    transform: translateX(-50%);
    animation: scrollDot 1.8s ease-in-out infinite;
}

/* на телефоне кнопки первого экрана помещаются в один ряд — ноутбуку под ними остаётся больше места */
@media (max-width: 899px) {
    .whero__actions { gap: 10px; margin-top: 20px; }
    .whero__actions .btn--lg { font-size: 1rem; padding: .8em 1.2em; }
    .whero__meta { margin-top: 12px; font-size: .8rem; }
}
@media (max-height: 740px) and (max-width: 899px) {
    .whero__lead { font-size: 1rem; }
    .whero__meta { display: none; }
}

/* широкий экран (то же условие, что в windows3d.js): подписи слева, сцена справа */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) {
    .wstage__sticky::after { display: none; }
    .wchap {
        left: max(40px, calc((100vw - var(--container)) / 2 + 40px));
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(430px, 32vw);
        transform: translate3d(0, calc(-50% + var(--ry, 0px)), 0);
    }
    .wchap--hero {
        left: 50%;
        top: calc(var(--nav-h) + 5.5vh);
        width: min(880px, 86vw);
        transform: translate3d(-50%, var(--ry, 0px), 0);
    }
    .wchap__title { font-size: clamp(2.1rem, 3vw, 2.9rem); }
    .wchap__text { font-size: clamp(1.05rem, 1.3vw, 1.22rem); }
    .whero__tag { font-size: clamp(3.2rem, 5.4vw, 5.2rem); white-space: nowrap; }
    .wstage__scroll { display: block; }
}

/* ---------- Подписи к экранам приложения ---------- */
/* Каждая подпись — точка нулевого размера в месте привязки; windows3d.js двигает её transform-ом. */
.wlabel {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}
.wlabel__dot {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(41, 151, 255, .32), 0 0 18px rgba(41, 151, 255, .95);
}
.wlabel__text {
    position: absolute;
    top: 0;
    left: 30px;
    padding: 7px 14px;
    border-radius: 980px;
    transform: translateY(-50%);
    font-size: .88rem;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--on-dark-2);
    background: rgba(24, 24, 28, .66);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    backdrop-filter: saturate(170%) blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.wlabel__text b { font-weight: 600; color: #fff; }
.wlabel__text::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .55));
}
.wlabel.is-short .wlabel__more { display: none; }
.wlabel.is-left .wlabel__text { left: auto; right: 30px; }
.wlabel.is-left .wlabel__text::before {
    right: auto;
    left: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
}
@media (max-width: 899px) {
    .wlabel--wide,
    .wlabel__more { display: none; }
    .wlabel__text { font-size: .78rem; padding: 6px 11px; left: 22px; }
    .wlabel.is-left .wlabel__text { right: 22px; }
    .wlabel__text::before { width: 16px; }
}

/* ---------- Без WebGL 2: главы обычным списком, вместо холста картинка окна ---------- */
/* Те же правила без .is-static — в noscript.css (страница без скриптов). */
.wstage.is-static { height: auto; overflow: hidden; }
.wstage.is-static .wstage__sticky {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h) + 48px) 0 40px;
}
.wstage.is-static .wstage__sticky::after,
.wstage.is-static .wstage__canvas,
.wstage.is-static .wstage__overlay,
.wstage.is-static .wstage__scroll { display: none; }
.wstage.is-static .wstage__chapters { display: contents; }
.wstage.is-static .wchap {
    position: relative;
    inset: auto;
    order: 3;
    width: auto;
    max-width: 720px;
    margin: 0 auto 64px;
    padding: 0 22px;
    opacity: 1;
    visibility: visible;
    transform: none;
    text-align: center;
}
.wstage.is-static .wchap__text { margin-inline: auto; }
.wstage.is-static .wchap__actions { justify-content: center; }
.wstage.is-static .wchap--hero { order: 1; max-width: 920px; margin-bottom: 36px; }
.wstage.is-static .whero__tag { white-space: normal; }
.wstage.is-static .wstage__poster {
    display: block;
    order: 2;
    position: relative;
    width: min(300px, 70vw);
    margin: 0 auto 80px;
}
.wstage__poster img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)) drop-shadow(0 0 70px rgba(27, 100, 255, .25));
}

/* ---------- Общее для секций страницы ---------- */
.wfilm,
.wpros,
.wguide,
.wfix,
.wspecs,
.wfaq { padding-block: clamp(76px, 11vw, 132px); }

/* ---------- Ролик ---------- */
.wfilm__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wfilm .orb--1 {
    width: 100vw; max-width: 820px; aspect-ratio: 1; left: 50%; top: 60%;
    background: radial-gradient(circle, rgba(41, 151, 255, .6), transparent 64%);
    opacity: .3; transform: translate(-50%, -50%);
}
.wfilm__inner { position: relative; z-index: 2; }

/* ---------- Возможности: «бенто» ---------- */
.bento { display: grid; gap: 14px; }
.tile {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    border: 1px solid var(--line);
}
.bento .tile.is-in { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.bento .tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
.tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--accent);
}
.tile__title { margin: auto 0 .45em; font-size: 1.32rem; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; }
.tile__text { margin: 0; line-height: 1.55; color: var(--ink-2); }
.tile--dark {
    background: radial-gradient(120% 110% at 100% 0%, rgba(41, 151, 255, .3), transparent 60%), var(--bg-dark);
    border-color: rgba(41, 151, 255, .25);
    color: var(--on-dark);
}
.tile--dark .tile__text { color: var(--on-dark-2); }
.tile__icon--bright {
    background: rgba(41, 151, 255, .16);
    border-color: rgba(41, 151, 255, .3);
    color: var(--accent-bright);
}
.tile__apps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.tile__apps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line-dark);
    color: #8ccaff;
}
/* значки программ по очереди «подключаются»: обводка загорается синим */
.tile__apps.is-in span,
.tile.is-in .tile__apps span { animation: appLit 4.8s var(--ease) infinite; }
.tile__apps span:nth-child(2) { animation-delay: .25s !important; }
.tile__apps span:nth-child(3) { animation-delay: .5s !important; }
.tile__apps span:nth-child(4) { animation-delay: .75s !important; }
.tile__apps span:nth-child(5) { animation-delay: 1s !important; }
.tile__apps span:nth-child(6) { animation-delay: 1.25s !important; }
.tile__pings { display: grid; gap: 8px; margin-bottom: 26px; }
.tile__pings span {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding: 6px 14px 6px 10px;
    border-radius: 980px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tile__pings i { width: 9px; height: 9px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.tile__pings i.is-mid { background: #ff9f0a; box-shadow: 0 0 0 3px rgba(255, 159, 10, .18); }
.tile__pings span:nth-child(2) { margin-left: 18px; }
.tile__pings span:nth-child(3) { margin-left: 36px; }
.tile__big { margin: 0 0 18px; font-size: clamp(2.8rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; }

@media (min-width: 734px) {
    .bento { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .tile { min-height: 230px; padding: 28px; }
    .tile--wide { grid-column: span 2; }
}
@media (min-width: 1000px) {
    .bento { grid-template-columns: repeat(3, 1fr); }
    .tile { min-height: 260px; }
}
.bento .tile:nth-child(3n+2) { transition-delay: .07s; }
.bento .tile:nth-child(3n) { transition-delay: .14s; }

/* ---------- Инструкция ---------- */
/* overflow: clip вместо hidden из site.css — иначе «экран» справа не приклеится (position: sticky). */
.wguide { overflow: visible; overflow: clip; }
.guide { position: relative; }
.guide__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gstep {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    align-items: start;
    padding: 22px 20px 20px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
}
.gstep__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gstep__num--sub { background: rgba(0, 113, 227, .1); color: var(--accent); }
.gstep__title { margin: 6px 0 .4em; font-size: 1.28rem; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
.gstep__text { margin: 0; line-height: 1.55; color: var(--ink-2); }
.gstep__text + .gnote,
.gstep__text + .gtips { margin-top: 12px; }
.gstep__cta { margin-top: 16px; }
.gstep__fig { grid-column: 1 / -1; margin: 20px 0 0; }

.gcode {
    padding: 1px 7px;
    border-radius: 7px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86em;
    white-space: nowrap;
    color: var(--ink);
}
.gnote {
    position: relative;
    margin: 0;
    padding: 12px 14px 12px 40px;
    border-radius: 14px;
    background: var(--surface-soft);
    font-size: .94rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.gnote::before {
    content: "i";
    position: absolute;
    left: 13px;
    top: 13px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink-3);
    color: #fff;
    font: 700 12px/18px Georgia, serif;
    text-align: center;
}
.gnote--warn { background: #fff6e6; color: #6b4b12; }
.gnote--warn::before { content: "!"; background: #ff9f0a; font-family: inherit; }
.gtips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gtips li {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-soft);
    font-size: .94rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.gtips b { color: var(--ink); font-weight: 600; }
.gtips a,
.fix__text a,
.faq__item a { color: var(--accent); text-decoration: none; }
.gtips a:hover,
.fix__text a:hover,
.faq__item a:hover { text-decoration: underline; }

/* «Экран» с картинкой шага: обои рабочего стола, в нём — окно приложения или окно Windows.
   Размеры макетов — в долях ширины «экрана» (cqw), поэтому они одинаковы и под шагом, и в экране справа. */
.gshot {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
    background:
        radial-gradient(circle at -18% 118%, transparent 46%, rgba(120, 170, 255, .22) 46.3%, transparent 46.8%,
            transparent 58%, rgba(120, 170, 255, .14) 58.3%, transparent 58.8%,
            transparent 71%, rgba(120, 170, 255, .09) 71.3%, transparent 71.8%),
        radial-gradient(60% 70% at 26% 70%, rgba(27, 100, 255, .55), transparent 70%),
        radial-gradient(50% 55% at 80% 22%, rgba(41, 151, 255, .32), transparent 70%),
        radial-gradient(60% 50% at 60% 100%, rgba(143, 160, 189, .2), transparent 70%),
        linear-gradient(#07122b, #020509);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    letter-spacing: 0;
    color: #fff;
}
.gshot--app { aspect-ratio: 3 / 4; }

/* окно приложения — настоящий экран с тестовыми данными; метки на нём — в долях самого окна */
.gappbox {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 88%;
    aspect-ratio: 400 / 720;
    transform: translate(-50%, -50%);
}
.gapp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(0, 0, 0, .8));
}
/* второй экран того же шага («Подключено», результат проверки) по кругу сменяет первый */
.gshot--flip .gapp--next { opacity: 0; animation: gFlip 6s var(--ease) infinite; animation-play-state: paused; }
.gstep__fig.is-in .gapp--next,
.gstep__fig.is-active .gapp--next { animation-play-state: running; }

/* касание кнопки подключения — на 3-й секунде, перед сменой экрана */
.gtap {
    position: absolute;
    left: 50%;
    top: 35%;
    width: 34%;
    aspect-ratio: 1;
    margin: -17% 0 0 -17%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    opacity: 0;
    animation: gTap 6s ease-out infinite;
    animation-play-state: paused;
    pointer-events: none;
}
.gstep__fig.is-in .gtap,
.gstep__fig.is-active .gtap { animation-play-state: running; }

/* метки на экранах: номер или галочка, мягко пульсируют */
.gpin {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7cqw;
    height: 7cqw;
    min-width: 22px;
    min-height: 22px;
    margin: -3.5cqw 0 0 -3.5cqw;
    border-radius: 50%;
    background: var(--accent-bright);
    color: #fff;
    font: 700 clamp(11px, 3.4cqw, 15px)/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    box-shadow: 0 0 0 4px rgba(41, 151, 255, .3), 0 6px 18px rgba(0, 0, 0, .45);
    animation: gPin 2.4s ease-in-out infinite;
}
.gpin svg { width: 55%; height: 55%; }
.gpin[data-pin="login-fields"] { left: 8%; top: 63.8%; }
.gpin[data-pin="login-btn"] { left: 8%; top: 79%; }
/* на левой кромке карточек подписок, не закрывая значок у строки мест */
.gpin[data-pin="pick-devices"] { left: 6%; top: 43.7%; }
.gpin[data-pin="pick-full"] { left: 6%; top: 57.6%; }
/* у левого края чипа: на первом экране — на «Проверить доступность», на втором — вплотную к «Проверить снова» */
.gpin[data-pin="check"] { left: 46%; top: 27.9%; }
/* правее надписи «Обновить до …», ещё внутри меню */
.gpin[data-pin="update"] { left: 77%; top: 18.5%; }

/* номер метки в тексте шага — такой же кружок, как на картинке */
.gref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45em;
    height: 1.45em;
    margin: 0 .1em;
    border-radius: 50%;
    background: var(--accent-bright);
    color: #fff;
    font-size: .72em;
    font-weight: 700;
    line-height: 1;
    vertical-align: .15em;
}

/* курсор мыши в макетах: подходит к нужной кнопке и «нажимает» */
.mcursor {
    position: absolute;
    z-index: 5;
    width: 5.2cqw;
    height: 7.6cqw;
    min-width: 14px;
    min-height: 20px;
    background: #fff;
    clip-path: polygon(0 0, 0 78%, 22% 62%, 38% 98%, 52% 92%, 37% 57%, 66% 57%);
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
    animation: gCursor 4.2s var(--ease) infinite;
    animation-play-state: paused;
}
.gstep__fig.is-in .mcursor,
.gstep__fig.is-active .mcursor { animation-play-state: running; }

/* номер действия в макете (SmartScreen: сначала «Подробнее», потом кнопка) */
.mmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.55em;
    height: 1.55em;
    margin-right: .5em;
    border-radius: 50%;
    background: #fff;
    color: #0a4a9a;
    font-size: .8em;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

/* ---------- Макеты окон Windows (тёмная тема Windows 11) ---------- */
.mock {
    position: absolute;
    font-size: 2.9cqw;
    line-height: 1.35;
    color: #fff;
    border-radius: 2.2cqw;
    box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .09);
}
.mock p { margin: 0; }

/* значки файлов и папок */
.mfile {
    position: relative;
    display: inline-block;
    flex: none;
    width: 1.35em;
    height: 1.65em;
    border-radius: .16em;
    background: linear-gradient(#f3f4f6, #d8dbe0);
    clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
}
.mfile--zip { background: linear-gradient(90deg, transparent 42%, #6b6f78 42%, #6b6f78 58%, transparent 58%) center 0 / 100% 60% no-repeat, linear-gradient(#ffd666, #f2b42d); }
.mfile--img { background: linear-gradient(#7cc4ff, #2f80ed); }
.mfile--app {
    width: 1.55em;
    height: 1.55em;
    border-radius: .34em;
    clip-path: none;
    background: radial-gradient(circle at 50% 30%, #1e3a66, #060b16 75%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mfile--app::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: .09em solid #3d8bff;
    border-bottom-color: transparent;
}
.mfile--app::after {
    content: "M";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82em;
    color: #e8eef8;
}
.mfold {
    position: relative;
    display: inline-block;
    flex: none;
    width: 1.6em;
    height: 1.25em;
    border-radius: .14em;
    background: linear-gradient(#ffd25c, #f0ad1c);
}
.mfold::before {
    content: "";
    position: absolute;
    left: 0;
    top: -.18em;
    width: 46%;
    height: .3em;
    border-radius: .12em .12em 0 0;
    background: #e8a313;
}

/* загрузки браузера */
.mock-dl {
    left: 50%;
    top: 50%;
    width: 74cqw;
    padding: 2.4cqw;
    background: #2b2b2e;
    transform: translate(-50%, -50%);
}
.mock-dl__head { display: flex; align-items: center; justify-content: space-between; padding: .2em .4em 1em; font-weight: 600; }
.mock-dl__tools { display: flex; gap: .7em; }
.mock-dl__tools i { width: .9em; height: .9em; border-radius: .2em; border: .1em solid rgba(255, 255, 255, .45); }
.mock-dl__row {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .9em;
    border-radius: 1.4cqw;
    background: rgba(255, 255, 255, .06);
}
.mock-dl__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-dl__name small { display: block; margin-top: .15em; font-size: .82em; font-weight: 400; color: rgba(255, 255, 255, .6); }
.mock-dl__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: .5em;
    background: rgba(255, 255, 255, .08);
    color: #cfe4ff;
}
.mock-dl__open svg { width: 1.1em; height: 1.1em; }
.mock-dl__bar { height: .32em; margin: .9em .2em .1em; border-radius: 1em; background: rgba(255, 255, 255, .1); overflow: hidden; }
.mock-dl__bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: #34c759; transform-origin: left; animation: gDownload 4.2s var(--ease) infinite; animation-play-state: paused; }
.gstep__fig.is-in .mock-dl__bar span,
.gstep__fig.is-active .mock-dl__bar span { animation-play-state: running; }
.mock-dl .mcursor { left: 86%; top: 40%; }

/* окно «Проводника» */
.mwin { background: #1f1f22; overflow: hidden; }
.mwin__bar { display: flex; align-items: center; justify-content: space-between; height: 3.2em; padding: 0 0 0 1em; background: #2a2a2d; }
.mwin__title { display: flex; align-items: center; gap: .6em; font-size: .92em; }
.mwin__title .mfold { font-size: .8em; }
.mwin__ctl { display: flex; height: 100%; }
.mwin__ctl i { position: relative; width: 3.2em; height: 100%; }
.mwin__ctl i::before { content: ""; position: absolute; left: 50%; top: 50%; width: .95em; height: .07em; background: rgba(255, 255, 255, .8); transform: translate(-50%, -50%); }
.mwin__ctl i:nth-child(2)::before { height: .8em; width: .8em; background: none; border: .07em solid rgba(255, 255, 255, .8); }
.mwin__ctl i:nth-child(3)::before,
.mwin__ctl i:nth-child(3)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.05em; height: .07em; background: rgba(255, 255, 255, .8); transform: translate(-50%, -50%) rotate(45deg); }
.mwin__ctl i:nth-child(3)::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mwin__path { padding: .6em 1em; font-size: .86em; color: rgba(255, 255, 255, .62); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mlist { list-style: none; margin: 0; padding: .5em; }
.mlist li { display: flex; align-items: center; gap: .75em; padding: .55em .7em; border-radius: .5em; }
.mlist li small { margin-left: auto; font-size: .86em; color: rgba(255, 255, 255, .5); }
.mlist li.is-sel { background: rgba(96, 205, 255, .16); box-shadow: inset 0 0 0 1px rgba(96, 205, 255, .35); }
.mlist li.is-dim { color: rgba(255, 255, 255, .55); }
.mwin--explorer { left: 7cqw; top: 9cqw; width: 64cqw; }

/* контекстное меню */
.mmenu {
    right: 7cqw;
    top: 26cqw;
    width: 44cqw;
    padding: .45em;
    background: #2c2c2f;
    display: grid;
    gap: .15em;
}
.mmenu__item { position: relative; display: flex; align-items: center; gap: .8em; padding: .6em .8em; border-radius: .45em; }
.mmenu__item.is-hot { background: rgba(255, 255, 255, .1); }
.mmenu__item.is-hot::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: .18em; border-radius: .2em; background: #60cdff; }
.mmenu__sep { height: 1px; margin: .2em .4em; background: rgba(255, 255, 255, .1); }
.mmenu__ico { width: 1.15em; height: 1.15em; flex: none; border-radius: .2em; border: .09em solid rgba(255, 255, 255, .75); }
.mmenu__ico--zip { border-color: #ffd25c; background: linear-gradient(90deg, transparent 40%, rgba(255, 210, 92, .8) 40%, rgba(255, 210, 92, .8) 60%, transparent 60%); }
.mmenu__ico--copy { border-radius: .3em; }
.mmenu__ico--info { border-radius: 50%; }
.mmenu .mcursor { left: 58%; top: 34%; }

/* «Контроль учётных записей» */
.mwin--back { left: 5cqw; top: 6cqw; width: 52cqw; opacity: .9; }
.muac {
    right: 6cqw;
    top: 15cqw;
    width: 60cqw;
    overflow: hidden;
    background: #202023;
}
.muac__head { padding: .75em 1.1em; font-size: .86em; background: linear-gradient(90deg, #8a5a00, #b07800); color: #fff; }
.muac__q { padding: .9em 1.1em .7em; font-size: 1.12em; font-weight: 600; line-height: 1.3; }
.muac__app { display: flex; align-items: center; gap: .65em; padding: 0 1.1em .5em; font-weight: 600; }
.muac__meta { padding: 0 1.1em 1em; font-size: .86em; color: rgba(255, 255, 255, .62); }
.muac__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; padding: .9em 1.1em; background: #2a2a2d; }
.muac__btns span { padding: .55em; border-radius: .4em; text-align: center; background: rgba(255, 255, 255, .1); }
.muac__btns .muac__yes { background: #4cc2ff; color: #00264d; font-weight: 600; }
.muac .mcursor { left: 30%; top: 80%; }

/* SmartScreen */
.mss {
    left: 50%;
    top: 50%;
    width: 80cqw;
    padding: 1.6em 1.7em 1.4em;
    background: linear-gradient(160deg, #1166c7, #0a4a9a);
    transform: translate(-50%, -50%);
}
.mss__title { font-size: 1.5em; font-weight: 600; line-height: 1.2; }
.mss__text { margin-top: .8em !important; font-size: .92em; color: rgba(255, 255, 255, .85); }
.mss__more { display: flex; align-items: center; margin-top: .9em !important; font-size: .92em; }
.mss__meta { margin-top: .7em !important; font-size: .86em; color: rgba(255, 255, 255, .78); }
.mss__btns { display: flex; justify-content: flex-end; gap: .6em; margin-top: 1.4em; }
.mss__btns span { display: inline-flex; align-items: center; padding: .55em .9em; border: .08em solid rgba(255, 255, 255, .75); font-size: .9em; }
.mss__btns .mss__run { background: rgba(255, 255, 255, .16); border-color: #fff; font-weight: 600; }

/* трей: угол панели задач и меню значка над ним */
.gshot--tray .gtray__menu {
    position: absolute;
    right: 21cqw;
    bottom: 19cqw;
    width: 54cqw;
    height: auto;
    max-width: none;
    border-radius: 3.2cqw;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
    transform-origin: 70% 100%;
    animation: gMenu 4.2s var(--ease) infinite;
    animation-play-state: paused;
}
.gstep__fig.is-in .gtray__menu,
.gstep__fig.is-active .gtray__menu { animation-play-state: running; }
.mtask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.6cqw;
    height: 13cqw;
    padding: 0 3cqw;
    background: rgba(28, 30, 36, .88);
    border-top: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 2.9cqw;
}
.mtask__chev { width: 1.3em; height: 1.3em; border-left: .14em solid rgba(255, 255, 255, .85); border-top: .14em solid rgba(255, 255, 255, .85); transform: translateY(.3em) scale(.55) rotate(45deg); }
.mtask__app {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1em;
    height: 2.1em;
    border-radius: .5em;
    background: linear-gradient(#3d93ff, #0a6cf0);
    box-shadow: 0 0 0 .5em rgba(255, 255, 255, .1);
}
.mtask__app b { font-size: 1.2em; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.mtask__ico { position: relative; width: 1.5em; height: 1.5em; opacity: .9; }
.mtask__ico--wifi { border-radius: 50% 50% 0 0; border: .15em solid #fff; border-bottom: 0; border-left-color: transparent; border-right-color: transparent; transform: scale(.9); }
.mtask__ico--vol { clip-path: polygon(0 32%, 32% 32%, 64% 6%, 64% 94%, 32% 68%, 0 68%); background: #fff; }
.mtask__ico--bat { width: 2em; height: 1em; border: .14em solid #fff; border-radius: .25em; background: linear-gradient(90deg, #fff 70%, transparent 70%) .15em 50% / calc(100% - .3em) calc(100% - .3em) no-repeat; }
.mtask__clock { display: grid; text-align: right; font-size: .95em; line-height: 1.25; }
.mtask__clock small { font-size: 1em; }
.mtask .mcursor { left: auto; right: 40cqw; top: 46%; }
.mcursor--right { animation-name: gCursorTray; }

/* ---------- Широкий экран: шаги слева, «экран» с картинкой справа ---------- */
.guide__view { display: none; }
@media (min-width: 1000px) {
    .guide.is-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
    .guide.is-live .guide__steps { gap: 0; padding: 18vh 0 24vh; }
    .guide.is-live .gstep {
        min-height: 54vh;
        align-content: center;
        padding: 26px 0;
        background: none;
        border: 0;
        opacity: .3;
        transition: opacity .5s var(--ease);
    }
    .guide.is-live .gstep.is-active { opacity: 1; }
    .guide.is-live .gstep .gstep__fig { display: none; }
    .guide.is-live .gstep__title { font-size: 1.6rem; }
    .guide.is-live .gstep__text { font-size: 1.06rem; }
    .guide.is-live .gnote,
    .guide.is-live .gtips li { background: #fff; }
    .guide.is-live .gnote--warn { background: #fff6e6; }
    .guide.is-live .guide__view {
        display: block;
        position: sticky;
        top: calc(var(--nav-h) + (100vh - var(--nav-h) - min(640px, 74vh)) / 2);
    }
    .guide__view { perspective: 1600px; }
    .guide__screen {
        position: relative;
        height: min(640px, 74vh);
        transform: rotateY(calc(var(--gx, 0) * 6deg)) rotateX(calc(var(--gy, 0) * -4deg));
        transform-style: preserve-3d;
        padding: 12px;
        border-radius: 34px;
        background: linear-gradient(160deg, #2a2b30, #0c0c0e 40%, #1b1c20);
        box-shadow: 0 40px 90px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .1);
    }
    .guide__screen .gstep__fig {
        position: absolute;
        inset: 12px;
        display: block;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(14px) scale(.985);
        transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s .7s;
    }
    .guide__screen .gstep__fig.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s;
    }
    .guide__screen .gshot { height: 100%; aspect-ratio: auto; border-radius: 22px; }
    /* в «экране» справа окно приложения пропорционально меньше: экран почти квадратный */
    .guide__screen .gshot--app .gappbox { height: 86%; }
    .guide__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
    .guide__dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: rgba(0, 0, 0, .2);
        cursor: pointer;
        transition: width .4s var(--ease), background-color .4s var(--ease);
    }
    .guide__dots button.is-active { width: 28px; background: var(--ink); }
}

/* «Готово!» после шагов */
.gdone {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 720px;
    margin: clamp(36px, 6vw, 64px) auto 0;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background: radial-gradient(120% 140% at 0% 0%, rgba(52, 199, 89, .14), transparent 60%), #fff;
    border: 1px solid rgba(52, 199, 89, .3);
}
.gdone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #34c759;
    color: #fff;
    box-shadow: 0 10px 26px rgba(52, 199, 89, .35);
}
.gdone__title { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.012em; }
.gdone__text { margin: .2em 0 0; color: var(--ink-2); line-height: 1.5; }

/* ---------- Если что-то не так ---------- */
.fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fix {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    border: 1px solid var(--line);
}
.fix__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--accent);
}
.fix__title { margin: 0 0 .35em; font-size: 1.1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.fix__text { margin: 0; font-size: .96rem; line-height: 1.5; color: var(--ink-2); }
.fix__link { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 600; text-decoration: none; }
.fix__link:hover { text-decoration: underline; }
.fix--support {
    background: radial-gradient(120% 110% at 100% 0%, rgba(41, 151, 255, .3), transparent 60%), var(--bg-dark);
    border-color: rgba(41, 151, 255, .25);
    color: var(--on-dark);
}
.fix--support .fix__icon { background: rgba(41, 151, 255, .16); border-color: rgba(41, 151, 255, .3); color: var(--accent-bright); }
.fix--support .fix__text { color: var(--on-dark-2); }
.fix--support .gcode { background: rgba(255, 255, 255, .08); border-color: var(--line-dark); color: var(--on-dark); }
.fix--support .fix__link { color: var(--accent-bright); }
@media (min-width: 734px) { .fixes { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
/* восемь карточек: в три колонки последняя (поддержка) — на две, чтобы ряд не обрывался */
@media (min-width: 1000px) { .fixes { grid-template-columns: repeat(3, 1fr); } .fix--support { grid-column: span 2; } }
.fixes .fix:nth-child(3n+2) { transition-delay: .07s; }
.fixes .fix:nth-child(3n) { transition-delay: .14s; }

/* ---------- Требования ---------- */
.specs { max-width: 900px; margin: 0 auto; }
.spec { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.spec:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font-weight: 600; }
.spec dd { margin: 0; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 734px) { .spec { grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; } }

/* ---------- Вопросы ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
    position: relative;
    padding: 22px 48px 22px 0;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    list-style: none;
    cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--accent), var(--accent)) center / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) center / 2px 16px no-repeat;
    transform: translateY(-50%);
    transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin: 0 0 24px; max-width: 700px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Скачать ---------- */
.wbuy { padding-block: clamp(84px, 12vw, 150px); text-align: center; }
.wbuy__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wbuy .orb--1 {
    width: 80vw;
    max-width: 640px;
    aspect-ratio: 1;
    left: 50%;
    top: 46%;
    background: radial-gradient(circle, rgba(41, 151, 255, .8), transparent 62%);
    opacity: .4;
    transform: translate(-50%, -50%);
}
.wbuy .orb--2 {
    width: 60vw;
    max-width: 460px;
    aspect-ratio: 1;
    left: 14%;
    bottom: -22%;
    background: radial-gradient(circle, rgba(27, 100, 255, .7), transparent 65%);
    opacity: .3;
}
.wbuy__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.wbuy__title {
    margin: .35em 0 0;
    font-size: clamp(2.2rem, 6.5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
}
.wbuy__sub { margin: 1em auto 2em; max-width: 560px; font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.5; color: var(--on-dark-2); }
.wbuy__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.wbuy__fine { margin: 40px auto 0; max-width: 560px; font-size: .82rem; line-height: 1.55; color: var(--on-dark-3); }

/* ---------- Анимации ---------- */
@keyframes appLit {
    0%, 100% { border-color: var(--line-dark); box-shadow: none; color: #8ccaff; }
    12%, 40% { border-color: rgba(41, 151, 255, .65); box-shadow: 0 0 22px rgba(41, 151, 255, .35); color: #fff; }
    60% { border-color: var(--line-dark); box-shadow: none; color: #8ccaff; }
}
@keyframes gFlip {
    0%, 36% { opacity: 0; }
    44%, 86% { opacity: 1; }
    96%, 100% { opacity: 0; }
}
@keyframes gTap {
    0%, 28% { opacity: 0; transform: scale(.4); }
    31% { opacity: 1; transform: scale(.55); }
    40% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.5); }
}
@keyframes gPin {
    0%, 100% { box-shadow: 0 0 0 4px rgba(41, 151, 255, .3), 0 6px 18px rgba(0, 0, 0, .45); }
    50% { box-shadow: 0 0 0 9px rgba(41, 151, 255, .12), 0 6px 18px rgba(0, 0, 0, .45); }
}
@keyframes gCursor {
    0% { opacity: 0; transform: translate(9cqw, 7cqw); }
    12% { opacity: 1; }
    45% { transform: translate(0, 0); }
    52% { transform: translate(0, 0) scale(.82); }
    58%, 88% { opacity: 1; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes gCursorTray {
    0% { opacity: 0; transform: translate(-6cqw, -9cqw); }
    12% { opacity: 1; }
    30% { transform: translate(0, 0); }
    36% { transform: translate(0, 0) scale(.82); }
    42%, 88% { opacity: 1; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes gMenu {
    0%, 34% { opacity: 0; transform: translateY(3cqw) scale(.94); }
    44%, 90% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
}
@keyframes gDownload {
    0% { transform: scaleX(0); background: #2f80ff; }
    55% { transform: scaleX(1); background: #2f80ff; }
    62%, 100% { transform: scaleX(1); background: #34c759; }
}

@media (prefers-reduced-motion: reduce) {
    .gshot--flip .gapp--next { opacity: 1; }
    .gtap,
    .mcursor { display: none; }
    .gtray__menu { opacity: 1; transform: none; }
}