:root {
            --navy: #8e99ea;
            --light-bg: #F1F4F8;
            --orange: #FF9F1C;
            --deep-purple: #2D1B3B;
        }

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

        /* Responsive Typography */
        h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }

        /* Header Styles */
        header {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        header.scrolled {
            background: var(--navy);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

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

        /* Hero Background & Animation */
        .hero-section {
            background: linear-gradient(135deg, var(--navy) 0%, var(--deep-purple) 100%);
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .geometric-shape {
            position: absolute;
            opacity: 0.1;
            background: var(--orange);
            filter: blur(80px);
            border-radius: 50%;
            z-index: 1;
        }

        /* Infographic Card */
        .infographic-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 2rem;
            animation: slideIn 1.2s ease-out;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }

        /* Credit Score Gauge */
        .gauge-container {
            width: 240px;
            height: 120px;
            position: relative;
            overflow: hidden;
        }
        .gauge-bg {
            width: 240px;
            height: 240px;
            border-radius: 50%;
            border: 20px solid rgba(255,255,255,0.1);
            position: absolute;
        }
        .gauge-fill {
            width: 240px;
            height: 240px;
            border-radius: 50%;
            border: 20px solid var(--orange);
            position: absolute;
            border-bottom-color: transparent;
            border-left-color: transparent;
            transform: rotate(-45deg);
            transition: transform 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
        }

        /* Feature Card */
        .feature-card {
            background: var(--light-bg);
            color: var(--navy);
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }

        /* Pricing Cards */
        .pricing-card {
            transition: transform 0.3s ease;
        }
        .pricing-card:hover { transform: scale(1.03); }

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

        /* Floating coins animation */
        .coin {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* Buttons */
        .btn-primary { background-color: var(--orange); color: var(--navy); font-weight: 700; transition: 0.3s; }
        .btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
        .btn-outline { border: 2px solid var(--orange); color: var(--orange); font-weight: 700; transition: 0.3s; }
        .btn-outline:hover { background-color: var(--orange); color: var(--navy); }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--navy); }
        ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 5px; }