/* =========================================================
    ROOT
    ========================================================= */

    :root{

        --primary:#eb7925;
        --primary-dark:#d85f1d;

        --bg:#f8fafc;
        --card:#ffffff;

        --text:#0f172a;
        --muted:#64748b;

        --border:#e2e8f0;

        --shadow:
            0 10px 30px rgba(15,23,42,.05);

    }

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

    .hero-section{

        background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e293b 100%
        );

        color:#fff;

        padding:
        90px 0 80px;

        position:relative;
        overflow:hidden;
    }

    .hero-section::before{

        content:"";

        position:absolute;

        width:700px;
        height:700px;

        background:
        radial-gradient(
            rgba(37,99,235,.25),
            transparent 70%
        );

        top:-300px;
        right:-200px;
    }

    .hero-title{

        font-size:52px;
        font-weight:800;
        line-height:1.15;

        margin-bottom:20px;
    }

    .hero-subtitle{

        font-size:18px;
        color:rgba(255,255,255,.75);

        max-width:760px;
    }


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

    .section-space{
        padding:70px 0;
    }

    .section-title{

        font-size:34px;
        font-weight:800;

        margin-bottom:10px;
    }

    .section-desc{

        color:var(--muted);
        margin-bottom:40px;
    }

    /* =========================================================
    CATEGORY GRID
    ========================================================= */

    .category-grid{

        display:grid;

        grid-template-columns:
        repeat(auto-fill,minmax(280px,1fr));

        gap:24px;
    }

    /* =========================================================
    CATEGORY CARD
    ========================================================= */

    .category-card{

        background:var(--card);

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

        border-radius:24px;

        padding:28px;

        text-decoration:none;

        color:inherit;

        transition:.35s ease;

        position:relative;

        overflow:hidden;
    }

    .category-card::before{

        content:"";

        position:absolute;

        width:160px;
        height:160px;

        background:
        radial-gradient(
            rgba(37,99,235,.08),
            transparent 70%
        );

        top:-80px;
        right:-80px;
    }   
     
    .category-card:hover{

        transform:
        translateY(-8px);

        box-shadow:
        0 20px 50px rgba(42, 21, 15, 0.08);

        border-color:
        rgba(235, 126, 37, 0.3);
    }

    /* =========================================================
    ICON
    ========================================================= */

    .category-icon{

        width:100px;
        height:100px;

        border-radius:20px;

        background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

        display:flex;

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

        font-size:30px;

        color:var(--primary);

        margin-bottom:22px;
    }

    /* =========================================================
    TEXT
    ========================================================= */

    .category-title{

        font-size:22px;
        font-weight:800;

        margin-bottom:10px;
    }

    .category-description{

        color:var(--muted);

        font-size:15px;
        line-height:1.7;

        min-height:5px;
    }

    /* =========================================================
    BADGE
    ========================================================= */

    .product-count{

        display:inline-flex;

        align-items:center;

        gap:8px;

        margin-top:20px;

        padding:
        10px 16px;

        border-radius:999px;

        background:#f1f5f9;

        font-size:13px;
        font-weight:700;

        color:#334155;
    }

    /* =========================================================
    POPULAR TAGS
    ========================================================= */

    .popular-tags{

        display:flex;
        flex-wrap:wrap;

        gap:12px;
    }

    .popular-tags a{

        text-decoration:none;

        padding:
        10px 16px;

        border-radius:999px;

        background:#fff;

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

        color:var(--text);

        font-weight:600;

        transition:.2s ease;
    }

    .popular-tags a:hover{

        background:var(--primary);
        color:#fff;
        border-color:var(--primary);
    }


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

    @media(max-width:768px){

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

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

        .section-title{
            font-size:28px;
        }

        .category-grid{
            gap:16px;
        }

        .category-card{
            padding:22px;
            border-radius:20px;
        }

    }