/* -------------------------------------------------------------
 * BadirTech Corporate Website Stylesheet
 * Technology theme: Dark mode, glassmorphism, responsive
 * ------------------------------------------------------------- */

/* 1. Global Reset & Variables */
:root {
    /* Light Theme (Default) variables */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --border-color: rgba(15, 23, 42, 0.08);
    --border-hover: rgba(37, 99, 235, 0.3);
    
    /* Harmonious Color Palette */
    --color-blue: #2563EB;
    --color-cyan: #0284c7;
    --color-purple: #7c3aed;
    --color-lime: #059669;
    --color-red: #DC2626;
    
    /* Text colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-white: #FFFFFF;
    
    /* Nav & UI variables */
    --nav-link-active: #0f172a;
    --btn-link-hover: #0f172a;
    --logo-text-color: #0f172a;
    --header-bg: rgba(248, 250, 252, 0.85);
    --header-shadow: 0 6px 30px rgba(15, 23, 42, 0.08);
    --card-shadow: 0 15px 40px rgba(15, 23, 42, 0.12);
    --card-shadow-hover: 0 20px 45px rgba(15, 23, 42, 0.18), 0 0 20px rgba(37, 99, 235, 0.06);
    --dot-bg: rgba(15, 23, 42, 0.15);
    --btn-action-bg: rgba(15, 23, 42, 0.04);
    --btn-action-bg-hover: rgba(15, 23, 42, 0.08);
    --btn-action-bg-active: rgba(124, 58, 237, 0.12);
    --btn-action-border-active: rgba(124, 58, 237, 0.3);
    --badge-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    --widget-border: rgba(124, 58, 237, 0.22);
    --widget-shadow: 0 8px 25px rgba(15, 23, 42, 0.05), 0 0 10px rgba(124, 58, 237, 0.15);
    --widget-card-shadow: 0 15px 40px rgba(15, 23, 42, 0.08), 0 0 15px rgba(124, 58, 237, 0.18);
    
    /* Fonts */
    --font-tajawal: 'Tajawal', sans-serif;
    --font-cairo: 'Cairo', sans-serif;
    --font-outfit: 'Outfit', sans-serif;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Map simulation variables */
    --map-bg: #f1f5f9;
    --map-dot: rgba(15, 23, 42, 0.05);
    --map-road: rgba(15, 23, 42, 0.03);
}

/* Dark Theme overrides */
body.dark-theme {
    --bg-primary: #060913;
    --bg-secondary: #0A0F1E;
    --bg-card: rgba(18, 26, 47, 0.6);
    --bg-card-hover: rgba(18, 26, 47, 0.75);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(0, 242, 254, 0.25);
    
    /* Harmonious Color Palette */
    --color-blue: #2563EB;
    --color-cyan: #00F2FE;
    --color-purple: #9D6EFF;
    --color-lime: #10B981;
    --color-red: #EF4444;
    
    /* Text colors */
    --text-primary: #FFFFFF;
    --text-secondary: #C0C7DC;
    --text-muted: #7E89A3;
    --text-white: #FFFFFF;
    
    /* Nav & UI variables */
    --nav-link-active: #ffffff;
    --btn-link-hover: #ffffff;
    --logo-text-color: #ffffff;
    --header-bg: rgba(6, 9, 19, 0.85);
    --header-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    --card-shadow-hover: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 25px rgba(0, 242, 254, 0.12);
    --dot-bg: rgba(255, 255, 255, 0.25);
    --btn-action-bg: rgba(255, 255, 255, 0.04);
    --btn-action-bg-hover: rgba(255, 255, 255, 0.08);
    --btn-action-bg-active: rgba(157, 110, 255, 0.2);
    --btn-action-border-active: rgba(157, 110, 255, 0.4);
    --badge-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    --widget-border: rgba(255, 255, 255, 0.08);
    --widget-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    --widget-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    
    /* Map simulation variables */
    --map-bg: #0A0D18;
    --map-dot: rgba(255, 255, 255, 0.03);
    --map-road: rgba(255, 255, 255, 0.04);
}

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

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-cairo);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. Bilingual Visibility Rules */
body.ar {
    direction: rtl;
    text-align: right;
    font-family: var(--font-cairo);
}

body.en {
    direction: ltr;
    text-align: left;
    font-family: var(--font-outfit);
}

body.ar .lang-en { display: none !important; }
body.en .lang-ar { display: none !important; }

/* Global Hidden Class */
.hidden {
    display: none !important;
}

/* Mirror arrows and positions based on dir */
body.en .send-icon {
    transform: none; /* Reset mirrored send icon for LTR */
}

/* Utility Containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 80px 0;
    position: relative;
}

/* 3. Ambient Glowing Background Orbs */
.glow-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    mix-blend-mode: screen;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--color-blue);
    top: -100px;
    right: -100px;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: var(--color-purple);
    top: 40%;
    left: -150px;
}

.orb-3 {
    width: 450px;
    height: 450px;
    background: var(--color-cyan);
    bottom: -100px;
    right: 20%;
}

/* 4. Scroll Reveal Transitions */
.scroll-reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 5. Buttons & Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-tajawal);
    font-weight: 700;
    color: var(--text-primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    font-family: var(--font-tajawal);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-blue), #1D4ED8);
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
    background: linear-gradient(135deg, #1D4ED8, #1E40AF);
}

.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(30deg);
    transition: transform 0.5s ease;
}

.btn-glow:hover::after {
    transform: translate(400%, -20%) rotate(30deg);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
}

.btn-outline:hover {
    background: rgba(0, 242, 254, 0.08);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 8px 18px;
    font-size: 0.85rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--color-cyan);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.btn-link:hover {
    color: var(--text-white);
    transform: translateX(-4px); /* For Arabic direction */
}

body.en .btn-link:hover {
    transform: translateX(4px); /* For English direction */
}

/* Glass Card Definition */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
}

.glass-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--card-shadow-hover);
}

.badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}

.badge-accent {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-lime);
    border-color: rgba(16, 185, 129, 0.2);
}

.badge-cyan {
    background: rgba(0, 242, 254, 0.1);
    color: var(--color-cyan);
    border-color: rgba(0, 242, 254, 0.2);
}

.badge-purple {
    background: rgba(157, 110, 255, 0.1);
    color: var(--color-purple);
    border-color: rgba(157, 110, 255, 0.2);
}

/* Section Header Styles */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
    z-index: 2;
}

.section-title {
    font-size: 2.2rem;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.gradient-text {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 6. Navigation Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 100;
    transition: var(--transition-smooth);
    border-bottom: 1px solid transparent;
}

.header.scrolled {
    background: var(--header-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    height: 70px;
    border-bottom-color: var(--border-color);
    box-shadow: var(--header-shadow);
}

.header-container {
    max-width: 1240px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo {
    height: 66px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: height var(--transition-smooth), transform var(--transition-fast);
}

/* Scrolled header height adjustment for logo to fit 70px header */
.header.scrolled .brand-logo {
    height: 52px;
}

/* Logic for logo swap based on theme */
.brand-logo.dark-logo {
    display: none;
}
.brand-logo.light-logo {
    display: block;
}

body.dark-theme .brand-logo.dark-logo {
    display: block;
}
body.dark-theme .brand-logo.light-logo {
    display: none;
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
    .brand-logo {
        height: 50px;
    }
}

.logo-text {
    font-family: var(--font-tajawal);
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--logo-text-color);
}

.logo-text .accent-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
    padding: 6px 0;
}

.nav-link:hover, .nav-link.active {
    color: var(--nav-link-active);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-cyan);
    transition: var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

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

/* زر تبديل الوضع النهاري / الليلي */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.05rem;
    transition: var(--transition-fast);
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
    transform: scale(1.05);
}

body:not(.dark-theme) .theme-icon-light { display: none; }
body.dark-theme .theme-icon-dark { display: none; }

.lang-toggle-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition-fast);
    font-family: var(--font-tajawal);
}

.lang-toggle-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-hover);
}

.mobile-only-btn {
    display: none;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 101;
}

.mobile-toggle .bar {
    width: 100%;
    height: 2.2px;
    background-color: var(--text-primary);
    border-radius: 10px;
    transition: var(--transition-fast);
}

/* 7. Hero Split Section & Interactive Command Center */
.hero-split {
    position: relative;
    min-height: 80vh; /* Reduced from 90vh to bring content closer to Navbar */
    display: flex;
    align-items: center;
    padding: 90px 0 40px 0; /* Reduced top padding from 120px to 90px */
    width: 100%;
}

.hero-split-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}

/* RTL-aware text positioning: right side has text, left has animation */
.hero-split-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    z-index: 2;
}

body.en .hero-split-text {
    text-align: left;
}

.hero-split-heading {
    font-size: 2.4rem; /* Reduced from 2.8rem */
    line-height: 1.35;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    font-weight: 800;
}

.hero-split-subheading {
    font-size: 1.12rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 600px;
}

.hero-split-cta {
    display: flex;
    gap: 16px;
    align-items: center;
}

.hero-split-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    z-index: 2;
}

/* Command Center Container (transparent & seamless blend, expanded size) */
.scene-container {
    position: relative;
    width: 100%;
    max-width: 696px; /* 120% of 580px */
    height: 540px; /* 120% of 450px */
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible; /* Orbiting cards can float and expand naturally */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}

.connections-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.center-card-wrapper {
    position: absolute;
    z-index: 5;
    width: 216px; /* 120% of 180px */
    height: 264px; /* 120% of 220px */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.center-card-wrapper.morphed {
    z-index: 15;
    width: 492px; /* 120% of 410px */
    height: 72px; /* 120% of 60px */
}

.center-card-wrapper.morphed.has-response {
    height: 396px; /* 120% of 330px */
}

.center-card {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--widget-border); /* Glowing border in Light Mode */
    border-radius: 20px;
    padding: 1rem;
    box-shadow: var(--widget-card-shadow); /* Glowing shadow in Light Mode */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.center-card-wrapper.morphed .center-card {
    background: rgba(242, 244, 255, 0.78) !important; /* Soft lavender-blue glass tint instead of bright white */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 20px;
    padding: 0.75rem 1rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-color: rgba(99, 102, 241, 0.25) !important; /* Soft purple/blue border */
    box-shadow: 
        0 12px 30px rgba(15, 23, 42, 0.05),
        0 0 20px rgba(124, 58, 237, 0.08) !important; /* Softened, elegant glow in Light Mode */
}

.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.avatar-container {
    position: relative;
    width: 100px; /* Increased from 75px */
    height: 100px; /* Increased from 75px */
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-container::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 2.2px solid rgba(110, 231, 212, 0.45);
    box-shadow: 0 0 15px rgba(110, 231, 212, 0.35);
    pointer-events: none;
    z-index: 1;
    animation: ring-pulse 4s ease-in-out infinite;
}

@keyframes ring-pulse {
    0%, 100% {
        transform: scale(1);
        border-color: rgba(110, 231, 212, 0.45);
        box-shadow: 0 0 12px rgba(110, 231, 212, 0.35);
    }
    50% {
        transform: scale(1.04);
        border-color: rgba(157, 110, 255, 0.55);
        box-shadow: 0 0 20px rgba(157, 110, 255, 0.45);
    }
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
    z-index: 2;
}

#mascot-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(157, 110, 255, 0.25));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.status-badge {
    position: absolute;
    bottom: 5px; /* Adjusted from 3px */
    right: 5px; /* Adjusted from 3px */
    background: #10b981;
    width: 15px; /* Scaled from 13px */
    height: 15px; /* Scaled from 13px */
    border-radius: 50%;
    border: 2.5px solid var(--bg-secondary); /* Dynamic border matching card background */
    z-index: 3;
    animation: status-pulse 2s infinite;
}

@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.profile-info h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.profile-info p {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.profile-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
}

.action-btn-mobile {
    display: none !important;
}

.action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--btn-action-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: var(--btn-action-bg-hover);
    color: var(--text-primary);
    transform: scale(1.05);
}

.action-btn.active {
    background: var(--btn-action-bg-active);
    color: var(--color-purple);
    border-color: var(--btn-action-border-active);
}

/* Prompt section */
.prompt-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.75rem 1rem;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.center-card-wrapper.morphed .prompt-section {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    position: relative;
    padding: 0;
}

.center-card-wrapper.morphed .profile-section,
.center-card-wrapper.morphed .profile-actions {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.prompt-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    height: 50px; /* 120% of 42px */
}

.prompt-icon {
    color: var(--color-purple);
    display: flex;
    align-items: center;
    animation: bounce-gentle 2s infinite;
}

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.prompt-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem; /* 120% of 0.85rem */
    width: 100%;
    text-align: right;
    direction: rtl;
}

.prompt-close-btn {
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.suggestions-list {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    border-top: 1px solid var(--border-color); /* Dynamic border color */
    padding-top: 0.4rem;
    justify-content: flex-start;
    max-height: 80px;
    overflow-y: auto;
}

.suggestion-chip {
    font-size: 0.75rem; /* 120% of 0.68rem */
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: var(--btn-action-bg); /* Dynamic chip background */
    border: 1px solid var(--border-color); /* Dynamic chip border */
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.suggestion-chip:hover {
    background: var(--btn-action-bg-active);
    border-color: var(--btn-action-border-active);
    color: var(--text-primary);
}

.advisor-response-container {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color); /* Dynamic border color */
    flex: 1;
    overflow-y: auto;
    display: none;
    max-height: 250px; /* 120% of 190px (expanded) */
    scrollbar-width: thin;
}

.advisor-response-container.active {
    display: block;
}

.advisor-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0;
}

.loading-dot {
    width: 6px;
    height: 6px;
    background: var(--color-purple);
    border-radius: 50%;
    animation: loading-pulse 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes loading-pulse {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

.advisor-answer {
    font-size: 0.88rem; /* 120% of 0.78rem */
    line-height: 1.6;
    color: var(--text-primary); /* Dynamic text color for perfect readability */
    text-align: justify;
    direction: rtl;
}

/* Orbiting card items */
.orbit-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: 2;
    cursor: pointer;
}

.glass-badge {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--widget-border); /* Glowing border in Light Mode */
    padding: 0.5rem 0.8rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--widget-shadow); /* Glowing shadow in Light Mode */
    min-width: 140px;
    max-width: 220px;
    transition: transform 0.2s ease;
}

.orbit-card:hover .glass-badge {
    border-color: var(--border-hover);
    transform: scale(1.03);
}

.orbit-card[data-theme="blue"]:hover .glass-badge {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}
.orbit-card[data-theme="pink"]:hover .glass-badge {
    border-color: rgba(157, 110, 255, 0.5);
    box-shadow: 0 0 15px rgba(157, 110, 255, 0.2);
}
.orbit-card[data-theme="green"]:hover .glass-badge {
    border-color: rgba(110, 231, 212, 0.5);
    box-shadow: 0 0 15px rgba(110, 231, 212, 0.2);
}
.orbit-card[data-theme="amber"]:hover .glass-badge {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.badge-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.orbit-card[data-theme="blue"] .badge-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.orbit-card[data-theme="pink"] .badge-icon { background: rgba(157, 110, 255, 0.15); color: #9d6eff; }
.orbit-card[data-theme="green"] .badge-icon { background: rgba(110, 231, 212, 0.15); color: #6ee7d4; }
.orbit-card[data-theme="amber"] .badge-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.badge-content {
    display: flex;
    flex-direction: column;
    text-align: right;
}

body.en .badge-content {
    text-align: left;
}

.badge-title {
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-desc {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.glass-pill {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--widget-border); /* Glowing border in Light Mode */
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--widget-shadow); /* Glowing shadow in Light Mode */
    font-size: 0.72rem;
}

.pill-icon {
    color: #6ee7d4;
    display: flex;
    align-items: center;
}

.pill-text {
    font-weight: 600;
}

.glass-block {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--widget-border); /* Glowing border in Light Mode */
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    box-shadow: var(--widget-shadow); /* Glowing shadow in Light Mode */
    width: 150px;
    text-align: right;
}

body.en .glass-block {
    text-align: left;
}

.block-title {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.block-value {
    font-size: 0.9rem;
    font-weight: 700;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border-color); /* Dynamic progress bar background */
    border-radius: 2px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #9d6eff, #6ee7d4);
    width: 77%;
    border-radius: 2px;
}

/* Dynamic styling for canvas orbit lines */
.connections-canvas ellipse {
    stroke: var(--border-color) !important;
    transition: stroke 0.3s ease;
}

.sparkle {
    position: absolute;
    width: 12px;
    height: 12px;
    color: rgba(110, 231, 212, 0.12);
    pointer-events: none;
    animation: float-sparkle 6s infinite ease-in-out;
}

@keyframes float-sparkle {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.8); opacity: 0.2; }
    50% { transform: translate(8px, -15px) rotate(180deg) scale(1.1); opacity: 0.6; }
}

/* 8. Products Grid Section */
.products-grid-section {
    background: var(--bg-secondary);
    position: relative;
    border-top: 1px solid var(--border-color);
}

.products-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.product-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
}

.product-summary-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    box-shadow: var(--card-shadow-hover);
}

.product-card-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.15) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.product-summary-card:hover .product-card-glow {
    width: 180px;
    height: 180px;
    top: -80px;
    right: -80px;
}

.product-summary-icon {
    font-size: 2.2rem;
    margin-bottom: 24px;
}

.product-summary-title {
    font-size: 1.25rem;
    margin-bottom: 14px;
    color: var(--text-primary);
}

/* التباين اللوني للكرت المميز ذي الخلفية الغامقة الدائمة */
.product-summary-card.featured-highlight h3,
.product-summary-card.featured-highlight .product-summary-desc {
    color: #ffffff !important;
}

.product-summary-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Featured Highlight Card */
.product-summary-card.featured-highlight {
    background: linear-gradient(145deg, rgba(18, 26, 47, 0.7) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: rgba(37, 99, 235, 0.3);
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.product-summary-card.featured-highlight:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.12);
}

.product-summary-card.featured-highlight .product-summary-desc {
    margin-bottom: 0;
}

.featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-blue);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: var(--font-tajawal);
}

/* 9. About Us Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}

.about-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-title {
    font-size: 2.1rem;
    line-height: 1.35;
    margin-bottom: 20px;
}

.about-text-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 24px;
}

.about-text-content p strong {
    color: var(--text-primary);
}

.philosophy-title {
    font-size: 1.15rem;
    color: var(--color-cyan);
    margin-bottom: 10px;
}

.sectors-title {
    font-size: 1.35rem;
    margin-bottom: 24px;
    border-bottom: 1.5px solid var(--border-color);
    padding-bottom: 12px;
}

.sectors-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sector-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    gap: 18px;
    align-items: center;
    transition: var(--transition-fast);
}

.sector-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-hover);
    transform: translateX(-4px); /* For Arabic */
}

body.en .sector-card:hover {
    transform: translateX(4px); /* For English */
}

.sector-icon {
    font-size: 1.8rem;
    background: rgba(157, 110, 255, 0.08);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(157, 110, 255, 0.15);
}

.sector-details h5 {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.sector-details p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 10. Services Section & Modals */
.services-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.services-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--card-shadow);
    transition: var(--transition-smooth);
}

.service-card:hover {
    border-color: var(--color-purple);
    transform: translateY(-6px);
    background: var(--bg-card-hover);
    box-shadow: var(--card-shadow-hover);
}

.service-icon-box {
    font-size: 2.2rem;
    margin-bottom: 24px;
    background: rgba(255,255,255,0.03);
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.service-card:hover .service-icon-box {
    background: rgba(157, 110, 255, 0.1);
    border-color: var(--color-purple);
}

.service-title {
    font-size: 1.18rem;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.service-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Modals layout */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 6, 12, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    width: 100%;
    max-width: 650px;
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1101;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    line-height: 1;
}

.modal-close-btn:hover {
    color: #fff;
}

/* Modal Detailed Contents */
.modal-detailed-title {
    font-size: 1.6rem;
    color: var(--color-cyan);
    margin-bottom: 20px;
}

.modal-detailed-body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.modal-detailed-body p {
    margin-bottom: 20px;
}

.modal-detailed-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.modal-detailed-features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.modal-detailed-features li::before {
    content: '✔';
    color: var(--color-lime);
    font-weight: bold;
}

/* 11. CTA Banner Section */
.cta-banner {
    padding: 40px 0;
}

.cta-card {
    padding: 50px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.cta-title {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.cta-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 650px;
    line-height: 1.7;
}

.cta-action {
    flex-shrink: 0;
}

/* 12. Detailed Products Sections */
.detailed-products-section {
    padding-top: 20px;
}

.product-details-container {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 60px 0;
}

.product-details-container.reverse {
    flex-direction: row-reverse;
}

.details-text {
    flex: 1;
}

.details-heading {
    font-size: 1.8rem;
    margin-bottom: 18px;
    line-height: 1.35;
}

.details-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Info cards inside Enterprise detailed */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    transition: var(--transition-fast);
}

.info-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.info-card h6 {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.info-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 12.5. Data Utility Visual Mockup */
.details-visual {
    flex: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    width: 100%;
}

.data-utility-box {
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.data-utility-box:hover {
    transform: translateY(-5px) rotateY(-3deg);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-cyan);
}

.utility-header {
    background: rgba(15, 23, 42, 0.05);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-theme .utility-header {
    background: rgba(255, 255, 255, 0.02);
}

.utility-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.utility-header .dot.red { background: #ef4444; }
.utility-header .dot.yellow { background: #f59e0b; }
.utility-header .dot.green { background: #10b981; }

.utility-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: auto;
    font-family: var(--font-tajawal);
}

body.en .utility-title {
    margin-right: 0;
    margin-left: auto;
}

.utility-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.source-dest-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.02);
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

body.dark-theme .source-dest-flow {
    background: rgba(255, 255, 255, 0.01);
}

.flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.excel-node .node-icon {
    font-size: 1.6rem;
    color: #10b981;
}

.qb-node .node-icon {
    font-size: 1.6rem;
    color: #0284c7;
}

.node-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.flow-arrow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 60px;
}

.sync-arrows {
    font-size: 1.1rem;
    animation: spin-slow 12s linear infinite;
    color: var(--color-cyan);
}

@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pulse-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
    position: absolute;
    bottom: -6px;
    animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
    50% { opacity: 1; transform: scaleX(1.2); }
}

.drag-drop-zone {
    border: 1.5px dashed var(--border-color);
    background: rgba(15, 23, 42, 0.01);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    transition: var(--transition-fast);
    cursor: pointer;
}

.drag-drop-zone:hover {
    border-color: var(--color-cyan);
    background: rgba(2, 132, 199, 0.03);
}

.upload-cloud {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: var(--color-cyan);
}

.drag-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.file-size-limit {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.sync-action-btn {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sync-action-btn:hover {
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
    transform: translateY(-1px);
}

/* Feature checklist style */
.features-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}

.features-checklist li {
    font-size: 0.92rem;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.details-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 40px 0;
}

/* 13. Contact Us & Client Portal Page */
.contact-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.contact-grid-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
}

.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-details-box {
    padding: 30px;
}

.contact-details-box h3 {
    font-size: 1.3rem;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    font-size: 1.4rem;
}

.contact-text strong {
    font-size: 0.9rem;
    color: var(--text-white);
}

.contact-text p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.contact-text a {
    color: var(--color-cyan);
    text-decoration: none;
    transition: var(--transition-fast);
}

.contact-text a:hover {
    color: #fff;
}

/* Simulated Map Mockup Styling */
.map-simulation {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

.map-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
}

.map-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-red);
    border-radius: 50%;
}

.map-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.map-body {
    height: 220px;
    position: relative;
    background: var(--map-bg);
    background-image: radial-gradient(var(--map-dot) 1px, transparent 1px);
    background-size: 14px 14px;
}

/* CSS simulated roads */
.map-road-h {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 12px;
    background: var(--map-road);
}

.map-road-v {
    position: absolute;
    left: 50%;
    top: 0;
    width: 12px;
    height: 100%;
    background: var(--map-road);
}

.map-marker-pin {
    position: absolute;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    background: var(--color-red);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.pin-pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.4);
    border-radius: 50%;
    top: 50%;
    left: 12px;
    transform: translate(-50%, -50%);
    animation: map-pulse 1.8s infinite;
}

@keyframes map-pulse {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.map-controls {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-btn {
    width: 26px;
    height: 26px;
    background: rgba(18, 26, 47, 0.7);
    border: 1px solid var(--border-color);
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Split Tab Forms Styling */
.forms-card {
    padding: 36px;
}

.form-tabs-header {
    display: flex;
    border-bottom: 1.5px solid var(--border-color);
    margin-bottom: 24px;
    gap: 16px;
}

.form-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 12px 6px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition-fast);
    font-family: var(--font-tajawal);
}

.form-tab-btn.active, .form-tab-btn:hover {
    color: var(--nav-link-active);
    border-bottom-color: var(--color-cyan);
}

.form-tab-content {
    display: none;
}

.form-tab-content.active {
    display: block;
}

.interactive-portal-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: right;
}

body.en .interactive-portal-form {
    text-align: left;
}

.form-group-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-container label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.input-container input, .input-container select, .input-container textarea {
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: var(--font-tajawal);
    outline: none;
    transition: var(--transition-fast);
}

.input-container input:focus, .input-container select:focus, .input-container textarea:focus {
    border-color: var(--color-cyan);
    background: var(--bg-secondary);
}

/* Invalid inputs styling */
.input-container.invalid input, .input-container.invalid select, .input-container.invalid textarea {
    border-color: var(--color-red);
}

/* Shake animation on forms card */
@keyframes form-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(6px); }
    40%, 80% { transform: translateX(-6px); }
}

.forms-card.shake {
    animation: form-shake 0.4s ease;
}

/* Success Card */
.form-success-card {
    text-align: center;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.success-icon {
    width: 60px;
    height: 60px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-lime);
    border-radius: 50%;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--color-lime);
}

.success-title {
    font-size: 1.4rem;
}

.success-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

/* 14. Smart FAQ Accordion */
.faq-accordion-container {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-fast);
}

.faq-item:hover {
    border-color: var(--border-hover);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px 24px;
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    text-align: right;
    font-family: var(--font-tajawal);
}

body.en .faq-question {
    text-align: left;
}

.faq-arrow {
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 24px;
}

.faq-answer p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    padding-bottom: 20px;
}

/* Open accordion states */
.faq-item.active {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.faq-item.active .faq-question {
    color: var(--color-cyan);
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
    color: var(--color-cyan);
}

.faq-item.active .faq-answer {
    max-height: 250px; /* Bounded expand height */
}

/* 15. Footer */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 70px 0 30px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
}

.footer-brand-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.footer-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 340px;
}

.footer-links-col h4, .footer-contact-col h4 {
    font-size: 1.15rem;
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.88rem;
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-cyan);
}

.footer-contact-col p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.footer-contact-col a {
    color: var(--color-cyan);
    text-decoration: none;
}

.footer-divider {
    height: 1px;
    background: var(--border-color);
    margin: 40px 0 20px 0;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-contact-col a[href^="tel:"] {
    white-space: nowrap;
}

.footer-bottom a {
    color: var(--text-secondary);
    text-decoration: none;
}

/* Footer Social Icons */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: transparent;
    transition: var(--transition-fast);
}

.footer-social-link svg {
    width: 18px;
    height: 18px;
}

.footer-social-link:hover {
    color: #ffffff;
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    transform: translateY(-2px);
}

.footer-social-link:focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 2px;
}

/* 16. Floating Simulated WhatsApp Chat Widget */
.whatsapp-floating-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.whatsapp-floating-toggle {
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    position: relative;
    transition: var(--transition-smooth);
    animation: w-pulse 2s infinite;
    outline: none;
}

.whatsapp-floating-toggle:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-floating-icon {
    font-size: 1.7rem;
}

.whatsapp-floating-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--color-red);
    color: var(--text-white);
    font-size: 0.72rem;
    font-weight: 800;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #25D366;
    font-family: var(--font-outfit);
}

.whatsapp-chat-window {
    width: 330px;
    background: rgba(18, 26, 47, 0.92);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border-hover);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom left;
    z-index: 1000;
}

.whatsapp-chat-window.hidden {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    pointer-events: none;
    display: none !important;
}

.chat-window-header {
    background: #075E54;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.chat-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

body.en .chat-user-info {
    text-align: left;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    background-color: var(--bg-primary);
}

.chat-user-details {
    display: flex;
    flex-direction: column;
}

.chat-user-name {
    font-size: 0.88rem;
    font-weight: 700;
}

.chat-user-status {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-online-dot {
    width: 6px;
    height: 6px;
    background-color: #25D366;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px #25D366;
}

.chat-close-btn {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: var(--transition-fast);
}

.chat-close-btn:hover {
    color: #fff;
}

.chat-window-body {
    padding: 18px;
    background: #0b101c;
    background-image: radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 260px;
    overflow-y: auto;
    text-align: right;
}

body.en .chat-window-body {
    text-align: left;
}

.chat-message {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    max-width: 85%;
    display: flex;
    flex-direction: column;
}

.chat-message.received {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-top-right-radius: 2px;
    align-self: flex-start;
}

body.en .chat-message.received {
    border-top-right-radius: 12px;
    border-top-left-radius: 2px;
}

.chat-time {
    font-size: 0.58rem;
    color: var(--text-muted);
    align-self: flex-end;
    margin-top: 4px;
    font-family: var(--font-outfit);
}

.chat-window-footer {
    padding: 10px 14px;
    background: rgba(7, 11, 19, 0.85);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-window-footer input {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.85rem;
    font-family: var(--font-tajawal);
    outline: none;
}

.chat-window-footer input:focus {
    border-color: var(--color-cyan);
}

.chat-send-btn {
    background: #25D366;
    color: #000;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.chat-send-btn:hover {
    transform: scale(1.05);
}

.send-icon {
    width: 18px;
    height: 18px;
    transform: scaleX(-1);
}

@keyframes w-pulse {
    0% { box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0); }
}

/* 17. Responsive Layout Media Queries */
@media (max-width: 992px) {
    section {
        padding: 60px 0;
    }
    
    .hero {
        height: auto;
        min-height: 580px;
        padding-top: 100px;
        padding-bottom: 50px;
    }
    
    .slide {
        position: relative;
        height: auto;
        opacity: 1;
        pointer-events: auto;
        display: none;
        padding: 0;
    }
    
    .slide.active {
        display: flex;
    }
    
    .hero-heading {
        font-size: 2.3rem;
    }
    
    .hero-subheading {
        font-size: 1.05rem;
    }
    
    .products-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-summary-card.featured-highlight {
        grid-column: span 2;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .services-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-details-container, .product-details-container.reverse {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .features-checklist li {
        justify-content: center;
    }
    
    .info-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid-container {
        grid-template-columns: 1fr;
    }
    
    .cta-card {
        flex-direction: column;
        text-align: center;
        padding: 40px;
    }
}

@media (max-width: 768px) {
    /* Mobile Menu Drawer style */
    .nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: calc(100vh - 80px);
        background: var(--bg-secondary);
        flex-direction: column;
        align-items: stretch;
        padding: 40px 24px;
        gap: 24px;
        border-right: 1.5px solid var(--border-color);
        transition: var(--transition-smooth);
        z-index: 99;
    }
    
    body.en .nav-menu {
        right: auto;
        left: -100%;
        border-right: none;
        border-left: 1.5px solid var(--border-color);
    }
    
    .nav-menu.mobile-active {
        right: 0;
    }
    
    body.en .nav-menu.mobile-active {
        left: 0;
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    /* Hamburger Active Rotation to X */
    .mobile-toggle.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-toggle.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    .desktop-only-btn, .header-cta {
        display: none !important;
    }
    
    .mobile-only-btn {
        display: block;
    }
    
    .hero-heading {
        font-size: 1.9rem;
    }
    
    .products-grid-container {
        grid-template-columns: 1fr;
    }
    
    .product-summary-card.featured-highlight {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .services-grid-container {
        grid-template-columns: 1fr;
    }
    
    .forms-card {
        padding: 24px;
    }
    
    .form-group-row {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .whatsapp-floating-container {
        bottom: 20px;
        left: 20px;
    }
    
    .whatsapp-chat-window {
        width: 290px;
    }
    
    .prev-btn, .next-btn {
        display: none; /* Hide slider arrows on phone layout */
    }
}

/* =================================================================
 * 13. Ocean Ascent Introduction Styles (بوابات الصعود من الأعماق)
 * ================================================================= */
:root {
  --abyss-deep: #00030a;
  --abyss-glow: #000c24;
  --sea-mid: #003060;
  --sea-turquoise: #0077b6;
  --sea-cyan: #00b4d8;
  --sea-surface: #90e0ef;
  --sun-glow: #e0f7fa;
}

body.intro-lock {
  overflow: hidden;
  height: 100vh;
}

#ocean {
  position: fixed;
  inset: 0;
  z-index: 10000; /* فوق الهيدر والقائمة الرئيسية للموقع */
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
  background-color: var(--abyss-deep);
}

#ocean.done {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#ocean-bg {
  position: absolute;
  top: -200vh;
  left: 0;
  width: 100%;
  height: 300vh;
  background: 
    radial-gradient(circle at 50% 0%, rgba(255, 253, 240, 0.18) 0%, transparent 35%),
    linear-gradient(to top, 
      var(--abyss-deep) 0%, 
      var(--abyss-glow) 15%, 
      #001a3d 30%, 
      var(--sea-mid) 45%, 
      #005f73 60%, 
      #0a9396 72%, 
      var(--sea-cyan) 83%, 
      var(--sea-surface) 92%, 
      #caf0f8 97%, 
      var(--sun-glow) 100%
    );
  will-change: transform;
}

.light-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, rgba(224, 247, 250, 0.45) 0%, rgba(0, 180, 216, 0.12) 45%, transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.1;
  transform-origin: 50% 0%;
  will-change: opacity, transform;
}

#bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.rays-container {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 1;
}

.rays {
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 180deg at 50% 25%,
    transparent 0deg,
    rgba(224, 247, 250, 0.18) 12deg,
    transparent 24deg,
    rgba(255, 253, 220, 0.12) 36deg,
    transparent 48deg,
    rgba(224, 247, 250, 0.22) 65deg,
    transparent 80deg,
    rgba(255, 253, 220, 0.08) 100deg,
    transparent 120deg,
    rgba(224, 247, 250, 0.15) 135deg,
    transparent 150deg,
    rgba(255, 253, 220, 0.25) 175deg,
    transparent 200deg,
    rgba(224, 247, 250, 0.12) 220deg,
    transparent 240deg,
    rgba(255, 253, 220, 0.22) 265deg,
    transparent 290deg,
    rgba(224, 247, 250, 0.15) 315deg,
    transparent 335deg
  );
  filter: blur(10px);
  transform-origin: 50% 25%;
  animation: rayShimmer 20s linear infinite;
}

.rays-secondary {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 160deg at 50% 25%,
    transparent 0deg,
    rgba(255, 253, 220, 0.12) 15deg,
    transparent 35deg,
    rgba(224, 247, 250, 0.18) 50deg,
    transparent 70deg,
    rgba(255, 253, 220, 0.08) 95deg,
    transparent 115deg,
    rgba(224, 247, 250, 0.2) 140deg,
    transparent 165deg,
    rgba(255, 253, 220, 0.15) 190deg,
    transparent 215deg,
    rgba(224, 247, 250, 0.22) 245deg,
    transparent 270deg,
    rgba(255, 253, 220, 0.1) 295deg,
    transparent 320deg
  );
  filter: blur(12px);
  transform-origin: 50% 25%;
  animation: rayShimmerReverse 25s linear infinite;
}

@keyframes rayShimmer {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes rayShimmerReverse {
  0% { transform: rotate(0deg) scale(1.03); }
  50% { transform: rotate(-4deg) scale(0.98); }
  100% { transform: rotate(0deg) scale(1.03); }
}

.sealife {
  position: absolute;
  opacity: 0.9;
  will-change: transform;
  z-index: 3;
  mix-blend-mode: screen;
}

.fish1 {
  top: 62%;
  left: -120px;
  width: 60px;
}

.fish2 {
  top: 38%;
  right: -120px;
  width: 70px;
}

.fish3 {
  top: 78%;
  left: -100px;
  width: 45px;
}

.fish4 {
  top: 22%;
  left: -120px;
  width: 50px;
}

.fish5 {
  top: 15%;
  right: -120px;
  width: 40px;
}

.sealife img {
  display: block;
  width: 100%;
  height: auto;
}

.fish1 img {
  transform: scaleX(-1);
  animation: fishFloat2 3s ease-in-out infinite;
}

.fish2 img {
  transform: scaleX(-1);
  animation: fishFloat2 3.5s ease-in-out infinite;
}

.fish3 img {
  transform: scaleX(-1);
  filter: blur(0.8px);
  animation: fishFloat2 2.5s ease-in-out infinite;
}

.fish4 img {
  transform: scaleX(-1);
  animation: fishFloat2 3.2s ease-in-out infinite;
}

.fish5 img {
  filter: blur(1.2px);
  animation: fishFloat1 2.8s ease-in-out infinite;
}

@keyframes fishFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg) skewX(0deg); }
  25% { transform: translateY(-4px) rotate(1deg) skewX(4deg); }
  50% { transform: translateY(-8px) rotate(2deg) skewX(0deg); }
  75% { transform: translateY(-4px) rotate(1deg) skewX(-4deg); }
}

@keyframes fishFloat2 {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg) skewX(0deg); }
  25% { transform: scaleX(-1) translateY(-3px) rotate(-1deg) skewX(-4deg); }
  50% { transform: scaleX(-1) translateY(-6px) rotate(-2deg) skewX(0deg); }
  75% { transform: scaleX(-1) translateY(-3px) rotate(-1deg) skewX(4deg); }
}

.coral {
  position: absolute;
  bottom: -2%;
  opacity: 0.85;
  will-change: transform;
  z-index: 3;
}

.bg-coral {
  opacity: 0.35;
  z-index: 1;
}

.c1 { left: 8%; }
.c2 { right: 12%; }
.c3 { left: 45%; }
.c4 { left: 28%; }
.c5 { right: 32%; }

.coral svg {
  display: block;
  transform-origin: bottom center;
  animation: coralSway 6s ease-in-out infinite;
}

.bg-coral svg {
  filter: blur(1.8px);
  animation: coralSway 8s ease-in-out infinite;
}

.c3 svg {
  animation-delay: -2s;
  filter: blur(0.8px);
  opacity: 0.6;
}

.c5 svg {
  animation-delay: -4s;
}

@keyframes coralSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

.intro-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
  font-family: 'Tajawal', sans-serif;
  width: 90%;
  z-index: 10;
  opacity: 1;
  will-change: opacity, transform;
}

.intro-msg .intro-heading {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.4;
  background: linear-gradient(135deg, #ffffff 40%, #c4f3f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 15px rgba(0, 5, 15, 0.85));
}

.intro-msg p {
  margin-top: 1rem;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  opacity: 0.95;
  color: #8fe8f5;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 10px rgba(0, 5, 15, 0.95);
}

.scroll-hint {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  color: #aae8f5;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 10;
  animation: float 2.5s ease-in-out infinite;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

#skipIntro, #langBtn {
  position: absolute;
  top: 1.2rem;
  z-index: 110;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.55rem 1.4rem;
  border-radius: 99px;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

#skipIntro::after, #langBtn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 99px;
  background: transparent;
  border: 1.5px solid rgba(0, 245, 212, 0.55);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.4);
  opacity: 0;
  transform: scale(1.0);
  transition: all 0.5s cubic-bezier(0.1, 0.8, 0.3, 1);
  pointer-events: none;
}

#skipIntro {
  inset-inline-end: 1.2rem;
}

#langBtn {
  inset-inline-start: 1.2rem;
}

#skipIntro:hover, #langBtn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 180, 216, 0.35);
}

#skipIntro:hover::after, #langBtn:hover::after {
  opacity: 1;
  transform: scale(1.15);
  inset: -6px;
  border-color: rgba(0, 245, 212, 0);
  box-shadow: 0 0 20px rgba(0, 245, 212, 0);
}

#skipIntro:active, #langBtn:active {
  transform: translateY(1px);
}

.click-ripple {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.25), inset 0 0 15px rgba(0, 245, 212, 0.25);
  background: radial-gradient(circle, rgba(200, 245, 255, 0.05) 0%, transparent 80%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10;
  animation: rippleEffect 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes rippleEffect {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

.flash-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 11000; /* فوق شاشة المحيط #ocean */
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

@media(prefers-reduced-motion: reduce) {
  .scroll-hint, .sealife, .coral, .rays {
    animation: none !important;
  }
}


/* ==========================================================================
   13. LIGHT THEME PREMIUM ENHANCEMENTS & OCEAN DEPTH GRADIENT
   ========================================================================== */

/* 13.1. Gradient of Ocean depth descent on scroll */
body:not(.dark-theme) {
    background: linear-gradient(to bottom, 
        #ffffff 0%, 
        #f0f9ff 18%, 
        #e0f2fe 38%, 
        #bae6fd 58%, 
        #0a1931 78%, 
        #050b14 100%
    );
    background-attachment: scroll;
    transition: background 0.5s ease, color 0.3s ease;
}

/* Override body.dark-theme background to keep it dark solid navy */
body.dark-theme {
    background: #060913;
}

/* 13.2. Ambient Glow Orbs multiply blend in Light Mode */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.08; 
    mix-blend-mode: multiply; 
    transition: opacity 0.3s ease;
}

body.dark-theme .glow-orb {
    opacity: 0.15;
    mix-blend-mode: screen;
}

/* 13.3. Premium Cards Top Borders & Accent Hover Shadows in Light Mode */
body:not(.dark-theme) .products-grid-container .product-summary-card:nth-child(1) {
    border-top: 3px solid var(--color-blue);
}
body:not(.dark-theme) .products-grid-container .product-summary-card:nth-child(2) {
    border-top: 3px solid var(--color-purple);
}
body:not(.dark-theme) .product-summary-card.featured-highlight {
    border-top: 3px solid var(--color-cyan);
}

body:not(.dark-theme) .products-grid-container .product-summary-card:nth-child(1):hover {
    box-shadow: 0 20px 45px rgba(37, 99, 235, 0.12);
}
body:not(.dark-theme) .products-grid-container .product-summary-card:nth-child(2):hover {
    box-shadow: 0 20px 45px rgba(124, 58, 237, 0.12);
}
body:not(.dark-theme) .product-summary-card.featured-highlight:hover {
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.12);
}

/* 13.4. Elegant Text Gradient for Section Titles in Light Mode */
body:not(.dark-theme) .section-title {
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--color-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* 13.5. Contrast Adaptations for Bottom Sections (FAQ, Contact, Map, Footer) */
body:not(.dark-theme) .faq-section,
body:not(.dark-theme) .contact-section {
    color: #ffffff;
}

body:not(.dark-theme) .faq-section .section-title,
body:not(.dark-theme) .contact-section .section-title {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 40%, var(--color-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not(.dark-theme) .faq-section .section-subtitle,
body:not(.dark-theme) .contact-section .section-subtitle {
    color: #cbd5e1;
}

/* FAQ Accordion items adjustments in Light Theme on dark bg */
body:not(.dark-theme) .faq-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body:not(.dark-theme) .faq-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

body:not(.dark-theme) .faq-question {
    color: #ffffff !important;
}

body:not(.dark-theme) .faq-arrow {
    color: #94a3b8;
}

body:not(.dark-theme) .faq-answer p {
    color: #cbd5e1 !important;
}

body:not(.dark-theme) .faq-item.active {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-cyan);
}

body:not(.dark-theme) .faq-item.active .faq-question {
    color: var(--color-cyan) !important;
}

body:not(.dark-theme) .faq-item.active .faq-arrow {
    color: var(--color-cyan) !important;
}

/* Contact Details text adjustments in Light Theme on dark bg */
body:not(.dark-theme) .contact-details-box h3 {
    color: #ffffff;
}
body:not(.dark-theme) .contact-text strong {
    color: #ffffff;
}
body:not(.dark-theme) .contact-text p {
    color: #cbd5e1;
}
body:not(.dark-theme) .contact-item .contact-icon {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
}

/* Map simulation adjustments in Light Theme on dark bg */
body:not(.dark-theme) .map-simulation {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
body:not(.dark-theme) .map-title {
    color: #ffffff;
}
body:not(.dark-theme) .map-body {
    background: #070e22;
}
body:not(.dark-theme) .map-road-h,
body:not(.dark-theme) .map-road-v {
    background: rgba(255, 255, 255, 0.05);
}
body:not(.dark-theme) .map-marker-pin {
    color: #ffffff;
}

/* Footer text colors in Light Theme on dark bg */
body:not(.dark-theme) .footer {
    background: #030712;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}
body:not(.dark-theme) .footer-col h4 {
    color: #ffffff;
}
body:not(.dark-theme) .footer-col ul li a {
    color: #94a3b8;
}
body:not(.dark-theme) .footer-col ul li a:hover {
    color: #ffffff;
}
body:not(.dark-theme) .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #64748b;
}


/* ==========================================================================
   14. COMBINED CHEQUES & SANID SOLUTIONS CARD LAYOUT
   ========================================================================== */

.combined-products-card {
    display: flex;
    gap: 50px;
    background: #ffffff; /* White background by default in light mode */
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 48px;
    margin: 50px 0;
    box-shadow: var(--card-shadow);
    position: relative;
    transition: var(--transition-smooth);
    z-index: 1;
}

body.dark-theme .combined-products-card {
    background: var(--bg-card); /* Adapts to dark theme card background */
    border-color: var(--border-color);
}

.combined-products-card .product-details-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.combined-products-card .product-details-column .details-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.combined-products-card .product-details-column .details-description {
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.combined-products-card .product-details-column .features-checklist {
    margin-bottom: auto; /* Pushes the button to the bottom so buttons align perfectly */
    padding-bottom: 30px;
}

.combined-products-card .column-divider {
    width: 1px;
    background: var(--border-color);
    align-self: stretch;
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    .combined-products-card {
        flex-direction: column;
        gap: 40px;
        padding: 32px;
    }
    
    .combined-products-card .column-divider {
        width: 100%;
        height: 1px;
        background: var(--border-color);
    }
}


/* ==========================================================================
   15. CONTRAST & ACCENT FIXES FOR LIGHT THEME SCROLL GRADIENT
   ========================================================================== */

/* 15.1. Section 4 (Data Tool) Contrast Adjustments on Dark Navy Background */
body:not(.dark-theme) #data-tool-details {
    color: #ffffff !important;
}
body:not(.dark-theme) #data-tool-details .details-heading {
    color: #ffffff !important;
}
body:not(.dark-theme) #data-tool-details .details-description {
    color: #cbd5e1 !important;
}
body:not(.dark-theme) #data-tool-details .features-checklist li {
    color: #ffffff !important;
}
body:not(.dark-theme) #data-tool-details .badge-cyan {
    background: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(2, 132, 199, 0.4) !important;
}

/* 15.2. Make Contact Section Transparent to show body's dark navy gradient */
body:not(.dark-theme) .contact-section {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 15.3. Keep Contact Forms Card readable (dark text on white card background) */
body:not(.dark-theme) .forms-card {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
body:not(.dark-theme) .forms-card h3,
body:not(.dark-theme) .forms-card label,
body:not(.dark-theme) .forms-card .form-tab-btn {
    color: var(--text-primary) !important;
}
body:not(.dark-theme) .forms-card .form-tab-btn:not(.active) {
    color: var(--text-muted) !important;
    background: rgba(15, 23, 42, 0.03) !important;
}
body:not(.dark-theme) .forms-card .form-tab-btn.active {
    background: var(--color-blue) !important;
    color: #ffffff !important;
}
body:not(.dark-theme) .forms-card input,
body:not(.dark-theme) .forms-card select,
body:not(.dark-theme) .forms-card textarea {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
body:not(.dark-theme) .forms-card input::placeholder,
body:not(.dark-theme) .forms-card textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Adjust contact details item descriptions color */
body:not(.dark-theme) .contact-details-box .contact-item p a {
    color: #38bdf8 !important;
}


/* ==========================================================================
   16. FOOTER CONTRAST FIX FOR LIGHT THEME
   ========================================================================== */

body:not(.dark-theme) .footer {
    background: #030712 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body:not(.dark-theme) .footer .logo-text {
    color: #ffffff !important;
}

body:not(.dark-theme) .footer .logo-text .accent-text {
    color: #38bdf8 !important;
}

body:not(.dark-theme) .footer-desc {
    color: #cbd5e1 !important;
}

body:not(.dark-theme) .footer-links-col h4,
body:not(.dark-theme) .footer-contact-col h4 {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.dark-theme) .footer-links li a {
    color: #94a3b8 !important;
    transition: color var(--transition-fast) !important;
}

body:not(.dark-theme) .footer-links li a:hover {
    color: #ffffff !important;
}

body:not(.dark-theme) .footer-contact-col p {
    color: #cbd5e1 !important;
}

body:not(.dark-theme) .footer-divider {
    background: rgba(255, 255, 255, 0.05) !important;
}

body:not(.dark-theme) .footer-bottom .copyright {
    color: #64748b !important;
}

body:not(.dark-theme) .footer-bottom .copyright a {
    color: #38bdf8 !important;
}


/* ==========================================================================
   17. CONTACT DETAILS CARD CONTRAST OVERRIDES FOR LIGHT THEME
   ========================================================================== */

body:not(.dark-theme) .contact-details-box {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
}

body:not(.dark-theme) .contact-details-box h3 {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body:not(.dark-theme) .contact-text strong {
    color: var(--text-primary) !important;
}

body:not(.dark-theme) .contact-text p {
    color: var(--text-secondary) !important;
}

body:not(.dark-theme) .contact-text p a {
    color: var(--color-blue) !important;
    font-weight: bold !important;
}

body:not(.dark-theme) .contact-text p a:hover {
    color: var(--color-cyan) !important;
}


/* ==========================================================================
   18. WHATSAPP CHAT CONTRAST FIX
   ========================================================================== */

/* Force chat messages to always have light/white text because the chat window background is always dark */
.chat-message.received {
    color: #ffffff !important;
}

.chat-message.received p {
    color: #ffffff !important;
}


/* ==========================================================================
   19. SWAPPED HEADER LAYOUT STYLES (LOGO AND CTA SWAP)
   ========================================================================== */

.logo-area .header-cta {
    display: inline-flex;
}

/* Adjust mobile layout spacing and ordering after swapping */
@media (max-width: 991px) {
    .logo-area {
        display: none !important;
    }
    
    .nav-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    
    .nav-actions .logo-link {
        order: 1;
    }
    
    .nav-actions .theme-toggle-btn {
        order: 2;
        margin-inline-start: auto; /* Pushes toggles to the opposite side of the logo */
    }
    
    .nav-actions .mobile-toggle {
        order: 3;
    }
}


/* ==========================================================================
   20. READ MORE LINK HOVER CONTRAST FIX FOR LIGHT THEME
   ========================================================================== */

body:not(.dark-theme) .btn-link:hover {
    color: var(--color-blue) !important;
}


/* ==========================================================================
   21. ROBUST CARD ACCENT BORDERS & HOVER SHADOWS (ORDER-INDEPENDENT)
   ========================================================================== */

/* 21.1. Enterprise Solutions (ERP) Card - Blue Accent */
body:not(.dark-theme) .product-summary-card:has(a[href="#enterprise-details"]) {
    border-top: 3px solid var(--color-blue) !important;
}
body:not(.dark-theme) .product-summary-card:has(a[href="#enterprise-details"]):hover {
    box-shadow: 0 20px 45px rgba(37, 99, 235, 0.12) !important;
}

/* 21.2. CoreCheques Card - Purple Accent */
body:not(.dark-theme) .product-summary-card:has(a[href="#cheques-details"]) {
    border-top: 3px solid var(--color-purple) !important;
}
body:not(.dark-theme) .product-summary-card:has(a[href="#cheques-details"]):hover {
    box-shadow: 0 20px 45px rgba(124, 58, 237, 0.12) !important;
}

/* 21.3. Sanid Solutions (Invoicing) Card - Blue Accent */
body:not(.dark-theme) .product-summary-card:has(a[href="#sanid-solutions-details"]) {
    border-top: 3px solid var(--color-blue) !important;
}
body:not(.dark-theme) .product-summary-card:has(a[href="#sanid-solutions-details"]):hover {
    box-shadow: 0 20px 45px rgba(37, 99, 235, 0.12) !important;
}

/* 21.4. Export/Import Data Card - Lime Accent */
body:not(.dark-theme) .product-summary-card:has(a[href="#data-tool-details"]) {
    border-top: 3px solid var(--color-lime) !important;
}
body:not(.dark-theme) .product-summary-card:has(a[href="#data-tool-details"]):hover {
    box-shadow: 0 20px 45px rgba(16, 185, 129, 0.12) !important;
}

/* 21.5. Delegates App (Sanid Mobile Highlight) Card - Cyan Accent */
body:not(.dark-theme) .product-summary-card.featured-highlight {
    border-top: 3px solid var(--color-cyan) !important;
}
body:not(.dark-theme) .product-summary-card.featured-highlight:hover {
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.12) !important;
}


/* ==========================================================================
   22. SANID ROBOT SVG ANIMATION STYLING & ACCENT COLORS
   ========================================================================== */

.product-summary-card.featured-highlight {
    position: relative;
    overflow: visible !important; /* Crucial: allows antennas to overflow outside the card! */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.featured-robot-container {
    width: 140px;
    height: 180px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.featured-robot-container svg {
    width: 220px;
    height: 275px;
    position: absolute;
    top: -65px; /* Pulls the robot up so its antennas physically extend outside the top border! */
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
    filter: drop-shadow(0 12px 20px rgba(110, 231, 212, 0.15));
}

.product-summary-card.featured-highlight .featured-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    gap: 10px;
}

.product-summary-card.featured-highlight .featured-text .product-summary-title {
    margin-bottom: 0px;
}

.product-summary-card.featured-highlight .featured-text .product-summary-desc {
    margin-bottom: 12px;
}

/* Light Theme colors matching Sanid's violet-cyan palette */
body:not(.dark-theme) .product-summary-card.featured-highlight {
    background: linear-gradient(135deg, rgba(157, 110, 255, 0.08) 0%, rgba(110, 231, 212, 0.08) 100%) !important;
    border: 1px solid rgba(157, 110, 255, 0.25) !important;
    border-top: 3px solid #9D6EFF !important; /* Bold Sanid purple top border */
}

body:not(.dark-theme) .product-summary-card.featured-highlight:hover {
    background: linear-gradient(135deg, rgba(157, 110, 255, 0.12) 0%, rgba(110, 231, 212, 0.12) 100%) !important;
    border-color: rgba(110, 231, 212, 0.45) !important;
    box-shadow: 0 20px 45px rgba(157, 110, 255, 0.15), 0 0 25px rgba(110, 231, 212, 0.08) !important;
}

/* Dark Theme colors matching Sanid's violet-cyan palette */
body.dark-theme .product-summary-card.featured-highlight {
    background: linear-gradient(135deg, rgba(18, 26, 47, 0.6) 0%, rgba(110, 231, 212, 0.05) 100%) !important;
    border: 1px solid rgba(157, 110, 255, 0.2) !important;
    border-top: 3px solid #9D6EFF !important;
}

body.dark-theme .product-summary-card.featured-highlight:hover {
    border-color: #6EE7D4 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(110, 231, 212, 0.12) !important;
}

/* Responsive adjustment for mobile screens */
@media (max-width: 991px) {
    .product-summary-card.featured-highlight {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
        padding-top: 70px !important; /* Extra padding to prevent top overflow collision on mobile */
    }
    
    .featured-robot-container {
        width: 120px;
        height: 120px;
    }
    
    .featured-robot-container svg {
        width: 180px;
        height: 225px;
        top: -65px;
    }
    
    .product-summary-card.featured-highlight .featured-text {
        align-items: center !important;
    }
}


/* ==========================================================================
   23. SANID ROBOT RESIZE (2X) & LIGHT THEME TEXT CONTRAST FIXES
   ========================================================================== */

/* 23.1. Double the size of the Sanid Robot SVG and float it higher */
.product-summary-card.featured-highlight .featured-robot-container {
    width: 200px !important; /* expanded column width to make space for larger robot */
    height: 220px !important;
}

.product-summary-card.featured-highlight .featured-robot-container svg {
    width: 380px !important; /* doubled dimensions for visual punch */
    height: 475px !important;
    top: -125px !important; /* floats higher to keep antennas outside the card */
    filter: drop-shadow(0 25px 40px rgba(110, 231, 212, 0.25)) !important;
}

/* 23.2. Coordinate text colors in Light Theme (No white-on-white text) */
body:not(.dark-theme) .product-summary-card.featured-highlight h3.product-summary-title {
    color: #2e1065 !important; /* Deep royal violet for excellent readability */
}

body:not(.dark-theme) .product-summary-card.featured-highlight .product-summary-desc {
    color: #334155 !important; /* Clean slate dark gray for perfect description contrast */
}

body:not(.dark-theme) .product-summary-card.featured-highlight .featured-badge {
    background: rgba(157, 110, 255, 0.14) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(157, 110, 255, 0.3) !important;
    box-shadow: 0 2px 10px rgba(157, 110, 255, 0.05) !important;
}

/* 23.3. Responsive Mobile overrides for the enlarged robot */
@media (max-width: 991px) {
    .product-summary-card.featured-highlight {
        padding-top: 130px !important; /* extra top padding for mobile layout to fit the giant robot */
    }
    
    .product-summary-card.featured-highlight .featured-robot-container {
        width: 160px !important;
        height: 140px !important;
    }
    
    .product-summary-card.featured-highlight .featured-robot-container svg {
        width: 280px !important;
        height: 350px !important;
        top: -125px !important;
    }
}


/* ==========================================================================
   24. SANID ROBOT RESIZE (35% SMALLER) & BOTTOM ALIGNMENT
   ========================================================================== */

/* Resize robot to 35% smaller (247px width) and align tentacles to the bottom edge of the card */
.product-summary-card.featured-highlight .featured-robot-container {
    align-self: stretch !important; /* stretches the container to match full card height */
    height: auto !important;
    width: 160px !important;
}

.product-summary-card.featured-highlight .featured-robot-container svg {
    width: 310px !important; /* Scaled up and balanced */
    height: 388px !important; /* Scaled up and balanced */
    bottom: 0px !important; /* touches the bottom of the card */
    top: auto !important; /* overrides previous top offset */
    left: 50% !important;
    transform: translateX(-50%) !important;
    filter: drop-shadow(0 15px 25px rgba(110, 231, 212, 0.2)) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    .product-summary-card.featured-highlight {
        padding-top: 100px !important;
    }
    
    .product-summary-card.featured-highlight .featured-robot-container {
        align-self: center !important;
        width: 100% !important;
        height: 140px !important;
    }
    
    .product-summary-card.featured-highlight .featured-robot-container svg {
        width: 180px !important;
        height: 225px !important;
        bottom: 0px !important;
        top: auto !important;
    }
}


/* ==========================================================================
   25. SNUG CARD PADDINGS (ELIMINATING LARGE EMPTY SIDE SPACE ON CARDS)
   ========================================================================== */

/* 25.1. Product Summary Grid Cards */
.product-summary-card {
    padding: 24px 20px !important; /* Reduced from 36px 30px */
}

/* 25.2. Sales Rep App (Featured Highlight) Card */
.product-summary-card.featured-highlight {
    padding: 24px 24px !important; /* Snugger padding */
}

/* 25.3. CoreCheques & Invoicing (Combined) Card */
.combined-products-card {
    padding: 28px 24px !important; /* Reduced from 48px */
    gap: 32px !important; /* Reduced column spacing from 50px */
}

/* 25.4. Service Grid Cards */
.service-card {
    padding: 24px 20px !important; /* Reduced from 36px 30px */
}

/* 25.5. Contact Info Box & Forms Cards */
.forms-card {
    padding: 24px 20px !important; /* Reduced from 36px */
}

.contact-details-box {
    padding: 22px 18px !important; /* Reduced from 30px */
}

/* 25.6. Responsive Adjustments for Mobile Viewports */
@media (max-width: 991px) {
    .product-summary-card.featured-highlight {
        padding: 100px 20px 24px 20px !important; /* Keep top spacing for robot, snug side padding */
    }
    
    .combined-products-card {
        padding: 24px 16px !important;
        gap: 20px !important;
    }
    
    .forms-card {
        padding: 20px 16px !important;
    }
    
    .contact-details-box {
        padding: 18px 14px !important;
    }
}

/* ==========================================================================
   26. HERO SPLIT RESPONSIVE MOBILE OVERRIDES
   ========================================================================== */
@media (max-width: 991px) {
    .hero-split {
        padding: 110px 0 40px 0;
        min-height: auto;
    }

    .hero-split-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-split-text {
        align-items: center;
        text-align: center;
    }

    body.en .hero-split-text {
        text-align: center;
    }

    .hero-split-heading {
        font-size: 2.2rem;
        margin-bottom: 16px;
    }

    .hero-split-subheading {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .hero-split-cta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero-split-visual {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .scene-container {
        max-width: 100%;
        height: 380px;
    }

    .center-card-wrapper {
        width: 216px; /* Full size on mobile, matching desktop upscaled size */
        height: 264px; /* Full size on mobile, matching desktop upscaled size */
    }

    .action-btn {
        display: none !important; /* Hide orbit, speed, and default prompt buttons on mobile */
    }

    .action-btn-mobile {
        display: flex !important; /* Show "Ask Sanid" button on mobile */
        width: 100%;
        max-width: 160px;
        height: 40px;
        border-radius: 9999px;
        background: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
        color: #ffffff !important;
        border: none;
        font-family: var(--font-tajawal);
        font-weight: 700;
        font-size: 0.92rem;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(157, 110, 255, 0.3);
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .action-btn-mobile:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(157, 110, 255, 0.4);
    }

    .center-card-wrapper.morphed {
        width: 92%; /* Slightly wider on mobile for text clearance */
        height: 62px; /* 120% of 52px */
    }

    .center-card-wrapper.morphed.has-response {
        height: 390px; /* Increased from 336px to give a large and readable Q&A area */
    }
}

@media (max-width: 480px) {
    .hero-split-heading {
        font-size: 1.8rem;
    }
    
    .scene-container {
        height: 340px;
    }
}

/* ==========================================================================
   27. DARK MODE OVERRIDES FOR MORPHED DIALOG CARD
   ========================================================================== */
body.dark-theme .center-card-wrapper.morphed .center-card {
    background: rgba(10, 15, 30, 0.78) !important; /* Deep dark blue glass background */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(157, 110, 255, 0.18) !important;
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(157, 110, 255, 0.05) !important; /* Softened, elegant glow in Dark Mode */
}

/* ==========================================================================
   28. MOBILE PERFORMANCE ENHANCEMENTS FOR MASCOT ANIMATIONS
   ========================================================================== */
@media (max-width: 768px) {
    /* Disable SVG mascot animations on mobile to prevent CPU/rendering overhead */
    .default-float, .default-pulse, .blink-anim {
        animation: none !important;
        transform: none !important;
    }

    /* Hide orbiting cards and connecting lines canvas entirely on mobile to save CPU/GPU and prevent overlap */
    .orbit-card, .connections-canvas {
        display: none !important;
    }

    /* Hide the intro loading screen completely on mobile to prevent layout flashes */
    #ocean {
        display: none !important;
    }
    
    body.intro-lock {
        overflow: visible !important;
        overflow-x: hidden !important;
    }

    /* Enlarge the morphed dialog response box area on mobile */
    .center-card-wrapper.morphed .advisor-response-container {
        max-height: 250px !important;
    }
}



/* ==========================================================================
   29. LEGAL dropdown AND POLICY PAGES STYLES
   ========================================================================== */

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 220px;
    z-index: 1000;
    box-shadow: var(--header-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-item {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    text-align: right;
}

body.en .nav-dropdown-item {
    text-align: left;
}

.nav-dropdown-item:hover {
    background: rgba(124, 58, 237, 0.08);
    color: var(--color-purple);
}

@media (max-width: 768px) {
    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 12px;
        padding-right: 12px;
        display: block;
    }
    
    .nav-dropdown-item {
        padding: 8px 16px;
        font-size: 0.95rem;
    }
}

@media (min-width: 769px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr 1.2fr; /* Adjusted for 4 columns */
    }
}

/* Legal & Policy Pages Layout */
.legal-page {
    padding-top: 140px;
    padding-bottom: 80px;
    background-color: var(--bg-primary);
}

.legal-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-fast);
}

.legal-card:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: var(--border-hover);
}

.legal-header {
    text-align: center;
    margin-bottom: 40px;
}

.legal-title {
    font-size: 2.2rem;
    font-family: var(--font-cairo);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.legal-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.legal-metadata {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-color);
}

.legal-content-body {
    line-height: 1.8;
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.legal-content-body h2 {
    font-size: 1.5rem;
    font-family: var(--font-cairo);
    color: var(--text-primary);
    margin-top: 32px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

.legal-content-body h3 {
    font-size: 1.25rem;
    font-family: var(--font-cairo);
    color: var(--text-primary);
    margin-top: 24px;
    margin-bottom: 12px;
}

.legal-content-body p {
    margin-bottom: 16px;
}

.legal-content-body ul, .legal-content-body ol {
    margin-bottom: 20px;
    padding-right: 24px;
    padding-left: 24px;
}

body.en .legal-content-body ul, body.en .legal-content-body ol {
    padding-left: 24px;
    padding-right: 24px;
}

.legal-content-body li {
    margin-bottom: 8px;
}

/* Contact Block Stylings */
.legal-contact-block {
    margin-top: 40px;
    padding: 24px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid var(--widget-border);
    border-radius: 12px;
}

.legal-contact-block h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-family: var(--font-cairo);
}

.legal-contact-block p {
    margin-bottom: 8px;
}

.legal-contact-block a {
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 500;
}

.legal-contact-block a:hover {
    text-decoration: underline;
}

/* SLA Table Styling */
.legal-content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
}

.legal-content-body th, .legal-content-body td {
    border: 1px solid var(--border-color);
    padding: 12px;
    text-align: right;
}

body.en .legal-content-body th, body.en .legal-content-body td {
    text-align: left;
}

.legal-content-body th {
    background-color: rgba(124, 58, 237, 0.08);
    color: var(--text-primary);
    font-weight: 600;
}

.legal-content-body tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Header styles specifically for legal pages to prevent transparency and text overlapping */
body.legal-page-body .header {
    background: var(--header-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--header-shadow) !important;
    height: 70px !important;
}
body.legal-page-body .header .brand-logo {
    height: 56px !important;
}








/* ==========================================================================
   30. FLOATING SALES WIDGET STYLES
   ========================================================================== */
.sales-floating-container {
    position: fixed;
    z-index: 999; /* Float above everything except headers/modals */
    font-family: var(--font-tajawal);
}

body.ar .sales-floating-container {
    font-family: var(--font-cairo);
}

/* Desktop layout matching the header container column */
@media (min-width: 992px) {
    .sales-floating-container {
        top: 85px; /* Just below the 70px header */
        right: 24px; /* Matches the header padding */
        left: auto;
        bottom: auto;
    }
}

@media (min-width: 1288px) {
    .sales-floating-container {
        right: calc((100vw - 1240px) / 2 + 24px); /* Aligns perfectly in the same column as the Support Ticket CTA button */
    }
}

/* Mobile layout keeping it at the top below the header buttons bar */
@media (max-width: 991px) {
    .sales-floating-container {
        top: 80px; /* Just below the 70px header */
        right: 20px; /* Aligned to the right */
        left: auto;
        bottom: auto;
    }
}

.sales-floating-toggle {
    background: rgba(124, 58, 237, 0.06) !important; /* Translucent glass background */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: var(--text-primary) !important; /* Dynamic text color matching theme */
    border: 1px solid rgba(99, 102, 241, 0.35) !important; /* Thin purple/blue translucent border */
    border-radius: 9999px !important;
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08) !important; /* Soft, not sharp shadow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    outline: none !important;
}

.sales-floating-toggle:hover,
.sales-floating-toggle:focus {
    transform: translateY(-2px) !important;
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.6) !important; /* Subtle purple glow border */
    box-shadow: 
        0 10px 35px rgba(124, 58, 237, 0.15), 
        0 0 15px rgba(99, 102, 241, 0.25) !important; /* Soft glow focus/hover effect */
}

.sales-floating-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0; /* Align dropdown to the right of the button capsule */
    left: auto;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    min-width: 290px;
    box-shadow: var(--card-shadow);
    display: none;
    z-index: 1000;
    text-align: right;
    animation: floatSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.en .sales-floating-dropdown {
    text-align: left;
}

.sales-floating-container:hover .sales-floating-dropdown {
    display: block;
}

.dropdown-section {
    padding: 2px 0;
}

.dropdown-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-family: var(--font-cairo);
}

body.en .dropdown-section-title {
    font-family: var(--font-tajawal);
}

.dropdown-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 14px 0;
}

.dropdown-link-item {
    display: block;
    font-size: 0.9rem;
    color: var(--color-purple);
    text-decoration: none;
    margin-bottom: 8px;
    transition: var(--transition-fast);
    font-weight: 600;
}

.dropdown-link-item:last-child {
    margin-bottom: 0;
}

.dropdown-link-item:hover {
    color: var(--color-cyan);
    text-decoration: underline;
}

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