/* IT VIBE · v12 — editorial gallery scale, sharp/angular, IT Vibe brand */

/* ════════ TOKENS ════════ */
:root {
  --bg: #E9E9E7;
  --wh: #FFFFFF;
  --blk: #111111;
  --dim: rgba(17,17,17,.4);
  --dim2: rgba(17,17,17,.15);
  --grn: #3DFF5A;
  --sans: 'Roboto', sans-serif;
  --mono: 'Roboto Mono', monospace;
  --logo: 'Bebas Neue', sans-serif;
  --eo: cubic-bezier(.23,1,.32,1);
  --edge: 64px;
}

/* ════════ BASE ════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); background: var(--bg); color: var(--blk); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blk); }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ════════ CURSOR ════════ */
a, button { cursor: pointer; }
/* квадратный курсор — только в блоке «4 опоры», инвертируется по фону */
.sq-cur { pointer-events: none;
  position: fixed; top: 0; left: 0; width: 18px; height: 18px; z-index: 90;
  background: #fff; mix-blend-mode: difference; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%);
  transition: opacity .18s var(--eo), width .18s var(--eo), height .18s var(--eo);
}
.sq-cur.on { opacity: 1; }
.sq-cur.big { width: 30px; height: 30px; }
.s-quad, .s-quad *, .s-hero, .s-hero * { cursor: none; }
@media (max-width: 768px) { body { cursor: auto; } a, button { cursor: pointer; } .sq-cur { pointer-events: none; display: none; } .s-quad, .s-quad *, .s-hero, .s-hero * { cursor: auto; } }

/* ════════ FLOATING NAV + CTA ════════ */
.fnav {
  position: fixed; left: var(--edge); top: 32px; z-index: 60;
  display: flex; gap: 8px; background: #fff; padding: 7px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.fnav.show { opacity: 1; pointer-events: auto; }
.fnav-top { white-space: nowrap; }
.fnav a {
  font-size: 14px; color: var(--blk); padding: 9px 15px;
  transition: background .2s ease, color .2s ease; outline: none;
}
.fnav a:hover { background: var(--blk); color: #fff; }
.fcta {
  position: fixed; right: var(--edge); top: 32px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--blk); padding: 15px 24px;
  font-size: 14px; font-weight: 700;
  transition: background .2s ease, color .2s ease, gap .2s ease, opacity .3s ease;
  opacity: 0; pointer-events: none;
}
.fcta.show { opacity: 1; pointer-events: auto; }
.fcta span { transition: transform .2s ease; }
.fcta:hover { background: var(--blk); color: #fff; }
.fcta:hover span { transform: translateX(4px); }

/* FAB, доп. пункт меню и нативный select — только для планшета/мобильной (см. DEVICE MERGE ниже) */
.fab { display: none; }
.fnav-cta { display: none; }
.c-select { display: none; }

/* короткое проявление блока после мгновенного перехода по якорю */
.jump-in { animation: jumpIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes jumpIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ════════ REVEAL ════════ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--eo), transform .8s var(--eo); }
.rv.in { opacity: 1; transform: translateY(0); }
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; }
.rv-d4 { transition-delay: .42s; }

/* ════════ HERO — centered composition ════════ */
.ov-wrap { position: relative; }
.s-hero { position: sticky; top: 0; overflow: hidden; z-index: 1; background: var(--bg); }
.hero-stage {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 130px var(--edge) 64px;
  /* серый занимает ~68% вьюпорта, остальное — белая полоса блока 2 (как на рефе) */
  min-height: 68svh; box-sizing: border-box;
  background: var(--bg); will-change: background;
}

.hero-mark {
  width: min(52vw, 480px); height: auto; color: var(--blk); margin-bottom: 14px;
  opacity: 0; transform: translateY(16px); overflow: visible;
  transition: opacity 1s var(--eo) .05s, transform 1s var(--eo) .05s;
}
.hero-mark.in { opacity: 1; transform: translateY(0); }
.hero-mark path, .hero-mark rect, .foot-logo path, .foot-logo rect { fill: currentColor; }
#heroSq { transform-box: fill-box; transform-origin: center; }
.hsq-core { transform-box: fill-box; transform-origin: center; }
/* волна проходит по логотипу слева направо: буквы гаснут и возвращаются, квадрат отзывается в момент прохода */
.glet { transform-box: fill-box; transform-origin: center; opacity: 1; }
.wave-on .glet { animation: heroWave 4.2s linear infinite; }
.glet:nth-child(1) { animation-delay: 0s; }
.glet:nth-child(2) { animation-delay: .17s; }
.glet:nth-child(3) { animation-delay: .54s; }
.glet:nth-child(4) { animation-delay: .71s; }
.glet:nth-child(5) { animation-delay: .88s; }
.glet:nth-child(6) { animation-delay: 1.05s; }
@keyframes heroWave {
  0%, 3% { opacity: 1; }
  10% { opacity: .38; }
  19% { opacity: 1; }
  100% { opacity: 1; }
}
.wave-on .hsq-core { animation: heroSqWave 4.2s linear infinite; animation-delay: .36s; }
@keyframes heroSqWave {
  0%, 3% { opacity: 1; }
  10% { opacity: .38; }
  19% { opacity: 1; }
  100% { opacity: 1; }
}
#heroLetters { will-change: opacity; }
#heroSq { transform-box: fill-box; transform-origin: center; }

.hero-claim {
  margin: 4px 0 44px; text-align: center;
  font-size: clamp(17px, 1.7vw, 22px); font-weight: 400; letter-spacing: -.02em; color: var(--dim);
}
.hero-claim .hcw { display: inline-block; opacity: 0; transform: translateY(12px); animation: heroWord .7s var(--eo) forwards; }
@keyframes heroWord { to { opacity: 1; transform: translateY(0); } }
/* та же волна идёт по слогану одновременно с логотипом — фронт общий */
.hero-claim.beat .hcw { opacity: 1; transform: none; }
.hero-stage:not(.wave-on) .glet, .hero-stage:not(.wave-on) .hsq-core { opacity: 1 !important; }
.wave-on .hero-claim.beat .hcw { animation: heroClaimWave 4.2s linear infinite; }
.hero-claim.beat .hcw:nth-child(1) { animation-delay: .07s; }
.hero-claim.beat .hcw:nth-child(2) { animation-delay: .34s; }
.hero-claim.beat .hcw:nth-child(3) { animation-delay: .65s; }
.hero-claim.beat .hcw:nth-child(4) { animation-delay: .96s; }

@keyframes heroClaimWave {
  0%, 3% { opacity: 1; }
  10% { opacity: .45; }
  19% { opacity: 1; }
  100% { opacity: 1; }
}
.hero-claim .hcw--accent { color: var(--dim); }

/* шторка: следующий блок наезжает на закреплённый первый экран */
.cur-wrap { position: relative; z-index: 2; }

.hero-dialog {
  width: 100%; max-width: 1200px; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 20px; padding-bottom: 20px;
}
.hero-card {
  position: relative; overflow: hidden;
  background: #fff; padding: 24px;
  display: flex; flex-direction: column; min-height: 0;
  transition: transform .45s var(--eo), background .35s var(--eo), color .35s var(--eo);
}
/* заливка карточки чёрным снизу вверх при наведении */
.hero-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--blk);
  transform: translateY(101%); transition: transform .45s var(--eo);
}
.hero-card:nth-child(2)::after { background-image: linear-gradient(rgba(17,17,17,.79), rgba(17,17,17,.79)), url('../assets/card-2.png?v=6'); }
.hero-card:nth-child(3)::after { background-image: linear-gradient(rgba(17,17,17,.79), rgba(17,17,17,.79)), url('../assets/card-3.png?v=6'); }
.hero-card:nth-child(4)::after { background-image: linear-gradient(rgba(17,17,17,.79), rgba(17,17,17,.79)), url('../assets/card-4.png?v=6'); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card:hover { transform: translateY(-6px); color: var(--wh); }
.hero-card:hover::after { transform: translateY(0); }

.hero-card:hover .hc-lbl { color: rgba(255,255,255,.5); }
.hero-card:hover .hc-text { color: var(--wh); }
.hc-lbl, .hc-text { transition: color .35s var(--eo); }

.hero-dialog.in .hero-card { opacity: 1; transform: translateY(0); }
.hero-dialog.in .hero-card:nth-child(1){ transition-delay: .05s; }
.hero-dialog.in .hero-card:nth-child(2){ transition-delay: .13s; }
.hero-dialog.in .hero-card:nth-child(3){ transition-delay: .21s; }
.hero-dialog.in .hero-card:nth-child(4){ transition-delay: .29s; }
.hc-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.hc-sq { width: 8px; height: 8px; flex: 0 0 auto; }
.hc-h { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); line-height: 1.4; margin-bottom: 22px; }
.hc-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.hc-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; color: var(--blk); letter-spacing: -.01em; }
.hc-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--blk); }
.hc-text { font-size: 15px; line-height: 1.4; color: var(--blk); letter-spacing: -.01em; margin-bottom: 24px; }
.hc-btn { margin-top: auto; }
.hc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: none; color: var(--blk); border: 1px solid var(--blk); padding: 14px 24px;
  font-size: 14px; font-weight: 700; align-self: flex-start; margin-top: auto;
  transition: background .2s ease, color .2s ease, gap .2s ease;
}
.hc-btn span { transition: transform .2s ease; }
.hc-btn:hover { background: var(--blk); color: #fff; gap: 14px; }
.hc-btn:hover span { transform: translateX(3px); }

/* ════════ FULL-BLEED DARK BLOCK ════════ */
/* блок закреплён на время сборки текста — анимация успевает проиграться целиком */
/* блок держится на экране ~1.5 с прокрутки, пока текст собирается из хаоса.
   фон обёртки повторяет соседей (серый сверху, белый снизу), стык прячется за плашкой */
.slab-wrap { position: relative; height: 215vh; background: linear-gradient(to bottom, var(--bg) 0 50%, var(--wh) 50% 100%); }
.s-slab {
  position: sticky; top: 0; height: 100svh; box-sizing: border-box;
  background: linear-gradient(to bottom, var(--bg) 0 50%, var(--wh) 50% 100%); color: var(--wh);
  padding: 0 var(--edge);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.slab-inner { position: relative; flex: 0 0 auto; box-sizing: border-box; width: 100vw; max-height: 100svh; margin: 0 calc(-1 * var(--edge)); padding: clamp(64px, 13vh, 130px) var(--edge); background: var(--blk); display: flex; align-items: center; justify-content: center; }
.slab-text {
  position: relative; z-index: 1;
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 300;
  letter-spacing: -.02em; line-height: 1.22; max-width: 1200px; text-wrap: balance;
  color: #fff;
}
.slab-text .sg { font-style: normal; color: var(--grn); }
.slab-text .slw { display: inline-block; opacity: .22; will-change: opacity, contents; text-align: left; }
.slab-text .accent { color: var(--grn); font-style: italic; }

/* ════════ SECTION SHELL ════════ */
.sec { padding: 120px var(--edge); }
.sec-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim2); margin-bottom: 20px; max-width: 1200px; margin-left: auto; margin-right: auto;
}
.sec-h2 {
  font-weight: 300; font-size: clamp(40px, 6vw, 84px);
  letter-spacing: -.03em; line-height: .95; margin-bottom: 64px;
}
.sec-h2 em { font-style: italic; color: var(--dim); }

/* ════════ НАПРАВЛЕНИЯ — constellation ════════ */
.svc-wrap { position: relative; z-index: 2; }
.s-const { position: sticky; top: 0; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0; background: #fff; }
.s-const .sec-eyebrow, .s-const .const { transition: opacity .5s var(--eo); }
.s-const.svc-hold .sec-eyebrow { opacity: 0 !important; }
.fly-sq { position: fixed; left: 0; top: 0; width: 26px; height: 26px; z-index: 7; pointer-events: none; opacity: 0; transform-origin: 13px 13px; mix-blend-mode: multiply; }
.pop-sq { display: none; }
.const { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; height: 860px; }
.cpt {
  position: absolute; transform: translate(-50%,-50%); width: 320px;
  display: flex; flex-direction: column; gap: 0;
}
.cpt-txt { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--eo), transform .6s var(--eo); }
.const.in .cpt-txt { opacity: 1; transform: translateY(0); }
.const.in .cpt:nth-child(1) .cpt-txt{transition-delay:.05s}.const.in .cpt:nth-child(2) .cpt-txt{transition-delay:.12s}.const.in .cpt:nth-child(3) .cpt-txt{transition-delay:.19s}.const.in .cpt:nth-child(4) .cpt-txt{transition-delay:.26s}.const.in .cpt:nth-child(5) .cpt-txt{transition-delay:.33s}.const.in .cpt:nth-child(6) .cpt-txt{transition-delay:.4s}.const.in .cpt:nth-child(5){transition-delay:.33s}.const.in .cpt:nth-child(6){transition-delay:.40s}.const.in .cpt:nth-child(7){transition-delay:.47s}
.cpt--below { flex-direction: column-reverse; }   /* text ABOVE square */
.cpt--above { flex-direction: column; }            /* text BELOW square */
.cpt-c { align-items: center; text-align: center; }
.cpt-r { align-items: flex-end; text-align: right; }
.cpt-l { align-items: flex-start; text-align: left; }
.cpt > .cpt-c { align-self: center; } .cpt > .cpt-r { align-self: flex-end; } .cpt > .cpt-l { align-self: flex-start; }
.cpt { align-items: center; }
/* у боковых пар квадрат прижимается к внутреннему краю — ближе к центру композиции и к своему тексту */
.cpt-anchor-r .cpt-sq { align-self: flex-end; }
.cpt-anchor-l .cpt-sq { align-self: flex-start; }
.cpt-sq { width: 26px; height: 26px; margin: 20px 0; flex: 0 0 auto; align-self: center; opacity: 1; animation: cptFloatA 6.2s ease-in-out infinite; }
.cpt:nth-child(2) .cpt-sq { animation: cptFloatB 5.4s ease-in-out infinite .6s; }
.cpt:nth-child(3) .cpt-sq { animation: cptFloatC 7s ease-in-out infinite 1.3s; }
.cpt:nth-child(4) .cpt-sq { animation: cptFloatA 5.8s ease-in-out infinite .4s; }
.cpt:nth-child(5) .cpt-sq { animation: cptFloatB 6.6s ease-in-out infinite 1s; }
.cpt:nth-child(6) .cpt-sq { animation: cptFloatC 5s ease-in-out infinite .2s; }
@keyframes cptFloatA { 0%,100%{transform:translate(0,-3px)} 50%{transform:translate(2px,3px)} }
@keyframes cptFloatB { 0%,100%{transform:translate(-2px,2px)} 50%{transform:translate(2px,-3px)} }
@keyframes cptFloatC { 0%,100%{transform:translate(3px,1px)} 50%{transform:translate(-3px,-2px)} }
.cpt-sq.sq-wait { opacity: 0 !important; }
.const.in .cpt-sq { opacity: 1; }
.const.sq-live { opacity: 1 !important; transform: none !important; transition: none !important; }
.cpt-txt h3 { font-size: clamp(19px, 1.9vw, 27px); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; margin-bottom: 10px; color: var(--blk); }
.cpt-txt p { font-size: 14px; line-height: 1.5; color: var(--dim); max-width: 300px; }
.cpt-r .cpt-txt p, .cpt-r.cpt-txt p { margin-left: auto; }

/* ════════ МЕТОД — 4 стороны ════════ */
.s-quad { background: var(--blk); color: #fff; padding: 0; position: relative; isolation: isolate; }
.s-quad::before { content: ""; position: absolute; inset: 0; background: url("../assets/quad-bg.png") center/cover no-repeat; opacity: .3; pointer-events: none; z-index: -1; }
.quad-shell { max-width: 1200px; margin: 0 auto; padding: 104px var(--edge) 120px; display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 72px; row-gap: 40px; align-items: center; container-type: inline-size; }
.quad-intro { grid-column: 1; grid-row: 1; padding: 0; }
.quad-intro .sec-eyebrow { margin-bottom: 20px; max-width: none; margin-left: 0; margin-right: 0; }
.quad-h2 { font-size: min(5.4cqw, 68px); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; color: #fff; max-width: 14ch; overflow: hidden; }
.quad-h2 .ql { display: inline-block; opacity: 0; will-change: transform, opacity; }
.quad-h2 em { font-style: italic; color: rgba(255,255,255,.4); }
.quad-h2 .qh-mute { color: rgba(255,255,255,.38); }
.qi-note { max-width: 400px; margin: 26px 0 0; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; color: rgba(255,255,255,.45); }
.quad-intro .rv { opacity: 0; transition: opacity .7s var(--eo); }
.quad-intro .rv.in { opacity: 1; transform: none; }

.quad-grid { position: relative; grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 460px; width: 100%; margin: 0 0 0 auto; }
.qt {
  aspect-ratio: 1 / 1; padding: 24px; position: relative;
  display: flex; flex-direction: column; justify-content: center;
  background: #3D3D3D; color: rgba(255,255,255,.78); cursor: none;
  transition: transform 1s var(--eo), background 1s var(--eo), color .3s var(--eo);
}
/* единый таймер в JS периодически добавляет/убирает .merged — одна точка синхронизации, без независимых CSS-анимаций, которые могли рассинхронизироваться между собой */
.quad-grid.merged .qt:nth-child(1) { transform: translate(calc(100%*2/15 + 12px), calc(50% + 12px)) scale(1.1); background: rgba(255,255,255,.3); }
.quad-grid.merged .qt:nth-child(2) { transform: translate(calc(-50% - 12px), calc(100%*2/15 + 12px)) scale(1.1); background: rgba(255,255,255,.3); }
.quad-grid.merged .qt:nth-child(3) { transform: translate(calc(50% + 12px), calc(-100%*2/15 - 12px)) scale(1.1); background: rgba(255,255,255,.3); }
.quad-grid.merged .qt:nth-child(4) { transform: translate(calc(-100%*2/15 - 12px), calc(-50% - 12px)) scale(1.1); background: rgba(255,255,255,.3); }
.qt-head { display: flex; align-items: baseline; gap: 14px; transition: transform 1s var(--eo), justify-content 1s var(--eo); }
.quad-grid.merged .qt:nth-child(1) .qt-head { transform: translate(-76.7%, 133%) rotate(-90deg); justify-content: center; }
.quad-grid.merged .qt:nth-child(2) .qt-head { transform: translate(0, -361.3%); justify-content: center; }
.quad-grid.merged .qt:nth-child(3) .qt-head { transform: translate(0, 655%); justify-content: center; }
.quad-grid.merged .qt:nth-child(4) .qt-head { transform: translate(76%, 168%) rotate(90deg); justify-content: center; }
.qt-n { font-family: var(--mono); font-size: 12px; opacity: .6; }
.qt-t { font-size: clamp(19px, 2.3vw, 28px); font-weight: 400; letter-spacing: -.01em; color: #fff; }
.qt-d { font-size: clamp(13px, 1.4vw, 16px); line-height: 1.4; max-width: 260px; margin-top: 14px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--eo), transform .35s var(--eo); }
.qt:nth-child(1) { grid-area: 1 / 1; }
.qt:nth-child(2) { grid-area: 1 / 2; }
.qt:nth-child(3) { grid-area: 2 / 1; }
.qt:nth-child(4) { grid-area: 2 / 2; }
.qt-head, .qt-d { position: relative; z-index: 2; }
.qt:hover { background: #fff; color: #111; }
.qt:hover .qt-d { opacity: 1; transform: none; }
.quad-grid.in .qt:nth-child(1):hover { transform: translate(5px, 5px); }
.quad-grid.in .qt:nth-child(2):hover { transform: translate(-5px, 5px); }
.quad-grid.in .qt:nth-child(3):hover { transform: translate(5px, -5px); }
.quad-grid.in .qt:nth-child(4):hover { transform: translate(-5px, -5px); }
.quad-center {
  grid-area: 1 / 1 / 3 / 3; align-self: center; justify-self: center;
  width: 24px; aspect-ratio: 1 / 1; background: #fff; z-index: 3;
  transition: width 1s var(--eo);
}
/* в собранном знаке белый квадрат равен зоне пересечения всех четырёх — считается от ширины сетки, а не фиксировано */
.quad-grid.merged .quad-center { width: calc((100% - 24px) * 11 / 60); }
.quad-lead--out { grid-column: 1; grid-row: 2; text-align: left; margin: 0; max-width: 420px; padding: 0; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; color: rgba(255,255,255,.82); }
.quad-lead--out.rv-d1 { transition-delay: .2s; }

/* ════════ ПОРТФОЛИО ════════ */
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 32px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.pf-head .sec-h2 { margin-bottom: 0; font-size: clamp(34px, 4.6vw, 62px); }
.pf-head .sec-eyebrow { margin-left: 0; margin-right: 0; }
.sec-h2 .sh-mute { color: var(--dim); }
.sec-h2--split { overflow: hidden; }
.sec-h2--split .ql, .quad-h2 .ql { display: inline-block; opacity: 0; will-change: transform, opacity; }
.qwrap { display: inline-block; white-space: nowrap; }
.pf-head .sec-h2 { flex: 1 1 58%; }
.pf-filter {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px;
  border: none; background: none; color: var(--dim); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 0 0 6px; border-bottom: 1px solid var(--dim2);
  transition: color .2s var(--eo), border-color .2s var(--eo);
}
.pf-filter span { font-family: var(--mono); font-size: 12px; line-height: 1; }
.pf-filter:hover { color: var(--blk); border-color: var(--blk); }
.pf-filter.on { color: var(--blk); border-color: var(--blk); }
.pf-chips {
  flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--eo), opacity .3s var(--eo);
}
.pf-chips.open { max-height: 140px; opacity: 1; }
/* чипы проявляются по очереди вместе с шапкой */
.pf-chip.rv { transform: translateY(10px); }
.pf-chip.rv.in { transform: none; }
.pf-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 14px; background: none; color: var(--dim);
  border: 1px solid rgba(17,17,17,.14); transition: color .2s var(--eo), border-color .2s var(--eo), background .2s var(--eo);
}
.pf-chip:hover { color: var(--blk); border-color: var(--blk); }
.pf-chip.on { background: var(--blk); border-color: var(--blk); color: var(--wh); }
.pf-chip:active { background: var(--blk); border-color: var(--blk); color: var(--wh); }
.pf-chip-n { font-size: 10px; opacity: .55; }
.pf-grid { max-width: 1200px; margin: 0 auto; }
/* фон заливается серым по скроллу — белый → --bg */
#work { position: relative; background: var(--wh); transition: background .9s var(--eo); }
#work.tinted { background: var(--bg); }
.pf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; counter-reset: pf; }
/* ритм по строкам: 3 / 2 / 3 */
.pf-card:nth-child(n) { grid-column: span 4; }
.pf-card:nth-child(4) { grid-column: span 7; }
.pf-card:nth-child(5) { grid-column: span 5; }
/* при активном фильтре — ровные колонки, чтобы не было дыр от nth-child-спанов */
.pf-grid.filtered .pf-card:nth-child(n) { grid-column: span 4; }
.pf-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 230px; padding: 26px 26px 22px; background: var(--wh); border: 1px solid rgba(17,17,17,.1);
  transition: background .25s var(--eo), transform .3s var(--eo), color .25s var(--eo), border-color .9s var(--eo);
}
.pf-card::before {
  counter-increment: pf; content: counter(pf, decimal-leading-zero);
  position: absolute; top: 24px; right: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim2);
  transition: color .25s var(--eo);
}
.pf-card:hover::before { color: rgba(255,255,255,.5); }
.pf-label { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--dim); line-height: 1.4; margin-bottom: 18px; max-width: 80%; }
#work.tinted .pf-card { border-color: transparent; }
.pf-card:hover { background: var(--blk); color: var(--wh); border-color: var(--blk); transform: translateY(-4px); }
.pf-card:hover .pf-label { color: rgba(255,255,255,.6); }
.pf-card:hover .pf-tag { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); background: transparent; }
.pf-card:hover .pf-tag--a, .pf-card:hover .pf-tag--b, .pf-card:hover .pf-tag--c, .pf-card:hover .pf-tag--d, .pf-card:hover .pf-tag--e { border-color: transparent; }
.pf-card:hover .pf-tag--a { background: #E6E6DF; color: var(--blk); }
.pf-card:hover .pf-tag--b { background: var(--grn); color: var(--blk); }
.pf-card:hover .pf-tag--c { background: #E4DAD6; color: #6b3b2e; }
.pf-card:hover .pf-tag--d { background: #E9E1EE; color: #5a3d6b; }
.pf-card:hover .pf-tag--e { background: #DEE6E4; color: #2e5a4f; }
.pf-card:active { background: #2A2A2A; }
.pf-title { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -.015em; line-height: 1.22; max-width: 24ch; }
/* у широких карточек — крупнее, чтобы была иерархия */
.pf-card:nth-child(4) .pf-title { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; max-width: 26ch; }
.pf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; }
.pf-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  padding: 5px 9px; color: var(--dim); border: 1px solid var(--dim2);
}
.pf-tag--a { background: #E6E6DF; color: var(--blk); border-color: transparent; }
.pf-tag--b { background: var(--grn); color: var(--blk); border-color: transparent; }
.pf-tag--c { background: #E4DAD6; color: #6b3b2e; border-color: transparent; }
.pf-tag--d { background: #E9E1EE; color: #5a3d6b; border-color: transparent; }
.pf-tag--e { background: #DEE6E4; color: #2e5a4f; border-color: transparent; }
.pf-card.hide { display: none; }

/* ════════ CLIENTS — numbered editorial grid ════════ */
.cli-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; gap: 56px 60px; max-width: 1400px; margin: 0 auto; padding: 64px 0 80px; }
.cli {
  position: relative; width: 100%; height: 140px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s var(--eo);
}
.cli:nth-child(n) { transform: none; }
.cli:nth-child(1) .cli-logo { max-height: 116px; }
.cli:nth-child(2) .cli-logo { max-height: 105px; }
.cli:nth-child(3) .cli-logo { max-height: 100px; }
.cli:nth-child(4) .cli-logo { max-height: 70px; }
.cli:nth-child(5) .cli-logo { max-height: 86px; }
.cli:nth-child(6) .cli-logo { max-height: 76px; }
.cli-logo { width: auto; max-width: 100%; object-fit: contain; opacity: 1; }

/* ════════ CONTACT — половина чёрная, половина светлая ════════ */
/* якорь контактов: блок встаёт по центру экрана, а не под самый верх */
#contact { scroll-margin-top: -60px; }
#work { scroll-margin-top: -280px; }
.sec-h2--sm { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; }
.ct-h2 { text-align: left; max-width: none; margin-bottom: 8px; }
.ct { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 44px 0 0; align-items: stretch; }
/* маленький квадрат на стыке — инвертируется по половинам */
.ct::before, .ct::after {
  content: ''; position: absolute; top: 50%; width: 16px; height: 32px;
  margin-top: -16px; z-index: 2; pointer-events: none;
}
.ct::before { right: 50%; background: var(--wh); }
.ct::after { left: 50%; background: var(--blk); }
.ct-side--dark {
  position: relative; overflow: hidden;
  background: var(--blk); color: var(--wh);
  padding: 72px 72px 72px var(--edge); display: flex; flex-direction: column; justify-content: center;
  margin-left: calc(-1 * var(--edge)); aspect-ratio: 1 / 1; min-height: 560px;
}
/* водяной знак — наш квадрат, обрезан краем */
.ct-mark { position: absolute; right: -80px; bottom: -100px; width: 300px; height: 300px; background: rgba(255,255,255,.045); pointer-events: none; }
.ct-mark::after { content: ''; position: absolute; inset: 33.33%; background: var(--blk); }
.ct-ch {
  position: relative; display: block; padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.14); color: var(--wh);
}

.ct-side--dark .ct-ch { padding: 0; border-top: none; border-bottom: none; max-width: 520px; }
/* крупная реплика-«сообщение» над карточкой */
.ct-quote { position: relative; margin-bottom: 56px; max-width: 15ch; font-size: clamp(28px, 3vw, 42px); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; }
.ct-quote .ct-q-mute { color: rgba(255,255,255,.35); }
.ct-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding: 15px 26px; border: 1px solid rgba(255,255,255,.28); font-size: 15px; font-weight: 500; transition: background .25s var(--eo), color .25s var(--eo), border-color .25s var(--eo), gap .25s var(--eo); }
.ct-ch:hover .ct-cta { background: var(--wh); color: var(--blk); border-color: var(--wh); gap: 20px; }
.ct-ch:hover { color: var(--wh); }
.ct-ch-lbl { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.ct-dot { width: 7px; height: 7px; background: var(--grn); animation: ctPulse 2.4s var(--eo) infinite; }
@keyframes ctPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.ct-ch-name { display: flex; align-items: baseline; gap: 14px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 400; letter-spacing: -.035em; }


.ct-ch-desc { display: block; margin-top: 16px; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.5); max-width: 36ch; }
.ct-ch-val { display: block; margin-top: 24px; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.3); }
.ct-cta {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 30px;
  padding: 16px 28px; background: var(--wh); color: var(--blk);
  font-size: 15px; font-weight: 500;
  transition: gap .25s var(--eo), background .25s var(--eo);
}
.ct-cta b { font-weight: 400; font-size: 16px; }
.ct-cta:hover { gap: 22px; background: var(--grn); color: var(--blk); }

.ct-form { display: block; padding: 72px var(--edge) 72px 64px; align-self: center; width: 100%; background: var(--wh); margin-right: calc(-1 * var(--edge)); }
.cf-lbl { font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.cf-lbl--gap { margin-top: 40px; }
.cf-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c-field { border: 1px solid rgba(17,17,17,.12); padding: 16px 16px; transition: border-color .25s; }
.c-field:focus-within { border-color: var(--blk); }
/* заполненное поле инвертируется в чёрное */
.c-field.filled { background: var(--blk); border-color: var(--blk); }
.c-field.filled input, .c-field.filled textarea { color: var(--wh); }
.c-field.filled input::placeholder, .c-field.filled textarea::placeholder { color: rgba(255,255,255,.35); }
.c-field input, .c-field textarea { width: 100%; background: none; border: none; outline: none; font-family: var(--sans); font-size: 15px; color: var(--blk); resize: none; }
.c-field input::placeholder, .c-field textarea::placeholder { color: rgba(17,17,17,.35); }
.c-field--area { margin-top: 14px; }
.c-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.c-opt {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; border: 1px solid rgba(17,17,17,.12); color: var(--dim);
  font-size: 13px; padding: 12px 15px; text-align: left;
  transition: color .2s var(--eo), border-color .2s var(--eo);
}
.c-opt i { width: 8px; height: 8px; background: var(--c); opacity: .3; flex: 0 0 auto; transition: opacity .2s var(--eo), transform .2s var(--eo); }
.c-opt:hover { color: var(--blk); border-color: var(--blk); }
.c-opt:hover i { opacity: .65; }
.c-opt.on { color: var(--blk); border-color: var(--blk); }
.c-opt.on i { opacity: 1; transform: scale(1.3); }
.cf-agree { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; color: var(--dim); cursor: pointer; }
.cf-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-box { width: 18px; height: 18px; border: 1px solid rgba(17,17,17,.3); flex: 0 0 auto; position: relative; transition: background .2s var(--eo), border-color .2s var(--eo); }
.cf-agree input:checked + .cf-box { background: var(--blk); border-color: var(--blk); }
.cf-agree input:checked + .cf-box::after { content: ''; position: absolute; inset: 4px; background: var(--wh); }
.cf-agree a { color: var(--blk); border-bottom: 1px solid var(--blk); }
.cf-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.cf-file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  border: 1px dashed rgba(17,17,17,.28); padding: 16px 18px; font-size: 14px; color: var(--dim);
  transition: border-color .2s var(--eo), color .2s var(--eo);
}
.cf-file input { display: none; }
.cf-file b { font-weight: 400; font-size: 16px; color: var(--dim2); }
.cf-file:hover { border-color: var(--blk); color: var(--blk); }
/* файл реально прикреплён — сплошная рамка вместо пунктира и имя файла вместо подписи */
.cf-file.has-file { border-style: solid; border-color: var(--blk); color: var(--blk); }
.cf-file.has-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-file.has-file b { color: var(--grn); }
.c-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  background: var(--blk); color: var(--wh); border: none; padding: 16px 20px;
  font-size: 14px; font-weight: 500; transition: gap .2s var(--eo), opacity .2s var(--eo);
}
.c-sub span { font-size: 15px; }
.c-sub:hover { opacity: .85; }
/* обязательные поля не заполнены — кнопка неактивна */
.c-sub:disabled { opacity: .35; cursor: not-allowed; }
.c-sub:disabled:hover { opacity: .35; }
.ct-note { margin-top: 20px; font-family: var(--mono); font-size: 11px; color: var(--dim2); }

/* ════════ FOOTER — ink block, text only ════════ */
.s-foot { background: var(--blk); color: var(--wh); padding: 64px var(--edge) 48px; margin-top: -1px; position: relative; z-index: 1; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 30px; }
.foot-mail { font-size: clamp(20px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.03em; color: var(--wh); transition: color .25s var(--eo); }
.foot-mail:hover { color: var(--grn); }
.foot-mid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.foot-logo { width: 118px; height: auto; color: var(--wh); overflow: visible; }
.foot-links { display: flex; flex-wrap: wrap; gap: 36px; }
.foot-links a { font-size: 14px; color: rgba(255,255,255,.45); transition: color .2s; width: fit-content; }
.foot-links a:hover { color: var(--wh); }
.foot-legal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.fl-col { display: flex; flex-direction: column; gap: 8px; }
.fl-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); }
.fl-v { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.5); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: repeat(6, 1fr); }
  .pf-card:nth-child(n) { grid-column: span 3; }
  .const { position: static; height: auto; display: flex; flex-direction: column; gap: 40px; max-width: 480px; }
  .cpt { position: static; transform: none; width: 100%; flex-direction: column; align-items: flex-start; }
  .cpt-c, .cpt-r, .cpt-l { align-items: flex-start; text-align: left; align-self: flex-start; }
  .cpt > .cpt-c, .cpt > .cpt-r, .cpt > .cpt-l { align-self: flex-start; }
  .cpt-sq { align-self: flex-start; margin: 0 0 14px; }
  .cpt-r .cpt-txt p { margin-left: 0; }
  .ct { grid-template-columns: 1fr; }
  .ct-form { padding: 48px 0 0; }
  .cf-row3 { grid-template-columns: 1fr; }
  .cf-foot { grid-template-columns: 1fr; }
  .ct-side--dark { padding: 40px 28px; aspect-ratio: auto; min-height: 0; }
  .ct::before, .ct::after { display: none; }
}
/* низкие экраны: первый экран не должен вылезать за 100svh */
@media (min-width: 769px) and (max-height: 820px) {
  .hero-stage { padding: 76px var(--edge) 40px; }
  .hero-mark { width: min(42vw, 380px); }
  .hero-claim { margin-bottom: 20px; }
}
@media (max-width: 768px) {
  .ov-wrap { height: auto; }
  .s-hero { position: relative; height: auto; }
  .svc-wrap { height: auto !important; margin-top: 0 !important; }
  .s-const { position: relative; margin-top: 0; }
  .s-const.svc-hold .sec-eyebrow, .s-const.svc-hold .const { opacity: 1 !important; }
  .fly-sq { display: none; }
  .cpt-sq.sq-wait { opacity: 1 !important; }
  .cur-wrap { height: auto !important; margin-top: 0 !important; }
  .hero-stage { min-height: 0; padding-bottom: 56px; }
  :root { --edge: 24px; }
.hero-dialog { max-width: 460px; grid-template-columns: 1fr; }
  .hero-card { width: 100%; padding: 28px; min-height: 0; max-height: none; }
  .fnav { left: 16px; right: 16px; top: 16px; justify-content: space-between; }
  .fnav-top { white-space: nowrap; }
.fnav a { padding: 9px 8px; font-size: 13px; }
  .fcta { display: none; }
  .slab-wrap { height: 180vh; }
  .s-slab { padding: 0 24px; }
  .slab-inner { margin: 0 -24px; padding: 80px 24px; }

  .sec { padding: 80px 24px; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-card:nth-child(n) { grid-column: 1; }
  .quad-shell { grid-template-columns: 1fr; padding: 72px var(--edge) 80px; row-gap: 32px; }
  .quad-intro, .quad-grid, .quad-lead--out { grid-column: 1; grid-row: auto; max-width: none; margin: 0; }
  .quad-h2 { font-size: clamp(30px, 8vw, 52px); max-width: none; }
  .qi-note { margin: 20px 0 0; max-width: none; }
  .qt { aspect-ratio: auto; min-height: 200px; }
  .qt-d { opacity: 1; transform: none; }
  .cli { flex: 0 0 auto; transform: none !important; }

  .s-foot { padding: 40px 24px 28px; }
  .foot-top { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 40px; }
  .foot-legal { grid-template-columns: 1fr; gap: 28px; }
  .foot-mid { margin-bottom: 40px; }
  .foot-links { gap: 20px; }
}

/* ════════ ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ ════════ */
.pp { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.pp[hidden] { display: none; }
.pp-back { position: absolute; inset: 0; background: rgba(17,17,17,.72); }
.pp-panel { position: relative; display: flex; flex-direction: column; width: min(820px, 100%); max-height: 86vh; background: var(--wh); }
.pp-x { position: absolute; right: 0; top: 0; width: 52px; height: 52px; border: none; background: none; cursor: pointer; font-size: 16px; color: var(--dim); transition: color .2s var(--eo); }
.pp-x:hover { color: var(--blk); }
.pp-scroll { overflow-y: auto; padding: 52px 56px 32px; }
.pp-eyebrow { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim2); margin-bottom: 16px; }
.pp-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.03em; margin: 0 0 18px; }
.pp-lead { font-size: 14px; line-height: 1.7; color: var(--dim); margin: 0 0 34px; max-width: 62ch; }
.pp-h { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blk); font-weight: 400; margin: 34px 0 14px; }
.pp-scroll p { font-size: 13px; line-height: 1.75; color: var(--dim); margin: 0 0 12px; max-width: 76ch; }
.pp-foot { display: flex; align-items: center; gap: 10px; padding: 20px 56px 26px; border-top: 1px solid rgba(17,17,17,.1); background: var(--wh); }
.pp-accept { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border: none; background: var(--blk); color: var(--wh); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: gap .2s var(--eo); }
.pp-accept:hover { gap: 16px; }
.pp-decline { padding: 15px 18px; border: none; background: none; font: inherit; font-size: 14px; color: var(--dim); cursor: pointer; transition: color .2s var(--eo); }
.pp-decline:hover { color: var(--blk); }
@media (max-width: 768px) {
  .pp { padding: 16px; }
  .pp-panel { max-height: 92vh; }
  .pp-scroll { padding: 40px 22px 24px; }
  .pp-foot { padding: 16px 22px 20px; flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════
   DEVICE MERGE — три раньше отдельных файла (device-desktop.css,
   device-tablet.css, device-mobile.css) сведены в один адаптивный
   набор брейкпоинтов. Диапазоны — из собственных комментариев
   авторов этих файлов: mobile «до 767px», tablet «768–1180px»
   (округлено до 1199, чтобы стыковаться с порогом itvibe-overlap.js
   без мёртвой зоны), desktop — всё, что шире.
   ════════════════════════════════════════════════════════════════ */

/* ══ ДЕСКТОП (от 1200px) ══ широкий экран, полный ховер-интерактив */
@media (min-width: 1200px) {
  :root { --edge: 72px; }
  .sec { padding: 132px var(--edge); }

  /* первый экран */
  .hero-stage { min-height: 68svh; padding: 140px var(--edge) 72px; }
  .hero-mark { width: min(46vw, 520px); }
  .hero-dialog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-card { min-width: 0; }

  /* потолки ширины: контент не расползается на больших мониторах */
  .rt, .pf-grid, .ct, .foot-legal, .quad-inner, .sec-h2 { max-width: 1320px; }
  /* координаты «созвездия» заданы в процентах от 1200px — ширину не меняем */
  .const { max-width: 1200px; }

  .slab-text { max-width: 44ch; }

  /* блок 8 — форма: три поля по ~157px были слишком узкими, placeholder не влезал.
     Имя и телефон в ряд, email на всю ширину; геометрия полей задана явно. */
  .ct-form { padding: 88px var(--edge) 88px 72px; }
  .cf-row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .cf-row3 .c-field:last-child { grid-column: 1 / -1; }
  .c-field { min-height: 0; }
  .c-field input { height: 52px; padding: 0 14px; box-sizing: border-box; }
  .c-field textarea { height: 112px; padding: 14px; box-sizing: border-box; }
  .c-opts { gap: 6px; }
  .c-opt { padding: 10px 13px; font-size: 13px; }
  .ct-side--dark { padding: 88px 64px 88px var(--edge); }

  /* фильтры портфолио: одна строка у правого края, если хватает места */
  .pf-chips { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .pf-chip { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }

  /* ховеры уместны только здесь */
  .hero-card:hover { transform: translateY(-6px); }
}

/* ══ ПЛАНШЕТ (768–1199px) ══ тач: ховеры не нужны, сетки в 2 колонки */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --edge: 40px; }
  .sec { padding: 92px var(--edge); }

  /* первый экран */
  .hero-stage { min-height: 74svh; padding: 104px var(--edge) 56px; }
  .hero-mark { width: min(66vw, 420px); }
  .hero-claim { font-size: 18px; margin: 4px 0 34px; }
  .hero-dialog { grid-template-columns: repeat(2, 1fr); }
  .hero-card { max-height: none; }

  /* FAB — плавающая кнопка меню: верхняя навигация здесь не показывается */
  .fcta { display: none; }
  .fab {
    display: flex; position: fixed; right: 24px; bottom: 24px; z-index: 80; touch-action: manipulation;
    width: 58px; height: 58px; padding: 0; border: none; cursor: pointer;
    background: var(--blk); flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    transition: opacity .25s var(--eo), transform .3s var(--eo);
  }
  .fab i { display: block; pointer-events: none; width: 22px; height: 2px; background: var(--wh); transition: transform .3s var(--eo), opacity .25s var(--eo); }
  body.fab-open .fab i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.fab-open .fab i:nth-child(2) { opacity: 0; }
  body.fab-open .fab i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .fnav-cta { display: block; }
  .fnav {
    position: fixed; right: 24px; bottom: 94px; left: auto; top: auto; z-index: 79;
    display: flex; flex-direction: column; align-items: stretch; gap: 1px;
    min-width: 210px; padding: 0; background: var(--blk); transform-origin: 100% 100%;
  }
  .fnav, .fnav.show { opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none; transition: opacity .25s var(--eo), transform .3s var(--eo); }
  body.fab-open .fnav, body.fab-open .fnav.show { opacity: 1; transform: none; pointer-events: auto; }
  .fnav a { padding: 16px 20px; font-size: 15px; color: rgba(255,255,255,.72); background: transparent; transition: background .2s var(--eo), color .2s var(--eo); }
  .fnav a:active { background: rgba(255,255,255,.1); color: var(--wh); }
  .fnav .fnav-cta { background: transparent; color: rgba(255,255,255,.72); font-weight: 400; }

  /* переход 1→2 отключён (itvibe-overlap.js не подключён) */
  .ov-wrap { position: static; }
  .s-hero { position: static; }
  .hero-dialog { opacity: 1 !important; transform: none !important; }
  .hero-mark, .glet, .hsq-core, .hero-claim .hcw { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-mark-black { display: none !important; }
  .const { opacity: 1 !important; transform: none !important; }
  .cpt-txt { opacity: 1 !important; transform: none !important; }

  /* блок 2 — вместо созвездия строгая сетка с центральным коридором:
     левая колонка тянется к оси, правая от неё, ряды смещены по вертикали */
  .s-const { min-height: 0; position: static; padding: 76px var(--edge) 92px; }
  .const {
    position: static !important; display: grid !important; grid-template-columns: 1fr 1fr;
    column-gap: 56px; row-gap: 52px; height: auto !important; width: 100% !important;
    max-width: 860px !important; margin: 0 auto !important; align-items: start;
  }
  .cpt {
    position: static !important; transform: none !important;
    width: auto !important; max-width: none !important;
    display: flex !important; flex-direction: column !important; gap: 0 !important;
  }
  .cpt--above { flex-direction: column !important; }
  .cpt-txt h3 { font-size: 20px; }
  .cpt-txt p { font-size: 14px; max-width: none; }
  .cpt-sq { animation: none; margin-bottom: 14px; }

  /* левая колонка — всё к правому краю, к оси */
  .cpt:nth-child(odd) { align-items: flex-end !important; }
  .cpt:nth-child(odd) .cpt-txt,
  .cpt:nth-child(odd) .cpt-c,
  .cpt:nth-child(odd) .cpt-r,
  .cpt:nth-child(odd) .cpt-l { align-items: flex-end !important; text-align: right !important; align-self: flex-end !important; }
  .cpt:nth-child(odd) .cpt-sq { align-self: flex-end !important; }

  /* правая колонка — всё от оси влево */
  .cpt:nth-child(even) { align-items: flex-start !important; }
  .cpt:nth-child(even) .cpt-txt,
  .cpt:nth-child(even) .cpt-c,
  .cpt:nth-child(even) .cpt-r,
  .cpt:nth-child(even) .cpt-l { align-items: flex-start !important; text-align: left !important; align-self: flex-start !important; }
  .cpt:nth-child(even) .cpt-sq { align-self: flex-start !important; }

  /* ряды выровнены — без вертикального смещения */
  .cpt { margin-top: 0 !important; }

  /* блок 3 — периодическая сборка в знак отключена: на планшете плитки наезжают друг на друга */
  .quad-grid { transform: scale(.78); }
  .quad-grid.merged .qt,
  .quad-grid.merged .qt .qt-head,
  .quad-grid.merged .qt-d,
  .quad-grid.merged .quad-center,
  .quad-grid.merged .qlbl { transform: none !important; opacity: inherit !important; }
  .quad-grid.merged .qt { background: rgba(255,255,255,.06) !important; }
  .quad-center { display: none !important; }
  /* плитки не интерактивны: вся информация видна сразу */
  .qt { pointer-events: none; cursor: default !important; }
  .qt, .qt:hover, .qt:focus, .qt:active { background: rgba(255,255,255,.06) !important; color: var(--wh) !important; transform: none !important; }
  .qt-d { opacity: 1 !important; transform: none !important; }
  .qt:hover .qt-t, .qt:active .qt-t { color: var(--wh) !important; }
  .qt:hover .qt-n, .qt:active .qt-n { color: rgba(255,255,255,.5) !important; }
  .qt:hover .qt-d, .qt:active .qt-d { color: rgba(255,255,255,.62) !important; }
  .qt-head { transform: none !important; }
  /* никаких появлений по скроллу — блок сразу в финальном виде */
  .s-quad .rv, .s-quad .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .quad-h2 .ql { opacity: 1 !important; transform: none !important; animation: none !important; }
  .quad-grid, .quad-intro, .quad-lead--out { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .qlbl { opacity: 1 !important; transform: none !important; }
  .quad-h2 { font-size: clamp(26px, 4vw, 38px); }

  /* блок 4 — портфолио: 2 колонки (узкая ветка itvibe.css ставит одну — перебиваем) */
  .pf-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .pf-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pf-card, .pf-card:nth-child(n) { grid-column: auto !important; min-height: 240px; }
  .pf-t { font-size: 19px; }
  /* фильтры — компактная строка от левого края, без разброса по ширине */
  .pf-chips { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .pf-chip { padding: 9px 12px; font-size: 11px; }

  /* воздух между кейсами и чёрной плашкой */
  #work { padding-bottom: 110px !important; }

  /* блок 5 — без sticky-расшифровки, обычный поток и меньше воздуха вокруг */
  .slab-wrap { height: auto !important; margin: 0 !important; background: none !important; }
  .s-slab { position: static !important; height: auto !important; padding: 0 !important; background: none !important; }
  .slab-inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 88px var(--edge) !important; box-sizing: border-box; }
  .slab-text { font-size: clamp(22px, 3.4vw, 32px); max-width: 34ch; }
  .slab-text .slw { opacity: 1 !important; min-width: 0 !important; white-space: normal !important; }
  .slab-text .accent { color: var(--grn); }

  /* кнопка отправки не должна упираться в футер */
  #contact { padding-bottom: 72px !important; }

  /* меньше воздуха под клиентами */
  #clients { padding-bottom: 24px !important; }

  /* блок 8 — контакты друг под другом */
  .ct { grid-template-columns: 1fr; }
  .ct::before, .ct::after { display: none; }
  .ct-side--dark { aspect-ratio: auto; min-height: 0; margin-left: 0; padding: 56px 40px; }

  /* футер */
  .foot-legal { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* тач: убираем курсор-квадрат и ховер-состояния */
  .sq-cur { display: none !important; }
  .s-quad, .s-quad *, .s-hero, .s-hero * { cursor: auto; }
  .hero-card:hover { transform: none; }
  .hero-card::after { transform: translateY(101%); }
}

/* ══ МОБИЛЬНАЯ (до 767px) ══ одна колонка, всё в потоке, без скролл-анимаций */
@media (max-width: 767px) {
  :root { --edge: 20px; }
  .sec { padding: 64px var(--edge); }

  /* навигация: FAB в углу раскрывает список разделов */
  .fcta { display: none; }
  .nav { padding: 14px var(--edge); }
  .fab {
    display: flex; position: fixed; right: 16px; bottom: 16px; z-index: 80; touch-action: manipulation;
    width: 54px; height: 54px; padding: 0; border: none; cursor: pointer;
    background: var(--blk); flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    transition: opacity .25s var(--eo), transform .3s var(--eo);
  }
  .fab i { display: block; pointer-events: none; width: 20px; height: 2px; background: var(--wh); transition: transform .3s var(--eo), opacity .25s var(--eo); }
  body.fab-open .fab i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.fab-open .fab i:nth-child(2) { opacity: 0; }
  body.fab-open .fab i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .fnav-cta { display: block; }
  .fnav {
    position: fixed; right: 16px; bottom: 82px; left: auto; top: auto; z-index: 79;
    display: flex; flex-direction: column; align-items: stretch; gap: 1px;
    min-width: 190px; padding: 0; background: var(--blk);
    opacity: 0; transform: translateY(10px) scale(.97); transform-origin: 100% 100%;
    pointer-events: none; transition: opacity .25s var(--eo), transform .3s var(--eo);
  }
  /* itvibe.js по скроллу добавляет .fnav.show с opacity:1 — на мобильной видимость решает только FAB */
  .fnav, .fnav.show { opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none; }
  body.fab-open .fnav, body.fab-open .fnav.show { opacity: 1; transform: none; pointer-events: auto; }
  .fnav a {
    padding: 15px 18px; font-size: 14px; color: rgba(255,255,255,.72);
    background: transparent; transition: background .2s var(--eo), color .2s var(--eo);
  }
  .fnav a:active { background: rgba(255,255,255,.1); color: var(--wh); }
  .fnav .fnav-cta { background: transparent; color: rgba(255,255,255,.72); font-weight: 400; }

  /* первый экран */
  .hero-stage { min-height: auto; padding: 84px var(--edge) 40px; }
  .hero-mark { width: 78vw; margin-bottom: 12px; }
  .hero-claim { font-size: 16px; margin: 2px 0 28px; }
  .hero-dialog { grid-template-columns: 1fr; gap: 2px; }
  .hero-card { max-height: none; padding: 20px; }
  .hc-lbl { font-size: 10px; }
  .hc-text { font-size: 15px; }

  /* переход 1→2 полностью отключён (скрипт itvibe-overlap.js не подключён) */
  .ov-wrap { position: static; }
  .s-const.svc-hold, .s-const { opacity: 1 !important; }
  .hero-dialog { opacity: 1 !important; transform: none !important; }
  .hero-mark-black { display: none !important; }
  .s-hero { position: static; }
  .svc-wrap { height: auto !important; margin: 0 !important; }
  .s-const { position: static; min-height: 0; padding: 64px var(--edge); }
  .const { position: static; display: flex; flex-direction: column; gap: 26px; height: auto; padding: 0; opacity: 1 !important; transform: none !important; }
  .cpt { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: none; align-self: stretch !important; text-align: left; }
  .cpt-sq { align-self: flex-start !important; animation: none; margin: 0 0 12px; opacity: 1 !important; }
  /* текст пунктов показывался только по классу .const.in, который ставил отключённый скрипт */
  .cpt-txt { opacity: 1 !important; transform: none !important; }
  .cpt-txt h3 { font-size: 20px; }
  .cpt-txt p { font-size: 14px; max-width: none; }
  .cpt-c, .cpt-r, .cpt-l { align-items: center !important; text-align: center !important; align-self: center !important; }
  /* все пункты по центру: и квадраты, и текст */
  .cpt { align-items: center !important; padding-left: 0 !important; }
  .cpt-sq { align-self: center !important; }
  .cpt-txt { text-align: center !important; }
  .cpt-txt p { margin-left: auto !important; margin-right: auto !important; }
  .cpt-r .cpt-txt p { margin-left: 0; }
  .cpt--below { flex-direction: column !important; }
  .fly-sq { display: none !important; }
  .hero-mark, .glet, .hsq-core, .hero-claim .hcw { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* блок 3 — сетка знака в потоке, ничего не вылезает за экран */
  .s-quad { padding: 0; }
  .quad-shell { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 56px var(--edge) 64px; }
  .quad-intro, .quad-grid, .quad-lead--out { position: static !important; width: 100% !important; flex: 0 0 auto; }
  .quad-intro, .quad-grid, .quad-lead--out { grid-column: 1; grid-row: auto; max-width: none; margin: 0; }
  /* JS-параллакс сетки выставляет inline transform — на мобильной он не нужен */
  .quad-grid { transform: none !important; gap: 2px; }
  .quad-grid.merged .qt, .quad-grid.merged .qt .qt-head, .quad-grid.merged .quad-center { transform: none !important; background: rgba(255,255,255,.08); }
  .quad-grid.merged .qt-head { justify-content: flex-start !important; }
  .quad-center { display: none; }
  .qt { aspect-ratio: auto; min-height: 0; padding: 18px; }
  .qt-t { font-size: 17px; }
  .qt-d { opacity: 1 !important; transform: none !important; font-size: 13px; }
  /* на тач-устройстве hover залипает после тапа — плитки не должны инвертироваться */
  .qt, .qt:hover, .qt:focus, .qt:active { background: rgba(255,255,255,.06) !important; color: var(--wh) !important; transform: none !important; }
  .qt:hover .qt-t, .qt:active .qt-t { color: var(--wh) !important; }
  .qt:hover .qt-n, .qt:active .qt-n { color: rgba(255,255,255,.5) !important; }
  .qt:hover .qt-d, .qt:active .qt-d { color: rgba(255,255,255,.62) !important; }
  .qt-head { transform: none !important; justify-content: flex-start !important; }
  /* плитки не интерактивны: вся информация видна сразу, нажимать не нужно */
  .qt { pointer-events: none; cursor: default !important; }
  .quad-h2 { font-size: 27px; max-width: none; overflow: visible; margin-bottom: 8px; }
  .quad-h2 .ql { line-height: 1.1; }
  .quad-h2 .ql { opacity: 1 !important; transform: none !important; }
  .quad-h2 .qwrap { white-space: normal; }
  .qi-note { margin: 18px 0 0; max-width: none; }
  .quad-lead--out { font-size: 14px; max-width: none; }

  /* блок 4 — портфолио в одну колонку */
  .pf-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-card { min-height: 200px; }
  /* фильтры — переносятся на новую строку, без обрезки края экрана */
  .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .pf-chip { flex: 0 0 auto; font-size: 10px; padding: 7px 10px; white-space: nowrap; }
  .pf-chip-n { margin-left: 5px; }

  /* блок 5 — статичный текст без sticky-расшифровки; хаос-символы вписаны в ширину экрана */
  .slab-text .slw { white-space: normal !important; min-width: 0 !important; }
  .slab-text .accent { color: var(--grn); }
  .slab-inner { padding-top: 48px !important; padding-bottom: 44px !important; overflow: hidden; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; }
  .slab-inner > * { max-width: 100% !important; }
  .slab-wrap { height: auto; margin: 44px 0 0; background: none; }
  .s-slab { position: static; height: auto; padding: 0; background: none; }
  .slab-inner { width: auto; margin: 0; padding: 56px var(--edge); }
  .slab-text { font-size: 20px; line-height: 1.35; width: 100%; max-width: 100% !important; word-break: break-word; overflow-wrap: anywhere; }
  .slab-text .slw { opacity: 1 !important; }

  /* блок 8 — контакты в столбец */
  .ct { grid-template-columns: 1fr; }
  .ct::before, .ct::after { display: none; }
  .ct-side--dark { aspect-ratio: auto; min-height: 0; margin-left: 0; padding: 40px var(--edge); }
  .ct-quote { font-size: 24px; max-width: none; margin-bottom: 32px; }
  .c-row { grid-template-columns: 1fr; }
  /* кнопка «Отправить» упиралась в футер */
  .ct-form { padding-bottom: 56px; }
  /* направление проекта — компактный нативный выбор вместо длинного списка кнопок */
  .c-opts { display: none; }
  .c-select { display: block; position: relative; margin-bottom: 14px; }
  .c-select select {
    -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box;
    padding: 15px 40px 15px 14px; border: 1px solid rgba(17,17,17,.18);
    background: #fff; color: var(--blk); font: inherit; font-size: 15px; border-radius: 0;
  }
  .c-select select:focus { outline: none; border-color: var(--blk); }
  .c-select select option { background: #fff; color: var(--blk); }
  .c-select::after {
    content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
    margin-top: -6px; border-right: 1px solid var(--blk);
    border-bottom: 1px solid var(--blk); transform: rotate(45deg); pointer-events: none;
  }

  /* футер */
  .s-foot { padding: 40px var(--edge) 88px; }
  .foot-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-legal { grid-template-columns: 1fr; gap: 18px; }
  .fl-k { font-size: 9px; letter-spacing: .12em; }
  .fl-v { font-size: 11px; line-height: 1.5; }

  /* тач: никаких кастомных курсоров и ховеров */
  .sq-cur { display: none !important; }
  * { cursor: auto !important; }
  .hero-card:hover { transform: none; }
  .hero-card::after { transform: translateY(101%); }
  .jump-in { animation: none; }
}