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

html{
    scroll-behavior:smooth;
}

body{

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

    color:#fff;

    background:
        radial-gradient(circle at 50% 0%,#1b2756 0%,transparent 35%),
        radial-gradient(circle at 100% 100%,#34155b 0%,transparent 25%),
        #05070d;

}

/* ================= NAVBAR ================= */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:78px;

    padding:0 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    backdrop-filter:blur(18px);

    background:rgba(5,7,13,.65);

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

    z-index:999;

}

.logo{

    font-size:34px;

    font-weight:800;

    letter-spacing:2px;

}

.navbar nav{

    display:flex;

    align-items:center;

    gap:35px;

}

.navbar nav a{

    color:#d7d7e6;

    text-decoration:none;

    transition:.2s;

}

.navbar nav a:hover{

    color:white;

}

.buttonNav{

    padding:12px 22px;

    border-radius:12px;

    background:linear-gradient(135deg,#6d7cff,#8b5cf6);

    color:white!important;

    font-weight:700;

}

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

.hero{

    min-height:100vh;

    max-width:1300px;

    margin:auto;

    padding:150px 60px 80px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    border:1px solid rgba(109,124,255,.35);

    background:rgba(109,124,255,.12);

    color:#b5c5ff;

    margin-bottom:30px;

}

.hero h1{

    font-size:72px;

    line-height:1.05;

    margin-bottom:30px;

}

.hero p{

    color:#bcc5d9;

    font-size:22px;

    line-height:1.7;

    max-width:620px;

}

.buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.buttonPrimary{

    padding:18px 34px;

    border-radius:14px;

    background:linear-gradient(135deg,#6d7cff,#8b5cf6);

    color:white;

    text-decoration:none;

    font-weight:700;

}

.buttonSecondary{

    padding:18px 34px;

    border-radius:14px;

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

    color:white;

    text-decoration:none;

}

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

.heroRight{

    display:flex;

    justify-content:center;

    align-items:center;

}

.brain{

    width:420px;
    height:420px;

    border-radius:50%;

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

    position:relative;

    font-size:54px;
    font-weight:800;
    letter-spacing:2px;

    color:white;

    background:
        radial-gradient(circle at 30% 30%,
        #8b7cff 0%,
        #6d7cff 35%,
        #4739a5 70%,
        #1b2035 100%);

    box-shadow:
        0 0 80px rgba(109,124,255,.45),
        0 0 180px rgba(109,124,255,.20);

    animation:
        pulse 6s ease-in-out infinite;
}

.brain::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:1px solid rgba(140,140,255,.25);

    animation:rotateRing 18s linear infinite;

}

.brain::after{

    content:"";

    position:absolute;

    inset:-42px;

    border-radius:50%;

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

    animation:rotateRingReverse 28s linear infinite;

}

/* ================= FEATURES ================= */

.features{

    max-width:1300px;

    margin:auto;

    padding:120px 60px;

}

.features h2{

    text-align:center;

    font-size:52px;

    margin-bottom:60px;

}

.cards{

    display:grid;

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

    gap:30px;

}

.card{

    background:#121625;

    border:1px solid rgba(255,255,255,.06);

    border-radius:20px;

    padding:35px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#6d7cff;

}

.card h3{

    font-size:26px;

    margin-bottom:20px;

}

.card p{

    color:#b7c0d6;

    line-height:1.8;

}

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

footer{

    text-align:center;

    color:#8d96a8;

    padding:80px 0;

}

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

@media(max-width:960px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero p{

    margin:auto;

}

.buttons{

    justify-content:center;

}

.cards{

    grid-template-columns:1fr;

}

.hero h1{

    font-size:48px;

}

.brain{

    width:280px;
    height:280px;
}

.navbar{

    padding:0 20px;

}

}

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:
0 0 80px rgba(109,124,255,.45),
0 0 180px rgba(109,124,255,.18);

}

50%{

transform:scale(1.04);

box-shadow:
0 0 120px rgba(109,124,255,.65),
0 0 260px rgba(109,124,255,.28);

}

100%{

transform:scale(1);

box-shadow:
0 0 80px rgba(109,124,255,.45),
0 0 180px rgba(109,124,255,.18);

}

}

@keyframes rotateRing{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes rotateRingReverse{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}

/* ================= DEMO ================= */

.demo{

    max-width:1300px;

    margin:auto;

    padding:140px 60px;

}

.demoTitle{

    text-align:center;

    margin-bottom:70px;

}

.demoTitle h2{

    font-size:54px;

    margin-bottom:20px;

}

.demoTitle p{

    color:#b7c0d6;

    font-size:22px;

}

.demoWindow{

    border-radius:24px;

    overflow:hidden;

    background:#10141f;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.demoHeader{

    height:60px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 24px;

    background:#181d2a;

}

.red,
.yellow,
.green{

    width:14px;

    height:14px;

    border-radius:50%;

}

.red{

    background:#ff5f57;

}

.yellow{

    background:#febc2e;

}

.green{

    background:#28c840;

}

.demoName{

    margin-left:20px;

    color:#cdd3e5;

    font-weight:600;

}

.demoBody{

    display:grid;

    grid-template-columns:320px 1fr;

}

.demoLeft{

    padding:30px;

    border-right:1px solid rgba(255,255,255,.05);

}

.tool{

    padding:18px 20px;

    margin-bottom:18px;

    border-radius:14px;

    background:#171c29;

    transition:.25s;

}

.tool:hover{

    background:#6d7cff;

}

.demoRight{

    padding:50px;

}

.answer{

    background:#171c29;

    padding:35px;

    border-radius:20px;

}

.answer h3{

    font-size:28px;

    margin-bottom:18px;

}

.answer p{

    color:#c0c8da;

    line-height:1.8;

}