/* Tailwind Configuration for Custom Colors */
        :root {
            --color-primary: #00C2FF;
            --color-secondary: #B6FF00;
            --color-text: #1F1F1F;
            --color-cards: #F4F6F8;
        }

        /* Base styles and typography */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            color: var(--color-text);
            scroll-behavior: smooth;
        }

        h1, h2, h3 {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            color: var(--color-text);
        }

        .text-mono {
            font-family: monospace;
            background-color: var(--color-cards);
            padding: 2px 6px;
            border-radius: 4px;
        }

        /* --- HERO SECTION ANIMATIONS --- */

        /* 1. Text Reveal Animation */
        .text-reveal-line {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: inline-block; /* allows line break but animates as a unit */
        }
        .text-reveal-line.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* 2. Animated Smart Visuals (replacing floating icons) */
        .smart-visuals-container {
            position: relative;
            perspective: 1000px;
            height: 350px; 
            width: 100%;
        }
        
        .visual-card {
            position: absolute;
            width: 150px;
            height: 100px;
            background-color: var(--color-cards);
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 10px 30px rgba(31, 31, 31, 0.1);
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            border: 2px solid var(--color-primary);
            text-align: center;
        }

        @keyframes spinFloat {
            0% { transform: translateY(0) rotateX(0deg) scale(1); }
            33% { transform: translateY(-15px) rotateX(10deg) scale(1.02); }
            66% { transform: translateY(-5px) rotateX(-5deg) scale(1); }
            100% { transform: translateY(0) rotateX(0deg) scale(1); }
        }

        .visual-card:nth-child(1) {
            top: 50px;
            left: 10%;
            animation: spinFloat 8s ease-in-out infinite;
        }
        .visual-card:nth-child(2) {
            top: 150px;
            left: 55%;
            animation: spinFloat 7s ease-in-out infinite;
            animation-delay: -3s;
            background-color: var(--color-secondary);
            color: var(--color-text);
            border-color: var(--color-text);
        }
        .visual-card:nth-child(3) {
            top: 250px;
            left: 25%;
            animation: spinFloat 9s ease-in-out infinite;
            animation-delay: -5s;
            transform: rotateX(20deg); 
            opacity: 0.8;
            background-color: var(--color-primary);
            color: white;
            border-color: white;
        }

        /* 3. CTA Ripple Effect (Simulated) */
        .btn-ripple {
            position: relative;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            z-index: 1;
        }
        .btn-ripple:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transition: all 0.5s ease-out;
            z-index: -1;
        }
        .btn-ripple:hover:not(:active)::after {
            opacity: 1;
            transform: scale(100, 100) translate(-50%);
            transition: all 0.7s ease-out;
        }

        /* Custom Component Styles */

        /* Card Lift and Edge Glow Effect */
        .hack-card {
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
            border: 2px solid transparent;
            position: relative;
        }

        .hack-card:hover {
            transform: translateY(-5px);
            border-color: var(--color-primary);
            box-shadow: 0 10px 20px rgba(0, 194, 255, 0.2);
        }

        /* Scroll Fade-Up Animation */
        .scroll-fade-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .scroll-fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Navigation Underline Effect */
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--color-primary);
            transition: width 0.3s ease-out;
        }
        .nav-link:hover::after {
            width: 100%;
        }

        /* Horizontal Scroll Styling */
        .horizontal-scroll-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
        }
        .horizontal-scroll-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        /* Checkmark Animation (Used in Tools) */
        .checkmark-icon {
            color: var(--color-secondary);
            animation: checkmark-pop 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        @keyframes checkmark-pop {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Sticky Progress Bar (Guides) */
        #progress-bar {
            height: 4px;
            background-color: var(--color-primary);
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            z-index: 50;
        }