@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap');

html[dir="rtl"]{
  direction:rtl;
  scroll-behavior:smooth;
}

html[dir="rtl"] body{
  font-family:"IBM Plex Sans Arabic", Inter, ui-sans-serif, system-ui, sans-serif;
  text-align:right;
  letter-spacing:0;
}

html[dir="rtl"] .headline,
html[dir="rtl"] .section-title,
html[dir="rtl"] .feature-title{
  letter-spacing:-0.025em;
  line-height:1.12;
}

html[dir="rtl"] .center,
html[dir="rtl"] .max-3xl,
html[dir="rtl"] .max-4xl{
  text-align:center;
}

html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-actions,
html[dir="rtl"] .brand,
html[dir="rtl"] .trust-row,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-bottom-links,
html[dir="rtl"] .badge,
html[dir="rtl"] .btn,
html[dir="rtl"] .feature-item,
html[dir="rtl"] .mock-row,
html[dir="rtl"] .mini-row{
  direction:rtl;
}

html[dir="rtl"] .nav-links{
  gap:28px;
}

html[dir="rtl"] .mobile-panel{
  text-align:right;
}

html[dir="rtl"] .grid-2,
html[dir="rtl"] .hero-grid{
  direction:rtl;
}

html[dir="rtl"] .dashboard-frame,
html[dir="rtl"] .mock-shell,
html[dir="rtl"] .mock-inner,
html[dir="rtl"] .dark-card,
html[dir="rtl"] .glass,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .stat-card{
  text-align:right;
}

html[dir="rtl"] .check{
  margin-right:0;
  margin-left:10px;
}

html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-grid{
  direction:rtl;
}

html[dir="rtl"] .comparison th,
html[dir="rtl"] .comparison td{
  text-align:right;
}

/* Keep technical data readable */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .api-code,
html[dir="rtl"] .code-block,
html[dir="rtl"] .api-endpoint,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] .ltr{
  direction:ltr;
  text-align:left;
  unicode-bidi:embed;
}

html[dir="rtl"] .lang-switch{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:9px 14px;
  color:#cbd5e1;
  font-size:14px;
  transition:.25s ease;
}

html[dir="rtl"] .lang-switch:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

html[dir="rtl"] .mobile-panel .lang-switch{
  border-radius:14px;
  margin-top:8px;
}

@media(max-width:1024px){
  html[dir="rtl"] .hero-grid,
  html[dir="rtl"] .grid-2{
    direction:rtl;
  }
}

@media(max-width:640px){
  html[dir="rtl"] .hero-actions .btn,
  html[dir="rtl"] .btn{
    width:100%;
  }
}