@import url("variables.css");

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

.container{

    width:min(1320px,92%);

    margin:auto;

}

/* ==========================================
   HEADER
========================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    padding:18px 0;

    transition:.4s;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================
   BRAND
========================================== */

.brand{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

}

.brand img{

    width:68px;

    transition:.4s;

}

.brand:hover img{

    transform:rotate(-6deg) scale(1.05);

}

.brand-text h2{

    font-size:26px;

    color:#fff;

}

.brand-text span{

    color:#9d9d9d;

    font-size:13px;

}

/* ==========================================
   NAVIGATION
========================================== */

.nav-links{

    display:flex;

    gap:45px;

    list-style:none;

}

.nav-links a{

    color:#d2d2d2;

    text-decoration:none;

    font-weight:500;

    position:relative;

    transition:.35s;

}

.nav-links a:hover{

    color:#fff;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#ff003c;

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

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

section{

    position:relative;

    padding:140px 0;

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-container{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:90px;

    align-items:center;

}

.hero-left h1{

    font-size:76px;

    line-height:1.08;

    margin:30px 0;

}

.hero-left h1 span{

    background:linear-gradient(
        90deg,
        #ff003c,
        #8c00ff
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-left p{

    max-width:650px;

    color:#bdbdbd;

    font-size:18px;

    line-height:1.9;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin:40px 0;

}

.hero-features{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d2d2d2;

}

.hero-features i{

    color:#ff003c;

}

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

}
/* ==========================================
   HERO LOGO
========================================== */

.hero-logo{

    width:420px;

    position:relative;

    z-index:2;

    transition:.5s;

}

.hero-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,0,70,.22),

            transparent 70%

        );

    filter:blur(60px);

}

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

.background-purple{

    position:fixed;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(120,0,255,.15),

            transparent 45%

        ),

        radial-gradient(

            circle at bottom,

            rgba(255,0,70,.10),

            transparent 35%

        );

    z-index:-5;

}

.background-ring{

    position:fixed;

    width:1000px;

    height:1000px;

    border-radius:50%;

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

    left:50%;

    top:-450px;

    transform:translateX(-50%);

    z-index:-4;

}

.stars{

    position:fixed;

    inset:0;

    background-image:

        radial-gradient(

            white 1px,

            transparent 1px

        );

    background-size:60px 60px;

    opacity:.05;

    z-index:-3;

}

.noise{

    position:fixed;

    inset:0;

    opacity:.03;

    background:url("../images/noise.png");

    z-index:-2;

}