:root {
            --primary: #00c6ff;
            --secondary: #1a1a1a;
            --text: #f5f5f5;
            --text-muted: #cccccc;
            --bg: #101010;
            --accent: #ffe000;
            --card-bg: #1f1f1f;
            --border-color: rgba(255, 255, 255, 0.12);
            --input-bg: #2a2a2a;
            --input-border-focus: var(--primary);
            --glow-primary: rgba(0, 198, 255, 0.5); /* Slightly stronger glow */
            --glow-accent: rgba(255, 224, 0, 0.6);
            --shadow-light: rgba(0, 0, 0, 0.3);
            --shadow-medium: rgba(0, 0, 0, 0.6);
            --transition-smooth: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
            --transition-fast: all 0.3s ease; /* Smoother default ease */
            --font-main: 'Cairo', sans-serif;
            --success-color: #34d399; /* Tailwind green-400 */
            --error-color: #f87171; /* Tailwind red-400 */
            --glow-success: rgba(52, 211, 153, 0.5);
            --glow-error: rgba(248, 113, 113, 0.5);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth !important; height: 100%; }

        body {
            font-family: var(--font-main); background-color: var(--bg); color: var(--text);
            line-height: 1.85; overflow-x: hidden; position: relative; font-size: 16.5px;
            display: flex; flex-direction: column; min-height: 100vh;
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
        }
        body.loaded { opacity: 1; }

        #main-container {
            flex-grow: 1; display: flex; align-items: center; justify-content: center;
            padding: 100px 35px; /* Increased padding */
             background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 70%), var(--bg);
        }

        .container { max-width: 650px; width: 100%; margin: 0 auto; }

        h2 {
            font-size: 3rem; font-weight: 800; margin-bottom: 50px; /* Increased margin */
            text-align: center; color: var(--primary); padding-bottom: 20px;
            position: relative; text-shadow: 0 0 12px var(--glow-primary);
        }
        h2::before {
            content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 6px;
            background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 3px; box-shadow: 0 0 10px var(--glow-primary);
        }

        #contact-form {
            background: var(--card-bg);
            padding: 50px 55px; /* Increased padding */
            border-radius: 20px; /* Slightly more rounded */
            border: 1px solid var(--border-color);
            box-shadow: 0 20px 50px var(--shadow-medium); /* Deeper shadow */
        }

        .form-group { margin-bottom: 35px; position: relative; }

        .form-group label {
            position: absolute;
            top: 16px; /* Align with input padding */
            right: 20px; /* Align with input padding */
            font-weight: 500; /* Lighter weight for placeholder feel */
            color: var(--text-muted);
            font-size: 1.05rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
            pointer-events: none; /* Allow clicking through label */
            transform-origin: top right;
            background: none; /* Remove potential background interference */
             padding: 0 5px; /* Add padding to prevent overlap with border */
             z-index: 2; /* Above input field */
        }

        .form-group input:focus + label,
        .form-group textarea:focus + label,
        .form-group input:not(:placeholder-shown) + label,
        .form-group textarea:not(:placeholder-shown) + label {
             transform: translateY(-28px) scale(0.85); /* Adjust position */
             color: var(--primary);
             background-color: var(--card-bg); /* Match card background */
             z-index: 10; /* Ensure label is above border on focus */
        }


        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 16px 20px; /* Slightly more padding */
            background-color: var(--input-bg);
            border: 1.5px solid var(--border-color); /* Slightly thicker border */
            border-radius: 10px; /* More rounded */
            color: var(--text);
            font-family: var(--font-main);
            font-size: 1.05rem;
            transition: var(--transition-fast);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); /* Deeper inset shadow */
            position: relative;
            z-index: 1;
        }
         .form-group input::placeholder,
         .form-group textarea::placeholder {
             color: transparent; /* Hide actual placeholder */
         }


        .form-group textarea {
            min-height: 160px;
            resize: vertical;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--input-border-focus);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 12px var(--glow-primary); /* Enhanced focus glow */
        }

        .cf-turnstile { margin-bottom: 35px; display: flex; justify-content: center;}

        button[type="submit"] {
            display: block; width: 100%;
            padding: 17px 40px; border-radius: 10px; /* Match input radius */
            font-weight: 700; font-size: 1.15rem; text-align: center;
            border: none;
            transition: var(--transition-smooth);
            cursor: pointer;
            position: relative;
            z-index: 1; letter-spacing: 1px; /* Slightly more spacing */
            background: linear-gradient(95deg, var(--primary), var(--accent)); /* Adjusted angle */
            color: #050505; /* Darker text for better contrast */
            text-shadow: none;
            box-shadow: 0 7px 18px var(--glow-primary);
        }

        button[type="submit"]:hover:not(:disabled) {
            transform: translateY(-5px) scale(1.02); /* Enhanced hover effect */
            box-shadow: 0 12px 25px var(--glow-accent);
            filter: brightness(1.15);
        }
        button[type="submit"]:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
            filter: none;
        }

        .feedback-message {
            margin-top: 25px; padding: 16px 20px; border-radius: 10px;
            text-align: center; font-weight: 600; font-size: 1rem;
            opacity: 0; transform: translateY(15px) scale(0.98);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
            display: none;
        }
        .feedback-message.show {
            display: block; opacity: 1; transform: translateY(0) scale(1);
        }
        .feedback-message.success {
            background-color: rgba(52, 211, 153, 0.15); color: var(--success-color);
            border: 1px solid rgba(52, 211, 153, 0.3); box-shadow: 0 0 12px var(--glow-success);
        }
        .feedback-message.error {
            background-color: rgba(248, 113, 113, 0.15); color: var(--error-color);
            border: 1px solid rgba(248, 113, 113, 0.3); box-shadow: 0 0 12px var(--glow-error);
        }

         footer {
            background: var(--bg); padding: 30px 0; text-align: center;
            border-top: 1px solid var(--border-color); margin-top: auto;
        }
        footer p { font-size: 1rem; color: var(--text-muted); margin: 0; }

        @media (max-width: 768px) {
            h2 { font-size: 2.3rem; margin-bottom: 30px;}
             #main-container { padding: 80px 25px; }
             #contact-form { padding: 40px 35px; }
        }
         @media (max-width: 480px) {
              h2 { font-size: 2rem; margin-bottom: 25px;}
             #main-container { padding: 60px 20px; }
             #contact-form { padding: 35px 25px; }
             .form-group input, .form-group textarea { padding: 14px 18px; font-size: 1rem; }
             button[type="submit"] { padding: 15px 30px; font-size: 1.05rem; }
         }
