/* ========================================================= */
/* 
   Neo — Ремонт компьютеров в Белой Калитве

   Основной файл стилей

   Здесь используются:
   - CSS Variables
   - Flexbox
   - Grid
   - адаптивная верстка
   - современные CSS-анимации

*/
/* ========================================================= */



/* ========================================================= */
/* Глобальные переменные */
/* ========================================================= */


:root {


    /* Основные цвета */

    --color-bg: #080d18;

    --color-bg-secondary: #10182b;

    --color-card: rgba(255, 255, 255, 0.06);


    /* Акцент */

    --color-primary: #00c8ff;

    --color-secondary: #6b5cff;


    /* Текст */

    --color-white: #ffffff;

    --color-text: #d8e1f0;

    --color-muted: #91a0ba;



    /* Градиенты */


    --gradient-main:
        linear-gradient(
            135deg,
            #00c8ff,
            #6b5cff
        );


    --gradient-glow:
        radial-gradient(
            circle,
            rgba(0,200,255,.25),
            transparent 65%
        );



    /* Тени */


    --shadow-small:
        0 10px 30px rgba(0,0,0,.25);


    --shadow-glow:
        0 0 40px rgba(0,200,255,.25);



    /* Радиусы */


    --radius-small: 12px;

    --radius-medium: 24px;

    --radius-large: 36px;



    /* Контейнер */


    --container-width: 1200px;



    /* Анимации */


    --transition:
        .35s ease;


}





/* ========================================================= */
/* Сброс стилей */
/* ========================================================= */


*,
*::before,
*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {


    margin: 0;

    padding: 0;


    background:
        var(--color-bg);


    color:
        var(--color-text);



    font-family:
        "Inter",
        Arial,
        sans-serif;


    overflow-x: hidden;

}



img {


    max-width: 100%;

    display: block;

}



a {


    color: inherit;

    text-decoration: none;

}



button {


    font-family: inherit;

}



/* ========================================================= */
/* Общие элементы */
/* ========================================================= */



.container {


    width: min(
        100% - 40px,
        var(--container-width)
    );


    margin-inline: auto;


}



main {

    position: relative;

}





/* ========================================================= */
/* Фоновая графика */
/* ========================================================= */



.background-glow {


    position: fixed;


    width: 600px;

    height: 600px;


    top: -200px;

    right: -200px;


    background:
        var(--gradient-glow);



    filter:
        blur(40px);



    pointer-events: none;


    z-index: -1;

}




.background-grid {


    position: fixed;


    inset: 0;


    background-image:

        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );


    background-size:
        50px 50px;



    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );



    pointer-events: none;


    z-index: -2;

}







/* ========================================================= */
/* Заголовки секций */
/* ========================================================= */



.section-header {


    text-align: center;


    max-width: 700px;


    margin:

        0 auto 60px;



}



.section-header span,
.section-label {


    display: inline-block;


    margin-bottom: 15px;


    color:
        var(--color-primary);



    font-size: 14px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 2px;


}



.section-header h2 {


    margin: 0 0 20px;


    color:
        var(--color-white);



    font-family:
        "Montserrat",
        sans-serif;



    font-size:
        clamp(
            32px,
            5vw,
            48px
        );



    line-height:
        1.15;


}



.section-header p {


    margin: 0;


    color:
        var(--color-muted);



    line-height:
        1.7;


}







/* ========================================================= */
/* Кнопки */
/* ========================================================= */



.button {


    display: inline-flex;


    align-items: center;


    justify-content: center;



    padding:

        16px 32px;



    border-radius:

        50px;



    background:

        var(--gradient-main);



    color:
        #ffffff;



    font-weight:
        700;



    transition:

        var(--transition);



    box-shadow:

        0 10px 30px rgba(0,200,255,.25);



    position: relative;


    overflow: hidden;


}



.button::before {


    content: "";


    position: absolute;


    inset: 0;


    background:
        rgba(255,255,255,.2);



    transform:
        translateX(-100%);



    transition:
        .5s;


}



.button:hover::before {


    transform:
        translateX(100%);


}



.button:hover {


    transform:
        translateY(-3px);



    box-shadow:

        0 15px 40px rgba(0,200,255,.4);


}




/* ========================================================= */
/* HEADER */
/* ========================================================= */



.header {


    padding:

        25px 0;



    position:

        absolute;


    top:0;

    left:0;

    width:100%;


    z-index:10;


}



.header__wrapper {


    display:flex;


    justify-content:
        space-between;



    align-items:center;


}



.logo {


    font-family:
        "Montserrat",
        sans-serif;


    font-size:
        34px;



    font-weight:
        800;



}



.logo__neo {


    background:
        var(--gradient-main);



    -webkit-background-clip:
        text;



    background-clip:
        text;



    color:
        transparent;


}




.button--header {


    padding:

        12px 25px;


}

/* ========================================================= */
/* HERO */
/* ========================================================= */



.hero {


    min-height:

        100vh;



    display:

        flex;



    align-items:

        center;



    padding:

        140px 0 80px;



    position:

        relative;


}





.hero::after {


    content:"";


    position:absolute;



    width:

        400px;



    height:

        400px;



    left:

        -200px;



    bottom:

        0;



    background:

        radial-gradient(

            circle,

            rgba(107,92,255,.25),

            transparent 70%

        );



    filter:

        blur(40px);



    pointer-events:

        none;


}






.hero__wrapper {


    display:

        grid;



    grid-template-columns:

        1fr 1fr;



    gap:

        70px;



    align-items:

        center;


}





.hero__content {


    animation:

        heroShow .9s ease forwards;


}




@keyframes heroShow {


    from {

        opacity:0;

        transform:
            translateY(40px);

    }


    to {

        opacity:1;

        transform:
            translateY(0);

    }


}





.hero__label {


    display:

        inline-flex;



    align-items:

        center;



    gap:

        10px;



    padding:

        8px 18px;



    border:

        1px solid rgba(255,255,255,.1);



    background:

        rgba(255,255,255,.05);



    border-radius:

        50px;



    color:

        var(--color-primary);



    font-size:

        14px;



    margin-bottom:

        25px;


}




.hero__label::before {


    content:"";



    width:

        8px;



    height:

        8px;



    background:

        var(--color-primary);



    border-radius:

        50%;



    box-shadow:

        0 0 15px var(--color-primary);


}





.hero h1 {


    margin:

        0 0 30px;



    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        clamp(

            42px,

            5vw,

            68px

        );



    line-height:

        1.08;



    font-weight:

        800;



    color:

        var(--color-white);


}




.hero h1::first-line {


    background:

        var(--gradient-main);



    -webkit-background-clip:

        text;



    background-clip:

        text;



    color:

        transparent;


}





.hero__description {


    max-width:

        600px;



    font-size:

        18px;



    line-height:

        1.8;



    color:

        var(--color-muted);



    margin-bottom:

        40px;


}





.hero__buttons {


    margin-bottom:

        45px;


}






/* ========================================================= */
/* Преимущества первого экрана */
/* ========================================================= */



.hero__advantages {


    display:

        flex;



    flex-wrap:

        wrap;



    gap:

        18px;


}





.hero__advantage {


    display:

        flex;



    align-items:

        center;



    gap:

        12px;



    padding:

        15px 20px;



    border-radius:

        var(--radius-small);



    background:

        rgba(255,255,255,.04);



    border:

        1px solid rgba(255,255,255,.08);



    backdrop-filter:

        blur(10px);



    transition:

        var(--transition);


}




.hero__advantage:hover {


    transform:

        translateY(-5px);



    border-color:

        rgba(0,200,255,.4);



}




.hero__advantage i {


    color:

        var(--color-primary);



    font-size:

        20px;


}





.hero__advantage span {


    font-size:

        14px;



    color:

        var(--color-white);



}






/* ========================================================= */
/* Изображение Hero */
/* ========================================================= */



.hero__image {


    position:

        relative;



    animation:

        imageFloat 5s ease-in-out infinite;



}



@keyframes imageFloat {


    0%,
    100% {

        transform:

            translateY(0);

    }


    50% {

        transform:

            translateY(-15px);

    }


}




.hero__image::before {


    content:"";



    position:absolute;



    inset:

        15%;



    background:

        var(--gradient-glow);



    filter:

        blur(60px);



    z-index:

        -1;



}




.hero__image img {


    width:

        100%;



    max-width:

        520px;



    margin:

        auto;



    filter:

        drop-shadow(

            0 30px 50px rgba(0,0,0,.5)

        );


}





/* ========================================================= */
/* SERVICES */
/* ========================================================= */



.services {


    padding:

        120px 0;


}




.services__grid {


    display:

        grid;



    grid-template-columns:

        repeat(

            4,

            1fr

        );



    gap:

        25px;


}





.service-card {


    padding:

        35px 25px;



    border-radius:

        var(--radius-medium);



    background:

        var(--color-card);



    border:

        1px solid rgba(255,255,255,.08);



    backdrop-filter:

        blur(15px);



    transition:

        var(--transition);



    position:

        relative;



    overflow:

        hidden;


}





.service-card::before {


    content:"";



    position:absolute;



    width:

        120px;



    height:

        120px;



    top:

        -60px;



    right:

        -60px;



    background:

        var(--gradient-main);



    opacity:

        .15;



    filter:

        blur(40px);


}





.service-card:hover {


    transform:

        translateY(-10px);



    border-color:

        rgba(0,200,255,.35);



    box-shadow:

        var(--shadow-glow);


}





.service-card__icon {


    width:

        60px;



    height:

        60px;



    display:

        flex;



    align-items:

        center;



    justify-content:

        center;



    border-radius:

        18px;



    background:

        rgba(0,200,255,.1);



    color:

        var(--color-primary);



    font-size:

        25px;



    margin-bottom:

        25px;


}





.service-card h3 {


    margin:

        0 0 15px;



    color:

        var(--color-white);



    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        20px;



}





.service-card p {


    margin:

        0;



    color:

        var(--color-muted);



    line-height:

        1.7;



    font-size:

        15px;


}

/* ========================================================= */
/* ADVANTAGES */
/* ========================================================= */



.advantages {


    padding:

        120px 0;


}





.advantages__grid {


    display:

        grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap:

        25px;


}




.advantage-card {


    padding:

        35px;



    text-align:

        center;



    border-radius:

        var(--radius-medium);



    background:

        var(--color-card);



    border:

        1px solid rgba(255,255,255,.08);



    backdrop-filter:

        blur(15px);



    transition:

        var(--transition);


}





.advantage-card:hover {


    transform:

        translateY(-8px);



    border-color:

        rgba(0,200,255,.4);


}





.advantage-card i {


    font-size:

        35px;



    color:

        var(--color-primary);



    margin-bottom:

        25px;


}




.advantage-card h3 {


    margin:

        0 0 15px;



    color:

        var(--color-white);



    font-family:

        "Montserrat",
        sans-serif;



}




.advantage-card p {


    margin:

        0;



    color:

        var(--color-muted);



    line-height:

        1.7;


}





/* ========================================================= */
/* ABOUT */
/* ========================================================= */



.about {


    padding:

        120px 0;



}




.about__wrapper {


    display:

        grid;



    grid-template-columns:

        .9fr 1fr;



    gap:

        80px;



    align-items:

        center;


}





.about__image {


    position:

        relative;


}





.about__image::before {


    content:"";



    position:absolute;



    inset:

        10%;



    background:

        var(--gradient-glow);



    filter:

        blur(50px);



    z-index:

        -1;


}





.about__image img {


    border-radius:

        var(--radius-large);



    border:

        1px solid rgba(255,255,255,.1);



    box-shadow:

        var(--shadow-small);


}




.about__content h2 {


    margin:

        0 0 30px;



    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        clamp(

            32px,

            4vw,

            48px

        );



    color:

        var(--color-white);



}




.about__content p {


    color:

        var(--color-muted);



    line-height:

        1.8;



    margin-bottom:

        20px;


}




.about__stats {


    display:

        flex;



    gap:

        20px;



    margin-top:

        40px;



    flex-wrap:

        wrap;


}




.stat {


    padding:

        25px;



    min-width:

        150px;



    border-radius:

        var(--radius-small);



    background:

        rgba(255,255,255,.05);



    border:

        1px solid rgba(255,255,255,.08);


}





.stat strong {


    display:

        block;



    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        32px;



    color:

        var(--color-primary);



}





.stat span {


    font-size:

        14px;



    color:

        var(--color-muted);



}





/* ========================================================= */
/* STEPS */
/* ========================================================= */



.steps {


    padding:

        120px 0;


}




.steps__grid {


    display:

        grid;



    grid-template-columns:

        repeat(4,1fr);



    gap:

        25px;



}




.step-card {


    padding:

        35px;



    border-radius:

        var(--radius-medium);



    background:

        rgba(255,255,255,.04);



    border:

        1px solid rgba(255,255,255,.08);



    position:

        relative;



}





.step-card__number {


    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        50px;



    font-weight:

        800;



    color:

        rgba(255,255,255,.08);



    margin-bottom:

        15px;



}





.step-card h3 {


    color:

        var(--color-white);



    font-family:

        "Montserrat",
        sans-serif;



    margin:

        0 0 15px;


}





.step-card p {


    color:

        var(--color-muted);



    line-height:

        1.7;



    margin:

        0;


}

/* ========================================================= */
/* CONTACT */
/* ========================================================= */



.contact {


    padding:

        120px 0;



}





.contact__box {


    display:

        grid;



    grid-template-columns:

        .8fr 1fr;



    gap:

        60px;



    padding:

        60px;



    border-radius:

        var(--radius-large);



    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.08),

            rgba(255,255,255,.03)

        );



    border:

        1px solid rgba(255,255,255,.1);



    backdrop-filter:

        blur(20px);



}





.contact__content h2 {


    margin:

        0 0 20px;



    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        clamp(

            32px,

            4vw,

            48px

        );



    color:

        var(--color-white);



}




.contact__content p {


    color:

        var(--color-muted);



    line-height:

        1.8;


}




/* ========================================================= */
/* Яндекс форма */
/* ========================================================= */


.contact__form {


    min-height:

        300px;



    display:

        flex;



    align-items:

        center;



    justify-content:

        center;


}



.form-placeholder {


    width:

        100%;



    padding:

        40px;



    text-align:

        center;



    border-radius:

        var(--radius-medium);



    background:

        rgba(255,255,255,.04);



    border:

        1px dashed rgba(255,255,255,.2);


}



.form-placeholder__icon {


    width:

        70px;



    height:

        70px;



    margin:

        0 auto 25px;



    display:

        flex;



    align-items:

        center;



    justify-content:

        center;



    border-radius:

        50%;



    background:

        rgba(0,200,255,.1);



    color:

        var(--color-primary);



    font-size:

        30px;



}



.form-placeholder h3 {


    margin:

        0 0 10px;



    color:

        var(--color-white);



    font-family:

        "Montserrat",
        sans-serif;



}




.form-placeholder p {


    color:

        var(--color-muted);



    margin:

        0;


}





/* ========================================================= */
/* FOOTER */
/* ========================================================= */



.footer {


    padding:

        40px 0;



    border-top:

        1px solid rgba(255,255,255,.08);



}




.footer__wrapper {


    display:

        flex;



    justify-content:

        space-between;



    align-items:

        center;



    gap:

        20px;



}



.footer__logo {


    font-family:

        "Montserrat",
        sans-serif;



    font-size:

        28px;



    font-weight:

        800;



    background:

        var(--gradient-main);



    -webkit-background-clip:

        text;



    background-clip:

        text;



    color:

        transparent;



}




.footer p {


    margin:

        0;



    color:

        var(--color-muted);



    font-size:

        14px;



}







/* ========================================================= */
/* Анимация появления блоков */
/* ========================================================= */



.animate {


    opacity:

        0;



    transform:

        translateY(40px);



    transition:

        .8s ease;


}



.animate.visible {


    opacity:

        1;



    transform:

        translateY(0);


}





/* ========================================================= */
/* TABLET */
/* ========================================================= */


@media(max-width:1000px){



    .hero__wrapper {


        grid-template-columns:

            1fr;


        text-align:

            center;


    }




    .hero__description {


        margin-inline:

            auto;


    }




    .hero__advantages {


        justify-content:

            center;


    }





    .hero__image {


        order:

            -1;


    }





    .services__grid {


        grid-template-columns:

            repeat(2,1fr);


    }





    .advantages__grid {


        grid-template-columns:

            repeat(2,1fr);


    }





    .about__wrapper {


        grid-template-columns:

            1fr;


    }





    .about__image {


        max-width:

            600px;


        margin-inline:

            auto;


    }





    .steps__grid {


        grid-template-columns:

            repeat(2,1fr);


    }





    .contact__box {


        grid-template-columns:

            1fr;


    }



}






/* ========================================================= */
/* MOBILE */
/* ========================================================= */


@media(max-width:600px){



    .container {


        width:

            min(

                100% - 30px,

                var(--container-width)

            );


    }





    .header {


        padding:

            20px 0;


    }





    .logo {


        font-size:

            28px;


    }





    .button--header {


        padding:

            10px 18px;


        font-size:

            14px;


    }





    .hero {


        padding-top:

            120px;


    }





    .hero h1 {


        font-size:

            38px;


    }





    .hero__description {


        font-size:

            16px;


    }





    .hero__advantage {


        width:

            100%;


        justify-content:

            center;


    }





    .services,
    .advantages,
    .about,
    .steps,
    .contact {


        padding:

            80px 0;


    }





    .services__grid,
    .advantages__grid,
    .steps__grid {


        grid-template-columns:

            1fr;


    }





    .contact__box {


        padding:

            30px 20px;


    }





    .about__stats {


        flex-direction:

            column;


    }





    .stat {


        width:

            100%;


    }





    .footer__wrapper {


        flex-direction:

            column;


        text-align:

            center;


    }


}