:root {
            --navy: #31886b;
            --ice: #F0F4F8;
            --orange: #FF6B35;
            --gold: #FFB400;
            --dark: #ea8080;
        }

        body {
            font-family: 'Inconsolata', monospace;
            background-color: var(--navy);
            color: #FFFFFF;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .inconsolata-900 { font-weight: 900; }
        .inconsolata-700 { font-weight: 700; }
        .inconsolata-200 { font-weight: 200; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--navy); }
        ::-webkit-scrollbar-thumb { background: var(--orange); }

        /* Navigation */
        nav { backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,0.05); }
        .nav-link { transition: all 0.3s ease; position: relative; }
        .nav-link:hover { color: var(--gold); text-shadow: 0 0 10px var(--gold); }
        .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: var(--gold); transition: 0.3s; }
        .nav-link:hover::after { width: 100%; }

        /* Hero Split & Animations */
        .hero-section { min-height: 100vh; display: flex; flex-wrap: wrap; }
        .hero-left { flex: 1; min-width: 50%; display: flex; align-items: center; padding: 5rem; background: linear-gradient(160deg, #0B1D2D 0%, #1a3a5a 100%); }
        .hero-right { flex: 1; min-width: 50%; background: black; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        
        .floating-blob {
            position: absolute;
            background: black;
            filter: blur(80px);
            border-radius: 50%;
            opacity: 0.15;
            animation: float 20s infinite alternate;
        }

        @keyframes fadeIn { from {opacity:0; transform: translateY(20px);} to {opacity:1; transform: translateY(0);} }
.animate-fadeIn { animation: fadeIn 1s forwards; }
.animate-fadeInUp { animation: fadeIn 1s forwards; }
.animate-fadeIn.delay-150 { animation-delay: 0.15s; }
.animate-fadeIn.delay-300 { animation-delay: 0.3s; }
.animate-fadeIn.delay-400 { animation-delay: 0.4s; }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(100px, 50px) scale(1.2); }
        }

        /* Category Grid */
        .category-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
        .cat-card { position: relative; overflow: hidden; height: 350px; cursor: pointer; transition: 0.5s; }
        .cat-card:hover { transform: translateY(-10px); }
        .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: 1s; filter: grayscale(100%); }
        .cat-card:hover img { transform: scale(1.1); filter: grayscale(0%); }
        .cat-overlay { position: absolute; inset: 0; background: rgba(11,29,45,0.7); display: flex; align-items: center; justify-content: center; transition: 0.4s; }
        .cat-card:hover .cat-overlay { background: rgba(255,107,53,0.85); }

        /* Product Cards */
        .product-card { background: var(--navy); border: 1px solid rgba(255,255,255,0.05); transition: 0.4s; }
        .product-card:hover { border-color: var(--orange); box-shadow: 0 0 30px rgba(255,107,53,0.15); }

        /* Page System */
        .page { display: none; }
        .page.active { display: block; animation: pageIn 0.6s ease-out; }
        @keyframes pageIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* Marquee */
        .marquee { overflow: hidden; white-space: nowrap; background: var(--gold); padding: 1rem 0; color: var(--navy); font-weight: 900; }
        .marquee-content { display: inline-block; animation: marquee 20s linear infinite; }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* Footer Gradient */
        footer { background: linear-gradient(to bottom, #0B1D2D, #050d15); }
    </style>