/* =========================
   WP AI TRADE - PART 1
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#060b17;
    color:#fff;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:#fff;
}

ul{
    list-style:none;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* Background Blur */

.bg-blur{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    z-index:-1;
}

.blur1{
    width:350px;
    height:350px;
    background:#00e5ff;
    top:-120px;
    left:-120px;
}

.blur2{
    width:350px;
    height:350px;
    background:#00ff9d;
    bottom:-120px;
    right:-120px;
}

/* HEADER */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(5,10,20,.55);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

header .container{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo h2{
    color:#00e5ff;
    font-size:28px;
    font-weight:700;
}

nav ul{
    display:flex;
    gap:35px;
}

nav ul li a{
    transition:.3s;
    color:#ddd;
}

nav ul li a:hover{
    color:#00e5ff;
}

.btn{
    padding:12px 28px;
    border-radius:50px;
    background:linear-gradient(90deg,#00e5ff,#00ff99);
    color:#000;
    font-weight:700;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-3px);
}

.menu{
    display:none;
    font-size:28px;
}

/* HERO */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.tag{
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    margin-bottom:25px;
    color:#00e5ff;
}

.hero h1{
    font-size:65px;
    line-height:1.15;
    margin-bottom:20px;
}

.hero h1 span{
    color:#00ff99;
}

.hero p{
    color:#c8c8c8;
    font-size:18px;
    line-height:32px;
}

.hero-btns{
    display:flex;
    gap:20px;
    margin-top:40px;
}

.primary-btn,
.secondary-btn{

    padding:16px 34px;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}

.primary-btn{

    background:linear-gradient(90deg,#00e5ff,#00ff99);
    color:#000;
}

.secondary-btn{

    border:2px solid #00e5ff;
}

.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-4px);
}

.hero-stats{

    display:flex;
    gap:60px;
    margin-top:60px;
}

.hero-stats h3{

    font-size:34px;
    color:#00ff99;
}

.hero-right{

    text-align:center;
}

.hero-right img{

    width:420px;
    animation:float 4s ease-in-out infinite;
}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}

}

/* Responsive */

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;

}

nav{

display:none;

}

.menu{

display:block;

}

.hero h1{

font-size:45px;

}

.hero-right img{

width:300px;

}

.hero-btns{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

}