/* ============ Base ============ */
:root{
    --c-dark:#2f3831;
    --c-dark-2:#202822;
    --c-accent:#6f8f6e;
    --c-accent-dark:#5b7a5a;
    --c-accent-light:#a9c3a4;
    --c-bg:#f2f2ef;
    --c-bg-2:#e9e9e5;
    --c-card:#ffffff;
    --c-line:#dfe0da;
    --c-text:#17211b;
    --c-muted:#5f6862;
    --c-muted-2:#8b938c;
    --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
    --container:1240px;
    --pad:24px;
    --header-h:76px;
    --radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
    margin:0;font-family:var(--font);font-size:16px;line-height:1.6;
    color:var(--c-text);background:var(--c-bg);
    -webkit-font-smoothing:antialiased;
}
body.modal-open{overflow:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--c-accent);color:#fff}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.section{padding:88px 0}

.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ Typography helpers ============ */
.eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--c-muted-2);margin-bottom:14px;
}
.eyebrow--light{color:var(--c-accent-light)}
h1,h2{font-weight:800;letter-spacing:-.02em;line-height:1.08;text-transform:uppercase}
h1{font-size:clamp(38px,5.2vw,62px)}
h2{font-size:clamp(30px,3.6vw,42px)}
h3{font-weight:700}

.section__head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:52px}
.section__head--single{grid-template-columns:1fr;margin-bottom:44px}
.section__line{display:block;width:56px;height:2px;background:var(--c-text);margin-top:24px}
.section__lead{color:var(--c-muted);font-size:15px;line-height:1.75;padding-bottom:4px}

/* ============ Buttons ============ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 24px;border-radius:var(--radius);font-size:15px;font-weight:600;
    transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.btn .icon{width:17px;height:17px}
.btn--primary{background:var(--c-accent);color:#fff}
.btn--primary:hover{background:var(--c-accent-dark)}
.btn--outline{border:1px solid #c9cec7;color:var(--c-text)}
.btn--outline:hover{background:var(--c-dark);border-color:var(--c-dark);color:#fff}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--block{width:100%}
.btn:disabled{opacity:.6;pointer-events:none}

/* ============ Header ============ */
.header{
    position:fixed;top:0;left:0;right:0;z-index:60;
    background:var(--c-dark);transition:box-shadow .25s;
}
.header.is-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.28)}
.header__inner{height:var(--header-h);display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:12px;color:#fff}
.logo__icon{width:42px;height:42px;stroke-width:1.5}
.logo__text{display:flex;flex-direction:column;line-height:1.15}
.logo__text strong{font-size:17px;font-weight:800;letter-spacing:.06em}
.logo__text small{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#9fb49a}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font-size:14px;font-weight:500;color:#e6ebe5;transition:color .2s}
.nav a:hover{color:var(--c-accent-light)}
.header__right{display:flex;align-items:center;gap:22px}
.header__phone{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:15px}
.header__phone .icon{width:17px;height:17px;color:var(--c-accent-light)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Hero ============ */
.hero{
    position:relative;
    color:#fff;
    background:
        linear-gradient(
            105deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.85) 20%,
            rgba(0, 0, 0, 0.65) 35%,
            rgba(0, 0, 0, 0.35) 50%,
            rgba(0, 0, 0, 0.10) 65%,
            rgba(0, 0, 0, 0) 80%
        ),
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%),
        url('https://slova.kirillch.ru/assets/img/hero.jpg') center center / cover no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__inner{
    position:relative;
    z-index:2;
    width:100%;
    padding-top: calc(var(--header-h) + 60px);
    padding-bottom: 80px;
}

.hero__content{
    max-width: 580px; /* Чуть уже, чтобы текст не уходил в светлую зону */
}

.hero__text{
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 480px;
}

.hero__actions{
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.hero__video{
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.hero__play{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    flex-shrink: 0;
}

.hero__play .icon{
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
    margin-left: 3px;
}

.hero__video:hover .hero__play{
    background: #fff;
    color: var(--c-dark);
}

.hero__video-text{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

/* Features внизу hero */
.hero__features{
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.hero__features li{
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hero__features .icon{
    width: 30px;
    height: 30px;
    color: #e8efe6;
    flex-shrink: 0;
}

.hero__features span{
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    max-width: 180px;
}

/* ============ Адаптив Hero ============ */
@media (max-width: 980px){
    .hero{
        background:
            linear-gradient(
                105deg,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(0, 0, 0, 0.88) 30%,
                rgba(0, 0, 0, 0.70) 50%,
                rgba(0, 0, 0, 0.40) 70%,
                rgba(0, 0, 0, 0.15) 85%,
                rgba(0, 0, 0, 0) 100%
            ),
            linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%),
            linear-gradient(160deg, #3a4a40 0%, #1a221d 60%, #0f1411 100%),
            url('../img/hero.jpg') center center / cover no-repeat;
    }
    .hero__features{
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 64px;
    }
}

@media (max-width: 700px){
    .hero{
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.75) 50%,
                rgba(0, 0, 0, 0.50) 100%
            ),
            url('../img/hero.jpg') center center / cover no-repeat;
    }
    .hero__inner{
        padding-top: calc(var(--header-h) + 40px);
        padding-bottom: 56px;
    }
    .hero__content{
        max-width: 100%;
    }
    .hero__features{
        grid-template-columns: 1fr 1fr;
        margin-top: 48px;
        padding-top: 32px;
    }
    .hero__actions{
        gap: 22px;
    }
}

@media (max-width: 480px){
    .hero__features{
        grid-template-columns: 1fr;
    }
}

/* ============ Solutions / cards ============ */
.solutions{background:var(--c-bg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:28px}
.card{
    background:var(--c-card);border:1px solid var(--c-line);border-radius:4px;
    display:flex;flex-direction:column;overflow:hidden;
    transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(23,33,27,.12)}
.card__media{
    position:relative;height:230px;overflow:hidden;
    background:linear-gradient(160deg,#48564b 0%,#232c25 100%);
    display:flex;align-items:center;justify-content:center;
}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__watermark{width:64px;height:64px;color:rgba(255,255,255,.28);stroke-width:1.2}
.card__body{padding:26px 26px 28px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.card__body h3{font-size:20px}
.card__sub{margin:6px 0 18px;font-size:14px;color:var(--c-muted-2)}
.card__specs{margin-bottom:24px}
.card__specs li{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:14px;color:#38423b}
.card__specs .icon{width:18px;height:18px;color:#4a554d}
.card__body .btn{margin-top:auto}

/* ============ Advantages ============ */
.advantages{background:var(--c-bg-2)}
.advantages__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.advantage__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.advantage__head .icon{width:30px;height:30px;color:var(--c-text)}
.advantage h3{font-size:15px;line-height:1.35;padding-top:4px}
.advantage p{font-size:13px;line-height:1.65;color:var(--c-muted)}

/* ============ CTA ============ */
.cta{
    background:
        linear-gradient(90deg,rgba(15,20,16,.88) 0%,rgba(15,20,16,.55) 55%,rgba(15,20,16,.35) 100%),
        linear-gradient(200deg,#2c3a2f 0%,#161d18 100%),
        url('../img/cta.jpg') center/cover no-repeat;
    color:#fff;padding:96px 0;
}
.cta__inner{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center}
.cta__content p:not(.eyebrow){margin-top:20px;color:rgba(255,255,255,.82);max-width:440px}
.cta__content .btn{margin-top:32px}
.cta__panel{
    background:rgba(232,238,231,.10);border:1px solid rgba(255,255,255,.14);
    border-radius:10px;padding:16px 30px;backdrop-filter:blur(6px);
}
.cta__panel li{
    display:flex;align-items:center;gap:15px;padding:17px 0;
    border-bottom:1px solid rgba(255,255,255,.10);font-size:15px;font-weight:500;
}
.cta__panel li:last-child{border-bottom:none}
.cta__panel .icon{color:#cfe3c8}

/* ============ Steps ============ */
.steps{background:#fff}
.steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;counter-reset:none}
.steps__grid li{border-top:2px solid var(--c-line);padding-top:24px}
.steps__num{display:block;font-size:40px;font-weight:800;color:#b6c4b1;line-height:1}
.steps__grid h3{margin:14px 0 8px;font-size:17px}
.steps__grid p{font-size:14px;line-height:1.65;color:var(--c-muted)}

/* ============ About ============ */
.about{background:var(--c-bg)}
.about__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.about__text h2{text-transform:none;margin-bottom:22px}
.about__text p{color:var(--c-muted);font-size:15px;line-height:1.75;margin-bottom:16px}
.about__checks{margin-top:24px}
.about__checks li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:15px;font-weight:600}
.about__checks .icon{width:18px;height:18px;color:var(--c-accent-dark);margin-top:3px}
.about__stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stat{
    background:#fff;border:1px solid var(--c-line);border-radius:8px;padding:28px 26px;
}
.stat strong{display:block;font-size:42px;font-weight:800;color:var(--c-accent-dark);line-height:1}
.stat span{display:block;margin-top:10px;font-size:13px;line-height:1.45;color:var(--c-muted)}

/* ============ Footer ============ */
.footer{background:var(--c-dark-2);color:#cfd6cf}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding:64px var(--pad)}
.footer__col p{font-size:14px;line-height:1.7;color:#98a29a;margin-top:18px}
.footer__col .btn{margin-top:20px}
.footer h4{
    font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:#9fb49a;margin-bottom:18px;
}
.footer__list li{display:flex;gap:11px;align-items:flex-start;padding:6px 0;font-size:14px}
.footer__list .icon{width:17px;height:17px;color:#8fa889;margin-top:3px}
.footer__list a:hover{color:#fff}
.footer__list--nav li{padding:5px 0}
.logo--footer{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.10)}
.footer__bottom-inner{
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:20px var(--pad);font-size:13px;color:#8a948c;
}
.footer__bottom a:hover{color:#fff}

/* ============ Modals ============ */
.modal{
    position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    padding:24px;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;
}
.modal.is-open{visibility:visible;opacity:1}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,14,11,.62)}
.modal__dialog{
    position:relative;background:#fff;border-radius:10px;padding:36px 34px;
    width:100%;max-width:470px;max-height:92vh;overflow:auto;
    transform:translateY(14px);transition:transform .25s;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.modal.is-open .modal__dialog{transform:none}
.modal__dialog--video{max-width:960px;background:transparent;box-shadow:none;padding:0}
.modal__video{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.modal__video iframe{width:100%;height:100%;border:0;display:block}
.modal__close{
    position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--c-muted);
    transition:.2s;background:#f0f0ec;
}
.modal__dialog--video .modal__close{top:-48px;background:rgba(255,255,255,.14);color:#fff}
.modal__close:hover{background:var(--c-dark);color:#fff}
.modal__title{font-size:24px;font-weight:800;margin-bottom:8px}
.modal__text{font-size:14px;color:var(--c-muted);margin-bottom:22px}

/* ============ Forms ============ */
.form__field{display:block;margin-bottom:16px}
.form__field span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form__field input,
.form__field textarea{
    width:100%;padding:12px 14px;border:1px solid var(--c-line);border-radius:6px;
    font:inherit;font-size:15px;background:#fbfbf9;color:var(--c-text);resize:vertical;
    transition:border-color .2s,box-shadow .2s;
}
.form__field input:focus,
.form__field textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(111,143,110,.18)}
.form__field .is-invalid{border-color:#c0564a}
.form__error{display:none;font-size:12px;color:#c0564a;margin-top:5px}
.form__error.is-active{display:block}
.form__agree{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--c-muted);margin:4px 0 18px;cursor:pointer}
.form__agree input{accent-color:var(--c-accent);margin-top:2px}
.form__status{font-size:14px;margin-top:14px}
.form__status.is-ok{color:#3f7a44;font-weight:600}
.form__status.is-err{color:#c0564a}

/* ============ Reveal animation ============ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ============ Responsive ============ */
@media (max-width:1100px){
    .cta__inner{grid-template-columns:1fr;gap:44px}
    .cta__panel{max-width:560px}
    .about__inner{grid-template-columns:1fr;gap:44px}
    .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
    .nav{
        position:fixed;top:var(--header-h);left:0;right:0;
        background:var(--c-dark);flex-direction:column;gap:4px;
        padding:20px var(--pad) 28px;margin:0;
        transform:translateY(-120%);transition:transform .3s;
        box-shadow:0 20px 40px rgba(0,0,0,.3);
    }
    .nav a{padding:10px 0;font-size:16px}
    body.nav-open .nav{transform:none}
    .burger{display:flex}
    .header__phone span{display:none}
    .section__head{grid-template-columns:1fr;gap:20px;align-items:start}
    .hero__features{grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
}
@media (max-width:700px){
    .header .btn--sm{display:none}
    .hero__inner{padding-top:calc(var(--header-h) + 64px)}
    .hero__features{grid-template-columns:1fr 1fr}
    .footer__grid{grid-template-columns:1fr;gap:32px;padding:48px var(--pad)}
    .section{padding:64px 0}
    .cta{padding:72px 0}
}
@media (max-width:480px){
    .hero__features{grid-template-columns:1fr}
    .hero__actions{gap:22px}
    .about__stats{grid-template-columns:1fr}
    .modal__dialog{padding:28px 22px}
}
/* ============ Page Hero (каталог) ============ */
.page-hero{
    position:relative;
    color:#fff;
    background:
        linear-gradient(105deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.85) 20%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.10) 65%, rgba(0,0,0,0) 80%),
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,.4) 100%),
        url('../img/hero.jpg') center center / cover no-repeat;
    padding: calc(var(--header-h) + 48px) 0 56px;
}
.breadcrumbs{
    font-size:14px; color:rgba(255,255,255,.7); margin-bottom:20px;
}
.breadcrumbs a{color:rgba(255,255,255,.85); transition:color .2s}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs__sep{margin:0 8px; opacity:.5}
.breadcrumbs [aria-current]{color:#fff; font-weight:600}

.page-hero__content{max-width:640px}
.page-hero__text{
    margin-top:20px; font-size:16px; line-height:1.7;
    color:rgba(255,255,255,.88); max-width:520px;
}
.page-hero__features{
    margin-top:56px; padding-top:32px;
    border-top:1px solid rgba(255,255,255,.16);
    display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.page-hero__features li{display:flex;align-items:flex-start;gap:14px}
.page-hero__features .icon{width:30px;height:30px;color:#e8efe6;flex-shrink:0}
.page-hero__features span{font-size:14.5px;font-weight:600;line-height:1.45;max-width:180px}

/* ============ Catalog layout ============ */
.catalog{background:var(--c-bg); padding:64px 0 80px}
.catalog__inner{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap:40px;
    align-items:start;
}

/* Sidebar */
.catalog__sidebar{
    position:sticky; top: calc(var(--header-h) + 20px);
    background:#fff; border:1px solid var(--c-line);
    border-radius:8px; padding:24px;
}
.catalog__sidebar-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px; padding-bottom:16px;
    border-bottom:1px solid var(--c-line);
}
.catalog__sidebar-head h2{font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.catalog__reset{
    font-size:13px; color:var(--c-muted-2); text-decoration:underline;
    background:none; border:none; cursor:pointer;
}
.catalog__reset:hover{color:var(--c-text)}

.filter-group{
    border:none; padding:0; margin:0 0 22px;
}
.filter-group:last-of-type{margin-bottom:24px}
.filter-group__title{
    display:flex; align-items:center; gap:10px;
    font-size:14px; font-weight:700; margin-bottom:12px;
    color:var(--c-text); padding:0;
}
.filter-group__title .icon{width:18px;height:18px}
.filter-group__list{display:flex;flex-direction:column;gap:8px}

.checkbox{
    display:flex; align-items:center; gap:10px;
    cursor:pointer; font-size:14px; color:#38423b;
    padding:4px 0;
}
.checkbox input{position:absolute; opacity:0; pointer-events:none}
.checkbox__mark{
    width:18px; height:18px; border:1.5px solid #c9cec7; border-radius:3px;
    display:flex; align-items:center; justify-content:center;
    transition:.15s; flex-shrink:0; background:#fff;
}
.checkbox__mark::after{
    content:""; width:10px; height:6px;
    border-left:2px solid #fff; border-bottom:2px solid #fff;
    transform:rotate(-45deg) translate(1px,-1px);
    opacity:0; transition:.15s;
}
.checkbox input:checked + .checkbox__mark{
    background:var(--c-accent); border-color:var(--c-accent);
}
.checkbox input:checked + .checkbox__mark::after{opacity:1}
.checkbox:hover .checkbox__mark{border-color:var(--c-accent)}

/* Toolbar */
.catalog__toolbar{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:24px; flex-wrap:wrap; gap:16px;
}
.catalog__found{font-size:14px; color:var(--c-muted)}
.catalog__found strong{color:var(--c-text); font-weight:700}
.catalog__sort{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--c-muted)}
.sort-select{
    padding:8px 32px 8px 14px; border:1px solid var(--c-line); border-radius:6px;
    font:inherit; font-size:14px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235f6862' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>") right 12px center no-repeat;
    appearance:none; cursor:pointer;
}
.sort-select:focus{outline:2px solid var(--c-accent); outline-offset:2px}

/* Grid */
.catalog__grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:24px;
}
.card__badge{
    position:absolute; top:14px; left:14px; z-index:2;
    background:var(--c-accent); color:#fff;
    font-size:12px; font-weight:700; padding:5px 10px; border-radius:4px;
}

.catalog__empty{
    text-align:center; padding:60px 20px;
    background:#fff; border:1px dashed var(--c-line); border-radius:8px;
}
.catalog__empty p{color:var(--c-muted); margin-bottom:20px}

/* CTA variant for catalog */
.cta--catalog{
    background:
        linear-gradient(90deg, rgba(15,20,16,.92) 0%, rgba(15,20,16,.75) 50%, rgba(15,20,16,.5) 100%),
        linear-gradient(200deg, #2c3a2f 0%, #161d18 100%),
        url('../img/cta.jpg') center/cover no-repeat;
}

/* Mobile filter toggle */
.catalog__mobile-toggle{
    display:none;
    width:100%; padding:12px 18px;
    background:#fff; border:1px solid var(--c-line); border-radius:6px;
    font:inherit; font-size:14px; font-weight:600;
    margin-bottom:16px;
}

/* ============ Responsive catalog ============ */
@media (max-width:1100px){
    .catalog__inner{grid-template-columns:260px 1fr; gap:28px}
}
@media (max-width:980px){
    .page-hero__features{grid-template-columns:1fr 1fr; gap:24px}
    .catalog__inner{grid-template-columns:1fr; gap:24px}
    .catalog__sidebar{
        position:fixed; top:0; left:0; bottom:0;
        width:320px; max-width:90vw; z-index:80;
        border-radius:0; border:none; border-right:1px solid var(--c-line);
        transform:translateX(-100%); transition:transform .3s;
        overflow-y:auto; padding:24px;
    }
    .catalog__sidebar.is-open{transform:none}
    .catalog__mobile-toggle{display:flex; align-items:center; justify-content:center; gap:8px}
    .catalog__sidebar::before{
        content:""; position:fixed; inset:0;
        background:rgba(0,0,0,.4); z-index:-1;
    }
}
@media (max-width:700px){
    .page-hero__features{grid-template-columns:1fr 1fr}
    .catalog__grid{grid-template-columns:1fr 1fr; gap:16px}
}
@media (max-width:480px){
    .catalog__grid{grid-template-columns:1fr}
    .page-hero__features{grid-template-columns:1fr}
}
/* ============ Contacts Hero (3 фичи) ============ */
.page-hero__features--3{
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
}

/* ============ Contacts Main ============ */
.contacts-main{
    background: var(--c-bg);
    padding: 80px 0;
}
.contacts-main__inner{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: start;
}

/* Форма */
.contacts-main__form h2{
    font-size: 32px;
    margin-bottom: 12px;
}
.contacts-main__lead{
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 480px;
}

.form--contacts .form__row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.form__field--icon{
    position: relative;
    display: block;
    margin-bottom: 16px;
}
.form__field--icon .form__field-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--c-muted-2);
    pointer-events: none;
}
.form__field--icon input,
.form__field--icon textarea{
    padding-left: 42px;
}
.form__field--textarea .form__field-icon{
    top: 18px;
    transform: none;
}

.form__secure{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--c-muted-2);
}
.form__secure .icon{
    width: 14px;
    height: 14px;
}

/* Контактная информация */
.contacts-main__info h2{
    font-size: 32px;
    margin-bottom: 28px;
}

.contacts-list{
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.contacts-list li{
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--c-line);
}
.contacts-list li:first-child{
    padding-top: 0;
}
.contacts-list__icon{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--c-text);
    margin-top: 2px;
}
.contacts-list__content{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contacts-list__value{
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
    transition: color .2s;
}
.contacts-list__value:hover{
    color: var(--c-accent);
}
.contacts-list__note{
    font-size: 13px;
    color: var(--c-muted-2);
}

/* Соцсети */
.contacts-social h3{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--c-text);
}
.contacts-social__list{
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.contacts-social__link{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.contacts-social__link:hover{
    background: var(--c-accent);
    transform: translateY(-2px);
}
.contacts-social__link .icon{
    width: 20px;
    height: 20px;
}

/* ============ Contacts Map ============ */
.contacts-map{
    background: #fff;
    padding: 80px 0;
}
.contacts-map__inner{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
}
.contacts-map__text h2{
    font-size: 32px;
    margin-bottom: 16px;
}
.contacts-map__text > p{
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 440px;
}
.contacts-map__feature{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: var(--c-bg);
    border-radius: 8px;
    margin-bottom: 24px;
}
.contacts-map__feature .icon{
    width: 28px;
    height: 28px;
    color: var(--c-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.contacts-map__feature strong{
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}
.contacts-map__feature span{
    font-size: 13px;
    color: var(--c-muted-2);
}

.contacts-map__map{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.contacts-map__map iframe{
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}
.contacts-map__popup{
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.contacts-map__address{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--c-text);
}
.contacts-map__link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-accent);
    font-weight: 600;
    transition: color .2s;
}
.contacts-map__link:hover{
    color: var(--c-accent-dark);
}
.contacts-map__link .icon{
    width: 14px;
    height: 14px;
}

/* ============ FAQ Preview ============ */
.contacts-faq{
    background: var(--c-bg);
    padding: 80px 0;
}
.contacts-faq__inner{
    max-width: 900px;
    margin: 0 auto;
}
.contacts-faq__head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 40px;
}
.contacts-faq__head h2{
    font-size: 32px;
    margin-bottom: 12px;
}
.contacts-faq__head p{
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.65;
    max-width: 480px;
}

.faq-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    overflow: hidden;
}
.faq-item__question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background .2s;
}
.faq-item__question::-webkit-details-marker{
    display: none;
}
.faq-item__question:hover{
    background: var(--c-bg);
}
.faq-item__toggle{
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.faq-item__toggle::before,
.faq-item__toggle::after{
    content: "";
    position: absolute;
    background: var(--c-text);
    transition: transform .2s;
}
.faq-item__toggle::before{
    width: 12px;
    height: 2px;
    top: 9px;
    left: 4px;
}
.faq-item__toggle::after{
    width: 2px;
    height: 12px;
    top: 4px;
    left: 9px;
}
.faq-item[open] .faq-item__toggle::after{
    transform: rotate(90deg);
}
.faq-item__answer{
    padding: 0 24px 20px;
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* ============ Responsive Contacts ============ */
@media (max-width: 1100px){
    .contacts-main__inner,
    .contacts-map__inner{
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .contacts-faq__head{
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 700px){
    .page-hero__features--3{
        grid-template-columns: 1fr;
    }
    .form--contacts .form__row{
        grid-template-columns: 1fr;
    }
    .contacts-main__form h2,
    .contacts-main__info h2,
    .contacts-map__text h2,
    .contacts-faq__head h2{
        font-size: 28px;
    }
    .contacts-map__map iframe{
        height: 300px;
    }
}
/* ============ Steps Page ============ */
.steps-page{
    background: var(--c-bg);
    padding: 80px 0;
}
.steps-page__head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 56px;
}
.steps-page__head h2{
    font-size: 36px;
    margin-bottom: 0;
}
.steps-page__lead{
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1.7;
    padding-bottom: 4px;
}

/* Step Item */
.steps-page__list{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.step-item{
    display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 32px;
    transition: box-shadow .25s, transform .25s;
}
.step-item:hover{
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.step-item__number{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent-light) 0%, var(--c-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-item__number span{
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.step-item__content h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}
.step-item__content p{
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 16px;
}
.step-item__duration{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}
.step-item__duration .icon{
    width: 16px;
    height: 16px;
    color: var(--c-accent);
}

.step-item__media{
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #e8ebe9 0%, #d4d8d5 100%);
}
.step-item__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.step-item__actions{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.step-item__actions li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #38423b;
}
.step-item__actions .icon{
    width: 18px;
    height: 18px;
    color: var(--c-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

/* CTA variant for steps */
.cta--steps{
    background:
        linear-gradient(90deg, rgba(15,20,16,.92) 0%, rgba(15,20,16,.75) 50%, rgba(15,20,16,.5) 100%),
        linear-gradient(200deg, #2c3a2f 0%, #161d18 100%),
        url('../img/cta.jpg') center/cover no-repeat;
}

/* ============ Responsive Steps ============ */
@media (max-width: 1200px){
    .step-item{
        grid-template-columns: 60px 1fr 1fr;
        gap: 20px;
    }
    .step-item__actions{
        grid-column: 2 / 4;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .step-item__actions li{
        flex: 1 1 calc(50% - 10px);
        min-width: 200px;
    }
}

@media (max-width: 980px){
    .steps-page__head{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .step-item{
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }
    .step-item__media{
        grid-column: 1 / 3;
        order: 3;
    }
    .step-item__actions{
        grid-column: 1 / 3;
        order: 4;
    }
}

@media (max-width: 700px){
    .steps-page{
        padding: 64px 0;
    }
    .step-item{
        padding: 24px;
    }
    .step-item__number{
        width: 50px;
        height: 50px;
    }
    .step-item__number span{
        font-size: 20px;
    }
    .step-item__content h3{
        font-size: 18px;
    }
    .step-item__actions li{
        flex: 1 1 100%;
    }
}

@media (max-width: 480px){
    .step-item{
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .step-item__number{
        justify-self: start;
    }
    .step-item__media{
        grid-column: 1;
    }
    .step-item__actions{
        grid-column: 1;
    }
}
/* ============ Advantages Hero (5 фич) ============ */
.page-hero__features--5{
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.page-hero__features--5 .icon{
    width: 28px;
    height: 28px;
}
.page-hero__features--5 span{
    font-size: 13.5px;
    max-width: 160px;
}

/* ============ Advantages Content ============ */
.advantages-content{
    background: #fff;
}

.adv-block{
    padding: 80px 0;
}
.adv-block:nth-child(even){
    background: var(--c-bg);
}

.adv-block__inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.adv-block--reverse .adv-block__inner{
    direction: rtl;
}
.adv-block--reverse .adv-block__inner > *{
    direction: ltr;
}

.adv-block__text h2{
    font-size: 36px;
    margin-bottom: 20px;
    line-height: 1.15;
}
.adv-block__desc{
    color: var(--c-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 520px;
}

/* Stats (блок Надежность) */
.adv-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 32px;
}
.adv-stat{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adv-stat__label{
    font-size: 13px;
    color: var(--c-muted-2);
    font-weight: 500;
}
.adv-stat__value{
    font-size: 28px;
    font-weight: 800;
    color: var(--c-accent-dark);
    line-height: 1;
}
.adv-stat__note{
    font-size: 12px;
    color: var(--c-muted-2);
    line-height: 1.4;
}

/* Features grid (Комфорт, Автономность, Индивидуальный) */
.adv-features{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.adv-feature{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    transition: box-shadow .2s, transform .2s;
}
.adv-feature:hover{
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.adv-block--reverse .adv-feature{
    background: var(--c-bg);
}
.adv-feature .icon{
    width: 28px;
    height: 28px;
    color: var(--c-accent);
}
.adv-feature strong{
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-text);
}
.adv-feature span{
    font-size: 12px;
    color: var(--c-muted-2);
    line-height: 1.4;
}

/* Media */
.adv-block__media{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #e8ebe9 0%, #d4d8d5 100%);
}
.adv-block__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.adv-block__media--fallback{
    display: flex;
    align-items: center;
    justify-content: center;
}
.adv-block__media--fallback::after{
    content: "Изображение";
    font-size: 14px;
    color: var(--c-muted-2);
}

/* Overlay card (блок Надежность) */
.adv-overlay{
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(20, 26, 22, 0.92);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 20px 24px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 280px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.adv-overlay .icon{
    width: 32px;
    height: 32px;
    color: var(--c-accent-light);
    flex-shrink: 0;
}
.adv-overlay strong{
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.3;
}
.adv-overlay span{
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.8);
}

/* ============ Responsive Advantages ============ */
@media (max-width: 1200px){
    .page-hero__features--5{
        grid-template-columns: repeat(3, 1fr);
    }
    .adv-features{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px){
    .adv-block__inner{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .adv-block--reverse .adv-block__inner{
        direction: ltr;
    }
    .adv-block__media{
        order: -1;
    }
    .adv-stats{
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 700px){
    .page-hero__features--5{
        grid-template-columns: 1fr 1fr;
    }
    .adv-block{
        padding: 56px 0;
    }
    .adv-block__text h2{
        font-size: 28px;
    }
    .adv-features{
        grid-template-columns: 1fr;
    }
    .adv-overlay{
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 16px;
        max-width: 100%;
    }
}

@media (max-width: 480px){
    .page-hero__features--5{
        grid-template-columns: 1fr;
    }
    .adv-stat__value{
        font-size: 24px;
    }
}