/* ============================================================================
   lp.css — спільний візуальний шар юзер-сторінок DESTROY (канон спеки 36).
   Витягнуто 13.08 з інлайну kadroom.html (посадкова N-LP 09.08), щоб
   /about і /kadroom жили з ОДНОГО джерела, а не з двох копій, які розʼїдуться.

   Що всередині: токени бренду · база · fade-in · паралакс-шар · лаймовий CTA
   btn-gh · каркас героя · відео-плитка .real-tile · секції h2/hline/sec-p ·
   плитки кімнат каруселлю · фінальний CTA · футер-канон + «жива рука».

   Чого НЕМА (лишається в самих сторінках, бо в кожної своє):
   · фонове фото героя `.lp-hero{background-image}`;
   · плаваюча 🎁 `.gift-fab`;
   · попап броні `#mBk` і пікер часу.

   Підключати ДО власного <style> сторінки, щоб її правки перекривали спільні.
   ============================================================================ */

:root{--r:#C8102E;--g:#CDF869;--bg:#0a0a0a;--c1:#131313;--c2:#141414;--b1:#222;--b2:#252525;--t:#f0f0f0;--t2:#bbb;--t3:#aaa;--t4:#888;--t5:#666;--mw:640px;--rd:2px;--head-weight:400;--ease-out:cubic-bezier(.22,1,.36,1);--font-head:'Alumni Sans',sans-serif;--font-body:'Montserrat',sans-serif;--fs-alumni-scale:1.4;--nav-scroll-pad:128px;--line-grad-h:linear-gradient(90deg,rgba(200,16,46,.85) 0%,rgba(200,16,46,.82) 52%,rgba(200,16,46,.35) 74%,rgba(200,16,46,.08) 92%,transparent 100%)}
@media(min-width:1024px){:root{--mw:940px}}
@media(min-width:768px){:root{--nav-scroll-pad:156px}}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}/* display:flex/grid на класах не сміє перебивати hidden (пастка .chips/.slots) */
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--t);font-family:var(--font-body);line-height:1.55;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.w{max-width:var(--mw);margin:0 auto;padding:0 18px;position:relative;z-index:1}
.w>*{position:relative;z-index:1}/* контент завжди НАД паралакс-шаром (z-index:0) */
/* ── fade-in як на index/about ── */
.fi{opacity:0;transform:translateY(14px);transition:opacity .42s var(--ease-out),transform .48s var(--ease-out)}
.fi.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fi{opacity:1;transform:none;transition:none}}
/* ── ПАРАЛАКС-МОНІТОРИ по краях (канон головної; лише десктоп ≥1200) ── */
.plxl{position:fixed;inset:0;pointer-events:none;z-index:0;display:none}
@media(min-width:1200px){.plxl{display:block}}
.plx{position:absolute;will-change:transform;transform:translate3d(0,0,0) scale(1);transform-origin:50% 50%;filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));backface-visibility:hidden}
.plx img{width:100%;height:100%;object-fit:contain}
/* ── CTA: канон btn-gh головної — лайм-ОБВОДКА + тремтіння (спека 36 §2) ── */
.btn-gh{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--g);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:12px 28px;border-radius:var(--rd);text-decoration:none;border:2px solid rgba(205,248,105,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .22s ease,color .22s ease,border-color .22s ease;cursor:pointer;font-family:inherit;box-sizing:border-box;isolation:isolate;-webkit-tap-highlight-color:transparent;animation:btnGhTremble 2.35s ease-in-out infinite}
.btn-gh::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:rgba(205,248,105,.14);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}
.btn-gh:hover,.btn-gh:focus-visible{background:var(--g);color:#101804;border-color:var(--g);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);animation:btnGhTrembleHi .68s ease-in-out infinite!important;outline:none;filter:none}
.btn-gh:hover::before,.btn-gh:focus-visible::before{opacity:1}
@keyframes btnGhTremble{0%,100%{border-color:rgba(205,248,105,.5);color:var(--g);transform:translate3d(0,0,0) rotate(0)}14%{transform:translate3d(1.6px,-1.1px,0) rotate(.55deg)}28%{transform:translate3d(-1.5px,1.2px,0) rotate(-.58deg)}42%{transform:translate3d(1.3px,1.4px,0) rotate(.42deg)}56%{transform:translate3d(-1.7px,-.9px,0) rotate(-.5deg)}70%{transform:translate3d(1.1px,-1.5px,0) rotate(.38deg)}84%{transform:translate3d(-1.2px,1px,0) rotate(-.45deg)}}
@keyframes btnGhTrembleHi{0%,100%{transform:translate3d(0,0,0) rotate(0)}20%{transform:translate3d(2.4px,-1.6px,0) rotate(.85deg)}40%{transform:translate3d(-2.2px,2px,0) rotate(-.9deg)}60%{transform:translate3d(2px,1.8px,0) rotate(.75deg)}80%{transform:translate3d(-2.4px,-1.3px,0) rotate(-.8deg)}}
@media(prefers-reduced-motion:reduce){.btn-gh{animation:none!important}}
.lp-cta-wrap{margin-top:22px}
.lp-cta-wrap .btn-gh{font-size:17px;padding:15px 36px;border-radius:calc(var(--rd) + 2px);letter-spacing:1.3px;border-width:3px}
@media(min-width:768px){.lp-cta-wrap .btn-gh{font-size:14px;padding:12px 30px}}
.cta-note{color:var(--t4);font-size:12.5px;margin-top:10px}
/* ── HERO: монітори Silent Joe — ФОНОМ ── */
.lp-hero{background-size:cover;background-position:center 30%;padding:104px 0 30px;position:relative;z-index:1}
/* Шапка sticky з height:0 (site-nav) — вона НЕ резервує місця, тож перший екран
   мусить сам відступити на її висоту: ~87px мобільна, ~118px десктопна. */
@media(min-width:768px){.lp-hero{padding-top:136px}}
h1{font-family:var(--font-head);font-weight:800;font-size:calc(34px * var(--fs-alumni-scale));line-height:.98;letter-spacing:.01em}
h1 .h1-red{color:var(--r)}
.hero-msg{margin:16px 0 0;color:var(--t2);font-size:15px;max-width:34em}
.hero-msg b{color:var(--t);font-weight:700}
.hero-loc{font-size:12.5px;font-weight:500;color:var(--t4);margin-top:12px}
.lp-hero-grid{display:flex;flex-direction:column;gap:26px}
.lp-hero-vid{margin:0 auto}
@media(min-width:900px){.lp-hero-grid{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}.lp-hero-vid{margin:0}}
/* ── Відео-плитка (порт .real-tile з головної) ── */
.real-tile{position:relative;flex:0 0 auto;width:76vw;max-width:300px;aspect-ratio:9/16;border:1px solid var(--b1);border-radius:var(--rd);overflow:hidden;background:#000;cursor:pointer}
.real-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.real-tile::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.3) 55%,transparent 100%)}
.real-stats{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;gap:11px;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);pointer-events:none}
.real-stats span{display:inline-flex;align-items:center;gap:4px}
.real-stats svg{width:15px;height:15px}
.real-link{position:absolute;top:9px;left:9px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:10.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 9px;text-decoration:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.real-link svg{width:16px;height:16px;flex-shrink:0}
.real-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:58px;height:58px;border:none;border-radius:50%;background:rgba(0,0,0,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.5);transition:opacity .2s,transform .2s}
.real-play svg{width:26px;height:26px;color:#fff;margin-left:3px}
.real-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.real-tile.playing .real-play{opacity:0;pointer-events:none}
.real-mute{position:absolute;top:9px;right:9px;z-index:3;width:30px;height:30px;border:none;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;cursor:pointer;color:#fff;padding:0}
.real-tile.playing .real-mute{display:flex}
.real-mute svg{width:16px;height:16px}
.real-mute .ic-on{display:flex;align-items:center;justify-content:center}
.real-mute .ic-off{display:none}
.real-tile.muted .real-mute .ic-on{display:none}
.real-tile.muted .real-mute .ic-off{display:flex;align-items:center;justify-content:center}
/* ── секції ── */
section{padding:34px 0 6px}
h2{font-family:var(--font-head);font-weight:700;font-size:calc(23px * var(--fs-alumni-scale));line-height:1;letter-spacing:.02em;margin-bottom:6px}
.hline{height:2px;background:var(--line-grad-h);border:0;margin:0 0 16px}
.sec-p{color:var(--t2);font-size:14.5px;margin:0 0 12px;max-width:36em}
.sec-p em{color:var(--t);font-style:normal;font-weight:700}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.chip-tag{border:1px solid var(--b1);background:var(--c1);color:var(--t3);border-radius:var(--rd);padding:5px 10px;font-size:12.5px}
.what-grid{display:flex;flex-direction:column;gap:22px}
.what-vid{margin:6px auto 0}
@media(min-width:900px){.what-grid{display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:start}.what-vid{margin:0}.what-vid .real-tile{width:260px}}
/* ── ПЛИТКИ КІМНАТ каруселлю (канон карток головної; 1 на мобільному / 2 на десктопі) ── */
.lp-rooms{--lp-gap:12px;--lp-pad:18px}
.lp-rail{display:flex;gap:var(--lp-gap);margin:0 calc(-1 * var(--lp-pad));padding:3px var(--lp-pad) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lp-pad);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.lp-rail::-webkit-scrollbar{display:none}
.lp-rail>.dr-card{flex:0 0 84%;scroll-snap-align:start;scroll-snap-stop:always}
@media(min-width:760px){.lp-rooms{--lp-gap:14px}.lp-rail>.dr-card{flex:0 0 calc((100% - var(--lp-gap)) / 2)}}
.dr-card{position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--rd);border:1px solid rgba(255,255,255,.09);background:#121212;transition:transform .18s var(--ease-out),border-color .2s,box-shadow .25s}
.dr-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.dr-imgbox{position:relative;aspect-ratio:4/3;overflow:hidden}
.dr-imgbox img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.dr-card:hover .dr-imgbox img{transform:scale(1.06)}
.dr-imggrad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,18,18,.16) 0,rgba(18,18,18,0) 38%,rgba(18,18,18,.6) 82%,#121212 100%)}
.dr-chip{position:absolute;top:9px;right:9px;display:flex;align-items:baseline;gap:3px;padding:5px 9px;border-radius:var(--rd);background:rgba(8,8,8,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.18)}
.dr-chip span{font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#cfcfcf}
.dr-chip b{font-family:var(--font-head);font-weight:700;font-size:22px;color:#fff;line-height:1;white-space:nowrap}
.dr-chip b i{font-style:normal;font-size:.6em;color:#FF5152;margin-left:2px}
.dr-tag-ov{position:absolute;top:9px;left:9px;font-family:var(--font-body);font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:999px;line-height:1;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:rgba(8,8,8,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3}
.dr-seam{height:2px;background:linear-gradient(90deg,var(--c),transparent)}
.dr-body{display:flex;flex-direction:column;gap:4px;padding:10px 13px 12px;flex:1}
.dr-name{font-family:var(--font-head);font-weight:400;font-size:26px;line-height:1.05;letter-spacing:.4px;text-transform:uppercase;color:#f1f1f1}
.dr-meta{margin-top:auto;padding-top:5px;display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:17px;color:#e6e6e6}
.dr-meta-i{display:inline-flex;align-items:center;gap:5px;line-height:1}
.dr-meta-i svg{width:17px;height:17px;fill:#9a9a9a;flex-shrink:0}
.dr-meta-sep{color:#555}
.dr-skel{pointer-events:none}
.dr-skel .dr-imgbox{background:linear-gradient(90deg,#161616,#1d1d1d,#161616);background-size:200% 100%;animation:drSkel 1.2s ease-in-out infinite}
.dr-skel-line{height:12px;border-radius:3px;background:#1b1b1b;margin:10px 13px}
.dr-skel-line.short{width:50%}
@keyframes drSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.lp-rail-hint{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;color:var(--t4)}
@media(min-width:760px){.lp-rail-hint{display:none}}
@media(prefers-reduced-motion:reduce){.lp-rail{scroll-snap-type:none}.dr-card{transition:none}.dr-skel .dr-imgbox{animation:none}}
/* ── довіра ── */
/* ── фінальний CTA — по центру (рішення Ірини 09.08) ── */
#go{text-align:center}
#go .hline{background:linear-gradient(90deg,transparent,rgba(200,16,46,.85),transparent)}
#go .sec-p,#go .go-sub{margin-left:auto;margin-right:auto}
.go-sub{color:var(--t3);font-size:14.5px;margin-top:2px}
/* ── ФУТЕР: канон головної 1:1 (спека 36 §3) ── */
.foot{margin-top:28px;padding:20px 0;text-align:center}
.foot p{font-size:11px;color:var(--t5);line-height:1.6;margin-bottom:5px}
.foot-loc{color:var(--t4);margin-top:0!important;margin-bottom:0!important;letter-spacing:.04em}
.foot .tel{color:var(--r);font-weight:700;font-size:16px;margin:10px 0 4px;text-decoration:none;display:block}
.foot .mt{display:inline-flex;align-items:center;gap:4px;margin-top:0;font-size:11px;color:var(--t4)}
.foot .mm{font-weight:800;font-size:12px;color:var(--r)}
.fc{font-size:14px;color:var(--t2);margin:14px 0 8px;font-weight:500;line-height:1.5}
.fc em{color:var(--r);font-style:normal;font-weight:700}
.soc{display:flex;justify-content:center;gap:14px;margin:14px 0}
.foot .soc{margin:22px 0 4px}
.soc a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--rd);background:#1a1a1a;border:1px solid var(--b1);transition:all .2s}
.soc a:hover{border-color:var(--r);transform:scale(1.1)}.soc a svg{width:18px;height:18px;fill:var(--t3)}.soc a:hover svg{fill:var(--r)}
@media(min-width:900px){.foot p,.foot .mt{font-size:13px}.foot .mm{font-size:13px}.foot-loc{font-size:13px}}
/* «Жива рука» — канон спеки 36 §4: на десктопі дрижить ЛИШЕ при наведенні,
   на мобільному — короткими спалахами раз на ~9 с (не безперервно). */
.foot-art{display:block;width:100%;height:auto;margin:0;opacity:1;transform-origin:center;filter:drop-shadow(0 0 14px rgba(200,16,46,.3));transition:filter .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.foot-art.foot-art-shake{animation:footArtShake .13s linear infinite;filter:drop-shadow(0 0 26px rgba(200,16,46,.55))}
@media(hover:hover) and (pointer:fine){
  .foot-art:hover{animation:footArtShake .13s linear infinite;filter:drop-shadow(0 0 26px rgba(200,16,46,.55))}
}
@media(hover:none),(pointer:coarse){
  .foot-art{animation:footArtIdle 9s linear infinite}
}
@keyframes footArtShake{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(1.5px,-2px) rotate(-1.4deg)}40%{transform:translate(-2px,1px) rotate(1.1deg)}60%{transform:translate(1px,2px) rotate(-.9deg)}80%{transform:translate(-1.5px,-1px) rotate(.8deg)}100%{transform:translate(0,0) rotate(0)}}
/* спокій ~8 с → ~1 с тряски */
@keyframes footArtIdle{
  0%,88%{transform:translate(0,0) rotate(0)}
  90%{transform:translate(1.5px,-2px) rotate(-1.4deg)}
  92%{transform:translate(-2px,1px) rotate(1.1deg)}
  94%{transform:translate(1px,2px) rotate(-.9deg)}
  96%{transform:translate(-1.5px,-1px) rotate(.8deg)}
  98%{transform:translate(1.2px,-1.4px) rotate(-.7deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@media(prefers-reduced-motion:reduce){.foot-art,.foot-art.foot-art-shake,.foot-art:hover{animation:none;filter:drop-shadow(0 0 16px rgba(200,16,46,.3))}}
.img-dawn{position:relative;isolation:isolate;display:block}
.img-dawn img{display:block;transition:filter .9s cubic-bezier(.25,.8,.25,1),transform .9s cubic-bezier(.25,.8,.25,1)}
.img-dawn::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:rgba(2,3,9,.94);transform-origin:50% 28%;-webkit-mask-image:radial-gradient(ellipse 125% 105% at 50% 30%,transparent 0%,transparent 40%,rgba(0,0,0,.62) 64%,#000 100%);mask-image:radial-gradient(ellipse 125% 105% at 50% 30%,transparent 0%,transparent 40%,rgba(0,0,0,.62) 64%,#000 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .9s cubic-bezier(.25,.8,.25,1),transform .95s cubic-bezier(.22,1,.32,1)}
.img-dawn:hover::after{opacity:.38;transform:scale(1.22)}
.img-dawn:hover img{filter:brightness(1.12) saturate(1.08) contrast(1.03);transform:scale(1.02)}
.foot-art-dawn{display:block;margin:14px auto;width:160px}
@media(min-width:768px){.foot-art-dawn{width:200px}}
@media(prefers-reduced-motion:reduce){.img-dawn img,.img-dawn::after{transition:none}.img-dawn:hover img{transform:none;filter:none}.img-dawn:hover::after{transform:none;opacity:.62}}