*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#050814;

    color:#fff;

    font-family:'Roboto',Arial,sans-serif;

    overflow-x:hidden;

    padding-top:78px;

}
/*
body::before{

    width:350px;
    height:350px;

    background:#007bff;

    filter:blur(160px);

    opacity:.10;

    top:-100px;
    left:-100px;

}
*/

body::before{

    content:"";

    position:fixed;

    width:350px;
    height:350px;

    background:#007bff;

    filter:blur(160px);

    opacity:.10;

    top:-100px;
    left:-100px;

    z-index:-1;

}


header{
    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:100%;
    max-width:1200px;
    height:78px;

    padding:0 30px;

    display:flex;
    align-items:center;

    background:rgba(7,11,24,.82);
    backdrop-filter:blur(15px);

    border-radius:0 0 18px 18px;
    border:1px solid rgba(0,234,255,.15);

    z-index:9999;
}


.logo{
    display:flex;
    align-items:center;
}

.logo a{
    display:flex;
    align-items:center;
    text-decoration:none;
}
.logo img{
    display:block;
    width:260px;
    height:auto;
    max-height:65px;
    object-fit:contain;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,.7))
        drop-shadow(0 0 8px rgba(0,234,255,.25));
}
}




nav{

    display:flex;

    gap:25px;

}



nav a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}



nav a:hover{

    color:#00eaff;

}




.header-phone a{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 20px;

    border-radius:30px;

    border:1px solid #00eaff;

    color:#00eaff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}



.header-phone a:hover{

    background:#00eaff;

    color:#04101c;

    box-shadow:0 0 25px rgba(0,234,255,.5);

}







section,
.hero{

    max-width:1200px;

    margin:auto;

    padding:70px 30px;

}



h2{

    text-align:center;

    font-family:'Orbitron',sans-serif;

    font-size:34px;

    color:#00eaff;

    margin-bottom:45px;

}




/* HERO */


.hero{

    min-height:650px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}



.hero-content{

    width:55%;

}



.badge{

    display:inline-block;

    padding:7px 18px;

    border-radius:20px;

    border:1px solid #00eaff;

    color:#00eaff;

    font-size:12px;

    margin-bottom:20px;

}



.hero h1{

    font-family:'Orbitron',sans-serif;

    font-size:44px;

    line-height:1.25;

}



.hero h1 span{

    color:#00eaff;

}



.hero p{

    margin-top:20px;

    color:#b7c5dc;

    font-size:18px;

    line-height:1.6;

    max-width:520px;

}




.hero-buttons{

    display:flex;

    gap:15px;

    margin-top:35px;

}



.btn{

    padding:14px 30px;

    border-radius:30px;

    background:#00eaff;

    color:#001018;

    text-decoration:none;

    font-weight:bold;

    box-shadow:0 0 20px rgba(0,234,255,.5);

    transition:.3s;

}



.btn:hover{

    transform:translateY(-3px);

}



.btn.secondary{

    background:transparent;

    color:#fff;

    border:1px solid #00eaff;

    box-shadow:none;

}



.stats{

    display:flex;

    gap:35px;

    margin-top:45px;

}


.stats b{

    color:#00eaff;

    font-size:28px;

}



.stats p{

    color:#b7c5dc;

    font-size:13px;

}
/* ===== ТЕХНО БЛОК ===== */


.tech-box{

    width:350px;

    height:350px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}



.circle{

    position:absolute;

    width:330px;

    height:330px;

    border-radius:50%;

    border:2px solid rgba(0,234,255,.7);


    box-shadow:

    0 0 15px rgba(0,234,255,.45),

    inset 0 0 15px rgba(0,234,255,.25);


    animation:spin 12s linear infinite;

}



.circle::after{

    content:"";

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#00eaff;

    top:-5px;

    left:50%;

	box-shadow:0 0 8px rgba(0,234,255,.7);

}



.pc-icon{

    width:260px;

    height:200px;

    position:relative;

    z-index:2;

    filter:drop-shadow(0 0 15px rgba(0,234,255,.6));

}



.pc-icon svg{

    width:100%;

    height:100%;

}



.code-line{

    fill:#00eaff;

    animation:typing 2s infinite alternate;

}



.status{

    fill:#00eaff;

    filter:drop-shadow(0 0 8px #00eaff);

    animation:blink 1.5s infinite;

}



.scan-line{

    position:absolute;

    width:190px;

    height:3px;

    left:50%;

    transform:translateX(-50%);

    background:#00eaff;

    box-shadow:

    0 0 10px #00eaff,

    0 0 20px #00eaff;


    z-index:5;


    animation:scan 3s infinite;

}



@keyframes spin{

    from{

        transform:rotate(0);

    }


    to{

        transform:rotate(360deg);

    }

}



@keyframes scan{


    0%{

        top:105px;

        opacity:.3;

    }


    50%{

        top:205px;

        opacity:1;

    }


    100%{

        top:105px;

        opacity:.3;

    }

}



@keyframes typing{

    from{

        opacity:.3;

    }


    to{

        opacity:1;

    }

}



@keyframes blink{


    0%,100%{

        opacity:.3;

    }


    50%{

        opacity:1;

    }

}







/* ===== УСЛУГИ ===== */



.cards{


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;


}



.card{


    background:

    rgba(12,20,38,.85);


    border:1px solid rgba(0,234,255,.15);


    padding:30px;


    border-radius:18px;


    transition:.3s;


}



.card:hover{


    border-color:#00eaff;


    transform:translateY(-5px);


    box-shadow:

    0 0 25px rgba(0,234,255,.25);


}



.icon{


    width:45px;

    height:45px;

    margin-bottom:20px;

}



.icon svg{


    width:100%;

    height:100%;


}




.card h3{


    color:#00eaff;

    margin-bottom:12px;


}



.card p{


    color:#b9c4d8;

    line-height:1.5;


}




/* ===== ПРОЦЕСС ===== */



.process{


    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

}



.step{


    flex:1;

    min-width:155px;


    background:#0c1426;


    border:1px solid rgba(0,234,255,.18);


    padding:22px 16px;


    border-radius:15px;


    transition:.3s;


}



.step:hover{


    border-color:#00eaff;


    transform:translateY(-5px);


}



.step-number{


    width:36px;

    height:36px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#00eaff;


    color:#001018;


    border-radius:50%;


    font-weight:bold;


    margin-bottom:14px;


}



.step h3{


    color:#00eaff;

    font-size:18px;


    margin-bottom:10px;


}



.step p{


    color:#b8c5dc;

    font-size:14px;


}



.arrow{


    width:25px;

    height:2px;


    background:#00eaff;


    margin-top:50px;


    box-shadow:0 0 10px #00eaff;


}
/* ===== ПРЕИМУЩЕСТВА ===== */


.advantages-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.advantages-grid div{


    background:#0c1426;


    padding:25px;


    border-radius:15px;


    border:1px solid rgba(0,234,255,.12);


    text-align:center;


    transition:.3s;


}



.advantages-grid div:hover{


    border-color:#00eaff;


    box-shadow:

    0 0 20px rgba(0,234,255,.2);


}



.advantages-grid h3{


    color:#00eaff;

    font-size:17px;

    margin-bottom:12px;


}



.advantages-grid p{


    color:#b8c5dc;

    font-size:14px;

    line-height:1.5;


}






/* ===== ЦЕНЫ ===== */


.price-box,
.contact-box{


    max-width:600px;


    margin:auto;


    background:#0c1426;


    padding:35px;


    border-radius:20px;


    border:1px solid rgba(0,234,255,.15);


}



.price-box p{


    padding:15px 0;


    color:#d7e2f5;


    border-bottom:1px solid #1b2b42;


}







/* ===== ФОРМА ===== */



form{


    display:flex;

    flex-direction:column;


    gap:15px;


    margin-top:30px;


}



input,
textarea{


    background:#0b1324;


    border:1px solid #213652;


    color:#fff;


    padding:16px;


    border-radius:12px;


    font-size:15px;


}



textarea{


    height:120px;

    resize:none;


}



button{


    padding:16px;


    border:0;


    border-radius:30px;


    background:#00eaff;


    color:#001018;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;


}



button:hover{


    box-shadow:

    0 0 20px rgba(0,234,255,.5);


}






.contact-box p{


    color:#b8c5dc;

    margin-bottom:15px;


}



.contact-box a{


    color:#00eaff;

    text-decoration:none;


}






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



footer{


    text-align:center;


    padding:30px;


    background:#03050c;


    color:#71809b;


}






/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */



@media(max-width:1000px){


header{


    padding:0 20px;


}



nav{


    display:none;


}



.hero{


    flex-direction:column;


    text-align:center;


    padding-top:50px;


}



.hero-content{


    width:100%;


}



.hero h1{


    font-size:34px;


}



.hero-buttons{


    justify-content:center;


    flex-wrap:wrap;


}



.stats{


    justify-content:center;


}



.tech-box{


    width:280px;


    height:280px;


}



.circle{


    width:260px;


    height:260px;


}



.cards{


    grid-template-columns:1fr;


}



.process{


    flex-direction:column;


}



.arrow{


    width:2px;

    height:35px;


    margin:0 auto;


}



.advantages-grid{


    grid-template-columns:1fr 1fr;


}


}





@media(max-width:600px){






.header-phone a{


    padding:10px 12px;


    font-size:12px;


}



section,
.hero{


    padding-left:20px;

    padding-right:20px;


}



.hero h1{


    font-size:28px;


}



.stats{


    flex-direction:column;


    gap:15px;


}



.advantages-grid{


    grid-template-columns:1fr;


}



h2{


    font-size:28px;


}


}
/* ===== TECH BACKGROUND EFFECTS ===== */


body{

    position:relative;

}



/* цифровая сетка */

body::after{

    content:"";

    position:fixed;

    inset:0;

background-image:

linear-gradient(
    rgba(0,234,255,.075) 1px,
    transparent 1px
),

linear-gradient(
    90deg,
    rgba(0,234,255,.075) 1px,
    transparent 1px
);


    background-size:60px 60px;

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


    pointer-events:none;

    z-index:-2;

}




/* дополнительные световые пятна */

/* 
.hero::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-120px;

    top:100px;


    background:

    radial-gradient(
        circle,
        rgba(0,234,255,.18),
        transparent 70%
    );


    filter:blur(40px);


    animation:floatGlow 8s infinite alternate;


}

*/
/*
@keyframes floatGlow{


    from{

        transform:translateY(0);

        opacity:.5;

    }


    to{

        transform:translateY(40px);

        opacity:1;

    }


}
*/




/* маленькие технологичные точки */


section{

    position:relative;

}



section::before{


    content:"";


    position:absolute;


    width:4px;

    height:4px;


    background:#00eaff;


    border-radius:50%;


    top:40px;

    left:30px;


    box-shadow:


    80px 120px #00eaff,

    250px 40px rgba(0,234,255,.5),

    600px 200px #00eaff,

    900px 80px rgba(0,234,255,.4);


    opacity:.5;


    animation:dotsMove 6s infinite alternate;


}



@keyframes dotsMove{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(20px);

    }


}
}
/* ===== CLEAN HUD ===== */


.tech-box{
    overflow:visible;
}



.hud{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:4;

}

.hud-item span::after{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#00eaff;

    box-shadow:

    0 0 8px #00eaff,

    0 0 15px rgba(0,234,255,.8);

    top:50%;

    transform:translateY(-50%);

}

.hud-item{

    position:absolute;

    font-family:'Orbitron',sans-serif;

    font-size:10px;

    letter-spacing:1px;

    color:#00eaff;

    background:rgba(5,8,20,.85);

    border:1px solid rgba(0,234,255,.35);

    padding:6px 10px;

    border-radius:4px;

    white-space:nowrap;

}



.hud-item span{

    position:absolute;

    height:1px;

    background:#00eaff;

    opacity:.7;

}



.online{

    top:55px;

    right:-10px;

}



.online span{

    width:45px;

    left:-45px;

    top:50%;

}


.online span::after{

    left:-3px;

}



.diagnostic{

    bottom:65px;

    left:-15px;

}



.diagnostic span{

    width:55px;

    right:-55px;

    top:50%;

}


.diagnostic span::after{

    right:-3px;

}
.logo{
    flex:0 0 260px;
    display:flex;
    align-items:center;
}

nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;

    flex:1;
}

.header-phone{
    flex:0 0 220px;
    display:flex;
    justify-content:flex-end;
}