:root {
            --accent-blue: #4300FF;
            --accent-lime: #B6F500;
            --highlight-pink: #FF2DD1;
            --luxury-white: #FFFFFF;
            --main-black: #000000;
        }

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

        /* Typography & Layout */
        h1, h2, h3, h4 { text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
        p { font-weight: 300; line-height: 1.8; letter-spacing: 0.02em; }
        .neon-glow:hover { text-shadow: 0 0 15px var(--accent-lime); }

        /* Fixed Sidebar Socials - Always Visible */
        .social-sidebar-fixed {
            position: fixed;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent-blue);
            padding: 25px 12px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            z-index: 2000;
            border-radius: 0 15px 15px 0;
        }
        .social-icon {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            cursor: pointer;
            font-weight: 900;
            font-size: 10px;
            color: var(--main-black);
        }
        .social-icon:hover { transform: scale(1.15); box-shadow: 0 0 20px rgba(182, 245, 0, 0.8); }

        /* Header (70px height) */
        header {
            height: 70px;
            background: #fff;
            padding: 0 5%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .btn-join {
            background-color: var(--accent-lime);
            padding: 10px 28px;
            border-radius: 20px 5px 20px 20px; /* Chat-style */
            font-weight: 700;
            transition: transform 0.3s;
        }
        .btn-join:hover { transform: scale(1.05); }

        /* Hero: Full Width (No horizontal margin) */
        .hero-section {
            width: 100%;
            min-height: 100vh;
            display: grid;
            grid-template-cols: 1.1fr 1fr;
            background: #f8f8f8;
            position: relative;
            overflow: hidden;
        }
        .parallax-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 120%;
            opacity: 0.05;
            z-index: 0;
            animation: slowScroll 60s linear infinite;
        }
        @keyframes slowScroll { from { transform: translateY(0); } to { transform: translateY(-10%); } }

        /* Animations */
        .reveal { opacity: 0; transform: translateY(60px); transition: 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .slide-left { opacity: 0; transform: translateX(-100px); transition: 1.2s; }
        .slide-right { opacity: 0; transform: translateX(100px); transition: 1.2s; }
        .slide-up { opacity: 0; transform: translateY(100px); transition: 1.2s; }
        .slide-down { opacity: 0; transform: translateY(-100px); transition: 1.2s; }
        .active-move { opacity: 1 !important; transform: translate(0,0) !important; }

        /* Trainer Floating System */
        .trainer-card {
            position: absolute;
            background: white;
            padding: 24px;
            border-radius: 20px;
            width: 300px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            z-index: 10;
        }

        /* Routing */
        .page { display: none; }
        .page.active { display: block; }

        /* Chatbot Pulse */
        #chatbot-trigger {
            position: fixed;
            bottom: 40px; right: 40px;
            width: 65px; height: 65px;
            background: var(--accent-blue);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            z-index: 2000; cursor: pointer;
            animation: pulse-ring 2.5s infinite;
        }
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(67, 0, 255, 0.6); }
            70% { box-shadow: 0 0 0 20px rgba(67, 0, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(67, 0, 255, 0); }
        }