/* ==========================================================================
   УК «ЛАД» — оформление главной страницы (RIVR glass v5 + разделы «Отчётность»)
   Файл подключается ТОЛЬКО на главной ($_MAGIC['layout'] = 'landing').
   Внутренние страницы (/user/, /crm/, шахматка) продолжают жить на uklad.css.
   Шрифты локальные, из /themes/uklad/img/fonts/ — внешних CDN нет.
   ========================================================================== */

@font-face{font-family:'Cormorant Garamond';font-weight:400 700;src:url(/themes/uklad/img/fonts/cormorant-var-cyr.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:'Cormorant Garamond';font-weight:400 700;src:url(/themes/uklad/img/fonts/cormorant-var-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:'Jost';font-weight:100 900;src:url(/themes/uklad/img/fonts/jost-var-cyr.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:'Jost';font-weight:100 900;src:url(/themes/uklad/img/fonts/jost-var-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:'Roboto';font-weight:400;src:url(/themes/uklad/img/fonts/roboto-400-cyr.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116;font-display:swap}
@font-face{font-family:'Roboto';font-weight:400;src:url(/themes/uklad/img/fonts/roboto-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'Roboto';font-weight:500;src:url(/themes/uklad/img/fonts/roboto-500-cyr.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116;font-display:swap}
@font-face{font-family:'Roboto';font-weight:500;src:url(/themes/uklad/img/fonts/roboto-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF;font-display:swap}

:root{
  --bg:#FFFFFF; --panel:#EDF4F3; --ink:#172026; --mut:#5A6B6E; --line:#DCE7E5;
  --petrol:#0F6B63; --petrol-d:#0A4F49; --ok:#2F8F46; --warn:#B7791F; --card:#FFFFFF;
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{margin:0; overflow-x:hidden; background:#f0f0f0; color:var(--ink); font:16.5px/1.62 'Jost',system-ui,sans-serif}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; line-height:1.1; text-wrap:balance; font-weight:600; letter-spacing:.004em}
:focus-visible{outline:3px solid var(--petrol); outline-offset:2px}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:12.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--petrol)}
.num{font-variant-numeric:tabular-nums}

/* входные анимации (motion/react -> CSS) */
@keyframes fadeUp{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
@keyframes fadeScale{from{opacity:0; transform:scale(.98)}to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fromLeft{from{opacity:0; transform:translateX(-20px)}to{opacity:1; transform:none}}

/* ==========================================================================
   1. Экран-обложка: видеофон в скруглённой рамке
   ========================================================================== */
.outer{width:100%; height:100vh; height:100svh; display:flex; align-items:center; justify-content:center; padding:20px; background:#f0f0f0; position:relative; z-index:1}
@media(max-width:767px){ .outer{padding:12px} }
.frame{position:relative; width:100%; max-width:1536px; height:100%; border-radius:3rem; overflow:hidden; display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,.1)}
@media(max-width:767px){ .frame{border-radius:1.5rem} }
/* Два режима подачи, граница совпадает с границей раскладки карточек (768):
   — ШИРОКИЙ (>=768): на высоких пропорциях рамка держит пропорцию — сцена видео целиком;
   — УЗКИЙ (<768): вертикальная подача, кроп видео осознанный — это композиция, а не дефект. */
@media(min-width:768px) and (max-aspect-ratio:4/3){ .frame{max-height:70vw} }
.frame video,.frame canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0}
/* скрим под текстовой зоной: городской кадр пёстрый, текст иначе теряется */
.frame::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(248,250,252,.72),rgba(248,250,252,.42) 34%,rgba(248,250,252,0) 58%)}
.layer{position:relative; z-index:10; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; font-family:'Roboto',ui-sans-serif,system-ui,sans-serif}

.badge{animation:fadeUp .6s ease-out both; text-decoration:none; cursor:pointer}
h1.hero{animation:fadeScale .8s .2s both}
p.hero{animation:fade .8s .4s both}
.bl-card{animation:fromLeft .8s .2s both}
.br-corner{animation:fadeUp .8s .4s both}
@media(prefers-reduced-motion:reduce){ .badge,h1.hero,p.hero,.bl-card,.br-corner{animation:none} }

/* меню поверх видео */
nav.bar{display:flex; align-items:center; justify-content:space-between; padding:24px 40px; width:100%; position:relative; z-index:10}
@media(max-width:767px){ nav.bar{padding:24px} }
.spacer{flex:1}
@media(max-width:767px){ .spacer.left{display:none} }
.menu{display:flex; align-items:center; gap:32px; color:rgb(45,45,45); font-size:14px; list-style:none; margin:0; padding:0}
@media(max-width:767px){ .menu{display:none} }
.menu li{cursor:pointer; transition:opacity .2s; display:flex; align-items:center; gap:4px}
.menu li:hover{opacity:.7}
.menu svg{width:16px; height:16px; transition:transform .2s}
.menu li:hover svg{transform:translateX(2px)}
.mob-logo{display:none; font-size:20px; letter-spacing:-.04em; color:rgba(30,50,90,.9)}
@media(max-width:767px){ .mob-logo{display:block} }
.demo-btn{display:flex; align-items:center; background:rgba(30,50,90,.8); color:#fff; border-radius:9999px; padding:8px 24px 8px 8px; gap:12px; border:0; cursor:pointer; transition:background .2s, transform .15s; font:inherit; font-size:14px}
.demo-btn:hover{background:rgba(30,50,90,1); transform:scale(1.02)}
.demo-btn:active{transform:scale(.98)}
.demo-btn .ic{background:rgba(255,255,255,.2); padding:6px; border-radius:9999px; display:flex; align-items:center; justify-content:center}
.demo-btn svg{width:20px; height:20px; color:#fff}
/* Мобильная шапка: кнопка заявки убрана — на телефоне остаются
   «Позвонить» в карточке и «Кабинет жильца» в углу */
@media(max-width:767px){ .demo-btn{display:none} }

/* текстовый блок */
.textwrap{width:100%; display:flex; flex-direction:column; align-items:center; padding:32px 24px 0; text-align:center; max-width:56rem}
.badge{display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:9999px; background:rgba(255,255,255,.6); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); margin:0 auto 12px; width:fit-content; font-size:14px; color:rgba(30,50,90,.9)}
.badge svg{width:16px; height:16px; color:rgba(30,50,90,.8)}
h1.hero{font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(44px,7.6vw,88px); font-weight:600; color:#232B38; text-shadow:0 1px 18px rgba(255,255,255,.55); margin-bottom:8px; letter-spacing:-.02em; line-height:1.05}
p.hero{font-size:clamp(14px,1.6vw,18px); color:#2B3442; text-shadow:0 1px 14px rgba(255,255,255,.6); line-height:1.62; max-width:36rem; font-weight:400}

/* стеклянная карточка аварийной службы */
.bl-card{position:absolute; bottom:112px; right:16px; left:auto; padding:20px; border-radius:2.2rem; background:rgba(255,255,255,.3); backdrop-filter:blur(24px); display:flex; flex-direction:column; gap:12px; min-width:180px; width:fit-content; z-index:10}
@media(min-width:768px){ .bl-card{left:24px; right:auto; bottom:24px} }
@media(min-width:1024px){ .bl-card{bottom:40px; left:40px} }
.bl-card .num{font-size:30px; font-weight:400; color:rgba(30,50,90,.9); letter-spacing:-.02em}
.bl-card .cap{font-size:12px; color:rgba(30,50,90,.6); text-transform:uppercase; letter-spacing:.05em}
.call-btn{display:flex; align-items:center; background:#fff; border-radius:9999px; padding:6px 20px 6px 6px; gap:8px; transition:background .2s, transform .15s; align-self:flex-start; font-size:14px; color:rgba(30,50,90,.9)}
.call-btn:hover{background:rgba(255,255,255,.9); transform:scale(1.02)}
.call-btn .ic{background:rgba(30,50,90,.1); padding:4px; border-radius:9999px; display:flex}
.call-btn svg{width:16px; height:16px; color:rgba(30,50,90,.9)}

/* faux-cutout угол «Кабинет жильца» */
.br-corner{position:absolute; bottom:0; right:0; padding:32px 24px 24px 56px; background:#f0f0f0; border-top-left-radius:3.5rem; display:flex; align-items:center; gap:24px; z-index:10}
@media(max-width:767px){ .br-corner{padding:20px 12px 12px 32px; border-top-left-radius:1.5rem; gap:12px} }
.mask{position:absolute; pointer-events:none}
.mask.top{top:-3.5rem; right:0; width:3.5rem; height:3.5rem}
.mask.left{bottom:0; left:-3.5rem; width:3.5rem; height:3.5rem}
@media(max-width:767px){ .mask.top{top:-1.5rem; width:1.5rem; height:1.5rem} .mask.left{left:-1.5rem; width:1.5rem; height:1.5rem} }
.circle{background:rgba(30,50,90,.05); width:56px; height:56px; border-radius:9999px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(30,50,90,.1)}
@media(max-width:767px){ .circle{width:40px; height:40px} }
.circle svg{width:22px; height:22px; color:rgba(30,50,90,.8)}
.br-corner .title{font-size:20px; color:rgba(30,50,90,.95)}
@media(max-width:767px){ .br-corner .title{font-size:16px} }
.br-corner .sub{display:flex; align-items:center; gap:4px; color:rgba(30,50,90,.6); cursor:pointer; transition:color .2s; font-size:15px}
.br-corner .sub:hover{color:rgba(30,50,90,.8)}
.br-corner .sub svg{width:15px; height:15px}

/* ==========================================================================
   2. Попап контактов
   ========================================================================== */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; font-family:'Roboto',system-ui,sans-serif}
.modal.open{display:flex}
.modal .veil{position:absolute; inset:0; background:rgba(20,30,40,.45); backdrop-filter:blur(6px)}
.modal .card{position:relative; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); border-radius:1.8rem; padding:30px 32px; max-width:430px; width:100%; box-shadow:0 30px 80px rgba(15,40,70,.25); animation:fadeUp .35s ease-out both}
.modal h2{font-family:'Cormorant Garamond',Georgia,serif; font-size:30px; color:rgba(30,50,90,.95); margin-bottom:16px}
.modal .cl{display:flex; flex-direction:column; gap:12px; font-size:15px; color:rgba(30,50,90,.9)}
.modal .cl b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:rgba(30,50,90,.55); margin-bottom:2px; font-weight:500}
.modal .cl a{color:rgba(30,50,90,.95)}
.modal .alarm{border:1px solid rgba(30,50,90,.15); border-radius:1rem; padding:12px 14px; background:rgba(30,50,90,.04)}
.modal .alarm b{color:#8a6d1f}
.modal .chans{display:flex; gap:10px; margin-top:18px}
.modal .chan{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:9999px; font-size:14px; text-decoration:none; color:#fff; transition:transform .15s, opacity .2s}
.modal .chan:hover{transform:scale(1.02); opacity:.92}
.chan.tg{background:#2AABEE}
.chan.mx{background:linear-gradient(135deg,#69A1FB,#2671F7)} /* фирменный синий MAX */
.modal .x{position:absolute; top:16px; right:18px; background:none; border:0; cursor:pointer; font-size:22px; line-height:1; color:rgba(30,50,90,.55); padding:6px}
.modal .x:hover{color:rgba(30,50,90,.9)}

/* ==========================================================================
   3. Разделы под обложкой: как работаем / услуги / двор / новости / контакты
   ========================================================================== */
.pagebg{position:fixed; inset:-6% 0; z-index:0; overflow:hidden; pointer-events:none}
.pagebg img{width:100%; height:100%; object-fit:cover; object-position:center 40%; will-change:transform}
.pagebg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(244,249,249,.14),rgba(248,251,251,.44) 34%,rgba(243,248,248,.52))}

section{position:relative; z-index:1; padding:84px 0; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); scroll-margin-top:24px}
section a{color:var(--petrol)}
/* прозрачные окна: фото-фон проглядывает на всю ширину, с подписью */
.window{position:relative; z-index:1; height:46vh; min-height:280px; background:none; margin:0}
.window figcaption{position:absolute; right:24px; bottom:14px; color:#fff; font-size:13px; font-weight:600; text-shadow:0 1px 8px rgba(10,30,28,.65); letter-spacing:.04em}
.sect-head{max-width:58ch; margin-bottom:42px}
.sect-head h2{font-size:clamp(30px,4vw,42px); margin-top:10px}
.sect-head p{color:var(--mut); margin-top:10px}
.btn{display:inline-block; padding:13px 24px; border-radius:10px; font-weight:700; text-decoration:none; font-size:15px}
.btn-main{background:var(--petrol); color:#fff !important}
.btn-main:hover{background:var(--petrol-d)}
.chip{font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap}
.chip-ok{background:#E8F4EB; color:var(--ok)}
.chip-run{background:#FBF3E2; color:var(--warn)}

/* как проходит заявка */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; counter-reset:st}
.st{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; position:relative}
.st::before{counter-increment:st; content:counter(st,decimal-leading-zero); position:absolute; top:20px; right:22px; font-size:13px; font-weight:800; color:var(--petrol); letter-spacing:.08em}
.st h3{font-size:21px; margin-bottom:8px; padding-right:40px}
.st p{font-size:14.5px; color:var(--mut)}

/* услуги */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.sv{border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; gap:16px; align-items:flex-start; background:var(--card)}
.sv .ic{flex:none; width:42px; height:42px; border-radius:11px; background:var(--panel); display:grid; place-items:center; color:var(--petrol)}
.sv h3{font-size:20px; margin-bottom:5px}
.sv p{font-size:14.5px; color:var(--mut)}

/* галерея двора */
.gal{display:grid; grid-template-columns:1.15fr .85fr; gap:16px}
@media(max-width:820px){ .gal{grid-template-columns:1fr} }
.gal figure{position:relative; border-radius:16px; overflow:hidden; height:380px; margin:0}
.gal img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gal .g-l img{object-position:0% 62%}
.gal .g-r img{object-position:100% 38%}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:36px 18px 13px; color:#fff; font-size:13px; background:linear-gradient(180deg,transparent,rgba(10,30,28,.6))}

/* новости-таймлайн */
.tl{border-left:2px solid var(--line); margin-left:6px; display:flex; flex-direction:column; gap:30px; padding-left:26px}
.tl article{position:relative}
.tl article::before{content:''; position:absolute; left:-33px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--petrol); border:3px solid #fff; box-shadow:0 0 0 1.5px var(--line)}
.tl time{font-size:13px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.07em}
.tl h3{font-size:21px; margin:4px 0 6px}
.tl p{font-size:15px; color:var(--mut); max-width:66ch}
.tl img{border-radius:12px; margin:10px 0; max-width:320px}

/* контакты */
.contact{background:rgba(240,246,245,.94); backdrop-filter:blur(9px); border-top:1px solid rgba(255,255,255,.7)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr} }
.cl{display:flex; flex-direction:column; gap:16px; font-size:15px}
.cl div b{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--mut); margin-bottom:3px}
.cl .alarm{background:#fff; border:1px solid var(--line); border-radius:11px; padding:14px 16px}
.cl .alarm b{color:var(--petrol)}
.lk-box{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px}
.lk-box h3{font-size:20px; margin-bottom:8px}
.lk-box p{font-size:14.5px; color:var(--mut); margin-bottom:16px}
.lk-box .fine{font-size:13.5px; margin:14px 0 0}

/* подвал */
.site-foot{position:relative; z-index:1; background:rgba(255,255,255,.94); backdrop-filter:blur(9px); padding:34px 0 42px; font-size:13.5px; color:var(--mut)}
.site-foot a{color:var(--petrol)}
.foot-row{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}

/* появление секций при прокрутке */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
}