/* ==================================
   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;
    }

}


/* ============================================================
   HP SECTION WRAPPER
============================================================ */

.hp-section {
    padding: 64px 0;
    border-bottom: 1px solid var(--border);
}

.hp-section:last-child {
    border-bottom: none;
}

/* ============================================================
   QUICK NAV TILES
============================================================ */

.hp-quick-nav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    padding: 28px 0;
}

.hp-nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 14px;
    background: #171B26;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .3s;
}

.hp-nav-tile:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(124, 92, 255, .2);
}

.hp-nav-tile-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 14px;
    border: 1px solid transparent;
}

.hp-nav-tile-label {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.hp-nav-tile-sub {
    font-size: 11px;
    color: var(--muted);
}

/* ============================================================
   TOP RATED RANKED ROWS
============================================================ */

.hp-ranked-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #171B26;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    transition: .25s;
}

.hp-ranked-row:hover {
    border-color: var(--accent);
    background: #1B2030;
}

.hp-ranked-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    min-width: 28px;
    text-align: center;
}

.hp-ranked-thumb {
    width: 38px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0F1117;
}

.hp-ranked-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-ranked-info {
    flex: 1;
    min-width: 0;
}

.hp-ranked-title {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-ranked-meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.hp-ranked-rating {
    font-size: 14px;
    font-weight: 700;
    color: #FFD54A;
    flex-shrink: 0;
}

/* ============================================================
   GENRE GRID
============================================================ */

.hp-genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hp-genre-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #171B26;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}

.hp-genre-tag:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.hp-genre-icon {
    font-size: 15px;
}

.hp-genre-count {
    font-size: 11px;
    color: var(--muted);
    background: #0F1117;
    padding: 2px 7px;
    border-radius: 999px;
}

.hp-genre-tag:hover .hp-genre-count {
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .7);
}

/* ============================================================
   NEWS GRID
============================================================ */

.hp-news-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 22px;
    align-items: start;
}

.hp-news-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-news-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #171B26;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    transition: .2s;
}

.hp-news-item:hover {
    border-color: var(--accent);
    background: #1B2030;
}

.hp-news-item-thumb {
    width: 68px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0F1117;
}

.hp-news-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-news-item-body {
    flex: 1;
    min-width: 0;
}

.hp-news-item-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hp-news-item-date {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

/* ============================================================
   STATS BANNER
============================================================ */

.hp-stats-banner {
    background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(232, 121, 249, .05));
    border-top: 1px solid rgba(124, 92, 255, .2);
    border-bottom: none;
    border-radius: 24px;
    margin-bottom: 60px;
}

.hp-stats-inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

.hp-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px;
    border-right: 1px solid rgba(124, 92, 255, .15);
    text-align: center;
}

.hp-stat-item:last-child {
    border-right: none;
}

.hp-stat-icon {
    font-size: 26px;
    margin-bottom: 2px;
}

.hp-stat-num {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hp-stat-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}