/* ==============================
   НАЛОГОПЛАТЕЛЬЩИК ЮЛ AI
   Future Cloud Interface
============================== */


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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            #152b55,
            #050914 55%
        );

    color: #ffffff;

    min-height: 100vh;

    overflow-x: hidden;

}





/* HEADER */

.header {

    height: 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 8%;

    position: fixed;

    width: 100%;

    top:0;

    z-index:100;


    backdrop-filter: blur(18px);

    background:
    rgba(5,9,20,0.55);

    border-bottom:
    1px solid rgba(255,255,255,0.08);

}



.logo {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:20px;

    font-weight:700;

}



.logo-icon {

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;


    background:
    linear-gradient(
        135deg,
        #00eaff,
        #5967ff
    );


    box-shadow:
    0 0 30px
    rgba(0,220,255,.6);

}



nav {

    display:flex;

    gap:30px;

}


nav a {

    color:#c9d5ff;

    text-decoration:none;

    transition:.3s;

}


nav a:hover {

    color:#ffffff;

}







/* HERO */

.hero {

    min-height:100vh;

    padding:
    150px 8% 80px;


    display:flex;

    align-items:center;

    justify-content:space-between;

}



.hero-content {

    max-width:650px;

}



.hero h1 {

    font-size:

    clamp(40px,5vw,72px);


    line-height:1.05;


    background:

    linear-gradient(
        90deg,
        #ffffff,
        #7ee7ff
    );


    -webkit-background-clip:text;

    color:transparent;

}



.hero p {

    margin-top:30px;

    font-size:21px;

    line-height:1.6;

    color:#b8c7ef;

}






/* BUTTONS */


.buttons {

    margin-top:40px;

    display:flex;

    gap:20px;

}



button {

    border:none;

    cursor:pointer;

    font-size:17px;

    padding:
    16px 32px;

    border-radius:14px;

}



.primary {


    color:white;


    background:

    linear-gradient(
        135deg,
        #00c6ff,
        #0066ff
    );


    box-shadow:

    0 0 40px
    rgba(0,170,255,.35);


}

a.primary {
border: none;
    cursor: pointer;
    font-size: 17px;
    padding: 16px 32px;
    border-radius: 14px;
}

.secondary {

    background:

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


    color:white;


    border:

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

}







/* AI CORE */


.hero-ai {

    position:relative;

    width:420px;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.ai-circle {


    width:260px;

    height:260px;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:70px;

    font-weight:800;


    background:

    radial-gradient(
        circle,
        #00eaff,
        #0644ff
    );


    box-shadow:

    0 0 80px
    rgba(0,220,255,.7);


    animation:

    float 5s infinite ease-in-out;

}




.pulse {

    position:absolute;


    width:320px;

    height:320px;

    border-radius:50%;


    border:

    2px solid
    rgba(0,220,255,.4);


    animation:

    pulse 3s infinite;

}




@keyframes pulse {


0% {

transform:scale(.8);

opacity:.8;

}


100% {

transform:scale(1.5);

opacity:0;

}


}




@keyframes float {


50% {

transform:translateY(-20px);

}

}






.floating-card {


position:absolute;

right:-40px;

bottom:40px;


width:240px;


padding:25px;


background:

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


backdrop-filter:blur(20px);


border:

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


border-radius:20px;



}



.floating-card p {

font-size:14px;

margin-top:10px;

color:#c5d3ff;

}







/* SECTIONS */


section:not(.hero) {


padding:

100px 8%;


}



h2 {


font-size:

42px;


text-align:center;


margin-bottom:50px;

}






/* CARDS */


.cards {


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(260px,1fr)
);


gap:30px;


}



.card {


padding:35px;


border-radius:24px;


background:

rgba(255,255,255,.06);



border:

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



backdrop-filter:

blur(20px);



transition:.4s;


}



.card:hover {


transform:

translateY(-10px);



box-shadow:

0 20px 50px
rgba(0,0,0,.3);


}



.card h3 {


font-size:25px;

margin-bottom:15px;

}



.card p {


color:#b7c6ef;

line-height:1.6;

}








/* AI CHAT */


.ai-section {

text-align:center;

}



.chat-demo {


max-width:700px;

margin:auto;


display:flex;

flex-direction:column;

gap:20px;

}



.message {


padding:20px;

border-radius:20px;

text-align:left;


}



.user {


background:

rgba(0,170,255,.2);

}



.ai {


background:

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


}





/* FOOTER */


footer {


padding:

40px;

text-align:center;

color:#7180aa;

}






/* MOBILE */


@media(max-width:900px){


.header {

padding:0 20px;

}


nav {

display:none;

}



.hero {

flex-direction:column;

text-align:center;

}



.hero-ai {

margin-top:60px;

width:300px;

height:300px;

}



.ai-circle {

width:200px;

height:200px;

font-size:50px;

}


.buttons {

justify-content:center;

flex-direction:column;

}


}