/* Основные настройки */

:root {
    --background: #FBFBFD;
    --text: #1D1D1F;
    --secondary: #6E6E73;
    --button: #1D1D1F;
    --button-hover: #424245;
}


/* Сброс */

* {
    box-sizing: border-box;
}


body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;
}


/* Основной контейнер */

.container {

    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    padding: 60px 24px 100px;

}


/* Первый экран */

.hero {

    padding-top: 30px;

}


h1 {

    font-size: 52px;

    line-height: 1.05;

    letter-spacing: -2px;

    margin: 0 0 25px;

    font-weight: 700;

}


h2 {

    font-size: 32px;

    line-height: 1.2;

    letter-spacing: -1px;

    margin: 0 0 40px;

    font-weight: 600;

}



h3 {

    font-size: 32px;

    line-height: 1.2;

    letter-spacing: -1px;

    margin-bottom: 35px;

    font-weight: 600;

}



p {

    font-size: 19px;

    line-height: 1.65;

    color: var(--secondary);

    margin: 0 0 28px;

    font-weight: 400;

}


/* Расстояние между блоками */

.block {

    margin-top: 160px;

}


/* Кнопка */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;


    margin-top: 20px;


    padding: 16px 30px;


    background: var(--button);

    color: white;


    border-radius: 999px;


    text-decoration: none;


    font-size: 17px;

    font-weight: 600;


    transition: all 0.25s ease;

}



.button:hover {

    background: var(--button-hover);

    transform: translateY(-2px);

}



/* Цитата */

blockquote {

    margin: 35px 0;

    font-size: 26px;

    line-height: 1.5;

    font-weight: 500;

    color: var(--text);

}



/* Анимация появления */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition: opacity 0.7s ease,
                transform 0.7s ease;

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}



/* Телефон */

@media (max-width: 600px) {


    .container {

        padding: 45px 22px 80px;

    }


    h1 {

        font-size: 42px;

    }


    h2 {

        font-size: 27px;

    }


    h3 {

        font-size: 26px;

    }


    p {

        font-size: 18px;

        line-height: 1.6;

    }


    .block {

        margin-top: 110px;

    }


    .button {

        width: 100%;

        font-size: 16px;

    }


}