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

.hero{

    position:relative;

    overflow:hidden;

    min-height:920px;

    background:#07070d;

}

/* фон */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 70% 35%,
    rgba(157,78,221,.18),
    transparent 35%),

    radial-gradient(circle at 80% 60%,
    rgba(147,51,234,.12),
    transparent 40%),

    linear-gradient(
        180deg,
        #090912 0%,
        #07070d 100%
    );

    z-index:0;

}

/* маленькие звезды */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(#ffffff 1px, transparent 1px),
    radial-gradient(#9f5cff 1px, transparent 1px);

    background-size:
        180px 180px,
        260px 260px;

    background-position:
        40px 70px,
        120px 150px;

    opacity:.12;

    z-index:1;

}

/* затемнение */

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to right,
    rgba(7,7,13,.97) 0%,
    rgba(7,7,13,.85) 35%,
    rgba(7,7,13,.2) 70%,
    transparent);

    z-index:2;

}

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

.hero-container{

    position:relative;

    z-index:10;

    max-width:1400px;

    margin:auto;

    padding:170px 40px 120px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*=========================================
    LEFT
=========================================*/

.hero-left{

    width:470px;

}

.hero-title{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin:0;

}

.hero-title span{

    font-size:86px;

    line-height:.95;

    font-weight:800;

    letter-spacing:-2px;

    color:#fff;

    text-transform:uppercase;

}

/* фиолетовые точки */

.dot{

    color:#A855F7;

}

/*=========================================
    DESCRIPTION
=========================================*/

.hero-description{

    margin-top:42px;

    color:#9d9d9d;

    font-size:22px;

    line-height:1.8;

    max-width:420px;

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:50px;

}

.hero-buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-decoration:none;

    text-transform:uppercase;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    height:56px;

    transition:.3s ease;

}

/* Фиолетовая кнопка */

.btn-purple{

    width:230px;

    color:#fff;

    background:linear-gradient(90deg,#7B2FF7,#A855F7);

    border-radius:4px;

    box-shadow:0 0 30px rgba(168,85,247,.35);

}

.btn-purple:hover{

    transform:translateY(-3px);

    box-shadow:0 0 45px rgba(168,85,247,.6);

}

/* Темная кнопка */

.btn-dark{

    width:205px;

    color:#fff;

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

    background:rgba(255,255,255,.03);

    border-radius:4px;

}

.btn-dark:hover{

    border-color:#A855F7;

    color:#A855F7;

}


/*=========================================
    RIGHT SIDE
=========================================*/

.hero-right{

    position:relative;

    width:760px;

    height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

.hero-glow{

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(168,85,247,.35),

    rgba(168,85,247,.15),

    transparent 70%);

    filter:blur(60px);

}


/*=========================================
    SOUND WAVE
=========================================*/

.wave{

    position:absolute;

    width:100%;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:4px;

}

.wave span{

    display:block;

    width:2px;

    height:var(--i);

    border-radius:30px;

    background:linear-gradient(

        to top,

        #40116a,

        #8B5CF6,

        #ffffff,

        #8B5CF6,

        #40116a

    );

    box-shadow:

        0 0 6px rgba(168,85,247,.6),

        0 0 15px rgba(168,85,247,.4);

    animation:waveMove 1.8s ease-in-out infinite;

    animation-delay:calc(var(--i) * -.01s);

}


/* Центральные линии выше */

.wave span:nth-child(odd){

    opacity:.9;

}

.wave span:nth-child(even){

    opacity:.65;

}


/*=========================================
    WAVE ANIMATION
=========================================*/

@keyframes waveMove{

    0%{

        transform:scaleY(.7);

    }

    50%{

        transform:scaleY(1.25);

    }

    100%{

        transform:scaleY(.7);

    }

}
/*=========================================
    DECORATIVE LIGHTS
=========================================*/

.hero-right::before{

    content:"";

    position:absolute;

    width:100%;

    height:2px;

    left:0;

    top:50%;

    transform:translateY(-50%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(168,85,247,.8),
        rgba(255,255,255,.95),
        rgba(168,85,247,.8),
        transparent
    );

    filter:blur(2px);

    opacity:.8;

}

.hero-right::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    border:1px solid rgba(168,85,247,.08);

    box-shadow:
        0 0 60px rgba(168,85,247,.08),
        inset 0 0 60px rgba(168,85,247,.04);

}


/*=========================================
    HOVER EFFECTS
=========================================*/

.hero-title span{

    transition:.35s;

}

.hero-title:hover span{

    text-shadow:

        0 0 12px rgba(168,85,247,.35),

        0 0 35px rgba(168,85,247,.15);

}

.hero-description{

    animation:fadeUp .8s ease .4s forwards;

    opacity:0;

}

.hero-buttons{

    animation:fadeUp .8s ease .6s forwards;

    opacity:0;

}

.hero-title{

    animation:fadeUp .8s ease forwards;

}


/*=========================================
    FADE ANIMATION
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:1400px){

    .hero-container{

        padding:160px 30px 100px;

    }

    .hero-title span{

        font-size:74px;

    }

    .hero-right{

        width:620px;

    }

}


@media(max-width:1100px){

    .hero-container{

        flex-direction:column;

        text-align:center;

        gap:70px;

    }

    .hero-left{

        width:100%;

        max-width:700px;

    }

    .hero-description{

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-right{

        width:100%;

    }

}


@media(max-width:768px){

    .hero{

        min-height:auto;

    }

    .hero-container{

        padding:130px 20px 80px;

    }

    .hero-title span{

        font-size:52px;

    }

    .hero-description{

        font-size:18px;

        line-height:1.7;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .btn-purple,

    .btn-dark{

        width:100%;

        max-width:320px;

    }

    .hero-right{

        height:340px;

    }

    .wave{

        height:280px;

        gap:3px;

    }

}


@media(max-width:480px){

    .hero-title span{

        font-size:38px;

    }

    .hero-description{

        font-size:15px;

    }

    .hero-right{

        height:240px;

    }

    .wave{

        height:180px;

    }

    .wave span{

        width:2px;

    }

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#07070d;

}

::-webkit-scrollbar-thumb{

    background:#7B2FF7;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#A855F7;

}