:root {
            --accent: #BED754;
            --secondary: #5C5470;
            --black: #000000;
            --white: #FFFFFF;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            background-color: var(--white);
            color: var(--black);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .open-sans-300 { font-weight: 300; }
        .open-sans-400 { font-weight: 400; }
        .open-sans-600 { font-weight: 600; }
        .open-sans-700 { font-weight: 700; }
        .open-sans-800 { font-weight: 800; }

        /* --- Animations --- */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.17, 0.55, 0.55, 1); }
        .reveal-left { opacity: 0; transform: translateX(-80px); transition: all 1.2s ease; }
        .reveal-right { opacity: 0; transform: translateX(80px); transition: all 1.2s ease; }
        .reveal-top { opacity: 0; transform: translateY(-80px); transition: all 1.2s ease; }
        .active { opacity: 1; transform: translate(0, 0); }

        @keyframes letterSlide {
            0% { opacity: 0; letter-spacing: 25px; filter: blur(12px); transform: scale(1.1); }
            100% { opacity: 1; letter-spacing: normal; filter: blur(0); transform: scale(1); }
        }
        .hero-title-anim { animation: letterSlide 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards; }

        /* --- Header & Navigation --- */
        header.scrolled { background: rgba(0,0,0,0.98); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(190, 215, 84, 0.3); }
        .nav-link { position: relative; }
        .nav-link::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -4px; left: 0; background: var(--accent); transition: width 0.3s; }
        .nav-link:hover::after { width: 100%; }

        .social-circle {
            width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255,255,255,0.2);
            transition: 0.4s; font-size: 10px; font-weight: 700;
        }
        .social-circle:hover { background: var(--accent); border-color: var(--accent); color: black; transform: translateY(-3px) scale(1.1); }

        /* --- Components --- */
        .video-hero { height: 100vh; width: 100%; overflow: hidden; position: relative; background: #000; }
        .video-hero video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); opacity: 0.6; object-fit: cover; }

        .product-card { transition: 0.5s; border: 1px solid transparent; }
        .product-card:hover { border-color: #f3f3f3; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.1); transform: translateY(-10px); }
        .quick-view-btn { transform: translateY(20px); opacity: 0; transition: 0.3s; }
        .product-card:hover .quick-view-btn { transform: translateY(0); opacity: 1; }

        /* --- Chatbot --- */
        #chat-window {
            position: fixed; bottom: 100px; right: 30px; width: 360px; height: 500px;
            background: white; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            display: none; flex-direction: column; z-index: 9999; overflow: hidden;
            border: 1px solid #eee;
        }
        .chat-bubble { padding: 12px 16px; border-radius: 18px; font-size: 13px; line-height: 1.5; max-width: 85%; margin-bottom: 8px; }
        .chat-ai { background: #f0f0f0; border-bottom-left-radius: 4px; align-self: flex-start; }
        .chat-user { background: var(--accent); border-bottom-right-radius: 4px; align-self: flex-end; color: black; font-weight: 600; }

        /* --- Page Swapping --- */
        .page-node { display: none; opacity: 0; transition: opacity 0.6s ease; }
        .page-node.active { display: block; opacity: 1; }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #000; }
        ::-webkit-scrollbar-thumb { background: var(--accent); }