/* Глаз Бури v5: главные блоки новой главной. Первый экран (storm.css), лупа (lens.css), финал (enso.css) живут отдельно. */

/* ── главы «Сайты» и «Помощники»: слово-заголовок металлом ── */
.chapter-head{margin-bottom:clamp(48px,6vw,88px)}
.chapter-word{margin:0;font-weight:400;font-size:clamp(52px,14.5vw,150px);line-height:.92;letter-spacing:-.01em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.chapter-head .col{margin:28px 0 0;max-width:62ch}
@media (min-width:961px){.chapter-head .col{margin-left:auto;margin-top:-8px}}

/* лестница OK'SPA теперь живёт в главе, а не в первом экране */
.chapter .stair{grid-column:auto;width:100%;min-height:clamp(420px,42vw,600px)}
@media (min-width:961px){.chapter .stair{margin-left:auto;max-width:1100px}}

/* ── двери первого экрана: базовая вёрстка, движение в storm.css ── */
.doors{display:flex;gap:20px}
.door{position:relative;display:flex;flex-direction:column;gap:10px;width:300px;padding:24px 24px 56px;color:var(--text);text-decoration:none;
  border:1px solid rgba(214,179,106,.35);background:rgba(14,20,32,.42);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.door-n{font-size:13px;letter-spacing:.14em;color:var(--gold)}
.door-t{font-size:26px;line-height:1.15}
.door-g{font-size:16px;line-height:1.45;color:var(--text2)}
.door-go{position:absolute;left:24px;bottom:22px;width:28px;height:1px;background:var(--gold);transition:width .4s cubic-bezier(.17,.84,.44,1)}
.door-go::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg)}
.door:hover .door-go,.door:focus-visible .door-go{width:64px}
.door:hover{border-color:rgba(214,179,106,.7)}
.door:focus-visible{outline:2px solid var(--cta);outline-offset:4px}

/* ── самопроверка ── */
.check{max-width:860px}
.check-q{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.check-q p{margin:0;max-width:60ch}
.check-yn{display:flex;gap:8px}
.check-yn button{min-width:72px;min-height:44px;padding:0 16px;font:inherit;font-size:16px;color:var(--text);background:transparent;border:1px solid rgba(214,179,106,.55);cursor:pointer}
.check-yn button:hover{border-color:var(--gold)}
.check-yn button[aria-pressed="true"]{background:var(--gold);color:var(--cta-text);border-color:var(--gold)}
.check-yn button:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
.check-progress{margin:20px 0 0}
.check-result{margin-top:32px;padding:32px;border:1px solid rgba(214,179,106,.45);background:var(--surface)}
.check-result .h3{margin:8px 0 12px;font-size:28px;font-weight:400}
.check-result p{max-width:60ch}
.check-result:focus{outline:none}
.check-result:focus-visible{outline:2px solid var(--cta);outline-offset:4px}
@media (max-width:640px){.check-q{grid-template-columns:1fr;gap:12px}}

/* ── хакатон ── */
.hack{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.hack-video{grid-column:1/8;margin:0;padding:0}
.hack-side{grid-column:9/13}
.hack-place{margin:0 0 20px;display:flex;flex-direction:column;gap:4px}
.hack-place b{font-weight:400;font-size:clamp(48px,5vw,72px);line-height:1;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.hack-place span{color:var(--text2)}
.hack-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.hack-photos .frame{margin:0;padding:0}
.hack-photos .shot{aspect-ratio:4/3}
.video-box{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.video-box img,.video-box video{width:100%;height:100%;object-fit:cover;display:block}
.video-play{position:absolute;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px 0 14px;font:inherit;font-size:16px;
  color:var(--cta-text);background:var(--cta);border:0;cursor:pointer}
.video-play i{width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.video-play:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.hack-video figcaption{margin-top:14px}
@media (max-width:960px){.hack-video,.hack-side{grid-column:1/-1}}

/* чат под таблицей часов */
.chat-shot{margin:40px 0 0;padding:0;max-width:320px}
.chat-shot .shot{aspect-ratio:375/625}

/* ── скриншоты отзывов ── */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:start}
.shots .frame{margin:0;padding:12px;background:#E9E7E2}
.shots img{display:block;width:100%;height:auto}
.shots .frame figcaption{margin-top:10px;color:#3A4150}
.shots .shot-lead{grid-column:1/-1;max-width:720px}
@media (max-width:760px){.shots{grid-template-columns:1fr}}

/* ── честно ── */
.honest .h2{max-width:18ch}
.honest .col{margin-top:24px}

/* ── с кем не работаю: строки по одной, капля как в знаке ── */
.not-you .h2{max-width:20ch}
.not-list{list-style:none;margin:36px 0 0;padding:0;max-width:820px}
.not-list li{position:relative;padding:20px 0 20px 32px;border-top:1px solid rgba(214,179,106,.18);color:var(--text2);font-size:18px;line-height:1.6}
.not-list li:last-child{border-bottom:1px solid rgba(214,179,106,.18)}
.not-list li::before{content:"";position:absolute;left:4px;top:31px;width:8px;height:8px;border-radius:50%;background:var(--drop2)}
.not-list b{display:block;color:var(--text);font-weight:500;font-size:20px;margin-bottom:4px}

/* ── 18.10: правки по её просмотру ── */
/* подпись под роликом хакатона и под фото не липнет к рамке */
.hack .frame figcaption{padding:0 16px 14px}
/* под ссылкой в конце блока работ есть воздух, и следующий блок не наезжает на неё раньше времени */
.sec-air{padding-bottom:calc(var(--sec) + 96px)}
.sec-air .cta-row{margin-top:72px!important}
/* «Кто я»: фото с небом почти квадратное, лицо целиком */
.reel-frames.one .shot{aspect-ratio:4/5}
/* цены: две двери */
.prices-door .pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.pd{display:flex;flex-direction:column;gap:10px;padding:32px 28px;border:1px solid var(--line);background:var(--bg);color:var(--text);text-decoration:none;transition:border-color .25s var(--ease)}
.pd:hover,.pd:focus-visible{border-color:var(--gold)}
.pd-t{font-family:var(--display);font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.pd-s{color:var(--text2);font-size:18px;line-height:1.5}
.pd-go{margin-top:auto;padding-top:16px;align-self:flex-start;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
@media (max-width:760px){.prices-door .pd-grid{grid-template-columns:1fr}}
/* каркас OK'SPA: набросок с подписями, как на листе у дизайнера */
.wire.sketch{padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.wire.sketch .sk{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(214,179,106,.5);
  font-family:Caveat,cursive;font-size:19px;line-height:1.1;color:#CBD0DA;padding:6px}
.wire.sketch .sk-h{flex:2.2}
.wire.sketch .sk-b{flex:.7;align-self:flex-start;padding:6px 12px;border-style:solid;border-color:rgba(214,179,106,.75)}
.wire.sketch .sk-p{flex:1}
.wire.sketch .sk-r{flex:1}
/* фото с небом: тень по краям лёгкая, небо и улыбку видно */
.reel-frames.one .shot::after{background:radial-gradient(ellipse 85% 80% at 50% 42%,transparent 60%,rgba(9,13,22,.4) 100%)}
.reel-frames.one img{filter:saturate(.85)}

/* 19.10: «Автоматизация» длиннее «Помощники», иначе на телефоне слово уходит за край */
#ch-pom{font-size:clamp(34px,9.4vw,128px)}
/* 19.10: у соседних карточек цен заголовок в две строки, чтобы цена стояла на одной линии */
@media (min-width:761px){.pd-t{min-height:2.3em}}