/* Шрифты лежат здесь же, не у Google: сайт обещает клиентам «ноль Fremdskripte», и сам
   не должен слать IP гостя на fonts.gstatic.com (после решения LG München это ещё и штраф). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/unbounded-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/unbounded-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/unbounded-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/unbounded-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* venue-growth — стили в языке NOCTURNE (restaurant-photo-site/v06-neon).
   Оттуда: палитра #ff2d95 / #00e5ff, живой градиентный меш, зерно, стеклянные
   панели с blur, неоновое свечение заголовка, кнопки-пилюли с градиентом.
   Разметка и вся математика раскладок оставлены как были.
   Шрифты: в источнике Space Grotesk + Michroma, но у них нет кириллицы —
   вместо них Unbounded (тот же техно-геометрический характер, кириллица есть). */
@property --m1x { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --m1y { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --m2x { syntax: '<percentage>'; inherits: false; initial-value: 84%; }
@property --m2y { syntax: '<percentage>'; inherits: false; initial-value: 26%; }
@property --m3x { syntax: '<percentage>'; inherits: false; initial-value: 52%; }
@property --m3y { syntax: '<percentage>'; inherits: false; initial-value: 88%; }
@property --mA  { syntax: '<number>';     inherits: false; initial-value: 0.42; }

:root{
  --bg:#06040c;
  --bg2:#0b0716;
  --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.10);
  --ink:#f0edf8;
  --dim:#aaa4c4;
  --mg:#ff2d95;
  --cy:#00e5ff;
  --am:#ffab40;
  --glow:var(--mg);

  /* карта на прежние имена, чтобы разметку не переписывать */
  --fg:var(--ink);
  --gold:var(--cy);
  --paper:var(--ink);
  --navh:3.6rem;
  --pad:clamp(20px,5vw,80px);
  --wrap:1560px;
  --display:'Unbounded',system-ui,sans-serif;
  --wide:'Unbounded',system-ui,sans-serif;
  --mono:'Unbounded',ui-monospace,monospace;
  --serif:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{
  overflow-x:clip;
  /* scroll-snap убран намеренно: он тянул вид назад и воевал с обработчиком колеса
     («один рывок = один экран») — ровно та же засада, что была на velaro-ristorante.de.
     Теперь шаг по экранам делает только JS, а на тач-устройствах прокрутка нативная. */
  scroll-padding-top:var(--navh);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 clamp(.95rem,.9rem + .2vw,1.05rem)/1.62 var(--serif);
  -webkit-font-smoothing:antialiased;
}
/* живой меш и зерно — фон всей страницы, как в источнике */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at var(--m1x) var(--m1y), rgba(255,45,149,var(--mA)), transparent 62%),
    radial-gradient(42vmax 42vmax at var(--m2x) var(--m2y), rgba(0,229,255,calc(var(--mA) * .8)), transparent 64%),
    radial-gradient(46vmax 46vmax at var(--m3x) var(--m3y), rgba(124,58,237,calc(var(--mA) * .95)), transparent 66%),
    var(--bg);
  filter:blur(38px) saturate(140%);
  animation:drift 46s ease-in-out infinite alternate, pulse 11s ease-in-out infinite alternate;
}
@keyframes drift{
  0%  { --m1x:12%; --m1y:18%; --m2x:84%; --m2y:26%; --m3x:52%; --m3y:88%; }
  50% { --m1x:64%; --m1y:8%;  --m2x:22%; --m2y:58%; --m3x:88%; --m3y:64%; }
  100%{ --m1x:34%; --m1y:52%; --m2x:70%; --m2y:84%; --m3x:14%; --m3y:22%; }
}
@keyframes pulse{ from{--mA:.28} to{--mA:.5} }
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    linear-gradient(180deg,rgba(6,4,12,.55),rgba(6,4,12,.86) 55%,rgba(6,4,12,.94)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:700; line-height:1.02;
  letter-spacing:.01em; text-transform:uppercase}
h1{font-size:clamp(1.8rem,4.4vw,3.9rem)}
h2{font-size:clamp(1.15rem,2.4vw,2.1rem)}
h3{font-size:clamp(.95rem,1.5vw,1.2rem); letter-spacing:.05em}
p{margin:0 0 .8rem}
:focus-visible{outline:2px solid var(--cy); outline-offset:3px}

/* подпись раздела — eyebrow из источника */
.label{margin:0 0 1rem; font-family:var(--wide); font-size:.58rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--cy)}
.note{color:var(--dim); font-size:.86rem}
.lead{color:var(--ink); font-size:clamp(1rem,.95rem + .35vw,1.16rem); max-width:48ch}

/* ---------- полоса прогресса ---------- */
.prog{position:fixed; inset:0 auto auto 0; height:2px; width:100%; z-index:60;
  background:linear-gradient(90deg,var(--mg),var(--cy));
  box-shadow:0 0 14px rgba(255,45,149,.7);
  transform-origin:0 50%; transform:scaleX(0)}
@supports (animation-timeline:scroll(root)){
  .prog{animation:prog linear both; animation-timeline:scroll(root)}
  @keyframes prog{to{transform:scaleX(1)}}
}

/* ---------- шапка ---------- */
.nav{position:fixed; inset:0 0 auto; height:var(--navh); z-index:50;
  display:flex; align-items:center; gap:1.4rem; padding:0 var(--pad);
  background:rgba(8,5,16,.6);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line)}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; white-space:nowrap}
.brand span{font-family:var(--wide); font-size:.72rem; letter-spacing:.3em; color:#fff;
  text-shadow:0 0 .5em rgba(255,45,149,.75)}
.brand__mark{width:26px; height:26px; flex:0 0 auto; display:block;
  filter:drop-shadow(0 0 9px rgba(255,45,149,.55))}
.nav-links{display:flex; gap:1.3rem; margin-left:auto; flex-wrap:wrap}
.nav-links a{font-family:var(--wide); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--dim); transition:color .25s, text-shadow .25s}
.nav-links a:hover{color:#fff; text-shadow:0 0 .8em var(--cy)}
.nav .cta-mini{margin-left:.4rem}
/* переключатель языка: немецкий — язык разметки, английский приезжает из i18n.js */
.lang{display:flex; gap:2px; margin-left:.8rem; flex:0 0 auto}
.lang button{font-family:var(--wide); font-size:.55rem; letter-spacing:.14em; cursor:pointer;
  background:transparent; color:var(--dim); border:1px solid var(--line); border-radius:999px;
  padding:.42rem .6rem; transition:color .25s, border-color .25s, box-shadow .25s}
.lang button:hover{color:#fff; border-color:rgba(0,229,255,.5)}
.lang button[aria-pressed="true"]{color:#0a0410; border-color:transparent;
  background:linear-gradient(100deg,var(--mg),var(--cy))}
@media (max-width:960px){ .nav-links{display:none} .lang{margin-left:auto} .nav .cta-mini{margin-left:.5rem} }

/* ---------- кнопки-пилюли ---------- */
.cta,.cta-ghost,.cta-mini{display:inline-block; font-family:var(--wide); letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; border:0; border-radius:999px; cursor:pointer;
  font-weight:400; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s, filter .3s, color .3s}
.cta{font-size:.62rem; padding:1rem 1.6rem; color:#0a0410;
  background:linear-gradient(100deg,var(--mg),#ff6bb5 45%,var(--cy));
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 6px 26px rgba(255,45,149,.35)}
.cta:hover{transform:translateY(-2px); filter:saturate(1.2);
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 40px rgba(255,45,149,.6), 0 0 60px rgba(0,229,255,.3)}
.cta-ghost{font-size:.6rem; padding:1rem 1.5rem; background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.cta-ghost:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--cy), 0 0 30px rgba(0,229,255,.35)}
.cta-mini{font-size:.55rem; padding:.6rem 1.05rem; color:#0a0410;
  background:linear-gradient(100deg,var(--mg),var(--cy));
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 4px 18px rgba(255,45,149,.35)}
.cta-mini:hover{transform:translateY(-1px); box-shadow:0 6px 26px rgba(255,45,149,.55), 0 0 40px rgba(0,229,255,.28)}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem}

/* ---------- экран / снап ---------- */
/* Экран = 100svh МИНУС шапка: страница прилипает под фиксированной шапкой
   (scroll-padding-top:var(--navh)), поэтому ровно 100svh не помещается —
   нижние ~58px уезжают под сгиб. Первый экран — исключение. */
.page{min-height:calc(100svh - var(--navh)); scroll-snap-align:start;
  padding:clamp(1.2rem,3vh,2.4rem) var(--pad) clamp(1.4rem,3.5vh,3rem);
  display:grid; align-content:center; position:relative;
  border-top:1px solid var(--line)}
.page:first-of-type{border-top:0; min-height:100svh;
  padding-top:calc(var(--navh) + clamp(1.2rem,3vh,2.4rem))}
/* Одна общая колонка для КАЖДОГО экрана. До этого было три разных поведения:
   первый экран прижат влево с капом 1240, шаги центрированы по 1560, направления
   и цена — во всю ширину. На 1440 они совпадали, на 2560 расходились на 400+ px,
   и страница читалась как съехавшая. Фон первого экрана остаётся во всю ширину. */
.page > *:not(.hero__bg):not(.wall){width:100%; max-width:var(--wrap); margin-inline:auto}
#price{scroll-snap-align:none}

/* ---------- точки навигации ---------- */
.dots{position:fixed; right:calc(var(--pad) / 2.4); top:50%; transform:translateY(-50%);
  display:grid; gap:.8rem; z-index:45}
.dots a{width:9px; height:9px; border-radius:50%; display:block;
  background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .3s, box-shadow .3s, transform .3s}
.dots a[aria-current="true"]{background:var(--mg); transform:scale(1.3);
  box-shadow:0 0 14px rgba(255,45,149,.9), 0 0 30px rgba(255,45,149,.5)}
@media (max-width:900px){ .dots{display:none} }

/* ---------- первый экран ---------- */
.hero{overflow:clip; isolation:isolate}
.hero__bg{position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover;
  filter:saturate(1.4) contrast(1.14) brightness(.6)}
.hero__bg::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 18% 30%, rgba(255,45,149,.34), transparent 70%),
    radial-gradient(55% 60% at 85% 70%, rgba(0,229,255,.28), transparent 70%),
    linear-gradient(180deg,rgba(6,4,12,.62) 0%,rgba(6,4,12,.4) 32%,rgba(6,4,12,.9) 74%,rgba(6,4,12,.98))}
@media (max-width:760px){ .hero__bg{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr)} }
.hero__in{position:relative; z-index:1}
.hero .lead{margin-top:1.2rem}
/* неон из источника: свечение магентой и редкое мерцание */
.hero h1 em{font-style:normal; color:#fff;
  text-shadow:0 0 .04em #fff, 0 0 .18em rgba(255,45,149,.95), 0 0 .45em rgba(255,45,149,.75),
    0 0 .8em rgba(255,45,149,.5), 0 0 1.5em rgba(255,45,149,.3);
  animation:flick 6s steps(1) infinite}
@keyframes flick{ 0%,96%,100%{opacity:1} 97%{opacity:.72} 98%{opacity:1} 99%{opacity:.85} }

.get{list-style:none; margin:1.9rem 0 0; padding:0;
  display:grid; gap:1.1rem; grid-template-columns:repeat(4,minmax(0,1fr))}
.get li{position:relative; border-radius:20px; padding:clamp(1rem,1.8vw,1.5rem);
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease), box-shadow .45s, border-color .45s}
.get li:hover{transform:translateY(-6px); border-color:rgba(255,45,149,.6);
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 46px rgba(255,45,149,.35)}
.get b{display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,2.3vw,1.85rem); line-height:1; letter-spacing:.02em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 0 .2em rgba(0,229,255,.85), 0 0 .7em rgba(0,229,255,.4)}
.get span{display:block; margin-top:.6rem; font-size:.88rem; color:var(--dim)}
@media (max-width:900px){ .get{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- шаг ---------- */
.step{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.4rem,3.5vw,3.4rem); align-items:center}
@media (max-width:980px){ .step{grid-template-columns:1fr} }
.step__num{font-family:var(--wide); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cy); display:flex; align-items:center; gap:.9rem; margin:0 0 1rem}
.step__num::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(0,229,255,.55),transparent)}
.bullets{list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.7rem}
.bullets li{padding-left:1.4rem; position:relative; color:var(--dim); font-size:.92rem}
.bullets li::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:7px;
  border-radius:50%; background:var(--mg); box-shadow:0 0 10px rgba(255,45,149,.9)}
.bullets b{color:#fff; font-weight:500}

/* фотографии: рамка через outline, чтобы не сбить посчитанные высоты */
.shots{position:relative; display:flex; flex-direction:column; justify-content:center; gap:.7rem;
  height:calc(100svh - var(--navh) - 7rem)}   /* отступы экрана + подпись вне потока + люфт ~25px */
.shot-big{overflow:hidden; flex:2 1 0; min-height:0; border-radius:18px;
  outline:1px solid var(--line); outline-offset:-1px}
.shot-big img{width:100%; height:100%; object-fit:cover;
  filter:saturate(1.28) contrast(1.08) brightness(.88)}
.grid3{display:grid; gap:.7rem; flex:1 1 0; min-height:0; grid-template-columns:repeat(3,minmax(0,1fr))}
.grid3 figure{margin:0; overflow:hidden; height:100%; border-radius:16px;
  outline:1px solid var(--line); outline-offset:-1px;
  transition:transform .45s var(--ease), box-shadow .45s, outline-color .45s}
.grid3 img{width:100%; height:100%; object-fit:cover;
  filter:saturate(1.28) contrast(1.08) brightness(.85); transition:filter .5s}
.grid3 figure:hover img{filter:saturate(1.5) contrast(1.1) brightness(1)}
.grid3 figure:hover{transform:translateY(-5px); outline-color:rgba(0,229,255,.6);
  box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 40px rgba(0,229,255,.3)}
@media (max-width:980px){
  .shots{height:auto}
  .shots > *{flex:0 0 auto; min-height:auto}
  .shot-cap{position:static; margin:.4rem 0 0}
  .shot-big{aspect-ratio:16/10}
  .grid3 figure{aspect-ratio:1/1; height:auto}
}

/* Девять кадров: три столбца, в каждом два горизонтальных (3:2) и один вертикальный (2:3).
   Пропорция контейнера 1.03 выведена из этого состава; рамки — outline, расчёт не сбивается. */
.grid9{height:100%; aspect-ratio:1.03; max-width:100%; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.4rem,.9vw,.7rem)}
.grid9 .col{display:flex; flex-direction:column; justify-content:center; gap:clamp(.4rem,.9vw,.7rem)}
/* justify-content: на высоком экране столбец выше своих трёх кадров (ширина колонки ограничена,
   а высота сетки — экраном), без центровки кадры липли к верху, а текст слева стоял по центру. */
.grid9 figure{margin:0; overflow:hidden; border-radius:14px;
  outline:1px solid var(--line); outline-offset:-1px;
  transition:transform .45s var(--ease), box-shadow .45s, outline-color .45s}
.grid9 img{display:block; width:100%; height:auto;
  filter:saturate(1.28) contrast(1.08) brightness(.85); transition:filter .5s}
.grid9 figure:hover{transform:translateY(-6px); z-index:2; outline-color:rgba(255,45,149,.65);
  box-shadow:0 22px 55px rgba(0,0,0,.65), 0 0 44px rgba(255,45,149,.35)}
.grid9 figure:hover img{filter:saturate(1.5) contrast(1.1) brightness(1)}
@media (max-width:980px){ .grid9{height:auto; aspect-ratio:auto} }

/* Шесть скриншотов рядом: два столбца, три ряда. Пропорция 1.02 — из 3·w/1.6 + 2·gap. */
.grid-sites{height:100%; aspect-ratio:1.02; max-width:100%; margin:0 auto;
  display:grid; align-content:center;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.4rem,1vw,.7rem)}
.grid-sites figure{margin:0; overflow:hidden; border-radius:14px;
  outline:1px solid var(--line); outline-offset:-1px;
  transition:transform .45s var(--ease), box-shadow .45s, outline-color .45s}
.grid-sites img{display:block; width:100%; height:auto}
.grid-sites figure:hover{transform:translateY(-6px); z-index:2; outline-color:rgba(0,229,255,.6);
  box-shadow:0 22px 55px rgba(0,0,0,.65), 0 0 44px rgba(0,229,255,.32)}
.shot-cap{position:absolute; left:0; right:0; top:calc(100% + .5rem); margin:0;
  font-family:var(--wide); font-size:.52rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim)}

/* Две площадки — две плитки 2×3 в горизонтальной ленте со scroll-snap: на телефоне
   листается пальцем, на компьютере — стрелками. Подписи лежат ВНЕ ленты и переключаются
   скриптом: overflow-x:auto на ленте режет и по вертикали, абсолютная подпись под ней
   была бы обрезана. */
.sites{position:relative; height:100%; min-height:0}
.sites__track{display:flex; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.sites__track::-webkit-scrollbar{display:none}
.sites__slide{flex:0 0 100%; min-width:0; height:100%; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center}
.sites__arr{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
  font:400 1.6rem/1 var(--wide); padding:0 0 .15rem; color:#fff;
  background:rgba(8,5,16,.72); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s, box-shadow .3s, background .3s}
.sites__arr:hover{border-color:rgba(0,229,255,.7); box-shadow:0 0 22px rgba(0,229,255,.35); background:rgba(8,5,16,.9)}
.sites__arr--prev{left:-1.2rem}
.sites__arr--next{right:-1.2rem}
.shot-cap a{color:var(--cy); text-decoration:none; border-bottom:1px solid rgba(0,229,255,.35)}
.shot-cap a:hover{border-bottom-color:var(--cy)}
@media (max-width:980px){
  .sites{height:auto}
  .sites__track,.sites__slide{height:auto}
  .sites__arr--prev{left:.4rem} .sites__arr--next{right:.4rem}
}

/* ---------- рекламные креативы ---------- */
.ad{position:relative; overflow:hidden; display:flex; align-items:flex-end; height:100%;
  border-radius:16px; outline:1px solid var(--line); outline-offset:-1px;
  transition:transform .45s var(--ease), box-shadow .45s, outline-color .45s}
.ad:hover{transform:translateY(-6px); z-index:2; outline-color:rgba(255,45,149,.6);
  box-shadow:0 22px 55px rgba(0,0,0,.65), 0 0 44px rgba(255,45,149,.34)}
.ad img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.3) contrast(1.08) brightness(.86)}
.ad::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(255,45,149,.34), transparent 70%),
    linear-gradient(180deg,rgba(6,4,12,.45) 0 20%,rgba(6,4,12,0) 46%,rgba(6,4,12,.88))}
.ad__body{position:relative; z-index:1; padding:clamp(.6rem,1.2vw,1rem); width:100%}
.ad__chip{position:absolute; z-index:1; top:.55rem; left:.55rem;
  font-family:var(--wide); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(8,5,16,.7); border:1px solid var(--line); color:var(--cy);
  padding:.28rem .5rem; border-radius:999px}
.ad__h{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(.72rem,.95vw,.92rem); line-height:1.14; margin:0 0 .3rem; color:#fff}
.ad__sub{margin:0; font-family:var(--wide); font-size:.45rem; letter-spacing:.12em;
  text-transform:uppercase; color:#cdc7e0}

/* Площадка подписана так, как пишет себя сама, и латиницей: градиент Instagram,
   синий Facebook, разноцветные буквы Google Maps. Класс .plat, а не .brand. */
.plat{border:0; border-radius:999px; padding:.3rem .55rem;
  font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:clamp(.55rem,.8vw,.74rem); letter-spacing:-.01em; text-transform:none;
  line-height:1; box-shadow:0 1px 6px rgba(0,0,0,.5);
  display:inline-flex; align-items:baseline; gap:.1em}
.plat--ig{background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 52%,#6228d7 100%); color:#fff}
.plat--fb{background:#fff; color:#1877F2}
.plat--g{background:#fff; color:#5f6368}
.plat--g b{font-weight:700}
.plat--g b:nth-child(1){color:#4285F4}
.plat--g b:nth-child(2){color:#EA4335}
.plat--g b:nth-child(3){color:#FBBC05}
.plat--g b:nth-child(4){color:#4285F4}
.plat--g b:nth-child(5){color:#34A853}
.plat--g b:nth-child(6){color:#EA4335}
.plat--g i{font-style:normal; font-weight:500; color:#5f6368; margin-left:.3em}

/* ── Шаг 03: текст слева, стена объявлений справа ────────────────────────────
   Кладка взята из галереи NOCTURNE (restaurant-photo-site/v06-neon): сетка
   auto-fill с рядами по 92 px, плитки на 3–4 ряда, grid-auto-flow:dense.

   Три вещи, которые тут держатся друг на друге:
   1. Экран НЕ использует общую колонку --wrap: текст занимает левую треть, стена
      уходит вправо до самой кромки, поэтому у страницы обнулён правый отступ, а оба
      ребёнка исключены из правила .page > *.
   2. Верх и низ стены срезаны маской-градиентом, а не рамкой. Из-за неё нижний край
      всегда одна ровная линия: какие-то объявления кончаются резко, какие-то уходят
      в затухание — рваного края больше нет.
   3. Плитки сдвинуты по вертикали на разную величину (--o), поэтому их верх не стоит
      по одной линии и читается как «выезжают сверху». Сдвиг съедает часть промежутка
      между плитками в колонке — это ожидаемо и есть часть ритма. */
.page--wall{display:grid; grid-template-columns:minmax(280px,30%) 1fr;
  gap:clamp(1.2rem,2.5vw,3.2rem); align-items:center; padding-right:0}
.page--wall > *{max-width:none; margin-inline:0}
.wall-copy{min-width:0}
.wall-copy .bullets{margin-top:1.2rem}

.wall{position:relative; height:calc(100svh - var(--navh) - 5.5rem); overflow:hidden;
  mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 88%,transparent 100%)}
/* Сетка поднята выше окна стены: уступы распорок должны уходить ПОД верхний фейд.
   Замер: самая длинная распорка — 3 ряда, это 288 px, поэтому подъёма меньше 288 px
   не хватает и колонка с такой распоркой начинается ВНУТРИ окна, оставляя пустоту
   сверху. -300 px — минимум, при котором верх каждой колонки обрезан кромкой
   (замерено на 1280/1440/1734/1920/2560: верх колонок от -12 до -208 px). */
.wall__grid{display:grid; gap:.4rem; margin-top:-300px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));
  grid-auto-rows:92px; grid-auto-flow:dense; align-content:start}
.wall .tile{grid-row:span 3; border-radius:12px}
.wall .tile--tall{grid-row:span 4}
/* Сбитый верх — невидимыми распорками в начале сетки, а НЕ сдвигом плиток.
   Сдвиг (translateY) сначала казался проще, но плитка едет, а её ячейка остаётся:
   снизу зазор растёт на величину сдвига, сверху схлопывается, и расстояния между
   объявлениями гуляли от 6 до 68 px. Распорка занимает 1–4 ряда в начале своей
   колонки, поэтому колонки стартуют с разной высоты, а все промежутки остаются
   ровно .4rem. Колонок на разных экранах 5–9, распорок 12 — хватает на любой. */
.wall .spacer{grid-row:span var(--s,1); visibility:hidden}
/* Распорок должно быть РОВНО столько же, сколько колонок, иначе лишние ложатся в те
   же колонки и уступы складываются: на 1440 верх уезжал вниз на 342 px вместо 145.
   Пороги не угаданы, а замерены: число колонок меняется на 1150, 1450, 1750, 2000,
   2300 и 2550 px (колонка — 178 px, ширина стены — экран минус левая треть).
   Прежние пороги были смещены на шаг, и на 1250–1440, 1550–1740, 1800–1990,
   2050–2290 распорок оказывалось на одну больше, чем колонок. */
.wall__grid > .spacer:nth-child(n+10){display:none}
@media (max-width:2514px){ .wall__grid > .spacer:nth-child(n+9){display:none} }
@media (max-width:2254px){ .wall__grid > .spacer:nth-child(n+8){display:none} }
@media (max-width:1989px){ .wall__grid > .spacer:nth-child(n+7){display:none} }
@media (max-width:1714px){ .wall__grid > .spacer:nth-child(n+6){display:none} }
@media (max-width:1434px){ .wall__grid > .spacer:nth-child(n+5){display:none} }
@media (max-width:1144px){ .wall__grid > .spacer:nth-child(n+4){display:none} }

/* Широкий экран: колонок 8–9, а плиток всего 36, поэтому в колонке остаётся четыре
   штуки и низ колонки не доходит до нижней кромки. Ряд выше — плитка выше (и ближе
   к настоящим 9:16), колонка заполняет стену. Подъём растёт вместе с рядом: самая
   длинная распорка — три ряда, 3 × 112 = 336, поэтому -370. */
@media (min-width:2255px){ .wall__grid{grid-auto-rows:112px; margin-top:-370px} }

@media (max-width:980px){
  /* На телефоне двух колонок нет: текст сверху, стена под ним полосой. */
  .page--wall{display:block; align-content:start; padding-right:var(--pad)}
  .wall{height:auto; max-height:88svh; margin-top:1.2rem; border-radius:14px;
    mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%)}
  .wall__grid{margin-top:0;
    grid-template-columns:repeat(auto-fill,minmax(min(48%,140px),1fr)); grid-auto-rows:74px}
  .wall .spacer{display:none}
  /* На десктопе первый ряд DOM уходит под верхний фейд, поэтому туда положены
     наполнители, а ударные кадры — вторым рядом. На телефоне фейда сверху нет и
     видны только первые 6–8 плиток: ударные вытягиваются вперёд. */
  .wall .tile--lead{order:-1}
}

/* ---------- направления ---------- */
.verts{display:grid; gap:1.1rem; margin-top:1.4rem; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .verts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .verts{grid-template-columns:1fr} }
.vert{position:relative; overflow:hidden; border-radius:20px; padding:0 0 1.1rem;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease), box-shadow .45s, border-color .45s}
.vert:hover{transform:translateY(-8px); border-color:rgba(0,229,255,.55);
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 46px rgba(0,229,255,.3)}
.vert__ph{aspect-ratio:16/9; overflow:hidden; position:relative}
.vert__ph img{width:100%; height:100%; object-fit:cover;
  filter:saturate(1.3) contrast(1.08) brightness(.82)}
.vert__b{padding:1.1rem clamp(.9rem,1.4vw,1.3rem) 0}
.vert h3{margin-bottom:.5rem; color:#fff}
.vert .note{color:var(--cy); font-family:var(--wide); font-size:.5rem;
  letter-spacing:.2em; text-transform:uppercase}
.vert ul{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.35rem;
  font-size:.84rem; color:var(--dim)}
.vert li::before{content:"· "; color:var(--mg)}

/* ---------- цена ---------- */
.tiers{display:grid; gap:1.1rem; margin-top:1.4rem; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){ .tiers{grid-template-columns:1fr} }
.tier{border-radius:20px; padding:clamp(1.1rem,2.2vw,1.8rem);
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease), box-shadow .45s, border-color .45s}
.tier:hover{transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.6)}
.tier--main{border-color:rgba(255,45,149,.55);
  background:linear-gradient(160deg,rgba(255,45,149,.12),rgba(0,229,255,.07));
  box-shadow:0 0 46px rgba(255,45,149,.26)}
.tier__k{margin:0 0 .9rem; font-family:var(--wide); font-size:.52rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cy)}
.tier__p{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1; margin:0 0 .3rem; color:#fff;
  text-shadow:0 0 .2em rgba(255,45,149,.6), 0 0 .7em rgba(255,45,149,.3)}
.tier__u{font-family:var(--wide); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin:0 0 1rem}
.tier ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem;
  font-size:.85rem; color:var(--dim)}
.tier li::before{content:"— "; color:var(--mg)}
.disclaimer{margin-top:.9rem; font-size:.78rem; color:#8f88ab; max-width:68ch}

/* ---------- форма ---------- */
.form{display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start; margin-top:1.6rem; max-width:1140px}
.form label{display:grid; gap:.4rem; font-family:var(--wide); font-size:.5rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.form .wide{grid-column:1/-1}
.form input,.form select,.form textarea{font-family:var(--serif); font-size:.95rem; color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px;
  padding:.7rem .85rem; width:100%;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s, box-shadow .3s}
.form textarea{resize:none; overflow:hidden}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;
  border-color:var(--cy); box-shadow:0 0 0 1px var(--cy), 0 0 26px rgba(0,229,255,.3)}
.form-foot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:1rem}
.form-status{flex:1 1 16rem; margin:0; min-height:1.4em; font-size:.86rem; color:var(--dim)}
.form-status.is-ok{color:#7dffb2}
.form-status.is-error{color:#ff6b9d}
.form-status a{color:inherit; text-decoration:underline; text-underline-offset:.2em}
.form .is-wrong{border-color:var(--mg); box-shadow:0 0 0 1px var(--mg), 0 0 24px rgba(255,45,149,.35)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:960px){ .form{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .form{grid-template-columns:1fr} .form label{grid-column:1/-1} }

.foot{padding:1.8rem var(--pad) 2.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.8rem 1.9rem; align-items:baseline;
  font-family:var(--wide); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim)}
.foot a{text-decoration:none; transition:color .25s, text-shadow .25s}
.foot a:hover{color:#fff; text-shadow:0 0 .8em var(--cy)}

/* ---------- появление ---------- */
.rise{opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.in .rise{opacity:1; transform:none}

/* низкие десктопные окна (например 1024×700): в полный рост контент шагов не
   помещается, а обработчик колеса прячет всё, что ниже сгиба. Ужимаем то, что
   задано в rem (текст, отступы, --navh, высота .shots) — математика фотоколонок
   на пропорциях не трогается. */
@media (min-width:981px) and (max-height:780px){
  html{font-size:14px}
  .verts{margin-top:1rem}
  .vert{padding-bottom:1rem}
  #verticals .disclaimer{margin-top:.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rise{opacity:1; transform:none}
}

/* Последний экран заканчивается действием: форму заявки убрали, разговор идёт в WhatsApp. */
.price-cta{margin:1.6rem 0 0}

/* Значок WhatsApp — маской на псевдоэлементе, а не тегом внутри ссылки.
   Причина: подписи переключает i18n через innerHTML, и вложенный <svg> при первом же
   переключении языка был бы стёрт вместе с текстом. Псевдоэлемент это переживает.
   Иконка одноцветная и наследует цвет текста кнопки. */
.wa{display:inline-flex; align-items:center; gap:.55em}
.wa::before{content:""; flex:none; width:1.05em; height:1.05em; background:currentColor;
  -webkit-mask:var(--wa-glyph) center/contain no-repeat; mask:var(--wa-glyph) center/contain no-repeat}
:root{--wa-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413'/%3E%3C/svg%3E")}