/**
 * SUCCESS MARK - Layout System
 * PREMIUM SYSTEM INTERFACE - Spacious, Clean, Technical
 * ======================================================
 */

/* ============================================
   BASE STYLES
   ============================================ */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page loaded state */
body.page-loaded {
  opacity: 1;
}

/* ============================================
   CONTAINER
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

/* ============================================
   SECTION - MASSIVE SPACING
   ============================================ */

.section {
  position: relative;
  padding: var(--section-padding) 0;
  min-height: 80vh;
}

.section--full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--surface {
  background: var(--color-bg-surface);
}

/* ============================================
   PAGE HEADER (Internal pages)
   ============================================ */

.section--page-header {
  padding-top: calc(var(--space-20) + 80px);
  padding-bottom: var(--space-16);
  min-height: auto;
}

.page-header {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   GRID SYSTEM
   ============================================ */

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--split {
  grid-template-columns: 1fr 1fr;
}

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

/* Gap variations */
.grid--gap-sm { gap: var(--space-4); }
.grid--gap-md { gap: var(--space-6); }
.grid--gap-lg { gap: var(--space-10); }
.grid--gap-xl { gap: var(--space-12); }

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

.flex { display: flex; }
.flex--center { justify-content: center; align-items: center; }
.flex--between { justify-content: space-between; align-items: center; }
.flex--start { align-items: flex-start; }
.flex--column { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--gap-sm { gap: var(--space-4); }
.flex--gap-md { gap: var(--space-6); }
.flex--gap-lg { gap: var(--space-8); }

/* ============================================
   HEADER
   ============================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--space-6) var(--container-padding);
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease-smooth);
}

.header.is-scrolled {
  padding: var(--space-4) var(--container-padding);
  background: rgba(10, 10, 10, 0.95);
  border-bottom-color: var(--color-border);
}

.header.header--hidden {
  transform: translateY(-100%);
}

.header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.header__logo span {
  color: var(--color-accent);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.header__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.header__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

.header__link:hover,
.header__link.is-active {
  color: var(--color-text-primary);
}

.header__link.is-active::after,
.header__link:hover::after {
  width: 100%;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.footer__logo {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.footer__logo span {
  color: var(--color-accent);
}

.footer__tagline {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.footer__nav-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-5);
}

.footer__nav-list,
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-list a,
.footer__contact-list a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__nav-list a:hover,
.footer__contact-list a:hover {
  color: var(--color-accent);
}

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

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

.footer__legal a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__legal a:hover {
  color: var(--color-text-secondary);
}

/* ============================================
   MOBILE MENU
   ============================================ */

.mobile-menu-btn {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
}

.mobile-menu-btn__icon {
  width: 24px;
  height: 24px;
}

/* ============================================
   RESPONSIVE - COMPREHENSIVE MOBILE FIXES
   ============================================ */

@media (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   TABLET & MOBILE (768px and below)
   ============================================ */

@media (max-width: 768px) {
  :root {
    --section-padding: clamp(60px, 10vh, 100px);
  }

  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Word wrap */
  * {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Grids to single column */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--split {
    grid-template-columns: 1fr;
  }

  /* ============================================
     HEADER - MOBILE
     ============================================ */

  .header {
    padding: 16px 20px;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .header__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    background: var(--color-bg-primary);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-smooth);
    z-index: var(--z-modal);
  }

  .header__nav.is-open {
    transform: translateX(0);
  }

  .header__link {
    font-size: var(--text-2xl);
    text-align: center;
  }

  .header__logo {
    font-size: 20px;
  }

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

  .language-toggle__btn {
    padding: 6px 12px;
  }

  /* ============================================
     HERO - MOBILE
     ============================================ */

  .section--hero {
    min-height: 100vh;
    padding: 120px 20px 60px;
  }

  .hero-content {
    padding: 0 10px;
  }

  .heading-1,
  .hero__headline {
    font-size: clamp(36px, 10vw, 48px) !important;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .hero__headline .text-accent {
    font-size: clamp(40px, 11vw, 52px) !important;
  }

  .subheading,
  .hero__subheadline {
    font-size: 16px !important;
    line-height: 1.6;
    max-width: 90%;
    margin: 20px auto 40px;
  }

  /* Hero CTA buttons - stack on mobile */
  .hero__cta {
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    align-items: center;
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Terminal effect */
  .terminal-boot {
    max-width: 90%;
  }

  .terminal-line {
    font-size: 11px;
    padding: var(--space-2) var(--space-3);
  }

  /* Scroll indicator */
  .scroll-indicator {
    display: none;
  }

  /* ============================================
     SECTIONS - MOBILE
     ============================================ */

  .section {
    padding: 60px 0;
    min-height: auto;
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .section-header__title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .section-header__subtitle {
    font-size: 15px;
    max-width: 90%;
  }

  /* ============================================
     PANELS - MOBILE
     ============================================ */

  .panel {
    padding: var(--space-6);
  }

  .panel__title {
    font-size: var(--text-xl);
  }

  .panel__item {
    font-size: 15px;
  }

  /* ============================================
     MODULES/SERVICES - MOBILE
     ============================================ */

  .services-grid {
    gap: 20px;
  }

  .module {
    padding: var(--space-6);
  }

  .module__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
  }

  .module__title {
    font-size: var(--text-lg);
  }

  .module__description {
    font-size: 15px;
  }

  /* ============================================
     DASHBOARD - MOBILE
     ============================================ */

  .dashboard {
    padding: var(--space-5);
  }

  .dashboard__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .metric {
    padding: var(--space-5);
  }

  .metric__value {
    font-size: 32px;
  }

  .metric__label {
    font-size: 11px;
  }

  .dashboard__header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .dashboard__status {
    font-size: 10px;
  }

  /* ============================================
     FILTER SECTION - MOBILE
     ============================================ */

  .filter-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .filter-block__title {
    font-size: clamp(24px, 6vw, 32px);
    margin-bottom: var(--space-8);
  }

  .filter-column {
    padding: var(--space-6);
  }

  .filter-column__title {
    font-size: 16px;
    margin-bottom: var(--space-4);
  }

  .filter-list__item {
    font-size: 15px;
    padding-left: var(--space-4);
  }

  /* ============================================
     CTA BLOCK - MOBILE
     ============================================ */

  .cta-block {
    padding: var(--space-10) var(--space-5);
  }

  .cta-block .heading-2 {
    font-size: clamp(24px, 6vw, 32px);
  }

  .cta-block .subheading {
    font-size: 15px;
  }

  .cta-block .flex {
    flex-direction: column;
    gap: 12px;
  }

  .cta-block .btn {
    width: 100%;
    max-width: 280px;
  }

  /* ============================================
     FOOTER - MOBILE
     ============================================ */

  .footer {
    padding: var(--space-10) 0 var(--space-6);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-8);
  }

  .footer__brand,
  .footer__nav,
  .footer__contact {
    text-align: center;
  }

  .footer__nav-list,
  .footer__contact-list {
    align-items: center;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  /* ============================================
     PIPELINE - MOBILE
     ============================================ */

  .pipeline-stage {
    gap: var(--space-4);
  }

  .pipeline-stage__number {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .pipeline-stage__title {
    font-size: var(--text-xl);
  }

  .pipeline-stage__icon {
    width: 48px;
    height: 48px;
  }

  /* ============================================
     DIFFERENTIATORS - MOBILE
     ============================================ */

  .differentiators-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .differentiator {
    padding: var(--space-6);
  }

  .differentiator__title {
    font-size: 16px;
  }

  .differentiator__description {
    font-size: 14px;
  }

  /* ============================================
     VALUES - MOBILE
     ============================================ */

  .value-item {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .value-item__number {
    width: auto;
    font-size: var(--text-2xl);
  }

  .value-item__content {
    text-align: center;
  }

  /* ============================================
     FORMS - MOBILE
     ============================================ */

  .form__input,
  .form__textarea,
  .form__select {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  /* ============================================
     PAGE HEADER - MOBILE
     ============================================ */

  .section--page-header {
    padding-top: calc(var(--space-16) + 60px);
    padding-bottom: var(--space-10);
  }

  .page-header__title {
    font-size: clamp(32px, 9vw, 48px);
  }

  .page-header__subtitle {
    font-size: 16px;
    max-width: 90%;
  }
}

/* ============================================
   EXTRA SMALL DEVICES (375px and below)
   ============================================ */

@media (max-width: 375px) {
  .heading-1,
  .hero__headline {
    font-size: 32px !important;
  }

  .hero__headline .text-accent {
    font-size: 36px !important;
  }

  .subheading,
  .hero__subheadline {
    font-size: 15px !important;
  }

  .btn {
    padding: 12px 24px;
    font-size: 14px;
  }

  .section-header__title {
    font-size: 24px;
  }

  .filter-block__title {
    font-size: 22px;
  }

  .page-header__title {
    font-size: 28px;
  }

  .metric__value {
    font-size: 28px;
  }
}

/* ============================================
   ARABIC MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  [lang="ar"] .heading-1,
  [lang="ar"] .hero__headline {
    font-size: clamp(32px, 9vw, 44px) !important;
  }

  [lang="ar"] .subheading,
  [lang="ar"] .hero__subheadline {
    font-size: 16px !important;
    line-height: 1.7;
  }

  [lang="ar"] .section-header__title {
    font-size: clamp(26px, 6vw, 36px);
  }

  [lang="ar"] .filter-block__title {
    font-size: clamp(22px, 5vw, 28px);
  }

  /* RTL Mobile Navigation */
  [dir="rtl"] .header__nav {
    flex-direction: column;
    align-items: center;
  }

  [dir="rtl"] .header__link {
    text-align: center;
  }

  /* RTL Footer */
  [dir="rtl"] .footer__grid {
    text-align: center;
  }

  [dir="rtl"] .footer__brand,
  [dir="rtl"] .footer__nav,
  [dir="rtl"] .footer__contact {
    text-align: center;
  }

  [dir="rtl"] .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* RTL Values */
  [dir="rtl"] .value-item {
    flex-direction: column;
    text-align: center;
  }

  [dir="rtl"] .value-item__content {
    text-align: center;
  }

  /* RTL Filter */
  [dir="rtl"] .filter-list__item {
    padding-right: var(--space-4);
    padding-left: 0;
  }

  [dir="rtl"] .filter-list__item::before {
    right: 0;
    left: auto;
  }
}

/* ============================================
   LANGUAGE VISIBILITY SYSTEM
   ============================================ */

/* Default: show English, hide Arabic */
.lang-ar {
  display: none !important;
}

.lang-en {
  display: block;
}

/* Inline elements */
span.lang-en,
a.lang-en,
button.lang-en {
  display: inline;
}

span.lang-ar,
a.lang-ar,
button.lang-ar {
  display: none !important;
}

/* Flex elements */
.flex .lang-en,
.hero__cta .lang-en {
  display: inline-flex;
}

/* When Arabic is active */
[lang="ar"] .lang-en {
  display: none !important;
}

[lang="ar"] .lang-ar {
  display: block !important;
}

[lang="ar"] span.lang-ar,
[lang="ar"] a.lang-ar,
[lang="ar"] button.lang-ar {
  display: inline !important;
}

[lang="ar"] .flex .lang-ar,
[lang="ar"] .hero__cta .lang-ar {
  display: inline-flex !important;
}

/* Prevent FOUC */
html:not([lang]) .lang-ar {
  display: none !important;
}

/* ============================================
   RTL SUPPORT - COMPLETE FIX
   ============================================ */

/* Arabic typography - SAME sizes as English */
[dir="rtl"] {
  direction: rtl;
}

[dir="rtl"] body {
  font-family: var(--font-arabic);
  /* NO font-size change - same as English */
}

/* ============================================
   FIX ITALIC/SLANTED TEXT IN ARABIC
   ============================================ */

[lang="ar"],
[lang="ar"] * {
  font-style: normal !important;
  font-synthesis: none;
}

[lang="ar"] em,
[lang="ar"] i,
[lang="ar"] .italic,
[lang="ar"] blockquote,
[lang="ar"] .philosophy-block__text,
[lang="ar"] .contact-quote__text {
  font-style: normal !important;
}

/* Force no slant for variable fonts */
[lang="ar"] {
  font-variation-settings: 'slnt' 0;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] label,
[dir="rtl"] button {
  font-family: var(--font-arabic);
  letter-spacing: normal;
  /* NO font-size change */
}

/* ============================================
   CENTERING FIX - Use flexbox for reliability
   ============================================ */

/* Hero - FLEX centering works for both LTR and RTL */
.section--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding-top: 120px; /* Space for fixed header */
  padding-bottom: 80px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.hero-content h1,
.hero-content p,
.hero__cta {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Page headers - centered */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Section headers - centered */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* CTA blocks - centered */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Text center utility */
.text-center {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* RTL overrides - flex centering works automatically */
[dir="rtl"] .section--hero,
[dir="rtl"] .hero-content,
[dir="rtl"] .page-header,
[dir="rtl"] .section-header,
[dir="rtl"] .cta-block {
  /* No override needed - flex centering is direction-agnostic */
  text-align: center;
}

[dir="rtl"] .text-center {
  text-align: center !important;
}

/* ============================================
   NAVIGATION - Proper mirroring
   ============================================ */

[dir="rtl"] .header__inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .header__nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .header__link::after {
  left: auto;
  right: 0;
}

/* Language toggle stays same order */
[dir="rtl"] .language-toggle {
  flex-direction: row;
}

/* ============================================
   FLEX UTILITIES - Smart RTL
   ============================================ */

/* Horizontal flex - reverse in RTL */
[dir="rtl"] .flex {
  flex-direction: row-reverse;
}

/* But keep center alignment */
[dir="rtl"] .flex--center {
  justify-content: center;
  align-items: center;
}

/* Column stays column */
[dir="rtl"] .flex--column {
  flex-direction: column;
}

/* Hero CTA buttons - reverse order but stay centered */
[dir="rtl"] .hero__cta {
  flex-direction: row-reverse;
  justify-content: center;
}

/* ============================================
   GRID - Natural RTL flow
   ============================================ */

[dir="rtl"] .grid {
  direction: rtl;
}

/* Split grid - reverse columns */
[dir="rtl"] .grid--split {
  direction: rtl;
}

/* ============================================
   FOOTER
   ============================================ */

[dir="rtl"] .footer__grid {
  direction: rtl;
}

[dir="rtl"] .footer__brand,
[dir="rtl"] .footer__nav,
[dir="rtl"] .footer__contact {
  text-align: right;
}

[dir="rtl"] .footer__bottom {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer__legal {
  flex-direction: row-reverse;
}

/* ============================================
   ICONS/ARROWS - Flip horizontally
   ============================================ */

[dir="rtl"] .btn svg,
[dir="rtl"] .scroll-indicator__icon {
  transform: scaleX(-1);
}

/* Don't flip these */
[dir="rtl"] .module__icon svg,
[dir="rtl"] .differentiator__icon svg,
[dir="rtl"] .service-detail__icon svg,
[dir="rtl"] .pipeline-stage__icon svg {
  transform: none;
}

/* ============================================
   COMPONENTS - Text alignment
   ============================================ */

/* Panels */
[dir="rtl"] .panel {
  text-align: right;
}

[dir="rtl"] .panel__item {
  flex-direction: row-reverse !important;
  text-align: right !important;
}

[dir="rtl"] .panel__list {
  text-align: right;
}

[dir="rtl"] .panel__title {
  text-align: right;
}

/* Modules */
[dir="rtl"] .module {
  text-align: right;
}

/* Service details */
[dir="rtl"] .service-detail {
  text-align: right;
}

[dir="rtl"] .service-detail__header {
  flex-direction: row-reverse;
}

[dir="rtl"] .service-detail__list {
  padding-right: var(--space-5);
  padding-left: 0;
}

/* Pipeline stages */
[dir="rtl"] .pipeline-stage {
  flex-direction: row-reverse;
}

[dir="rtl"] .pipeline-stage__content {
  text-align: right;
}

[dir="rtl"] .pipeline-stage__marker {
  margin-left: var(--space-8);
  margin-right: 0;
}

/* Differentiators */
[dir="rtl"] .differentiator {
  text-align: right;
}

/* Values */
[dir="rtl"] .value-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .value-item__content {
  text-align: right;
}

/* ============================================
   FILTER SECTION
   ============================================ */

[dir="rtl"] .filter-block {
  text-align: center;
}

[dir="rtl"] .filter-column {
  text-align: right;
}

[dir="rtl"] .filter-list__item {
  padding-right: var(--space-5);
  padding-left: 0;
  text-align: right;
}

[dir="rtl"] .filter-list__item::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .filter-column__title {
  text-align: right;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

[dir="rtl"] .contact-form-wrapper,
[dir="rtl"] .contact-info-wrapper {
  text-align: right;
}

[dir="rtl"] .form__label {
  text-align: right;
}

[dir="rtl"] .form__input,
[dir="rtl"] .form__textarea,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] .contact-info__item {
  flex-direction: row-reverse;
}

[dir="rtl"] .response-info__item {
  flex-direction: row-reverse;
}

[dir="rtl"] .expect-list__item {
  flex-direction: row-reverse;
}

/* ============================================
   DASHBOARD - Keep LTR for numbers
   ============================================ */

[dir="rtl"] .dashboard {
  direction: ltr;
  text-align: left;
}

[dir="rtl"] .dashboard__header {
  flex-direction: row-reverse;
}

[dir="rtl"] .metric__value,
[dir="rtl"] .counter,
[dir="rtl"] .progress__value {
  direction: ltr;
}

/* ============================================
   TERMINAL - Keep LTR (code is English)
   ============================================ */

[dir="rtl"] .terminal-boot,
[dir="rtl"] .terminal-line {
  direction: ltr;
  text-align: left;
}

/* ============================================
   MOBILE RTL
   ============================================ */

@media (max-width: 768px) {
  [dir="rtl"] .header__nav {
    flex-direction: column;
    align-items: center;
  }
  
  [dir="rtl"] .header__nav .header__link {
    text-align: center;
  }
  
  [dir="rtl"] .footer__grid {
    text-align: center;
  }
  
  [dir="rtl"] .footer__brand,
  [dir="rtl"] .footer__nav,
  [dir="rtl"] .footer__contact {
    text-align: center;
  }
  
  [dir="rtl"] .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Semantic margin utilities */
.mt-sm { margin-top: var(--space-4); }
.mt-md { margin-top: var(--space-6); }
.mt-lg { margin-top: var(--space-10); }
.mt-xl { margin-top: var(--space-12); }

.mb-sm { margin-bottom: var(--space-4); }
.mb-md { margin-bottom: var(--space-6); }
.mb-lg { margin-bottom: var(--space-10); }

/* Numeric margin utilities */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }

.w-full { width: 100%; }
.hidden { display: none !important; }