body {
            box-sizing: border-box;
        }
        
        :root {
            --cream-white: #FFFDF7;
            --soft-gray: #F5F7FA;
            --mint-green: #4CD7B1;
            --peach: #FFB77D;
            --light-gray: #888888;
        }
        
        .bg-cream { background-color: var(--cream-white); }
        .bg-mint { background-color: var(--mint-green); }
        .bg-peach { background-color: var(--peach); }
        .text-light-gray { color: var(--light-gray); }
        
        .typewriter {
            overflow: hidden;
            border-right: 3px solid var(--mint-green);
            white-space: nowrap;
            animation: typing 4s steps(50, end), blink-caret 0.75s step-end infinite;
        }
        
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: var(--mint-green); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .btn-glow:hover {
            box-shadow: 0 0 20px rgba(76, 215, 177, 0.4);
            transform: scale(1.05);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #F5F7FA 0%, #FFFFFF 100%);
        }
        
        .mint-gradient {
            background: linear-gradient(135deg, #4CD7B1 0%, #3BC49E 100%);
        }
        
        .peach-gradient {
            background: linear-gradient(135deg, #FFB77D 0%, #FF9F5A 100%);
        }
        
        .hero-image {
            background-size: cover;
            background-position: center;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            color: white;
            font-weight: 500;
            z-index: 1001;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification.success {
            background: var(--mint-green);
        }
        
        .notification.error {
            background: #ef4444;
        }
        
        .auth-section {
            display: none;
        }
        
        .auth-section.active {
            display: block;
        }
        
        .calculator-input {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 0.75rem;
            transition: all 0.3s ease;
        }
        
        .calculator-input:focus {
            border-color: var(--mint-green);
            background: white;
            outline: none;
        }
        
        .hidden-content {
            display: none;
        }
        
        .show-content {
            display: block;
        }