/* ===================================
   NOVA AI LANDING PAGE
   STYLE.CSS PART 1/4
   =================================== */


/* ---------- RESET ---------- */

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

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        Inter,
        "PingFang SC",
        "Microsoft YaHei",
        "Helvetica Neue",
        Arial,
        sans-serif;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    border: none;

    cursor: pointer;

    font-family: inherit;

}



/* ---------- VARIABLES ---------- */


:root {


    --bg:

        #050816;


    --surface:

        rgba(255,255,255,0.06);



    --surface-light:

        rgba(255,255,255,0.1);



    --border:

        rgba(255,255,255,0.12);



    --text:

        #ffffff;



    --muted:

        #94a3b8;



    --primary:

        #6c63ff;



    --cyan:

        #00e5ff;



    --purple:

        #8b5cf6;



    --gradient:

        linear-gradient(

            135deg,

            #6c63ff,

            #00e5ff

        );


    --radius:

        24px;


    --container:

        1200px;


}



/* ---------- CONTAINER ---------- */


.container {


    width:

        min(90% , var(--container));

    margin:

        0 auto;


}



/* ---------- BACKGROUND EFFECT ---------- */


.aurora {


    position:

        fixed;


    width:

        900px;


    height:

        900px;


    top:

        -300px;


    left:

        50%;


    transform:

        translateX(-50%);


    background:

        radial-gradient(

            circle,

            rgba(108,99,255,.35),

            transparent 65%

        );


    filter:

        blur(80px);


    z-index:

        -2;


    animation:

        auroraMove 12s infinite alternate;


}



.grid-bg {


    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:

        60px 60px;


    mask-image:

        radial-gradient(

            circle at center,

            black,

            transparent 80%

        );


    z-index:

        -3;


}



@keyframes auroraMove {


    from {


        transform:

            translateX(-50%)

            translateY(0);


    }


    to {


        transform:

            translateX(-50%)

            translateY(120px);


    }


}





/* ---------- HEADER ---------- */


.header {


    position:

        sticky;


    top:

        0;


    z-index:

        100;


    padding:

        20px 0;


    backdrop-filter:

        blur(20px);


}



.navbar {


    display:

        flex;


    align-items:

        center;


    justify-content:

        space-between;


    padding:

        14px 24px;


    border:

        1px solid var(--border);


    background:

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


    border-radius:

        100px;


}




.logo {


    display:

        flex;


    align-items:

        center;


    gap:

        12px;


    font-size:

        20px;


    font-weight:

        700;


}



.logo-icon {


    width:

        38px;


    height:

        38px;


    border-radius:

        12px;


    background:

        var(--gradient);


    position:

        relative;


    box-shadow:

        0 0 40px rgba(108,99,255,.7);


}



.logo-icon::after {


    content:

        "";


    position:

        absolute;


    inset:

        8px;


    background:

        white;


    border-radius:

        8px;


    opacity:

        .8;


}





.nav-links {


    display:

        flex;


    gap:

        36px;


    list-style:

        none;


    color:

        var(--muted);


}



.nav-links a {


    transition:

        .3s;


}



.nav-links a:hover {


    color:

        white;


}





.nav-buttons {


    display:

        flex;


    gap:

        12px;


}



/* ---------- BUTTONS ---------- */


.btn {


    padding:

        12px 24px;


    border-radius:

        999px;


    font-weight:

        600;


    transition:

        .35s;


}



.btn.primary {


    color:

        white;


    background:

        var(--gradient);


    box-shadow:

        0 10px 40px rgba(108,99,255,.35);


}



.btn.primary:hover {


    transform:

        translateY(-3px);


    box-shadow:

        0 20px 50px rgba(108,99,255,.5);


}



.btn.secondary {


    color:

        white;


    border:

        1px solid var(--border);


    background:

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


}



.btn.secondary:hover {


    background:

        rgba(255,255,255,.12);


}


.btn.ghost {


    background:

        transparent;


    color:

        var(--muted);


}



.btn.big {


    padding:

        16px 32px;


    font-size:

        16px;


}


/* ---------- HERO ---------- */


.hero {


    min-height:

        850px;


    display:

        grid;


    grid-template-columns:

        1fr 1fr;


    align-items:

        center;


    gap:

        60px;


    padding-top:

        60px;


}
/* ---------- HERO CONTENT ---------- */


.hero-left {


    animation:

        fadeUp .8s ease forwards;


}



.badge {


    display:

        inline-flex;


    align-items:

        center;


    gap:

        8px;


    padding:

        8px 18px;


    border-radius:

        999px;


    background:

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


    border:

        1px solid var(--border);


    color:

        #cbd5e1;


    font-size:

        14px;


    margin-bottom:

        28px;


}



.hero h1 {


    font-size:

        clamp(48px,6vw,82px);


    line-height:

        1.05;


    letter-spacing:

        -3px;


    font-weight:

        800;


}



.hero h1 span {


    display:

        block;


    background:

        var(--gradient);


    -webkit-background-clip:

        text;


    color:

        transparent;


}



.hero p {


    margin-top:

        28px;


    max-width:

        560px;


    color:

        var(--muted);


    font-size:

        18px;


}



.hero-buttons {


    display:

        flex;


    gap:

        16px;


    margin-top:

        40px;


}



.hero-users {


    display:

        flex;


    align-items:

        center;


    gap:

        18px;


    margin-top:

        45px;


    color:

        var(--muted);


}



.hero-users strong {


    color:

        white;


}



.avatars {


    display:

        flex;


}



.avatars img {


    width:

        42px;


    height:

        42px;


    border-radius:

        50%;


    border:

        3px solid var(--bg);


    margin-left:

        -12px;


}



.avatars img:first-child {


    margin-left:

        0;


}





/* ---------- DASHBOARD ---------- */


.hero-right {


    display:

        flex;


    justify-content:

        center;


}



.dashboard {


    width:

        520px;


    padding:

        22px;


    border-radius:

        32px;


    background:

        rgba(255,255,255,.07);


    border:

        1px solid var(--border);


    backdrop-filter:

        blur(30px);


    box-shadow:

        0 40px 100px rgba(0,0,0,.4);


    transform:

        perspective(1200px)

        rotateY(-8deg);


    animation:

        floating 6s ease-in-out infinite;


}



.dash-top {


    display:

        flex;


    gap:

        8px;


    margin-bottom:

        20px;


}



.circle {


    width:

        12px;


    height:

        12px;


    border-radius:

        50%;


}



.red {


    background:

        #ff5f57;


}


.yellow {


    background:

        #febc2e;


}



.green {


    background:

        #28c840;


}





.chart-card {


    padding:

        25px;


    border-radius:

        24px;


    background:

        rgba(0,0,0,.25);


    border:

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


}



.chart-card h4 {


    color:

        var(--muted);


    font-weight:

        500;


}



.chart-card h2 {


    font-size:

        38px;


    margin:

        8px 0 20px;


}





#chart {


    width:

        100%;


    height:

        120px;


}




.mini-grid {


    display:

        grid;


    grid-template-columns:

        repeat(2,1fr);


    gap:

        16px;


    margin-top:

        18px;


}



.glass-card {


    padding:

        20px;


    border-radius:

        20px;


    background:

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


    border:

        1px solid var(--border);


    transition:

        .35s;


}



.glass-card:hover {


    transform:

        translateY(-8px);


    background:

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


}



.glass-card svg {


    color:

        #00e5ff;


    margin-bottom:

        12px;


}



.glass-card h3 {


    font-size:

        18px;


}



.glass-card span {


    color:

        var(--muted);


    font-size:

        14px;


}






@keyframes floating {


    0%,100% {


        transform:

            perspective(1200px)

            rotateY(-8deg)

            translateY(0);


    }


    50% {


        transform:

            perspective(1200px)

            rotateY(-8deg)

            translateY(-20px);


    }


}



@keyframes fadeUp {


    from {


        opacity:

            0;


        transform:

            translateY(40px);


    }


    to {


        opacity:

            1;


        transform:

            translateY(0);


    }


}




/* ---------- LOGOS ---------- */


.logos {


    padding:

        80px 0;


}



.logo-row {


    display:

        flex;


    justify-content:

        space-between;


    align-items:

        center;


    color:

        rgba(255,255,255,.45);


    font-size:

        22px;


    font-weight:

        700;


}



.logo-row span {


    transition:

        .3s;


}



.logo-row span:hover {


    color:

        white;


}





/* ---------- SECTION TITLE ---------- */


.section-title {


    text-align:

        center;


    margin-bottom:

        70px;


}



.section-title span {


    color:

        #00e5ff;


    letter-spacing:

        3px;


    font-size:

        13px;


    font-weight:

        700;


}



.section-title h2 {


    margin-top:

        18px;


    font-size:

        clamp(36px,5vw,58px);


    letter-spacing:

        -2px;


}



.section-title p {


    color:

        var(--muted);


    margin-top:

        16px;


    font-size:

        18px;


}
/* ---------- FEATURES ---------- */


.features {


    padding:

        100px 0;


}



.feature-grid {


    display:

        grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:

        24px;


}



.feature-card {


    padding:

        36px;


    border-radius:

        var(--radius);


    background:

        var(--surface);


    border:

        1px solid var(--border);


    backdrop-filter:

        blur(20px);


    transition:

        .35s;


}



.feature-card:hover {


    transform:

        translateY(-10px);


    border-color:

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


    box-shadow:

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


}



.feature-card svg {


    width:

        38px;


    height:

        38px;


    color:

        var(--cyan);


    margin-bottom:

        25px;


}



.feature-card h3 {


    font-size:

        24px;


    margin-bottom:

        12px;


}



.feature-card p {


    color:

        var(--muted);


}







/* ---------- BENTO GRID ---------- */


.bento {


    display:

        grid;


    grid-template-columns:

        repeat(4,1fr);


    grid-template-rows:

        240px 240px;


    gap:

        20px;


    padding:

        80px 0;


}



.bento-large {


    grid-column:

        span 2;


    grid-row:

        span 2;


    border-radius:

        32px;


    padding:

        40px;


    display:

        flex;


    align-items:

        end;


    background:


        linear-gradient(

            135deg,

            rgba(108,99,255,.35),

            rgba(0,229,255,.12)

        );


    border:

        1px solid var(--border);


    overflow:

        hidden;


    position:

        relative;


}



.bento-large::before {


    content:

        "";


    position:

        absolute;


    width:

        300px;


    height:

        300px;


    right:

        -100px;


    top:

        -100px;


    background:

        var(--gradient);


    filter:

        blur(100px);


}



.bento-large h2 {


    font-size:

        48px;


    max-width:

        400px;


    position:

        relative;


}



.bento-large span {


    color:

        var(--cyan);


    position:

        relative;


}



.bento-card {


    padding:

        30px;


    border-radius:

        28px;


    background:

        var(--surface);


    border:

        1px solid var(--border);


    display:

        flex;


    align-items:

        center;


    justify-content:

        center;


    transition:

        .3s;


}



.bento-card:hover {


    transform:

        scale(1.03);


    background:

        var(--surface-light);


}



.bento-card h3 {


    font-size:

        26px;


}






/* ---------- STATS ---------- */


.stats {


    display:

        grid;


    grid-template-columns:

        repeat(4,1fr);


    gap:

        20px;


    padding:

        100px 0;


}



.stat-card {


    text-align:

        center;


    padding:

        35px 20px;


    background:

        var(--surface);


    border:

        1px solid var(--border);


    border-radius:

        24px;


}



.stat-card h2 {


    font-size:

        52px;


    background:

        var(--gradient);


    -webkit-background-clip:

        text;


    color:

        transparent;


}



.stat-card p {


    color:

        var(--muted);


}






/* ---------- WORKFLOW ---------- */


.workflow {


    padding:

        100px 0;


}



.steps {


    max-width:

        800px;


    margin:

        auto;


}



.step {


    display:

        flex;


    gap:

        30px;


    padding:

        35px;


    margin-bottom:

        20px;


    background:

        var(--surface);


    border:

        1px solid var(--border);


    border-radius:

        28px;


}



.step-number {


    width:

        70px;


    height:

        70px;


    border-radius:

        20px;


    display:

        flex;


    align-items:

        center;


    justify-content:

        center;


    font-size:

        24px;


    font-weight:

        800;


    background:

        var(--gradient);


}



.step h3 {


    font-size:

        26px;


    margin-bottom:

        8px;


}



.step p {


    color:

        var(--muted);


}






/* ---------- TESTIMONIALS ---------- */


.testimonials {


    padding:

        100px 0;


}



.testimonial-grid {


    display:

        grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:

        24px;


}



.testimonial-card {


    padding:

        32px;


    border-radius:

        28px;


    background:

        var(--surface);


    border:

        1px solid var(--border);


}



.stars {


    color:

        #ffd700;


    letter-spacing:

        5px;


    margin-bottom:

        20px;


}



.testimonial-card p {


    color:

        #dbeafe;


    margin-bottom:

        30px;


}



.person {


    display:

        flex;


    align-items:

        center;


    gap:

        15px;


}



.person img {


    width:

        50px;


    height:

        50px;


    border-radius:

        50%;


}



.person span {


    display:

        block;


    color:

        var(--muted);


    font-size:

        14px;


}
/* ---------- PRICING ---------- */


.pricing {


    padding:

        100px 0;


}



.pricing-grid {


    display:

        grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:

        24px;


}



.price-card {


    padding:

        40px 32px;


    border-radius:

        32px;


    background:

        var(--surface);


    border:

        1px solid var(--border);


    position:

        relative;


}



.price-card.popular {


    border-color:

        var(--primary);


    transform:

        translateY(-15px);


    box-shadow:

        0 30px 80px rgba(108,99,255,.25);


}



.popular-tag {


    position:

        absolute;


    top:

        -14px;


    left:

        50%;


    transform:

        translateX(-50%);


    background:

        var(--gradient);


    padding:

        6px 20px;


    border-radius:

        999px;


    font-size:

        12px;


    font-weight:

        700;


}



.price-card h3 {


    font-size:

        26px;


}



.price {


    font-size:

        52px;


    font-weight:

        800;


    margin:

        25px 0;


}



.price span {


    font-size:

        15px;


    color:

        var(--muted);


}



.price-card ul {


    list-style:

        none;


    color:

        #cbd5e1;


    margin-bottom:

        35px;


}



.price-card li {


    margin-bottom:

        14px;


}






/* ---------- FAQ ---------- */


.faq {


    padding:

        100px 0;


}



.faq-list {


    max-width:

        850px;


    margin:

        auto;


}



.faq-item {


    border-bottom:

        1px solid var(--border);


}



.faq-question {


    width:

        100%;


    background:

        transparent;


    color:

        white;


    padding:

        28px 0;


    display:

        flex;


    justify-content:

        space-between;


    align-items:

        center;


    font-size:

        20px;


    text-align:

        left;


}



.faq-question svg {


    transition:

        .3s;


}



.faq-answer {


    max-height:

        0;


    overflow:

        hidden;


    transition:

        .4s;


    color:

        var(--muted);


}



.faq-answer p {


    padding-bottom:

        25px;


}



.faq-item.active .faq-answer {


    max-height:

        200px;


}



.faq-item.active svg {


    transform:

        rotate(45deg);


}





/* ---------- CTA ---------- */


.cta {


    padding:

        100px 0;


}



.cta-box {


    text-align:

        center;


    padding:

        90px 30px;


    border-radius:

        40px;


    background:

        linear-gradient(

            135deg,

            rgba(108,99,255,.25),

            rgba(0,229,255,.15)

        );


    border:

        1px solid var(--border);


    position:

        relative;


    overflow:

        hidden;


}



.cta-glow {


    position:

        absolute;


    width:

        400px;


    height:

        400px;


    background:

        var(--gradient);


    filter:

        blur(120px);


    opacity:

        .3;


    left:

        50%;


    top:

        0;


    transform:

        translateX(-50%);


}



.cta h2 {


    font-size:

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


    position:

        relative;


}



.cta p {


    color:

        var(--muted);


    margin:

        20px auto 40px;


    max-width:

        600px;


}



.cta-buttons {


    display:

        flex;


    justify-content:

        center;


    gap:

        20px;


    position:

        relative;


}





/* ---------- FOOTER ---------- */


.footer {


    padding:

        80px 0 30px;


    border-top:

        1px solid var(--border);


}



.footer-grid {


    display:

        grid;


    grid-template-columns:

        2fr 1fr 1fr 1fr;


    gap:

        40px;


}



.footer-brand p {


    color:

        var(--muted);


    margin-top:

        20px;


    max-width:

        300px;


}



.footer h4 {


    margin-bottom:

        20px;


}



.footer a {


    display:

        block;


    color:

        var(--muted);


    margin-bottom:

        12px;


}



.footer a:hover {


    color:

        white;


}



.footer-bottom {


    width:

        min(90%,var(--container));


    margin:

        50px auto 0;


    padding-top:

        30px;


    border-top:

        1px solid var(--border);


    display:

        flex;


    justify-content:

        space-between;


    color:

        var(--muted);


}



.socials {


    display:

        flex;


    gap:

        20px;


}






/* ---------- RESPONSIVE ---------- */


@media(max-width:1000px){


    .hero {


        grid-template-columns:

            1fr;


        text-align:

            center;


    }


    .hero p {


        margin-left:

            auto;


        margin-right:

            auto;


    }


    .hero-buttons {


        justify-content:

            center;


    }


    .hero-users {


        justify-content:

            center;


    }



    .hero-right {


        margin-top:

            50px;


    }



    .feature-grid,


    .testimonial-grid,


    .pricing-grid {


        grid-template-columns:

            1fr;


    }



    .bento {


        grid-template-columns:

            1fr;


        grid-template-rows:

            auto;


    }



    .bento-large {


        grid-column:

            span 1;


        min-height:

            350px;


    }



    .stats {


        grid-template-columns:

            repeat(2,1fr);


    }



    .footer-grid {


        grid-template-columns:

            1fr 1fr;


    }


}



@media(max-width:700px){


    .nav-links {


        display:

            none;


    }



    .navbar {


        padding:

            12px 16px;


    }



    .hero h1 {


        font-size:

            44px;


    }



    .dashboard {


        width:

            100%;


        transform:

            none;


    }



    .logo-row {


        flex-wrap:

            wrap;


        gap:

            25px;


        justify-content:

            center;


    }



    .stats {


        grid-template-columns:

            1fr;


    }



    .step {


        flex-direction:

            column;


    }



    .cta-buttons {


        flex-direction:

            column;


    }



    .footer-grid {


        grid-template-columns:

            1fr;


    }



    .footer-bottom {


        flex-direction:

            column;


        gap:

            20px;


    }


}



/* ---------- SCROLL ANIMATION ---------- */


.reveal {


    opacity:

        0;


    transform:

        translateY(40px);


    transition:

        .8s;


}



.reveal.show {


    opacity:

        1;


    transform:

        translateY(0);


}