/* Шрифты подключены в через — так страница отрисовывается быстрее, чем при @import отсюда. */ /* ───────────────────────── токены ───────────────────────── */ :root{ --void:#000000; --graphite:#15171A; --graphite-2:#212429; --chalk:#F2F3F5; --steel:#7C838C; --red:#E10600; --red-hot:#FF1A0D; --ok:#39C46E; --hair:rgba(242,243,245,.13); --display:'Unbounded','Arial Black',system-ui,sans-serif; --text:'Manrope','Helvetica Neue',Arial,sans-serif; --pad:clamp(20px,5vw,72px); --shell:1400px; --cut:10px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--void);color:var(--chalk); font-family:var(--text);font-size:16px;line-height:1.6; overflow-x:hidden;-webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--red-hot);outline-offset:3px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)} /* ───────────────────────── типографика ───────────────────────── */ h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.03em;line-height:1.08} p{margin:0} .t-xl{font-size:clamp(1.65rem,2.9vw,2.6rem);line-height:1.06;letter-spacing:-.035em} .t-md{font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.2} .lede{font-size:clamp(.94rem,1.05vw,1.02rem);color:var(--steel);max-width:50ch;line-height:1.7} .meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);font-weight:600} /* красные «слэши» из логотипа */ .mark{display:flex;gap:4px;align-items:center;height:7px;flex:none} .mark i{display:block;width:20px;height:100%;background:var(--red);transform:skewX(-26deg)} .mark i:nth-child(2){width:10px;opacity:.55} /* ───────────────────────── кнопки ───────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--text);font-weight:700;font-size:.9rem; padding:15px 28px;border:0;cursor:pointer;text-align:center; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),opacity .3s; } .btn--primary{background:var(--red);color:#fff} .btn--primary:hover{background:var(--red-hot);transform:translateY(-2px)} .btn--ghost{background:var(--graphite-2);color:var(--chalk)} .btn--ghost:hover{background:var(--chalk);color:var(--void);transform:translateY(-2px)} .btn[disabled]{opacity:.55;cursor:progress;transform:none} .shot{position:relative;overflow:hidden;margin:0;background:#0C0D0F} .shot img{width:100%;height:100%;object-fit:cover;will-change:transform} .brand{user-select:none} /* ───────────────────────── шапка ───────────────────────── */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:24px; height:72px;padding-inline:var(--pad); border-bottom:1px solid transparent; transition:background .4s var(--ease),border-color .4s var(--ease); } .hdr.is-stuck{background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hair)} .hdr .brand{height:30px;width:auto} .nav{display:flex;gap:30px;font-size:.85rem;font-weight:600;color:var(--steel)} .nav a{position:relative;padding-block:5px;transition:color .3s} .nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .3s var(--ease)} .nav a:hover{color:var(--chalk)} .nav a:hover::after{width:100%} .hdr-cta{display:flex;align-items:center;gap:16px} .lang{display:flex;align-items:center;gap:2px;font-size:.74rem;font-weight:700;letter-spacing:.06em} .lang a{padding:6px 7px;color:var(--steel);transition:color .25s} .lang a:hover{color:var(--chalk)} .lang a[aria-current]{color:var(--chalk);box-shadow:inset 0 -2px 0 var(--red)} .hdr-tel{font-weight:700;font-size:.92rem;white-space:nowrap;font-variant-numeric:tabular-nums} .hdr .btn{padding:12px 20px;font-size:.82rem} /* ───────────────────────── hero ───────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden} .hero .shot{position:absolute;inset:0} .hero-veil{position:absolute;inset:0;background: linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.62) 68%,#000 100%), linear-gradient(90deg,rgba(0,0,0,.66) 0%,transparent 58%)} .hero-in{position:relative;width:100%;max-width:var(--shell);margin:0 auto;padding:96px var(--pad) clamp(36px,6vh,68px)} .hero .brand{width:clamp(210px,26vw,360px);height:auto;margin-bottom:26px;filter:drop-shadow(0 6px 26px rgba(0,0,0,.55))} .hero-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:14px} .hero-sub .t-md{font-weight:600} .hero-lede{font-size:clamp(.98rem,1.2vw,1.1rem);color:rgba(242,243,245,.8);max-width:40ch;margin-bottom:30px;font-weight:500} .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px} .hero-btns .btn{padding:17px 32px;font-size:.95rem} .hero-foot{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--hair)} .hero-foot p{font-size:.85rem;color:var(--steel)} .js .hero-anim{opacity:0;transform:translateY(20px);animation:rise .8s var(--ease) forwards} .js .hero-anim:nth-child(1){animation-delay:.10s} .js .hero-anim:nth-child(2){animation-delay:.20s} .js .hero-anim:nth-child(3){animation-delay:.28s} .js .hero-anim:nth-child(4){animation-delay:.36s} .js .hero-anim:nth-child(5){animation-delay:.44s} @keyframes rise{to{opacity:1;transform:none}} /* ───────────────────────── секции ───────────────────────── */ .sec{padding-block:clamp(58px,7vw,104px)} .sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,4vw,52px);max-width:52ch} .sec-head h2{max-width:16ch} /* услуги */ .svc{border-top:1px solid var(--hair)} .svc-row{ display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.2fr) 36px; align-items:center;gap:clamp(14px,2.4vw,36px); padding:clamp(18px,2.1vw,26px) 0; border-bottom:1px solid var(--hair); position:relative;transition:padding-left .4s var(--ease); } .svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease)} .svc-row:hover{padding-left:20px} .svc-row:hover::before{transform:scaleY(1);transform-origin:top} .svc-num{font-family:var(--display);font-size:.78rem;font-weight:600;color:var(--steel);font-variant-numeric:tabular-nums;transition:color .3s} .svc-row:hover .svc-num{color:var(--red)} .svc-row h3{font-size:clamp(1.05rem,1.6vw,1.35rem);text-transform:uppercase;letter-spacing:-.02em} .svc-row p{color:var(--steel);font-size:.94rem;max-width:46ch} .svc-go{justify-self:end;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;color:var(--steel);font-size:.9rem;transition:.35s var(--ease)} .svc-row:hover .svc-go{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-45deg)} /* сплит-блоки */ .split{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch} .split .shot{min-height:clamp(320px,46vw,600px)} .split-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;padding:clamp(44px,5.5vw,88px) var(--pad)} .split--flip .split-txt{order:2} .split--flip .shot{order:1} .split-txt .lede{max-width:42ch} .split--dark{background:var(--graphite)} .facts{display:flex;flex-wrap:wrap;gap:14px 0;border-top:1px solid var(--hair);padding-top:18px;width:100%} .facts div{padding-right:26px;margin-right:26px;border-right:1px solid var(--hair)} .facts div:last-child{border-right:0;margin-right:0;padding-right:0} .facts b{display:block;font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:3px} .facts span{font-size:.75rem;color:var(--steel)} /* как это работает */ .flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)} .flow-step{padding:28px clamp(16px,2vw,32px) 30px 0;border-right:1px solid var(--hair);position:relative} .flow-step:last-child{border-right:0} .flow-step::before{content:"";position:absolute;top:-4px;left:0;width:8px;height:7px;background:var(--steel);transform:skewX(-26deg)} .flow-step:first-child::before{background:var(--red)} .flow-num{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(242,243,245,.26);line-height:1;margin-bottom:12px} .flow-step h3{font-size:1rem;letter-spacing:-.02em;margin-bottom:6px;text-transform:uppercase} .flow-step p{color:var(--steel);font-size:.88rem;max-width:28ch} /* почему */ .why{border-top:1px solid var(--hair)} .why-row{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);padding:clamp(15px,1.8vw,22px) 0;border-bottom:1px solid var(--hair)} .why-row .mark{opacity:.4;transition:opacity .4s} .why-row h3{font-size:clamp(1.05rem,1.8vw,1.5rem);text-transform:uppercase;transition:transform .45s var(--ease)} .why-row small{margin-left:auto;color:var(--steel);font-size:.85rem;text-align:right;max-width:32ch;display:none} .why-row:hover .mark{opacity:1} .why-row:hover h3{transform:translateX(12px)} /* география выезда */ .geo{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(16px,2.4vw,36px)} .geo span{padding:13px 0;border-top:1px solid var(--hair);font-size:.92rem} .geo span:nth-child(-n+4){border-top-color:var(--steel)} .geo-note{margin-top:22px;font-size:.88rem;color:var(--steel);max-width:60ch} /* вопросы и ответы */ .faq{border-top:1px solid var(--hair)} .faq details{border-bottom:1px solid var(--hair)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding:19px 0;cursor:pointer;list-style:none; font-family:var(--display);font-weight:600;font-size:clamp(.95rem,1.25vw,1.08rem);letter-spacing:-.02em; transition:color .25s } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";flex:none;color:var(--red);font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)} .faq summary:hover{color:#fff} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 22px;color:var(--steel);font-size:.94rem;max-width:72ch;line-height:1.7} /* галерея — мозаика */ .mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,14vw,205px);gap:8px} .tile{position:relative;overflow:hidden;margin:0;background:#0C0D0F} .tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .tile:hover img{transform:scale(1.05)} .tile--big{grid-column:span 2;grid-row:span 2} .tile figcaption{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 16px 13px; font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:-.01em;text-transform:uppercase; background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,transparent 100%); } .tile--big figcaption{font-size:1rem;padding:48px 22px 18px} .tile::after{content:"";position:absolute;inset:0;background:var(--red);opacity:0;transition:opacity .4s;mix-blend-mode:overlay;pointer-events:none} .tile:hover::after{opacity:.16} /* ───────────────────────── контакты и форма ───────────────────────── */ .contact{padding-top:clamp(58px,7vw,104px)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:start} .chan{display:flex;flex-direction:column;margin-top:30px;border-top:1px solid var(--hair)} .chan a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--hair);transition:.3s var(--ease)} .chan a:hover{padding-inline:12px;background:var(--graphite)} .chan b{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:-.02em} .chan span{color:var(--steel);font-size:.88rem;font-variant-numeric:tabular-nums} .form{background:var(--graphite);padding:clamp(24px,2.8vw,38px);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:22px} .field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);font-weight:700} .field input,.field textarea{ background:transparent;border:0;border-bottom:1px solid var(--hair); color:var(--chalk);font-family:var(--text);font-size:1rem;padding:10px 0;resize:none; transition:border-color .3s } .field input::placeholder,.field textarea::placeholder{color:#4A5058} .field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--red)} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--red-hot)} .field .err{font-size:.76rem;color:var(--red-hot);min-height:0} /* переключатель типа заявки */ .type-switch{display:flex;gap:8px;margin-bottom:24px} .type-switch input{position:absolute;opacity:0;pointer-events:none} .type-switch label{ flex:1;text-align:center;padding:12px 10px;font-size:.85rem;font-weight:600;cursor:pointer; background:var(--graphite-2);color:var(--steel); clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); transition:background .25s,color .25s } .type-switch input:checked + label{background:var(--red);color:#fff} .type-switch input:focus-visible + label{outline:2px solid var(--red-hot);outline-offset:2px} .trap{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .form .btn{width:100%} .form-note{margin-top:14px;font-size:.78rem;color:var(--steel)} .form-note.is-ok{color:var(--ok)} .form-note.is-err{color:var(--red-hot)} /* подвал */ .ftr{border-top:1px solid var(--hair);margin-top:clamp(44px,5vw,72px);padding-block:26px;display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between} .ftr .brand{height:26px;width:auto} .ftr p{font-size:.78rem;color:var(--steel)} .credit{ border-top:1px solid var(--hair);padding-block:18px 24px; display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--steel) } .credit a{color:var(--chalk);font-weight:600;transition:color .25s} .credit a:hover{color:var(--red-hot)} /* мобильная панель CTA */ .bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:1px;background:var(--hair);border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom)} .bar a,.bar button{flex:1;padding:15px 8px;text-align:center;font-weight:700;font-size:.9rem;background:var(--void);color:var(--chalk);border:0;font-family:var(--text);cursor:pointer} .bar .is-red{background:var(--red);color:#fff} /* появление секций */ .js.reveal-on [data-reveal]{opacity:0;transform:translateY(18px)} .js.reveal-on [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)} /* ───────────────────────── адаптив ───────────────────────── */ @media (max-width:1080px){ .nav{display:none} .split{grid-template-columns:1fr} .split--flip .split-txt{order:1} .split--flip .shot{order:2} .split .shot{min-height:62vw} .flow{grid-template-columns:1fr 1fr} .flow-step:nth-child(2){border-right:0} .flow-step:nth-child(-n+2){border-bottom:1px solid var(--hair)} .contact-grid{grid-template-columns:1fr} } @media (max-width:760px){ .hdr .btn,.hdr-tel span{display:none} .bar{display:flex} body{padding-bottom:56px} .svc-row{grid-template-columns:44px minmax(0,1fr);row-gap:6px} .svc-row h3,.svc-row p{grid-column:2} .svc-go{display:none} .flow{grid-template-columns:1fr} .flow-step{border-right:0;border-bottom:1px solid var(--hair);padding-right:0} .flow-step:last-child{border-bottom:0} .facts div{padding-right:18px;margin-right:18px} .geo{grid-template-columns:repeat(2,1fr)} .geo span:nth-child(-n+4){border-top-color:var(--hair)} .geo span:nth-child(-n+2){border-top-color:var(--steel)} .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:30vw;gap:6px} .tile--big{grid-column:span 2;grid-row:span 1} .tile--big figcaption{font-size:.86rem;padding:36px 16px 13px} } @media (min-width:1200px){ .why-row small{display:block} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .js .hero-anim{opacity:1;transform:none} .js.reveal-on [data-reveal]{opacity:1;transform:none} }