/* ДиМакс — натяжные потолки, Новосибирск */

:root{
  --bg:        #120a24;
  --bg-2:      #180d2e;
  --surf:      #1f1340;
  --surf-2:    #2a1a52;
  --line:      #3a2568;
  --ink:       #f5f1fb;
  --ink-mut:   #b9abd6;
  --pink:      #e5187f;
  --pink-2:    #ff2d92;
  --pink-soft: #ff8fc4;
  --violet:    #8b5cf6;
  --ok:        #34d399;
  --wrap:      1220px;
  --r:         16px;
  --r-sm:      10px;
  --shadow:    0 18px 50px rgba(0,0,0,.45);
  --ease:      cubic-bezier(.22,.7,.28,1);
  --font:      'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; }
button{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.wrap--narrow{ max-width:840px; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:100; background:var(--pink); padding:10px 16px; border-radius:8px; }
:focus-visible{ outline:2px solid var(--pink-soft); outline-offset:3px; }

/* ---------- Появление при прокрутке ----------
   Прятать блоки можно ТОЛЬКО когда скрипт жив и точно их покажет:
   класс js-anim ставится из app.js. Если скрипт не отработал —
   сайт остаётся полностью читаемым. */
.js-anim .reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  will-change:opacity, transform;
}
.js-anim .reveal.is-in{ opacity:1; transform:none; }
.js-anim .reveal[data-delay="1"]{ transition-delay:.08s; }
.js-anim .reveal[data-delay="2"]{ transition-delay:.16s; }
.js-anim .reveal[data-delay="3"]{ transition-delay:.24s; }
.js-anim .reveal[data-delay="4"]{ transition-delay:.32s; }
.js-anim .reveal[data-delay="5"]{ transition-delay:.40s; }

/* ---------- Полоса прогресса ---------- */
.progress{
  position:fixed; inset:0 auto auto 0; z-index:70; height:3px; width:100%;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--pink-2));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---------- Кнопки ---------- */
.btn{
  --bh:52px;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--bh); padding:0 26px; border:0; border-radius:999px;
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-2) 55%,#b3126a 100%);
  color:#fff; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 26px rgba(229,24,127,.32);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  text-align:center;
}
.btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(229,24,127,.5); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(-1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn--lg{ --bh:60px; padding:0 34px; font-size:16px; }
.btn--sm{ --bh:42px; padding:0 20px; font-size:14px; }
.btn--full{ width:100%; }
.btn--ghost{
  background:transparent; box-shadow:none;
  border:1.5px solid rgba(255,143,196,.5); color:var(--ink);
}
.btn--ghost:hover{ background:rgba(255,45,146,.12); border-color:var(--pink-2); box-shadow:none; }

/* ---------- Шапка ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(18,10,36,.72); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s var(--ease), border-color .3s;
}
.hdr.is-small{ background:rgba(18,10,36,.94); border-color:rgba(255,255,255,.12); }
.hdr__in{ display:flex; align-items:center; gap:24px; min-height:74px; }
.hdr__logo img{ height:52px; width:auto; transition:height .3s var(--ease); }
.hdr.is-small .hdr__logo img{ height:42px; }
.hdr__nav{ display:flex; gap:22px; margin-left:auto; font-size:15px; }
.hdr__nav a{
  position:relative; text-decoration:none; color:var(--ink-mut);
  padding:6px 0; transition:color .18s; white-space:nowrap;
}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--violet));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--ease);
}
.hdr__nav a:hover{ color:#fff; }
.hdr__nav a:hover::after,.hdr__nav a.is-active::after{ transform:scaleX(1); }
.hdr__nav a.is-active{ color:#fff; }
.hdr__side{ display:flex; align-items:center; gap:14px; }
.hdr__phone{ font-weight:700; text-decoration:none; white-space:nowrap; font-size:15px; }
.hdr__phone:hover{ color:var(--pink-soft); }

.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:10px; }
.burger span{ display:block; height:2px; background:#fff; margin:5px 0; border-radius:2px; transition:.28s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Главный экран ---------- */
.hero{ position:relative; padding:110px 0 90px; overflow:hidden; min-height:88vh; display:flex; align-items:center; }
.hero__bg{ position:absolute; inset:-10% 0; z-index:0; will-change:transform; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; opacity:.68; }
/* Слева затемняем сильнее — там заголовок. Справа оставляем монтажника видимым. */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(94deg,
      rgba(18,10,36,.99) 0%,  rgba(18,10,36,.98) 34%, rgba(18,10,36,.93) 46%,
      rgba(18,10,36,.62) 58%, rgba(18,10,36,.34) 70%, rgba(18,10,36,.3) 84%,
      rgba(18,10,36,.58) 100%),
    linear-gradient(180deg, rgba(18,10,36,.5) 0%, transparent 20%, transparent 70%, var(--bg) 100%);
}
.blob{
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  filter:blur(90px); opacity:.5;
}
.blob--1{ width:44vw; height:44vw; left:-8vw; top:-10vw; background:rgba(229,24,127,.55); animation:float1 17s ease-in-out infinite; }
.blob--2{ width:38vw; height:38vw; right:-6vw; bottom:-14vw; background:rgba(139,92,246,.5); animation:float2 21s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vw,4vw) scale(1.12);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,-4vw) scale(1.15);} }

.hero__in{ position:relative; z-index:2; }
.hero__city{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-soft);
  background:rgba(229,24,127,.14); border:1px solid rgba(255,143,196,.3);
  padding:7px 16px; border-radius:999px; backdrop-filter:blur(6px);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--pink-2); box-shadow:0 0 0 0 rgba(229,24,127,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(229,24,127,0);} 100%{ box-shadow:0 0 0 0 rgba(229,24,127,0);} }

.hero h1{
  font-size:clamp(34px,6.4vw,72px); font-weight:800; letter-spacing:-.025em;
  text-transform:uppercase; max-width:14ch; margin-bottom:.35em;
}
.hero h1 em{
  font-style:normal; display:block;
  background:linear-gradient(100deg,var(--pink-soft),var(--pink-2) 45%,var(--violet) 90%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 7s linear infinite;
}
@keyframes shine{ to{ background-position:200% center; } }

.hero__lead{ font-size:clamp(16px,2vw,20px); color:var(--ink-mut); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 46px; }

.hero__usp{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:760px;
}
.hero__usp li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm); padding:14px 16px; backdrop-filter:blur(8px);
  transition:transform .25s var(--ease), border-color .25s;
}
.hero__usp li:hover{ transform:translateY(-4px); border-color:var(--pink); }
.hero__usp b{ display:block; font-size:19px; color:#fff; }
.hero__usp span{ font-size:13px; color:var(--ink-mut); }

.hero__scroll{ position:absolute; left:50%; bottom:26px; z-index:2; transform:translateX(-50%); }
.hero__scroll span{
  display:block; width:26px; height:42px; border:2px solid rgba(255,255,255,.3); border-radius:14px; position:relative;
}
.hero__scroll span::after{
  content:''; position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px;
  background:var(--pink-soft); transform:translateX(-50%); animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,16px);} }

/* ---------- Бегущая строка ---------- */
.ticker{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,var(--surf),var(--bg-2));
  padding:14px 0; white-space:nowrap;
}
.ticker__track{ display:inline-flex; gap:0; animation:ticker 38s linear infinite; }
.ticker__track span{
  font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-mut); padding:0 26px; display:inline-flex; align-items:center; gap:26px;
}
.ticker__track span::after{ content:'✦'; color:var(--pink); font-size:11px; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- Секции ---------- */
.sec{ padding:80px 0; }
.sec--tight{ padding:52px 0; }
.sec--alt{ background:var(--bg-2); }
.sec__t{
  font-size:clamp(26px,3.6vw,42px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.015em; margin-bottom:.3em;
}
.sec__t::after{
  content:''; display:block; width:64px; height:4px; border-radius:3px; margin-top:16px;
  background:linear-gradient(90deg,var(--pink),var(--violet));
}
.sec__sub{ color:var(--ink-mut); max-width:60ch; margin-bottom:38px; font-size:16px; }

.grid{ display:grid; gap:20px; }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ---------- Цифры ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.stat{ text-align:center; padding:22px 12px; border-radius:var(--r); border:1px solid var(--line); background:var(--surf); }
.stat b{
  display:block; font-size:clamp(30px,4.4vw,50px); font-weight:800; line-height:1;
  background:linear-gradient(100deg,#fff,var(--pink-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ font-size:13.5px; color:var(--ink-mut); }

/* ---------- Преимущества ---------- */
.feat{
  position:relative; overflow:hidden;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 24px; transition:transform .28s var(--ease), border-color .28s;
}
.feat::before{
  content:''; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--pink),var(--violet));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--ease);
}
.feat:hover{ transform:translateY(-6px); border-color:var(--pink); }
.feat:hover::before{ transform:scaleX(1); }
.feat__ic{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:24px; margin-bottom:16px; color:var(--pink-soft);
  background:rgba(229,24,127,.14); border:1px solid rgba(255,143,196,.28);
  transition:transform .3s var(--ease);
}
.feat:hover .feat__ic{ transform:scale(1.1) rotate(-6deg); }
.feat h3{ font-size:19px; }
.feat p{ color:var(--ink-mut); font-size:15px; margin:0; }

/* ---------- Услуги ---------- */
.svc{
  position:relative; display:flex; flex-direction:column; text-align:left;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:pointer; padding:0; width:100%;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.svc:hover{ transform:translateY(-7px); border-color:var(--pink); box-shadow:var(--shadow); }

/* Фото показывается ЦЕЛИКОМ. Пустоту по бокам заполняет размытая
   копия того же снимка — ничего не обрезается. */
.svc__img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0d0720; }
.svc__bg{
  position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover;
  filter:blur(26px) saturate(1.35) brightness(.5); transform:scale(1.06);
}
.svc__ph{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  transition:transform .55s var(--ease);
}
.svc:hover .svc__ph{ transform:scale(1.05); }
.svc__tag{
  position:absolute; top:12px; left:12px; z-index:3;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(135deg,var(--pink),var(--pink-2)); color:#fff;
  padding:6px 12px; border-radius:999px;
}
.svc__count{
  position:absolute; right:12px; bottom:12px; z-index:3;
  font-size:12px; font-weight:600; color:#fff;
  background:rgba(10,5,20,.7); backdrop-filter:blur(6px);
  padding:5px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
}
.svc__body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.svc__body h3{ font-size:19px; margin-bottom:8px; }
.svc__body p{ color:var(--ink-mut); font-size:14.5px; margin:0 0 16px; flex:1; }
.svc__more{ font-size:14px; font-weight:700; color:var(--pink-soft); }
.svc__more::after{ content:' →'; display:inline-block; transition:transform .28s var(--ease); }
.svc:hover .svc__more::after{ transform:translateX(6px); }

/* ---------- Калькулятор ---------- */
.calc{ display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start; }
.calc__form{ display:grid; gap:18px; min-width:0; }

.fs{
  border:1px solid var(--line); border-radius:var(--r); padding:20px 22px 22px; margin:0;
  background:var(--surf); transition:border-color .25s;
}
.fs:focus-within{ border-color:var(--pink); }
.fs legend{ padding:0 10px; font-weight:700; font-size:15px; color:var(--pink-soft); }
.fs__opt{ font-weight:400; color:var(--ink-mut); }
.fs__note{ font-size:13.5px; color:var(--ink-mut); margin:-4px 0 16px; }

.row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }

.fld{ display:flex; flex-direction:column; gap:7px; font-size:14px; min-width:0; }
.fld > span{ color:var(--ink-mut); font-weight:600; }
.fld input, .fld select, .fld textarea{
  font:inherit; font-size:15px; color:var(--ink); width:100%;
  background:#150c2b; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; transition:border-color .18s, background .18s, box-shadow .18s;
}
.fld textarea{ resize:vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--pink); background:#1a0f33;
  box-shadow:0 0 0 4px rgba(229,24,127,.14);
}
.fld select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b9abd6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.fld select option{ background:#150c2b; color:var(--ink); }

.hint{
  display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:rgba(255,143,196,.2); color:var(--pink-soft); font-style:normal;
  font-size:11px; font-weight:700; cursor:help; vertical-align:middle;
}

.drop{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:center;
  border:2px dashed var(--line); border-radius:var(--r); padding:26px 20px;
  text-align:center; transition:border-color .2s, background .2s;
}
.drop.is-over{ border-color:var(--pink); background:rgba(229,24,127,.08); }
.drop__hint{ font-size:13.5px; color:var(--ink-mut); }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px; margin-top:14px; }
.thumbs:empty{ margin:0; }
.thumb{ position:relative; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb button{
  position:absolute; top:5px; right:5px; width:26px; height:26px; border-radius:50%;
  background:rgba(10,5,20,.8); border:0; color:#fff; cursor:pointer; font-size:13px; line-height:1;
}
.thumb button:hover{ background:var(--pink); }
.thumb__sz{ position:absolute; left:0; right:0; bottom:0; font-size:10.5px; text-align:center;
  background:rgba(10,5,20,.75); padding:3px; color:var(--ink-mut); }

.calc__out{ min-width:0; }
.calc__sticky{
  position:sticky; top:96px;
  background:linear-gradient(160deg,var(--surf-2),var(--surf));
  border:1px solid var(--pink); border-radius:var(--r); padding:26px 24px;
  box-shadow:var(--shadow);
}
.calc__lbl{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mut); margin:0 0 6px; }
.calc__sum{
  font-size:clamp(24px,2.6vw,32px); font-weight:800; margin:0 0 4px; line-height:1.15;
  letter-spacing:-.01em; overflow-wrap:break-word;
  background:linear-gradient(100deg,#fff,var(--pink-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.calc__note{ font-size:13.5px; color:var(--ink-mut); margin:0 0 18px; }
.calc__break{ list-style:none; margin:0 0 20px; padding:0; font-size:14px; border-top:1px solid var(--line); }
.calc__break li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(58,37,104,.5); }
.calc__break li span:first-child{ color:var(--ink-mut); }
.calc__break li b{ white-space:nowrap; }
.calc__break li.is-total{ border-bottom:0; padding-top:12px; font-size:15px; }
.calc__disc{ font-size:12px; color:var(--ink-mut); margin:14px 0 0; line-height:1.45; }

/* ---------- Запись на замер ---------- */
.book{ display:grid; grid-template-columns:1fr 400px; gap:26px; align-items:start; }
.book__cal{ min-width:0; }

.cal{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal__head strong{ font-size:17px; text-transform:capitalize; }
.cal__nav{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:transparent; cursor:pointer; font-size:20px; line-height:1; transition:.2s var(--ease);
}
.cal__nav:hover:not([disabled]){ background:var(--pink); border-color:var(--pink); transform:scale(1.08); }
.cal__nav[disabled]{ opacity:.3; cursor:not-allowed; }
.cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; }
.cal__dow span{ text-align:center; font-size:12px; color:var(--ink-mut); text-transform:uppercase; letter-spacing:.05em; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day{
  aspect-ratio:1; border-radius:var(--r-sm); border:1px solid transparent;
  background:#150c2b; cursor:pointer; font-size:15px; font-weight:600;
  display:grid; place-items:center; position:relative; transition:.18s var(--ease);
}
.day:hover:not([disabled]){ background:var(--surf-2); border-color:var(--pink); transform:scale(1.07); }
.day[disabled]{ opacity:.24; cursor:not-allowed; background:transparent; }
.day.is-empty{ background:none; border:0; cursor:default; }
.day.is-today::after{ content:''; position:absolute; bottom:6px; width:4px; height:4px; border-radius:50%; background:var(--pink-soft); }
.day.is-full{ opacity:.34; cursor:not-allowed; text-decoration:line-through; }
/* Часть времени занята: точка в углу */
.day.is-part::before{
  content:''; position:absolute; top:5px; right:5px;
  width:6px; height:6px; border-radius:50%; background:var(--pink-2);
  box-shadow:0 0 6px rgba(255,45,146,.8);
}
.day.is-part.is-sel::before{ background:#fff; box-shadow:none; }
/* День закрыт: бригада на монтаже */
.day.is-closed{
  cursor:not-allowed; color:var(--ink-mut); opacity:.6;
  background:repeating-linear-gradient(135deg,#150c2b,#150c2b 5px,#241541 5px,#241541 10px);
}
.day.is-sel{ background:linear-gradient(135deg,var(--pink),var(--pink-2)); border-color:var(--pink-2); color:#fff; }
.cal__legend{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-mut); margin:16px 0 0; }
.lg{ width:12px; height:12px; border-radius:4px; display:inline-block; margin-left:8px; }
.lg--free{ background:#150c2b; border:1px solid var(--line); margin-left:0; }
.lg--busy{ background:#150c2b; opacity:.34; border:1px solid var(--line); }
.lg--part{ background:#150c2b; border:1px solid var(--line); position:relative; }
.lg--part::after{
  content:''; position:absolute; top:1px; right:1px;
  width:5px; height:5px; border-radius:50%; background:var(--pink-2);
}
.lg--closed{ background:repeating-linear-gradient(135deg,#150c2b,#150c2b 3px,#241541 3px,#241541 6px); border:1px solid var(--line); }
.lg--sel{ background:linear-gradient(135deg,var(--pink),var(--pink-2)); }

.slots{ margin-top:20px; background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:20px;
  animation:slideIn .4s var(--ease); }
@keyframes slideIn{ from{ opacity:0; transform:translateY(-10px);} }
.slots__t{ font-weight:700; margin:0 0 14px; font-size:15px; }
.slots__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.slot{
  padding:13px 8px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:#150c2b; cursor:pointer; font-weight:700; font-size:15px; transition:.18s var(--ease);
}
.slot:hover:not([disabled]){ border-color:var(--pink); background:var(--surf-2); transform:translateY(-2px); }
.slot[disabled]{ opacity:.3; cursor:not-allowed; text-decoration:line-through; }
.slot.is-sel{ background:linear-gradient(135deg,var(--pink),var(--pink-2)); border-color:var(--pink-2); color:#fff; }

.book__form{
  display:grid; gap:16px; background:var(--surf); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px; position:sticky; top:96px; min-width:0;
}
.book__pick{
  background:#150c2b; border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:13px 16px; font-size:14.5px; color:var(--ink-mut); transition:.25s var(--ease);
}
.book__pick.is-set{ border-style:solid; border-color:var(--pink); color:var(--ink); font-weight:700; }
.chk{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-mut); cursor:pointer; }
.chk input{ margin-top:3px; accent-color:var(--pink); width:17px; height:17px; flex:none; }
.book__msg{ margin:0; font-size:14px; min-height:1px; }
.book__msg.is-ok{ color:var(--ok); }
.book__msg.is-err{ color:#fca5a5; }
.book__alt{ font-size:13px; color:var(--ink-mut); margin:0; text-align:center; }
.book__alt a{ color:var(--pink-soft); }

/* ---------- Галерея работ (масонри, без обрезки) ---------- */
.gal__filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.chip{
  border:1.5px solid var(--line); background:var(--surf); color:var(--ink-mut);
  border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:.22s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--pink); color:#fff; transform:translateY(-2px); }
.chip.is-on{ background:linear-gradient(135deg,var(--pink),var(--pink-2)); border-color:var(--pink-2); color:#fff; }

/* Все плитки одного размера. Снимок вписывается целиком,
   пустоту по бокам закрывает размытая копия — ничего не обрезается. */
.gal{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.gal > button{
  position:relative; display:block; width:100%; padding:0; margin:0; cursor:pointer;
  aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#0d0720;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn{ from{ opacity:0; transform:scale(.94);} }
.gal > button:hover{ border-color:var(--pink); transform:translateY(-4px); box-shadow:var(--shadow); }
.gal__bg{
  position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover;
  filter:blur(24px) saturate(1.3) brightness(.45); transform:scale(1.05);
}
.gal__ph{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  transition:transform .45s var(--ease);
}
.gal > button:hover .gal__ph{ transform:scale(1.04); }
.gal__vid{ position:relative; }
.gal__vid::after{
  content:'▶'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:34px; color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.7);
  background:rgba(10,5,20,.28);
}

.gal__more{ display:flex; justify-content:center; margin-top:26px; }

/* ---------- Цитата ---------- */
.sec--quote{ background:linear-gradient(135deg,#1c0f3a,#2a1152 55%,#3d0f3f); }
.quote{ margin:0; max-width:900px; }
.quote p{ font-size:clamp(20px,3vw,32px); font-weight:700; line-height:1.35; margin-bottom:22px; }
.quote em{ font-style:normal; color:var(--pink-soft); }
.quote footer{ color:var(--ink-mut); font-size:15.5px; max-width:60ch; }
.quote cite{ display:block; margin-top:14px; font-style:normal; font-weight:700; color:var(--ink); }


/* ---------- Отзывы ---------- */
.revs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:38px; }
.revs:empty{ margin:0; }
/* Появляются сами, без наблюдателя прокрутки */
.rev{ animation:popIn .45s var(--ease) both;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; display:flex; flex-direction:column;
  transition:transform .28s var(--ease), border-color .28s;
}
.rev:hover{ transform:translateY(-4px); border-color:var(--pink); }
.rev__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.rev__name{ font-weight:700; font-size:16px; }
.rev__date{ font-size:12.5px; color:var(--ink-mut); white-space:nowrap; }
.rev__stars{ color:var(--pink-2); font-size:15px; letter-spacing:2px; margin-bottom:12px; }
.rev__text{ color:var(--ink-mut); font-size:14.5px; margin:0; white-space:pre-wrap; overflow-wrap:break-word; }
.revs__empty{
  grid-column:1/-1; text-align:center; color:var(--ink-mut);
  border:1px dashed var(--line); border-radius:var(--r); padding:34px 20px;
}

.revadd{
  background:linear-gradient(160deg,var(--surf-2),var(--surf));
  border:1px solid var(--pink); border-radius:var(--r); padding:30px 28px;
  max-width:700px; margin-inline:auto;
}
.revadd h3{ font-size:20px; margin-bottom:4px; }
.revadd__note{ color:var(--ink-mut); font-size:13.5px; margin-bottom:22px; }
.revadd form{ display:grid; gap:16px; }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.stars{ display:flex; gap:6px; }
.star{
  width:44px; height:44px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:#150c2b; cursor:pointer; font-size:20px; line-height:1; color:var(--ink-mut);
  transition:.15s var(--ease);
}
.star:hover{ border-color:var(--pink); transform:translateY(-2px); }
.star.is-on{ background:linear-gradient(135deg,var(--pink),var(--pink-2)); border-color:var(--pink-2); color:#fff; }

@media (max-width:1080px){ .revs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .revs{ grid-template-columns:1fr; }
  .revadd{ padding:22px 18px; }
}

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:10px; }
.faq details{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:0 20px; transition:border-color .25s, background .25s;
}
.faq details[open]{ border-color:var(--pink); background:var(--surf-2); }
.faq summary{
  cursor:pointer; font-weight:700; font-size:16px; padding:18px 30px 18px 0;
  list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:22px; color:var(--pink-soft); font-weight:400; transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.faq p{ color:var(--ink-mut); font-size:15px; margin:0 0 18px; animation:fadeIn .35s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-6px);} }

/* ---------- Контакты ---------- */
.cont{ display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start; }
.cont__main{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:32px; }
.cont__phone{
  display:inline-block; font-size:clamp(26px,4vw,38px); font-weight:800; text-decoration:none;
  background:linear-gradient(100deg,#fff,var(--pink-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;
}
.cont__hours{ color:var(--ink-mut); margin:0 0 4px; }
.cont__city{ color:var(--ink-mut); margin:0 0 22px; }
.cont__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.cont__cta{
  background:linear-gradient(160deg,var(--surf-2),var(--surf));
  border:1px solid var(--pink); border-radius:var(--r); padding:32px;
}
.cont__cta h3{ font-size:21px; }
.cont__cta p{ color:var(--ink-mut); font-size:15px; }

/* ---------- Подвал ---------- */
.ftr{ background:#0c0518; border-top:1px solid var(--line); padding:40px 0; }
.ftr__in{ text-align:center; }
.ftr__logo{ height:52px; width:auto; margin:0 auto 16px; opacity:.85; }
.ftr__c{ font-size:14px; color:var(--ink-mut); margin:0 0 6px; }
.ftr__d{ font-size:12px; color:#7c6fa0; margin:0 0 10px; }
.ftr__admin{ margin:0; font-size:12px; }
.ftr__admin button{
  background:none; border:0; padding:4px 8px; cursor:pointer;
  color:#5d5280; font-size:12px; border-radius:6px; transition:.2s var(--ease);
}
.ftr__admin button:hover{ color:var(--pink-soft); background:rgba(255,255,255,.05); }

/* ---------- Окно входа для сотрудников ---------- */
.modal{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:20px;
  background:rgba(8,4,16,.86); backdrop-filter:blur(8px);
  animation:fadeIn .22s var(--ease);
}
.modal[hidden]{ display:none; }
.modal__box{
  position:relative; width:100%; max-width:400px; text-align:center;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px 30px; box-shadow:var(--shadow);
  animation:popIn .28s var(--ease);
}
.modal__logo{ height:56px; width:auto; margin:0 auto 14px; }
.modal__box h2{ font-size:21px; margin:0 0 4px; }
.modal__sub{ color:var(--ink-mut); font-size:14px; margin:0 0 22px; }
.modal__box form{ display:grid; gap:14px; text-align:left; }
.modal__x{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.07); border:0; cursor:pointer; color:var(--ink-mut);
  font-size:13px; transition:.2s var(--ease);
}
.modal__x:hover{ background:var(--pink); color:#fff; transform:rotate(90deg); }
.msg{ margin:0; font-size:13.5px; min-height:1px; text-align:center; }
.msg.is-ok{ color:var(--ok); }
.msg.is-err{ color:#fca5a5; }
.msg.is-wait{ color:var(--ink-mut); }

/* ---------- Плеер ---------- */
.player{
  position:fixed; left:20px; bottom:20px; z-index:60;
  display:flex; align-items:center; gap:12px;
  background:rgba(31,19,64,.94); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px; padding:9px 14px 9px 9px;
  box-shadow:var(--shadow); max-width:calc(100vw - 40px);
  animation:popIn .4s var(--ease);
}
.player__play,.player__next,.player__close{
  border:0; background:transparent; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; flex:none; transition:.18s var(--ease);
}
.player__play{ width:40px; height:40px; background:linear-gradient(135deg,var(--pink),var(--pink-2)); color:#fff; font-size:14px; }
.player__play:hover{ transform:scale(1.08); }
.player__next{ width:32px; height:32px; color:var(--ink-mut); font-size:14px; }
.player__close{ width:28px; height:28px; color:var(--ink-mut); font-size:12px; }
.player__next:hover,.player__close:hover{ color:#fff; background:rgba(255,255,255,.1); }
.player__meta{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.player__t{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__s{ font-size:11px; color:var(--ink-mut); }
.player__open{
  position:fixed; left:20px; bottom:20px; z-index:59;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:rgba(31,19,64,.94); backdrop-filter:blur(14px); color:var(--pink-soft);
  font-size:20px; cursor:pointer; box-shadow:var(--shadow); transition:.2s var(--ease);
}
.player__open:hover{ color:#fff; border-color:var(--pink); transform:scale(1.08); }
.player__open[hidden],.player[hidden]{ display:none; }

/* ---------- Просмотр фото ---------- */
.lb{
  position:fixed; inset:0; z-index:90; background:rgba(8,4,16,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:56px 20px 20px; backdrop-filter:blur(8px);
  animation:fadeIn .25s var(--ease);
}
.lb[hidden]{ display:none; }
/* Снимок всегда помещается целиком: и широкий, и высокий */
.lb__stage{
  flex:1 1 auto; min-height:0; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.lb__stage img, .lb__stage video{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:8px;
  animation:popIn .35s var(--ease);
}
.lb__cap{ flex:none; margin:14px 0 0; font-size:14px; color:var(--ink-mut); text-align:center; }
.lb__x{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:0; cursor:pointer; font-size:16px; color:#fff;
  transition:.2s var(--ease);
}
.lb__x:hover{ background:var(--pink); transform:rotate(90deg); }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1);
  border:0; cursor:pointer; font-size:28px; color:#fff; line-height:1; transition:.2s var(--ease);
}
.lb__nav:hover{ background:var(--pink); }
.lb__nav--p{ left:16px; }
.lb__nav--n{ right:16px; }

/* ---------- Адаптив ---------- */
@media (max-width:1080px){
  .calc,.book,.cont{ grid-template-columns:1fr; }
  .calc__sticky,.book__form{ position:static; }
  .grid--4,.stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gal{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hdr__nav{
    position:fixed; inset:74px 0 auto; flex-direction:column; gap:0;
    background:rgba(18,10,36,.98); backdrop-filter:blur(14px);
    padding:8px 20px 20px; border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .32s var(--ease); margin:0;
  }
  .hdr__nav.is-open{ transform:translateY(0); }
  .hdr__nav a{ padding:15px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:16px; }
  .burger{ display:block; }
  .hdr__phone{ display:none; }
  .hdr__in{ gap:12px; }
  .hdr__side{ margin-left:auto; }
  .hero{ min-height:auto; }
}
@media (max-width:640px){
  .sec{ padding:56px 0; }
  .hero{ padding:64px 0 72px; }
  .hero__usp{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__cta .btn{ width:100%; }
  .grid--3,.grid--4{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fs{ padding:16px 16px 18px; }
  .cont__main,.cont__cta{ padding:24px 20px; }
  .player{ left:12px; right:12px; bottom:12px; }
  .player__open{ left:12px; bottom:12px; }
  .lb__nav{ width:42px; height:42px; font-size:22px; }
  .hero__scroll{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js-anim .reveal{ opacity:1 !important; transform:none !important; }
}