/* ============================================================ HEMP FARM — дизайн-версия сайта (v1) Палитра презентации: глубокий зелёный · крем · золото Фото — размеченные слоты (.img), заменяются на реальные снимки ============================================================ */ :root{ /* цвет */ --g950:#0e1812; --g900:#122019; --g850:#172a20; --g800:#1c3327; --g700:#24432f; --g600:#176c41; /* зелёный знака логотипа (оригинал клиента, 21.09) */ --g500:#3b7f52; --cream:#f4f1e8; --cream-2:#ece7d9; --paper:#fbfaf6; --sand:#f3efe4; --ink:#15201a; --ink-2:#3c4841; --muted:#6b756f; --gold:#c9a86a; --gold-2:#dcc18a; --gold-deep:#a98a4e; --line:rgba(21,32,26,.12); --line-strong:rgba(21,32,26,.22); --line-d:rgba(244,241,232,.14); --line-d-strong:rgba(244,241,232,.28); --cream-70:rgba(244,241,232,.72); --cream-50:rgba(244,241,232,.5); --cream-30:rgba(244,241,232,.3); /* форма */ --r:22px; --r-s:14px; --shadow:0 2px 6px rgba(14,24,18,.06),0 18px 44px -18px rgba(14,24,18,.22); --shadow-lg:0 4px 10px rgba(14,24,18,.08),0 34px 70px -24px rgba(14,24,18,.34); --shadow-d:0 20px 60px -20px rgba(0,0,0,.6); /* шрифт */ --serif:Georgia,"Times New Roman","Noto Serif",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.2,.65,.2,1); --top-h:88px; /* header без верхней строки */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} ::selection{background:var(--gold);color:var(--g950)} .container{max-width:1240px;margin:0 auto;padding:0 24px} .container--narrow{max-width:920px} .container--wide{max-width:1400px} /* ---------------- прогресс скролла ---------------- */ #scrollbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:1300;transition:width .1s linear} /* ================= ШАПКА (фиксированная, меняет состояние при скролле) ================= */ .top{position:fixed;top:0;left:0;right:0;z-index:1100;transition:background .35s var(--ease),box-shadow .35s var(--ease)} header.site .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;min-height:88px;transition:min-height .35s var(--ease)} header.site .brand{justify-self:start} header.site nav.main{justify-self:center;margin-left:0} header.site .header-cta{justify-self:end;margin-left:0} .brand{display:flex;align-items:center;flex:0 0 auto;position:relative;height:50px;width:82px} .brand img{height:50px;width:auto;aspect-ratio:700/430;position:absolute;left:0;top:0;transition:opacity .3s} .brand .logo-dark{opacity:0} nav.main{display:flex;gap:2px;margin-left:auto;align-items:center} nav.main .nav-link{ display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:550;color:var(--cream-70);padding:9px 13px;border-radius:99px; letter-spacing:.01em;white-space:nowrap;transition:background .2s,color .2s; } nav.main .nav-link .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .25s var(--ease)} nav.main .nav-link:hover,nav.main .nav-item:hover>.nav-link,nav.main .nav-item.open>.nav-link{color:var(--cream);background:rgba(244,241,232,.08)} nav.main .nav-item:hover>.nav-link .chev,nav.main .nav-item.open>.nav-link .chev{transform:rotate(180deg)} nav.main .nav-link.active{color:var(--g950);background:var(--gold)} .nav-item{position:relative} .nav-item .menu{ position:absolute;left:50%;top:100%;transform:translate(-50%,8px);padding-top:14px; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility .22s;z-index:5; } .nav-item:hover .menu,.nav-item.open .menu,.nav-item:focus-within .menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .menu-inner{ min-width:340px;background:rgba(251,250,246,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -30px rgba(14,24,18,.45),0 2px 0 var(--gold) inset; padding:10px;display:grid;gap:2px; } .menu-inner::before{content:"";position:absolute;left:50%;top:6px;width:14px;height:14px;background:rgba(251,250,246,.98);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)} .menu-link{display:flex;gap:14px;align-items:flex-start;padding:11px 12px;border-radius:12px;transition:background .18s;color:var(--ink)} .menu-link:hover{background:var(--sand)} .menu-link .mi{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--g900);display:flex;align-items:center;justify-content:center;transition:background .2s} .menu-link .mi svg{width:20px;height:20px;fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .menu-link:hover .mi{background:var(--g700)} .menu-link .mt{display:flex;flex-direction:column;gap:2px;line-height:1.35} .menu-link .mt b{font-size:14.5px;font-weight:600;color:var(--ink)} .menu-link .mt small{font-size:12.5px;color:var(--muted)} .header-cta{flex:0 0 auto;margin-left:6px} .burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto} .burger span{width:24px;height:2px;background:var(--cream);display:block;transition:.2s} /* сплошное состояние после скролла */ .top.is-solid{background:rgba(251,250,246,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(14,24,18,.25)} .top.is-solid header.site .container{min-height:74px} .top.is-solid .brand img{height:44px} .top.is-solid .brand .logo-light{opacity:0} .top.is-solid .brand .logo-dark{opacity:1} .top.is-solid nav.main .nav-link{color:var(--ink-2)} .top.is-solid nav.main .nav-link:hover,.top.is-solid nav.main .nav-item:hover>.nav-link,.top.is-solid nav.main .nav-item.open>.nav-link{color:var(--ink);background:rgba(21,32,26,.06)} .top.is-solid nav.main .nav-link.active{color:var(--g950);background:var(--gold)} .top.is-solid .burger span{background:var(--ink)} .top.is-solid .btn--outline-light{color:var(--ink);border-color:var(--ink)} .top.is-solid .btn--outline-light:hover{background:var(--g900);color:var(--cream);border-color:var(--g900)} /* мобильное меню (аккордеон по разделам) */ .mobile-nav{display:none;background:var(--g900);padding:8px 24px 26px;border-top:1px solid var(--line-d);max-height:calc(100vh - var(--top-h));overflow:auto} .mobile-nav .m-link,.mobile-nav summary{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:17px;font-weight:600;color:var(--cream);border-bottom:1px solid var(--line-d);cursor:pointer;list-style:none} .mobile-nav summary::-webkit-details-marker{display:none} .mobile-nav summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--cream-50);border-bottom:1.5px solid var(--cream-50);transform:rotate(45deg);transition:transform .25s;margin-right:6px} .mobile-nav details[open] summary::after{transform:rotate(-135deg)} .mobile-nav .m-sub{padding:4px 0 10px 14px;border-bottom:1px solid var(--line-d)} .mobile-nav .m-sub a{display:block;padding:9px 4px;font-size:15px;color:var(--cream-70)} .mobile-nav .m-sub a:hover{color:var(--gold-2)} .mobile-nav .m-link.active,.mobile-nav details[open] summary{color:var(--gold-2)} .m-contacts{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:18px;font-size:14px} .m-contacts a{color:var(--cream-70);border-bottom:1px solid var(--line-d-strong)} body.nav-open .mobile-nav{display:block} body.nav-open .top{background:var(--g900)} /* ================= ТИПОГРАФИКА ================= */ .kicker{ display:inline-flex;align-items:center;gap:12px; font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-deep);margin-bottom:18px; } .kicker::before{content:"";width:28px;height:1.5px;background:var(--gold);display:inline-block} .kicker--center{justify-content:center} .kicker--center::after{content:"";width:28px;height:1.5px;background:var(--gold);display:inline-block} .sec--dark .kicker{color:var(--gold)} h1.display{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.8vw,76px);line-height:1.04;letter-spacing:-.015em} h1.display em{font-style:italic;color:var(--gold-2)} h2.h-sec{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.8vw,52px);line-height:1.1;letter-spacing:-.012em} h3{font-weight:650;letter-spacing:-.01em;line-height:1.3} .lead{font-size:clamp(16px,1.55vw,18.5px);color:var(--ink-2);line-height:1.7;max-width:62ch} .sec--dark .lead{color:var(--cream-70)} .sec-head{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:end;margin-bottom:56px} .sec-head .lead{margin-top:14px} .sec-head--center{text-align:center;max-width:800px;margin:0 auto 56px} .sec-head--center .lead{margin:16px auto 0} /* ================= СЕКЦИИ ================= */ section.sec{position:relative;padding:104px 0} .sec--tight{padding:72px 0} .sec--sand{background:var(--sand)} .sec--paper{background:var(--paper)} .sec--dark{background:var(--g900);color:var(--cream)} .sec--darker{background:var(--g950);color:var(--cream)} .sec--dark h2,.sec--darker h2{color:var(--cream)} .hairline-top{border-top:1px solid var(--line)} /* ================= КОДЫ БЛОКОВ (аннотации, по умолчанию скрыты) ================= */ .tag{ position:absolute;top:16px;right:24px;z-index:6;display:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-2); border:1px dashed var(--line-strong);background:rgba(251,250,246,.85);padding:4px 10px;border-radius:99px; } .sec--dark .tag,.sec--darker .tag,.hero .tag{color:var(--cream-70);border-color:var(--line-d-strong);background:rgba(18,32,25,.75)} body.tags-on .tag{display:inline-block} .tag-toggle{ position:fixed;bottom:20px;right:20px;z-index:1150; font-family:var(--mono);font-size:11px;letter-spacing:.06em; background:var(--g900);color:var(--cream);border:1px solid var(--line-d-strong);border-radius:99px;padding:10px 16px;box-shadow:var(--shadow-lg); } .tag-toggle:hover{background:var(--g950)} .ver-badge{ position:fixed;bottom:20px;left:20px;z-index:1150;pointer-events:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted); background:rgba(251,250,246,.9);border:1px solid var(--line);border-radius:99px;padding:8px 14px;backdrop-filter:blur(8px); } /* ================= СЛОТЫ ПОД ФОТО ================= */ .img{ position:relative;overflow:hidden;border-radius:var(--r); background: radial-gradient(120% 90% at 18% 12%, rgba(59,127,82,.38) 0%, transparent 55%), radial-gradient(90% 80% at 85% 90%, rgba(201,168,106,.16) 0%, transparent 60%), linear-gradient(150deg,#22422f 0%,#172c21 50%,#101c15 100%); min-height:120px; } .img::before{ /* лёгкий диагональный отблеск */ content:"";position:absolute;inset:-40%; background:linear-gradient(115deg,transparent 42%,rgba(244,241,232,.05) 50%,transparent 58%); transform:translateX(-20%);transition:transform 1.2s var(--ease); } .img:hover::before{transform:translateX(20%)} .img::after{ /* пиктограмма камеры */ content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);opacity:.32; background:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .img[data-photo]::after{top:46%} .img .cap{ position:absolute;left:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px); font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.45;color:var(--cream-70); background:rgba(14,24,18,.55);border:1px solid var(--line-d);border-radius:9px;padding:6px 10px; backdrop-filter:blur(6px); } .img .cap b{color:var(--gold);font-weight:600} .img--16x9{aspect-ratio:16/9} .img--4x3{aspect-ratio:4/3} .img--3x4{aspect-ratio:3/4} .img--1x1{aspect-ratio:1/1} .img--21x9{aspect-ratio:21/9} .img--fill{position:absolute;inset:0;border-radius:0;min-height:0} .img--soft{border-radius:var(--r-s)} .img.video::after{ width:78px;height:78px;opacity:1; background: url("data:image/svg+xml;utf8,") center/34% no-repeat, var(--gold); border-radius:50%;box-shadow:0 16px 40px -10px rgba(0,0,0,.6);transition:transform .25s var(--ease); } .img.video:hover::after{transform:translate(-50%,-50%) scale(1.06)} /* ================= КНОПКИ ================= */ .btn{ display:inline-flex;align-items:center;gap:10px; font-size:14.5px;font-weight:600;letter-spacing:.01em;padding:15px 28px;border-radius:99px; border:1.5px solid transparent;transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s,border-color .2s; white-space:nowrap; } .btn .arr{transition:transform .2s} .btn:hover{transform:translateY(-2px)} .btn:hover .arr{transform:translateX(4px)} .btn--gold{background:var(--gold);color:var(--g950);border-color:var(--gold)} .btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2);box-shadow:0 14px 34px -14px rgba(201,168,106,.7)} .btn--dark{background:var(--g900);color:var(--cream);border-color:var(--g900)} .btn--dark:hover{background:var(--g950);box-shadow:var(--shadow-lg)} .btn--outline-dark{background:transparent;color:var(--ink);border-color:var(--ink)} .btn--outline-dark:hover{background:var(--g900);color:var(--cream);border-color:var(--g900)} .btn--outline-light{background:transparent;color:var(--cream);border-color:var(--cream-50)} .btn--outline-light:hover{border-color:var(--cream);background:rgba(244,241,232,.06)} .btn--sm{padding:10px 20px;font-size:13.5px} .link-arr{display:inline-flex;gap:8px;align-items:center;font-weight:650;font-size:14.5px;color:var(--g700);border-bottom:1.5px solid var(--gold);padding-bottom:2px} .link-arr .arr{transition:transform .2s} .link-arr:hover .arr{transform:translateX(4px)} .sec--dark .link-arr,.sec--darker .link-arr{color:var(--cream)} /* ================= ГЕРОЙ ГЛАВНОЙ ================= */ .hero{ position:relative;overflow:hidden;color:var(--cream); padding:calc(var(--top-h) + 64px) 0 0; background: radial-gradient(70% 60% at 80% 20%, rgba(59,127,82,.35) 0%, transparent 60%), radial-gradient(50% 40% at 10% 90%, rgba(201,168,106,.12) 0%, transparent 60%), linear-gradient(180deg,var(--g950) 0%,var(--g900) 45%,var(--g850) 100%); } .hero-bg{ /* слот под фоновое видео */ position:absolute;inset:0;z-index:0;opacity:.55; background: linear-gradient(180deg,rgba(14,24,18,.2),rgba(14,24,18,.85)), repeating-linear-gradient(-32deg,transparent 0 46px,rgba(244,241,232,.025) 46px 47px); } .hero-bg .cap{position:absolute;right:24px;top:calc(var(--top-h) + 14px);z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--cream-50);border:1px dashed var(--line-d-strong);padding:5px 10px;border-radius:8px} .hero-glow{position:absolute;z-index:0;width:60vw;height:60vw;border-radius:50%;filter:blur(90px);opacity:.28;background:var(--g600);right:-20vw;top:-10vw;animation:drift 22s ease-in-out infinite alternate} @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-8vw,6vw) scale(1.12)}} .hero .container{position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-bottom:88px} .hero-copy .display{margin:8px 0 26px} .hero-copy .lead{color:var(--cream-70);margin-bottom:36px;max-width:56ch} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-media{position:relative} .hero-media .img{box-shadow:var(--shadow-d);border:1px solid var(--line-d)} .float-card{ position:absolute;z-index:4;background:rgba(18,32,25,.82);border:1px solid var(--line-d-strong); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:16px 20px;color:var(--cream); box-shadow:var(--shadow-d); } .float-card .fc-num{font-family:var(--serif);font-size:30px;line-height:1;color:var(--gold-2)} .float-card .fc-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-50);margin-top:6px} .float-card--tl{top:-22px;left:-30px} .float-card--br{bottom:-22px;right:-18px} /* лента цифр в герое */ .statline{position:relative;z-index:2;border-top:1px solid var(--line-d)} .statline .container{display:grid;grid-template-columns:repeat(4,1fr)} .statline .stat{padding:36px 28px 40px;border-left:1px solid var(--line-d)} .statline .stat:first-child{border-left:none;padding-left:0} .stat .num{font-family:var(--serif);font-size:clamp(36px,3.6vw,56px);line-height:1;letter-spacing:-.01em;color:var(--gold-2)} .stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-50);margin-top:12px;line-height:1.55} /* ================= БЕГУЩАЯ СТРОКА ДОВЕРИЯ ================= */ .marquee{overflow:hidden;padding:22px 0;background:var(--g950);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)} .marquee-track{display:flex;gap:14px;width:max-content;animation:mq 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .mq-chip{ display:inline-flex;align-items:center;gap:12px;white-space:nowrap; font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--cream-70); border:1px solid var(--line-d);border-radius:99px;padding:10px 20px; } .mq-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ================= СЕТКИ, КАРТОЧКИ ================= */ .grid{display:grid;gap:22px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-6{grid-template-columns:repeat(6,1fr)} .card{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px; transition:transform .25s var(--ease),box-shadow .25s,border-color .25s; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(201,168,106,.55)} .card--static:hover{transform:none;box-shadow:none;border-color:var(--line)} .card .card-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold-deep);text-transform:uppercase} .card h3{font-size:19px;margin:12px 0 10px} .card p{font-size:14.5px;color:var(--ink-2);line-height:1.65} .card .img{margin:-30px -30px 22px;border-radius:var(--r) var(--r) 0 0} .card--dark{background:rgba(244,241,232,.035);border-color:var(--line-d);color:var(--cream)} .card--dark p{color:var(--cream-70)} .card--dark .card-num{color:var(--gold)} .card--dark:hover{border-color:rgba(201,168,106,.6);box-shadow:var(--shadow-d)} .card--gold{background:linear-gradient(160deg,rgba(201,168,106,.16),rgba(201,168,106,.05));border-color:rgba(201,168,106,.4)} .ico{ width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px; background:linear-gradient(150deg,var(--g700),var(--g900));color:var(--gold); } .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .card--dark .ico{background:linear-gradient(150deg,rgba(201,168,106,.25),rgba(201,168,106,.08));color:var(--gold-2)} .chip{ display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--line-strong);border-radius:99px;padding:5px 12px;color:var(--ink-2);background:#fff; } .chip--gold{background:var(--gold);color:var(--g950);border-color:var(--gold)} .chip--dark{background:transparent;color:var(--cream-70);border-color:var(--line-d-strong)} .chip-row{display:flex;gap:8px;flex-wrap:wrap} /* логотипы партнёров (слоты) */ .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .logo-slot{ height:74px;border-radius:14px;border:1px dashed var(--line-d-strong);display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--cream-50);text-align:center;padding:0 10px; transition:border-color .2s,color .2s; } .logo-slot:hover{border-color:var(--gold);color:var(--cream)} /* партнёры словесными знаками (заменяются на логотипы: внутри .logo-slot) */ .logo-wm{border-style:solid;border-color:var(--line-d);flex-direction:column;gap:5px;height:84px;background:rgba(255,255,255,.02);letter-spacing:0} .logo-wm b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--cream);line-height:1.1} .logo-wm span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-50)} .logo-wm:hover{background:rgba(255,255,255,.05);border-color:var(--gold)} .logo-wm:hover b{color:var(--gold-2)} .logo-slot img{max-height:38px;max-width:80%;object-fit:contain;filter:brightness(0) invert(1);opacity:.85} .sec--paper .logo-slot,.sec--sand .logo-slot{border-color:var(--line-strong);color:var(--muted)} /* ================= КАРТА С ПУЛЬСИРУЮЩИМИ ТОЧКАМИ ================= */ .map{position:relative;border-radius:var(--r);overflow:hidden} .map .img::after{opacity:.1} .hero-media .img .cap{max-width:50%} .pin{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px} .pin i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,168,106,.25)} .pin i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--gold);animation:pulse 2.4s ease-out infinite;opacity:0} .pin.origin i{background:var(--cream);box-shadow:0 0 0 4px rgba(244,241,232,.3)} .pin.origin i::after{border-color:var(--cream)} .pin span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--cream);background:rgba(14,24,18,.7);border:1px solid var(--line-d);padding:4px 10px;border-radius:8px;white-space:nowrap;backdrop-filter:blur(6px)} .pin.origin span{background:var(--gold);color:var(--g950);border-color:var(--gold);font-weight:600} @keyframes pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.8);opacity:0}} .pin:nth-child(3) i::after{animation-delay:.5s} .pin:nth-child(4) i::after{animation-delay:1s} .pin:nth-child(5) i::after{animation-delay:1.5s} .pin:nth-child(6) i::after{animation-delay:.8s} .route{position:absolute;inset:0;z-index:2;pointer-events:none} .route path{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:4 6;opacity:.55;animation:dash 14s linear infinite} @keyframes dash{to{stroke-dashoffset:-200}} /* ================= ПРОДУКТЫ ================= */ .product-card .spec{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);padding:9px 0;font-size:13.5px} .product-card .spec b{font-weight:650;color:var(--ink)} .product-card .spec span{color:var(--muted)} .product-card .uses{margin-top:14px;font-size:12.5px;color:var(--muted);font-style:italic} .banner{ display:grid;grid-template-columns:360px 1fr auto;gap:36px;align-items:center; background:linear-gradient(135deg,var(--g800),var(--g950));color:var(--cream); border-radius:calc(var(--r) + 6px);padding:34px 40px 34px 34px;border:1px solid var(--line-d); } .banner h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:10px} .banner p{color:var(--cream-70);font-size:15px;max-width:60ch} /* подробная карточка продукта (страница Продукция) */ .prod{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)} .prod:first-of-type{border-top:none} .prod:nth-child(even) .prod-media{order:2} .prod h3{font-family:var(--serif);font-weight:400;font-size:32px;margin:10px 0 14px} .prod .lead{font-size:16px} .prod-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} .prod-specs>div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff} .prod-specs .v{font-family:var(--serif);font-size:24px;color:var(--g700);line-height:1.1} .prod-specs .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px} .prod-uses{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap} /* ================= ЭТАПЫ ПРОИЗВОДСТВА (кликабельные) ================= */ .steps{display:flex;flex-wrap:wrap;gap:14px} .step{flex:1 1 170px;min-width:0} .step{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:24px 20px;cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s,border-color .25s; } .step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(201,168,106,.55)} .step .s-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold-deep)} .step h4{font-size:16px;margin:10px 0 8px;letter-spacing:-.01em} .step p{font-size:13px;color:var(--ink-2);line-height:1.55} .step .more{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--g700);text-transform:uppercase} .step .more::after{content:" +"} .step-detail{display:none} .step.open{flex:1 1 100%;order:-1;cursor:default;display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;padding:34px;background:var(--g900);color:var(--cream);border-color:var(--g900);transform:none} .step.open p{color:var(--cream-70);font-size:15px} .step.open h4{font-family:var(--serif);font-weight:400;font-size:30px;margin:12px 0 10px} .step.open .step-body{padding-right:8px} .step.open .s-num{color:var(--gold)} .step.open .more{display:none} .step.open .step-detail{display:block;font-size:14.5px;color:var(--cream-70);margin-top:12px;line-height:1.7} .step.open .step-detail b{color:var(--cream)} .step .step-media{display:none} .step.open .step-media{display:block} .step.open .close{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-d-strong);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:18px} .step .close{display:none} .step.open .close{display:flex} .sec--dark .step{background:rgba(244,241,232,.04);border-color:var(--line-d);color:var(--cream)} .sec--dark .step p{color:var(--cream-70)} .sec--dark .step .more{color:var(--gold)} .sec--dark .step.open{background:var(--g950)} /* диаграмма 20/80 */ .split{display:grid;grid-template-columns:38fr 62fr;gap:18px} .split-col{border-radius:var(--r);padding:34px;border:1px solid var(--line)} .split-col .big{font-family:var(--serif);font-size:clamp(44px,5vw,72px);line-height:1;color:var(--gold-deep)} .split-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:8px 0 18px} .split-col ul{display:grid;gap:9px} .split-col li{font-size:14.5px;color:var(--ink-2);padding-left:20px;position:relative} .split-col li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1.5px;background:var(--gold)} .split-col--dark{background:var(--g900);color:var(--cream);border-color:var(--g900)} .split-col--dark .big{color:var(--gold-2)} .split-col--dark li{color:var(--cream-70)} .split-col--sand{background:#fff} /* ================= ТАБЛИЦЫ ================= */ .table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff} .spec-table{width:100%;border-collapse:collapse} .spec-table th,.spec-table td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top} .spec-table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--sand);font-weight:600} .spec-table tr:last-child td{border-bottom:none} .spec-table td.val{font-family:var(--serif);font-size:20px;white-space:nowrap;color:var(--g700)} .spec-table tr:hover td{background:var(--paper)} .spec-table .muted{color:var(--muted)} /* ================= БЫЛО / СТАЛО ================= */ .ba{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;border:1px solid var(--line-d);user-select:none;background:var(--g900)} .ba .ba-side{position:absolute;inset:0} .ba .ba-after{clip-path:inset(0 0 0 50%)} .ba .ba-before .img,.ba .ba-after .img{position:absolute;inset:0;border-radius:0;min-height:0} .ba .ba-before .img{background:linear-gradient(150deg,#8a7a5a 0%,#6b5d42 50%,#4a4030 100%)} /* «пустыня» — песочные тона */ .ba .ba-lbl{position:absolute;top:16px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:6px 14px;border-radius:8px} .ba .ba-lbl--l{left:16px;background:rgba(244,241,232,.9);color:var(--ink)} .ba .ba-lbl--r{right:16px;background:var(--gold);color:var(--g950)} .ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0} .ba .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--cream);z-index:4} .ba .ba-handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--g950);display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:var(--shadow-d)} /* ================= КАЧЕСТВО: крупная цифра ================= */ .q-hero{display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:center} .q-hero .giant{font-family:var(--serif);font-size:clamp(96px,14vw,210px);line-height:.92;letter-spacing:-.03em;color:var(--gold-2)} .q-hero .giant small{font-size:.4em} .q-hero .giant .approx{font-size:.34em;vertical-align:.9em;margin-right:.06em;color:var(--cream-70)} .q-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-d)} .q-metrics .qm{padding:26px 26px 6px;border-left:1px solid var(--line-d)} .q-metrics .qm:first-child{border-left:none;padding-left:0} .qm .num{font-family:var(--serif);font-size:clamp(26px,2.6vw,38px);color:var(--cream)} .qm .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-50);margin-top:8px;line-height:1.5} /* ================= АККОРДЕОН ================= */ details.acc{border:1px solid var(--line);border-radius:var(--r-s);background:#fff;margin-bottom:12px;overflow:hidden;transition:border-color .2s} details.acc[open]{border-color:rgba(201,168,106,.6)} details.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;padding:20px 24px;font-weight:650;font-size:15.5px} details.acc summary::-webkit-details-marker{display:none} details.acc summary .acc-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:16px;transition:.25s;color:var(--ink-2)} details.acc[open] summary .acc-ic{transform:rotate(45deg);background:var(--gold);color:var(--g950);border-color:var(--gold)} details.acc .acc-body{padding:0 24px 22px;color:var(--ink-2);font-size:14.5px;max-width:80ch;line-height:1.7} /* ================= ТАБЫ / ФИЛЬТРЫ ================= */ .tabs{display:flex;gap:8px;flex-wrap:wrap} .tab{font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:99px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);transition:.2s} .tab:hover{border-color:var(--g700);color:var(--g700)} .tab.active{background:var(--g900);color:var(--cream);border-color:var(--g900)} .sec--dark .tab{background:transparent;color:var(--cream-70);border-color:var(--line-d-strong)} .sec--dark .tab.active{background:var(--gold);color:var(--g950);border-color:var(--gold)} [data-panel]{display:none} [data-panel].active{display:block} .hidden-by-filter{display:none!important} /* ================= ГАЛЕРЕЯ ================= */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .g-item .cap-row{display:flex;justify-content:space-between;gap:12px;padding:12px 4px 0;font-size:13.5px} .g-item .cap-row b{font-weight:650} .g-item .cap-row span{color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-top:3px} .g-item--wide{grid-column:span 2} /* ================= ДОКУМЕНТЫ ================= */ .doc-card{display:flex;gap:18px;align-items:flex-start} .doc-ic{flex:0 0 auto;width:54px;height:66px;border:1.5px solid var(--g700);border-radius:8px;position:relative;background:#fff} .doc-ic::before{content:"";position:absolute;top:0;right:0;width:16px;height:16px;background:var(--sand);border-left:1.5px solid var(--g700);border-bottom:1.5px solid var(--g700);border-radius:0 6px 0 6px} .doc-ic::after{content:"PDF";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.06em;background:var(--g900);color:var(--cream);padding:2px 6px;border-radius:4px} .doc-card h3{font-size:15.5px;margin:0 0 6px} .doc-card .d-meta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em} .doc-card .d-link{margin-top:10px;display:inline-flex} .doc-preview{border:1px solid var(--line);border-radius:14px;background:var(--sand);aspect-ratio:3/4;position:relative;overflow:hidden} .doc-preview::before{content:"";position:absolute;left:14%;right:14%;top:14%;height:8px;border-radius:4px;background:var(--line-strong);box-shadow:0 18px 0 var(--line),0 32px 0 var(--line),0 46px 0 var(--line),0 60px 0 var(--line),0 74px 0 var(--line)} .doc-preview .stamp{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--gold-deep);border:1.5px solid var(--gold);border-radius:6px;padding:3px 8px;transform:rotate(-6deg)} /* ================= ФОРМЫ ================= */ .form{display:grid;gap:16px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .field label .req{color:var(--gold-deep)} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;outline:none; transition:border-color .15s,box-shadow .15s; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(47,107,68,.14)} .field textarea{min-height:120px;resize:vertical} .form .fine{font-size:12px;color:var(--muted)} .form-card{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:40px;box-shadow:var(--shadow)} .sec--dark .form-card,.cta-banner .form-card{background:rgba(14,24,18,.55);border-color:var(--line-d-strong);box-shadow:var(--shadow-d)} .sec--dark .field input,.sec--dark .field select,.sec--dark .field textarea, .cta-banner .field input,.cta-banner .field select,.cta-banner .field textarea{background:rgba(244,241,232,.06);border-color:var(--line-d-strong);color:var(--cream)} .sec--dark .field input::placeholder,.cta-banner .field input::placeholder,.sec--dark .field textarea::placeholder,.cta-banner .field textarea::placeholder{color:var(--cream-30)} .sec--dark .field label,.cta-banner .field label{color:var(--cream-50)} .sec--dark .field select option,.cta-banner .field select option{color:var(--ink)} .sec--dark .form .fine,.cta-banner .form .fine{color:var(--cream-50)} /* ================= CTA-БАННЕР ================= */ .cta-banner{ position:relative;overflow:hidden;border-radius:calc(var(--r) + 8px);color:var(--cream);padding:72px 64px; background: radial-gradient(60% 80% at 90% 10%, rgba(201,168,106,.22) 0%, transparent 60%), linear-gradient(135deg,var(--g800) 0%,var(--g950) 100%); border:1px solid var(--line-d); } .cta-banner::before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;border:1px solid rgba(201,168,106,.35)} .cta-banner::after{content:"";position:absolute;right:-50px;top:-50px;width:280px;height:280px;border-radius:50%;border:1px dashed rgba(201,168,106,.4)} .cta-banner h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.12;letter-spacing:-.01em;max-width:22ch;color:var(--cream)} .cta-banner p{color:var(--cream-70);margin:16px 0 32px;max-width:56ch} .cta-banner .kicker{color:var(--gold)} .cta-banner .hero-actions,.cta-banner .form{position:relative;z-index:2} /* ================= ТАЙМЛАЙН ================= */ .timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--line-d-strong);margin-top:20px} .tl-item{padding:28px 24px 0;border-left:1px solid var(--line-d);position:relative} .tl-item:first-child{border-left:none;padding-left:0} .tl-item::before{content:"";position:absolute;top:-8px;left:24px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--g900)} .tl-item:first-child::before{left:0} .tl-item .year{font-family:var(--serif);font-size:34px;color:var(--gold-2)} .tl-item h4{font-size:15px;margin:10px 0 6px;color:var(--cream)} .tl-item p{font-size:13.5px;color:var(--cream-70)} /* ================= ВЫГОДЫ / СПИСКИ ================= */ .feature{display:flex;gap:18px;align-items:flex-start} .feature .n{flex:0 0 auto;font-family:var(--serif);font-size:30px;color:var(--gold-deep);line-height:1;min-width:44px} .feature h4{font-size:17px;margin-bottom:6px} .feature p{font-size:14.5px;color:var(--ink-2)} .sec--dark .feature h4{color:var(--cream)} .sec--dark .feature p{color:var(--cream-70)} .sec--dark .feature .n{color:var(--gold)} .check{display:flex;gap:14px;align-items:flex-start;font-size:15px} .check::before{content:"✓";flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--g950);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px} .quote{ font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.4;color:var(--cream); border-left:2px solid var(--gold);padding-left:28px;max-width:34ch; } .quote-src{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:16px} .note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--muted);border-left:2px solid var(--gold);padding:2px 0 2px 14px;line-height:1.6} .sec--dark .note{color:var(--cream-50)} /* ================= ФУТЕР ================= */ footer.site{background:var(--g950);color:var(--cream-70);padding:80px 0 0;border-top:1px solid var(--line-d)} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:56px} .f-brand img{height:56px;width:auto;aspect-ratio:700/430;margin-bottom:20px} footer .f-about{font-size:13.5px;color:var(--cream-50);max-width:36ch;line-height:1.75} footer h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px} footer .f-col a{display:block;font-size:14px;color:var(--cream-70);padding:5px 0;transition:color .15s} footer .f-col a:hover{color:var(--cream)} footer .f-contact div{font-size:14px;padding:5px 0;color:var(--cream-70)} footer .f-contact b{color:var(--cream);font-weight:600} footer .f-contact a:hover{color:var(--gold-2)} .f-social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .f-social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d-strong);display:flex;align-items:center;justify-content:center;color:var(--cream-70);transition:.2s} .f-social a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .f-social a:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)} .f-bottom{border-top:1px solid var(--line-d);padding:22px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:12.5px;color:var(--cream-50)} .f-bottom>span:last-child{text-align:right} .f-dev{text-align:center} .f-dev a{color:var(--cream-70);border-bottom:1px solid var(--line-d-strong)} .f-dev a:hover{color:var(--gold-2);border-color:var(--gold)} @media (max-width:720px){.f-bottom{grid-template-columns:1fr;text-align:center}.f-bottom>span:last-child{text-align:center}} .f-bottom a{color:var(--cream-70)} .f-bottom a:hover{color:var(--cream)} .f-disclaimer{font-size:11.5px;color:var(--cream-30);padding:0 0 26px;max-width:100ch;line-height:1.65} /* ================= ГЕРОЙ ПОДСТРАНИЦ ================= */ .page-hero{ position:relative;color:var(--cream);padding:calc(var(--top-h) + 56px) 0 64px;overflow:hidden; background: radial-gradient(60% 70% at 85% 10%, rgba(59,127,82,.3) 0%, transparent 60%), linear-gradient(180deg,var(--g950),var(--g900)); } .page-hero .container{position:relative;z-index:2} .crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--cream-50);margin-bottom:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .crumbs a:hover{color:var(--cream)} .crumbs .sep{color:var(--cream-30)} .page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,62px);letter-spacing:-.015em;line-height:1.06;max-width:22ch} .page-hero .lead{margin-top:18px;color:var(--cream-70)} .page-hero .hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} .page-hero .glow{position:absolute;right:-10vw;top:-20vw;width:50vw;height:50vw;border-radius:50%;background:var(--g600);filter:blur(100px);opacity:.22} .page-hero--split .container{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} /* ================= ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ================= */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s} .hero-copy > *{opacity:0;transform:translateY(18px);animation:up .9s var(--ease) forwards} .hero-copy > :nth-child(1){animation-delay:.15s}.hero-copy > :nth-child(2){animation-delay:.3s} .hero-copy > :nth-child(3){animation-delay:.45s}.hero-copy > :nth-child(4){animation-delay:.6s} .hero-media{opacity:0;animation:up 1.1s var(--ease) .5s forwards} @keyframes up{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .reveal,.hero-copy > *,.hero-media{opacity:1;transform:none;transition:none;animation:none} .marquee-track,.hero-glow,.pin i::after,.route path{animation:none} } /* ================= УТИЛИТЫ ================= */ .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px} .mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px} .center{text-align:center}.muted{color:var(--muted)}.mono{font-family:var(--mono)} .serif{font-family:var(--serif);font-weight:400} .gold{color:var(--gold-deep)} .sec--dark .gold{color:var(--gold-2)} /* ================= АДАПТИВ ================= */ @media (max-width:1180px){ nav.main .nav-link{padding:9px 10px;font-size:13.5px} } @media (max-width:1080px){ header.site .container{display:flex} nav.main,.header-cta{display:none} .burger{display:flex} .hero-grid{grid-template-columns:1fr;gap:44px} .sec-head{grid-template-columns:1fr;gap:12px} .statline .container{grid-template-columns:repeat(2,1fr)} .statline .stat:nth-child(3){border-left:none;padding-left:0} .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)} .grid-6{grid-template-columns:repeat(3,1fr)} .logos{grid-template-columns:repeat(3,1fr)} .step{flex-basis:calc(33.33% - 10px)} .step.open{grid-template-columns:1fr} .banner{grid-template-columns:1fr;padding:28px} .q-hero{grid-template-columns:1fr;gap:36px} .timeline{grid-template-columns:repeat(2,1fr);row-gap:36px} .f-grid{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr} .gallery{grid-template-columns:repeat(2,1fr)} .prod{grid-template-columns:1fr;gap:28px} .prod:nth-child(even) .prod-media{order:0} .page-hero--split .container{grid-template-columns:1fr} .prod-specs{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ :root{--top-h:72px} section.sec{padding:68px 0} .container{padding:0 18px} .grid-2,.grid-3,.grid-4,.grid-6,.logos{grid-template-columns:1fr} .logos{grid-template-columns:1fr 1fr} .statline .container{grid-template-columns:1fr 1fr} .statline .stat{padding:26px 16px 28px} .step{flex-basis:calc(50% - 7px)} .form-row{grid-template-columns:1fr} .gallery{grid-template-columns:1fr} .g-item--wide{grid-column:span 1} .hero-bg .cap{display:none} .cta-banner{padding:48px 26px} .float-card--tl{left:8px;top:-16px}.float-card--br{right:8px;bottom:-16px} .timeline{grid-template-columns:1fr} .q-metrics{grid-template-columns:1fr;border-top:none} .q-metrics .qm{border-left:none;border-top:1px solid var(--line-d);padding-left:0} .prod-specs{grid-template-columns:1fr 1fr} .hero-grid{padding-bottom:56px} .f-grid{grid-template-columns:1fr} } /* ============================================================ ГОТОВЫЙ САЙТ: реальные фото, настоящая карта, лайтбокс, прелоадер, кнопка «наверх», финальные анимации ============================================================ */ /* фото в слотах */ .img.has-img::before,.img.has-img::after{display:none} .img.has-img{background:var(--g900)} .img.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.1s var(--ease),opacity .6s;opacity:0} .img.has-img img.loaded{opacity:1} .card:hover .img.has-img img,.g-item:hover .img.has-img img,.prod:hover .img.has-img img{transform:scale(1.07)} .img.has-img::after{content:"";display:block;position:absolute;inset:0;left:0;top:0;width:100%;height:100%;transform:none;opacity:1;pointer-events:none; background:linear-gradient(180deg,rgba(14,24,18,0) 55%,rgba(14,24,18,.35) 100%)} .img.has-img.video[data-video]:not([data-video=""])::after{display:block;width:78px;height:78px;left:50%;top:50%;inset:auto;transform:translate(-50%,-50%);border-radius:50%;opacity:1;cursor:pointer;pointer-events:auto;transition:transform .35s var(--ease); background:url("data:image/svg+xml;utf8,") center/34% no-repeat,var(--gold); box-shadow:0 16px 40px -10px rgba(0,0,0,.6)} .img.has-img.video[data-video]:not([data-video=""]):hover::after{transform:translate(-50%,-50%) scale(1.08)} .img.has-img img.broken{opacity:0} .lightbox .lb-video{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)} .lightbox .lb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .lightbox .lb-video:empty{display:none} .gallery .img.has-img,.media-grid .img.has-img{cursor:zoom-in} .hero-media .img.has-img img{transform:scale(1.03)} /* фон первого экрана — фото с медленным наездом */ .hero-bg{background-size:cover;background-position:center 35%;opacity:.5;filter:blur(2.5px) saturate(.85);animation:kb 40s ease-in-out infinite alternate;transform-origin:center} .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,18,.7) 0%,rgba(14,24,18,.55) 45%,rgba(18,32,25,.96) 100%),linear-gradient(90deg,rgba(14,24,18,.6) 0%,rgba(14,24,18,.25) 55%,rgba(14,24,18,.2) 100%)} .hero-media .img{box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(244,241,232,.12)} @media (max-width:640px){.hero-bg{background-image:url("photos/hero-bg-m.jpg?v=20260924e")!important}} @keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}} /* настоящая карта */ .map--geo{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-d);box-shadow:var(--shadow-d)} .map--geo svg.geo{position:absolute;inset:0;width:100%;height:100%;display:block} .map--geo .grat{fill:none;stroke:rgba(244,241,232,.05);stroke-width:1} .map--geo .land path{fill:rgba(244,241,232,.075)} .map--geo .hi path{fill:rgba(201,168,106,.17)} .map--geo .origin path{fill:rgba(201,168,106,.62)} .map--geo .borders{fill:none;stroke:rgba(244,241,232,.2);stroke-width:.7} .map--geo .routes .rt{fill:none;stroke:var(--gold-2);stroke-width:1.4;stroke-dasharray:5 7;opacity:.85;animation:dash 16s linear infinite} .map--geo .routes .rt:nth-child(2){animation-duration:19s}.map--geo .routes .rt:nth-child(3){animation-duration:14s} .map--geo .routes .rt:nth-child(4){animation-duration:21s}.map--geo .routes .rt:nth-child(5){animation-duration:17s} .map--geo .pin span{font-size:11px} .map--geo .pin.origin span{box-shadow:0 8px 24px -8px rgba(201,168,106,.8)} /* карты Google в контактах */ .gmap{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(14,24,18,.06) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(14,24,18,.06) 39px 40px) var(--sand)} .gmap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85)} /* прелоадер — один раз за сессию */ #preloader{position:fixed;inset:0;z-index:2000;background:var(--g950);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .7s var(--ease),visibility .7s} #preloader img{width:min(200px,50vw);aspect-ratio:700/430;opacity:0;animation:plFade .8s ease .1s forwards} #preloader span{width:160px;height:1.5px;background:rgba(244,241,232,.12);position:relative;overflow:hidden;border-radius:2px} #preloader span::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);animation:plBar 1.2s var(--ease) .2s forwards} #preloader.done{opacity:0;visibility:hidden} body.no-preloader #preloader{display:none} @keyframes plFade{to{opacity:1}}@keyframes plBar{to{width:100%}} /* лайтбокс */ .lightbox{position:fixed;inset:0;z-index:1900;background:rgba(10,18,14,.94);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s} .lightbox.open{opacity:1;visibility:visible} .lightbox img{max-width:min(1400px,100%);max-height:100%;border-radius:14px;box-shadow:var(--shadow-d);transform:scale(.96);transition:transform .45s var(--ease)} .lightbox.open img{transform:scale(1)} .lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-d-strong);color:var(--cream);font-size:26px;display:flex;align-items:center;justify-content:center;transition:.2s} .lb-close:hover{border-color:var(--gold);color:var(--gold-2)} /* кнопка наверх */ .to-top{position:fixed;right:22px;bottom:22px;z-index:1150;width:48px;height:48px;border-radius:50%;background:var(--g900);color:var(--cream);border:1px solid var(--line-d-strong);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background .2s} .to-top svg{width:20px;height:20px} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--gold);color:var(--g950);border-color:var(--gold)} /* финальные анимации: этапы, карточки */ .step.open .step-body,.step.open .step-media{animation:fadeIn .6s var(--ease) both} .step.open .step-media{animation-delay:.12s} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .reveal{transition-duration:.95s} .hero-media{will-change:transform} /* аккуратный текст в формах */ .form .fine a{border-bottom:1px solid currentColor} @media (prefers-reduced-motion:reduce){.hero-bg{animation:none}.map--geo .routes .rt{animation:none}#preloader{display:none}} @media (max-width:640px){.to-top{right:14px;bottom:14px;width:42px;height:42px}.lightbox{padding:16px}} /* ---- адаптив: карточки с превью документа, split, главная новость ---- */ .split--even{grid-template-columns:1fr 1fr} [data-doc-card]{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center} [data-doc-card="140"]{grid-template-columns:140px 1fr;gap:24px} [data-feature-card]{display:grid;grid-template-columns:1.2fr 1fr;gap:0;overflow:hidden;padding:0;margin-bottom:22px} [data-feature-card]>.img{margin:0;border-radius:0;min-height:360px;height:100%} [data-feature-card]>.img+div{padding:48px 56px!important;align-self:center} .card h3,.step h4,.step p,.split-col li{overflow-wrap:anywhere} @media (max-width:900px){ [data-feature-card]{grid-template-columns:1fr} [data-feature-card]>.img{min-height:240px!important} [data-feature-card]>.img+div{padding:28px 26px 32px!important} } @media (max-width:720px){ .split,.split--even{grid-template-columns:1fr} [data-doc-card],[data-doc-card="140"]{grid-template-columns:1fr;gap:16px} [data-doc-card] .doc-preview{max-width:180px} .step{flex-basis:calc(50% - 7px)} } @media (max-width:420px){ .step{flex-basis:100%} } @media (max-width:720px){ .map--geo .pin span{display:none} .map--geo .pin.origin span{display:block;font-size:9.5px;padding:3px 8px} .map--geo .pin i{width:9px;height:9px} } /* карта: широкая версия на десктопе, 4:3 на мобильных; легенда направлений — только на мобильных */ .map--tall{display:none} .map-legend{display:none;flex-wrap:wrap;gap:8px;margin-top:14px} .map-legend .chip{font-size:10px} @media (max-width:720px){ .map--wide{display:none} .map--tall{display:block} .map-legend{display:flex} } /* ============================================================ ПРАВКИ v1.1 — герой, карусель логотипов, компания + карта ============================================================ */ /* герой: компактнее, подзаголовок отдельно */ h1.display--hero{font-size:clamp(38px,4.6vw,64px);line-height:1.05;margin:8px 0 14px} .hero-copy{container-type:inline-size} @supports (font-size:1cqi){h1.display--hero{font-size:clamp(30px,9.6cqi,64px)}} .hero-sub{font-family:var(--serif);font-size:clamp(20px,2.1vw,30px);line-height:1.25;color:var(--cream);letter-spacing:-.005em;margin:0 0 22px} .hero-lead{font-size:15.5px;line-height:1.65;color:var(--cream-70);max-width:30em;text-wrap:balance;margin:0 0 34px} .hero-copy > :nth-child(5){animation-delay:.75s} .hero-media .img{border-radius:var(--r)} /* вращающаяся плашка «2–3 урожая» */ .badge-spin{position:absolute;left:-44px;bottom:-38px;width:184px;height:184px;z-index:4;animation:up 1s var(--ease) 1s both} .badge-spin::before{content:"";position:absolute;inset:3.5%;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(28,48,36,.94) 0%,rgba(12,21,15,.95) 70%);border:1px solid rgba(201,168,106,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 26px 60px -18px rgba(0,0,0,.75),0 0 0 7px rgba(201,168,106,.10),0 0 46px -4px rgba(201,168,106,.42)} .badge-spin svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite;overflow:visible} .badge-spin svg text{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;fill:var(--gold-2);text-transform:uppercase} .badge-spin .badge-ring{position:absolute;inset:15.5%;border-radius:50%;border:1px solid rgba(220,193,138,.28)} .badge-spin .badge-core{position:absolute;inset:19.5%;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1; background:radial-gradient(circle at 32% 24%,#f8eac4 0%,#e6cd97 26%,#c9a86a 60%,#9a7a41 100%); box-shadow:0 14px 30px -10px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.65),inset 0 -10px 18px rgba(110,78,28,.38); transition:transform .5s var(--ease)} .badge-spin .badge-core::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);background-size:260% 100%;background-position:160% 0;animation:badge-shine 5s ease-in-out 1.8s infinite;pointer-events:none} .badge-spin .badge-core b{position:relative;font-family:var(--serif);font-weight:400;font-size:38px;color:var(--g950);letter-spacing:-.035em;white-space:nowrap} .badge-spin .badge-core span{position:relative;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(14,24,18,.78);margin-top:6px;line-height:1.35} .badge-spin:hover .badge-core{transform:scale(1.05)} .badge-spin::after{content:"";position:absolute;inset:3.5%;border-radius:50%;border:1px solid rgba(201,168,106,.6);animation:ring 3.2s ease-out infinite} @keyframes badge-shine{0%{background-position:160% 0}45%,100%{background-position:-60% 0}} @media (prefers-reduced-motion:reduce){.badge-spin svg,.badge-spin::after,.badge-spin .badge-core::after{animation:none}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.28);opacity:0}} .hero-media .float-card{display:none} /* карусель логотипов партнёров (справа налево) */ .logos-marquee{background:var(--g950);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:26px 0 30px} .lm-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap} .lm-head .note{margin:0;padding:0;border:0;color:var(--cream-50);font-size:12.5px} .logos-marquee .marquee{padding:0;border:0;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .logos-marquee .marquee-track{gap:18px;animation-duration:55s} .lg{flex:0 0 auto;display:flex;align-items:center;gap:14px;height:72px;padding:0 22px;border-radius:14px;background:rgba(244,241,232,.95);border:1px solid rgba(244,241,232,.2);min-width:220px;transition:transform .3s var(--ease),box-shadow .3s} .lg:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(0,0,0,.7)} .lg img{height:32px;max-width:120px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.85;transition:filter .3s,opacity .3s} .lg:hover img{filter:none;opacity:1} .lg .lg-wm{display:flex;flex-direction:column;line-height:1.15} .lg .lg-wm b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--g900)} .lg .lg-wm small{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px} .lg.nologo img{display:none} .lg:not(.nologo) .lg-wm b{font-size:15px} /* блок «О компании»: карта без рамки, факты — строки с иконками */ .company-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center} .company-copy .h-sec{font-size:clamp(28px,3.2vw,44px)} .facts{display:grid;gap:10px} .fact{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;padding:12px 16px 12px 12px;border-radius:14px;border:1px solid var(--line-d);background:rgba(244,241,232,.03);color:var(--cream);transition:background .2s,border-color .2s,transform .25s var(--ease)} .fact:hover{background:rgba(244,241,232,.07);border-color:var(--line-d-strong);transform:translateX(4px)} .fact .fi{width:44px;height:44px;border-radius:12px;background:rgba(201,168,106,.12);display:flex;align-items:center;justify-content:center} .fact .fi svg{width:20px;height:20px;fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .fact .ft{display:flex;flex-direction:column;gap:2px;line-height:1.3} .fact .ft b{font-size:15px;font-weight:600} .fact .ft small{font-size:12.5px;color:var(--cream-50)} .fact .arr{color:var(--gold-2);transition:transform .25s var(--ease)} .fact:hover .arr{transform:translateX(4px)} .map--geo.map--bare{border:0;box-shadow:none;border-radius:0;overflow:visible;background:transparent} .map--geo.map--bare svg.geo{overflow:visible} .company-map .note{border-left-color:var(--line-d-strong)} /* «поставки» — движущиеся точки по маршрутам */ .map--geo .ship-dot{fill:var(--gold-2)} .map--geo .ship-glow{fill:rgba(201,168,106,.28)} .map--geo .routes .rt{transition:opacity .3s,stroke-width .3s} .map--geo.routes-focus .routes .rt{opacity:.22} .map--geo.routes-focus .routes .rt.active{opacity:1;stroke-width:2.2;stroke-dasharray:none;animation:none} .map--geo .pin{cursor:pointer} .map--geo .pin:not(.origin) i{transition:transform .25s var(--ease),box-shadow .25s} .map--geo .pin.active i,.map--geo .pin:hover i{transform:scale(1.35);box-shadow:0 0 0 6px rgba(201,168,106,.25)} .map--geo .pin.active span{background:var(--gold);color:var(--g950);border-color:var(--gold)} /* продукция — фото крупнее */ .product-grid .product-card .img{aspect-ratio:1/1.05} .product-grid .product-card h3{font-size:19px} @media (max-width:1080px){ .company-grid{grid-template-columns:1fr;gap:40px} .badge-spin{left:auto;right:-10px;bottom:-26px;width:148px;height:148px} .badge-spin .badge-core b{font-size:31px} .badge-spin .badge-core span{font-size:7.5px;margin-top:4px} } @media (max-width:640px){ .badge-spin{width:128px;height:128px;right:-6px;bottom:-20px} .badge-spin svg text{font-size:11.5px} .badge-spin .badge-core b{font-size:26px} .badge-spin .badge-core span{font-size:6.5px;letter-spacing:.12em;margin-top:3px} .lg{height:62px;min-width:180px;padding:0 16px} .lg img{height:26px} .fact{grid-template-columns:40px 1fr auto;gap:12px} } /* ============================================================ СТЕППЕР ЭТАПОВ ПРОИЗВОДСТВА (главная + «Производство») ============================================================ */ .stepper{margin-top:8px} .stepper-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px} .st-tab{ position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left; padding:16px 16px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,background .3s;overflow:hidden;min-height:118px; } .st-tab:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)} .st-tab .st-ico{width:38px;height:38px;border-radius:11px;background:var(--sand);display:flex;align-items:center;justify-content:center;transition:background .3s} .st-tab .st-ico svg{width:20px;height:20px;fill:none;stroke:var(--g700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s} .st-tab .st-num{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .st-tab .st-title{font-weight:600;font-size:14.5px;line-height:1.25;color:var(--ink);margin-top:-4px} .st-tab .st-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;opacity:0} .st-tab.is-active{background:var(--g900);border-color:var(--g900);color:var(--cream)} .st-tab.is-active .st-ico{background:rgba(201,168,106,.16)} .st-tab.is-active .st-ico svg{stroke:var(--gold-2)} .st-tab.is-active .st-num{color:var(--gold-2)} .st-tab.is-active .st-title{color:var(--cream)} .st-tab.is-active .st-bar{opacity:1} .stepper.is-playing .st-tab.is-active .st-bar{animation:stbar var(--st-dur,7s) linear forwards} .stepper.is-paused .st-tab.is-active .st-bar{animation-play-state:paused} @keyframes stbar{from{transform:scaleX(0)}to{transform:scaleX(1)}} .st-tab.is-done .st-num::after{content:" ✓";color:var(--g600)} .stepper-panels{position:relative} .st-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;background:var(--g900);color:var(--cream);border-radius:var(--r);padding:38px 40px;animation:stin .55s var(--ease)} .st-panel[hidden]{display:none} @keyframes stin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .st-panel .s-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)} .st-panel .s-of{color:var(--cream-50)} .st-panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);margin:12px 0 10px;color:var(--cream)} .st-panel .st-sum{color:var(--cream);font-size:16px} .st-panel .st-detail{color:var(--cream-70);font-size:14.5px;line-height:1.7;margin-top:12px} .st-panel .st-detail b{color:var(--cream)} .st-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .st-chips .chip{background:transparent;color:var(--cream-70);border-color:var(--line-d-strong)} .st-nav{display:flex;gap:10px;margin-top:26px;align-items:center} .st-prev,.st-next{border-radius:99px;border:1px solid var(--line-d-strong);color:var(--cream);padding:11px 18px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:.25s;cursor:pointer;background:transparent} .st-prev{width:44px;height:44px;padding:0;justify-content:center} .st-next{background:var(--gold);color:var(--g950);border-color:var(--gold)} .st-next:hover{background:var(--gold-2)} .st-prev:hover{background:rgba(244,241,232,.08)} .st-next .arr{transition:transform .25s} .st-next:hover .arr{transform:translateX(3px)} .st-media{border-radius:var(--r-s);min-height:300px} .st-hint{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)} .st-hint svg{width:18px;height:18px;fill:none;stroke:var(--gold-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:tap 2.4s ease-in-out infinite} @keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}} .sec--dark .st-tab{background:rgba(244,241,232,.04);border-color:var(--line-d)} @media (max-width:1080px){ .stepper-tabs{grid-template-columns:repeat(3,1fr)} .st-panel{grid-template-columns:1fr;padding:28px} .st-panel .st-media{order:-1;min-height:0;width:100%} } @media (max-width:640px){ .stepper-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;margin:0 -18px 14px;padding-left:18px;padding-right:18px;scrollbar-width:none} .stepper-tabs::-webkit-scrollbar{display:none} .st-tab{flex:0 0 46%;scroll-snap-align:start;min-height:104px;padding:14px} .st-panel{padding:22px 18px} .st-panel h3{font-size:24px} } /* статичные шаги/процессы с иконками и соединительной линией */ .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative} .flow-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:24px 22px 26px;transition:transform .3s var(--ease),box-shadow .3s} .flow-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .flow-item::after{content:"";position:absolute;right:-14px;top:44px;width:14px;height:1px;background:var(--line-strong)} .flow-item:last-child::after{display:none} .flow-ico{width:48px;height:48px;border-radius:14px;background:var(--g900);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:transform .35s var(--ease)} .flow-item:hover .flow-ico{transform:rotate(-6deg) scale(1.06)} .flow-ico svg{width:22px;height:22px;fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .flow-item .s-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .flow-item h4{font-size:16.5px;margin:8px 0 8px} .flow-item p{font-size:14px;color:var(--ink-2)} @media (max-width:1080px){.flow{grid-template-columns:repeat(2,1fr)}.flow-item::after{display:none}} @media (max-width:640px){.flow{grid-template-columns:1fr}} /* ============================================================ ПРЕИМУЩЕСТВА — «прожектор» за курсором, рисующиеся иконки, нумерация ============================================================ */ .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .adv{ --mx:50%;--my:50%;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:30px 28px 28px;min-height:250px;display:flex;flex-direction:column; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; } .adv::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(201,168,106,.16),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none} .adv::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--gold) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none} .adv:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(14,24,18,.35);border-color:var(--line-strong)} .adv:hover::before{opacity:1} .adv:hover::after{opacity:1;animation:rot 3s linear infinite} @property --ang{syntax:"";inherits:false;initial-value:0deg} @keyframes rot{to{--ang:360deg}} .adv-n{position:absolute;right:22px;top:14px;font-family:var(--serif);font-size:64px;line-height:1;color:var(--sand);letter-spacing:-.04em;transition:color .35s,transform .5s var(--ease)} .adv:hover .adv-n{color:rgba(201,168,106,.35);transform:translateY(-4px) scale(1.06)} .adv-ico{position:relative;width:56px;height:56px;border-radius:16px;background:var(--g900);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:transform .45s var(--ease),background .35s} .adv-ico::after{content:"";position:absolute;inset:-5px;border-radius:20px;border:1px solid rgba(201,168,106,.5);opacity:0;transform:scale(.9);transition:.4s var(--ease)} .adv:hover .adv-ico{transform:rotate(-8deg) scale(1.05);background:var(--g700)} .adv:hover .adv-ico::after{opacity:1;transform:scale(1)} .adv-ico svg{width:26px;height:26px;fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .adv.in .adv-ico svg path,.adv.in .adv-ico svg circle{stroke-dasharray:80;stroke-dashoffset:80;animation:draw 1.4s var(--ease) .25s forwards} @keyframes draw{to{stroke-dashoffset:0}} .adv h3{font-size:19px;margin-bottom:10px;position:relative} .adv p{font-size:14.5px;color:var(--ink-2);position:relative;flex:1} .adv-tag{position:relative;display:inline-block;margin-top:18px;align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--line-strong);border-radius:99px;padding:5px 10px;transition:.3s} .adv:hover .adv-tag{background:var(--g900);color:var(--gold-2);border-color:var(--g900)} @media (max-width:1080px){.adv-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.adv-grid{grid-template-columns:1fr}.adv{min-height:0}} /* устойчивое развитие: фото на всю высоту, карточки с иконками одного размера */ .eco-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:stretch} .eco-media{position:relative;display:flex} .eco-img{flex:1;aspect-ratio:auto;min-height:520px;height:100%} .eco-badge{position:absolute;left:22px;bottom:22px;z-index:4;background:rgba(14,24,18,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-d-strong);border-radius:14px;padding:12px 16px;color:var(--cream);display:flex;flex-direction:column;gap:2px;max-width:calc(100% - 44px)} .eco-badge b{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--gold-2);letter-spacing:.02em} .eco-badge span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-50)} .eco-copy{display:flex;flex-direction:column;justify-content:center} .eco-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px} .eco-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:22px 22px 20px;display:flex;flex-direction:column;min-height:172px;transition:transform .3s var(--ease),box-shadow .3s} .eco-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .eco-ico{width:42px;height:42px;border-radius:12px;background:var(--sand);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .eco-ico svg{width:20px;height:20px;fill:none;stroke:var(--g700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .eco-val{font-family:var(--serif);font-size:28px;line-height:1.05;color:var(--g700)} .eco-card p{font-size:13.5px;color:var(--ink-2);margin-top:8px} @media (max-width:1080px){.eco-grid{grid-template-columns:1fr;gap:32px}.eco-media{display:block}.eco-img{width:100%;height:auto;min-height:0;aspect-ratio:16/10}} @media (max-width:640px){.eco-cards{grid-template-columns:1fr}.eco-card{min-height:0}} /* ============================================================ КАСТОМНЫЙ ВЫПАДАЮЩИЙ СПИСОК «Цель обращения» (с иконками) ============================================================ */ .sel{position:relative} .sel-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0} .sel-btn{ width:100%;display:flex;align-items:center;gap:12px;text-align:left;font:inherit;font-size:15px;color:var(--ink); background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:11px 14px 11px 12px;cursor:pointer;outline:none; transition:border-color .15s,box-shadow .15s; } .sel-btn:focus-visible,.sel.open .sel-btn{border-color:var(--g600);box-shadow:0 0 0 3px rgba(47,107,68,.14)} .sel-ico{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--sand);display:flex;align-items:center;justify-content:center} .sel-ico svg{width:16px;height:16px;fill:none;stroke:var(--g700);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .sel-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sel-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .25s var(--ease)} .sel.open .sel-chev{transform:rotate(180deg)} .sel-list{ position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:6px;list-style:none; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -25px rgba(14,24,18,.45); opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s; } .sel.open .sel-list{opacity:1;visibility:visible;transform:none} .sel-opt{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;font-size:14.5px;color:var(--ink);cursor:pointer;transition:background .15s} .sel-opt:hover,.sel-opt.is-focus{background:var(--sand)} .sel-opt.is-selected{background:var(--g900);color:var(--cream)} .sel-opt.is-selected .sel-ico{background:rgba(201,168,106,.18)} .sel-opt.is-selected .sel-ico svg{stroke:var(--gold-2)} /* тёмные формы */ .sec--dark .sel-btn,.cta-banner .sel-btn{background:rgba(244,241,232,.06);border-color:var(--line-d-strong);color:var(--cream)} .sec--dark .sel-btn .sel-ico,.cta-banner .sel-btn .sel-ico{background:rgba(201,168,106,.14)} .sec--dark .sel-btn .sel-ico svg,.cta-banner .sel-btn .sel-ico svg{stroke:var(--gold-2)} .sec--dark .sel-list,.cta-banner .sel-list{background:var(--g900);border-color:var(--line-d-strong);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)} .sec--dark .sel-opt,.cta-banner .sel-opt{color:var(--cream-70)} .sec--dark .sel-opt:hover,.sec--dark .sel-opt.is-focus,.cta-banner .sel-opt:hover,.cta-banner .sel-opt.is-focus{background:rgba(244,241,232,.07);color:var(--cream)} .sec--dark .sel-opt .sel-ico,.cta-banner .sel-opt .sel-ico{background:rgba(244,241,232,.06)} .sec--dark .sel-opt .sel-ico svg,.cta-banner .sel-opt .sel-ico svg{stroke:var(--cream-70)} .sec--dark .sel-opt.is-selected,.cta-banner .sel-opt.is-selected{background:var(--gold);color:var(--g950)} .sec--dark .sel-opt.is-selected .sel-ico,.cta-banner .sel-opt.is-selected .sel-ico{background:rgba(14,24,18,.15)} .sec--dark .sel-opt.is-selected .sel-ico svg,.cta-banner .sel-opt.is-selected .sel-ico svg{stroke:var(--g950)} /* контакты: две карточки рядом; сам номер и email — строго в одну строку (JS подгоняет размер шрифта) */ .contact-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px} .contact-pair .card{min-width:0} .card h3.contact-val{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;letter-spacing:-.015em;margin-top:10px;white-space:nowrap;overflow:hidden} @media (max-width:640px){.contact-pair{grid-template-columns:1fr}.card h3.contact-val{font-size:24px}} /* якоря не прячутся под фиксированной шапкой */ [id]{scroll-margin-top:calc(var(--top-h) + 16px)} /* ---- WeChat: кнопка с всплывающей подсказкой (пока нет ID/QR) ---- */ .wechat{position:relative;display:inline-flex} .wechat-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d-strong);display:flex;align-items:center;justify-content:center;color:var(--cream-70);transition:.2s;cursor:pointer;background:transparent;font:inherit} .wechat-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .wechat-btn:hover,.wechat.open .wechat-btn{border-color:var(--gold);color:var(--gold-2)} .wechat-pop{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);min-width:220px;padding:12px 14px;border-radius:12px;background:var(--g900);color:var(--cream-70);border:1px solid var(--line-d-strong);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);font-size:12.5px;line-height:1.5;text-align:center;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s;z-index:30} .wechat-pop::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--g900)} .wechat-pop b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px} .wechat-pop a{color:var(--cream);border-bottom:1px solid var(--gold);white-space:nowrap} .wechat.open .wechat-pop{opacity:1;visibility:visible;transform:translate(-50%,0)} .f-social .wechat-pop a,.wechat-pop a{display:inline;width:auto;height:auto;border-radius:0;border:0;border-bottom:1px solid var(--gold);color:var(--cream);font-size:14px;font-weight:600;letter-spacing:.01em} .wechat-pop a:hover{color:var(--gold-2)} @media (max-width:640px){.wechat-pop{left:auto;right:-8px;transform:translate(0,6px)}.wechat.open .wechat-pop{transform:translate(0,0)}.wechat-pop::after{left:auto;right:22px}} /* ---- лупа на фото продукции: при наведении увеличивается текстура ---- */ .prod-media .img.has-img{cursor:zoom-in} .prod-media .img.has-img img{transition:opacity .6s} .loupe{position:absolute;width:190px;height:190px;border-radius:50%;pointer-events:none;z-index:6;border:2px solid rgba(244,241,232,.9);box-shadow:0 20px 50px -18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(14,24,18,.25);background-repeat:no-repeat;opacity:0;transform:scale(.85);transition:opacity .2s var(--ease),transform .25s var(--ease)} .loupe.on{opacity:1;transform:scale(1)} .loupe-hint{position:absolute;left:14px;top:14px;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:rgba(14,24,18,.55);border:1px solid var(--line-d);padding:5px 9px;border-radius:8px;display:flex;align-items:center;gap:6px;transition:opacity .3s} .loupe-hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .prod-media .img.has-img:hover .loupe-hint{opacity:0} @media (hover:none){.loupe,.loupe-hint{display:none}.prod-media .img.has-img{cursor:default}} /* светлая лента цифр (страница «Инвесторам») */ .statline--light{border-top:0;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden} .statline--light .stat{border-left-color:var(--line);padding:30px 26px 32px} .statline--light .stat:first-child{padding-left:26px} .statline--light .stat .num{color:var(--g700)} .statline--light .stat .lbl{color:var(--muted)} @media (max-width:640px){.statline--light .stat{padding:22px 16px}} /* ===== 2026-09 · карта «Целевые рынки»: подписи у краёв карты ===== */ .map--geo .pin.pin--up{flex-direction:column-reverse} .map--geo .pin.pin--edge-r span{transform:translateX(-32%)} .map--geo .pin.pin--edge-l span{transform:translateX(38%)} /* ===== 2026-09 · лента цифр из 5 позиций ===== */ .statline--5 .container{grid-template-columns:repeat(5,1fr)} .statline--5 .stat{padding:34px 22px 38px} .statline--5 .stat .num{font-size:clamp(32px,3.1vw,50px)} @media (max-width:1080px){.statline--5 .container{grid-template-columns:repeat(2,1fr)}.statline--5 .stat{border-left:1px solid var(--line-d);padding-left:22px}.statline--5 .stat:nth-child(odd){border-left:none;padding-left:0}.statline--5 .stat:nth-child(3){border-left:none}.statline--5 .stat:last-child{grid-column:1/-1}} /* ===== 2026-09 · «С кем мы работаем»: три ряда с ролями ===== */ .pt-sec{padding-top:clamp(64px,7vw,104px)} .pt-row{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line)} .pt-row:first-of-type{margin-top:36px} .pt-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);line-height:1.6} .pt-label .pt-n{display:block;color:var(--gold-deep);margin-bottom:6px} .pt-label small{display:block;margin-top:10px;letter-spacing:.04em;text-transform:none;font-size:11.5px;color:var(--muted);line-height:1.5} .pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pt{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)} .pt b{font-size:15px;font-weight:600;line-height:1.35} .pt small{font-size:13px;color:var(--muted);line-height:1.5} .pt--key{grid-column:span 2;border-color:var(--gold);background:linear-gradient(180deg,#fffdf7,#fff);box-shadow:0 2px 0 var(--gold) inset} .pt--key b{font-family:var(--serif);font-weight:400;font-size:21px} .pt--key .pt-tag{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--gold);border-radius:99px;padding:3px 10px;margin-bottom:4px} .pt-logo{height:40px;display:flex;align-items:center;margin-bottom:8px} .pt-logo img{max-height:34px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.85;transition:filter .3s,opacity .3s} .pt-logo .pt-wm{font-family:var(--serif);font-size:24px;letter-spacing:.01em;color:var(--g700)} a.pt:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-2px)} a.pt:hover .pt-logo img{filter:none;opacity:1} a.pt .pt-go{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gold-deep)} @media (max-width:1080px){.pt-row{grid-template-columns:1fr;gap:16px}.pt-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.pt-grid{grid-template-columns:1fr}.pt--key{grid-column:auto}} /* ===== 2026-09 · серая заглушка «Нужно фото»: подходящего снимка в фотоархиве пока нет ===== */ .img.img--need{background:#bcbcb6;display:flex;align-items:center;justify-content:center;min-height:180px} .img.img--need::before{display:none} .img.img--need::after{top:calc(50% - 30px);opacity:.5; background-image:url("data:image/svg+xml;utf8,")} .img--need .need{position:relative;z-index:2;margin-top:52px;max-width:84%;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.5;color:#2f302c} .img--need .need b{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;color:#1f201d} .ba .ba-side .img.img--need{background:#bcbcb6} /* ===== 2026-09 · блок 12 «Её не вытеснили. Её запретили.» — лента эпох ===== */ .stepper--story .st-panel{background:#fff;color:var(--ink);border:1px solid var(--line);grid-template-columns:1.15fr 1fr} .stepper--story .st-panel h3{color:var(--ink)} .stepper--story .st-panel .st-sum{color:var(--ink);font-size:17px;font-family:var(--serif)} .stepper--story .st-panel .st-detail{color:var(--ink-2)} .stepper--story .st-panel .s-num{color:var(--gold-deep)} .stepper--story .st-panel .s-of{color:var(--muted)} .stepper--story .st-panel .st-prev{border-color:var(--line-strong);color:var(--ink)} .stepper--story .st-panel.st-panel--dark{background:var(--g950);color:var(--cream);border-color:var(--g950)} .stepper--story .st-panel.st-panel--dark h3,.stepper--story .st-panel.st-panel--dark .st-sum{color:var(--cream)} .stepper--story .st-panel.st-panel--dark .st-detail{color:var(--cream-70)} .stepper--story .st-panel.st-panel--dark .s-num{color:var(--gold-2)} .stepper--story .st-panel.st-panel--dark .st-prev{border-color:var(--line-d-strong);color:var(--cream)} .stepper--story .st-tab[data-dark].is-active{background:var(--g950)} .ep-fact{border-radius:var(--r-s);background:var(--sand);min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center} .ep-fact .ep-big{font-family:var(--serif);font-size:clamp(34px,3.6vw,54px);line-height:1.05;color:var(--g700)} .ep-fact .ep-sub{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .st-panel--dark .ep-fact{background:rgba(244,241,232,.05);border:1px solid var(--line-d)} .st-panel--dark .ep-fact .ep-big{color:var(--gold-2)} .st-panel--dark .ep-fact .ep-sub{color:var(--cream-50)} .ep-market{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-s);background:var(--sand);overflow:hidden} .ep-market .em{padding:22px 22px 20px;border-left:1px solid var(--line);border-top:1px solid var(--line)} .ep-market .em:nth-child(odd){border-left:none}.ep-market .em:nth-child(-n+2){border-top:none} .ep-market .em .num{font-family:var(--serif);font-size:clamp(28px,2.6vw,40px);line-height:1;color:var(--g700)} .ep-market .em .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.5} .ep-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:12px} .ep-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} @media (max-width:1080px){.stepper--story .st-panel{grid-template-columns:1fr}.stepper--story .ep-fact{min-height:160px}} /* ===== 2026-09 · таймлайн 2022–2030 (6 точек, планы приглушены) ===== */ .timeline.timeline--6{grid-template-columns:repeat(6,1fr)} .timeline--6 .tl-item{padding:28px 18px 0} .timeline--6 .tl-item .year{font-size:28px} .tl-item.tl-plan{opacity:.72} .tl-item.tl-plan::before{background:transparent;border:2px dashed var(--gold)} .tl-item .tl-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);border:1px solid var(--line-d-strong);border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:middle} @media (max-width:1080px){.timeline.timeline--6{grid-template-columns:repeat(3,1fr);row-gap:30px}.timeline--6 .tl-item:nth-child(4){border-left:none;padding-left:0}.timeline--6 .tl-item:nth-child(4)::before{left:0}} @media (max-width:640px){.timeline.timeline--6{grid-template-columns:1fr}.timeline--6 .tl-item{border-left:none;padding-left:0}.timeline--6 .tl-item::before{left:0}} .status-note{margin-top:28px;padding:22px 26px;border-radius:var(--r-s);border:1px solid var(--gold);background:#fffdf7;font-size:15.5px;line-height:1.7;color:var(--ink-2)} .status-note b{color:var(--ink)} /* ===== 2026-09 · блок 18: документы «Действует / В работе» ===== */ .ds-group{margin-top:34px} .ds-label{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px} .ds-label::after{content:"";flex:1;height:1px;background:var(--line)} .ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .ds{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:var(--ink)} .ds b{font-size:16.5px;font-weight:600;line-height:1.35} .ds small{font-size:13px;color:var(--muted);line-height:1.55} .ds .ds-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#1f6a43;background:#e6f2ea;border-radius:6px;padding:4px 9px;margin-bottom:6px} .ds .ds-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#2f8a57} .ds .ds-act{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gold-deep)} .ds--open{border-color:var(--gold);box-shadow:0 2px 0 var(--gold) inset} a.ds:hover{border-color:var(--gold);box-shadow:var(--shadow)} .ds--work{background:transparent;border:1.5px dashed var(--line-strong);color:var(--ink-2)} .ds--work .ds-badge{color:var(--gold-deep);background:rgba(201,168,106,.14)} .ds--work .ds-badge::before{background:var(--gold)} .ds-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px} .ds-steps i{height:5px;border-radius:3px;background:var(--line)} .ds-steps i.on{background:var(--gold-deep)} .ds-steps-l{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted)} .ds-steps-l span.cur{color:var(--ink);font-weight:600} .ds-note{margin-top:16px;font-size:13px;color:var(--muted);max-width:80ch} .decree-text{padding:22px 26px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff} .decree-text h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:10px} .decree-text p{font-size:14.5px;color:var(--ink-2);line-height:1.7} .decree-text p+p{margin-top:8px} .req-docs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin:6px 0 4px} .req-docs label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--cream);text-transform:none;letter-spacing:0;font-family:var(--sans);cursor:pointer} .req-docs input{margin-top:3px;accent-color:var(--gold)} @media (max-width:1080px){.ds-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.ds-grid,.req-docs{grid-template-columns:1fr}} .flow.flow--3{grid-template-columns:repeat(3,1fr)} @media (max-width:1080px){.flow.flow--3{grid-template-columns:1fr}} .req-docs label{justify-content:flex-start;text-align:left;margin:0} .req-docs input[type=checkbox]{width:17px;height:17px;min-height:0;flex:0 0 17px;padding:0;margin:2px 0 0;border-radius:4px;box-shadow:none;background:transparent} /* ===== 2026-09 · счётчики: цифры одинаковой ширины, число прижато к знаку % ===== */ [data-count]{font-variant-numeric:tabular-nums} .q-hero .giant [data-count]{display:inline-block;text-align:right} /* ===== 2026-09 · лента цифр: компактнее, подписи обычным регистром ===== */ .statline--5 .stat{padding:24px 22px 26px} .statline--5 .stat:first-child{padding-left:0} .statline--5 .stat .num{font-size:clamp(28px,2.5vw,40px)} .statline .stat .lbl{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;line-height:1.45;margin-top:10px;max-width:24ch} .statline:not(.statline--light) .stat .lbl{color:var(--cream-70)} @media (max-width:1080px){.statline--5 .stat{padding:20px 18px 22px}.statline--5 .stat:nth-child(odd){padding-left:0}} @media (max-width:640px){.statline .stat .lbl{font-size:13px}} /* ===== 2026-09 · заглушки фото к запуску: просто серый фон, без текста и значка ===== */ .img.img--need{background:#c4c4bf} .img.img--need::after,.img.img--need::before{display:none!important} .img.img--need.img--16x9,.img.img--need.img--4x3,.img.img--need.img--3x4,.img.img--need.img--21x9{min-height:0} /* ---- новости: одинаковые карточки с плавным обрезанием текста ---- */ .news-grid{align-items:stretch} .news-card{display:flex;flex-direction:column;height:100%} .news-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3;min-height:2.6em} .news-card__text{position:relative;overflow:hidden;height:calc(14.5px * 1.65 * 4)} .news-card__text p{margin:0} .news-card__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 60%,#fff 100%); -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 60%);mask-image:linear-gradient(180deg,transparent 0%,#000 60%)} .news-card__more{margin-top:auto;align-self:flex-start} .news-card .news-card__text + .news-card__more{margin-top:auto} .news-card .news-card__text{margin-bottom:22px} .news-feature{color:inherit} .news-feature h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;margin:12px 0 14px} .news-feature .news-card__text{height:calc(15.5px * 1.7 * 4);margin-bottom:24px} .news-feature .news-card__text p{font-size:15.5px;line-height:1.7} .news-feature .card-num{margin-top:4px} /* ---- страница новости ---- */ .news-hero h1{max-width:24ch} .news-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-70)} .news-wrap{max-width:948px} .news-cover{margin:0 0 48px;aspect-ratio:16/9;border-radius:var(--r);box-shadow:0 30px 70px -40px rgba(14,24,18,.55)} .news-body{max-width:68ch} .news-body p{font-size:18px;line-height:1.75;color:var(--ink-2);margin:0 0 22px} .news-body p:first-child{font-family:var(--serif);font-size:23px;line-height:1.5;color:var(--ink)} .news-body a{color:var(--g700);border-bottom:1px solid var(--gold)} .news-sub{font-family:var(--serif);font-weight:400;font-size:26px;margin:52px 0 20px} .news-gallery--1{grid-template-columns:minmax(0,560px)} .news-gallery--2{grid-template-columns:repeat(2,1fr)} .news-source{margin-top:48px;padding:22px 26px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2)} .news-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px} .news-nav__item{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s} .news-nav__item:hover{border-color:rgba(201,168,106,.55);transform:translateY(-3px);box-shadow:var(--shadow-lg)} .news-nav__item small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .news-nav__item b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.3;color:var(--ink)} .news-nav__item span{font-size:13px;color:var(--muted)} .news-nav__next{text-align:right;align-items:flex-end} .news-all{margin-top:40px;text-align:center} @media (max-width:640px){ .news-nav{grid-template-columns:1fr} .news-nav__next{text-align:left;align-items:flex-start} .news-nav__empty{display:none} .news-body p{font-size:16.5px} .news-body p:first-child{font-size:20px} .news-gallery--2{grid-template-columns:1fr} .news-cover{margin-bottom:32px} .news-feature h3{font-size:24px} } /* ---- переключатель языка ---- */ .header-right{justify-self:end;display:flex;align-items:center;gap:14px} header.site .header-right .header-cta{margin-left:0} .lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-d-strong);border-radius:99px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;transition:border-color .3s} .lang-switch a{padding:7px 9px;border-radius:99px;line-height:1;color:var(--cream-70);transition:color .2s,background .2s} .lang-switch a:hover{color:var(--cream)} .lang-switch a.is-active{background:var(--gold);color:var(--g950)} .top.is-solid .lang-switch{border-color:var(--line-strong)} .top.is-solid .lang-switch a{color:var(--ink-2)} .top.is-solid .lang-switch a:hover{color:var(--ink)} .top.is-solid .lang-switch a.is-active{color:var(--g950)} @media (max-width:1280px){.header-right{gap:10px}.lang-switch a{padding:7px 7px}} @media (max-width:1080px){.header-right{margin-left:auto}.burger{margin-left:4px}} @media (max-width:360px){.lang-switch{font-size:10.5px}.lang-switch a{padding:6px 6px}} /* длинные слова в EN/UZ не должны расширять страницу */ .map--geo .pin.pin--edge-r{transform:translate(calc(-100% + 9px),-50%);align-items:flex-end} .map--geo .pin.pin--edge-r span{transform:none} .q-hero>*{min-width:0} html[lang="uz"] .lbl,html[lang="uz"] .h-sec,html[lang="uz"] .st-title,html[lang="uz"] .card h3{overflow-wrap:anywhere} @media (max-width:640px){.btn{max-width:100%;white-space:normal;text-align:left;line-height:1.3}} /* ---- партнёры: настоящие логотипы (сентябрь 2026) ---- */ .logos-marquee .marquee-track{animation-duration:85s} .lg{height:84px;padding:0 22px 0 18px;gap:14px;min-width:0;background:#fbfaf5} .lg img{height:48px;width:auto;max-width:170px;object-fit:contain;filter:none;opacity:1} .lg--wm img{height:40px} .lg .lg-wm{max-width:210px} .lg .lg-wm b{font-size:14.5px;line-height:1.2;white-space:normal} .lg:not(.nologo) .lg-wm b{font-size:14.5px} .lg .lg-wm small{white-space:normal;line-height:1.35;letter-spacing:.06em} .lg--wm .lg-wm small{margin-top:0;max-width:150px} .lg.nologo{padding:0 24px} @media (max-width:640px){.lg{height:72px;padding:0 16px 0 14px}.lg img{height:38px;max-width:140px}.lg--wm img{height:32px}.lg .lg-wm{max-width:170px}}