@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-regular.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-bold.ttf') format('truetype');font-weight:600 700;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-extrabold.ttf') format('truetype');font-weight:800 900;font-display:swap}
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap}
.language-switch:hover{background:var(--mint);border-color:var(--green)}
.language-switch[lang=ar]{font-family:Tajawal,sans-serif;font-size:15px}
html[dir=rtl] body{font-family:Tajawal,Manrope,sans-serif;line-height:1.85}
html[dir=rtl] :is(h1,h2,h3,h4,p,small,span,a,label,button,input,textarea,select,li,strong,kbd){letter-spacing:0}
html[dir=rtl] :is(.section-kicker,.category-label,.small-label,.card-label,.visual-head,.visual-caption,.directory-count,.evidence-note,.scene-label,.scene-note,.step-number,.step-tag,.closing-note,.photo-credit,.signal small,.lottie-caption,.related-links a>span,.capability-number,.mini-step>span){font-family:Tajawal,Manrope,sans-serif}
html[dir=rtl] :is(h1,h2,h3){line-height:1.45}
html[dir=rtl] .hero h1{font-size:clamp(52px,6.8vw,88px);line-height:1.35;letter-spacing:0}
html[dir=rtl] .hero-tagline{font-size:30px;line-height:1.8}
html[dir=rtl] :is(.hero-description,.section-heading p){line-height:1.9}
html[dir=rtl] .wordmark{direction:ltr;unicode-bidi:isolate;font-family:Manrope,sans-serif;letter-spacing:-1px;flex-shrink:0}
html[dir=rtl] .tech-list>span{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .hero-description .desktop-break{display:none}
html[dir=rtl] .hero-description{max-width:620px;margin-inline:auto}
html[dir=rtl] .hero-content{max-width:960px;margin-inline:auto}
html[dir=rtl] :is(.feature-tab,.panel-copy,.contact-form,.contact-success,.service-item,.workspace-copy,.article-body,.directory-card,.project-ref){text-align:start}
html[dir=rtl] .mega-intro{padding:8px 0 10px 24px;border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .mega-links a:hover{transform:translateX(-3px)}
html[dir=rtl] .mega-links strong{font-size:15px;line-height:1.6}
html[dir=rtl] .mega-links small{font-size:13px;line-height:1.7}
html[dir=rtl] .site-nav .nav-trigger{font-size:15px}
html[dir=rtl] .mega-intro p{font-size:15px}
html[dir=rtl] .service-plus{margin-left:0;margin-right:auto}
html[dir=rtl] .service-detail-link{margin-left:0;margin-right:18px}
html[dir=rtl] .drag-hint{margin-left:0;margin-right:auto}
html[dir=rtl] .feature-tab+.feature-tab{border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .team-scene{border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .panel-copy li{padding-left:0;padding-right:20px}
html[dir=rtl] .panel-copy li:before{left:auto;right:0}
html[dir=rtl] .process-step:nth-child(3n+2),html[dir=rtl] .process-step:nth-child(3n+3){border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .capability-card:nth-child(even){border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .project-facts>div+div{border-left:0;border-right:1px solid var(--line)}
html[dir=rtl] .article-toc{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:18px}
html[dir=rtl] .article-takeaway{border-left:0;border-right:3px solid var(--green);border-radius:8px 0 0 8px}
html[dir=rtl] :is(.timeline-item ul,.contact-aside ol){padding-left:0;padding-right:20px}
html[dir=rtl] .comparison-table :is(th,td){text-align:start}
html[dir=rtl] .faq-list details>div{padding:0 0 23px 25px}
html[dir=rtl] .contact-success .text-link{margin-left:0;margin-right:20px}
html[dir=rtl] #mobile-nav details>a{padding:9px 15px 9px 0}
html[dir=rtl] .visual-diagram{transform:scaleX(-1)}
html[dir=rtl] .reading-progress{transform-origin:right}
html[dir=rtl] .page-hero h1{font-size:clamp(40px,4.7vw,64px);line-height:1.45}
html[dir=rtl] .page-hero .page-description{font-size:19px;line-height:1.95}
html[dir=rtl] :is(.category-label,.scope-label,.visual-caption,.evidence-note,.card-label,.footer-notice){font-size:13px;line-height:1.9}
html[dir=rtl] .footer-directory a{font-size:14px;line-height:1.8}
html[dir=rtl] .footer-bottom{font-size:12px}
html[dir=rtl] :is(.scope-grid li,.capability-card p,.directory-card p,.project-ref p,.mini-step p){line-height:1.95}
html[dir=rtl] .form-state{font-size:14px;line-height:1.9}
html[dir=rtl] :is(.directory-card h3,.capability-card h3,.project-ref h3){line-height:1.6}
html[dir=rtl] input[type=email]{text-align:left;unicode-bidi:isolate}
@media(max-width:1100px){.site-nav .desktop-nav{gap:12px!important}.site-nav .language-switch{padding-inline:8px}.site-nav .desktop-cta{font-size:12px}html[dir=rtl] .site-nav .nav-trigger{font-size:13px}}
@media(max-width:850px){html[dir=rtl] .team-scene{border-right:0}html[dir=rtl] .hero h1{font-size:clamp(44px,7vw,70px)}html[dir=rtl] .hero-tagline{font-size:25px}}
@media(max-width:640px){.site-nav{padding-inline:12px}.site-nav>.flex{gap:6px}.site-nav .wordmark{font-size:21px}.language-switch{padding:6px 8px;font-size:12px}.site-nav .motion-toggle{width:30px;height:34px}.site-nav #menu-button{gap:5px;padding-inline:4px}html[dir=rtl] .hero h1{font-size:clamp(36px,9vw,54px);line-height:1.45}html[dir=rtl] .hero-tagline{font-size:22px}html[dir=rtl] .hero-description{font-size:16px}html[dir=rtl] .hero-actions .btn{font-size:14px;line-height:1.7}html[dir=rtl] .role-chip{font-size:12px}html[dir=rtl] .feature-tab+.feature-tab{border-right:0}html[dir=rtl] .tab-progress{left:auto;right:0}html[dir=rtl] .capability-card:nth-child(n),html[dir=rtl] .project-facts>div+div,html[dir=rtl] .process-step:nth-child(n){border-right:0}html[dir=rtl] .page-hero h1{font-size:37px}html[dir=rtl] .page-hero .page-description{font-size:17px!important}html[dir=rtl] .contact-success .text-link{margin-right:0}html[dir=rtl] :is(.category-label,.scope-label,.visual-caption,.card-label,.evidence-note){font-size:12px}html[dir=rtl] .feature-copy{font-size:13px}html[dir=rtl] .footer-directory a{font-size:13px}html[dir=rtl] .technology-strip>p{text-align:start}}
@media(max-width:360px){.site-nav .wordmark{font-size:19px}.site-nav #menu-button{font-size:11px;gap:3px}.site-nav>.flex{gap:4px}.language-switch{padding-inline:6px}.site-nav .motion-toggle{width:27px}html[dir=rtl] .hero h1{font-size:34px}}