/* =========================================
   MAIN CSS
   NeoAI Editor Theme - Version 3.0
   Futuristic AI SaaS UI
========================================= */

/* =========================================
   IMPORT FILES
========================================= */

@import url("animations.css");
@import url("editor.css");

/* =========================================
   ROOT VARIABLES
========================================= */

:root{

    --neo-bg:#050816;
    --neo-bg-2:#0b1023;

    --neo-primary:#7C3AED;
    --neo-secondary:#00D4FF;
    --neo-pink:#FF00AA;

    --neo-white:#ffffff;
    --neo-text:#CBD5E1;
    --neo-muted:#94A3B8;

    --neo-border:
    rgba(255,255,255,0.08);

    --neo-card:
    rgba(255,255,255,0.04);

    --neo-glass:
    rgba(255,255,255,0.05);

    --neo-radius:24px;

    --neo-shadow:
    0 20px 50px rgba(0,0,0,0.35);

}

/* =========================================
   RESET
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{

    background:
    radial-gradient(
        circle at top left,
        rgba(124,58,237,0.15),
        transparent 30%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(0,212,255,0.12),
        transparent 30%
    ),
    var(--neo-bg);

    color:var(--neo-white);

    overflow-x:hidden;

    font-family:
    'Inter',
    'Poppins',
    sans-serif;

    position:relative;

}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0b1023;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
        180deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

    border-radius:20px;

}

/* =========================================
   CONTAINER
========================================= */

.container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:
    0 24px;

}

/* =========================================
   LINKS
========================================= */

a{
    text-decoration:none;
    color:inherit;
}

/* =========================================
   IMAGES
========================================= */

img{
    max-width:100%;
    display:block;
}

/* =========================================
   LISTS
========================================= */

ul{
    list-style:none;
}

/* =========================================
   BUTTONS
========================================= */

button{
    border:none;
    outline:none;
    cursor:pointer;
    font-family:inherit;
}

/* =========================================
   APP BACKGROUND
========================================= */

.app-background{

    position:fixed;

    inset:0;

    z-index:-1;

    overflow:hidden;

    pointer-events:none;

}

/* =========================================
   GLOW ORBS
========================================= */

.glow-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:0.18;

}

.glow-orb.orb-1{

    width:420px;
    height:420px;

    top:-120px;
    left:-120px;

    background:#7C3AED;

}

.glow-orb.orb-2{

    width:340px;
    height:340px;

    right:-100px;
    bottom:-100px;

    background:#00D4FF;

}

.glow-orb.orb-3{

    width:260px;
    height:260px;

    top:40%;
    left:50%;

    background:#FF00AA;

    opacity:0.08;

}

/* =========================================
   BACKGROUND GRID
========================================= */

.background-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,0.03) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,0.03) 1px,
        transparent 1px
    );

    background-size:45px 45px;

}

/* =========================================
   SECTION
========================================= */

section{
    position:relative;
    padding:120px 0;
}

/* =========================================
   SECTION TITLE
========================================= */

.neo-section-title{

    text-align:center;

    margin-bottom:70px;

}

.neo-section-title span{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:12px 20px;

    border-radius:999px;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid var(--neo-border);

    color:var(--neo-secondary);

    font-size:0.85rem;

    letter-spacing:1px;

    margin-bottom:20px;

}

.neo-section-title h2{

    font-size:3.5rem;

    line-height:1.15;

    margin-bottom:20px;

    font-weight:800;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #7C3AED
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.neo-section-title p{

    max-width:720px;

    margin:0 auto;

    color:var(--neo-muted);

    line-height:1.8;

    font-size:1.05rem;

}

/* =========================================
   GLASS CARD
========================================= */

.glass-card{

    position:relative;

    background:
    rgba(255,255,255,0.04);

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

    backdrop-filter:
    blur(20px);

    border-radius:28px;

    overflow:hidden;

    transition:0.4s ease;

}

.glass-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(124,58,237,0.45);

}

/* =========================================
   BUTTONS
========================================= */

.neo-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    padding:15px 32px;

    border-radius:18px;

    font-weight:600;

    transition:0.35s ease;

    position:relative;

    overflow:hidden;

}

/* PRIMARY */

.neo-btn-primary{

    background:
    linear-gradient(
        135deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

    color:#fff;

    box-shadow:
    0 18px 40px rgba(124,58,237,0.35);

}

.neo-btn-primary:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 24px 60px rgba(124,58,237,0.45);

}

/* SECONDARY */

.neo-btn-secondary{

    background:
    rgba(255,255,255,0.04);

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

    color:#fff;

}

.neo-btn-secondary:hover{

    transform:
    translateY(-5px);

    background:
    rgba(255,255,255,0.08);

}

/* =========================================
   FEATURE GRID
========================================= */

.neo-feature-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:30px;

}

/* =========================================
   FEATURE CARD
========================================= */

.neo-feature-card{

    padding:35px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.04);

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

    backdrop-filter:
    blur(18px);

    transition:0.4s ease;

}

.neo-feature-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(124,58,237,0.4);

    box-shadow:
    0 25px 50px rgba(0,0,0,0.3);

}

/* =========================================
   FEATURE ICON
========================================= */

.neo-feature-icon{

    width:72px;
    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:25px;

    background:
    linear-gradient(
        135deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

    box-shadow:
    0 15px 35px rgba(124,58,237,0.3);

}

.neo-feature-icon i{

    font-size:30px;

    color:#fff;

}

/* =========================================
   FEATURE TEXT
========================================= */

.neo-feature-card h3{

    font-size:1.5rem;

    margin-bottom:14px;

}

.neo-feature-card p{

    color:var(--neo-muted);

    line-height:1.7;

}

/* =========================================
   STATS GRID
========================================= */

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap:25px;

}

/* =========================================
   STAT CARD
========================================= */

.stat-card{

    padding:30px;

    border-radius:26px;

    background:
    rgba(255,255,255,0.04);

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

    text-align:center;

    transition:0.35s ease;

}

.stat-card:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(124,58,237,0.35);

}

.stat-card h3{

    font-size:2.7rem;

    margin-bottom:12px;

    font-weight:800;

    background:
    linear-gradient(
        135deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.stat-card span{

    color:var(--neo-muted);

}

/* =========================================
   TESTIMONIALS
========================================= */

.testimonial-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(320px,1fr)
    );

    gap:30px;

}

.testimonial-card{

    padding:35px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.04);

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

    transition:0.35s ease;

}

.testimonial-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(0,212,255,0.3);

}

.testimonial-card p{

    color:#CBD5E1;

    line-height:1.8;

    margin-bottom:25px;

}

/* =========================================
   USER INFO
========================================= */

.testimonial-user{

    display:flex;

    align-items:center;

    gap:16px;

}

.testimonial-avatar{

    width:56px;
    height:56px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

    display:flex;

    align-items:center;
    justify-content:center;

    font-weight:700;

}

/* =========================================
   NEWSLETTER
========================================= */

.newsletter-box{

    padding:70px 50px;

    border-radius:34px;

    background:
    linear-gradient(
        135deg,
        rgba(124,58,237,0.14),
        rgba(0,212,255,0.08)
    );

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

    text-align:center;

}

.newsletter-box h2{

    font-size:3rem;

    margin-bottom:20px;

}

.newsletter-box p{

    max-width:650px;

    margin:
    0 auto 30px;

    color:#CBD5E1;

}

/* =========================================
   NEWSLETTER FORM
========================================= */

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.newsletter-input{

    width:380px;

    max-width:100%;

    height:58px;

    border-radius:18px;

    padding:0 22px;

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

    background:
    rgba(255,255,255,0.04);

    color:#fff;

    outline:none;

    transition:0.3s ease;

}

.newsletter-input:focus{

    border-color:
    var(--neo-primary);

    background:
    rgba(124,58,237,0.08);

}

/* =========================================
   TOOL ICONS
========================================= */

.tool{

    width:58px;
    height:58px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.05);

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:0.3s ease;

    position:relative;

    overflow:hidden;

}

.tool i{

    font-size:20px;

    color:#7c8cff;

    transition:0.3s ease;

}

.tool:hover{

    transform:
    translateY(-4px);

    background:
    linear-gradient(
        135deg,
        rgba(124,58,237,0.35),
        rgba(6,182,212,0.2)
    );

    box-shadow:
    0 0 25px rgba(124,58,237,0.4);

}

.tool:hover i{

    color:#fff;

    transform:scale(1.1);

}

.tool.active{

    background:
    linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

    box-shadow:
    0 0 35px rgba(124,58,237,0.55);

}

.tool.active i{

    color:#fff;

}

/* =========================================
   TOOLTIP
========================================= */

.tooltip{

    position:absolute;

    left:72px;

    background:#111827;

    color:#fff;

    padding:8px 14px;

    border-radius:12px;

    font-size:13px;

    opacity:0;

    pointer-events:none;

    transition:0.3s ease;

    white-space:nowrap;

}

.tool:hover .tooltip{

    opacity:1;

}

/* =========================================
   SCROLL TOP
========================================= */

.scroll-top{

    position:fixed;

    right:25px;
    bottom:25px;

    width:56px;
    height:56px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

    display:flex;

    align-items:center;
    justify-content:center;

    color:#fff;

    box-shadow:
    0 15px 40px rgba(124,58,237,0.35);

    z-index:999;

    opacity:0;
    visibility:hidden;

    transition:0.35s ease;

}

.scroll-top.visible{

    opacity:1;
    visibility:visible;

}

.scroll-top:hover{

    transform:
    translateY(-5px);

}

/* =========================================
   LOADER
========================================= */

.neo-loader{

    display:inline-flex;

    gap:8px;

}

.neo-loader span{

    width:12px;
    height:12px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        var(--neo-primary),
        var(--neo-secondary)
    );

}

/* =========================================
   UTILITY
========================================= */

.text-primary{
    color:var(--neo-primary);
}

.text-secondary{
    color:var(--neo-secondary);
}

.text-muted{
    color:var(--neo-muted);
}

.flex{
    display:flex;
}

.grid{
    display:grid;
}

.flex-center{

    display:flex;

    align-items:center;
    justify-content:center;

}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px){

    .neo-section-title h2{

        font-size:2.8rem;

    }

}

@media(max-width:768px){

    section{

        padding:90px 0;

    }

    .neo-section-title{

        margin-bottom:50px;

    }

    .neo-section-title h2{

        font-size:2.1rem;

    }

    .newsletter-box{

        padding:40px 25px;

    }

    .newsletter-box h2{

        font-size:2rem;

    }

}

@media(max-width:580px){

    .container{

        padding:0 18px;

    }

    .neo-section-title h2{

        font-size:1.7rem;

    }

    .neo-feature-card,
    .testimonial-card,
    .newsletter-box{

        padding:22px;

    }

    .tool{

        width:50px;
        height:50px;

    }

}

/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}