.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preference-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid #4b5d70;
    background: transparent;
    color: var(--white);
    display: grid;
    place-items: center;
    font-weight: 700;
    transition: color .2s, border-color .2s, background .2s;
}

.preference-toggle:hover {
    color: var(--cyan);
    border-color: var(--cyan);
}

.language-toggle { font-size: 14px; }
.theme-toggle { font-size: 19px; }

@font-face {
    font-family: "Noto Sans Arabic";
    src: url("/fonts/NotoSansArabic-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.is-rtl { font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
.is-rtl h1, .is-rtl h2 { letter-spacing: -.7px; line-height: 1.22; }
.is-rtl h1 { margin-right: 0; margin-left: -80px; }
.is-rtl .header-cta span { margin-left: 0; margin-right: 22px; }
.is-rtl .scroll-cue > span { margin-right: 0; margin-left: 12px; }
.is-rtl .coordinate-number { margin-left: 0; margin-right: auto; }
.is-rtl .plane-name span { float: left; }
.is-rtl .contact-email { margin-left: 0; margin-right: 25px; }
.is-rtl .service-nav-arrow { margin-left: 0; margin-right: auto; }
.is-rtl .service-track { direction: ltr; }
.is-rtl .service-panel { direction: rtl; text-align: right; }
.is-rtl .flow-connection i {
    left: auto;
    right: 0;
    animation-name: packet-flow-rtl;
}
.is-rtl .code-line { text-align: center; }
.is-rtl .contact-system { right: auto; left: 9%; }
.is-rtl .contact-grid {
    inset: 0 40% 0 0;
    mask-image: linear-gradient(270deg, transparent, #000);
    transform: perspective(700px) rotateY(35deg) scale(1.5);
}
.is-rtl .contact-side { right: auto; left: 5.3%; }

@keyframes packet-flow-rtl {
    0% { right: 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { right: 100%; opacity: 0; }
}

html[data-theme="light"],
html[data-theme="light"] body {
    background: #f1f6f7;
}

html[data-theme="light"] {
    --navy: #f1f6f7;
    --deep: #e2ecef;
    --surface: #fff;
    --cyan: #078ca2;
    --white: #091c32;
    --muted: #405b6d;
    --line: rgba(9, 28, 50, .22);
}

.lang-ar { display: none; }
html[lang="ar"] .lang-en { display: none; }
html[lang="ar"] .lang-ar { display: block; }
html[lang="ar"] body { font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif; }

html[data-theme="light"] .site-shell {
    --navy: #f1f6f7;
    --deep: #e2ecef;
    --surface: #fff;
    --cyan: #078ca2;
    --white: #091c32;
    --muted: #405b6d;
    --line: rgba(9, 28, 50, .22);
    background: var(--navy);
    color: var(--white);
}

html[data-theme="light"] .brand-image img {
    filter: invert(1) hue-rotate(180deg) saturate(1.15);
}

html[data-theme="light"] .site-header nav a,
html[data-theme="light"] .hero-content > p { color: #304e62; }
html[data-theme="light"] .header-cta,
html[data-theme="light"] .preference-toggle { border-color: #aabac4; }
html[data-theme="light"] .hero-note,
html[data-theme="light"] .diagram-coordinate,
html[data-theme="light"] .diagram-label { color: #35596e; }
html[data-theme="light"] .introduction { background: var(--deep); }
html[data-theme="light"] .services { background: #d9e7eb; }
html[data-theme="light"] .principles { background: #f8fafb; color: #091c32; }
html[data-theme="light"] .contact { background: #edf4f6; }
html[data-theme="light"] .intro-copy p,
html[data-theme="light"] .services-intro > p,
html[data-theme="light"] .principles-intro > p,
html[data-theme="light"] .principle-list p,
html[data-theme="light"] .contact-content > p { color: #365464; }
html[data-theme="light"] .technology-line > span,
html[data-theme="light"] .footer-top > p,
html[data-theme="light"] .footer-bottom { color: #405e70; }
html[data-theme="light"] .service-navigation a,
html[data-theme="light"] .service-detail p,
html[data-theme="light"] .contact-pending { color: #35576a; }
html[data-theme="light"] .hero-grid { opacity: .28; }
html[data-theme="light"] .hero-line { background: linear-gradient(90deg, transparent, #078ca280, transparent); }
html[data-theme="light"] .hero-frame { border-color: #078ca24f; }
html[data-theme="light"] .diagram-orbit { border-color: #245d7045; }
html[data-theme="light"] .architecture-plane {
    border-color: #63a8b7;
    background: linear-gradient(120deg, #dff2f4ed, #f8fcfced);
    box-shadow: 8px 10px 0 #d3e1e5, 9px 11px 0 #8caab5;
}
html[data-theme="light"] .plane-app {
    border-color: #19b8cd;
    background: linear-gradient(135deg, #d4f0f3ed, #f9fdfded);
}
html[data-theme="light"] .core { background: #e6f7f8; }
html[data-theme="light"] .data-blocks i {
    background: linear-gradient(#82c8d3, #d4eaed);
    border-color: #5c9fac;
}
html[data-theme="light"] .service-diagram { background: #f8fbfc; border-color: #9bbac3; }
html[data-theme="light"] .diagram-terminal,
html[data-theme="light"] .diagram-foot { color: #587789; border-color: #bfd0d6; }
html[data-theme="light"] .flow-nodes > span,
html[data-theme="light"] .service-tags > span { color: #486878; border-color: #9eb7c0; background: #f9fcfd; }
html[data-theme="light"] .flow-nodes strong { background: #d9f2f4; color: #0d7383; }
html[data-theme="light"] .principle-list article:hover { background: #e2ecef; }
html[data-theme="light"] #blazor-error-ui { background: #d9e7eb; color: #091c32; }

@media (max-width: 1100px) {
    .site-header nav { gap: 18px; }
    .header-controls { gap: 7px; }
    .preference-toggle { width: 38px; height: 38px; }
    .header-cta { display: none; }
}

@media (max-width: 800px) {
    .site-header { flex-wrap: nowrap; }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 0 14px 14px;
        background: none;
        border: 0;
        margin-inline-start: 4px;
        order: 4;
    }
    .menu-toggle span { width: 25px; height: 1px; background: var(--white); }
    .site-header nav {
        display: none;
        position: absolute;
        top: 85px;
        left: -5.7%;
        right: -5.7%;
        background: var(--deep);
        padding: 26px 6%;
        border-bottom: 1px solid var(--line);
    }
    .site-header nav.is-open { display: flex; flex-direction: column; gap: 24px; }
    .site-header nav a { font-size: 18px; }
    .header-controls { margin-inline-start: auto; }
}

@media (max-width: 540px) {
    .is-rtl h1 { margin-left: 0; }
    .is-rtl .site-header nav { left: -7%; right: -7%; }
    .is-rtl .contact-system { left: -140px; right: auto; }
    .site-header .brand-image {
        width: 151px;
        transform: none;
    }
    .header-controls { gap: 5px; }
    .preference-toggle { width: 36px; height: 36px; }
    .menu-toggle { margin-inline-start: 0; padding-inline-start: 8px; }
}

@media (max-width: 380px) {
    .site-header .brand-image { width: 138px; }
    .preference-toggle { width: 34px; height: 34px; }
}