:root {
  --bg: #0b0a09;
  --bg-2: #12100d;
  --surface: #17140f;
  --surface-2: #1f1b15;
  --line: rgba(233, 194, 127, 0.14);
  --line-2: rgba(255, 255, 255, 0.08);
  --text: #f3ede4;
  --muted: #a39a8c;
  --gold: #e3b871;
  --gold-2: #f6dba4;
  --gold-3: #b98a45;
  --grad-gold: linear-gradient(135deg, #f6dba4 0%, #e3b871 45%, #b98a45 100%);
  --radius: 22px;
  --radius-sm: 14px;
  --font-h: 'Unbounded', system-ui, sans-serif;
  --font: 'Manrope', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-h); font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1.12; }
::selection { background: var(--gold); color: #1a1408; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s;
}
.btn:active { transform: scale(.97); }
.btn--gold { background: var(--grad-gold); color: #1d1608; box-shadow: 0 10px 40px -10px rgba(227, 184, 113, .55), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgba(227, 184, 113, .75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; padding: 6px; font-size: 14px; }
.link-btn:hover { color: var(--gold-2); }


/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px var(--gutter);
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(11, 10, 9, .93); padding-block: 12px; border-color: var(--line-2); }
.logo { display: flex; align-items: center; gap: 10px; }
.logo__mark { width: 44px; height: 44px; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.logo__text { font: 600 19px/1 var(--font-h); letter-spacing: -0.03em; white-space: nowrap; }
.nav__links { display: flex; gap: 30px; font-size: 14.5px; font-weight: 500; }
.nav__links a { white-space: nowrap; color: rgba(243, 237, 228, .78); position: relative; padding: 6px 0; transition: color .3s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.lang button { background: none; border: 0; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: .3s; }
.lang button.is-active { background: var(--text); color: var(--bg); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--text); transition: .4s var(--ease); }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21.5px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #2a2219 0%, var(--bg) 70%); }
/* заставка видна сразу; 3D плавно проявляется поверх, когда готов первый кадр */
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; }
.hero__poster.is-swap { opacity: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
#scene.is-ready { opacity: 1; }
.no-3d #scene { display: none; }
/* мозаика из видео на первом экране */
.mosaic { position: absolute; inset: 0; display: grid; gap: 6px; padding: 6px; background: #060505; }
.mosaic > div { position: relative; overflow: hidden; border-radius: 14px; background: #15120e; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.mosaic video, .mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic__tile video, .mosaic__tile img { filter: brightness(.82) saturate(.95); }
.mosaic__main { z-index: 1; border-radius: 18px !important; box-shadow: 0 0 0 1.5px rgba(227,184,113,.85), 0 0 46px -6px rgba(227,184,113,.45); }
/* «Смотреть больше» в правом нижнем углу главного видео */
.mosaic__more {
  position: absolute; z-index: 3; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--grad-gold); color: #1d1608; font: 700 13.5px/1 var(--font);
  box-shadow: 0 10px 30px -8px rgba(227,184,113,.7); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mosaic__more i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1d1608; color: var(--gold-2); font-weight: 800; transition: transform .35s var(--ease); }
.mosaic__more:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(227,184,113,.85); }
.mosaic__more:hover i { transform: translateX(3px); }
@media (max-width: 700px) { .mosaic__more { display: none; } } /* на телефоне кнопка не нужна */

/* кнопка паузы по центру главного видео */
.mosaic__pp {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; border: 1.5px solid rgba(246,219,164,.75); cursor: pointer;
  background: rgba(10,9,7,.62);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), 0 0 30px -8px rgba(227,184,113,.5);
  opacity: 0; transform: scale(.85); transition: opacity .3s, transform .35s var(--ease), background .3s;
}
.mosaic__pp::before, .mosaic__pp::after { content: ''; position: absolute; top: 50%; width: 6px; height: 24px; margin-top: -12px; border-radius: 3px; background: #f6dba4; }
.mosaic__pp::before { left: 28px; } .mosaic__pp::after { right: 28px; }
.mosaic__pp.is-paused::before { left: 30px; width: 0; height: 0; margin-top: -13px; border-radius: 0; background: none; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #f6dba4; }
.mosaic__pp.is-paused::after { display: none; }
.mosaic__main:hover .mosaic__pp, .mosaic__pp:focus-visible, .mosaic__pp.is-paused { opacity: 1; transform: none; }
.mosaic__pp:hover { background: rgba(227,184,113,.25); }
@media (hover: none) { .mosaic__pp { opacity: .85; transform: none; width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .mosaic__pp::before { left: 19px; height: 18px; margin-top: -9px; width: 5px; } .mosaic__pp::after { right: 19px; height: 18px; margin-top: -9px; width: 5px; }
  .mosaic__pp.is-paused::before { left: 21px; border-width: 10px 0 10px 17px; margin-top: -10px; } }
/* узкий экран: центр главного видео занят текстом — кнопка в свободном углу под меню */
@media (max-width: 700px) {
  .mosaic__pp { left: auto; right: 12px; top: 74px; margin: 0; width: 48px; height: 48px; opacity: .9; transform: none; }
  .mosaic__pp::before { left: 15px; width: 5px; height: 18px; margin-top: -9px; }
  .mosaic__pp::after { right: 15px; width: 5px; height: 18px; margin-top: -9px; }
  .mosaic__pp.is-paused::before { left: 17px; width: 0; height: 0; border-width: 9px 0 9px 15px; margin-top: -9px; }
}
.mosaic__main .is-next { opacity: 0; transition: opacity .5s ease; z-index: 1; }
.mosaic__main .is-next.is-in { opacity: 1; }
.mosaic__tag { position: absolute; z-index: 2; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.7); border: 1px solid rgba(227,184,113,.5); color: var(--gold-2); font: 600 13px/1 var(--font-h); letter-spacing: .02em; }
.hero__fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.hero__fade.is-on { opacity: .85; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.82) 28%, rgba(8,7,6,.35) 50%, rgba(8,7,6,0) 62%),
    linear-gradient(0deg, rgba(11,10,9,.95) 0%, rgba(11,10,9,.4) 16%, rgba(11,10,9,0) 30%),
    linear-gradient(180deg, rgba(8,7,6,.6) 0%, rgba(8,7,6,0) 14%);
}
.hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 120px; }
.hero__content { pointer-events: none; } .hero__content > * { pointer-events: auto; }
/* текст держится в левой части — справа главное видео мозаики */
@media (min-width: 701px) { .hero__content > * { max-width: min(600px, 50vw); } .hero__title { max-width: min(640px, 52vw); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; width: fit-content;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(227,184,113,.06); backdrop-filter: blur(8px);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero__title { font-size: clamp(34px, 4.2vw, 68px); font-weight: 500; max-width: 13ch; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.hero__title em { font-style: normal; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { max-width: 520px; color: rgba(243, 237, 228, .8); font-size: clamp(15px, 1.4vw, 18px); margin: 24px 0 34px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.switcher { position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; display: flex; align-items: center; gap: 16px; }
.switcher__label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.switcher__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.switcher__chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(20, 17, 13, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13.5px; font-weight: 600; transition: .35s var(--ease);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: .35s; }
.chip:hover { border-color: rgba(227,184,113,.5); }
.chip.is-active { background: rgba(227, 184, 113, .16); border-color: var(--gold); color: var(--gold-2); }
.chip.is-active i { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero__hint { position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,237,228,.45); }

/* ---------- marquee ---------- */
.marquee { border-block: 1px solid var(--line-2); overflow: hidden; padding: 22px 0; background: var(--bg); }
.marquee__track { display: flex; gap: 34px; width: max-content; animation: marquee 40s linear infinite; font: 500 clamp(18px, 2.2vw, 28px)/1 var(--font-h); letter-spacing: -0.02em; color: rgba(243,237,228,.85); }
.marquee__track i { font-style: normal; color: var(--gold); font-size: .6em; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(80px, 11vw, 150px); }
.section--narrow { max-width: 920px; }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 48px; }
.section__title { font-size: clamp(30px, 4.2vw, 56px); max-width: 16ch; }
.section > .section__title { margin-bottom: 48px; }
.section__sub { color: var(--muted); max-width: 440px; margin: 0; font-size: 16px; }

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

/* glow cards */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(227,184,113,.13), transparent 60%);
}
.glow:hover::before { opacity: 1; }

/* advantages */
.adv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.adv__card { padding: 30px 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--line-2); transition: border-color .4s, transform .5s var(--ease); }
.adv__card:hover { border-color: var(--line); transform: translateY(-4px); }
.adv__card h3 { font-size: 18px; margin: 22px 0 10px; }
.adv__card p { margin: 0; color: var(--muted); font-size: 15px; }
.adv__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(227,184,113,.1); border: 1px solid var(--line); }
.adv__icon svg, .srv__icon { width: 24px; height: 24px; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.srv {
  padding: 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; min-height: 300px; transition: border-color .4s, transform .5s var(--ease);
  overflow: hidden;
}
.srv::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 260px; height: 260px; border-radius: 50%; z-index: -1; filter: blur(60px); opacity: .25; transition: opacity .5s; }
.srv[data-type="matte"]::after { background: #f1e9db; }
.srv[data-type="glossy"]::after { background: #9fb3c8; }
.srv[data-type="starry"]::after { background: #5a3fb0; }
.srv[data-type="floating"]::after { background: #ffb56b; }
.srv[data-type="lines"]::after { background: #bfe2ff; }
.srv[data-type="multilevel"]::after { background: #e3b871; }
.srv:hover { border-color: var(--line); transform: translateY(-4px); }
.srv:hover::after { opacity: .45; }
.srv__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 50px; }
.srv__n { font: 500 clamp(34px, 3.2vw, 44px)/1 var(--font-h); letter-spacing: -0.03em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.srv__icon { width: 34px; height: 34px; }
.srv h3 { font-size: 22px; margin-bottom: 12px; }
.srv p { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.srv__btn { align-self: flex-start; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 4px; color: var(--gold-2); font-weight: 700; font-size: 14px; }
/* карточки услуг в одну общую сетку: номер, заголовок, текст и кнопка на одних уровнях во всём ряду */
@supports (grid-template-rows: subgrid) {
  .srv { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .srv__top { margin-bottom: 0; }
  .srv h3 { align-self: start; }
  .srv p { align-self: start; }
  .srv__btn { align-self: end; justify-self: start; }
}
.srv__btn span { display: inline-block; transition: transform .35s var(--ease); }
.srv__btn:hover span { transform: translateX(5px); }

/* gallery */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.filter { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: none; font-size: 14px; font-weight: 600; color: var(--muted); transition: .3s; }
.filter:hover { color: var(--text); }
.filter.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; grid-auto-flow: dense; }
.tile { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-2); padding: 0; background: var(--surface); text-align: left; }
.tile:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.tile:nth-child(6n + 4) { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.tile:hover img { transform: scale(1.06); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent 45%); }
.tile__cap { position: absolute; z-index: 1; left: 16px; bottom: 14px; font-weight: 700; font-size: 15px; }
.tile__badge { position: absolute; z-index: 1; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); }
.tile--ph { display: block; }
.tile--matte { background: linear-gradient(180deg, #e9e3d8, #6d655a); }
.tile--glossy { background: linear-gradient(180deg, #4b4f57, #1b1c20); }
.tile--starry { background: radial-gradient(circle at 30% 30%, #3b1f6b, #05060f 70%); }
.tile--floating { background: linear-gradient(180deg, #ffd29a 0%, #6a5a48 40%, #2a241d); }
.tile--lines { background: repeating-linear-gradient(90deg, #d6dfe8 0 6px, #8a8f96 6px 90px); }
.tile--multilevel { background: linear-gradient(180deg, #d9b26f, #3c3226); }

/* ---------- папки-альбомы ---------- */
.section--albums + .section--albums { padding-top: 0; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.folder {
  position: relative; aspect-ratio: 4 / 3.3; padding: 0; border: 0; background: none; text-align: left;
  border-radius: var(--radius); isolation: isolate;
}
/* корпус папки */
.folder::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(180deg, #221d16, #15120e); border: 1px solid var(--line); z-index: -2;
}

.folder__stack { position: absolute; inset: 18px; }
.folder__stack img, .folder__stack video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
  border: 3px solid #f3ede4; box-shadow: 0 14px 30px -10px rgba(0,0,0,.7);
  --r: calc((var(--i) - (var(--n) - 1) / 2) * 5deg);
  transform: rotate(var(--r)) translateY(calc(var(--i) * -2px)) scale(.9);
  transition: transform .6s var(--ease); z-index: calc(3 - var(--i));
}
.folder:hover .folder__stack img, .folder:focus-visible .folder__stack img,
.folder:hover .folder__stack video, .folder:focus-visible .folder__stack video {
  transform: rotate(calc(var(--r) * 2.4)) translateX(calc((var(--i) - (var(--n) - 1) / 2) * 14%)) scale(.84);
}
.folder__stack::after {
  content: ''; position: absolute; inset: -6px; border-radius: 14px; z-index: 5; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 55%, rgba(8,7,6,.72), rgba(8,7,6,.15) 75%, transparent);
  transition: opacity .5s;
}
.folder:hover .folder__stack::after { opacity: .75; }
.folder__label {
  position: absolute; z-index: 6; left: 50%; top: 52%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 6px; text-align: center; width: 78%; pointer-events: none;
}
.folder__label b { max-width: 100%; text-wrap: balance; font: 600 clamp(18px, 1.7vw, 23px)/1.15 var(--font-h); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.folder__label small { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.folder__open {
  position: absolute; z-index: 6; right: 26px; bottom: 26px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-gold); color: #1d1608; font-weight: 800;
  transform: scale(.8); opacity: 0; transition: .4s var(--ease);
}
.folder:hover .folder__open, .folder:focus-visible .folder__open { opacity: 1; transform: none; }

/* альбом: карточка поверх сайта */
.album { position: fixed; inset: 0; z-index: 80; background: rgba(6,5,4,.55); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.album[hidden] { display: none; }
.album { cursor: zoom-out; }
.album__panel { cursor: default; outline: none; }
.album__panel {
  position: absolute; inset: clamp(14px, 5vh, 48px) clamp(14px, 4vw, 64px);
  border-radius: 28px; border: 1.5px solid transparent;
  /* золотая рамка-градиент: фон окна внутри, золото — по краю */
  background:
    linear-gradient(180deg, rgb(30,26,20), rgb(15,13,10)) padding-box,
    linear-gradient(135deg, #f6dba4 0%, #e3b871 30%, #8a6a35 55%, #e3b871 80%, #f6dba4 100%) border-box;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(227,184,113,.08), 0 0 40px -6px rgba(227,184,113,.35);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 0 clamp(14px, 1.8vw, 26px) clamp(14px, 1.8vw, 24px);
  transform-origin: 0 0; will-change: transform;
}
.album__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px 14px; background: linear-gradient(180deg, rgba(30,26,20,1) 70%, rgba(30,26,20,0)); }
.album__title { font-size: clamp(22px, 2.8vw, 36px); }
.album__close { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid rgba(227,184,113,.55); color: var(--gold-2); background: rgba(255,255,255,.05); font-size: 26px; line-height: 1; transition: .3s; }
.album__close:hover { border-color: var(--gold); color: var(--gold-2); transform: rotate(90deg); }
.album__grid { display: grid; gap: 10px; }
.album__grid .tile { min-height: 0; cursor: zoom-in; }
.album__grid .tile img, .album__grid .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* значок «видео» */
.folder__play, .tile__play { position: absolute; z-index: 7; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.68); border: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.folder__play::after, .tile__play::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.folder__play { left: 30px; top: 30px; }
.tile__play { right: 12px; bottom: 12px; width: 36px; height: 36px; }
.tile__play::after { border-width: 7px 0 7px 11px; }
.album__grid .tile::after { display: none; }
/* видео при наведении появляется поверх обложки */
.album__grid .tile__preview { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .25s; }
.album__grid .tile.is-playing .tile__preview { opacity: 1; }
.album__grid .tile.is-playing .tile__play { opacity: 0; }
.tile__play { transition: opacity .25s; }
.album__grid .tile--video:hover { outline: 2px solid var(--gold); outline-offset: -2px; }
/* пока альбом открыт, фото в папке «улетели» */
.folder__stack, .folder__label { transition: opacity .15s ease-out; }
.folder.is-open .folder__stack, .folder.is-open .folder__label { opacity: 0; transition-duration: .2s; }
@media (max-width: 640px) {
  .folders { grid-template-columns: 1fr 1fr; gap: 12px; }
  .folder__stack { inset: 10px; }
  .folder__label small { font-size: 10.5px; padding: 4px 8px; }
  .folder__open { display: none; }
  .album__grid { gap: 6px; }
  .album__panel { inset: 10px; border-radius: 22px; padding: 0 10px 10px; }
}

/* ---------- ремонт: до / после ---------- */
.repairs { display: grid; gap: 28px; }
.ba { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 18px; border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.ba__side { position: relative; padding: 0; border: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 70vh; width: 100%; background: #000; cursor: zoom-in; }
.ba__side img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.ba__side:hover img { transform: scale(1.04); }
.ba__tag { position: absolute; top: 14px; left: 14px; padding: 7px 14px; border-radius: 999px; font: 600 13px/1 var(--font-h); letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); color: #f3ede4; border: 1px solid rgba(255,255,255,.2); }
.ba__tag--after { background: var(--grad-gold); color: #1d1608; border-color: transparent; }
.ba__arrow { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: #1d1608; font-size: 24px; font-weight: 800; box-shadow: 0 10px 30px -8px rgba(227,184,113,.6); }
.ba figcaption { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 15px; }
@media (max-width: 640px) {
  .ba { grid-template-columns: 1fr; gap: 10px; padding: 10px; border-radius: 22px; }
  .ba__arrow { justify-self: center; transform: rotate(90deg); width: 44px; height: 44px; }
  .ba__side { aspect-ratio: 4 / 4.4; }
}

/* кнопка «Показать ещё» под работами */
.gallery .tile[hidden] { display: none; }
.more { display: flex; justify-content: center; margin-top: 34px; }
.more[hidden] { display: none; }
.more__btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 18px 16px 30px; border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(180deg, #1f1b15, #14110d) padding-box, var(--grad-gold) border-box;
  color: var(--text); font-weight: 700; font-size: 16px;
  box-shadow: 0 14px 40px -14px rgba(227,184,113,.45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.more__btn:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -12px rgba(227,184,113,.65); }
.more__btn small { font-size: 13px; font-weight: 700; color: var(--gold-2); padding: 4px 10px; border-radius: 999px; background: rgba(227,184,113,.12); }
.more__btn i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: #1d1608; font-weight: 800; transition: transform .35s var(--ease); }
.more__btn:hover i { transform: translateY(3px); }
.more__btn.is-less { padding-left: 26px; }
.more__btn.is-less:hover i { transform: translateY(-3px); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(5,5,5,.92); backdrop-filter: blur(12px); display: grid; place-items: center; padding: 60px 16px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); }
.lightbox video { display: block; max-height: 84vh; max-width: 100%; border-radius: var(--radius-sm); margin: 0 auto; background: #000; }
.lightbox img[hidden], .lightbox video[hidden] { display: none; }
.lightbox img { max-height: 84vh; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); margin: 0 auto; }
.lightbox figcaption { text-align: center; color: var(--muted); margin-top: 14px; }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); width: 52px; height: 52px; border-radius: 50%; font-size: 28px; line-height: 1; display: grid; place-items: center; transition: .3s; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--gold); color: var(--gold-2); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-open { overflow: hidden; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { padding: 28px 26px 30px; border-top: 1px solid var(--line); position: relative; }
.step::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.step__n { display: block; font: 500 54px/1 var(--font-h); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 26px; }
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* calculator */
.calc { display: grid; grid-template-columns: 1.35fr 1fr; border-radius: 28px; border: 1px solid var(--line); overflow: clip; overflow-clip-margin: 0; background: var(--surface); }
.calc__form { padding: clamp(28px, 4vw, 56px); display: grid; gap: 26px; }
.calc__form .section__sub { margin-top: -10px; }
.calc__result {
  padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(227,184,113,.22), transparent 60%), var(--surface-2);
  border-left: 1px solid var(--line);
}
.calc__label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.calc__price { font: 500 clamp(42px, 5.5vw, 72px)/1 var(--font-h); letter-spacing: -0.04em; }
.calc__price small { font-size: .4em; color: var(--gold-2); letter-spacing: 0; }
.calc__note { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.calc__phone { text-align: center; color: var(--gold-2); font-weight: 700; padding: 6px; }
.field { display: grid; gap: 10px; font-size: 14.5px; font-weight: 600; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; }
.field__row output { font: 500 22px/1 var(--font-h); color: var(--gold-2); }
.field--2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.field--2 label, .field--3 label { display: grid; gap: 10px; align-content: space-between; }
.field--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p, 12%), rgba(255,255,255,.1) var(--p, 12%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-2); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--gold), 0 0 20px rgba(227,184,113,.6); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold-2); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--gold); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-size: 13.5px; font-weight: 600; color: var(--muted); transition: .3s; }
.seg button:hover { color: var(--text); }
.seg button.is-active { border-color: var(--gold); color: var(--gold-2); background: rgba(227,184,113,.1); }
.stepper { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); }
.stepper button { width: 46px; height: 46px; background: none; border: 0; font-size: 20px; color: var(--gold-2); flex: none; }
.stepper button:hover { background: rgba(255,255,255,.05); }
.stepper input { flex: 1; min-width: 0; width: 100%; text-align: center; background: none; border: 0; color: var(--text); font: 600 17px var(--font); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.check { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; cursor: pointer; width: fit-content; }
.check input { position: absolute; opacity: 0; }
.check__box { width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; place-items: center; transition: .3s; }
.check input:checked + .check__box { background: var(--gold); border-color: var(--gold); }
.check input:checked + .check__box::after { content: ''; width: 6px; height: 11px; border: solid #1d1608; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check input:focus-visible + .check__box { outline: 2px solid var(--gold-2); outline-offset: 2px; }

.calc-pop {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: rgba(227,184,113,.12); border: 1px solid var(--gold); color: var(--gold-2); font-size: 14.5px; line-height: 1.45;
  box-shadow: 0 10px 40px -12px rgba(227,184,113,.5);
}
.calc-pop[hidden] { display: none; }
.calc-pop svg { flex: none; margin-top: 1px; }
.calc-pop b { color: var(--text); }
.calc-pop.is-in { animation: popIn .5s var(--ease); }
@keyframes popIn { 0% { opacity: 0; transform: translateY(-8px) scale(.97); } 60% { transform: translateY(2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
.dd { position: relative; }
.dd > button { display: inline-flex; align-items: center; gap: 6px; }
.dd__caret { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); margin-left: 4px; transition: transform .3s var(--ease); }
.dd.is-open .dd__caret { transform: rotate(-135deg) translate(-1px, -1px); }
.dd__menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content;
  padding: 6px; border-radius: 14px; background: #221d16; border: 1px solid var(--line);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.dd.is-open .dd__menu { opacity: 1; visibility: visible; transform: none; }
.seg .dd__menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 11px 12px; border-radius: 10px; color: var(--text); text-align: left; }
.seg .dd__menu button:hover { background: rgba(227,184,113,.1); }
.seg .dd__menu button[aria-checked="true"] { color: var(--gold-2); }
.dd__price { margin-left: auto; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot--white { background: #f5f2ec; }
.dot--black { background: #0a0a0a; box-shadow: 0 0 0 1px #6b6358; }
.stepper--inline { max-width: 260px; }
.field--road .stepper { max-width: 260px; }
.field__hint { color: var(--muted); font-weight: 500; font-size: 13px; }
.calc__break { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 7px; font-size: 14px; }
.calc__break li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.calc__break b { color: var(--text); font-weight: 600; white-space: nowrap; }

/* faq */
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .3s; }
.faq__item[open] { border-color: var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 700; font-size: 17px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: transform .4s var(--ease), background .3s; }
.faq__plus::before, .faq__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--gold-2); transform: translate(-50%, -50%); }
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__plus { transform: rotate(45deg); background: rgba(227,184,113,.1); }
.faq__a { padding: 0 24px 22px; color: var(--muted); }
.faq__a p { margin: 0; }

/* contact */
.contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 5vw, 64px); border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(80% 120% at 0% 0%, rgba(227,184,113,.14), transparent 55%), var(--surface); }
.contact__info .section__sub { margin: 18px 0 30px; }
.contact__big { display: block; font: 500 clamp(30px, 4.2vw, 54px)/1.1 var(--font-h); letter-spacing: -0.03em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.contact__big:hover { filter: brightness(1.15); }
.contact__mail { display: inline-block; margin-top: 12px; font-size: 18px; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 2px; word-break: break-all; }
.contact__mail:hover { color: var(--gold-2); }
.messengers { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.msg { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); font-weight: 700; font-size: 14px; transition: .3s; }
.msg--wa:hover { border-color: #25d366; color: #5ee08f; }
.msg--vb:hover { border-color: #7360f2; color: #a497ff; }
.msg--tg:hover { border-color: #2aabee; color: #6fcaf7; }
.contact__form { display: grid; gap: 16px; align-content: start; }
.contact__form input, .contact__form textarea {
  width: 100%; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0,0,0,.25);
  color: var(--text); font: 500 16px var(--font); transition: border-color .3s, box-shadow .3s; resize: vertical;
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227,184,113,.12); }
.form__note { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.form__error { margin: 0; color: #ff9a8a; font-size: 14px; text-align: center; }

/* footer */
.footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 40px 50px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 14px; }
.footer__brand { display: flex; align-items: center; gap: 10px; font: 600 20px/1 var(--font-h); color: var(--text); }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a:hover { color: var(--gold-2); }
.footer__copy { margin: 0; width: 100%; }

/* mobile call */
.fab { display: none; }

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

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 20px; font-size: 14px; }
  .adv { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .burger { display: block; }
  .nav__phone span { display: none; }
  .nav__phone { width: 44px; height: 44px; padding: 0; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: center; gap: 22px;
    background: rgba(11,10,9,.97); backdrop-filter: blur(20px); font: 500 26px var(--font-h);
    opacity: 0; visibility: hidden; transition: .45s var(--ease);
  }
  .menu-open .nav__links { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .calc, .contact { grid-template-columns: 1fr; }
  .field--3 { grid-template-columns: 1fr 1fr; }
  .calc__result { border-left: 0; border-top: 1px solid var(--line); }
  .hero__hint { display: none; }
}
@media (max-width: 640px) {
  .logo { gap: 9px; }
  .logo__text { font-size: 15px; }
  .logo__mark { width: 36px; height: 36px; }
  .nav__right { gap: 8px; }
  .lang button { padding: 6px 9px; }
  .nav__phone, .burger { width: 40px; height: 40px; }
  .burger span { left: 12px; right: 12px; }
  .burger span:first-child { top: 16px; } .burger span:last-child { top: 23px; }
  .menu-open .burger span:first-child, .menu-open .burger span:last-child { top: 19.5px; }
  .nav { padding-block: 12px; }
  .hero { min-height: 640px; }
  .hero__shade { background: linear-gradient(0deg, rgba(11,10,9,.97) 0%, rgba(11,10,9,.88) 38%, rgba(11,10,9,.25) 58%, rgba(8,7,6,0) 72%, rgba(8,7,6,.45) 100%); }
  .mosaic { gap: 4px; padding: 4px; }
  .mosaic > div { border-radius: 10px; }
  .mosaic__tag { display: none; }
  .hero__content { justify-content: flex-end; padding-bottom: 140px; }
  .hero__ctas .btn { flex: 1; padding-inline: 18px; }
  .switcher { flex-direction: column; align-items: stretch; gap: 10px; bottom: 26px; }
  .switcher__label { font-size: 12px; }
  .adv, .services, .steps { grid-template-columns: 1fr; }
  .srv { min-height: 0; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .tile:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
  .tile:nth-child(6n + 4) { grid-column: span 2; }
  .tile__cap { font-size: 13px; left: 12px; bottom: 10px; }
  .tile__badge { font-size: 9.5px; padding: 4px 8px; top: 8px; left: 8px; }
  .field--2, .field--3 { grid-template-columns: 1fr; }
  .lightbox__nav { top: auto; bottom: 18px; transform: none; }
  .fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 14px 20px; border-radius: 999px; background: var(--grad-gold); color: #1d1608; font-weight: 800; font-size: 15px;
    box-shadow: 0 12px 40px -8px rgba(227,184,113,.7); transform: translateY(120px); transition: transform .5s var(--ease);
  }
  .is-scrolled ~ main ~ .fab, body:has(.nav.is-scrolled) .fab { transform: none; }
  .fab::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold); animation: ring 2.2s ease-out infinite; }
  .footer { padding-bottom: 100px; }
}
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* первый экран: никакого размытия фона поверх видео — оно вызывает мерцание (особенно в Safari) */
.hero .chip, .hero .eyebrow, .hero .btn--ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero .chip { background: rgba(20,17,13,.82); }
.hero .eyebrow { background: rgba(20,17,13,.75); }
.hero .btn--ghost { background: rgba(20,17,13,.7); }

/* маленькие телефоны: первый экран растёт по высоте текста, текст никогда не заезжает под шапку */
@media (max-width: 640px) {
  .hero { height: auto; min-height: 100svh; }
  .hero__content { height: auto; min-height: 100svh; padding-top: 96px; }
}
@media (max-width: 640px) { .hero .eyebrow { max-width: calc(100% - 64px); } } /* не заходит под кнопку паузы */
@media (max-width: 380px) { .logo__text { display: none; } } /* совсем узкие экраны: в шапке только значок */

/* ---------- окно выбора языка ---------- */
.langpick { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px;
  background: rgba(6,5,4,.86); opacity: 0; transition: opacity .35s ease; }
.langpick[hidden] { display: none; }
.langpick.is-in { opacity: 1; }
.langpick__card {
  width: min(420px, 100%); text-align: center; padding: 34px 28px 28px; border-radius: 28px; border: 1.5px solid transparent;
  background: linear-gradient(180deg, #1e1a14, #110f0c) padding-box,
              linear-gradient(135deg, #f6dba4, #e3b871 30%, #8a6a35 55%, #e3b871 80%, #f6dba4) border-box;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.85), 0 0 50px -10px rgba(227,184,113,.35);
  transform: translateY(16px) scale(.96); transition: transform .45s var(--ease);
}
.langpick.is-in .langpick__card { transform: none; }
.langpick__logo { margin: 0 auto 10px; display: block; }
.langpick__brand { font: 600 24px/1 var(--font-h); letter-spacing: -0.02em; }
.langpick__title { margin: 18px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.langpick__title span { display: block; }
.langpick__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.langpick__btn {
  display: grid; gap: 4px; justify-items: center; padding: 18px 10px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text);
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.langpick__btn b { font: 600 26px/1 var(--font-h); letter-spacing: .02em; }
.langpick__btn span { font-size: 14px; color: var(--muted); }
.langpick__btn:hover, .langpick__btn:focus-visible { transform: translateY(-2px); border-color: var(--gold); background: rgba(227,184,113,.08); }
.langpick__btn.is-suggested { border-color: rgba(227,184,113,.6); }
.langpick__btn.is-suggested b { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }



/* калькулятор: сумма появляется только по кнопке */
.calc__price.is-empty #price { color: var(--muted); }
.calc__hint { margin: 0; color: var(--gold-2); font-size: 14.5px; font-weight: 600; }
.calc__hint[hidden] { display: none; }
#calcRun { font-size: 16px; padding-block: 18px; }

.stepper[hidden] { display: none; }

/* площадь: цифра над ползунком — это поле, куда можно вписать значение */
.area-num { width: 2ch; box-sizing: content-box; text-align: right; background: transparent; border: 0; border-bottom: 1px dashed rgba(227,184,113,.45);
  font: 500 22px/1 var(--font-h); color: var(--gold-2); padding: 2px 0; -moz-appearance: textfield; appearance: textfield; }
.area-num::-webkit-inner-spin-button, .area-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.area-num:focus { outline: none; border-bottom-color: var(--gold); }

/* телефон: стрелки в просмотре фото не нужны — листаем свайпом */
@media (hover: none), (max-width: 700px) { .lightbox__nav { display: none; } }
/* кнопки паузы на главном видео больше нет */
.mosaic__pp { display: none !important; }
/* телефон: надпись — в левом верхнем углу главного видео (под шапкой), переключатель видео — внизу главного видео */
@media (max-width: 640px) {
  .hero .eyebrow { position: absolute; z-index: 3; left: var(--gutter, 20px); top: var(--ey-top, 92px); margin: 0; max-width: calc(100% - 2 * var(--gutter, 20px)); font-size: 11px; }
  .switcher { top: var(--sw-top, auto); bottom: auto; }
  .switcher__label { display: none; }
  .hero__content { padding-bottom: 44px; }
}

/* ряд кнопок видео — карусель: листается свайпом в обе стороны и «прилипает» к кнопкам;
   гаснет с той стороны, где ещё есть кнопки (справа — в начале, с обеих — в середине, слева — в конце) */
.switcher__chips { scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding-left: 28px; --fl: 0px; --fr: 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.switcher__chips .chip { scroll-snap-align: start; }
.switcher__chips:first-child .chip:first-child, .switcher__chips .chip:first-child { scroll-snap-align: start; scroll-margin-left: 28px; }
.switcher__chips.at-start { --fl: 0px; } .switcher__chips:not(.at-start) { --fl: 46px; }
.switcher__chips.at-end { --fr: 0px; }