@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');


    body {
        background-color: var(--soft-bg);
        color: var(--slate-900);
        overflow-x: hidden;
    }

    /* --- Hero Section: Airy & Light --- */
    .hero-niche {
        padding: 160px 5% 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: radial-gradient(circle at center, #fff 0%, #f1f5f9 100%);
    }

    .hero-niche h1 {
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: 900;
        letter-spacing: -1.5px;
        line-height: 1.2;
    }

    /* --- Floating Badge --- */
    .float-badge {
        background: white;
        padding: 6px 16px;
        border-radius: 100px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.03);
        font-size: 12px;
        font-weight: 800;
        color: var(--brand-red);
        border: 1px solid #f1f5f9;
        margin-bottom: 20px;
    }

    /* --- Category Bubbles (Minimal) --- */
    .cat-bubble {
        width: 100px;
        text-align: center;
        transition: transform 0.3s;
    }
    .cat-bubble:hover { transform: translateY(-5px); }
    .cat-circle {
        width: 80px; height: 80px;
        border-radius: 50%;
        background: white;
        border: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    }
    .cat-circle img { width: 60%; object-fit: contain; }

    /* --- Latest Products Stage --- */
    .product-stage-sm {
        background: white;
        border: 1px solid #f1f5f9;
        border-radius: 24px;
        padding: 15px;
        transition: all 0.3s ease;
    }
    .product-stage-sm:hover {
        border-color: var(--brand-red);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    }
    .img-box-sm {
        aspect-ratio: 1/1;
        background: #f8fafc;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    .img-box-sm img { width: 75%; transition: transform 0.4s; }
    .product-stage-sm:hover img { transform: scale(1.1); }

    /* --- Video Section --- */
    .video-container {
        width: 100%;
        padding: 80px 5%;
        position: relative;
    }
    .video-glass {
        width: 100%;
        aspect-ratio: 21/9;
        background: #000;
        border-radius: 40px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 30px 60px -15px rgba(0,0,0,0.3);
    }
    .video-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .play-btn {
        width: 80px; height: 80px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s;
    }
    .play-btn:hover { transform: scale(1.1); }

    /* --- Trusted Section (Logos) --- */
    .logo-strip {
        display: flex;
        justify-content: center;
        gap: 60px;
        opacity: 0.5;
        filter: grayscale(1);
        transition: 0.3s;
    }
    .logo-strip:hover { opacity: 1; filter: grayscale(0); }
    .logo-strip img { height: 35px; object-fit: contain; }

    /* --- Helpers --- */
    .section-title { font-size: 24px; font-weight: 900; letter-spacing: -1px; }