body {
            font-family: "Mulish", sans-serif;
            background-color: #FFFFFF;
            color: #16423C;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* 🧭 FLOATING CENTER HEADER */
        .floating-header {
            position: fixed;
            top: 2rem;
            left: 50%;
            transform: translateX(-150%); /* Initial state for animation */
            width: 90%;
            max-width: 1000px;
            background: white;
            z-index: 1000;
            padding: 0.75rem 2rem;
            border-radius: 100px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            opacity: 0;
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
        }
        .header-active {
            transform: translateX(-50%);
            opacity: 1;
        }

        /* 🎬 HERO */
        .hero-video-container {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }
        .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            filter: grayscale(0.2) brightness(0.8);
        }
        .hero-card {
            position: absolute;
            top: 15%;
            left: -100%;
            background: white;
            padding: 3rem;
            max-width: 450px;
            z-index: 10;
            transition: left 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .hero-card.active {
            left: 5%;
        }

        /* Dividers */
        .clinical-divider {
            height: 1px;
            background: #16423C;
            width: 0;
            transition: width 1.5s ease;
            margin: 2rem 0;
        }
        .reveal.active .clinical-divider {
            width: 100%;
        }

        /* Animations */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Dot Slider */
        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(22, 66, 60, 0.2);
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .dot.active {
            background: #16423C;
            width: 24px;
            border-radius: 4px;
        }

        /* Page transitions */
        #main-view { transition: opacity 0.4s ease; }

        .btn-outline {
            border: 1px solid black;
            padding: 0.6rem 1.5rem;
            text-transform: uppercase;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            transition: all 0.3s ease;
        }
        .btn-outline:hover {
            background: black;
            color: white;
        }

        .cart-dot {
            position: absolute;
            top: -5px;
            right: -10px;
            background: #D2FF72;
            color: #16423C;
            font-size: 10px;
            font-weight: 900;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        #mobileMenu {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}

#mobileMenu:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}