/* ====== ROOT / RESET ====== */
:root{
    --ids-black:#1D1C1B;
    --ids-white:#FFFFFF;
    --ids-gray-100:#F6F6F6;
    --ids-gray-200:#F3F3F3;
    --ids-gray-300:#C2C2C2;
    --ids-gray-400:#C0C0C0;
    --ids-gray-500:#989898;
    --ids-text:#000000;

    --ids-gold-grad: linear-gradient(87.07deg,#AF9747 48.35%,#C9C3AD 84.5%,#AF9747 98.02%);
    --ids-red:#E31E24;

    --h1-desk:64px;
    --h1-mob:36px;
    --lead:12px;

    --radius-32:32px;
    --radius-24:24px;
    --radius-16:16px;
    --radius-12:12px;

    /*--container:1100px;*/
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    color:var(--ids-black);
    background:#fff;
}
img{display:block;max-width:100%;height:auto}

/* ====== HELPERS ====== */
.container{
    width:min(100%, var(--container));
    margin-inline:auto;
    padding-inline:16px;
}

/* Кнопки */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:40px; padding:0 16px; gap:8px;
    border-radius:12px; border:0; background:transparent; color:var(--ids-black);
    font:700 12px/120% "Montserrat",sans-serif;
    text-decoration:none; cursor:pointer;
}
.btn--ghost{ background:transparent; border:1px solid transparent }
.btn--black{ background:var(--ids-black); color:#fff }

/* ====== HEADER ====== */
.header{ padding-block:12px }
.header__row{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Лого */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.logo__img{ width:171px; height:42px; object-fit:cover; border-radius:6px }
.logo__word{ font:italic 700 16px/120% "Montserrat",sans-serif; color:var(--ids-black) }

/* Навигация — десктоп */
.nav{ display:none; align-items:center; gap:24px }
.nav__link{
    position:relative;
    font:500 12px/120% "Montserrat",sans-serif;
    color:var(--ids-black); text-decoration:none; padding-block:8px;
}
.nav__link--active{ font-weight:600 }
.nav__link--active::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ids-gold-grad);
    border-radius:2px;
}

/* Правый блок */
.header__controls{ display:flex; align-items:center; gap:16px }
.pvz{ display:none; align-items:center; gap:6px; text-decoration:none; color:var(--ids-black); font:400 12px/120% "Montserrat",sans-serif }
.pvz__dot{ width:10px; height:10px; border-radius:50%; background:#BCAA6E; display:inline-block }
.account{ display:none; position:relative; height:42px; padding:0 8px; border-radius:12px; background:#F3F3F3; align-items:center; gap:5px }
.account__avatar{ width:32px; height:32px; border-radius:10px; object-fit:cover }
.account__name{ font:500 12px/120% "Montserrat",sans-serif }
.account__chev{ width:6px; height:2px; border:2px solid #999; display:inline-block }

.lang{ display:inline-flex; width:22px; height:22px; border:1px solid var(--ids-gray-300); border-radius:20px; padding:0; overflow:hidden; background:#fff }
.lang img{ width:100%; height:100%; object-fit:cover }

.burger{ width:32px; height:32px; border:0; background:transparent; position:relative }
.burger::before,.burger::after{ content:""; position:absolute; left:6px; right:6px; height:2.6667px; background:#000 }
.burger::before{ top:9px } .burger::after{ bottom:9px }
.burger:focus{ outline:2px dashed var(--ids-gray-300); outline-offset:2px }

/* ====== HERO ====== */
.hero{ padding-block:24px 32px }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:24px }

/* Текст */
.hero__title{ font:600 var(--h1-mob)/120% "Montserrat",sans-serif; letter-spacing:-0.04em; color:var(--ids-black); margin:0 }
.hero__lead{ font:400 var(--lead)/120% "Montserrat",sans-serif; color:#000; max-width:444px; margin:12px 0 0 }

/* Медиа */
.hero__media{ margin:0; position:relative; width:100%; aspect-ratio:685/428; border-radius:var(--radius-32); overflow:hidden }
.hero__image{ width:100%; height:100%; object-fit:cover; object-position:center }
.hero__media::after{
    content:""; position:absolute; inset:-4% -6% auto auto; width:140%; height:140%;
    /*background:linear-gradient(215.57deg,#D9D9D9 71.11%, rgba(217,217,217,0) 84.87%); pointer-events:none;*/
}

/* Карточки */
.hero__cards{ display:grid; gap:16px }
.card{
    background:#fff;
    border-radius:var(--radius-24); /* точечная правка: радиус */
    /* точечная правка: тени как в макете */
    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
    padding:24px 18px 18px;
}
.card__title{ font:500 12px/100% "Montserrat",sans-serif; color:var(--ids-black); margin-bottom:16px }

/* Инпут-чипы */
.input{
    display:flex; align-items:center; justify-content:center;
    height:44px; padding:0 16px; border-radius:12px; /* точечная правка */
    white-space:nowrap; font:500 12px/100% "Montserrat",sans-serif;
}
.input--gray{ background:var(--ids-gray-100); border:1px solid var(--ids-gray-200); color:var(--ids-black) }
.input--select{ position:relative; padding-right:28px }
.input--select::after{
    content:""; position:absolute; right:12px; top:50%; width:8px; height:5px; margin-top:-2px;
    background:conic-gradient(from 45deg at 50% 60%, transparent 0 25%, #6D6D6D 0 75%, transparent 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
/* точечные вставки: иконка пина */
.input--pin{ position:relative; padding-left:28px }
.input--pin::before{
    content:""; position:absolute; left:12px; top:50%; width:12px; height:12px; margin-top:-6px;
    border-radius:50%; box-shadow: inset 0 0 0 2px #BCAA6E;
}
.input--fluid{ width:100% }

/* Ряды калькулятора */
.calc__row{ display:grid; gap:10px; margin-top:10px }
.calc__row--fromto{ grid-template-columns:1fr 34px 1fr 34px 180px max-content } /* точечная правка: один ряд на десктопе */
.calc__row--mob{ grid-template-columns:1fr 20px 1fr } /* моб. ряд размеров/веса */

/* точечные вставки: коннекторы */
.connector{
    align-self:center; justify-self:center; width:34px; height:6px; position:relative;
    background:repeating-linear-gradient(90deg, #D5D5D5 0 6px, transparent 6px 10px);
    border-radius:6px;
}
.connector--short{ width:34px }

/* точечные вставки: разделитель × */
.calc__sep{
    align-self:center; justify-self:center; width:20px; text-align:center;
    font:700 14px/1 "Montserrat",sans-serif; color:#C9C3AD;
}

/* Кнопки в калькуляторе */
.card__action{ width:100%; margin-top:16px }              /* моб. основная */
.calc__btn-inline{ display:none }                         /* десктопная, прячем на мобилке */

/* Track */
.track__row{ display:grid; grid-template-columns:1fr 44px; gap:14px }
.track__btn{ padding:0; width:44px; min-width:44px }      /* квадратная кнопка */
.track__btn::before{
    content:""; display:block; width:16px; height:16px; border:2px solid #fff; border-radius:50%;
    box-shadow: 8px 8px 0 -6px #fff;
    transform: translateX(-2px);
}

/* ====== DESKTOP ====== */
@media (min-width:999px){
    .header{ padding-block:51px 0 }
    .nav{ display:flex }
    .pvz{ display:flex }
    .account{ display:flex }
    .burger{ display:none }

    .hero{ padding-block:143px 40px }
    .hero__grid{ grid-template-columns: 1fr 685px; align-items:start; gap:24px }
    .hero__title{ font-size:var(--h1-desk) }
    .hero__lead{ max-width:444px }
    .hero__media{ height:428px; aspect-ratio:auto }

    .hero__cards{
        grid-column:1 / -1;
        display:grid; grid-template-columns: 1fr 340px; gap:24px; margin-top:24px;
        display: flex;
    }

    /* точечные правила: инлайн-кнопка и скрытие моб. ряда */
    .calc__btn-inline{ display:inline-flex }
    .card__action{ display:none }
    .calc__row--mob{ display:none }
}

/* ====== ULTRA-SMALL ====== */
@media (max-width:360px){
    .calc__row--fromto{ grid-template-columns:1fr 24px 1fr } /* на очень узких экранах */
}





/* ================= PROMO (overlay row) ================= */

/* Базовое поведение (мобилка — отдельная секция) */
.promo{
    position: relative;
    z-index: 1;
    padding-block: 24px;             /* моб. внутренние отступы */
    background: transparent;
}
.promo__row{
    display: grid;
    grid-template-columns: 1fr;       /* мобилка: одна карточка */
    gap: 16px;
}

/* Карточка */
.promo-card{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    padding: 24px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
            0 18px 40px rgba(0,0,0,.08),
            0 2px 6px rgba(0,0,0,.05);
}
.promo-card__text{
    z-index: 1;
    position: absolute;
    width: 50%;
    margin-left: 10px;
}
.promo-card__title{
    margin: 0 0 8px 0;
    font: 700 22px/120% "Montserrat", sans-serif;
    letter-spacing: -0.02em;
    color: #1D1C1B;
}
.promo-card__desc{
    margin: 0;
    font: 500 12px/140% "Montserrat", sans-serif;
    color: #7F7F7F;
}

/* Медиа-область — адаптивная картинка строго в зоне */
.promo-card__media{
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    position: static;
}
.promo-card__img{
    width: 100%;
    height: 100%;
    object-fit: contain;   /* любые размеры, но вписываются в область */
}

/* Варианты карточек по макету */
.promo-card--black{
    color: #fff;
    background: radial-gradient(88% 140% at 14% 16%, #2B2927 0%, #111010 100%);
}
.promo-card--black .promo-card__title{ color:#FFFFFF }
.promo-card--black .promo-card__desc{ color:rgba(255,255,255,.62) }

.promo-card--white{
    background: #FFFFFF;
}

.promo-card--sand{
    background: linear-gradient(180deg, #D2BC87 0%, #CBB679 100%);
}

/* Точки (как в мобильном макете) */
.promo__dots{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.promo__dots span{
    width: 32px; height: 4px; border-radius: 4px;
    background: #E6E6E6;
}
.promo__dots .is-active{ background:#CFCFCF }

/* ============== DESKTOP ============== */
@media (min-width:999px){
    /* Перекрываем hero и следующую секцию: тянем вверх и вниз, держим поверх */
    .promo{
        padding-block: 0;
        transform: translateY(-80px);   /* высота перекрытия над hero */
        margin-bottom: -80px;           /* нависаем над следующей секцией */
        z-index: 5;                     /* выше hero и следующего блока */
    }
    .promo__row{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    }

    .promo-card{
        height: 184px;                  /* как в десктоп-макете */
        grid-template-columns: 1fr 220px;
        padding: 24px 28px;
        border-radius: 32px;
    }
    .promo-card--black{ grid-template-columns: 1fr 300px } /* больше медиа справа */

    .promo__dots{ display:none }      /* точки скрываем на десктопе */

    .promo-card__media{
        position: absolute;
        right: -58px;
        width: 123%;
        top: -45px;
    }
}



/* ====== ABOUT (О компании) ====== */
.about{ position:relative; padding-block:32px 24px }
.about__head{ display:grid; gap:16px }
.about__title{
    margin:0;
    font:400 40px/49px "Montserrat",sans-serif; /* из макета */
    color:#000;
}
.about__lead{
    margin:0;
    max-width:520px;           /* текстовый блок как в макете */
    font:400 12px/120% "Montserrat",sans-serif;
    color:#000;
}

/* Сетка карточек услуг */
.services{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
}
.service-card{
    position:relative;
    display:grid;
    grid-template-columns: 1fr;
    align-items:center;
    height:286px;                   /* мобильная высота */
    padding:24px;
    background:#F2F2F2;
    border-radius:16px;             /* радиус по макету */
    box-shadow:0 4px 8px rgba(0,0,0,.05);
    overflow:hidden;
}
.service-card__text{ z-index:1; max-width:50%; }
.service-card__title{
    margin:0 0 12px 0;
    font:600 24px/100% "Montserrat",sans-serif; /* Header-Mst_24 */
    color:#000;
}
.service-card__desc{
    margin:0 0 20px 0;
    font:400 12px/120% "Montserrat",sans-serif; /* Body-Mst_12 */
    color:#2B2A29;
}

/* Золотая кнопка-стрелка */
.service-card__cta{
    display:inline-flex; width:24px; height:24px; border-radius:12px;
    border:1px solid #AF9747; position:relative;
}
.service-card__cta i{
    position:absolute; left:50%; top:50%;
    width:10px; height:1px; background:#AF9747;
    transform:translate(-50%,-50%);
}
.service-card__cta i::after{
    content:""; position:absolute; right:-1px; top:-3px;
    width:6px; height:6px; border-top:1px solid #AF9747; border-right:1px solid #AF9747;
    transform:rotate(45deg);
}

/* Правый медиа-блок */
.service-card__media{
    position:absolute; right:0; top:0; bottom:0; width:45%;
    display:flex; align-items:center; justify-content:center;
    opacity:.95;
}
.service-card__media img{
    width:100%; height:100%; object-fit:contain; object-position:center right;
}

.service-card__media{
    position: absolute;
    right: -51px;
    top: 0;
    bottom: 0;
    width: 106%;
}

.service-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    height: 186px;
    padding: 24px;
    background: #F2F2F2;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    overflow: hidden;
}

/* ====== DESKTOP ====== */
@media (min-width:999px){
    /* ДОП. ОТСТУП У HERO (ТОЧЕЧНО, ЧТОБЫ НЕ НАЛЕЗАЛО) */
    .hero{ padding-bottom:160px } /* добавлено только для десктопа */

    .about{ padding-block:56px 40px }
    .about__head{ grid-template-columns: 1fr 1fr; align-items:start }
    .about__lead{ justify-self:start; max-width:444px } /* как в десктоп-макете */

    .services{
        grid-template-columns: repeat(2, 588px); /* ширины карточек по макету */
        justify-content:space-between;
        gap:24px;
        margin-top:40px;
        display: flex;
        flex-wrap: wrap;
    }
    .service-card{
        height:200px;                       /* десктопная высота */
        grid-template-columns: 1fr 220px;   /* текст + медиа */
        padding:24px;
        border-radius:16px;
        width: 47%;
    }
    .service-card__media{
        position: absolute;
        right: -51px;
        top: 0;
        bottom: 0;
        width: 106%;
    }
}




/* ================= MISSION ================= */
.mission{ position:relative; padding-block:32px 24px }
.mission__head{ display:grid; gap:16px }
.mission__title{
    margin:0;
    font:400 40px/49px "Montserrat",sans-serif;       /* мобилка */
    letter-spacing:-0.02em;
    color:#000;
}
.mission__text{
    display:grid; gap:14px; max-width:560px;
    font:400 12px/120% "Montserrat",sans-serif;
    color:#2B2A29;
}

/* Баннер */
.mission-banner{
    position:relative;
    display:grid;
    grid-template-columns: 1fr;
    align-items:center;
    min-height:144px;                                   /* мобилка */
    margin-top:20px;
    padding:20px 24px;
    background:#000;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
}
.mission-banner::before{                               /* мягкое золотистое свечение справа */
    content:""; position:absolute; inset:0;
    background: radial-gradient(60% 70% at 85% 60%, rgba(190,168,102,.55) 0%, rgba(0,0,0,0) 60%);
    pointer-events:none;
}
.mission-banner__text{ position:relative; z-index:2; max-width:640px }
.mission-banner__title{
    margin:0;
    font:600 22px/120% "Montserrat",sans-serif;         /* мобилка */
    color:#fff;
    letter-spacing:-0.02em;
}

/* Медиа справа */
.mission-banner__media{
    position:absolute; right:0; top:0; bottom:0; width:52%;
    display:flex; align-items:center; justify-content:flex-end;
    z-index:1; opacity:.95;

    width: 77%;
    position: absolute;
    right: -51px;
    height: 167%;
    top: -56px;
}
.mission-banner__media img{
    width:100%; height:100%; object-fit:cover; object-position:center right;
    filter:saturate(1.05) contrast(1.02);
}

/* ====== DESKTOP ====== */
@media (min-width:999px){
    .mission{ padding-block:96px 56px }
    .mission__head{
        grid-template-columns: 1fr 560px;                  /* слева — заголовок, справа — текст */
        align-items:center; column-gap:48px;
    }
    .mission__title{
        font:400 64px/78px "Montserrat",sans-serif;        /* крупный заголовок как на макете */
        letter-spacing:-0.04em;
    }

    .mission-banner{
        min-height:264px;                                  /* высота десктопного баннера */
        padding:40px 48px;
        border-radius:32px;
        margin-top:40px;
    }
    .mission-banner__title{
        font:600 48px/120% "Montserrat",sans-serif;        /* крупный белый текст в баннере */
        letter-spacing:-0.02em;
    }
    .mission-banner__media{
        width: 77%;
        position: absolute;
        right: -51px;
        height: 167%;
        top: -56px;
    }
}



/* ================= FOOTER ================= */
.footer{
    background:#3F3F3F;             /* темно-серый как в макете */
    color:#E6E6E6;
    padding-block:48px;
}
.footer__row{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:40px;
}

/* Логотип */
.footer__logo{
    display:inline-flex; align-items:center;
}
.footer__logo img{
    width:88px; height:56px;         /* область под белое лого */
    object-fit:contain;
}

/* Меню */
.footer__nav{
    display:flex; flex-direction:column; gap:12px;
}
.footer__link{
    font:400 12px/120% "Montserrat",sans-serif;
    color:#D9D9D9; text-decoration:none;
}
.footer__link:hover{ color:#FFFFFF }

/* Копирайт */
.footer__copy{
    font:400 12px/120% "Montserrat",sans-serif;
    color:#CFCFCF; white-space:nowrap;
}

/* ====== MOBILE ====== */
@media (max-width:999px){
    .footer{ padding-block:32px }
    .footer__row{
        grid-template-columns: 1fr;
        gap:20px;
    }
    .footer__logo img{ width:72px; height:46px }
    .footer__nav{ gap:10px }
    .footer__copy{ opacity:.9 }
}





/* ===== MOBILE FIXES: prevent overflow & align width ===== */
@media (max-width: 999px){
    /* 1) Глобально режем горизонтальный скролл */
    html, body { overflow-x: hidden; }

    /* 2) Карточка калькулятора — верхний ряд FROM↔TO без переполнений */
    .calc__row--fromto{
        grid-template-columns: 1fr 24px 1fr; /* было: 1fr 34px 1fr 34px 180px max-content */
    }
    .calc__row--fromto .connector{ width:24px; }
    .calc__row--fromto .connector--short,
    .calc__row--fromto .input--details,
    .calc__row--fromto .calc__btn-inline{
        display:none; /* скрываем лишние элементы для мобилки */
    }

    /* 3) Любые элементы в рядах не растягивают грид по ширине */
    .calc__row > *{ min-width: 0; }

    /* 4) Сетки внутри херо — на 100% контейнера без выходов */
    .hero__grid,
    .hero__cards,
    .card,
    .track__row { width: 100%; }
}



/* FIX: картинка в hero оказалась под ::after */
.hero__media{
    position: relative;
    overflow: hidden;              /* обрезаем по радиусу */
}

.hero__media::after{
    z-index: 0;                    /* фон под изображение */
    pointer-events: none;
}

.hero__media picture{
    position: relative;
    z-index: 1;                    /* изображение над фоном */
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img,
.hero__image{
    position: relative;
    z-index: 1;                    /* изображение над ::after */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* как в макете */
    border-radius: inherit;        /* повторяем скругление figure */
}



/* Mobile-only: hide 2nd and 3rd promo cards, keep only the black one */
@media (max-width: 767px) {
    .promo-card--white,
    .promo-card--sand {
        display: none !important;
    }

    /* Dots are не нужны, если карточка одна */
    .promo__dots {
        display: none !important;
    }
}