/* --- THEME & COLOR VARIABLES --- */
        :root {
            --color-bg-primary: #0a0f1f; /* Dark Blue */
            --color-bg-secondary: #1a2035;
            --color-bg-secondary-rgb: 26, 32, 53;
            --color-border: #2a314b;
            --color-accent: #3b82f6; /* Bright Blue */
            --color-accent-rgb: 59, 130, 246;
            --color-typing: #f59e0b; /* Orange */
            --color-text-primary: #e2e8f0; /* Light Gray */
            --color-text-secondary: #94a3b8;
            --color-success: #22c55e;
            --color-error: #ef4444;
        }

        /* --- BASE & LAYOUT STYLES --- */
        html, body {
            height: 100%;
            overflow-x: hidden; 
        }
        body {
            display: flex;
            flex-direction: column;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            font-family: 'Manrope', sans-serif;
            background-image: radial-gradient(var(--color-border) 0.5px, transparent 0.5px);
            background-size: 20px 20px;
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0; /* Reduced padding for small screens */
        }
        @media (min-width: 640px) {
            main {
                padding: 4rem 0; /* Restore padding for larger screens */
            }
        }
        
        /* --- MODAL STYLES (Magnific Popup) --- */
        .mfp-bg {
            background: rgba(10, 15, 31, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.3s ease-in-out;
        }
        .mfp-zoom-in.mfp-ready .mfp-content {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-removing .mfp-content {
            opacity: 0;
            transform: scale(0.95);
        }
        .modal-box {
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease;
            overflow: hidden;
            position: relative;
        }
        .modal-box.is-hiding {
            opacity: 0;
        }
        
        /* --- ANIMATIONS & MICROINTERACTIONS --- */
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 25px rgba(var(--color-accent-rgb), 0.3); }
            50% { box-shadow: 0 0 40px rgba(var(--color-accent-rgb), 0.5); }
        }
        #hero-cta-btn {
             animation: pulse-glow 3s infinite ease-in-out;
        }
        
        #dynamic-headline .headline-item {
            position: absolute;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }
        #dynamic-headline .headline-item.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* --- PROGRESS BAR STYLES --- */
        #generation-progress-bar-container {
            width: 100%;
            background-color: var(--color-bg-primary);
            border-radius: 9999px;
            height: 8px;
            margin-bottom: 1.5rem;
            border: 1px solid var(--color-border);
            overflow: hidden;
        }
        #generation-progress-bar {
            width: 0%;
            height: 100%;
            background-color: var(--color-accent);
            border-radius: 9999px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* --- CUSTOM INTERACTIVE ELEMENT STYLES --- */
        .service-card {
            background-color: var(--color-bg-primary);
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .service-card:hover {
            border-color: var(--color-accent);
            transform: translateY(-4px);
            box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.2);
        }
        
        /* --- International Phone Input Styles --- */
        .iti { width: 100%; }
        .iti__country-list {
            background-color: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .iti__country:hover, .iti__country.iti__highlight {
            background-color: var(--color-bg-primary);
        }
        .iti__divider { border-bottom-color: var(--color-border); }
        .iti--allow-dropdown .iti__search-input {
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            border-color: var(--color-border);
        }
        #phone-input {
            color: var(--color-text-primary);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        #phone-input.is-typing {
            border-color: var(--color-typing) !important;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
        }
        #phone-input.is-valid {
            border-color: var(--color-success) !important;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
        }
        #phone-input.is-invalid {
            border-color: var(--color-error) !important;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
        }

        /* --- Teaser Styles --- */
        .teaser-wrapper {
            width: 100%;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            background-color: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            padding: 0.75rem;
            position: relative;
            overflow: hidden;
        }
        .teaser-content {
            filter: blur(5px);
            user-select: none;
            -webkit-user-select: none;
        }
        .teaser-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to top, var(--color-bg-primary), transparent);
            pointer-events: none;
        }