:root {
    --bg: #0d0b0b;
    --surface: #1a1615;
    --surface-2: #241e1d;
    --ink: #f3efee;
    --muted: #aca3a0;
    --accent: #ff5a36;
    --gradient: linear-gradient(110deg, #ff7a2f 0%, #ff4a3d 45%, #ff2e6e 100%);
    --accent-ink: #0d0b0b;

    --step-small: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
    --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
    --step-head: clamp(2rem, 1.2rem + 3.2vw, 4rem);
    --step-display: clamp(7rem, 2rem + 17vw, 17.5rem);

    --display: 'Unbounded', 'Onest', system-ui, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Контент живёт в колонке --page, фоны идут на всю ширину */
    --page: 1240px;
    --gutter: clamp(16px, 2.2vw, 32px);
    --edge: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
    --section: clamp(112px, 13vw, 200px);
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 500 var(--step-body)/1.55 'Onest', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* Заглушка вместо картинки: тёплое свечение, точки, иконка и подпись */
.ph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 74, 61, .24), transparent 60%),
        radial-gradient(90% 80% at 0% 100%, rgba(255, 46, 110, .16), transparent 60%),
        var(--surface-2);
    color: var(--muted);
    text-align: center;
}

.ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.5px);
    background-size: 18px 18px;
}

.ph__icon {
    position: relative;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.ph__label { position: relative; max-width: 24ch; font-size: var(--step-small); line-height: 1.35; }

/* Декоративный фон секции: светящиеся пятна, точечная сетка, кольца */
.fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.fx__orb {
    position: absolute;
    border-radius: 50%;
    animation: orb 18s ease-in-out infinite alternate;
}

.fx__orb--a {
    top: -20%;
    right: -12%;
    width: min(62vw, 900px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 90, 54, .5), transparent 62%);
}

.fx__orb--b {
    bottom: -30%;
    left: -14%;
    width: min(52vw, 760px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 46, 110, .38), transparent 62%);
    animation-duration: 24s;
    animation-direction: alternate-reverse;
}

.fx__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 38%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 70% at 72% 38%, #000 15%, transparent 72%);
}

.fx__ring {
    position: absolute;
    top: 42%;
    border-radius: 50%;
    aspect-ratio: 1;
    translate: 0 -50%;
}

.fx__ring--a {
    right: -16vw;
    width: min(66vw, 980px);
    border: 1px solid rgba(255, 255, 255, .1);
}

.fx__ring--b {
    right: -4vw;
    width: min(40vw, 600px);
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: rgba(255, 46, 110, .6);
    animation: spin 26s linear infinite;
}

.fx--contact .fx__orb--a { right: auto; left: -12%; }
.fx--contact .fx__orb--b { left: auto; right: -14%; }
.fx--contact .fx__grid { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 28% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 28% 50%, #000 15%, transparent 72%); }
.fx--contact .fx__ring { right: auto; top: 50%; }
.fx--contact .fx__ring--a { left: -18vw; }
.fx--contact .fx__ring--b { left: -6vw; }

/* В блоке с цифрами фон — сам градиент, элементы поверх него светлые */
.fx--figure .fx__orb--a { background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%); }
.fx--figure .fx__orb--b { background: radial-gradient(circle, rgba(110, 0, 40, .4), transparent 62%); }
.fx--figure .fx__grid { background-image: radial-gradient(rgba(13, 11, 11, .22) 1px, transparent 1.5px); }
.fx--figure .fx__ring--a { border-color: rgba(255, 255, 255, .3); }
.fx--figure .fx__ring--b { border-top-color: #fff; border-right-color: rgba(255, 255, 255, .45); }

@keyframes orb {
    to { transform: translate(-8%, 10%) scale(1.12); }
}

@keyframes spin {
    to { rotate: 360deg; }
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, p { margin: 0; }

h2 {
    font-family: var(--display);
    font-size: var(--step-head);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-wrap: balance;
}

.wrap { padding-inline: var(--edge); }

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--gutter);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    background: var(--gradient);
    background-size: 160% 100%;
    background-position: 0 50%;
    color: #fff;
    font: 600 var(--step-small)/1 'Onest', system-ui, sans-serif;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--ease), background-position .5s var(--ease);
}

.btn:hover { background-position: 100% 50%; }
.btn:active { transform: scale(.97); }

.link {
    text-decoration: underline;
    transition: color .2s;
}

.link:hover { color: var(--accent); }

/* Шапка: прозрачная наверху страницы, с фоном при прокрутке */
.bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 14px;
    padding-inline: var(--edge);
    transition: background-color .3s, padding .3s var(--ease);
}

.bar.is-solid { background: var(--bg); padding-block: 10px; }

/* Логотип: значок с «Ш» и название с мигающим курсором */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo__mark {
    width: 36px;
    height: 36px;
    flex: none;
    transition: transform .4s var(--ease);
}

.logo__bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform .4s var(--ease);
}

.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo:hover .logo__bar { transform: scaleY(1.6); }

.logo__word {
    font: 800 18px/1 var(--display);
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.logo__caret {
    margin-left: 2px;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: caret 1.1s steps(1) infinite;
}

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

.bar__nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: var(--step-small);
    font-weight: 600;
}

.bar__nav > a:not(.btn) { text-decoration: none; color: var(--ink); opacity: .75; transition: opacity .2s; }
.bar__nav > a:not(.btn):hover { opacity: 1; }
.bar__nav .btn { min-height: 44px; padding: 0 20px; }

/* Переключатель языка: текущий язык подсвечен, второй — ссылка */
.lang {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(243, 239, 238, .18);
    border-radius: 999px;
}

.lang__link {
    min-width: 40px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    opacity: .6;
    transition: opacity .2s, background-color .2s;
}

.lang__link:hover { opacity: 1; }
.lang__link[aria-current] { background: var(--surface-2); opacity: 1; pointer-events: none; }

/* Кнопка мобильного меню: две линии, в открытом состоянии крестик */
.bar__toggle {
    display: none;
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.bar__toggle span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--ease), top .3s var(--ease);
}

.bar__toggle span:first-child { top: 17px; }
.bar__toggle span:last-child { top: 25px; }

.bar.is-open .bar__toggle span:first-child { top: 21px; transform: rotate(45deg); }
.bar.is-open .bar__toggle span:last-child { top: 21px; transform: rotate(-45deg); }

/* Первый экран: имя во всю ширину колонки на декоративном фоне */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 120px;
    padding-bottom: clamp(32px, 5vh, 56px);
    overflow: hidden;
}

.hero__inner { position: relative; z-index: 1; container-type: inline-size; }

.hero__title {
    margin-bottom: clamp(28px, 4vh, 48px);
    font: 800 clamp(2.5rem, 9vw, 8.5rem)/0.92 var(--display);
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.hero__title span {
    display: block;
    width: max-content;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

/* Каждая строка ровно во всю ширину колонки. Делитель — ширина слова
   в Unbounded 800 в долях кегля плюс запас под выступы букв;
   при смене текста имени его нужно пересчитать. */
.hero__title span:first-child { font-size: calc(100cqi / 8.04); }
.hero__title span:last-child { font-size: calc(100cqi / 5.95); }

.hero__title span + span,
.stack__col h3 {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px var(--gutter);
    align-items: end;
}

.hero__lead {
    grid-column: 1 / 7;
    font-size: var(--step-lead);
    line-height: 1.3;
}

.hero__facts {
    grid-column: 7 / 10;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--step-small);
    line-height: 1.6;
    color: var(--muted);
}

.hero__cta {
    grid-column: 10 / 13;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: var(--step-small);
}

/* Бегущая строка стека */
.ticker {
    overflow: hidden;
    padding-block: clamp(20px, 2.4vw, 32px);
    background: var(--gradient);
    color: #fff;
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker 60s linear infinite;
}

.ticker__item {
    font: 800 var(--step-lead)/1 var(--display);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ticker__item::after {
    content: '/';
    margin-inline: 0.9em;
    opacity: .45;
}

@keyframes ticker {
    to { transform: translateX(-50%); }
}

/* О себе: портрет вместо буквицы */
.about { padding-block: var(--section); }

.about .grid { align-items: start; }

.about__facts {
    grid-column: 1 / 3;
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
    font-size: var(--step-small);
    line-height: 1.4;
    color: var(--muted);
}

.about__facts li + li { margin-top: 24px; }
.about__facts b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }

.about__text {
    grid-column: 3 / 12;
    font-size: clamp(1.375rem, 0.9rem + 1.3vw, 2.25rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
}

.about__text p + p { margin-top: 1.22em; color: var(--muted); }

.about__portrait {
    float: left;
    width: 3.66em;
    height: 3.66em;
    margin: 0.12em 0.5em 0 0;
    padding: 0;
    border-radius: 16px;
    object-fit: cover;
}

/* Цифра на градиентном поле */
.figure__frame {
    position: relative;
    background: var(--gradient);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 96px);
    padding-top: var(--gutter);
    padding-bottom: clamp(40px, 5vw, 72px);
    overflow: hidden;
}

.figure__head,
.figure__base { position: relative; z-index: 1; }

.figure__head {
    padding-top: 56px;
    font-size: var(--step-lead);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.2;
}

.figure__base {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.figure__big {
    font: 800 var(--step-display)/0.8 var(--display);
    letter-spacing: -0.05em;
    text-transform: uppercase;
    font-variant-numeric: lining-nums;
}

.figure__big small { font-size: var(--step-head); letter-spacing: -0.03em; margin-left: 0.15em; }

.figure__note {
    width: 26ch;
    text-align: right;
    font-size: var(--step-body);
    line-height: 1.4;
}

.figure__more { padding-top: 48px; }

.figure__item {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.figure__item:first-child { grid-column: 1 / 7; }
.figure__item:last-child { grid-column: 7 / 13; }

.figure__item b {
    font: 800 var(--step-head)/1 var(--display);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums lining-nums;
}

.figure__item span { color: var(--muted); max-width: 30ch; }

/* Проекты: крупные названия и закреплённое превью */
.work { padding-block: var(--section); }

.work .grid { align-items: start; }

.work__index { grid-column: 1 / 8; }

.work__index h2 { margin-bottom: 48px; }

.work__list { list-style: none; margin: 0; padding: 0; }

.proj {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 10px;
    color: var(--muted);
    cursor: default;
    outline-offset: 0;
    transition: color .25s, transform .35s var(--ease);
}

.proj__name {
    font: 800 var(--step-head)/1 var(--display);
    letter-spacing: -0.035em;
}

.proj.is-active { color: var(--ink); transform: translateX(12px); }

.proj__photo, .proj__detail { display: none; }

.proj__tech { display: block; margin-top: 8px; color: var(--muted); font-size: var(--step-small); }

.work__frame {
    grid-column: 8 / 13;
    position: sticky;
    top: 14vh;
}

.work__pics,
.tasks__pics {
    position: relative;
    aspect-ratio: 4 / 5;
}

.work__pics .ph,
.tasks__pics .ph {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .3s, transform .6s var(--ease);
}

.work__pics .ph.is-active,
.tasks__pics .ph.is-active { opacity: 1; transform: none; }

.work__caption {
    margin-top: 20px;
    min-height: 5.6em;
    line-height: 1.45;
}

/* Задачи: закреплённая заглушка и активный список */
.tasks {
    padding-block: var(--section);
    background: var(--surface);
}

.tasks .grid { align-items: start; }

.tasks__media {
    grid-column: 1 / 6;
    position: sticky;
    top: 12vh;
}

.tasks__body { grid-column: 7 / 13; }

.tasks__body h2 { margin-bottom: 48px; }

.tasks__list { list-style: none; margin: 0; padding: 0; }

.task__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 58px;
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: 600 var(--step-lead)/1.2 'Onest', system-ui, sans-serif;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
    transition: color .2s, transform .25s var(--ease);
}

.task__row:hover { color: var(--ink); transform: translateX(6px); }
.task__row[aria-expanded="true"] { color: var(--ink); }

.task__tag { font-size: var(--step-small); font-weight: 500; color: var(--muted); white-space: nowrap; }
.task__row[aria-expanded="true"] .task__tag { color: var(--accent); }

.task__panel { padding: 8px 0 32px; max-width: 46ch; }
.js .task__panel[hidden] { display: none; }
.js .task__panel { animation: panel-in .4s var(--ease); }

@keyframes panel-in {
    from { opacity: 0; transform: translateY(10px); }
}

.task__panel h3 { font-size: var(--step-body); font-weight: 600; }
.task__panel p { margin-top: 8px; }
.task__stack { color: var(--muted); font-size: var(--step-small); }

.task__steps { margin: 20px 0 28px; padding-left: 1.3em; }
.task__steps li + li { margin-top: 6px; }
.task__steps li::marker { color: var(--accent); font-weight: 600; }

/* Стек: три колонки, название крупно, назначение под ним */
.stack { padding-block: var(--section); }

.stack .grid { row-gap: 56px; }

.stack h2 { grid-column: 1 / -1; }

.stack__col { grid-column: span 4; }

.stack__col h3 {
    margin-bottom: 16px;
    font-size: var(--step-body);
    font-weight: 600;
    width: max-content;
}

.stack__col dl { margin: 0; }

.stack__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 24px;
    padding-block: 12px;
    transition: transform .25s var(--ease);
}

.stack__item:hover { transform: translateX(6px); }

.stack__item dt {
    font-size: var(--step-lead);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.stack__item dd { margin: 0; grid-column: 1; color: var(--muted); font-size: var(--step-small); }

.stack__item .stack__since {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-variant-numeric: tabular-nums;
}

/* Контакты: крупная фраза и карточка на декоративном фоне */
.contact {
    position: relative;
    overflow: hidden;
}

.contact__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-block: var(--section);
}

.contact__big {
    max-width: 12ch;
    font: 800 var(--step-head)/1 var(--display);
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.contact__card {
    width: 420px;
    padding: 36px;
    background: var(--surface);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact__card h2 { font-size: var(--step-lead); }

.contact__card p { color: var(--muted); }

.contact__rows { margin: 0; }

.contact__rows div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 8px;
}

.contact__rows dt { color: var(--muted); }
.contact__rows dd { margin: 0; text-align: right; }
.contact__rows a { text-decoration: none; transition: color .2s; }
.contact__rows a:hover { color: var(--accent); }

.contact__card .btn { width: 100%; margin-top: 8px; }

/* Модальное окно заявки */
html:has(.modal[open]) { overflow: hidden; }

.modal {
    width: min(480px, calc(100% - 2 * var(--gutter)));
    max-height: calc(100dvh - 2 * var(--gutter));
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    color: var(--ink);
    overflow: auto;
    overscroll-behavior: contain;
}

.modal::backdrop { background: rgba(13, 11, 11, .72); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in .35s var(--ease); }
.modal[open]::backdrop { animation: fade-in .35s var(--ease); }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
}

@keyframes fade-in {
    from { opacity: 0; }
}

.modal__card { position: relative; padding: 36px; }

.modal__form,
.modal__done { display: flex; flex-direction: column; gap: 20px; }

.modal__form[hidden],
.modal__done[hidden] { display: none; }

.modal__done:focus { outline: none; }

.modal h2 { padding-right: 48px; font-size: var(--step-lead); }

.modal__lead,
.modal__done p { color: var(--muted); }

.modal__topic {
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: var(--step-small);
    color: var(--muted);
}

.modal__topic span { color: var(--ink); }

.modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s;
}

.modal__close:hover { background: #33292a; }
.modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--step-small);
    color: var(--muted);
}

.field input,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(243, 239, 238, .14);
    border-radius: 14px;
    background: var(--bg);
    color: var(--ink);
    font: 500 16px/1.4 'Onest', system-ui, sans-serif;
    transition: border-color .2s;
}

.field textarea { min-height: 112px; resize: vertical; }
.field ::placeholder { color: rgba(172, 163, 160, .55); }
.field input:hover, .field textarea:hover { border-color: rgba(243, 239, 238, .3); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); }

.modal__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.modal__error { color: #ff8a73; font-size: var(--step-small); }
.modal__error a { color: var(--ink); }

.modal .btn { width: 100%; }
.modal .btn:disabled { opacity: .6; cursor: progress; }

@media (max-width: 600px) {
    .modal__card { padding: 28px 20px; }
    .modal__close { top: 16px; right: 16px; }
}

/* Подвал: одна строка контактов */
.footer {
    padding-block: 28px;
    font-size: var(--step-small);
    color: var(--muted);
}

.footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--ink); }

/* Появление при прокрутке */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 75ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .hero__inner > * { animation: rise-in 1.1s var(--ease) both; }
.js .hero__row { animation-delay: .25s; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(36px); }
}

@media (min-width: 901px) {
    html:not(.js) .proj__detail { display: block; width: 100%; font-size: var(--step-small); color: var(--muted); }
}

@media (max-width: 900px) {
    .bar.is-open { background: var(--bg); }
    .logo { position: relative; z-index: 2; }
    .bar__toggle { display: block; }

    /* Меню на весь экран под шапкой */
    .bar__nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 96px var(--edge) 32px;
        overflow-y: auto;
        background:
            radial-gradient(80% 50% at 100% 0%, rgba(255, 90, 54, .28), transparent 70%),
            radial-gradient(70% 45% at 0% 100%, rgba(255, 46, 110, .2), transparent 70%),
            var(--bg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
    }

    .bar.is-open .bar__nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .3s var(--ease), transform .3s var(--ease);
    }

    .bar__nav > a:not(.btn) {
        padding-block: 12px;
        font: 800 clamp(1.75rem, 8vw, 2.5rem)/1.1 var(--display);
        letter-spacing: -0.03em;
        text-transform: uppercase;
        opacity: 1;
    }

    .bar__nav .btn { min-height: 56px; margin-top: auto; }
    .bar__nav .lang { align-self: flex-start; margin-top: 24px; }
    .lang__link { min-width: 56px; padding: 12px 16px; font-size: 15px; }

    .hero__lead,
    .hero__facts,
    .hero__cta,
    .about__facts,
    .about__text,
    .work__index,
    .tasks__media,
    .tasks__body,
    .stack__col { grid-column: 1 / -1; }

    .hero__cta { justify-self: start; }

    .about__facts { order: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 40px; }
    .about__facts li + li { margin-top: 0; }
    .about__text { font-size: 22px; line-height: 1.25; }
    .about__portrait { width: 5em; height: 5em; }

    .figure__base { flex-direction: column-reverse; align-items: flex-start; }
    .figure__big { font-size: 30vw; }
    .figure__note { text-align: left; font-size: 16px; }
    .figure__item:first-child,
    .figure__item:last-child { grid-column: 1 / -1; flex-direction: column; gap: 4px; }
    .figure__item + .figure__item { margin-top: 28px; }

    .work__frame { display: none; }
    .proj { color: var(--ink); padding-block: 0; margin-bottom: 48px; }
    .proj.is-active { transform: none; }
    .proj__name { font-size: 8vw; overflow-wrap: anywhere; }
    .proj__photo { display: flex; aspect-ratio: 16 / 10; margin-bottom: 8px; }
    .proj__detail { display: block; color: var(--ink); }

    .tasks__media { position: static; }
    .tasks__pics { aspect-ratio: 16 / 10; }
    .tasks__body { margin-top: 32px; }
    .task__row { min-height: 56px; }

    .contact__inner { flex-direction: column; align-items: stretch; }
    .contact__big { max-width: none; font-size: clamp(1.5rem, 6vw, 3rem); }
    .contact__card { width: 100%; padding: 28px; }
    .fx__ring--a { width: 120vw; right: -60vw; }
    .fx__ring--b { width: 80vw; right: -30vw; }

}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { transform: none; transition: opacity .3s; transition-delay: 0s; }
    .js .hero__inner > *, .js .task__panel { animation: none; }
    .fx__orb, .fx__ring { animation: none; }
    .bar__nav, .bar__toggle span { transition: none; }
    .logo__caret { animation: none; }
    .modal[open], .modal[open]::backdrop { animation: none; }
    .ticker__track { animation: none; }
    .work__pics .ph, .tasks__pics .ph { transform: none; }
    .proj.is-active, .task__row:hover, .stack__item:hover { transform: none; }
}