/* BRIXON — слой моушна поверх текущего сайта (демо v5: моушн привязан к скроллу, как в «Websites in 2026») */
:root { --bx-ease: cubic-bezier(.22, 1, .36, 1); }

/* мягкий инерционный скролл (Lenis) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.lenis .portfolio-slider { scroll-behavior: auto; }

/* ---------- базовые появления: мягче, волной ---------- */
.reveal { transform: translateY(36px); transition: opacity 1.1s var(--bx-ease), transform 1.2s var(--bx-ease); transition-delay: var(--bx-d, 0ms); }
.reveal.visible { transform: none; }

/* ---------- заголовки: слова из-под маски ---------- */
.bx-split .bx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.bx-split .bx-w > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--bx-ease); transition-delay: calc(var(--bx-i) * 45ms + var(--bx-h, 0ms)); }
.bx-split.bx-in .bx-w > span { transform: none; }

/* ---------- HERO: спокойный фейд, дальше фон «отъезжает» скроллом ---------- */
.hero-bg { animation: bx-fade 1.8s ease both; will-change: transform; }
@keyframes bx-fade { from { opacity: 0; } to { opacity: 1; } }
.bx-js .hero .stats .stat { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--bx-ease), transform 1.1s var(--bx-ease); transition-delay: var(--bx-d); }
.bx-js.bx-loaded .hero .stats .stat { opacity: 1; transform: none; }
.hero-card.reveal { transform: translateX(40px); transition-delay: .8s; }
.hero-card.reveal.visible { transform: none; }

/* ---------- HERO: новое фото — затемнение только под текстом, само фото видно ---------- */
.hero-bg { background-position: 50% 50%; }
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(20,20,19,.92) 0%, rgba(20,20,19,.74) 36%, rgba(20,20,19,.32) 68%, rgba(20,20,19,.18) 100%),
    linear-gradient(180deg, rgba(20,20,19,.45) 0%, transparent 26%, transparent 72%, rgba(20,20,19,.7) 100%);
}
.hero-glow { opacity: .5; }
@media (max-width: 860px) {
  .hero-bg { background-position: 58% 50%; }
  .hero-overlay { background: linear-gradient(180deg, rgba(20,20,19,.55) 0%, rgba(20,20,19,.72) 45%, rgba(20,20,19,.9) 100%); }
}

/* ---------- ПОРТФОЛИО: карточки поднимаются волной, фото медленно «отъезжает» (как в кино), подписи следом ---------- */
:root { --bx-soft: cubic-bezier(.16, 1, .3, 1); }
/* карточка «ложится на стол»: из лёгкого наклона и снизу — в ровное положение; фото внутри неподвижно */
.portfolio-grid { perspective: 1400px; }
.portfolio-item-card.reveal {
  opacity: 0;
  transform: translateY(70px) rotateX(16deg) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity 1.1s var(--bx-ease), transform 1.5s var(--bx-soft);
  transition-delay: var(--bx-d, 0ms);
}
.portfolio-item-card.reveal.visible { opacity: 1; transform: none; }
.portfolio-item { overflow: hidden; }
.portfolio-item img { transition: filter .8s var(--bx-ease); }
/* наведение: карточка приподнимается, фото чуть светлеет — без зума */
.portfolio-item-card.visible { transition: opacity 1.1s var(--bx-ease), transform .7s var(--bx-ease), box-shadow .7s var(--bx-ease); }
.portfolio-item-card.visible:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.portfolio-item-card.visible:hover .portfolio-item img { filter: brightness(1.08); }
.portfolio-item-card.reveal .portfolio-caption,
.portfolio-item-card.reveal .portfolio-tag { opacity: 0; translate: 0 14px; transition: opacity .9s var(--bx-ease), translate 1s var(--bx-ease); transition-delay: calc(var(--bx-d, 0ms) + 550ms); }
.portfolio-item-card.visible .portfolio-caption,
.portfolio-item-card.visible .portfolio-tag { opacity: 1; translate: 0 0; }

/* ---------- ЛЕНТА: на всю ширину, кадры узкие вертикальные ---------- */
#portfolio-flow .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
#portfolio-flow .portfolio-slider-wrap {
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
#portfolio-flow .portfolio-slider { gap: clamp(10px, 1vw, 16px); padding: 0 3vw; }
/* компактная лента: примерно вдвое ниже, кадры узкие */
#portfolio-flow { padding-bottom: clamp(40px, 5vw, 72px); }
#portfolio-flow .portfolio-slide {
  flex: 0 0 calc(clamp(230px, 36vh, 380px) * .68);
  height: clamp(230px, 36vh, 380px);
  border-radius: 16px;
}
@media (max-width: 860px) {
  .mobile-slider-inline { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; -webkit-mask-image: none; mask-image: none; }
  .mobile-slider-inline .portfolio-slider { gap: 8px; padding: 0 16px; }
  .mobile-slider-inline .portfolio-slide { flex: 0 0 42vw; height: 32vh; max-height: 280px; min-height: 210px; border-radius: 14px; }
}
/* кадры одинаковой высоты; фото внутри шире кадра — для параллакса «вид из окна» */
.portfolio-slide {
  transition: filter .8s var(--bx-ease);
  box-shadow: 0 34px 60px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.07);
}
.portfolio-slide img { width: 118%; max-width: none; margin-left: -9%; transition: transform .9s var(--bx-ease); will-change: transform; }
.portfolio-slide::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%, transparent 70%, rgba(0,0,0,.18)); }
.portfolio-slider-wrap { will-change: transform; }
#portfolio-flow, #works { overflow-x: clip; }

/* ---------- ИЗДЕЛИЯ: золотая линия прорисовывается ---------- */
.product-card .line { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--bx-ease); transition-delay: calc(var(--bx-d, 0ms) + 350ms); }
.product-card.visible .line { transform: scaleX(1); }
.card { transition: transform .7s var(--bx-ease), box-shadow .7s var(--bx-ease), border-color .5s, opacity 1s var(--bx-ease); }
.product-card:hover { transform: translateY(-8px); }

/* ---------- МАТЕРИАЛЫ: видео ведётся скроллом (камень поворачивается, пока листаешь) ---------- */
.material-sheet.reveal .material-copy > * { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--bx-ease), transform 1.1s var(--bx-ease); }
.material-sheet.reveal.visible .material-copy > * { opacity: 1; transform: none; }
.material-sheet .material-copy > *:nth-child(1) { transition-delay: .35s; }
.material-sheet .material-copy > *:nth-child(2) { transition-delay: .45s; }
.material-sheet .material-copy > *:nth-child(3) { transition-delay: .55s; }
.material-sheet .material-copy > *:nth-child(n+4) { transition-delay: .65s; }
.material-video-wrap { overflow: hidden; }
.material-video { will-change: transform; }

/* ---------- ПРОЦЕСС: линия по скроллу, шаги загораются ---------- */
#process .cards-5 { position: relative; }
.bx-track { position: absolute; left: 0; right: 0; top: -22px; height: 2px; background: rgba(26,26,26,.08); border-radius: 2px; overflow: hidden; }
.bx-track b { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }
#process .card.visible { opacity: .5; }
#process .card.bx-on { opacity: 1; border-color: rgba(199,164,108,.6); box-shadow: 0 22px 60px rgba(199,164,108,.16); transform: translateY(-6px); }
#process .card .step-label { transition: letter-spacing .9s var(--bx-ease); }
#process .card.bx-on .step-label { letter-spacing: .24em; }
@media (max-width: 900px) { .bx-track { display: none; } }

/* ---------- КАЧЕСТВО: текст по словам ---------- */
.bx-sw { opacity: .22; transition: opacity .5s ease; }
.bx-sw.on { opacity: 1; }

/* ---------- лёгкое плёночное зерно ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- прогресс чтения + шапка ---------- */
.bx-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }
.header { transition: transform .6s var(--bx-ease); -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%); box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); }
.header.bx-hide { transform: translateY(-100%); }
.mobile-nav { -webkit-backdrop-filter: blur(24px) saturate(165%); backdrop-filter: blur(24px) saturate(165%); }
.hero-card { border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(255,255,255,.05), 0 30px 70px rgba(0,0,0,.32); }
.btn { transition: transform .5s var(--bx-ease), background .35s, color .35s, border-color .35s; }

@media (prefers-reduced-motion: reduce) {
  .bx-track, .bx-progress { display: none; }
  .reveal, .bx-split .bx-w > span, .material-copy > *, .hero .stats .stat { transition: none !important; transform: none !important; opacity: 1 !important; }
  .hero-bg { animation: none; }
  .bx-sw { opacity: 1; }
}

/* =====================================================================
   ДИЗАЙН-КОРРЕКТУРА (v9) — спокойнее, дороже, приятнее
   ===================================================================== */
:root { --bx-r: 16px; }

/* 1. Типографика: Manrope вместо жирного Montserrat, заголовки меньше и плотнее */
body { font-family: 'Manrope', 'Inter', system-ui, sans-serif; }
h1, h2, h3, .brand, .material-name, .stone-guide-card h3, .stone-guide-cta h3 { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.035em; }
.title-xl { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; max-width: 13ch; }
.title-lg { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.lead { font-size: 17px; line-height: 1.7; }
.eyebrow { font-size: 11px; letter-spacing: .18em; font-weight: 600; }
/* кнопки — обычным регистром, читаются легче */
.btn { text-transform: none; letter-spacing: -0.01em; font-size: 15px; font-weight: 600; padding: 15px 26px; }

/* 2. Скругления одинаковые и меньше */
.card, .portfolio-item, .portfolio-item-card, .material-sheet, .quality-box, .stone-guide-card, .stone-guide-cta, .hero-card { border-radius: var(--bx-r); }
.portfolio-item { border-radius: var(--bx-r) var(--bx-r) 0 0; }

/* 3. Первый экран: меньше элементов, больше фото */
.hero-bg { background-position: 72% 62%; }
.hero-card { display: none; }
.hero-grid { grid-template-columns: 1fr; }
.stats {
  display: flex; flex-wrap: wrap; gap: 10px 28px; max-width: none; margin-top: 40px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
}
.stat { padding: 0; border: 0; background: none; backdrop-filter: none; border-radius: 0; display: flex; align-items: baseline; gap: 8px; }
.stat strong { display: inline; font-size: 16px; font-weight: 600; margin: 0; }
.stat span { font-size: 13px; }
.stat + .stat::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); align-self: center; margin-right: 20px; opacity: .8; }

/* 4. Портфолио: фото чистое, подпись внизу слева, без тяжёлой плашки */
.portfolio-overlay { background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 38%, transparent 60%); }
.portfolio-caption { text-align: left; left: 20px; right: 20px; bottom: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.portfolio-tag { font-weight: 600; letter-spacing: 0; background: rgba(17,17,15,.38); }
.portfolio-item-card { background: transparent; border-color: rgba(255,255,255,.08); }
.portfolio-project-link { min-height: 48px; font-weight: 600; color: rgba(255,255,255,.7); font-size: 13px; }

/* 5. Плавающая кнопка WhatsApp — в фирменном стиле, а не ярко-зелёная */
.floating-wa {
  background: rgba(26,26,26,.86); color: #fff; border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 13px 18px 13px 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px;
}
.floating-wa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 4px rgba(37,211,102,.18); }

/* 6. Воздух: отступы секций чуть компактнее и ровнее */
.section { padding: 88px 0; }

/* 7. Мобайл */
@media (max-width: 860px) {
  .section { padding: 64px 0; }
  .title-xl { font-size: clamp(32px, 9vw, 44px); }
  .hero-bg { background-position: 78% 60%; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 28px; }
  .stat { flex-direction: column; gap: 2px; }
  .stat + .stat::before { display: none; }
  .btn { width: auto; }
  .floating-wa { display: none; }
}

/* =====================================================================
   v10 — своё фото на первом экране + появление карточек «блик на камне»
   ===================================================================== */
.hero-bg { background-position: 66% 60%; }
@media (max-width: 860px) { .hero-bg { background-position: 70% 50%; } }

/* карточка выплывает из лёгкой дымки, по диагонали; фото внутри не двигается */
.portfolio-grid { perspective: none; }
.portfolio-item-card.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.965);
  filter: blur(10px);
  transform-origin: 50% 80%;
  transition: opacity 1.3s var(--bx-ease), transform 1.6s var(--bx-soft), filter 1.3s var(--bx-ease);
  transition-delay: var(--bx-d, 0ms);
}
.portfolio-item-card.reveal.visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .portfolio-item-card.reveal { opacity: 1; transform: none; filter: none; }
  .portfolio-item::after { display: none; }
}

/* =====================================================================
   v11 — резкое фото первого экрана (рамка, без растягивания),
         мягкое появление карточек, плавное наведение, мобайл
   ===================================================================== */

/* ---------- первый экран: фото в вертикальной рамке справа, в родных пропорциях ---------- */
.hero { background: radial-gradient(110% 90% at 82% 45%, #2b2620 0%, #1d1c1a 45%, #161615 100%); }
.hero-overlay { display: none; }
.hero-glow { opacity: .35; }
.hero-bg {
  inset: auto;
  top: 116px; bottom: 56px;
  right: max(16px, calc((100vw - var(--container)) / 2));
  width: min(34vw, 500px);
  border-radius: 18px;
  background-size: cover; background-position: 50% 52%;
  transform: none;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.07);
  animation: bx-hero-in 1.8s var(--bx-ease) both;
}
@keyframes bx-hero-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.hero-grid > :first-child { max-width: min(600px, 50vw); }

/* ---------- карточки: мягкое проявление снизу вверх с растушёванным краем (без шторок и размытия) ---------- */
.portfolio-item-card.reveal {
  opacity: 0; filter: none;
  transform: translateY(40px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, #000 62%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, #000 62%, #000 100%);
  -webkit-mask-size: 100% 260%; mask-size: 100% 260%;
  -webkit-mask-position: 0 0%; mask-position: 0 0%;
  transition: opacity .9s ease, transform 1.8s var(--bx-soft), -webkit-mask-position 1.9s var(--bx-soft), mask-position 1.9s var(--bx-soft);
  transition-delay: var(--bx-d, 0ms);
}
.portfolio-item-card.reveal.visible {
  opacity: 1; transform: none;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
}

/* ---------- наведение: медленно и мягко ---------- */
.portfolio-item img { transition: transform 1.6s var(--bx-soft), filter 1.2s ease !important; }
.portfolio-item:hover img { transform: scale(1.035); }
.portfolio-item-card.visible { transition: opacity .9s ease, transform 1.2s var(--bx-soft), box-shadow 1.2s ease, -webkit-mask-position 1.9s var(--bx-soft), mask-position 1.9s var(--bx-soft); }
.portfolio-item-card.visible:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(0,0,0,.75); }
.portfolio-item-card.visible:hover .portfolio-item img { filter: brightness(1.05); }
.portfolio-overlay { transition: opacity 1.2s ease; }
.portfolio-item:hover .portfolio-overlay { opacity: .8; }

/* ---------- мобайл ---------- */
@media (max-width: 860px) {
  .hero { display: block; min-height: 0; padding-top: 78px; }
  .hero-bg {
    position: relative; display: block; inset: auto;
    width: auto; height: 52vh; max-height: 480px; margin: 14px 16px 0;
    background-size: cover; background-position: 50% 50%; border-radius: 16px;
  }
  .hero-grid { padding: 26px 0 44px; gap: 0; }
  .hero-grid > :first-child { max-width: none; }
  .title-xl { font-size: clamp(30px, 8.6vw, 40px); }
  .lead { font-size: 16px; line-height: 1.65; }
  .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .portfolio-filters::-webkit-scrollbar { display: none; }
  .portfolio-filter { flex: none; }
  .portfolio-item-card.reveal { transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-item-card.reveal { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
  .hero-bg { animation: none; }
}

/* ---------- мобайл: компактнее, без зажатых колонок ---------- */
.bx-more-btn { display: none; }
@media (max-width: 860px) {
  /* заголовок раздела и описание — друг под другом */
  .two-col { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 26px !important; }
  /* изделия — сетка 2 × 4 */
  .cards-4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cards-4 .card { padding: 16px; }
  .cards-4 .card h3 { font-size: 16px; line-height: 1.25; }
  .cards-4 .card p { font-size: 13px; line-height: 1.5; margin-top: 6px; }
  /* этапы — лента со свайпом */
  #process .cards-5 { display: flex !important; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; margin-right: -16px; padding: 0 16px 6px 0; scrollbar-width: none; }
  #process .cards-5::-webkit-scrollbar { display: none; }
  #process .cards-5 > .card { flex: 0 0 44%; scroll-snap-align: start; padding: 16px; }
  #process .cards-5 > .bx-track { display: none; }
  /* преимущества — плотнее */
  .cards-3 { gap: 10px !important; }
  .cards-3 .card { padding: 20px; }
  /* длинные тексты материалов — свёрнуты */
  .material-copy.bx-clamp { max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .bx-more-btn { display: inline-flex; margin-top: 12px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(26,26,26,.15); background: none; font: inherit; font-weight: 600; font-size: 14px; color: inherit; cursor: pointer; }
}

/* цифры первого экрана: аккуратная сетка 2×2 без разделителей (не рвётся при переносе) */
.stats { display: grid !important; grid-template-columns: repeat(2, max-content); gap: 14px 48px !important; }
.stat + .stat::before { display: none !important; }
@media (min-width: 1280px) { .stats { grid-template-columns: repeat(4, max-content); gap: 14px 36px !important; } }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; gap: 14px 16px !important; } }

/* =====================================================================
   v13 — первый экран как раньше: исходное фото сайта (hero.jpg, 2048 px) на весь экран, текст слева
   ===================================================================== */
.hero { background: var(--graphite); }
.hero-bg {
  inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  background-size: cover !important; background-position: 50% 50% !important;
  animation: bx-fade 1.8s ease both !important;
}
.hero-overlay {
  display: block !important;
  background:
    linear-gradient(90deg, rgba(20,20,19,.9) 0%, rgba(20,20,19,.7) 38%, rgba(20,20,19,.3) 70%, rgba(20,20,19,.15) 100%),
    linear-gradient(180deg, rgba(20,20,19,.45) 0%, transparent 25%, transparent 72%, rgba(20,20,19,.7) 100%) !important;
}
.hero-grid > :first-child { max-width: min(640px, 55vw); }
@media (max-width: 860px) {
  .hero { display: flex !important; min-height: 100svh !important; padding-top: 80px !important; align-items: flex-end; }
  .hero-bg { position: absolute !important; display: block !important; background-position: 62% 50% !important; }
  .hero-overlay { background: linear-gradient(180deg, rgba(20,20,19,.35) 0%, rgba(20,20,19,.6) 42%, rgba(20,20,19,.92) 78%) !important; }
  .hero-grid { padding: 0 0 36px; }
  .hero-grid > :first-child { max-width: none; }
}

/* =====================================================================
   v14 — шире текст первого экрана; карточки портфолио движутся в такт скроллу
   ===================================================================== */
.hero-grid > :first-child { max-width: min(860px, 62vw) !important; }
.title-xl { max-width: 17ch; }
.hero .lead { max-width: 640px; }

/* карточки: никаких «появлений по триггеру» — положением управляет скролл (enhance.js) */
.portfolio-item-card.reveal,
.portfolio-item-card.reveal.visible {
  opacity: 1; transform: none; filter: none;
  -webkit-mask-image: none; mask-image: none;
  transition: translate 1.2s var(--bx-soft), box-shadow 1.2s ease !important;
  will-change: transform, opacity;
}
.portfolio-item-card.visible:hover { transform: none; translate: 0 -4px; }
@media (max-width: 860px) { .hero-grid > :first-child { max-width: none !important; } .title-xl { max-width: none; } }

/* =====================================================================
   Телефон / планшет — облегчённый режим (.bx-lite): плавно и без дёрганья
   ===================================================================== */
/* фото первого экрана — на весь экран (снято старое ограничение высоты 480 px) */
@media (max-width: 860px) { .hero-bg { max-height: none !important; } }

.bx-lite body::after { display: none; }                         /* плёночное зерно — только на компьютере */
.bx-lite .header { transform: none !important; transition: none; }  /* шапка не прячется — ничего не прыгает */
.bx-lite .bx-progress { display: none; }
.bx-lite .portfolio-slide { filter: none !important; }
.bx-lite .portfolio-slide img { transform: none !important; }
.bx-lite .portfolio-slider-wrap { transform: none !important; }

/* карточки портфолио: одно мягкое появление вместо привязки к скроллу */
.bx-lite .portfolio-item-card.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1) !important; }
.bx-lite .portfolio-item-card.reveal.visible { opacity: 1; transform: none; }

/* меньше тяжёлых эффектов на телефоне */
.bx-lite .reveal { transition-duration: .8s; }
.bx-lite .header, .bx-lite .mobile-nav { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bx-lite .material-video { transform: none !important; }

/* ---------- телефон: плавный скролл без рывков ---------- */
/* «матовое стекло» на закреплённых элементах пересчитывается на каждом кадре скролла — на телефоне даёт рывки */
.bx-lite .header, .bx-lite .mobile-nav, .bx-lite .mobile-actions, .bx-lite .floating-wa,
.bx-lite .hero-card, .bx-lite .stat, .bx-lite .portfolio-tag, .bx-lite .card {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.bx-lite .header { background: #1c1b19 !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) !important; }
.bx-lite .mobile-nav { background: #1c1b19 !important; }
.bx-lite .mobile-actions { background: #ffffff !important; }
.bx-lite .portfolio-tag { background: rgba(17,17,15,.72) !important; }
/* лишняя «подготовка к анимации» на сотнях элементов нагружает память телефона */
.bx-lite .portfolio-slide, .bx-lite .portfolio-slide img, .bx-lite .portfolio-slider-wrap,
.bx-lite .portfolio-item img, .bx-lite .hero-bg, .bx-lite .material-video, .bx-lite .reveal { will-change: auto !important; }
/* высоты без привязки к прыгающей адресной строке браузера */
@media (max-width: 860px) {
  .mobile-slider-inline .portfolio-slide { height: 32svh; }
}
.bx-lite html, html.bx-lite { scroll-behavior: auto !important; }
.bx-lite body { overscroll-behavior-y: none; }

/* ---------- режим правки на сайте (виден только владельцу) ---------- */
.bx-editable { position: relative; }
.bx-editable::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(199,164,108,0); border-radius: 18px; pointer-events: none; z-index: 30; transition: border-color .3s ease; }
.bx-editable:hover::before { border-color: rgba(199,164,108,.7); }
.bx-edit-btn {
  position: absolute; top: 18px; right: 18px; z-index: 31;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  background: #c7a46c; color: #1a1a1a !important; font: 600 14px/1 'Manrope', 'Inter', sans-serif; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease;
}
.bx-edit-btn span { font-weight: 500; opacity: .75; }
.bx-editable:hover > .bx-edit-btn, .bx-edit-btn:focus { opacity: 1; transform: none; }
#hero.bx-editable > .bx-edit-btn { top: 100px; }
.bx-edit-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3000;
  display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 999px;
  background: rgba(26,26,26,.94); color: #fff; font: 500 13px/1 'Manrope', 'Inter', sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.bx-edit-bar b { padding: 0 10px 0 12px; color: #c7a46c; font-weight: 700; }
.bx-edit-bar a { padding: 9px 13px; border-radius: 999px; color: #fff !important; text-decoration: none; background: rgba(255,255,255,.08); }
.bx-edit-bar a:hover { background: rgba(255,255,255,.16); }
.bx-edit-bar .bx-edit-off { background: transparent; opacity: .65; }
@media (max-width: 860px) {
  .bx-edit-btn { opacity: 1; transform: none; top: 12px; right: 12px; padding: 8px 12px; font-size: 13px; }
  .bx-edit-btn span { display: none; }
  #hero.bx-editable > .bx-edit-btn { top: 92px; }
  .bx-edit-bar { bottom: 96px; max-width: calc(100vw - 24px); overflow-x: auto; }
  .bx-edit-bar a:nth-of-type(2), .bx-edit-bar a:nth-of-type(3) { display: none; }
}

/* =====================================================================
   Конструктор на главной: блок-анонс + окно «Оформить заказ / Посмотреть каталог»
   ===================================================================== */
.bx-konstruktor { overflow: hidden; }
.bx-k-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.bx-k-text .lead { max-width: 520px; }
.bx-k-media { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #111;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.bx-k-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s cubic-bezier(.16,1,.3,1), filter 1s ease; }
.bx-k-media:hover img { transform: scale(1.03); filter: brightness(1.06); }
.bx-k-badge, .bx-k-play { position: absolute; padding: 9px 14px; border-radius: 999px; font: 600 13px/1 'Manrope', 'Inter', sans-serif; }
.bx-k-badge { top: 16px; left: 16px; color: #fff; background: rgba(20,20,19,.55); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bx-k-play { right: 16px; bottom: 16px; color: #1a1a1a; background: #c7a46c; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.bx-k-media:hover .bx-k-play { transform: translateX(-4px); }
@media (max-width: 860px) {
  .bx-k-grid { grid-template-columns: 1fr; gap: 26px; }
  .bx-k-media { order: -1; }
  .bx-lite .bx-k-badge { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,20,19,.75); }
}

/* окно-предложение */
.bx-offer {
  position: fixed; right: 24px; bottom: 24px; z-index: 1500; width: min(380px, calc(100vw - 32px));
  padding: 22px 22px 20px; border-radius: 20px; color: #fff;
  background: linear-gradient(160deg, rgba(38,35,31,.96), rgba(22,22,21,.97));
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 70px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(24px) scale(.98); pointer-events: none;
  transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.bx-offer.is-open { opacity: 1; transform: none; pointer-events: auto; }
.bx-offer-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; font-size: 16px; line-height: 1; }
.bx-offer-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #c7a46c; font-weight: 600; }
.bx-offer-title { margin-top: 10px; font: 600 22px/1.2 'Manrope', 'Inter', sans-serif; letter-spacing: -.02em; padding-right: 28px; }
.bx-offer-text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.7); }
.bx-offer-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.bx-offer-btns a { display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px; text-decoration: none;
  font: 600 14px/1 'Manrope', 'Inter', sans-serif; }
.bx-offer-btns .bx-o-order { background: #c7a46c; color: #1a1a1a; }
.bx-offer-btns .bx-o-catalog { color: #fff; border: 1px solid rgba(255,255,255,.22); }
@media (max-width: 860px) {
  .bx-offer { left: 12px; right: 12px; width: auto; bottom: 92px; }
}
@media (min-width: 861px) { .bx-offer { bottom: 92px; } }