@extends('layouts.app')
@section('title', 'Home')
@section('content')

<style>
    /* ===== LIGHT/DARK MODE VARIABLES ===== */
    .home-page {
        --home-bg: #0d0817;
        --home-bg-2: #120b21;
        --home-card: #181025;
        --home-card-2: #1c1330;
        --home-border: #2b2140;
        --home-text: #f5f3fa;
        --home-text-dim: #b7aec9;
        --home-text-dim2: #8b8299;
        --home-purple: #7c3aed;
        --home-purple-2: #8b3ff5;
        --home-purple-light: #a78bfa;
        --home-green: #22c55e;
        --home-gold: #facc15;
        --home-shadow: rgba(0, 0, 0, 0.5);
    }

    /* Light Mode Override */
    html:not(.dark) .home-page {
        --home-bg: #f8fafc;
        --home-bg-2: #f1f5f9;
        --home-card: #ffffff;
        --home-card-2: #f1f5f9;
        --home-border: #e2e8f0;
        --home-text: #0f172a;
        --home-text-dim: #64748b;
        --home-text-dim2: #94a3b8;
        --home-purple: #7c3aed;
        --home-purple-2: #8b3ff5;
        --home-purple-light: #8b5cf6;
        --home-green: #22c55e;
        --home-gold: #facc15;
        --home-shadow: rgba(0, 0, 0, 0.1);
    }

    /* ===== GLOBAL ===== */
    .home-page {
        background: var(--home-bg);
        color: var(--home-text);
        font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
        line-height: 1.5;
        padding-bottom: 40px;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .home-page a {
        text-decoration: none;
        color: inherit;
    }

    .home-page .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .feather-icon {
        width: 1em;
        height: 1em;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vertical-align: middle;
        flex-shrink: 0;
    }

    .star-icon {
        fill: var(--home-gold);
        stroke: var(--home-gold);
    }

    .stars-row {
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }
    .stars-row .feather-icon {
        width: 14px;
        height: 14px;
    }

    /* ===== HERO ===== */
    .hero-section {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 75% 20%, rgba(139, 63, 245, 0.25), transparent 55%),
            radial-gradient(circle at 20% 80%, rgba(139, 63, 245, 0.12), transparent 50%),
            var(--home-bg-2);
        padding: 50px 0 40px;
        border-radius: 0 0 30px 30px;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }

    .hero-copy .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(139, 63, 245, 0.15);
        border: 1px solid rgba(139, 63, 245, 0.3);
        color: var(--home-purple-light);
        font-size: 12px;
        font-weight: 700;
        padding: 6px 16px;
        border-radius: 30px;
        margin-bottom: 18px;
        letter-spacing: 0.3px;
    }

    .hero-copy h1 {
        font-size: clamp(36px, 5.5vw, 56px);
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 16px;
    }

    .hero-copy h1 .accent {
        color: var(--home-purple-2);
    }

    .hero-copy p {
        color: var(--home-text-dim);
        font-size: 15px;
        max-width: 440px;
        margin-bottom: 28px;
    }

    .hero-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 32px;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--home-purple-2), var(--home-purple));
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        padding: 14px 28px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(139, 63, 245, 0.4);
    }

    .btn-outline {
        background: transparent;
        border: 1px solid var(--home-border);
        color: var(--home-text);
        font-weight: 600;
        font-size: 14px;
        padding: 14px 28px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .btn-outline:hover {
        border-color: var(--home-purple-2);
        background: rgba(139, 63, 245, 0.08);
    }

    .hero-feats {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
    }

    .hero-feat {
        font-size: 12.5px;
        color: var(--home-text-dim2);
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .hero-feat .feather-icon {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        color: var(--home-purple-light);
    }

    .hero-feat strong {
        display: block;
        color: var(--home-text);
        font-weight: 700;
        font-size: 13px;
    }

    .hero-feat.green strong {
        color: var(--home-green);
    }
    .hero-feat.green .feather-icon {
        color: var(--home-green);
    }

    /* Hero Visual - Floating Cards */
    .hero-visual {
        position: relative;
        height: 400px;
    }

    .float-card {
        position: absolute;
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 16px;
        padding: 14px 16px;
        width: 170px;
        box-shadow: 0 20px 50px var(--home-shadow);
        backdrop-filter: blur(4px);
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .float-card .tag {
        font-size: 10px;
        color: var(--home-purple-light);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .float-card .tag .feather-icon {
        width: 12px;
        height: 12px;
    }

    .card-item {
        top: 20px;
        left: 0;
    }

    .card-order {
        top: 10px;
        left: 190px;
        width: 200px;
    }

    .card-currency {
        top: 20px;
        right: 0;
    }

    .thumb {
        width: 100%;
        height: 90px;
        border-radius: 10px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #fff;
    }

    .thumb-pink {
        background: linear-gradient(135deg, #e879f9, #c026d3);
    }
    .thumb-green {
        background: linear-gradient(135deg, #4ade80, #16a34a);
    }

    .item-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--home-text);
    }

    .item-price {
        font-size: 14px;
        font-weight: 800;
        color: var(--home-purple-light);
        margin-top: 2px;
    }

    .order-check {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--home-green);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;
        margin-bottom: 10px;
    }

    .order-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--home-text);
    }

    .order-sub {
        font-size: 11px;
        color: var(--home-text-dim2);
        margin: 4px 0 10px;
    }

    .view-order-btn {
        background: linear-gradient(135deg, var(--home-purple-2), var(--home-purple));
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 0;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
    }

    .view-order-btn:hover {
        opacity: 0.85;
    }

    .currency-amt {
        font-size: 20px;
        font-weight: 800;
        margin: 4px 0 2px;
        color: var(--home-text);
    }

    .currency-price {
        font-size: 14px;
        font-weight: 800;
        color: var(--home-purple-light);
    }

    .trust-card {
        position: absolute;
        bottom: 0;
        left: 100px;
        width: 270px;
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 14px;
        padding: 14px 18px;
        box-shadow: 0 20px 50px var(--home-shadow);
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .trust-card .trust-label {
        font-size: 10px;
        color: var(--home-text-dim2);
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .trust-card .trust-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 6px;
    }

    .trust-card .avatars {
        display: flex;
    }

    .trust-card .avatars span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--home-purple-2), #6d28d9);
        border: 2px solid var(--home-card);
        margin-left: -8px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .trust-card .avatars span:first-child {
        margin-left: 0;
    }

    .trust-count {
        font-size: 12px;
        font-weight: 700;
        color: var(--home-text);
    }

    .trust-card .rating-line {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--home-text-dim2);
        font-weight: 600;
        margin-top: 6px;
    }

    .ring {
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 480px;
        height: 480px;
        border: 1px solid rgba(139, 63, 245, 0.2);
        border-radius: 50%;
        pointer-events: none;
    }

    /* ===== SEARCH BAR ===== */
    .search-section {
        padding: 30px 0 10px;
    }

    .search-bar {
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 14px;
        padding: 6px 8px 6px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .search-bar input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--home-text);
        font-size: 14px;
        padding: 10px 8px;
    }

    .search-bar input::placeholder {
        color: var(--home-text-dim2);
    }

    .search-bar .search-icon {
        color: var(--home-text-dim2);
        font-size: 16px;
        display: flex;
    }

    .search-tabs {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .search-tabs button {
        background: var(--home-card-2);
        border: 1px solid var(--home-border);
        color: var(--home-text-dim);
        font-size: 12px;
        font-weight: 600;
        padding: 8px 14px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        cursor: pointer;
        transition: 0.2s;
    }

    .search-tabs button:first-child {
        background: var(--home-purple-2);
        color: #fff;
        border-color: var(--home-purple-2);
    }

    .search-tabs button:hover {
        border-color: var(--home-purple-light);
    }

    /* ===== CATEGORY GRID ===== */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
        margin-top: 20px;
    }

    .cat-card {
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 14px;
        padding: 20px 8px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .cat-card:hover {
        transform: translateY(-4px);
        border-color: var(--home-purple-2);
        box-shadow: 0 8px 24px rgba(139, 63, 245, 0.15);
    }

    .cat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin: 0 auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .cat-icon.purple {
        background: rgba(139, 63, 245, 0.15);
        color: var(--home-purple-light);
    }
    .cat-icon.blue {
        background: rgba(56, 189, 248, 0.15);
        color: #38bdf8;
    }
    .cat-icon.green {
        background: rgba(34, 197, 94, 0.15);
        color: var(--home-green);
    }
    .cat-icon.yellow {
        background: rgba(250, 204, 21, 0.15);
        color: var(--home-gold);
    }
    .cat-icon.red {
        background: rgba(248, 113, 113, 0.15);
        color: #f87171;
    }
    .cat-icon.pink {
        background: rgba(244, 114, 182, 0.15);
        color: #f472b6;
    }

    .cat-card .cat-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--home-text);
    }

    /* ===== FEATURED BANNER ===== */
    .featured-banner {
        margin-top: 32px;
    }

    .banner-inner {
        position: relative;
        overflow: hidden;
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 20px;
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        min-height: 220px;
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .banner-left {
        padding: 30px 34px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 2;
    }

    .banner-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(250, 204, 21, 0.12);
        color: var(--home-gold);
        font-size: 11px;
        font-weight: 700;
        padding: 4px 14px;
        border-radius: 20px;
        width: fit-content;
        margin-bottom: 12px;
        letter-spacing: 0.3px;
    }

    .banner-tag .feather-icon {
        width: 12px;
        height: 12px;
    }

    .banner-left h2 {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 8px;
        color: var(--home-text);
    }

    .banner-left h2 .hl {
        color: #c8ff3d;
    }

    .banner-left p {
        color: var(--home-text-dim);
        font-size: 13px;
        max-width: 380px;
        margin-bottom: 16px;
    }

    .banner-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 80px;
        color: var(--home-purple-light);
        opacity: 0.6;
        background: radial-gradient(circle, rgba(139, 63, 245, 0.15), transparent 70%);
    }

    .banner-actions {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 20px 16px 20px 20px;
        background: rgba(13, 8, 23, 0.6);
        z-index: 3;
        backdrop-filter: blur(4px);
    }

    html:not(.dark) .banner-actions {
        background: rgba(255, 255, 255, 0.85);
    }

    .banner-actions button {
        background: var(--home-card);
        border: 1px solid var(--home-border);
        color: var(--home-text);
        font-size: 12px;
        font-weight: 600;
        padding: 10px 14px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
        cursor: pointer;
        transition: 0.2s;
    }

    .banner-actions button:hover {
        border-color: var(--home-purple-2);
        background: var(--home-card-2);
    }

    .banner-actions button .feather-icon {
        color: var(--home-purple-light);
    }

    /* ===== SECTIONS ===== */
    .section {
        padding: 40px 0 0;
    }

    .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .section-head h3 {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: var(--home-text-dim);
        text-transform: uppercase;
    }

    .view-all {
        font-size: 13px;
        color: var(--home-purple-light);
        font-weight: 600;
        transition: 0.2s;
    }

    .view-all:hover {
        color: var(--home-purple-2);
    }

    /* ===== GAME ICON ===== */
    .game-icon-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 12px;
        border-radius: 12px;
    }

    /* ===== GAMES GRID ===== */
    .games-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 14px;
    }

    .game-card {
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
    }

    .game-card:hover {
        transform: translateY(-4px);
    }

    .game-thumb {
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 12px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--home-purple-light);
        border: 1px solid var(--home-border);
        background: var(--home-card);
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .game-name {
        font-size: 12.5px;
        font-weight: 600;
        margin-bottom: 2px;
        color: var(--home-text);
    }

    .mini-stars .feather-icon {
        width: 10px;
        height: 10px;
    }

    /* ===== PRODUCTS GRID ===== */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }

    .product-card {
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 14px;
        padding: 14px;
        position: relative;
        transition: all 0.3s ease;
    }

    .product-card:hover {
        transform: translateY(-6px);
        border-color: var(--home-purple-2);
        box-shadow: 0 12px 30px var(--home-shadow);
    }

    .product-thumb {
        width: 100%;
        height: 110px;
        border-radius: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--home-card-2);
        border: 1px solid var(--home-border);
        overflow: hidden;
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .product-thumb-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }

    .product-card:hover .product-thumb-img {
        transform: scale(1.05);
    }

    .stock-badge {
        position: absolute;
        top: 18px;
        right: 18px;
        background: rgba(34, 197, 94, 0.2);
        color: var(--home-green);
        font-size: 10px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 6px;
    }

    .product-name {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--home-text);
    }

    .product-cat {
        font-size: 11.5px;
        color: var(--home-text-dim2);
        margin-bottom: 6px;
    }

    .product-rating {
        font-size: 11.5px;
        color: var(--home-text-dim);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .product-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .price {
        font-size: 16px;
        font-weight: 800;
        color: var(--home-text);
    }

    .price .compare {
        font-size: 12px;
        color: var(--home-text-dim2);
        text-decoration: line-through;
        font-weight: 500;
        margin-left: 6px;
    }

    .price .discount {
        background: var(--home-green);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 6px;
    }

    .buy-btn {
        background: linear-gradient(135deg, var(--home-purple-2), var(--home-purple));
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 16px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: 0.3s;
    }

    .buy-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(139, 63, 245, 0.35);
    }

    /* ===== TRUST STRIP ===== */
    .trust-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 40px 0 10px;
    }

    .trust-item {
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 14px;
        padding: 16px 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .trust-item .ic {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .trust-item h4 {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--home-text);
    }

    .trust-item p {
        font-size: 11.5px;
        color: var(--home-text-dim2);
    }

    /* ===== STATS BAND ===== */
    .stats-band {
        margin: 32px 0 10px;
    }

    .stats-inner {
        background: linear-gradient(135deg, rgba(139, 63, 245, 0.2), rgba(139, 63, 245, 0.06));
        border: 1px solid rgba(139, 63, 245, 0.25);
        border-radius: 18px;
        padding: 28px 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        text-align: center;
    }

    .stat h2 {
        font-size: 30px;
        font-weight: 800;
        color: var(--home-purple-light);
    }

    .stat p {
        font-size: 12.5px;
        color: var(--home-text-dim);
        margin-top: 4px;
    }

    /* ===== TESTIMONIALS ===== */
    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .testi-card {
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 14px;
        padding: 18px;
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .testi-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .testi-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--home-purple-2), #6d28d9);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .testi-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--home-text);
    }

    .testi-text {
        font-size: 12.5px;
        color: var(--home-text-dim);
        line-height: 1.5;
    }

    .testi-row-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .arrow-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--home-card);
        border: 1px solid var(--home-border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--home-text-dim);
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
        flex-shrink: 0;
    }

    .arrow-btn:hover {
        border-color: var(--home-purple-2);
        color: var(--home-text);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1100px) {
        .hero-grid {
            grid-template-columns: 1fr;
        }
        .hero-visual {
            display: none;
        }
        .category-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        .games-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        .products-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .trust-strip {
            grid-template-columns: repeat(2, 1fr);
        }
        .stats-inner {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .testimonials-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .banner-inner {
            grid-template-columns: 1fr;
        }
        .banner-actions {
            position: static;
            width: auto;
            background: transparent;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 0 34px 20px;
            gap: 8px;
        }
        html:not(.dark) .banner-actions {
            background: transparent;
        }
        .banner-actions button {
            flex: 1;
            min-width: 120px;
        }
        .banner-visual {
            display: none;
        }
        .banner-left {
            padding: 24px 28px;
        }
        .banner-left h2 {
            font-size: 24px;
        }
    }

    @media (max-width: 640px) {
        .hero-copy h1 {
            font-size: 28px;
        }
        .category-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .games-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .products-grid {
            grid-template-columns: 1fr;
        }
        .trust-strip {
            grid-template-columns: 1fr;
        }
        .stats-inner {
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }
        .testimonials-grid {
            grid-template-columns: 1fr;
        }
        .search-tabs button span {
            display: none;
        }
        .search-bar {
            flex-wrap: wrap;
            padding: 8px;
        }
        .search-tabs {
            width: 100%;
            justify-content: center;
        }
        .banner-left h2 {
            font-size: 20px;
        }
        .banner-left p {
            font-size: 12px;
        }
        .banner-actions button {
            font-size: 11px;
            padding: 8px 12px;
            min-width: 80px;
        }
    }
</style>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
<div class="home-page">

    <!-- ===== HERO ===== -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-grid">
                <div class="hero-copy">
                    <div class="eyebrow">
                        <i data-feather="award" class="feather-icon"></i>
                        THE #1 GAMING MARKETPLACE
                    </div>
                    <h1>Everything<br><span class="accent">Gamers</span> Need.</h1>
                    <p>Accounts, Items, Top Ups, Boosting, Currency and more – all in one place. Instant delivery. 100% safe.</p>
                    <div class="hero-btns">
                        <a href="/shop" class="btn-primary">
                            Explore Store <i data-feather="arrow-right" class="feather-icon"></i>
                        </a>
                        <a href="/game/steal-a-brainrot" class="btn-outline">
                            Steal A Brainrot <i data-feather="arrow-right" class="feather-icon"></i>
                        </a>
                    </div>
                    <div class="hero-feats">
                        <div class="hero-feat">
                            <i data-feather="zap" class="feather-icon"></i>
                            <span><strong>Instant Delivery</strong>1-5 Min</span>
                        </div>
                        <div class="hero-feat green">
                            <i data-feather="shield" class="feather-icon"></i>
                            <span><strong>100% Safe</strong>Secure &amp; Trusted</span>
                        </div>
                        <div class="hero-feat">
                            <i data-feather="clock" class="feather-icon"></i>
                            <span><strong>24/7 Support</strong>We're here!</span>
                        </div>
                    </div>
                </div>

                <div class="hero-visual">
                    <div class="ring"></div>

                    <div class="float-card card-item">
                        <div class="tag"><i data-feather="package" class="feather-icon"></i> ITEM</div>
                        <div class="thumb thumb-pink"><i data-feather="box" class="feather-icon"></i></div>
                        <div class="item-name">Rainbow Brainrot</div>
                        <div class="item-price">$15.00</div>
                    </div>

                    <div class="float-card card-order">
                        <div class="tag"><i data-feather="check-circle" class="feather-icon"></i> ORDER COMPLETED</div>
                        <div class="order-check"><i data-feather="check" class="feather-icon"></i></div>
                        <div class="order-title">Your order has been</div>
                        <div class="order-sub">delivered successfully!</div>
                        <div class="view-order-btn">View Order</div>
                    </div>

                    <div class="float-card card-currency">
                        <div class="tag"><i data-feather="dollar-sign" class="feather-icon"></i> CURRENCY</div>
                        <div class="currency-amt">999M Cash</div>
                        <div class="thumb thumb-green"><i data-feather="dollar-sign" class="feather-icon"></i></div>
                        <div class="currency-price">$8.99</div>
                    </div>

                    <div class="trust-card">
                        <div class="trust-label">TRUSTED BY THOUSANDS</div>
                        <div class="trust-row">
                            <div class="avatars">
                                <span><i data-feather="user" class="feather-icon"></i></span>
                                <span><i data-feather="user" class="feather-icon"></i></span>
                                <span><i data-feather="user" class="feather-icon"></i></span>
                            </div>
                            <div class="trust-count">50,000+ Customers</div>
                        </div>
                        <div class="rating-line">
                            <span class="stars-row">
                                <i data-feather="star" class="feather-icon star-icon"></i>
                                <i data-feather="star" class="feather-icon star-icon"></i>
                                <i data-feather="star" class="feather-icon star-icon"></i>
                                <i data-feather="star" class="feather-icon star-icon"></i>
                                <i data-feather="star" class="feather-icon star-icon"></i>
                            </span>
                            4.9 out of 5
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== SEARCH & CATEGORIES ===== -->
    <section class="search-section">
        <div class="container">
            <div class="search-bar">
                <span class="search-icon"><i data-feather="search" class="feather-icon"></i></span>
                <input type="text" placeholder="Search anything..." id="searchInput">
                <div class="search-tabs">
                    <button><i data-feather="user" class="feather-icon"></i> <span>Accounts</span></button>
                    <button><i data-feather="tag" class="feather-icon"></i> <span>Items</span></button>
                    <button><i data-feather="zap" class="feather-icon"></i> <span>Top Up</span></button>
                    <button><i data-feather="dollar-sign" class="feather-icon"></i> <span>Currency</span></button>
                    <button><i data-feather="trending-up" class="feather-icon"></i> <span>Boosting</span></button>
                </div>
            </div>

            <div class="category-grid">
                <a href="#" class="cat-card">
                    <div class="cat-icon purple"><i data-feather="user" class="feather-icon"></i></div>
                    <div class="cat-name">Accounts</div>
                </a>
                <a href="#" class="cat-card">
                    <div class="cat-icon blue"><i data-feather="tag" class="feather-icon"></i></div>
                    <div class="cat-name">Items</div>
                </a>
                <a href="#" class="cat-card">
                    <div class="cat-icon green"><i data-feather="dollar-sign" class="feather-icon"></i></div>
                    <div class="cat-name">Currency</div>
                </a>
                <a href="#" class="cat-card">
                    <div class="cat-icon yellow"><i data-feather="trending-up" class="feather-icon"></i></div>
                    <div class="cat-name">Boosting</div>
                </a>
                <a href="#" class="cat-card">
                    <div class="cat-icon red"><i data-feather="zap" class="feather-icon"></i></div>
                    <div class="cat-name">Top Up</div>
                </a>
                <a href="#" class="cat-card">
                    <div class="cat-icon pink"><i data-feather="gift" class="feather-icon"></i></div>
                    <div class="cat-name">Gift Cards</div>
                </a>
            </div>
        </div>
    </section>

    <!-- ===== FEATURED BANNER ===== -->
    <div class="container">
        <div class="featured-banner">
            <div class="banner-inner">
                <div class="banner-left">
                    <div class="banner-tag"><i data-feather="star" class="feather-icon"></i> FEATURED GAME</div>
                    <h2>STEAL A <span class="hl">BRAINROT</span></h2>
                    <p>Buy Items, Accounts, Currency &amp; Boosting for Steal A Brainrot with instant delivery!</p>
                    <a href="/game/steal-a-brainrot" class="btn-primary" style="width:fit-content;">
                        Shop Now <i data-feather="arrow-right" class="feather-icon"></i>
                    </a>
                </div>
                <div class="banner-visual">
                    <i data-feather="gamepad-2" class="feather-icon" style="width:80px;height:80px;"></i>
                </div>
                <div class="banner-actions">
                    <button><i data-feather="tag" class="feather-icon"></i> Buy Items</button>
                    <button><i data-feather="user" class="feather-icon"></i> Buy Accounts</button>
                    <button><i data-feather="dollar-sign" class="feather-icon"></i> Buy Currency</button>
                    <button><i data-feather="trending-up" class="feather-icon"></i> Boosting Service</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== POPULAR GAMES ===== -->
    <section class="section">
        <div class="container">
            <div class="section-head">
                <h3>POPULAR GAMES</h3>
                <a href="/games" class="view-all">View All</a>
            </div>
            <div class="games-grid">
                @foreach($games as $game)
                <a href="/game/{{ $game->slug }}" class="game-card">
                    <div class="game-thumb">
                        @if($game->icon)
                            <img src="{{ asset($game->icon) }}" alt="{{ $game->name }}" class="game-icon-img">
                        @else
                            <i data-feather="gamepad-2" class="feather-icon"></i>
                        @endif
                    </div>
                    <div class="game-name">{{ $game->name }}</div>
                   
                </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- ===== BEST SELLERS ===== -->
    <section class="section">
        <div class="container">
            <div class="section-head">
                <h3>BEST SELLERS</h3>
                <a href="/shop" class="view-all">View All</a>
            </div>
            <div class="products-grid">
                @foreach($featured as $product)
                <div class="product-card">
                    <span class="stock-badge"><i data-feather="check-circle" class="feather-icon" style="width:10px;height:10px;"></i> In Stock</span>
                    <div class="product-thumb">
                        @if($product->image)
                            <img src="{{ asset($product->image) }}" alt="{{ $product->name }}" class="product-thumb-img">
                        @else
                            <i data-feather="box" class="feather-icon"></i>
                        @endif
                    </div>
                    <div class="product-name">{{ $product->name }}</div>
                    <div class="product-cat">{{ $product->game ? $product->game->name : 'General' }}</div>
                  
                    <div class="product-foot">
                        <span class="price">
                            @if($product->sale_price && $product->sale_price < $product->price)
                                {{ currency($product->sale_price) }}
                                <span class="compare">{{ currency($product->price) }}</span>
                                @php
                                    $discount = round((($product->price - $product->sale_price) / $product->price) * 100);
                                @endphp
                                <span class="discount">-{{ $discount }}%</span>
                            @else
                                {{ currency($product->price) }}
                            @endif
                        </span>
                        <form method="POST" action="/cart/add/{{ $product->id }}" style="display:inline;">
                            @csrf
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="buy-btn">Buy Now</button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- ===== TRUST STRIP ===== -->
    <section class="container">
        <div class="trust-strip">
            <div class="trust-item">
                <div class="ic" style="background:rgba(139,63,245,0.15);color:var(--home-purple-light);">
                    <i data-feather="zap" class="feather-icon"></i>
                </div>
                <div>
                    <h4>Instant Delivery</h4>
                    <p>Orders delivered in 1-5 minutes</p>
                </div>
            </div>
            <div class="trust-item">
                <div class="ic" style="background:rgba(56,189,248,0.15);color:#38bdf8;">
                    <i data-feather="shield" class="feather-icon"></i>
                </div>
                <div>
                    <h4>100% Safe &amp; Secure</h4>
                    <p>Your account is always protected</p>
                </div>
            </div>
            <div class="trust-item">
                <div class="ic" style="background:rgba(250,204,21,0.15);color:var(--home-gold);">
                    <i data-feather="star" class="feather-icon"></i>
                </div>
                <div>
                    <h4>Trusted by 50,000+</h4>
                    <p>Thousands of gamers trust BrendonStores</p>
                </div>
            </div>
            <div class="trust-item">
                <div class="ic" style="background:rgba(34,197,94,0.15);color:var(--home-green);">
                    <i data-feather="headphones" class="feather-icon"></i>
                </div>
                <div>
                    <h4>24/7 Support</h4>
                    <p>Our support team is always here to help</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== STATS BAND ===== -->
    <section class="container">
        <div class="stats-band">
            <div class="stats-inner">
                <div class="stat"><h2>100K+</h2><p>Orders Completed</p></div>
                <div class="stat"><h2>50K+</h2><p>Happy Customers</p></div>
                <div class="stat"><h2>500+</h2><p>Products Available</p></div>
                <div class="stat"><h2>99.8%</h2><p>Positive Rating</p></div>
            </div>
        </div>
    </section>


</div>

<!-- Feather Icons -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        feather.replace();
    });
</script>

@endsection