:root {
            --yellow-bg: #FEFD99;
            --green-bg: #F0FFC2;
            --navy: #170C79;
            --accent: #B5E18B;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--yellow-bg);
            color: var(--navy);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        .league-script { font-family: "League Script", cursive; }

        /* Floating Header */
        #main-header.scrolled {
            background: rgba(254, 253, 153, 0.95);
            padding: 12px 24px;
            width: 100%;
            top: 0;
            border-radius: 0;
            box-shadow: 0 10px 30px rgba(23, 12, 121, 0.1);
        }

        /* Wave Nav */
        .nav-link:nth-child(1) { transform: translateY(-4px); }
        .nav-link:nth-child(2) { transform: translateY(4px); }
        .nav-link:nth-child(3) { transform: translateY(-2px); }
        .nav-link:nth-child(4) { transform: translateY(6px); }

        /* Product Strip Expansion */
        .product-strip { display: flex; gap: 15px; height: 550px; width: 100%; }
        .strip-item {
            flex: 1;
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
            overflow: hidden;
            border-radius: 30px;
        }
        .strip-item:hover { flex: 5; }
        .strip-content {
            position: absolute;
            bottom: 0; left: 0; width: 100%;
            padding: 40px;
            background: linear-gradient(transparent, rgba(23, 12, 121, 0.8));
            color: white;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease 0.3s;
        }
        .strip-item:hover .strip-content { opacity: 1; transform: translateY(0); }

        /* Zig-Zag Timeline */
        .timeline-line {
            position: absolute;
            left: 50%; top: 0; bottom: 0;
            width: 2px; background: var(--accent);
            transform: translateX(-50%);
        }

        /* Animations */
        .reveal { opacity: 0; transform: translateY(40px); transition: 1.2s all ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .floating-hero-img { animation: float 6s ease-in-out infinite; }
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(var(--r)); }
            50% { transform: translateY(-25px) rotate(var(--r)); }
        }

        /* Custom Shapes */
        .diagonal-block { clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); }
        .circle-block { clip-path: circle(50% at 50% 50%); }

        /* Pages */
        .page-node { display: none; }
        .page-node.active { display: block; animation: fadeIn 0.8s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

        /* Mobile */
        #mobile-nav {
            clip-path: circle(0% at 100% 0%);
            transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        #mobile-nav.active { clip-path: circle(150% at 100% 0%); }

        /* Modal */
        #modal-overlay {
            background: rgba(23, 12, 121, 0.4);
            backdrop-filter: blur(10px);
            display: none;
            opacity: 0;
            transition: 0.3s opacity ease;
        }
        #modal-overlay.active { display: flex; opacity: 1; }