:root {
    --primary-color: #3B82F6; /* Blue */
    --primary-hover: #2563EB;
    --secondary-color: #f3f4f6;
    --text-color: #111827; /* Dark text */
    --light-text: #64748B; /* Secondary text */
    --background-color: #ffffff;
    --font-family: 'Cairo', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    padding: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E3A5F;
    text-decoration: none;
}
.logo img {
    height: 28px;
    display: block;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.lang-toggle {
    font-weight: 600;
    cursor: pointer;
    color: var(--text-color);
}

.btn {
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transition updated */
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(59,130,246,0.4); /* Subtle glow base - Blue */
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 0 15px rgba(59,130,246,0.6); /* Glow on hover - Blue */
    /* NO SCALE, NO SHAKE */
}

/* Hero Section */
.hero {
    padding: 80px 0;
    background-color: #f9fafb;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-color);
}

.hero-text p {
    font-size: 1.125rem;
    color: var(--light-text);
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-image-wrapper {
    flex: 0 0 45%; /* Max 45% of hero width */
    max-width: 640px;
    text-align: center;
}

.image-caption {
    display: none; /* Ensure caption is hidden if any remains */
}

.hero-image img {
    width: 100%;
    height: auto;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Precise shadow */
    background: #FFFFFF;
}

/* Features Section */
.features {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 50px;
    color: var(--text-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card .icon {
    display: none;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 1.25rem;
    color: var(--text-color);
}

.feature-card p {
    color: var(--light-text);
}

/* Footer */
.footer {
    padding: 30px 0;
    text-align: center;
    background-color: var(--text-color);
    color: #fff;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 0;
    }

    .hero-text {
        display: contents;
    }

    .hero-text h1 {
        order: 1;
        font-size: 28px; /* Mobile H1 */
        margin-bottom: 15px;
    }

    .hero-text p {
        order: 2;
        margin-bottom: 25px;
    }

    .hero-image-wrapper {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .hero-buttons {
        order: 4;
        justify-content: center;
        width: 100%;
    }
    
    .section-title {
        font-size: 24px; /* Mobile H2 (assuming section-title is H2) */
    }

    .btn {
        width: 100%; /* Buttons full-width */
        display: block;
        text-align: center;
    }

    .navbar {
        flex-wrap: wrap;
    }
    
    .nav-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 15px;
    }

    .nav-actions .btn {
        width: auto; /* Keep header button normal size or full? "Buttons -> full-width" usually applies to main action areas. Let's make it auto for header to fit with lang toggle, or full if needed. Let's keep it auto for header to avoid breaking layout too much, but hero buttons are full. */
        flex: 1;
    }
}