/* ========================================================== Монтаж Штакет — дизайн-система «Industrial Editorial» Тёмная база, охристо-оранжевый акцент, крупная типографика Archivo, стеклянные панели, зерно и мягкий свет. Светлая тема — через [data-theme="light"] на . ========================================================== */ /* ===== ТОКЕНЫ ===== */ :root{ color-scheme:dark; --bg:#0A0B0D; --bg-2:#101216; --bg-3:#151820; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --text:#F3F5F8; --muted:#99A2AF; --accent:#FF6B1A; --accent-2:#FFA93D; --accent-ink:#140801; --accent-soft:rgba(255,107,26,.14); --accent-glow:rgba(255,107,26,.45); --ink:#0A0B0D; --font-display:'Archivo','Oswald',system-ui,sans-serif; --font-body:'Inter Tight','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --radius:20px; --wrap:1280px; --gutter:clamp(18px,4vw,40px); --shadow:0 30px 70px -30px rgba(0,0,0,.75); --shadow-soft:0 18px 45px -22px rgba(0,0,0,.6); --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1); --z-fab:80; --z-header:60; --z-modal:100; --z-pre:200; } [data-theme="light"]{ color-scheme:light; --bg:#F4F3F0; --bg-2:#FFFFFF; --bg-3:#EDEBE6; --surface:rgba(12,14,18,.035); --surface-2:rgba(12,14,18,.065); --line:rgba(12,14,18,.12); --line-2:rgba(12,14,18,.22); --text:#0C0E12; --muted:#5B6573; /* тёмный оттенок оранжевого: на светлом фоне даёт контраст 4.5:1 и выше */ --accent:#C2410C; --accent-2:#9A3412; --accent-ink:#FFF6EF; --accent-soft:rgba(194,65,12,.10); --accent-glow:rgba(194,65,12,.3); --shadow:0 30px 60px -32px rgba(20,16,10,.28); --shadow-soft:0 14px 34px -20px rgba(20,16,10,.22); } /* ===== БАЗА ===== */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-size:17px; color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .5s ease,color .5s ease; } img{max-width:100%;display:block} [hidden]{display:none!important} a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit} ::selection{background:var(--accent);color:var(--accent-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .center{text-align:center;margin-top:clamp(32px,4vw,56px)} em{font-style:normal;color:var(--accent)} /* ЗЕРНО ПОВЕРХ СТРАНИЦЫ */ .noise{ position:fixed;inset:-50%;z-index:70;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } [data-theme="light"] .noise{opacity:.03;mix-blend-mode:multiply} /* ===== ТИПОГРАФИКА ===== */ .h2{ font-family:var(--font-display);font-weight:800; font-size:clamp(30px,4.6vw,66px);line-height:.98; letter-spacing:-.025em;text-transform:uppercase; text-wrap:balance;max-width:20ch; } .h2--light{color:#fff} .lead{max-width:62ch;color:var(--muted);font-size:clamp(15px,1.25vw,18px);margin-top:20px;text-wrap:pretty} .lead--dark{color:var(--muted)} .sec{padding:clamp(64px,9vw,140px) 0;position:relative} .sec--grey{background:var(--bg-2)} .sec--dark,.cta,.footer,.hero,.topbar{ --bg:#07080A;--bg-2:#0D0F13;--bg-3:#12151B; --surface:rgba(255,255,255,.05);--surface-2:rgba(255,255,255,.09); --line:rgba(255,255,255,.11);--line-2:rgba(255,255,255,.2); --text:#F3F5F8;--muted:#9AA3B0; --accent:#FF7A2B;--accent-2:#FFB25C;--accent-soft:rgba(255,122,43,.15); --accent-ink:#140801;--accent-glow:rgba(255,122,43,.45); background:var(--bg);color:var(--text); } /* плашка-метка раздела */ .sec__label{ display:inline-flex;align-items:center;gap:10px; font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--muted);border:1px solid var(--line);border-radius:999px; padding:8px 16px 8px 12px;margin-bottom:26px;background:var(--surface); backdrop-filter:blur(8px); } .sec__label::before{ content:'';width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 0 var(--accent-glow);transform:scale(.4);opacity:0; transition:transform .5s var(--ease) .1s,opacity .4s ease .1s; } .sec__label.is-in::before,.is-ready .hero .sec__label::before{transform:scale(1);opacity:1;animation:dotPulse 3s ease-out infinite 1s} @keyframes dotPulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 9px rgba(255,107,26,0)}100%{box-shadow:0 0 0 0 rgba(255,107,26,0)}} .sec__label--light{color:rgba(255,255,255,.72)} /* ===== КНОПКИ ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer; font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1; white-space:nowrap;position:relative;overflow:hidden;isolation:isolate; transition:background .25s ease,color .25s ease,border-color .25s ease, box-shadow .3s ease,transform .3s var(--ease); } .btn--lg{padding:18px 34px;font-size:16px} .btn--accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 14px 34px -16px var(--accent-glow)} .btn--accent:hover{background:var(--accent-2);box-shadow:0 20px 42px -14px var(--accent-glow)} .btn--dark{background:var(--text);color:var(--bg)} .btn--dark:hover{box-shadow:0 18px 40px -20px rgba(0,0,0,.6)} .btn--light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(10px)} .btn--light:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)} .btn--ghost{background:transparent;border-color:var(--line-2);color:inherit} .btn--ghost:hover{border-color:var(--accent);color:var(--accent)} /* фирменный синий Telegram осветлён только на ховере: на нём белый текст даёт 4.5:1 */ .btn--tg{background:#1B7BA8;color:#fff} .btn--tg:hover{background:#229ED9} .btn:active{transform:scale(.97)} .btn__ico{width:18px;height:18px;flex-shrink:0} /* блик по кнопке */ .btn::after{ content:'';position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .7s var(--ease); } .btn:hover::after{left:160%} .btn--dark::after,.btn--tg::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)} .link-arrow{ display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px; color:var(--accent);margin-top:18px;position:relative; } .link-arrow::after{ content:'';width:16px;height:9px;flex-shrink:0;background:currentColor; clip-path:polygon(0 38%,68% 38%,68% 0,100% 50%,68% 100%,68% 62%,0 62%); transition:transform .3s var(--ease); } .link-arrow:hover::after{transform:translateX(6px)} /* ===== ТОП-БАР ===== */ .topbar{ background:#07080A;color:rgba(255,255,255,.66);font-size:13px; border-bottom:1px solid rgba(255,255,255,.07); } .topbar__in{display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap;padding-top:10px;padding-bottom:10px} .topbar__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .25s ease} a.topbar__item:hover{color:var(--accent-2)} .topbar__item svg{width:14px;height:14px;flex-shrink:0;opacity:.75} /* ===== ШАПКА ===== */ .header{position:sticky;top:0;z-index:var(--z-header);padding:0 var(--gutter)} .header__in{ --pill:20px; max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:20px; padding:16px 0;position:relative;isolation:isolate; transition:padding .45s var(--ease); } /* стеклянная пилюля растёт наружу от содержимого: логотип и меню остаются на своих местах, ничего не съезжает вбок */ .header__in::before{ content:'';position:absolute;z-index:-1; inset:0 calc(var(--pill) * -1);border-radius:999px; background:color-mix(in srgb,var(--bg) 74%,transparent); border:1px solid var(--line);box-shadow:var(--shadow-soft); backdrop-filter:blur(18px) saturate(150%); opacity:0;transform:scale(.94); transition:opacity .4s ease,transform .6s var(--ease); } .header.is-scrolled .header__in::before{opacity:1;transform:none} .header.is-scrolled .header__in{padding:10px 0} .logo{display:flex;align-items:center;gap:13px;flex-shrink:0} .logo__mark{ width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:linear-gradient(145deg,var(--accent),var(--accent-2));color:var(--accent-ink); font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.02em; box-shadow:0 10px 24px -12px var(--accent-glow);transition:transform .4s var(--ease); } .logo__svg{width:62%;height:62%;fill:currentColor;display:block} .logo:hover .logo__mark{transform:rotate(-6deg) scale(1.05)} .logo__txt{display:flex;flex-direction:column;line-height:1.15} .logo__txt b{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.01em;text-transform:uppercase} .logo__txt i{font-style:normal;font-size:11px;color:var(--muted)} .logo--light .logo__txt i{color:rgba(255,255,255,.55)} .nav{display:flex;gap:4px;margin-left:auto;font-size:14.5px;font-weight:500} .nav a{padding:8px 12px;border-radius:999px;white-space:nowrap;color:var(--muted);transition:color .25s ease,background .25s ease} .nav a:hover{color:var(--text);background:var(--surface-2)} .nav a.is-current{color:var(--accent)} .header__cta{display:flex;gap:10px;align-items:center} .theme-toggle{ width:40px;height:40px;flex-shrink:0;border-radius:50%;cursor:pointer; background:var(--surface);border:1px solid var(--line);color:var(--text); display:grid;place-items:center;transition:.3s var(--ease); } .theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:rotate(25deg)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .ico-moon{display:none} [data-theme="light"] .theme-toggle .ico-moon{display:block} [data-theme="light"] .theme-toggle .ico-sun{display:none} .burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:9px} .burger span{width:24px;height:2px;background:var(--text);display:block;transition:.3s var(--ease)} .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ===== ГЛАВНЫЙ ЭКРАН ===== */ .hero{ position:relative;overflow:hidden;color:#fff; background:#07080A; --muted:rgba(255,255,255,.7); } .hero__bg{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(1100px 620px at 8% -10%,rgba(255,107,26,.26),transparent 62%), radial-gradient(760px 520px at 96% 108%,rgba(255,169,61,.14),transparent 60%), radial-gradient(900px 700px at 60% 50%,rgba(60,90,140,.14),transparent 62%); } .hero__grid{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(75% 65% at 50% 40%,#000 25%,transparent 100%); } .hero__aura{ position:absolute;width:52vw;height:52vw;max-width:760px;max-height:760px; left:-14vw;top:-18vw;pointer-events:none;border-radius:50%;filter:blur(90px); background:conic-gradient(from 0deg,rgba(255,107,26,.32),rgba(255,169,61,.1),rgba(255,107,26,.32)); animation:auraSpin 26s linear infinite; } @keyframes auraSpin{to{transform:rotate(360deg)}} .hero__in{ position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,68px); align-items:center;padding:clamp(52px,7vw,104px) var(--gutter) clamp(64px,7vw,104px); min-height:min(92svh,940px); } .tag{ display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em; text-transform:uppercase;font-weight:600;background:rgba(255,107,26,.13); color:var(--accent-2);border:1px solid rgba(255,107,26,.34);padding:9px 16px;border-radius:999px; backdrop-filter:blur(6px); } .tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dotPulse 2.6s ease-out infinite} .hero h1{ font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:clamp(36px,7vw,98px);line-height:.9;letter-spacing:-.035em; margin:24px 0 20px;text-wrap:balance; } .hero h1 em{ color:transparent;background:linear-gradient(100deg,#FF6B1A,#FFC46B 55%,#FF6B1A); -webkit-background-clip:text;background-clip:text; } .hero p{color:rgba(255,255,255,.72);max-width:54ch;font-size:clamp(15px,1.2vw,18px)} .rating{display:flex;align-items:center;gap:11px;margin:24px 0 30px;color:rgba(255,255,255,.78);font-size:15px} .stars{color:var(--accent-2);letter-spacing:2px} .hero__btns{display:flex;gap:14px;flex-wrap:wrap} .hero__mini{ display:flex;gap:clamp(20px,3vw,42px);margin-top:clamp(32px,4vw,48px);flex-wrap:wrap; padding-top:28px;border-top:1px solid rgba(255,255,255,.13); } .hero__mini div{display:flex;flex-direction:column;gap:4px} .hero__mini b{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1;color:var(--accent-2)} .hero__mini span{font-size:13px;color:rgba(255,255,255,.55)} .hero__slider{ position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.1; box-shadow:0 50px 90px -40px rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.1); } .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)} .slide.is-active{opacity:1} .slide img{width:100%;height:100%;object-fit:cover} .slide::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,transparent 45%,rgba(7,8,10,.6))} .slider__dots{position:absolute;right:20px;top:20px;display:flex;gap:8px;z-index:3} .slider__dots button{ width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.45);transition:.4s var(--ease); } .slider__dots button.is-active{background:var(--accent);width:28px;border-radius:999px} /* карточка-бейдж поверх слайдера */ .hero__badge{ position:absolute;left:-26px;bottom:26px;z-index:4;display:flex;align-items:center;gap:14px; padding:16px 22px 16px 18px;border-radius:var(--r); background:rgba(12,14,18,.72);border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow); animation:floaty 6s ease-in-out infinite; } @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .hero__badge svg{width:30px;height:30px;color:var(--accent);flex-shrink:0} .hero__badge b{display:block;font-family:var(--font-display);font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.01em} .hero__badge span{font-size:12.5px;color:rgba(255,255,255,.6)} .hero__scroll{ position:absolute;left:var(--gutter);bottom:20px;display:inline-flex;align-items:center;gap:10px; font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4); } .hero__scroll i{display:block;width:30px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden} .hero__scroll i::after{content:'';position:absolute;inset:0;background:var(--accent);animation:scrollLine 2.2s var(--ease) infinite} @keyframes scrollLine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* ===== БЕГУЩАЯ СТРОКА ===== */ .marquee{ background:var(--accent);color:var(--accent-ink);overflow:hidden;padding:13px 0; font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.16em; text-transform:uppercase;position:relative; } .marquee__in{display:flex;gap:44px;white-space:nowrap;animation:marq 32s linear infinite;width:max-content} .marquee__in span{flex-shrink:0} .marquee--alt{background:var(--bg);color:var(--muted);border-bottom:1px solid var(--line);padding:11px 0;font-size:13px} .marquee--alt .marquee__in{animation-direction:reverse;animation-duration:42s} @keyframes marq{to{transform:translateX(-50%)}} /* ===== О КОМПАНИИ ===== */ .about{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,60px);align-items:start} .about__side p{color:var(--muted)} .stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px; margin-top:clamp(40px,5vw,64px); } .stat{ padding:26px 24px;border-radius:var(--r);border:1px solid var(--line); background:var(--surface);position:relative;overflow:hidden; } .stat::before{ content:'';position:absolute;left:0;top:0;width:100%;height:2px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) var(--d,0s); } .stat.is-in::before{transform:scaleX(1)} .stat b{ display:block;font-family:var(--font-display);font-weight:800; font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.03em;color:var(--text); } .stat span{font-size:14px;color:var(--muted);margin-top:8px;display:block} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,5vw,64px)} .card3{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;padding-bottom:28px;position:relative; } .card3__img{aspect-ratio:16/10;overflow:hidden} .card3__img img{width:100%;height:100%;object-fit:cover} .card3 h3{ font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.8vw,24px); line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;margin:24px 28px 10px; } .card3 p{margin:0 28px;color:var(--muted);font-size:15px} .card3 .link-arrow{margin-left:28px} /* подсветка курсором — карточки */ .spot{position:relative} .spot::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0; border-radius:inherit;transition:opacity .4s ease; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 62%); } .spot:hover::before{opacity:1} .spot>*{position:relative;z-index:1} /* ===== ПОЧЕМУ МЫ (бенто) ===== */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(40px,5vw,60px)} .why__item{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:30px 26px;position:relative;overflow:hidden; } .why__item:nth-child(1){grid-column:span 2} .why__item:nth-child(4){grid-column:span 2;background:linear-gradient(120deg,var(--accent-soft),transparent 70%);border-color:rgba(255,122,43,.32)} .why__item:hover{border-color:rgba(255,122,43,.45)} .why__num{ font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--accent); letter-spacing:.16em;display:inline-block; } .why__item h3{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.1;text-transform:uppercase;margin:16px 0 10px} .why__item p{color:var(--muted);font-size:15px} .why__item::after{ content:'';position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,var(--accent-soft),transparent 70%);opacity:0;transition:opacity .45s ease; } .why__item:hover::after{opacity:1} /* ===== СТРОКИ УСЛУГ ===== */ .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,64px);align-items:center;margin-top:clamp(48px,6vw,88px)} .row--rev .row__media{order:2} .row__media{ position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3; box-shadow:var(--shadow);border:1px solid var(--line); } .row__media img{width:100%;height:100%;object-fit:cover} .row__num{ position:absolute;top:0;left:0;z-index:2; font-family:var(--font-display);font-weight:800;font-size:clamp(46px,6vw,86px);line-height:.8; padding:14px 20px;color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.7);letter-spacing:-.04em; } .row__body h3{ font-family:var(--font-display);font-weight:800;font-size:clamp(23px,2.7vw,40px); line-height:1;text-transform:uppercase;letter-spacing:-.025em;margin-bottom:18px;text-wrap:balance; } .row__body p{color:var(--muted);margin-bottom:14px} .row__sub{display:block;margin:24px 0 14px;font-size:15px;font-weight:600} .ticks{list-style:none;display:grid;gap:10px} .ticks li{position:relative;padding-left:32px;font-size:15px;color:var(--muted)} .ticks li::before{ content:'';position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:7px; background:var(--accent-soft);border:1px solid rgba(255,122,43,.4); } .ticks li::after{ content:'';position:absolute;left:6px;top:8px;width:8px;height:4px; border-left:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(-45deg); } .row__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} /* ===== ПЛИТКИ ЗАБОРОВ ===== */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(40px,5vw,60px)} .tile{ background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;padding-bottom:30px;box-shadow:var(--shadow-soft); } .tile__img{position:relative;aspect-ratio:16/9;overflow:hidden} .tile__img img{width:100%;height:100%;object-fit:cover} .tile__num{ position:absolute;top:14px;left:16px;z-index:2; font-family:var(--font-display);font-weight:800;font-size:15px; background:rgba(12,14,18,.7);color:#fff;border:1px solid rgba(255,255,255,.18); padding:8px 12px;border-radius:10px;backdrop-filter:blur(10px); } .tile h3{ font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2vw,26px); line-height:1.08;text-transform:uppercase;letter-spacing:-.015em;margin:26px 30px 12px; } .tile p{margin:0 30px 18px;color:var(--muted);font-size:15px} .tile .ticks{margin:0 30px} .tile .row__btns{margin:26px 30px 0} /* ===== КАЛЬКУЛЯТОР ===== */ .quiz{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); padding:clamp(24px,4vw,44px);margin-top:clamp(34px,4vw,48px);max-width:940px; backdrop-filter:blur(12px);box-shadow:var(--shadow);position:relative;overflow:hidden; } .quiz::before{ content:'';position:absolute;top:-120px;right:-120px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(255,122,43,.18),transparent 70%);pointer-events:none; } .quiz__head{display:flex;align-items:center;gap:18px;margin-bottom:28px;position:relative} .quiz__step{font-size:14px;color:var(--muted);white-space:nowrap} .quiz__step b{color:var(--accent);font-variant-numeric:tabular-nums} .quiz__bar{flex:1;height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden} .quiz__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s var(--ease)} .quiz__q{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,30px);line-height:1.08;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:24px} .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} .opt{ text-align:left;background:var(--surface);border:1px solid var(--line);color:var(--text); border-radius:var(--r-sm);padding:16px 18px 16px 46px;cursor:pointer; font-size:15px;line-height:1.3;position:relative;transition:.25s var(--ease); } .opt::before{ content:'';position:absolute;left:17px;top:50%;transform:translateY(-50%); width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);transition:.25s ease; } .opt:hover{border-color:var(--accent);background:var(--accent-soft)} .opt.is-sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600} .opt.is-sel::before{border-color:var(--accent-ink);background:var(--accent-ink);box-shadow:inset 0 0 0 3px var(--accent)} .quiz__nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px} .quiz .form{max-width:540px;background:transparent;border:0;padding:0} .quiz__done{text-align:center;padding:24px 0} .quiz__done b{display:block;font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1.1;color:var(--accent);margin-bottom:12px;text-transform:uppercase} /* ===== ЭТАПЫ ===== */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,5vw,60px)} .step{ position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:36px 30px;overflow:hidden; } .step__num{ font-family:var(--font-display);font-weight:800;font-size:56px;line-height:.8; color:transparent;-webkit-text-stroke:1.5px var(--accent);letter-spacing:-.04em;display:block; transition:color .4s ease; } .step:hover .step__num{color:var(--accent-soft)} .step h3{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.1;text-transform:uppercase;margin:18px 0 12px} .step p{color:var(--muted);font-size:15px} .step::after{ content:'';position:absolute;left:0;bottom:0;height:2px;width:100%; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease); } .step:hover::after{transform:scaleX(1)} /* ===== ГАЛЕРЕЯ (бенто) ===== */ .gallery{ display:grid;grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(160px,20vw);gap:14px;margin-top:clamp(40px,5vw,60px); } .gal{ position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer; border:1px solid var(--line); } .gal:nth-child(1){grid-column:span 2;grid-row:span 2} .gal:nth-child(2){grid-column:span 2} .gal:nth-child(5),.gal:nth-child(6){grid-column:span 2} .gal img{width:100%;height:100%;object-fit:cover} .gal figcaption{ position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff; font-size:14px;font-weight:600; background:linear-gradient(transparent,rgba(5,6,8,.85)); } .gal::after{ content:'';position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%; background:rgba(12,14,18,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2); opacity:0;transform:scale(.7);transition:.35s var(--ease); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:15px; } .gal:hover::after{opacity:1;transform:scale(1)} /* лайтбокс */ .lightbox{ position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px; background:rgba(5,6,8,.9);backdrop-filter:blur(10px); animation:lbIn .3s ease; } @keyframes lbIn{from{opacity:0}} .lightbox img{max-width:min(1100px,94vw);max-height:86vh;border-radius:var(--r);box-shadow:var(--shadow);animation:lbPop .45s var(--ease)} @keyframes lbPop{from{opacity:0;transform:scale(.94)}} .lightbox figcaption{color:rgba(255,255,255,.75);font-size:14px;margin-top:16px;text-align:center} .lightbox__x{ position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff; font-size:26px;line-height:1;display:grid;place-items:center; } .lightbox__x:hover{background:rgba(255,255,255,.2)} .lightbox__nav{position:absolute;inset:auto 0 30px;display:flex;justify-content:center;gap:12px} .lightbox__nav button{ width:46px;height:46px;border-radius:50%;cursor:pointer;color:#fff;font-size:20px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22); display:grid;place-items:center;transition:.25s ease; } .lightbox__nav button:hover{background:var(--accent);color:var(--accent-ink);border-color:transparent} /* ===== ОТЗЫВЫ ===== */ .reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(40px,5vw,60px)} .rev{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:34px;position:relative;overflow:hidden; } /* ::before занят подсветкой .spot — кавычка живёт в ::after */ .rev::after{ content:'”';position:absolute;top:-24px;right:18px;font-family:var(--font-display); font-size:140px;line-height:1;color:var(--accent);opacity:.14;pointer-events:none; } .rev p{margin:14px 0 18px;font-size:16.5px;text-wrap:pretty} .rev cite{font-style:normal;font-weight:600;font-size:15px;color:var(--muted)} /* ===== FAQ ===== */ .faq{margin-top:clamp(34px,4vw,50px);display:grid;gap:10px} .faq__i{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:2px 28px;transition:border-color .3s ease,background .3s ease; } .faq__i[open]{border-color:rgba(255,122,43,.35);background:var(--accent-soft)} .faq__i summary{ cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative; font-weight:600;font-size:17px;line-height:1.35; } .faq__i summary::-webkit-details-marker{display:none} .faq__i summary::before,.faq__i summary::after{ content:'';position:absolute;right:4px;top:50%;background:var(--accent); transition:transform .35s var(--ease),opacity .3s ease; } .faq__i summary::before{width:16px;height:2px;margin-top:-1px} .faq__i summary::after{width:2px;height:16px;margin:-8px -7px 0 0;right:11px} .faq__i[open] summary::after{transform:rotate(90deg);opacity:0} .faq__i[open] summary::before{transform:rotate(180deg)} .faq__i div{padding-bottom:26px;color:var(--muted);animation:faqIn .45s var(--ease)} .faq__i div p+p{margin-top:12px} .faq__i .ticks{margin-top:12px} @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}} /* ===== CTA ===== */ .cta{padding:clamp(64px,9vw,130px) 0;position:relative;overflow:hidden} .cta::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 500px at 88% 0%,rgba(255,122,43,.18),transparent 62%); } .cta__in{position:relative;display:grid;grid-template-columns:1fr .85fr;gap:clamp(34px,4.6vw,64px);align-items:center} .cta__contacts{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px} .cta__phone{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--accent-2);letter-spacing:-.02em} .cta__phone:hover{color:#fff} /* ===== ФОРМЫ ===== */ .form{ display:grid;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);backdrop-filter:blur(12px); } .form label{display:grid;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)} .form input,.form textarea,.form select{ font-size:15px;line-height:1.4;padding:14px 16px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--bg-2);color:var(--text);width:100%; transition:border-color .25s ease,box-shadow .25s ease,background .25s ease; } .form input::placeholder,.form textarea::placeholder{color:var(--muted);opacity:.6} .form input:focus,.form textarea:focus,.form select:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft); } .form textarea{resize:vertical;min-height:84px} .check{display:flex!important;flex-direction:row;align-items:flex-start;gap:11px;font-weight:400;font-size:13px} .check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--accent)} .check a{text-decoration:underline} .form__note{font-size:12px;color:var(--muted);text-align:center;opacity:.8} /* ===== МОДАЛКА ===== */ .modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px} .modal__back{position:absolute;inset:0;background:rgba(5,6,8,.78);backdrop-filter:blur(8px);animation:lbIn .3s ease} .modal__win{ position:relative;background:#0D0F13;color:#F3F5F8;border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl);padding:clamp(28px,4vw,42px);max-width:540px;width:100%; max-height:92vh;overflow:auto;box-shadow:var(--shadow);animation:pop .4s var(--ease); --muted:rgba(255,255,255,.62);--line:rgba(255,255,255,.14);--bg-2:rgba(255,255,255,.06); --accent:#FF7A2B;--accent-soft:rgba(255,122,43,.16); } @keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}} .modal__win h3{font-family:var(--font-display);font-weight:800;font-size:clamp(23px,3vw,32px);line-height:1;text-transform:uppercase;letter-spacing:-.02em} .modal__win>p{color:var(--muted);margin:12px 0 22px;font-size:15px} .modal__win .form{background:transparent;border:0;padding:0;backdrop-filter:none} .modal__x{ position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff; font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.25s ease; } .modal__x:hover{background:var(--accent);color:var(--accent-ink);border-color:transparent} /* ===== COOKIE / FAB ===== */ .cookie{ position:fixed;left:20px;bottom:20px;z-index:90;max-width:430px; background:color-mix(in srgb,var(--bg-2) 88%,transparent);backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow); padding:20px;display:flex;gap:16px;align-items:center;font-size:13px;color:var(--muted); animation:ckIn .6s var(--ease); } @keyframes ckIn{from{opacity:0;transform:translateY(24px)}} .fab{position:fixed;right:20px;bottom:20px;z-index:var(--z-fab);display:flex;flex-direction:column;gap:10px} .fab__btn{ width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff; box-shadow:var(--shadow);position:relative;transition:transform .3s var(--ease),box-shadow .3s ease; } .fab__btn svg{width:23px;height:23px} .fab__btn:hover{transform:scale(1.08)} .fab__btn--tg{background:#229ED9} .fab__btn--wa{background:#25D366} .fab__btn--vb{background:#7360F2} .fab__btn--call{background:var(--accent);color:var(--accent-ink)} .fab__btn--call::before{ content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent); animation:fabPulse 2.8s ease-out infinite; } @keyframes fabPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.55);opacity:0}100%{opacity:0}} /* ===== ФУТЕР ===== */ .footer{padding:clamp(56px,7vw,90px) 0 28px} .footer__in{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:40px} .footer__col{display:flex;flex-direction:column;gap:11px;align-items:flex-start} .footer__col h4{ font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase; letter-spacing:.16em;color:var(--accent-2);margin-bottom:8px; } .footer__col a{font-size:15px;color:var(--muted);transition:color .25s ease,transform .25s ease} .footer__col a:not(.btn):hover{color:var(--accent-2);transform:translateX(3px)} .footer__col span{font-size:14px;color:var(--muted);opacity:.8} .footer__note{font-size:14px;color:var(--muted);max-width:290px} .footer__phone{font-family:var(--font-display);font-weight:800;font-size:23px;color:#fff!important;letter-spacing:-.01em} .footer .logo__txt b{color:#fff} .footer__bottom{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid var(--line); font-size:13px;color:var(--muted);opacity:.75; } .footer__bottom a:hover{color:var(--accent-2)} /* ========================================================== ПРЕЛОАДЕР ========================================================== */ .preloader{position:fixed;inset:0;z-index:var(--z-pre);display:grid;place-items:center;background:#07080A;overflow:hidden} .preloader::before{ content:'';position:absolute;inset:0; background:radial-gradient(700px 480px at 50% 42%,rgba(255,107,26,.2),transparent 65%); } .preloader__curtain{position:absolute;top:0;bottom:0;width:50.5%;background:#050608;z-index:2;transition:transform 1s var(--ease-io)} .preloader__curtain--l{left:0} .preloader__curtain--r{right:0} .preloader__in{position:relative;z-index:3;display:grid;justify-items:center;gap:18px;transition:opacity .5s ease,transform .5s ease} .preloader__art{width:138px;height:104px;overflow:visible} .preloader__art path{ fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300); animation:plDraw 1.15s cubic-bezier(.65,0,.35,1) forwards; } .pl-ground{--len:150px;animation-delay:.05s;stroke:#fff;opacity:.5} .pl-pickets{--len:620px;animation-delay:.2s} .pl-rails{--len:280px;animation-delay:.6s;stroke:#fff;opacity:.85} @keyframes plDraw{to{stroke-dashoffset:0}} .preloader__name{ display:flex;gap:2px;font-family:var(--font-display);font-weight:800;font-size:27px; letter-spacing:.24em;color:#fff;margin-top:6px;text-transform:uppercase; } .preloader__name span{animation-delay:calc(.45s + var(--i,0) * .045s)!important;opacity:0;transform:translateY(16px);animation:plUp .55s var(--ease) forwards} @keyframes plUp{to{opacity:1;transform:none}} .preloader__sub{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42);opacity:0;animation:plUp .5s ease .9s forwards} .preloader__line{width:min(280px,54vw);height:2px;background:rgba(255,255,255,.13);border-radius:2px;overflow:hidden;margin-top:8px} .preloader__line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s var(--ease)} .preloader__pct{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.12em;font-variant-numeric:tabular-nums} .preloader.is-done .preloader__in{opacity:0;transform:translateY(-16px)} .preloader.is-done .preloader__curtain--l{transform:translateX(-101%)} .preloader.is-done .preloader__curtain--r{transform:translateX(101%)} .preloader.is-gone{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s ease .6s,visibility 0s .9s} body.is-loading{overflow:hidden} /* ========================================================== ПОЛОСА ПРОКРУТКИ СВЕРХУ ========================================================== */ .scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:75;pointer-events:none} .scrollbar i{ display:block;height:100%;width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 16px var(--accent-glow); } @supports (animation-timeline:scroll()){ .scrollbar i{width:100%;transform-origin:0 50%;transform:scaleX(0);animation:sbar linear;animation-timeline:scroll(root)} @keyframes sbar{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* ========================================================== ПОЯВЛЕНИЕ ЗАГОЛОВКОВ ПО СЛОВАМ ========================================================== */ .line-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em} .line-mask>i{ display:inline-block;font-style:inherit;transform:translateY(110%);opacity:0; transition:transform .9s var(--ease),opacity .6s ease;transition-delay:var(--d,0s); } .is-in .line-mask>i,.is-ready .line-mask>i{transform:none;opacity:1} /* ========================================================== ПОЯВЛЕНИЕ БЛОКОВ И КАРТИНОК ========================================================== */ .reveal{ opacity:0;transform:translateY(36px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--d,0s); } .reveal.is-in{opacity:1;transform:none} .img-reveal{position:relative;overflow:hidden} .img-reveal::after{ content:'';position:absolute;inset:0;background:#07080A;transform-origin:right; transform:scaleX(1);transition:transform 1.05s var(--ease-io);transition-delay:var(--d,.05s);z-index:3; } .img-reveal.is-in::after{transform:scaleX(0)} .img-reveal img{transform:scale(1.14);transition:transform 1.5s var(--ease);transition-delay:var(--d,.05s)} .img-reveal.is-in img{transform:scale(1)} .parallax img{will-change:transform} .parallax.px-ready img{transition:none} /* ========================================================== МИКРОВЗАИМОДЕЙСТВИЯ / ГЛАВНЫЙ ЭКРАН ========================================================== */ .card3,.tile,.step,.rev,.why__item,.faq__i,.stat,.gal{ transition:transform .5s var(--ease),box-shadow .5s ease,background .35s ease, border-color .35s ease,opacity .8s var(--ease); } .card3:hover,.tile:hover,.rev:hover,.stat:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--line-2)} .step:hover{transform:translateY(-6px);border-color:var(--line-2)} .gal:hover{transform:scale(.985)} .card3__img img,.tile__img img{transition:transform 1s var(--ease)} .card3:hover .card3__img img,.tile:hover .tile__img img{transform:scale(1.06)} .gal img{transition:transform 1.1s var(--ease)} .gal:hover img{transform:scale(1.07)} .gal figcaption{transform:translateY(6px);opacity:.9;transition:transform .5s var(--ease),opacity .35s ease} .gal:hover figcaption{transform:none;opacity:1} .stat b,.hero__mini b,.cta__phone,.footer__phone{font-variant-numeric:tabular-nums} .hero__slider{transition:transform 1.3s var(--ease),opacity 1s ease} body:not(.is-ready) .hero__slider{opacity:0;transform:translateY(46px) scale(.96)} body:not(.is-ready) .hero__text .tag, body:not(.is-ready) .hero__text p, body:not(.is-ready) .rating, body:not(.is-ready) .hero__btns, body:not(.is-ready) .hero__mini{opacity:0;transform:translateY(26px)} .hero__text .tag,.hero__text p,.rating,.hero__btns,.hero__mini{ transition:opacity .85s ease var(--d,0s),transform .85s var(--ease) var(--d,0s); } body:not(.is-ready) .hero__badge,body:not(.is-ready) .hero__scroll{opacity:0} .hero__badge,.hero__scroll{transition:opacity .8s ease .9s} /* ========================================================== АДАПТИВ ========================================================== */ @media (max-width:1180px){ .nav{gap:0;font-size:14px} .nav a{padding:8px 9px} } @media (max-width:1100px){ .nav{display:none} .nav.is-open{ display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:0; background:color-mix(in srgb,var(--bg-2) 96%,transparent);backdrop-filter:blur(18px); border:1px solid var(--line);border-radius:var(--r);padding:12px 18px 18px;box-shadow:var(--shadow); } .nav.is-open a{padding:14px 6px;border-bottom:1px solid var(--line);border-radius:0} .nav.is-open a:last-child{border-bottom:0} .burger{display:flex} .header__cta .btn--ghost{display:none} .why,.stats{grid-template-columns:repeat(2,1fr)} .why__item:nth-child(1),.why__item:nth-child(4){grid-column:span 2} .cards3,.steps{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(150px,26vw)} .gal:nth-child(1){grid-column:span 2;grid-row:span 1} .gal:nth-child(2),.gal:nth-child(5),.gal:nth-child(6){grid-column:span 1} .hero__badge{left:16px} } @media (max-width:900px){ .hero__in,.about,.row,.row--rev,.grid2,.cta__in,.reviews{grid-template-columns:1fr;gap:34px} .hero__in{min-height:0;padding-top:clamp(36px,7vw,60px)} .row--rev .row__media{order:0} .topbar__in{font-size:12px;gap:14px;justify-content:flex-start} .h2{max-width:none} .hero__scroll{display:none} } @media (max-width:640px){ body{font-size:16px} .stats,.why,.cards3,.steps{grid-template-columns:1fr} .why__item:nth-child(1),.why__item:nth-child(4){grid-column:span 1} .gallery{grid-template-columns:1fr;grid-auto-rows:minmax(200px,52vw)} .gal:nth-child(n){grid-column:span 1;grid-row:span 1} .header__cta .btn{padding:12px 17px;font-size:13.5px} .logo__txt i{display:none} .hero__btns .btn{width:100%} .hero__badge{left:12px;right:12px;bottom:12px;padding:14px 16px} .cookie{left:12px;right:12px;bottom:12px;max-width:none;flex-direction:column;align-items:stretch} .fab{bottom:92px} .topbar__item:nth-child(3),.topbar__item:nth-child(4){display:none} .footer__in{grid-template-columns:1fr} .rev,.faq__i{padding-left:22px;padding-right:22px} .tile h3,.tile p,.tile .ticks,.tile .row__btns{margin-left:22px;margin-right:22px} .card3 h3,.card3 p,.card3 .link-arrow{margin-left:22px;margin-right:22px} } @media (max-width:900px){.footer__in{grid-template-columns:1fr 1fr}} /* ========================================================== МЕДЛЕННЫЙ НАЕЗД НА АКТИВНОМ СЛАЙДЕ ========================================================== */ .slide img{transform:scale(1.04)} .slide.is-active img{animation:ken 10s ease-out forwards} @keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.14)}} /* ========================================================== ПРЕДПОЧТЕНИЕ СНИЖЕННОЙ АНИМАЦИИ ========================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal,.line-mask>i{opacity:1!important;transform:none!important} .img-reveal::after{display:none} .img-reveal img{transform:none!important} .marquee__in{animation:none} .slide.is-active img{animation:none;transform:none} .hero__aura{animation:none} .hero__badge{animation:none} body:not(.is-ready) .hero__slider, body:not(.is-ready) .hero__text .tag, body:not(.is-ready) .hero__text p, body:not(.is-ready) .rating, body:not(.is-ready) .hero__btns, body:not(.is-ready) .hero__mini, body:not(.is-ready) .hero__badge, body:not(.is-ready) .hero__scroll{opacity:1;transform:none} } /* ========================================================== ПЕРЕКЛЮЧЕНИЕ ТЕМЫ / ЛАЙТБОКС — МЕЛОЧИ ========================================================== */ .theme-switching *{ transition:background-color .45s ease,color .45s ease,border-color .45s ease, box-shadow .45s ease!important; } .lightbox figure{display:grid;justify-items:center} /* ========================================================== ДОВОДКА ========================================================== */ .hero__visual{position:relative} .hero__badge{left:-28px} /* чтобы крупный контурный номер читался поверх светлого фото */ .row__media::before{ content:'';position:absolute;inset:0 0 auto;height:45%;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(6,7,9,.6),transparent); } .row__num{text-shadow:0 2px 18px rgba(0,0,0,.45)} @media (max-width:900px){ .hero__badge{left:16px} } @media (max-width:640px){ .hero__badge{left:12px;right:12px} } /* первый экран: держим кнопки и цифры над сгибом */ .hero h1{font-size:clamp(34px,4.6vw,76px);margin:20px 0 16px} .hero__in{min-height:min(88svh,880px)} .rating{margin:18px 0 24px} .hero__mini{margin-top:clamp(24px,3vw,34px);padding-top:22px} /* шапка: компактное состояние — только вертикальное сжатие, без сдвига вбок */ .logo__txt i{ max-height:15px;overflow:hidden; transition:max-height .45s var(--ease),opacity .3s ease; } .header.is-scrolled .logo__txt i{max-height:0;opacity:0} .logo__mark{transition:width .45s var(--ease),height .45s var(--ease), border-radius .45s var(--ease),font-size .45s var(--ease),transform .4s var(--ease)} .header.is-scrolled .logo__mark{width:38px;height:38px;border-radius:11px;font-size:14px} @media (max-width:900px){.header__in{--pill:14px}} @media (max-width:640px){.header__in{--pill:10px}} /* ========================================================== ФИНАЛЬНЫЙ ШАГ КАЛЬКУЛЯТОРА ========================================================== */ .quiz__hint{color:var(--muted);font-size:15px;max-width:56ch;margin:-12px 0 26px} .quiz .form{max-width:none;gap:18px} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form--quiz .check{margin-top:-2px} .form__actions{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin-top:8px;padding-top:22px;border-top:1px solid var(--line); } .form__actions .form__note{text-align:left;margin:0} .quiz__nav{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)} @media (max-width:640px){ .form__row{grid-template-columns:1fr} .form__actions{flex-direction:column;align-items:stretch;text-align:center} .form__actions .form__note{text-align:center} } /* ========================================================== ВЕРХНИЕ ЗНАКИ (Й, Ё) НЕ ДОЛЖНЫ ОБРЕЗАТЬСЯ МАСКОЙ Запас сверху и снизу компенсируем отрицательными полями, чтобы строки остались на своих местах. ========================================================== */ .line-mask{ padding-top:.2em;margin-top:-.2em; padding-bottom:.14em;margin-bottom:-.14em; } /* плюс немного воздуха между строками крупных заголовков */ .hero h1{line-height:.96} .h2{line-height:1.02} .row__body h3{line-height:1.06} .modal__win h3,.cta__phone{line-height:1.06} /* финальный шаг: форма — отдельная карточка внутри панели, со своими полями */ .quiz .form--quiz{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px); margin-top:4px; } .quiz .form--quiz .form__actions{margin-top:10px} .quiz__hint{margin-bottom:22px} /* ========================================================== АДАПТИВ: ОТ ТЕЛЕФОНА ДО БОЛЬШОГО МОНИТОРА Блок идёт последним и уточняет ранее заданные брейкпоинты. Ступени: 400 / 640 / 900 / 1100 / 1400 / 1600 / 2200 px. ========================================================== */ /* --- очень большие экраны: шире контейнер, крупнее кегль --- */ @media (min-width:1600px){ :root{--wrap:1400px;--gutter:48px} body{font-size:18px} .hero h1{font-size:clamp(34px,4.4vw,88px)} .h2{font-size:clamp(30px,4.2vw,76px)} .hero__in{min-height:min(88svh,980px)} .sec{padding:clamp(80px,7vw,160px) 0} .gallery{grid-auto-rows:minmax(180px,17vw)} .header.is-scrolled .header__in{padding:12px 0} } @media (min-width:2200px){ :root{--wrap:1600px;--gutter:64px} body{font-size:19px} .lead{font-size:19px} .gallery{grid-auto-rows:minmax(200px,15vw)} } /* --- ноутбук: 1101–1400 --- */ @media (min-width:1101px) and (max-width:1400px){ .nav{font-size:14px} .nav a{padding:8px 10px} .hero__in{gap:40px} .row{gap:44px} } /* --- планшет-ландшафт: 901–1100 --- */ @media (min-width:901px) and (max-width:1100px){ .hero__in{gap:34px;min-height:min(84svh,820px)} .hero__mini{gap:22px} .row{gap:36px} .quiz{max-width:none} .stats{gap:12px} } /* --- планшет-портрет и крупный телефон: ≤900 --- */ @media (max-width:900px){ :root{--gutter:clamp(18px,3.4vw,28px)} .hero__slider{aspect-ratio:16/10} .hero__in{padding-bottom:clamp(44px,6vw,64px)} .grid2,.reviews,.cards3,.steps{gap:16px} .quiz{max-width:none} .cta__in{gap:32px} .footer__in{gap:32px} .sec__label{margin-bottom:20px} } /* --- телефон: ≤640 --- */ @media (max-width:640px){ .sec{padding:clamp(48px,11vw,64px) 0} .h2{font-size:clamp(28px,8.4vw,42px)} .hero h1{font-size:clamp(32px,10vw,48px)} .row__body h3{font-size:clamp(22px,6.6vw,30px)} .quiz__q{font-size:clamp(19px,5.6vw,24px)} /* галерея остаётся плиткой 2×3, а не длинной лентой */ .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(130px,32vw);gap:10px} .gal:nth-child(n){grid-column:span 1;grid-row:span 1} .gal figcaption{padding:12px;font-size:12px} .btn{padding:13px 20px} .btn--lg{padding:16px 24px;font-size:15px} .header__cta .btn--accent{padding:11px 15px;font-size:13px} .quiz{padding:20px 16px;border-radius:var(--r-lg)} .quiz .form--quiz{padding:18px 16px} .form{padding:22px 18px} .modal__win{padding:26px 20px;border-radius:var(--r-lg)} .rev{padding:26px 22px} .rev::after{font-size:100px;top:-16px;right:14px} .step{padding:28px 22px} .why__item{padding:24px 20px} .faq__i{padding:2px 20px} .faq__i summary{font-size:16px;padding:20px 40px 20px 0} .marquee{font-size:12px;padding:10px 0;letter-spacing:.12em} .marquee--alt{font-size:11px} .topbar__in{gap:10px} .hero__badge svg{width:26px;height:26px} } /* --- узкий телефон: ≤400 --- */ @media (max-width:400px){ :root{--gutter:16px} .logo__txt{display:none} .header__cta{gap:8px} .header__cta .btn--accent{padding:11px 13px;font-size:12.5px} .theme-toggle{width:38px;height:38px} .hero__mini{gap:16px} .hero__mini b{font-size:22px} .stats,.cards3,.steps,.why,.grid2,.reviews{gap:12px} .gallery{grid-template-columns:1fr;grid-auto-rows:minmax(190px,58vw)} .cta__phone{font-size:26px} .footer__phone{font-size:20px} } /* --- телефон в альбомной ориентации --- */ @media (max-height:540px) and (orientation:landscape){ .hero__in{min-height:0;padding-top:26px;padding-bottom:34px} .hero__scroll{display:none} .preloader__art{width:96px;height:72px} .preloader__name{font-size:20px} .modal__win{max-height:86vh} .lightbox img{max-height:74vh} } /* --- касание вместо мыши: гасим hover-эффекты, растим цели --- */ @media (hover:none){ .card3:hover,.tile:hover,.rev:hover,.stat:hover,.step:hover{transform:none;box-shadow:none} .gal:hover{transform:none} .card3:hover .card3__img img,.tile:hover .tile__img img,.gal:hover img{transform:none} .spot::before{display:none} .btn:hover::after{left:-140%} .gal::after{opacity:1;transform:scale(1)} .logo:hover .logo__mark{transform:none} .theme-toggle:hover{transform:none} } @media (pointer:coarse){ .theme-toggle{width:44px;height:44px} .nav.is-open a{padding:15px 6px} .burger{padding:11px} .footer__col a:not(.btn){padding:4px 0} .link-arrow{padding:4px 0} .slider__dots button{width:11px;height:11px} .slider__dots button.is-active{width:30px} /* невидимая зона нажатия вокруг точек слайдера */ .slider__dots button{position:relative} .slider__dots button::after{content:'';position:absolute;inset:-14px} } /* шапка на узких экранах: оставляем плашку «КС», текст логотипа прячем — иначе строка не помещается и появляется горизонтальная прокрутка */ @media (max-width:560px){ .logo__txt{display:none} .header__cta{gap:8px} .header__in{gap:12px} } .logo{min-width:0} .logo__txt{min-width:0} .logo__txt b{white-space:nowrap} /* 1101–1340: меню из восьми пунктов плюс две кнопки не помещаются в строку — поджимаем разрядку, чтобы не появлялась горизонтальная прокрутка */ @media (min-width:1101px) and (max-width:1340px){ .header__in{gap:14px} .nav{gap:0} .nav a{padding:8px 7px;font-size:13.5px} .header__cta{gap:8px} .header__cta .btn{padding:12px 16px;font-size:14px} } /* 1101–1200: самое узкое место — меню только что развернулось из бургера. Прячем вторичную кнопку «Калькулятор», она есть в первом экране и в футере */ @media (min-width:1101px) and (max-width:1200px){ .header__cta .btn--ghost{display:none} .nav a{padding:8px 6px;font-size:13px} } /* плавающие кнопки: на телефоне компактнее, чтобы не накрывать CTA */ @media (max-width:640px){ .fab{right:14px;gap:8px} .fab__btn{width:48px;height:48px} .fab__btn svg{width:21px;height:21px} } /* ---------- СРАВНЕНИЕ ЗАБОРОВ ---------- */ .compare{margin-top:clamp(40px,6vw,72px)} .compare__title{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin:0 0 20px} .compare__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .compare__table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;line-height:1.45} .compare__table th,.compare__table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .compare__table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600} .compare__table tbody th{font-weight:700;color:var(--text);white-space:nowrap} .compare__table td{color:var(--muted)} .compare__table tbody tr:last-child>*{border-bottom:0} .compare__note{margin:14px 0 0;font-size:14px;color:var(--muted)} @media (max-width:640px){.compare__table{font-size:14px}.compare__table th,.compare__table td{padding:12px 14px}} /* ---------- WHATSAPP / VIBER В CTA ---------- */ .msgr{display:flex;gap:10px;flex-wrap:wrap} .msgr__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:transform .3s var(--ease),filter .3s ease} .msgr__btn svg{width:20px;height:20px} .msgr__btn:hover{transform:translateY(-2px);filter:brightness(1.08)} .msgr__btn--wa{background:#1DA851} .msgr__btn--vb{background:#7360F2} /* ---------- СТАТЬИ НА ГЛАВНОЙ ---------- */ .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:36px 0 32px} .post{position:relative;display:flex;flex-direction:column;gap:14px;min-height:190px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .3s ease,transform .3s var(--ease)} .post:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-3px)} .post__n{font:800 14px 'Archivo',sans-serif;color:var(--accent);letter-spacing:.06em} .post h3{margin:0;font:800 20px/1.25 'Archivo',sans-serif;letter-spacing:-.01em} .post__more{margin-top:auto;color:var(--muted);font-size:14px;font-weight:600} .post:hover .post__more{color:var(--accent)} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .preloader__name .sp{width:.5em} .msgr__btn--call{background:var(--accent);color:var(--accent-ink)} .msgr__btn--tg{background:#229ED9} .cta--top{border-top:1px solid rgba(255,255,255,.06)} .form__err{margin:0;padding:10px 14px;border-radius:10px;background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.35);color:#fca5a5;font-size:14px;font-weight:600} [data-theme="light"] .form__err{color:#b91c1c}