/* ===========================
   WISHIVAH HERO SECTION
=========================== */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:140px 5% 80px;
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(circle at top,#8B5CF620,transparent 45%),
    radial-gradient(circle at bottom right,#6D28D920,transparent 35%),
    #09090B;
}

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#8B5CF6;

    filter:blur(180px);

    opacity:.15;

    border-radius:50%;

    top:-200px;

    right:-120px;

}

.hero-content{

    max-width:900px;

    text-align:center;

    position:relative;

    z-index:2;

}

.hero-content h1{

    font-size:64px;

    font-weight:800;

    line-height:1.2;

    color:#fff;

    margin-bottom:25px;

}

.hero-content p{

    font-size:20px;

    color:#BDBDBD;

    max-width:720px;

    margin:0 auto 40px;

    line-height:1.8;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-btn{

    background:#8B5CF6;

    color:#fff;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.hero-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(139,92,246,.35);

}

.hero-outline{

    padding:16px 38px;

    border-radius:50px;

    border:2px solid #8B5CF6;

    color:#8B5CF6;

    transition:.35s;

}

.hero-outline:hover{

    background:#8B5CF6;

    color:#fff;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:40px;

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

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

    margin-bottom:30px;

    color:#ddd;

    font-size:14px;

}

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


.hero-content{

    animation:fadeUp 1s ease;

}



@keyframes fadeUp{

from{

    opacity:0;

    transform:translateY(40px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}




.floating-card{

    animation:floatCard 4s ease-in-out infinite;

}



.card-right{

    animation-delay:1s;

}



@keyframes floatCard{

0%,100%{

    transform:translateY(0);

}


50%{

    transform:translateY(-15px);

}

}



.hero-badge{

    animation:pulseBadge 2s infinite;

}



@keyframes pulseBadge{


0%{

box-shadow:0 0 0 0 rgba(139,92,246,.4);

}


70%{

box-shadow:0 0 0 15px rgba(139,92,246,0);

}


100%{

box-shadow:0 0 0 0 rgba(139,92,246,0);

}


}