/* ============================================================
   КИНОЦЕХ ЛИЧНОСТИ
   Визуальная идея: «цех» — это мастерская, а не гламур.
   Формы взяты с монтажного стола: кадровые окна со срезанным
   углом, перфорация плёнки как ритм, слейт вместо баннера.

   Палитра унаследована от прежней версии, но сдвинута в тёплый
   графит с оливковым подтоном — подальше от синего «неонового
   чёрного». Неон остался один: лайм. Он работает как свет на
   монтажном столе, поэтому его мало и он всегда что-то значит.
   ============================================================ */

:root {
    /* Поверхности: почти чёрный с зелёным подтоном (из оливы #9ca755) */
    --gate:   #0C100C;
    --bench:  #141A13;
    --panel:  #1A2118;
    --rail:   #2A3327;
    --rail-2: #3B4837;

    /* Акценты: один неон + два тёплых */
    --lime:   #C9F23A;   /* свет: цена, фокус, активное состояние */
    --sand:   #E8D5AC;   /* «жирный карандаш», тёплый текст */
    --clay:   #D08A5C;   /* уровень «Про» */

    /* Текст */
    --ink:    #EDF0E8;
    --dim:    #9AA695;
    --faint:  #6B7568;

    --error:  #E8705F;

    /* Типографика */
    --display: 'Unbounded', system-ui, sans-serif;
    --body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    /* Срез угла — общая форма всех «кадровых окон» */
    --notch: 20px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t: 0.35s var(--ease);

    --wrap: 1180px;
    --head-h: 68px;
}

/* ========================= БАЗА ========================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--head-h) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--gate);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.65;
    font-weight: 400;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0; }
ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--lime); color: var(--gate); }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    /* env() — чтобы на телефонах с вырезом контент не влезал под скругления */
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
}

.band { padding: clamp(64px, 8.5vw, 110px) 0; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--gate); }
::-webkit-scrollbar-thumb { background: var(--rail-2); }
::-webkit-scrollbar-thumb:hover { background: var(--lime); }

/* Зерно плёнки — единственный «атмосферный» эффект, оправданный темой */
.grain {
    position: fixed;
    inset: -20%;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 0.8s steps(3) infinite;
}
@keyframes grain {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-2%, 1.5%); }
    66%  { transform: translate(1.5%, -2%); }
    100% { transform: translate(2%, 2%); }
}

/* ================== ПЕРФОРАЦИЯ ПЛЁНКИ ================== */
/* Разделитель секций: ритм кадров, а не декоративная линия */

.perf {
    height: 26px;
    background-color: var(--bench);
    background-image: radial-gradient(circle at 50% 50%, var(--gate) 0 4.5px, transparent 5px);
    background-size: 32px 26px;
    background-repeat: repeat-x;
    /* Плёнка идёт через кадровое окно по мере прокрутки — сдвиг задаёт скрипт */
    background-position: var(--film, 0px) 0;
    border-top: 1px solid var(--rail);
    border-bottom: 1px solid var(--rail);
}

/* ========================= ШАПКА ========================= */

.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: rgba(12, 16, 12, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t), background var(--t);
}
.header.stuck { border-bottom-color: var(--rail); }

.rail {
    height: var(--head-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-gate {
    width: 26px; height: 20px;
    flex: none;
    background: var(--lime);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    transition: transform var(--t);
}
.brand:hover .brand-gate { transform: translateX(3px); }
.brand-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}
.brand-name em { font-style: normal; color: var(--lime); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
    padding: 9px 14px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--dim);
    transition: color var(--t), background var(--t);
}
.nav-link:hover { color: var(--ink); background: var(--panel); }
.nav-link.on { color: var(--lime); }

/* Кнопки: прямоугольник со срезанным углом, без скруглений */
.cta {
    display: inline-block;
    padding: 16px 30px;
    font-family: var(--mono);
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--gate);
    background: var(--lime);
    border: none;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    transition: background var(--t), transform var(--t);
}
.cta:hover { background: var(--sand); transform: translateY(-2px); }
.cta-sm { padding: 10px 18px; font-size: 0.76rem; margin-left: 8px; }
.cta-block { width: 100%; }

.cta-ghost {
    display: inline-block;
    padding: 16px 28px;
    font-family: var(--mono);
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
    border: 1px solid var(--rail-2);
    transition: border-color var(--t), color var(--t);
}
.cta-ghost:hover { border-color: var(--lime); color: var(--lime); }

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--rail);
    cursor: pointer;
}
.burger span {
    width: 17px; height: 1.5px;
    background: var(--ink);
    transition: transform var(--t), opacity var(--t);
}
.burger.on span:nth-child(1) { transform: translateY(3.2px) rotate(45deg); }
.burger.on span:nth-child(2) { transform: translateY(-3.2px) rotate(-45deg); }

/* ========================== ГЕРОЙ ========================== */

.hero { padding-top: calc(var(--head-h) + 64px); }

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    padding-bottom: clamp(56px, 7vw, 92px);
}

.kicker {
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 20px;
}
.kicker::before {
    content: '';
    display: inline-block;
    width: 22px; height: 1px;
    margin-right: 12px;
    vertical-align: middle;
    background: var(--lime);
    transition: width 0.6s var(--ease) 0.15s;
}
/* Линейка прочерчивается, когда подпись появляется в кадре */
.kicker.reveal:not(.in)::before { width: 0; }

.hero-title {
    /* Unbounded — широкая гарнитура, поэтому на узких экранах кегль
       ведём от vw, а не упираем в фиксированный минимум */
    font-size: clamp(1.6rem, 6.2vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 24px;
    text-wrap: balance;
}
.tint { color: var(--lime); }

.hero-sub {
    max-width: 460px;
    font-size: 1.05rem;
    color: var(--dim);
    margin-bottom: 36px;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------- Хлопушка: единственный «громкий» элемент страницы ------- */

.slate { position: relative; }

.clap-teeth {
    display: block;
    height: 30px;
    background: repeating-linear-gradient(114deg,
        var(--ink) 0 26px,
        var(--gate) 26px 52px);
}

.slate-clap {
    transform-origin: 6% 100%;
    transform: rotate(-31deg);
}
/* Срабатывает, когда попадает в кадр, а не по таймеру: на телефоне
   хлопушка уходит ниже первого экрана и по таймеру её никто не увидит */
.slate.go .slate-clap {
    animation: clap 1.35s cubic-bezier(0.55, 0, 0.2, 1) 0.15s both;
}
.slate-clap .clap-teeth { border: 1px solid var(--rail-2); border-bottom: none; }

@keyframes clap {
    0%, 42% { transform: rotate(-31deg); }
    62%     { transform: rotate(1.5deg); }
    72%     { transform: rotate(-4deg); }
    84%     { transform: rotate(0.5deg); }
    100%    { transform: rotate(0); }
}

.slate-base {
    background: var(--bench);
    border: 1px solid var(--rail-2);
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.teeth-static { opacity: 0.28; height: 22px; }

.slate-fields { padding: 26px 28px 28px; display: grid; gap: 18px; }

.sf { display: grid; gap: 4px; }
.sf-split { grid-template-columns: 1fr 1fr; gap: 18px; }
.sf-split > div { display: grid; gap: 4px; }

.slate-fields dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}
.slate-fields dd {
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sand);
}
.sf-hi { color: var(--lime) !important; }

/* =================== ЗАГОЛОВКИ СЕКЦИЙ =================== */

.band-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    padding-bottom: 0.14em; /* запас, чтобы вытирание не срезало выносные элементы */
}
.band-lead {
    max-width: 560px;
    color: var(--dim);
    margin-bottom: 44px;
}
.band-title + .about,
.band-title + .progs,
.band-title + .crew,
.band-title + .book,
.band-title + .contacts { margin-top: 46px; }

.inline-link {
    color: var(--lime);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t);
}
.inline-link:hover { border-bottom-color: var(--lime); }

/* ========================== О НАС ========================== */

.about {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 52px;
    align-items: start;
}

.about-lead h3 {
    font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 16px;
}
.about-lead p { color: var(--dim); margin-bottom: 20px; }

.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Кадровое окно — базовая форма всей страницы */
.gate {
    padding: 26px 24px;
    background: var(--bench);
    border: 1px solid var(--rail);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
    transition: background var(--t), border-color var(--t), clip-path 0.45s var(--ease);
}
/* Срез угла приоткрывается — как диафрагма */
.gate:hover {
    background: var(--panel);
    border-color: var(--rail-2);
    clip-path: polygon(0 0, calc(100% - var(--notch) - 16px) 0, 100% calc(var(--notch) + 16px), 100% 100%, 0 100%);
}

.gate h4 {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--sand);
    margin-bottom: 9px;
}
.gate p { font-size: 0.9rem; color: var(--dim); }

/* ======================== ПРОГРАММЫ ======================== */

.progs {
    display: grid;
    /* min() обязателен: без него на экранах уже 310px колонка не сжимается
       и страница уезжает вбок */
    grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
    gap: 18px;
    align-items: start;
}

.prog {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    background: var(--bench);
    border: 1px solid var(--rail);
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
    transition: border-color var(--t), transform var(--t);
}
.prog:hover { border-color: var(--rail-2); transform: translateY(-5px); }

/* Световая линия проходит по верхней кромке и обрывается на срезе угла */
.prog::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 2px;
    background: var(--lime);
    transition: width 0.55s var(--ease);
}
.prog:hover::before { width: 100%; }

.prog-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.prog-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    font-size: 1rem;
    color: var(--lime);
    border: 1px solid var(--rail-2);
    transition: background var(--t), color var(--t);
}
.prog:hover .prog-icon { background: var(--lime); color: var(--gate); }

.prog h3 {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prog-desc { font-size: 0.9rem; color: var(--dim); margin-bottom: 24px; }

/* --- Переключатель возраста: один на весь блок, вместо повтора в каждой карточке --- */

.switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: max-content;
    max-width: 100%;
    margin-bottom: 36px;
    background: var(--bench);
    border: 1px solid var(--rail-2);
}

.sw {
    position: relative;
    z-index: 1;
    padding: 14px 26px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.79rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--dim);
    transition: color 0.3s var(--ease);
}
.sw span {
    margin-left: 8px;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}
.sw[aria-pressed="true"] { color: var(--gate); }

/* Подложка едет за выбором и меняет цвет: лайм = База, глина = Про */
.sw-ind {
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0; left: 0;
    width: 50%;
    background: var(--lime);
    transition: transform 0.45s var(--ease), background 0.45s var(--ease);
}
.switch[data-active="pro"] .sw-ind {
    transform: translateX(100%);
    background: var(--clay);
}

/* --- Уровни: видно один, второй ждёт своей очереди в том же месте сетки --- */

.tiers { display: grid; margin-top: auto; }

.tier {
    grid-area: 1 / 1;
    display: grid;
    gap: 11px;
    align-content: start;
    width: 100%;
    padding: 22px 20px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-left: 2px solid var(--rail-2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
                visibility 0.4s var(--ease), background var(--t), border-left-color var(--t);
}
.tier.show { opacity: 1; visibility: visible; transform: none; }
.tier:hover { background: #202818; border-left-color: var(--lime); }
.tier.picked { background: #232C1A; border-left-color: var(--lime); }

/* Цена — главный акцент карточки */
.tier-price {
    font-family: var(--mono);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--lime);
}
.tier-price i {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 0.71rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--faint);
}

.tier-meta {
    font-family: var(--mono);
    font-size: 0.71rem;
    letter-spacing: 0.05em;
    color: var(--sand);
}
.tier-desc { font-size: 0.85rem; color: var(--dim); }

.tier-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    transition: color var(--t);
}
.tier-go::after {
    content: '→';
    transition: transform var(--t);
}
.tier:hover .tier-go { color: var(--lime); }
.tier:hover .tier-go::after { transform: translateX(5px); }
.tier.picked .tier-go { color: var(--lime); }
.tier.picked .tier-go::after { content: '✓'; transform: none; }

/* ======================== НАСТАВНИКИ ======================== */

.crew {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 20px;
    align-items: start;
}

.member {
    padding: 20px;
    background: var(--bench);
    border: 1px solid var(--rail);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    transition: border-color var(--t);
}
.member:hover { border-color: var(--rail-2); }

/* Фото — кадровое окно 4:5, снимки приглушены и оживают при наведении */
.frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--gate);
}
.frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    /* Наводка на резкость: кадр «доводится» при наведении */
    filter: grayscale(1) blur(1.1px) contrast(1.06) brightness(0.84);
    transform: scale(1.03);
    transition: filter 0.6s var(--ease), transform 0.7s var(--ease);
}
.member:hover .frame img {
    filter: grayscale(0.12) blur(0) contrast(1.02) brightness(1);
    transform: scale(1.06);
}

.member h3 { font-size: 1.16rem; font-weight: 700; margin-bottom: 7px; }
.role { font-size: 0.85rem; color: var(--sand); line-height: 1.5; margin-bottom: 16px; }

/* Образование — нативный details, без лишнего JS */
.cv { border-top: 1px solid var(--rail); padding-top: 12px; }

.cv summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
    transition: color var(--t);
}
.cv summary::-webkit-details-marker { display: none; }
.cv summary:hover { color: var(--lime); }
.cv summary::after {
    content: '+';
    font-size: 1.05rem;
    line-height: 1;
    color: var(--lime);
    transition: transform var(--t);
}
.cv[open] summary::after { transform: rotate(45deg); }

.cv ul { display: grid; gap: 12px; padding: 14px 0 4px; }
.cv li {
    padding-left: 15px;
    border-left: 1px solid var(--rail-2);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--dim);
}
.cv strong { color: var(--ink); font-weight: 600; }
.cv-sub {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 16px;
}
.cv-flat li { border-left-color: var(--clay); }

/* ========================== ЗАПИСЬ ========================== */

.book {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    background: var(--bench);
    border: 1px solid var(--rail);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}

.book-side {
    padding: clamp(28px, 3.4vw, 42px);
    border-right: 1px solid var(--rail);
}
.book-note { color: var(--dim); font-size: 0.94rem; margin-bottom: 30px; }

.book-contacts { display: grid; gap: 18px; }
.book-contacts li { display: grid; gap: 3px; }
.book-contacts span {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}
.book-contacts a, .book-contacts p {
    font-family: var(--display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--sand);
    transition: color var(--t);
}
.book-contacts a:hover { color: var(--lime); }

.book-form { padding: clamp(28px, 3.4vw, 42px); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 14px;
    background: var(--gate);
    border: 1px solid var(--rail);
    color: var(--ink);
    font-family: var(--body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--t), background var(--t);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
.field textarea { resize: vertical; min-height: 88px; }
.field select { cursor: pointer; }
.field select option { background: var(--bench); color: var(--ink); }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--lime); background: #10150F; }

.field input.bad,
.field select.bad,
.field textarea.bad { border-color: var(--error); }

.consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 22px 0 24px;
}
.consent input {
    flex: none;
    width: 18px; height: 18px;
    margin-top: 2px;
    background: var(--gate);
    border: 1px solid var(--rail-2);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    border-radius: 0;
}
.consent input::after {
    content: '';
    width: 9px; height: 5px;
    border-left: 2px solid var(--gate);
    border-bottom: 2px solid var(--gate);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.2s var(--ease);
}
.consent input:checked { background: var(--lime); border-color: var(--lime); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent input.bad { border-color: var(--error); }
.consent label { font-size: 0.83rem; color: var(--dim); line-height: 1.5; cursor: pointer; }

.form-msg {
    display: none;
    margin-top: 16px;
    padding: 13px 16px;
    font-size: 0.88rem;
    border-left: 2px solid;
}
.form-msg.ok   { display: block; color: var(--lime);  border-color: var(--lime);  background: rgba(201, 242, 58, 0.07); }
.form-msg.err  { display: block; color: var(--error); border-color: var(--error); background: rgba(232, 112, 95, 0.08); }
.form-msg.info { display: block; color: var(--sand);  border-color: var(--sand);  background: rgba(232, 213, 172, 0.06); }

.cta[disabled] { opacity: 0.6; cursor: default; }

/* ========================= КОНТАКТЫ ========================= */

.contacts {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 18px;
    align-items: start;
}

.contact-box {
    padding: 32px 28px;
    background: var(--bench);
    border: 1px solid var(--rail);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.contact-box h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 22px; }

.cinfo { display: grid; gap: 16px; }
.cinfo > div { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--rail); }
.cinfo > div:last-child { border-bottom: none; padding-bottom: 0; }
.cinfo dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}
.cinfo dd { font-size: 0.95rem; color: var(--ink); }
.cinfo a { transition: color var(--t); }
.cinfo a:hover { color: var(--lime); }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    font-size: 0.95rem;
    color: var(--dim);
    border: 1px solid var(--rail);
    transition: color var(--t), border-color var(--t), background var(--t);
}
.socials a:hover { color: var(--gate); background: var(--lime); border-color: var(--lime); }

.map {
    position: relative;
    border: 1px solid var(--rail);
    line-height: 0;
    overflow: hidden;
}

/* Пока карта не включена, она не перехватывает прокрутку страницы —
   на телефоне это иначе превращается в ловушку для пальца */
.map-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    display: grid;
    place-content: center;
    padding: 16px;
    background: rgba(12, 16, 12, 0.55);
    border: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ink);
    text-align: center;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease), background 0.25s var(--ease);
}
.map-veil:hover { background: rgba(12, 16, 12, 0.4); }
.map-veil::before {
    content: '';
    display: block;
    width: 34px; height: 34px;
    margin: 0 auto 12px;
    border: 1px solid var(--lime);
    border-radius: 50%;
    background:
        linear-gradient(var(--lime), var(--lime)) center / 2px 12px no-repeat,
        linear-gradient(var(--lime), var(--lime)) center / 12px 2px no-repeat;
}
.map.live .map-veil { opacity: 0; visibility: hidden; }
.map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    /* Карта приведена к гамме сайта */
    filter: invert(0.91) hue-rotate(65deg) saturate(0.55) contrast(0.92) brightness(0.98);
    transition: filter 0.5s var(--ease);
}
.map:hover iframe { filter: invert(0.89) hue-rotate(65deg) saturate(0.8) contrast(0.98) brightness(1); }

/* =========================== ФУТЕР =========================== */

.footer { background: var(--bench); }

.foot {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 40px;
}

.foot-brand h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.foot-brand h3 em { font-style: normal; color: var(--lime); }
.foot-brand p { font-size: 0.9rem; color: var(--faint); }

.foot h4 {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 16px;
}
.foot-nav, .foot-contact { display: grid; gap: 9px; align-content: start; }
.foot-nav a, .foot-contact a {
    font-size: 0.92rem;
    color: var(--dim);
    transition: color var(--t);
}
.foot-nav a:hover, .foot-contact a:hover { color: var(--lime); }

.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-top: 22px;
    padding-bottom: 30px;
    border-top: 1px solid var(--rail);
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--faint);
}

/* ===================== ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ===================== */
/* Сдержанно: один короткий сдвиг, без каскадов и параллаксов */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Заголовки выезжают вытиранием — как титр, а не как всплывающий блок */
.reveal.t-wipe {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s var(--ease);
}
.reveal.t-wipe.in { clip-path: inset(0 0 0 0); }

/* Герой «включается» после хлопушки */
.hero-copy > * {
    opacity: 0;
    animation: cut 0.7s var(--ease) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.26s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.37s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.48s; }

@keyframes cut {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ======================== АДАПТИВНОСТЬ ======================== */

@media (max-width: 1000px) {
    .hero-grid { grid-template-columns: 1fr; gap: 38px; }
    .about { grid-template-columns: 1fr; gap: 32px; }
    .book { grid-template-columns: 1fr; }
    .book-side { border-right: none; border-bottom: 1px solid var(--rail); }
    .contacts { grid-template-columns: 1fr; }
    .foot { grid-template-columns: 1fr 1fr; }
}

/* ---------------------- Планшет и телефон ---------------------- */

@media (max-width: 760px) {
    :root { --head-h: 58px; }

    /* Вертикальные отступы ужимаем: на телефоне воздух дороже */
    .band { padding: 56px 0; }
    .hero { padding-top: calc(var(--head-h) + 34px); }
    .hero-grid { padding-bottom: 52px; }

    /* Переносы расставлены для широкого экрана — здесь текст течёт сам */
    .hero-title br { display: none; }
    .hero-sub { margin-bottom: 28px; }

    .kicker { letter-spacing: 0.15em; margin-bottom: 16px; }
    .band-lead { margin-bottom: 32px; }
    .band-title + .about,
    .band-title + .progs,
    .band-title + .crew,
    .band-title + .book,
    .band-title + .contacts { margin-top: 32px; }

    /* --- Меню --- */
    .burger { display: flex; }

    .nav {
        position: fixed;
        inset: var(--head-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 22px 22px;
        background: var(--gate);
        border-bottom: 1px solid var(--rail);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t), transform var(--t), visibility var(--t);
    }
    .nav.open { opacity: 1; visibility: visible; transform: none; }

    .nav-link { padding: 15px 0; font-size: 0.9rem; border-bottom: 1px solid var(--rail); }
    .nav-link:hover { background: none; }
    .cta-sm { margin: 16px 0 0; padding: 16px 18px; font-size: 0.8rem; }

    /* --- Раскладки в одну колонку --- */
    .gates { grid-template-columns: 1fr; }
    .row { grid-template-columns: 1fr; gap: 0; }
    .sf-split { grid-template-columns: 1fr; gap: 14px; }
    .foot { grid-template-columns: 1fr; gap: 26px; }

    .actions { flex-direction: column; align-items: stretch; }
    .cta, .cta-ghost { text-align: center; }

    /* --- Переключатель возраста: подписи в две строки --- */
    .switch { width: 100%; }
    .sw { padding: 12px 8px; font-size: 0.75rem; }
    .sw span { display: block; margin: 4px 0 0; }

    /* Портрет 4:5 на всю ширину слишком высокий — берём квадрат */
    .frame { aspect-ratio: 1 / 1; margin-bottom: 16px; }

    /* --- Пальцевые цели не меньше 44px --- */
    .socials a { width: 46px; height: 46px; }
    .consent input { width: 22px; height: 22px; }
    .consent label { font-size: 0.86rem; }

    .foot-bottom { flex-direction: column; gap: 6px; }

    /* Наведение на телефоне не существует — убираем сдвиги,
       чтобы касание не оставляло элемент в «зависшем» состоянии */
    .prog:hover { transform: none; }
    .gate:hover { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
}

/* ------------------------- Узкий телефон ------------------------- */

@media (max-width: 520px) {
    :root { --notch: 13px; }

    .wrap {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .band { padding: 46px 0; }
    .hero { padding-top: calc(var(--head-h) + 26px); }
    .hero-grid { gap: 30px; padding-bottom: 44px; }

    /* Срезы углов пропорционально мельче, иначе съедают узкую карточку */
    .slate-base { clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%); }
    .prog       { clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%); }
    .member     { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
    .book       { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }

    .slate-fields { padding: 20px 18px 22px; gap: 15px; }
    .slate-fields dd { font-size: 1.02rem; }
    .clap-teeth { height: 24px; }
    .teeth-static { height: 18px; }

    .prog, .member, .contact-box { padding: 20px 16px; }
    .prog { padding-top: 24px; }
    .book-side, .book-form { padding: 22px 18px; }
    .gate { padding: 20px 17px; }

    .tier { padding: 18px 16px; gap: 10px; }
    .tier-price { font-size: 1.55rem; }

    .cta, .cta-ghost { padding: 15px 20px; }
    .map iframe { height: 300px; }
    .cv li { font-size: 0.84rem; }
}

/* ==================== ДОСТУПНОСТЬ И МОТОРИКА ==================== */

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .grain { display: none; }
    .reveal { opacity: 1; transform: none; }
    .reveal.t-wipe { clip-path: none; }
    .kicker::before { width: 22px; }
    .hero-copy > * { opacity: 1; animation: none; }
    .slate-clap, .slate.go .slate-clap { animation: none; transform: none; }
    .perf { background-position: 0 0; }
}