*, ::after, ::before {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style-type: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border-style: none;
}

a {
    text-decoration: none;
    background-color: transparent;
}

[hidden] {
    display: none !important;
}

:root {
    --color-dark: #272422;
    --color-light: #f1ede7;
    --color-grey: #8fa3a8;
    --color-accent: #f14515;
    --color-accent-hover: #d93a0e;
    --color-white: #fff;

    /* Размеры макета — от 900px высоты окна (hero, cta и карьера — от 1080px), ниже они линейно сжимаются до 640px: секции помещаются в экран небольших десктопов */
    --gap-section: clamp(32px, calc(15.38vh - 66.46px), 72px);
    --gap-button: clamp(32px, calc(11.82vh - 43.64px), 84px);
    --gap-text: clamp(20px, calc(4.55vh - 9.09px), 40px);
}

body {
    min-width: 320px;
    background-color: var(--color-light);
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-dark);
}

.container {
    width: 100%;
    max-width: 1480px;
    padding: 0 20px;
    margin: 0 auto;
}

.title {
    font-weight: 700;
    line-height: 1.15;
}

.title--lg {
    font-size: clamp(44px, calc(6.36vh + 3.27px), 72px);
}

.title--md {
    font-size: clamp(32px, calc(3.08vh + 12.31px), 40px);
}

.title--center {
    text-align: center;
}

.title--light {
    color: var(--color-white);
}

.button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 300px;
    height: clamp(56px, calc(6.15vh + 16.62px), 72px);
    padding: 0 32px;
    border-radius: 19.2px;
    background-color: var(--color-accent);
    font-size: clamp(18px, calc(0.77vh + 13.08px), 20px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-white);
    white-space: nowrap;
    transition: background-color 0.25s ease;
}

.button::after {
    content: '';
    flex: 0 0 18px;
    height: 18px;
    background-image: url(../img/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.button.button--phone::after {
    background-image: url(../img/icons/icon_phone.svg);
}

.button:hover {
    background-color: var(--color-accent-hover);
}

.button--dark {
    min-width: 0;
    background-color: var(--color-dark);
}

.button--dark:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.header {
    background-color: var(--color-dark);
}

.header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(18px, calc(4.62vh - 11.54px), 30px) 0;
}

.header__logo img {
    width: 160px;
}

.header__menu ul {
    display: flex;
    gap: 40px;
}

.header__menu a {
    display: block;
    padding: 8px 16px;
    border-radius: 99px;
    line-height: 24px;
    color: var(--color-light);
    transition: background-color 0.25s ease;
}

.header__menu a:hover {
    background-color: rgba(143, 163, 168, 0.2);
}

.header__lang {
    display: flex;
    gap: 12px;
}

.header__lang-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-grey);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-grey);
    transition: border-color 0.25s ease, color 0.25s ease;
}

.header__lang-link:hover {
    border-color: var(--color-light);
    color: var(--color-light);
}

.header__lang-link--active,
.header__lang-link--active:hover {
    border-color: var(--color-grey);
    background-color: var(--color-grey);
    color: var(--color-dark);
}

.sect__hero {
    --hero-visual-w: min(clamp(555px, calc(84.17vh + 50px), 959px), calc((50vw - 52px) * 1.6));
    position: relative;
    min-height: calc(var(--hero-visual-w) * 0.93);
    background-color: var(--color-dark);
    overflow: hidden;
}

.sect__hero::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(50% + 72px);
    inset-inline-end: 0;
    background-color: var(--color-grey);
}

/* Колонка текста не заходит под картинку: она начинается от 50% + 72px, а у контейнера отступ 20px и до картинки 40px */
.hero__content {
    position: relative;
    z-index: 1;
    max-width: min(737px, calc(50vw + 12px));
    padding: clamp(100px, calc(19.09vh - 22.18px), 184px) 0 clamp(150px, calc(30.23vh - 43.45px), 283px);
}

.hero__title {
    color: var(--color-white);
}

.hero__txt {
    max-width: 407px;
    margin-top: var(--gap-text);
    font-size: clamp(18px, calc(0.91vh + 12.18px), 22px);
    color: var(--color-grey);
}

.hero__content .button {
    margin-top: var(--gap-button);
}

/* Фото в натуральном размере от центра: на 1920 его режет край экрана, на широких экранах оно видно целиком */
.hero__visual {
    position: absolute;
    bottom: 0;
    inset-inline-start: calc(50% + 52px);
    width: var(--hero-visual-w);
}

.sect__about {
    padding-top: clamp(40px, calc(15.38vh - 58.46px), 80px);
    overflow: hidden;
}

.about__txt {
    position: relative;
    z-index: 1;
    max-width: 1318px;
    margin: 0 auto;
    font-size: clamp(18px, calc(2.31vh + 3.23px), 24px);
    text-align: center;
}

.about__visual {
    --about-h: clamp(400px, calc(47.69vh + 94.77px), 524px);
    position: relative;
    height: var(--about-h);
}
/* Круг 870px под blur(88px) из макета, собранный градиентом: filter: blur на такой площади дорого перерисовывать */
.about__visual::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: calc(10% - var(--about-h) * 0.336);
    inset-inline-start: 50%;
    width: calc(var(--about-h) * 2.332);
    height: calc(var(--about-h) * 2.332);
    background-image: radial-gradient(closest-side,
        #f0ece6 35%,
        rgba(240, 236, 230, 0.99) 40%,
        rgba(240, 236, 230, 0.97) 45%,
        rgba(240, 236, 230, 0.92) 50%,
        rgba(240, 236, 230, 0.86) 55%,
        rgba(240, 236, 230, 0.75) 60%,
        rgba(240, 236, 230, 0.63) 65%,
        rgba(240, 236, 230, 0.49) 70%,
        rgba(240, 236, 230, 0.36) 75%,
        rgba(240, 236, 230, 0.24) 80%,
        rgba(240, 236, 230, 0.14) 85%,
        rgba(240, 236, 230, 0.07) 90%,
        rgba(240, 236, 230, 0.03) 95%,
        rgba(240, 236, 230, 0) 100%
    );
    transform: translateX(-50%);
    pointer-events: none;
}

.about__waves,
.about__sphere {
    position: absolute;
    max-width: none;
    transform: translateX(-50%);
}

.about__waves {
    z-index: 1;
    top: calc(var(--about-h) * 0.004);
    inset-inline-start: 50%;
    width: max(calc(var(--about-h) * 3.66), 100vw);
}

.about__sphere {
    z-index: 3;
    top: calc(var(--about-h) * 0.08);
    inset-inline-start: calc(50% - var(--about-h) * 0.042);
    width: calc(var(--about-h) * 1.58);
}

.sect__benefits {
    padding: var(--gap-section) 0;
    background-color: var(--color-dark);
    background-image: radial-gradient(circle, rgba(143, 163, 168, 0.3) 1px, transparent 1.5px);
    background-position: center;
    background-size: 30px 30px;
}

.benefits__row {
    display: grid;
    grid-template-columns: 1fr 577px;
    margin: 24px auto 0 auto;
    border-radius: 20px;
    background-color: var(--color-dark);
}

.benefits__txt {
    padding: 24px;
}

.benefits__list {
    padding-inline-start: 20px;
}

.benefits__list li {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, calc(3.08vh - 11.69px), 16px);
    padding-bottom: clamp(18px, calc(5.38vh - 16.46px), 32px);
    border-bottom: 1px solid var(--color-grey);
    font-size: clamp(18px, calc(2.31vh + 3.23px), 24px);
    color: var(--color-light);
}

.benefits__list li + li {
    padding-top: clamp(18px, calc(5.38vh - 16.46px), 32px);
}

.benefits__list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.benefits__list li > h3 {
    position: relative;
}

.benefits__list li > h3::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-accent);
    transform: translateY(-50%);
}

.benefits__img {
    align-self: center;
    height: clamp(340px, calc(71.54vh - 117.85px), 526px);
    border-radius: 20px;
    overflow: hidden;
}

.benefits__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sect__services {
    padding: var(--gap-section) 0;
    background-color: var(--color-white);
}

.services__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 26px;
    max-width: 1442px;
    margin: var(--gap-section) auto 0;
}

.services__col {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, calc(3.08vh - 9.69px), 18px);
}

.services__item {
    border-radius: 30px;
    background-color: var(--color-light);
}

.services__item-head {
    display: flex;
    align-items: center;
    padding: clamp(16px, calc(8.46vh - 38.15px), 38px) clamp(24px, calc(6.15vh - 15.38px), 40px);
}

.services__item-title {
    flex: 1;
    font-size: clamp(18px, calc(1.54vh + 8.15px), 22px);
    font-weight: 600;
    line-height: 1.3;
}

.services__btn {
    margin-top: var(--gap-section);
    text-align: center;
}

.sect__reasons {
    padding: var(--gap-section) 0;
    background-color: var(--color-grey);
}

.reasons__wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: var(--gap-section);
}

.reasons__item {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, calc(3.85vh - 14.62px), 20px);
    min-height: clamp(300px, calc(66.92vh - 128.31px), 474px);
    padding: clamp(20px, calc(7.69vh - 29.23px), 40px);
    border-radius: 20px;
    background-color: var(--color-light);
    font-size: clamp(16px, calc(0.77vh + 11.08px), 18px);
}

.reasons__icon {
    width: clamp(48px, calc(9.23vh - 11.08px), 72px);
}

.reasons__title {
    font-size: clamp(22px, calc(2.31vh + 7.23px), 28px);
    font-weight: 600;
    line-height: 1.3;
}

.sect__cta {
    position: relative;
    background-color: var(--color-dark);
    overflow: hidden;
}

.cta__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    padding: clamp(80px, calc(31.14vh - 119.27px), 217px) 0 clamp(80px, calc(25.91vh - 85.82px), 194px);
}

.cta__title {
    max-width: 609px;
}

.cta__txt {
    margin-top: var(--gap-text);
    font-size: clamp(18px, calc(0.91vh + 12.18px), 22px);
    color: var(--color-grey);
}

.cta__content .button {
    margin-top: var(--gap-button);
}

.cta__visual {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: max(calc(50% - 255px), 600px);
}

.cta__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.sect__career {
    padding-top: clamp(40px, calc(9.09vh - 18.18px), 80px);
    overflow: hidden;
}

.career__txt {
    max-width: 1280px;
    margin: clamp(20px, calc(5vh - 12px), 42px) auto 0;
    font-size: clamp(18px, calc(0.91vh + 12.18px), 22px);
    text-align: center;
}

.career__txt .button {
    margin-top: var(--gap-button);
}

.career__visual {
    position: relative;
    height: clamp(240px, calc(100.68vh - 404.36px), 683px);
    margin-top: -49px;
}

.career__visual img {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    width: auto;
    min-width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transform: translateX(-50%);
}

.footer {
    padding: clamp(20px, calc(3.85vh - 4.62px), 30px) 0;
    background-color: var(--color-dark);
}

.footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer__logo img {
    width: 160px;
}

.footer__menu ul {
    display: flex;
    gap: 32px;
}

.footer__menu a {
    display: block;
    padding: 8px 16px;
    line-height: 24px;
    color: var(--color-grey);
    transition: color 0.25s ease;
}

.footer__menu a:hover {
    color: var(--color-light);
}

.footer__contacts {
    display: flex;
    gap: 16px;
}

.footer__contacts .button {
    display: flex;
}

.footer__contacts img {
    flex: 0 0 20px;
    width: 20px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 1200px) {
    .title--lg {
        font-size: clamp(40px, calc(3.64vh + 16.73px), 56px);
    }

    .hero__content {
        padding: clamp(70px, calc(15.91vh - 31.82px), 140px) 0 clamp(110px, calc(20.45vh - 20.91px), 200px);
    }

    .hero__txt,
    .cta__txt,
    .career__txt {
        font-size: clamp(18px, calc(0.45vh + 15.09px), 20px);
    }

    .hero__content .button,
    .cta__content .button,
    .career__txt .button {
        margin-top: clamp(32px, calc(5.45vh - 2.91px), 56px);
    }

    .about__txt {
        font-size: clamp(18px, calc(1.54vh + 8.15px), 22px);
    }

    .benefits__row {
        grid-template-columns: 1fr 1fr;
    }

    .benefits__txt {
        padding: 34px 40px;
    }

    .benefits__list li {
        font-size: clamp(18px, calc(1.54vh + 8.15px), 22px);
    }

    .reasons__wrap {
        gap: 24px;
    }

    .reasons__item {
        padding: clamp(20px, calc(4.62vh - 9.54px), 32px);
    }

    .reasons__title {
        font-size: clamp(20px, calc(1.54vh + 10.15px), 24px);
    }

    .cta__content {
        max-width: 520px;
        padding: clamp(70px, calc(20.45vh - 60.91px), 160px) 0;
    }

    .career__visual {
        height: clamp(240px, calc(72.73vh - 225.45px), 560px);
    }

    .footer__row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__menu {
        margin: 24px 0;
    }

    .footer__contacts {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 1023px) {
    .footer__row {
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .hero__content,
    .cta__content {
        max-width: none;
        padding: 40px 0 0;
    }

    .sect__hero,
    .sect__cta {
        min-height: 0;
        padding-bottom: 40px;
    }

    .hero__visual,
    .cta__visual {
        position: relative;
        top: auto;
        bottom: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        width: auto;
        height: 480px;
        margin-top: 40px;
        border-radius: 40px;
        overflow: hidden;
    }

    .sect__hero::before {
        display: none;
    }

    .hero__visual {
        background-color: var(--color-grey);
    }

    .hero__visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    .cta__visual img {
        object-position: 25% center;
    }

    .hero__txt,
    .cta__txt,
    .career__txt {
        margin-top: 32px;
    }

    .about__visual {
        height: 367px;
    }

    .about__waves {
        top: 1px;
        width: 1343px;
    }

    .about__visual::before {
        top: calc(10% - 123px);
        width: 855px;
        height: 855px;
    }

    .about__sphere {
        top: 29px;
        inset-inline-start: calc(50% - 15px);
        width: 580px;
    }

    .sect__benefits {
        background-image: none;
    }

    .benefits__row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .benefits__txt {
        padding: 0;
    }

    .benefits__img {
        height: 400px;
    }

    .services__item-head {
        padding: 30px 32px;
    }

    .services__item-title {
        font-size: 20px;
    }

    .reasons__wrap {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .reasons__item {
        min-height: 0;
    }

    .career__visual {
        height: 480px;
    }
}

@media (max-width: 768px) {
    .title--lg {
        font-size: 48px;
    }

    .title--md {
        font-size: 32px;
    }

    .header__menu {
        display: none;
    }

    .services__wrap {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .services__col {
        gap: 16px;
    }

    .services__btn,
    .reasons__wrap {
        margin-top: 40px;
    }
}

@media (max-width: 576px) {
    .title--lg {
        font-size: 40px;
    }

    .title--md {
        font-size: 28px;
    }

    .button {
        width: 100%;
        min-width: 0;
        height: 56px;
    }

    .header__row {
        padding: 20px 0 0;
    }

    .hero__content {
        padding-top: 24px;
    }

    .sect__hero {
        padding-bottom: 20px;
    }

    .hero__txt,
    .cta__txt,
    .career__txt {
        margin-top: 24px;
        font-size: 16px;
    }

    .hero__content .button,
    .cta__content .button,
    .career__txt .button {
        margin-top: 24px;
    }

    .hero__visual,
    .cta__visual {
        height: auto;
        margin-top: 24px;
    }

    .hero__visual img,
    .cta__visual img {
        height: auto;
        aspect-ratio: 353 / 288;
    }

    .sect__about {
        padding-top: 40px;
    }

    .about__txt {
        padding: 0 12px;
        font-size: 16px;
    }

    .about__visual {
        height: 69.21vw;
    }

    .about__waves {
        top: -0.71vw;
        width: 206.23vw;
    }

    .about__visual::before {
        top: calc(10% - 18.93vw);
        width: 131.4vw;
        height: 131.4vw;
    }

    .about__sphere {
        top: 3.54vw;
        inset-inline-start: calc(50% - 2.24vw);
        width: 89.03vw;
    }

    .sect__benefits,
    .sect__services,
    .sect__reasons {
        padding: 40px 0;
    }

    .benefits__row {
        gap: 24px;
    }

    .benefits__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
    }

    .benefits__list li,
    .benefits__list li + li {
        gap: 12px;
        padding: 16px;
        font-size: 16px;
    }

    .benefits__list li:last-child {
        padding-bottom: 16px;
    }

    .benefits__img {
        height: 200px;
    }

    .services__wrap,
    .services__btn,
    .reasons__wrap {
        margin-top: 24px;
    }

    .services__item-head {
        padding: 24px;
    }

    .services__item-title {
        font-size: 18px;
    }

    .reasons__item {
        gap: 16px;
        padding: 20px;
        font-size: 16px;
    }

    .reasons__icon {
        width: 56px;
    }

    .reasons__title {
        font-size: 18px;
    }

    .sect__cta {
        padding-bottom: 40px;
    }

    .cta__title {
        font-size: 32px;
    }

    .sect__career {
        padding: 40px 0;
    }

    .career__txt {
        padding: 0 6px;
    }

    .career__visual {
        height: 180px;
        margin-top: 24px;
        padding: 0 20px;
    }

    .career__visual img {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        transform: none;
    }

    .footer {
        padding: 24px 0;
    }

    .footer__row {
        gap: 16px;
    }

    .footer__contacts {
        width: 100%;
    }

    .footer__menu {
        width: 100%;
    }

    .footer__menu ul {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer__menu a {
        font-size: 14px;
        line-height: 20px;
    }
}