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

.hero{
    position:relative;
    overflow:hidden;

    min-height:550px;

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

    padding:80px;

    margin-top:30px;

    border:1px solid var(--border);
    border-radius:24px;

    background:
    radial-gradient(circle at 70% 20%, rgba(124,92,255,.20), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(124,92,255,.10), transparent 35%),
    #111522;
}

.hero::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    background:#7C5CFF;

    filter:blur(200px);

    opacity:.08;

    top:-250px;
    right:-250px;

    border-radius:50%;
}

.hero-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:900px;

    text-align:center;
}

.hero-badge{
    display:inline-block;

    padding:10px 16px;

    border-radius:999px;

    background:rgba(124,92,255,.15);

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

    color:#B9A8FF;

    margin-bottom:25px;

    font-size:14px;
}

.hero-title{
    font-size:72px;
    line-height:1.05;

    margin-bottom:20px;
}

.hero-subtitle{
    color:var(--muted);

    font-size:20px;

    max-width:700px;

    margin:0 auto 35px;
}

.hero-search{
    display:flex;

    max-width:700px;

    margin:0 auto 35px;
}

.hero-search input{
    flex:1;

    height:64px;

    border:none;
    outline:none;

    background:#1A1F2D;

    color:#fff;

    padding:0 24px;

    font-size:16px;

    border-radius:16px 0 0 16px;
}

.hero-search button{
    width:140px;

    border:none;

    background:#7C5CFF;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    border-radius:0 16px 16px 0;
}

.hero-search button:hover{
    opacity:.9;
}

.hero-stats{
    display:flex;

    justify-content:center;

    gap:50px;

    margin-top:20px;
}

.hero-stat-number{
    font-size:32px;

    font-weight:700;

    color:#fff;
}

.hero-stat-label{
    color:var(--muted);

    font-size:14px;
}

.popular-tags{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;
}

.popular-tags a{
    background:#1A1F2D;

    border:1px solid var(--border);

    color:var(--muted);

    padding:8px 14px;

    border-radius:999px;

    transition:.3s;
}

.popular-tags a:hover{
    border-color:#7C5CFF;
    color:#fff;
}

/* ==================================
   SECTIONS
================================== */

.section{
    margin-top:80px;
}

.section-title{
    font-size:36px;
    margin-bottom:30px;
}

/* ==================================
   CARDS GRID
================================== */

.cards-grid{
    display:grid;

    grid-template-columns:
    repeat(4,minmax(0,1fr));

    gap:24px;
}

/* ==================================
   TABLET
================================== */

@media(max-width:1200px){

    .hero-title{
        font-size:56px;
    }

    .cards-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}

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

@media(max-width:768px){

    .hero{
        padding:40px 25px;
        min-height:auto;
    }

    .hero-title{
        font-size:40px;
    }

    .hero-subtitle{
        font-size:16px;
    }

    .hero-search{
        flex-direction:column;
    }

    .hero-search input{
        border-radius:16px;
    }

    .hero-search button{
        width:100%;
        height:56px;

        margin-top:10px;

        border-radius:16px;
    }

    .hero-stats{
        flex-wrap:wrap;
        gap:25px;
    }

    .cards-grid{
        grid-template-columns:1fr;
    }

}