/* =====================================================================
   САЙТ TWINS STUDIO — стили главной страницы https://twinsstudio.duckdns.org/
   Правьте и сохраняйте (Ctrl+S) в VS Code — файл сразу уходит на сайт.
   Цвета салона — переменные в :root ниже (--lilac, --mint, --coral…).
   Мобильная версия — блоки @media в конце файла.
   ===================================================================== */
:root{--lilac:#9672c2;--lilac-d:#7a55a8;--mint:#2c9c8a;--coral:#e8708a;--ink:#2d2833;--muted:#6f6878;--bg:#fbf9fd;--ring:#eee6f6;--w1:#e7d8f6;--w2:#fbdbe4}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.15;margin:0;color:var(--ink)}h1,h2{font-family:"Playfair Display",Georgia,serif}
.top{position:sticky;top:0;z-index:20;background:#fbf9fdd9;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #eee6f6aa}
.top .wrap{display:flex;align-items:center;gap:20px;height:68px}
/* Полоска прогресса прокрутки под шапкой */
.prog{position:absolute;left:0;bottom:-1px;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#a77fd6,#e8708a,#3fb8a4);pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;text-decoration:none;font-size:15px}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 4px 12px #8a5fb833}
.links{display:flex;gap:22px;margin-left:auto;font-size:15px}.links a{text-decoration:none;color:var(--muted);transition:color .2s}.links a:hover{color:var(--lilac)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 26px;font:700 16px Manrope,system-ui,sans-serif;cursor:pointer;text-decoration:none;color:#fff;background:linear-gradient(135deg,#a77fd6,#8a5fb8);box-shadow:0 8px 22px #8a5fb84d;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px #8a5fb866}
.btn.mint{background:linear-gradient(135deg,#3fb8a4,#2c9c8a);box-shadow:0 8px 22px #2c9c8a4d}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 16px #2d28331a}
.btn.sm{padding:10px 18px;font-size:14px}
/* Переключатель темы в шапке: луна — включить тёмную, солнце — светлую */
.theme{flex:none;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--ring);background:#fff;color:var(--lilac-d);display:grid;place-items:center;cursor:pointer;transition:transform .3s,box-shadow .3s}
.theme:hover{transform:rotate(-18deg) scale(1.07);box-shadow:0 6px 18px #8a5fb833}
.theme svg{width:20px;height:20px;grid-area:1/1;transition:opacity .35s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.theme .sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.hero{position:relative;padding:70px 0 50px;overflow:hidden;isolation:isolate}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;animation:float 14s ease-in-out infinite alternate;z-index:-1}
.b1{width:440px;height:440px;background:#d7b8f2;top:-140px;left:-120px}.b2{width:380px;height:380px;background:#bff0e6;top:40px;right:-90px;animation-delay:-4s}.b3{width:320px;height:320px;background:#ffd3dd;bottom:-140px;left:38%;animation-delay:-8s}
@keyframes float{to{transform:translate(40px,30px) scale(1.12)}}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.tag{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--ring);border-radius:999px;padding:6px 14px;font:700 13px/1.4 Manrope,system-ui,sans-serif;color:var(--lilac-d);margin:0 0 18px}
.tag i{width:8px;height:8px;border-radius:50%;background:#2c9c8a;box-shadow:0 0 0 4px #2c9c8a33;flex:none}
.hero .slogan{font:700 clamp(36px,5.2vw,62px)/1.12 "Playfair Display",Georgia,serif;margin:0;color:var(--ink)}
.seo{columns:2 320px;column-gap:40px;color:var(--muted);font-size:15px}.seo p{margin:0 0 12px;break-inside:avoid}.seo b{color:var(--ink)}
.hero .slogan em{font-style:normal;background:linear-gradient(90deg,#8a5fb8,#e8708a 55%,#2c9c8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:var(--muted);max-width:530px;margin:18px 0 28px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.stats{display:flex;gap:32px;margin-top:36px;flex-wrap:wrap}.stats b{display:block;font:700 28px "Playfair Display",serif;color:var(--lilac-d)}.stats span{font-size:13px;color:var(--muted)}
.art{position:relative;justify-self:center}
/* Логотип без белой подложки: мягкое сияние за рисунком, сам рисунок слегка покачивается */
.art .circle{width:min(430px,82vw);aspect-ratio:1;border-radius:46% 54% 52% 48%/50% 44% 56% 50%;background:radial-gradient(closest-side,#ffffffd9 40%,#ffffff00);display:grid;place-items:center;animation:morph 12s ease-in-out infinite alternate}
/* Анимация логотипа: появление с пружинкой → плавное покачивание; блик пробегает по рисунку
   (маска — сам логотип); наклон в 3D за мышью и россыпь блёсток по нажатию (скрипт — app.js) */
.logo3d{position:relative;width:92%;cursor:pointer;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ls,1));transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.logo3d:hover{--ls:1.04}
.logoin{position:relative;filter:drop-shadow(0 18px 30px #8a5fb833);animation:logoIn 1.3s cubic-bezier(.3,1.4,.5,1) both,bob 7s ease-in-out 1.3s infinite alternate}
.logoin img{display:block;width:100%;height:auto}
/* «Живой» логотип — слои одного рисунка (проценты — доли картинки 514×415):
   основа — всё, кроме волос и букв (отверстия в маске по правилу evenodd) */
.lg-base{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,
  7% 0,73% 0,73% 47%,58% 48%,50% 44%,47.5% 30%,36% 27%,28% 24%,24% 19%,18% 16.5%,12% 18%,8% 22%,5% 15%,7% 0,0 0,
  41.3% 52.5%,95.5% 52.5%,95.5% 71.2%,41.3% 71.2%,41.3% 52.5%,0 0,
  28.6% 72.8%,95.6% 72.8%,95.6% 90.8%,28.6% 90.8%,28.6% 72.8%,0 0)}
/* волосы: шевелятся от «ветра» (SVG-фильтр #wind) и чуть переливаются цветом */
.lg-hairw{position:absolute;inset:0;animation:hairHue 10s ease-in-out infinite alternate}
.lg-hair{position:absolute;inset:0;filter:url(#wind);clip-path:polygon(7% 0,73% 0,73% 47%,58% 48%,50% 44%,47.5% 30%,36% 27%,28% 24%,24% 19%,18% 16.5%,12% 18%,8% 22%,5% 15%)}
@keyframes hairHue{to{filter:hue-rotate(-12deg) saturate(1.1)}}
/* буквы TWINS STUDIO: каждая — свой кусочек рисунка, прыгают по очереди волной раз в несколько секунд */
.lg-lt{position:absolute;inset:0;clip-path:inset(var(--y1) calc(100% - var(--x2)) calc(100% - var(--y2)) var(--x1));
  transform-origin:calc((var(--x1) + var(--x2)) / 2) var(--y2);animation:hop 7s cubic-bezier(.3,1.5,.5,1) calc(2.2s + var(--i) * .09s) infinite}
.logoin.jump .lg-lt{animation:hop .9s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .06s) 1}
@keyframes hop{0%,14%,100%{transform:none}4%{transform:translateY(-7%) rotate(-5deg) scale(1.06)}8%{transform:translateY(1%) scale(1.08,.92)}11%{transform:translateY(-1.5%)}}
.logoin.jump .lg-lt{animation-name:hopNow}
@keyframes hopNow{0%,100%{transform:none}30%{transform:translateY(-9%) rotate(-6deg) scale(1.08)}60%{transform:translateY(1%) scale(1.1,.9)}80%{transform:translateY(-2%)}}
/* девушка целиком (основа + волосы + блёстки): раз в несколько секунд кокетливо наклоняет голову,
   пританцовывает и возвращается в исходное положение (класс .move ставит app.js, ветер в волосах усиливается) */
.lg-girl{display:block;position:relative;transform-origin:24% 78%}
.lg-girl.move{animation:girlMove 2.8s cubic-bezier(.45,0,.3,1) 1}
@keyframes girlMove{0%{transform:none}16%{transform:rotate(-6deg) translate(-1%,-1.5%)}34%{transform:rotate(3.5deg) translate(1%,-.5%)}52%{transform:rotate(-3deg) translate(-.5%,-1%)}70%{transform:rotate(1.5deg)}86%{transform:rotate(-.5deg)}100%{transform:none}}
/* блёстки на ногтях — «свежий маникюр» */
.lg-nails{position:absolute;inset:0;pointer-events:none}
.lg-nails i{position:absolute;width:5.5%;aspect-ratio:1;margin:-2.75% 0 0 -2.75%;background:url(/site/sparkle.svg) center/contain no-repeat;opacity:0;animation:nail 4.2s ease-in-out calc(1.8s + var(--d)) infinite}
@keyframes nail{0%,100%{opacity:0;transform:scale(.2) rotate(0)}8%{opacity:1;transform:scale(1.15) rotate(45deg)}16%{opacity:0;transform:scale(.3) rotate(90deg)}}
/* лепестки, которые ветер срывает с волос (скрипт — app.js) */
.lg-wind{position:absolute;width:5%;aspect-ratio:1;pointer-events:none;background:center/contain no-repeat;animation:windfly var(--t,3.2s) ease-in forwards}
@keyframes windfly{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){.lg-hair{filter:none}}
.shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(/site/logo-clear.png) center/100% 100% no-repeat;mask:url(/site/logo-clear.png) center/100% 100% no-repeat;
  background:linear-gradient(105deg,#fff0 38%,#ffffffd9 48%,#fff6dd 51%,#fff0 60%);background-size:260% 100%;background-position:120% 0;animation:shine 5.5s ease-in-out 1.6s infinite}
@keyframes logoIn{0%{opacity:0;transform:scale(.55) rotate(-10deg);filter:blur(12px)}60%{opacity:1;transform:scale(1.07) rotate(2deg);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes shine{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
/* Блёстки и лепестки, разлетающиеся по нажатию на логотип */
.burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.burst i{position:absolute;left:0;top:0;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px)/-2);background:center/contain no-repeat;animation:fly 1.1s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fly{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r));opacity:0}}
@keyframes morph{to{border-radius:56% 44% 46% 54%/44% 56% 44% 56%}}
.chip{position:absolute;background:#fffffff2;border-radius:16px;padding:10px 14px;font-size:14px;font-weight:800;box-shadow:0 10px 30px #2d283324;animation:bob 5s ease-in-out infinite alternate;white-space:nowrap}
.chip small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.c1{top:8%;left:-6%}.c2{bottom:-4%;right:-6%;animation-delay:-2s}.c3{bottom:-2%;left:4%;animation-delay:-3.5s}
@keyframes bob{to{transform:translateY(-12px)}}
section.block{padding:60px 0}
.head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.head h2{font-size:clamp(30px,3.6vw,42px)}.head p{color:var(--muted);margin:8px 0 0;max-width:560px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat,.card,.master,.step,.rev,.info,.extra section{background:#fff;border-radius:24px;box-shadow:0 6px 24px #8a5fb814;border:1px solid #f1ebf7}
.feat{padding:24px}.feat .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.feat h3{font-size:17px;margin-bottom:6px}.feat p{margin:0;color:var(--muted);font-size:14px}
.cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.cat{border:1px solid var(--ring);background:#fff;border-radius:999px;padding:9px 18px;font:700 14px Manrope,sans-serif;cursor:pointer;color:var(--ink);transition:all .2s}
.cat:hover{border-color:#cdb6ea}.cat.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}
.card{overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover,.master:hover{transform:translateY(-4px);box-shadow:0 18px 44px #8a5fb829}
.card .ph{height:190px;background:linear-gradient(135deg,#ebddf6,#fbe7ec 55%,#d9f4ee);position:relative;display:grid;place-items:center;font-size:44px}
.card .ph img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;background:var(--coral);color:#fff;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.card h3{font-size:17px}.meta{color:var(--muted);font-size:13px}
.price{font-weight:800;font-size:20px;color:var(--mint);margin:6px 0 12px}.price s{color:#a39dab;font-weight:500;font-size:14px;margin-left:8px}
.card .btn{margin-top:auto}
.masters{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.master{padding:26px 22px;text-align:center;transition:transform .25s,box-shadow .25s}
.ava{width:116px;height:116px;border-radius:50%;margin:0 auto 14px;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 3px #d7b8f2}
.ava.ini{display:grid;place-items:center;font:700 36px "Playfair Display",serif;color:#fff;background:linear-gradient(135deg,#b58be0,#7fd9c8)}
.master h3{font-size:18px}.stars{color:#e99a1b;font-weight:800;margin-top:6px}
.away{display:inline-block;margin-top:10px;background:#fff1e0;color:#a85d00;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s;margin-top:34px}
.step{padding:40px 28px 28px;position:relative}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#a77fd6,#e8708a);color:#fff;font-weight:800;font-size:18px;display:grid;place-items:center;box-shadow:0 8px 18px #e8708a55}
.step h3{font-size:18px;margin-bottom:6px}.step p{margin:0;color:var(--muted)}
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.rev{padding:24px}.rev p{margin:12px 0;font-size:15px}.rev .who{font-weight:800}.rev .meta{margin-top:2px}
.app{background:linear-gradient(135deg,#2d2440,#3b2c4e 50%,#1f3b37);color:#fff;border-radius:34px;padding:48px;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;position:relative;overflow:hidden}
.app:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#9672c2;filter:blur(90px);opacity:.35;right:-120px;top:-160px}
.app h2{font-size:clamp(30px,3.6vw,42px);color:#fff}.app p{color:#d9d2e4;font-size:17px}.app ul{padding-left:20px;color:#e9e3f1}
.stores{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1}
.store{display:flex;gap:12px;align-items:center;background:#ffffff14;border:1px solid #ffffff2e;border-radius:18px;padding:15px;color:#fff;text-decoration:none;transition:background .2s,transform .2s}
.store:hover{background:#ffffff26;transform:translateY(-2px)}.store svg{width:30px;height:30px;flex:none}
.store b{display:block;font-size:15px}.store span{font-size:12px;color:#cfc6dc}
.howto{grid-column:1/-1;background:#ffffff0f;border:1px dashed #ffffff3d;border-radius:18px;padding:16px 18px;font-size:14px;color:#e9e3f1}.howto h3{color:#fff;font:800 15px Manrope,system-ui,sans-serif;margin:0 0 8px}.howto ol{margin:0;padding-left:20px}.howto li{margin:5px 0}.howto b{color:#fff}.howto p{margin:10px 0 0;font-size:13px;color:#cfc6dc}
.dlnote{font-size:13px;color:var(--muted);margin:-2px 4px 10px;line-height:1.45}
.contacts{display:grid;grid-template-columns:1fr 1.35fr;gap:20px}
.info{padding:28px}.info div{margin-bottom:18px}.info small{display:block;color:var(--muted);font-size:13px;margin-bottom:2px}.info b{font-size:17px}
.map{border-radius:24px;overflow:hidden;min-height:360px;box-shadow:0 6px 24px #8a5fb814}.map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
/* Заглушка карты: карта Яндекса (со своими cookie) грузится только по нажатию */
.mapph{min-height:360px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:linear-gradient(135deg,#ebddf6,#fbe7ec 55%,#d9f4ee);color:var(--muted)}
.mapph svg{width:48px;height:48px;color:var(--lilac)}.mapph p{margin:0;max-width:340px;font-size:14px}
[data-theme=dark] .mapph{background:linear-gradient(135deg,#2e2340,#3a2634 55%,#1c3631)}
footer .req{font-size:12px;margin-top:6px;opacity:.85}
.extra section{padding:24px 28px;margin:18px 0}.extra h2{font-size:26px;margin-bottom:8px}
footer{padding:40px 0 100px;color:var(--muted);font-size:14px;border-top:1px solid var(--ring);margin-top:30px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fab{display:none}
dialog{border:0;border-radius:26px;padding:28px;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px #2d283355}
dialog::backdrop{background:#2d283373;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog h2{font-size:26px;margin-bottom:6px}.dl{display:flex;gap:12px;align-items:center;margin:9px 0;padding:13px 15px;border-radius:16px;background:#f5f0fa;color:var(--ink);text-decoration:none;font-weight:800;transition:background .2s}
.dl:hover{background:#ebe1f6}.dl svg{width:26px;height:26px;flex:none}.dl span{display:block;font-weight:500;font-size:13px;color:var(--muted)}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.js .reveal.in{opacity:1;transform:none}

/* ---------- Параллакс ----------
   Элементы с data-depth сдвигаются при прокрутке (больше число — быстрее, минус — в обратную сторону),
   с data-mouse — ещё и за курсором мыши (только в шапке, только на компьютере). Скрипт — в app.js.
   Сдвиг задаётся свойством translate, поэтому не мешает анимациям transform/rotate. */
[data-depth]{will-change:translate}
.pl{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(#000 45%,transparent 88%) no-repeat;mask:linear-gradient(#000 45%,transparent 88%) no-repeat}
.deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.deco img{position:absolute;height:auto;filter:drop-shadow(0 6px 10px #8a5fb82e);animation:sway 9s ease-in-out infinite alternate}
@keyframes sway{from{rotate:-16deg}to{rotate:18deg}}
/* Слой на всю страницу: пятна и лепестки за разделами. .pf — точка на странице, элемент внутри
   центрируется на ней (transform) и плывёт при прокрутке (translate от параллакса) */
body{position:relative}
.pagefx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pf{position:absolute;width:0;height:0}
.pf>*{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.fxblob{border-radius:50%;filter:blur(70px);opacity:.55}
.pf img{height:auto;opacity:.75;filter:drop-shadow(0 6px 10px #8a5fb82e);animation:sway 10s ease-in-out infinite alternate}

/* ---------- Необычное появление блоков при прокрутке ----------
   У раздела атрибут data-fx — свой эффект; карточки внутри появляются волной (задержка --i ставится скриптом).
   Заголовки разделов «выезжают» из-под маски. После появления задержка снимается (.done), чтобы наведение было мгновенным. */
.js [data-fx] .reveal{transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1),filter 1s ease,clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.js [data-fx] .reveal.in:not(.done){transition-delay:calc(var(--i,0)*90ms)}
.js .head.reveal{opacity:1;transform:none}
.js .head.reveal .kicker{opacity:0;translate:0 14px;transition:opacity .6s ease,translate .6s ease}
.js .head.reveal h2{clip-path:inset(0 0 100% 0);translate:0 36px;transition:clip-path .9s cubic-bezier(.7,0,.2,1) .1s,translate .9s cubic-bezier(.2,.8,.2,1) .1s}
.js .head.reveal p,.js .head.reveal .btn{opacity:0;transition:opacity .8s ease .35s}
.js .head.reveal.in .kicker,.js .head.reveal.in p,.js .head.reveal.in .btn{opacity:1;translate:none}
.js .head.reveal.in h2{clip-path:inset(0 0 -10% 0);translate:none}
/* flip — карточки поднимаются с 3D-поворотом */
.js [data-fx="flip"] .reveal:not(.head){transform:perspective(900px) rotateX(38deg) translateY(60px) scale(.94);transform-origin:50% 100%}
/* zoom — проявляются из размытия */
.js [data-fx="zoom"] .reveal:not(.head){transform:scale(.8);filter:blur(12px)}
/* pop — «выпрыгивают» с лёгким поворотом */
.js [data-fx="pop"] .reveal:not(.head){transform:scale(.6) rotate(-7deg);transition-timing-function:ease,cubic-bezier(.34,1.56,.64,1),ease,ease}
/* side — прилетают поочерёдно слева и справа */
.js [data-fx="side"] .reveal:not(.head){transform:translateX(-90px) rotate(-4deg)}
.js [data-fx="side"] .reveal:not(.head):nth-child(even){transform:translateX(90px) rotate(4deg)}
/* curtain — раскрываются шторкой слева направо */
.js [data-fx="curtain"] .reveal:not(.head){opacity:1;transform:none;clip-path:inset(0 100% 0 0 round 34px)}
/* blur — из тумана */
.js [data-fx="blur"] .reveal:not(.head){transform:translateY(24px);filter:blur(16px)}
.js [data-fx] .reveal.in:not(.head){opacity:1;transform:none;filter:none}
.js [data-fx="curtain"] .reveal.in:not(.head){clip-path:inset(0 0 0 0 round 0)}
/* После появления — обычная быстрая реакция на наведение (подъём карточки).
   Обрезку (clip-path) снимаем, иначе отрезаются номера шагов, значки и тени, выходящие за край карточки. */
.js [data-fx] .reveal.done:not(.head){transition:transform .3s ease,box-shadow .3s ease;clip-path:none}
.js [data-fx] .card.reveal.done:hover,.js [data-fx] .master.reveal.done:hover{transform:translateY(-4px)}

/* Полоса «Красота в деталях»: небо, три слоя волн, парящие лепестки, текст */
.pxband{position:relative;overflow:hidden;isolation:isolate;min-height:460px;display:grid;place-items:center;text-align:center;margin:30px 0 0}
.pxsky{position:absolute;inset:-35% 0;z-index:-3;background:radial-gradient(60% 60% at 18% 30%,#e3cdf6 0,#e3cdf600 70%),radial-gradient(50% 55% at 82% 26%,#ffd6e1 0,#ffd6e100 70%),radial-gradient(55% 60% at 60% 80%,#cdf1e9 0,#cdf1e900 70%),#f6f0fb}
.pxw{position:absolute;left:-4%;width:108%;max-width:none;height:308px;z-index:-2;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
/* форма волны — из svg (маска), цвет — из переменных, поэтому волны перекрашиваются вместе с темой */
.w1{--m:url(/site/wave-back.svg);background:var(--w1)}.w2{--m:url(/site/wave-mid.svg);background:var(--w2)}.w3{--m:url(/site/wave-front.svg);background:var(--bg)}
/* волны нарисованы с запасом вниз: при сдвиге параллакса под ними не появляется щель */
.w1{bottom:-38px}.w2{bottom:-86px}.w3{bottom:-127px;height:277px}
.pxband .deco{z-index:-1}
.pxtext{position:relative;z-index:1;max-width:660px;padding:80px 22px 150px}
.pxtext h2{font-size:clamp(36px,4.8vw,58px)}
.pxtext p{color:var(--muted);font-size:18px;margin:14px auto 26px;max-width:520px}
/* ---------- Значки категорий (когда у услуги/товара нет фото) ---------- */
.ph.noph .i{width:76px;height:76px;color:var(--lilac);filter:drop-shadow(0 6px 12px #8a5fb833);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.card:hover .ph.noph .i{transform:scale(1.12) rotate(-6deg)}
.cat .ci{width:17px;height:17px;vertical-align:-3px;margin-right:6px;color:var(--lilac)}
.cat.on .ci{color:#fff}

/* ---------- Бегущая строка ---------- */
.marq{position:relative;z-index:2;overflow:hidden;width:104%;margin:6px -2% 0;transform:rotate(-1.6deg);background:linear-gradient(90deg,#a77fd6,#e8708a 50%,#3fb8a4);color:#fff;padding:15px 0;box-shadow:0 12px 30px #8a5fb833}
.mt{display:flex;align-items:center;width:max-content;animation:marq 40s linear infinite}
.mt span{font:700 clamp(18px,2.2vw,26px)/1 "Playfair Display",Georgia,serif;padding:0 22px;white-space:nowrap}
.mt i{font-style:normal;opacity:.8;font-size:15px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Наши работы: сетка + просмотр на весь экран ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:14px}
@media(max-width:920px){.gal{grid-template-columns:repeat(3,1fr)}}
.wk{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:1;cursor:zoom-in;background:#ebddf6;box-shadow:0 6px 24px #8a5fb814}
.wk:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.wk img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wk:hover img{transform:scale(1.08)}
.wk figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;color:#fff;font-size:13px;background:linear-gradient(#0000,#000a);transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wk:hover figcaption,.wk:focus-within figcaption{transform:none}
.wk figcaption b{display:block;font-size:15px}.wk figcaption span{opacity:.85}
.wk.hid{display:none}
.lb{max-width:none;width:100vw;height:100vh;max-height:none;margin:0;padding:0;border-radius:0;background:#120e18f2;display:none;place-items:center;box-shadow:none}
.lb[open]{display:grid}
.lb img{max-width:min(92vw,1100px);max-height:82vh;border-radius:18px;box-shadow:0 30px 80px #000a;animation:lbin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes lbin{from{opacity:0;transform:scale(.92)}}
.lbc{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#eee;margin:0;font-size:15px}
.lb button{position:absolute;border:0;background:#ffffff1f;color:#fff;width:52px;height:52px;border-radius:50%;font-size:30px;line-height:1;cursor:pointer;transition:background .2s}
.lb button:hover{background:#ffffff38}
.lbx{top:18px;right:18px;font-size:20px!important}.lbp{left:18px;top:50%;margin-top:-26px}.lbn{right:18px;top:50%;margin-top:-26px}

/* ---------- Мастер: карточка переворачивается (мышь — наведение, палец — нажатие) ---------- */
.master.flip{background:none;border:0;box-shadow:none;padding:0;perspective:1100px;outline:none}
.master.flip:hover{box-shadow:none}
.fl{display:grid;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.5,1)}
.fc{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;border-radius:24px;box-shadow:0 6px 24px #8a5fb814;border:1px solid #f1ebf7;padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
.fc.back{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,#f6eefd);justify-content:flex-start}
.fc.back .btn{margin-top:auto}
@media(hover:hover){.master.flip:hover .fl{transform:rotateY(180deg)}}
.master.flip.on .fl{transform:rotateY(180deg)}
.hint{font-size:12px;font-weight:800;color:var(--lilac);margin-top:12px;letter-spacing:.04em}
.bio{font-size:14px;color:var(--muted);margin:10px 0 12px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.mw{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;margin-bottom:10px}
.mw img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.msv{margin-bottom:12px}

/* ---------- Частые вопросы ---------- */
.faq{display:grid;gap:12px;max-width:860px}
.qa{background:#fff;border:1px solid #f1ebf7;border-radius:20px;box-shadow:0 6px 24px #8a5fb814;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:20px 60px 20px 24px;font-weight:800;font-size:17px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:absolute;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#f3ecfa;transition:transform .4s,background .3s}
.qa summary i:before,.qa summary i:after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;border-radius:2px;background:var(--lilac-d)}
.qa summary i:after{transform:rotate(90deg);transition:transform .4s}
.qa[open] summary i{transform:rotate(180deg);background:var(--lilac)}
.qa[open] summary i:before,.qa[open] summary i:after{background:#fff}
.qa[open] summary i:after{transform:rotate(0)}
.ans{overflow:hidden}
.ans p{margin:0;padding:0 24px 22px;color:var(--muted)}

/* ---------- Фотографии в разделах (лежат на нашем сервере: server/site/img) ---------- */
.photo-strip{position:relative;height:clamp(190px,26vw,320px);border-radius:28px;overflow:hidden;margin:0 0 22px;box-shadow:0 14px 40px #8a5fb829}
.photo-strip img{position:absolute;left:0;top:-14%;width:100%;height:128%;max-width:none;object-fit:cover}
.photo-strip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2d244099,#2d244000 60%)}
.ps-cap{position:absolute;left:28px;bottom:24px;z-index:1;color:#fff;font:700 clamp(20px,2.6vw,32px)/1.15 "Playfair Display",Georgia,serif;max-width:60%;text-shadow:0 2px 14px #0005}
.pxphoto{position:absolute;margin:0;width:clamp(120px,13vw,190px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:0 20px 50px #8a5fb84d;rotate:var(--rot,0deg);z-index:0;animation:floaty 7s ease-in-out infinite alternate}
.pxphoto.sm{width:clamp(96px,10vw,140px);animation-delay:-3s}
.pxphoto img{width:100%;height:100%;object-fit:cover}
@keyframes floaty{to{transform:translateY(-12px)}}
.faqwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.faqpic{position:sticky;top:96px;height:460px;border-radius:28px;overflow:hidden;box-shadow:0 14px 40px #8a5fb829}
.faqpic img{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;object-fit:cover}
[data-theme=dark] .pxphoto{border-color:#2a2235;box-shadow:0 20px 50px #0008}
[data-theme=dark] .photo-strip,[data-theme=dark] .faqpic{box-shadow:0 14px 40px #0007}
@media(max-width:920px){.pxphoto{display:none}.faqwrap{grid-template-columns:1fr}.faqpic{position:relative;top:0;height:240px;order:-1}}
@media(max-width:560px){.ps-cap{left:18px;bottom:16px;max-width:80%}.photo-strip{border-radius:20px}}

/* ---------- Кнопка «Наверх» ---------- */
.totop{position:fixed;right:20px;bottom:24px;z-index:25;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#a77fd6,#8a5fb8);box-shadow:0 10px 26px #8a5fb866;display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.totop svg{width:22px;height:22px}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}

/* ---------- Тёмная тема ----------
   Включается кнопкой в шапке (атрибут data-theme="dark" у <html>, скрипт — в app.js).
   Основные цвета — переменные; ниже — то, что в светлой теме задано белым. */
html[data-theme=dark]{color-scheme:dark;--ink:#f2edf7;--muted:#b4abc0;--bg:#16121c;--ring:#362c41;--lilac-d:#c6a6ee;--w1:#2c2240;--w2:#3a2434}
[data-theme=dark] .top{background:#16121cd9;border-bottom-color:#362c41aa}
[data-theme=dark] .theme{background:#221c2a;color:#ffd27a}
[data-theme=dark] .theme:hover{box-shadow:0 6px 18px #ffd27a33}
[data-theme=dark] .theme .moon{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme=dark] .theme .sun{opacity:1;transform:none}
[data-theme=dark] .btn.ghost{background:#2a2333;color:var(--ink);box-shadow:0 4px 16px #0006}
[data-theme=dark] .tag{background:#221c2a}
[data-theme=dark] .blob{opacity:.32}[data-theme=dark] .b1{background:#7b4fb0}[data-theme=dark] .b2{background:#1f8f7c}[data-theme=dark] .b3{background:#b4476a}
[data-theme=dark] .fxblob{opacity:.16}
/* логотип — чёрная линия: в тёмной теме за ним светлое сияние, чтобы рисунок читался */
[data-theme=dark] .art .circle{background:#efe6f8;box-shadow:0 0 0 10px #efe6f814,0 0 90px #b58be055}
[data-theme=dark] .logo3d{width:84%}
[data-theme=dark] .logoin{filter:drop-shadow(0 18px 30px #0006)}
[data-theme=dark] .fc{background:#211b29;border-color:#2f2739;box-shadow:0 6px 24px #0005}
[data-theme=dark] .fc.back{background:linear-gradient(160deg,#241d2e,#2c2238)}
[data-theme=dark] .qa{background:#211b29;border-color:#2f2739;box-shadow:0 6px 24px #0005}
[data-theme=dark] .qa summary i{background:#33294a}
[data-theme=dark] .wk{background:#2a2235;box-shadow:0 6px 24px #0005}
[data-theme=dark] .marq{box-shadow:0 12px 30px #0007}
/* тёмная карта: инвертируем светлую карту Яндекса и возвращаем цвета поворотом оттенка */
[data-theme=dark] .map iframe{filter:invert(.92) hue-rotate(180deg) saturate(.8) brightness(.95)}
[data-theme=dark] .chip{background:#241d2cf2;box-shadow:0 10px 30px #0008}
[data-theme=dark] .feat,[data-theme=dark] .card,[data-theme=dark] .master,[data-theme=dark] .step,[data-theme=dark] .rev,[data-theme=dark] .info,[data-theme=dark] .extra section{background:#211b29;border-color:#2f2739;box-shadow:0 6px 24px #0005}
[data-theme=dark] .card:hover,[data-theme=dark] .master:hover{box-shadow:0 18px 44px #0008}
[data-theme=dark] .feat .ic{background:#ffffff10!important}
[data-theme=dark] .cat{background:#211b29}
[data-theme=dark] .cat:hover{border-color:#5b4675}
[data-theme=dark] .cat.on{background:var(--ink);color:#16121c;border-color:var(--ink)}
[data-theme=dark] .card .ph{background:linear-gradient(135deg,#382a49,#45303c 55%,#203d38)}
[data-theme=dark] .price{color:#4fcbb6}
[data-theme=dark] .price s{color:#857d90}
[data-theme=dark] .ava{border-color:#211b29;box-shadow:0 0 0 3px #6d4f93}
[data-theme=dark] .away{background:#3d2a14;color:#ffbe73}
[data-theme=dark] .step:before{box-shadow:0 8px 18px #0007}
[data-theme=dark] .app{background:linear-gradient(135deg,#241c32,#2e2240 50%,#16302b);box-shadow:inset 0 0 0 1px #3a2f48}
[data-theme=dark] .map{box-shadow:0 6px 24px #0005}
[data-theme=dark] .pxsky{background:radial-gradient(60% 60% at 18% 30%,#3a2a52 0,#3a2a5200 70%),radial-gradient(50% 55% at 82% 26%,#4a2638 0,#4a263800 70%),radial-gradient(55% 60% at 60% 80%,#173a35 0,#173a3500 70%),#1c1724}
[data-theme=dark] dialog{background:#211b29;color:var(--ink)}
[data-theme=dark] dialog::backdrop{background:#000a}
[data-theme=dark] .dl{background:#2c2436}[data-theme=dark] .dl:hover{background:#372d43}
[data-theme=dark] .dl svg[fill="#2d2833"]{fill:var(--ink)}[data-theme=dark] .dl svg[stroke="#2d2833"]{stroke:var(--ink)}
[data-theme=dark] #ck{background:#241d2c!important;color:var(--ink)!important;box-shadow:0 10px 40px #000a!important}
/* Смена темы — круг расходится от кнопки (там, где браузер умеет View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

@media(max-width:920px){.hero .wrap,.app,.contacts{grid-template-columns:1fr}.why{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr;gap:30px}.links{display:none}.theme{margin-left:auto}.top .wrap>.btn{margin-left:0}.c1{left:0}.c2{right:0}.hero{padding-top:40px}}
@media(max-width:560px){.why,.stores{grid-template-columns:1fr}.app{padding:30px 22px}.top .wrap>.btn{display:none}.fab{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:30}.stats{gap:22px}.chip{font-size:12px}}
@media(max-width:560px){.gal{grid-template-columns:1fr 1fr;gap:8px}.wk{border-radius:14px}.totop{bottom:86px;right:16px;width:44px;height:44px}.marq{padding:11px 0}.qa summary{font-size:16px;padding:17px 54px 17px 18px}.ans p{padding:0 18px 18px}.lb button{width:44px;height:44px}.lbp{left:8px}.lbn{right:8px}}
@media(max-width:560px){.pxband{min-height:400px}.pxtext{padding:60px 18px 130px}.pxtext p{font-size:16px}.pxw{height:215px}.w1{bottom:-19px}.w2{bottom:-57px}.w3{bottom:-100px;height:200px}.deco img{scale:.8}.pf.hm{display:none}.fxblob{scale:.7}}
/* «Уменьшить движение» в системе: без параллакса и без эффектов появления — всё видно сразу */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-depth]{translate:none!important}
.js .reveal,.js [data-fx] .reveal,.js .head.reveal h2,.js .head.reveal .kicker,.js .head.reveal p{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;translate:none!important}}