:root {
            --primary: #B6F500;
            --secondary: #F8FF95;
            --accent: #F94C10;
            --dark: #000000;
        }

        body {
            font-family: 'Ubuntu', sans-serif;
            background-color: #ffffff;
            color: var(--dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Hero Animation & Background */
        .hero-bg-animate {
            background: linear-gradient(135deg, #ffffff 0%, #F8FF95 100%);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Layered Hero Card Stack */
        .card-stack {
            position: relative;
            height: 550px;
            width: 100%;
        }
        .hero-card {
            position: absolute;
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.12);
        }
        .hero-card:nth-child(1) { z-index: 3; transform: rotate(-3deg) translateZ(0); width: 85%; top: 0; left: 7%; }
        .hero-card:nth-child(2) { z-index: 2; transform: rotate(5deg) translateZ(0); width: 80%; top: 50px; left: 12%; opacity: 0.8; }
        .hero-card:nth-child(3) { z-index: 1; transform: rotate(-8deg) translateZ(0); width: 75%; top: 100px; left: 17%; opacity: 0.6; }
        
        .hero-card:hover {
            z-index: 10;
            transform: scale(1.03) rotate(0deg) translateY(-20px) !important;
            opacity: 1 !important;
            box-shadow: 0 40px 80px rgba(182, 245, 0, 0.3);
        }

        /* Parallax Floating Shapes */
        .floating-shape {
            position: absolute;
            z-index: 0;
            pointer-events: none;
            filter: blur(1px);
        }
        .shape-circle { border-radius: 50%; animation: float 10s infinite ease-in-out; }
        .shape-square { transform: rotate(45deg); animation: float 12s infinite ease-in-out reverse; }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, -50px) rotate(10deg); }
            66% { transform: translate(-20px, 20px) rotate(-10deg); }
        }

        /* Diagonal Section Dividers */
        .slant-down { clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); }
        .slant-up { clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); }

        /* Mega Nav Blocks */
        .nav-block {
            position: relative;
            transition: 0.3s;
        }
        .nav-block::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 0;
            height: 12px;
            background: var(--primary);
            transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            z-index: -1;
        }
        .nav-block:hover::after { width: 100%; }

        /* Scroll Reveal */
        .reveal { opacity: 0; transform: translateY(60px); transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* Image Overlays */
        .img-overlay-grid {
            background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
        }

        /* Auth Screen Styling */
        .auth-input {
            width: 100%;
            padding: 1.25rem;
            background: #f9f9f9;
            border-radius: 1rem;
            border: 2px solid transparent;
            transition: 0.3s;
        }
        .auth-input:focus {
            border-color: var(--primary);
            background: white;
            outline: none;
        }

        /* Modal Blur */
        #modal-overlay {
            backdrop-filter: blur(15px);
            display: none;
        }

        /* Hamburger open animation */
#mobile-menu-btn.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#mobile-menu-btn.open span:nth-child(2) {
  opacity: 0;
}
#mobile-menu-btn.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


        .active-link { color: var(--accent); font-weight: 700; }
        .active-link::after { width: 100% !important; }