:root{
        --primary:#1a2a6c;
        --primary-dark:#0d1b4c;
        --accent:#f5a623;
        --accent-dark:#d48806;

        --bg:#f4f7fb;
        --card:#ffffff;
        --border:#e9edf5;
        --text:#111827;
        --muted:#6b7280;
    }

    body{
        background:var(--bg);
        color:var(--text);
    }

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

    .modern-hero{
        position:relative;
        overflow:hidden;
        border-radius:28px;
        padding:48px;
        margin-bottom:32px;

        background:
        radial-gradient(circle at top right,
        rgba(245,166,35,.18),
        transparent 30%),

        linear-gradient(135deg,
        var(--primary-dark),
        var(--primary));

        color:#fff;
    }

    .modern-hero::before{
        content:'';
        position:absolute;
        inset:0;
        background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
        background-size:30px 30px;
        opacity:.3;
    }

    .hero-content{
        position:relative;
        z-index:2;
        max-width:720px;
    }

    .hero-chip{
        display:inline-flex;
        align-items:center;
        gap:8px;

        padding:10px 16px;
        border-radius:999px;

        background:rgba(255,255,255,.1);
        backdrop-filter:blur(14px);

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

        font-size:.82rem;
        font-weight:600;

        margin-bottom:22px;
    }

    .modern-hero h1{
        font-size:clamp(2.1rem,4vw,4rem);
        font-weight:800;
        line-height:1.05;
        letter-spacing:-1.5px;
        margin-bottom:18px;
    }

    .modern-hero p{
        color:rgba(255,255,255,.82);
        font-size:1rem;
        line-height:1.8;
        margin-bottom:28px;
    }

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

    .hero-stat{
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.1);
        backdrop-filter:blur(12px);

        border-radius:18px;

        padding:16px 18px;
        min-width:140px;
    }

    .hero-stat h3{
        margin:0;
        font-size:1.5rem;
        font-weight:800;
    }

    .hero-stat span{
        color:rgba(255,255,255,.72);
        font-size:.82rem;
    }

    /* =========================
       TOP TOOLBAR
    ==========================*/

    .toolbar{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:16px;
        flex-wrap:wrap;

        margin-bottom:28px;
    }

    .toolbar-left h5{
        margin:0;
        font-size:1.1rem;
        font-weight:700;
    }

    .toolbar-left p{
        margin:0;
        color:var(--muted);
        font-size:.9rem;
    }

    .toolbar-actions{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .modern-select{
        border:1px solid var(--border);
        border-radius:14px;
        background:#fff;
        padding:12px 16px;
        min-width:180px;
        font-size:.9rem;
        box-shadow:none !important;
    }

    /* =========================
       PRODUCT CARD
    ==========================*/

    .product-card{
        position:relative;

        background:rgba(255,255,255,.78);
        backdrop-filter:blur(14px);

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

        border-radius:24px;

        overflow:hidden;

        transition:.35s ease;

        height:100%;
    }

    .product-card:hover{
        transform:translateY(-8px);
        box-shadow:
        0 20px 40px rgba(15,23,42,.08);
    }

    /* IMAGE */

    .product-image-wrap{
        position:relative;

        background:
        linear-gradient(to bottom,
        #f8fafc,
        #eef2f7);

        padding:22px;
    }

    .product-image{
        width:100%;
        height:260px;
        object-fit:contain;

        transition:.4s ease;
    }

    .product-card:hover .product-image{
        transform:scale(1.04);
    }

    /* floating tag */

    .floating-tag{
        position:absolute;
        top:18px;
        left:18px;

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

        border-radius:999px;

        padding:8px 14px;

        font-size:.72rem;
        font-weight:700;

        box-shadow:0 10px 25px rgba(0,0,0,.06);
    }

    /* content */

    .product-content{
        padding:22px;
    }

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

        margin-bottom:14px;
    }

    .item-no{
        color:var(--muted);
        font-size:.78rem;
        font-weight:600;
    }

    .connectivity{
        display:flex;
        align-items:center;
        gap:6px;

        font-size:.76rem;
        font-weight:700;

        color:var(--primary);
    }

    .product-title{
        font-size:1.08rem;
        font-weight:800;
        line-height:1.4;
        margin-bottom:14px;
        color:var(--text);
    }

    .product-description{
        color:var(--muted);
        font-size:.88rem;
        line-height:1.7;

        margin-bottom:20px;

        min-height:52px;
    }

    /* feature row */

    .feature-row{
        display:flex;
        gap:10px;
        flex-wrap:wrap;

        margin-bottom:22px;
    }

    .feature-pill{
        display:flex;
        align-items:center;
        gap:6px;

        background:#f8fafc;

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

        padding:8px 12px;
        border-radius:999px;

        font-size:.72rem;
        font-weight:600;

        color:#475569;
    }

    /* CTA */

    .btn-view{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;

        width:100%;

        border:none;

        border-radius:16px;

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

        padding:14px 18px;

        text-decoration:none;

        font-weight:700;
        font-size:.92rem;

        transition:.3s ease;
    }

    .btn-view:hover{
        background:var(--accent);
        color:#fff;

        transform:translateY(-2px);
    }

    .btn-view i{
        transition:.3s ease;
    }

    .btn-view:hover i{
        transform:translateX(4px);
    }

    /* EMPTY */

    .empty-state{
        background:#fff;
        border-radius:24px;
        padding:70px 30px;
        text-align:center;
    }

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

    @media(max-width:768px){

        .modern-hero{
            padding:32px 24px;
            border-radius:22px;
        }

        .hero-stats{
            gap:10px;
        }

        .hero-stat{
            flex:1;
            min-width:unset;
        }

        .product-image{
            height:220px;
        }

        .product-content{
            padding:18px;
        }

    }