/*
  Mafatih Computer System
  Global standard UI update v20260628-02
  Purpose: final typography, responsive layout, RTL/LTR, and performance-safe rules.
*/

:root {
  --mcs-page-max: 1280px;
  --mcs-gutter: clamp(18px, 3vw, 38px);
  --mcs-radius: 18px;
  --mcs-radius-sm: 12px;
  --mcs-h1: clamp(2.25rem, 4vw, 3.625rem);
  --mcs-h2: clamp(1.875rem, 3.3vw, 3rem);
  --mcs-h3: clamp(1.375rem, 1.55vw, 1.625rem);
  --mcs-body: 1rem;
  --mcs-small: .875rem;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-size: var(--mcs-body);
  line-height: 1.65;
}

body.rtl-mode {
  text-align: right;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.site-header,
.hero-grid,
.stats,
.section-inner,
.enterprise-inner,
.contact-wrap,
.footer-main-clean,
.footer-bottom-clean {
  max-width: var(--mcs-page-max) !important;
}

.hero,
.section,
.enterprise-section,
.contact-section,
.cta,
footer {
  padding-left: var(--mcs-gutter) !important;
  padding-right: var(--mcs-gutter) !important;
}

.hero {
  min-height: auto !important;
  padding-top: clamp(132px, 15vh, 178px) !important;
  padding-bottom: clamp(56px, 8vh, 90px) !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr) !important;
  gap: clamp(36px, 5vw, 70px) !important;
}

.hero h1,
.section-title,
.enterprise-title,
.contact-copy h2,
.cta h2,
.menu-left h2,
.menu-link,
.service h3,
.ai-card h3,
.step h3,
.enterprise-card h3 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.hero h1 {
  max-width: 760px !important;
  font-size: var(--mcs-h1) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.rtl-mode .hero h1 {
  max-width: 820px !important;
  font-size: clamp(2.125rem, 4.15vw, 3.75rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hero p,
.section-copy,
.enterprise-copy,
.contact-copy p,
.cta p,
.service p,
.ai-card p,
.step p,
.enterprise-card p {
  font-size: var(--mcs-body) !important;
  line-height: 1.72 !important;
}

.section {
  padding-top: clamp(72px, 8vw, 104px) !important;
  padding-bottom: clamp(72px, 8vw, 104px) !important;
}

.section-head,
.enterprise-head {
  gap: clamp(28px, 4vw, 56px) !important;
  margin-bottom: clamp(32px, 4vw, 50px) !important;
}

.section-title,
.enterprise-title,
.contact-copy h2,
.cta h2 {
  max-width: 900px !important;
  font-size: var(--mcs-h2) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 850 !important;
}

body.rtl-mode .section-title,
body.rtl-mode .enterprise-title,
body.rtl-mode .contact-copy h2,
body.rtl-mode .cta h2 {
  font-size: clamp(1.875rem, 3.45vw, 3.125rem) !important;
  line-height: 1.26 !important;
  letter-spacing: 0 !important;
}

.label,
.eyebrow,
.menu-kicker,
.service-num,
.step span,
.enterprise-card-num {
  font-size: .75rem !important;
  letter-spacing: .12em !important;
}

body.rtl-mode .label,
body.rtl-mode .eyebrow,
body.rtl-mode .menu-kicker,
body.rtl-mode .service-num,
body.rtl-mode .step span,
body.rtl-mode .enterprise-card-num {
  letter-spacing: 0 !important;
}

.service h3,
.enterprise-card h3 {
  font-size: var(--mcs-h3) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.ai-card h3,
.step h3 {
  font-size: clamp(1.25rem, 1.45vw, 1.5rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

.services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.service,
.ai-card,
.step,
.enterprise-card,
.contact-form,
.stat,
.enterprise-metrics div {
  border-radius: var(--mcs-radius) !important;
}

.service {
  min-height: 315px !important;
  padding: clamp(22px, 2vw, 28px) !important;
}

.service-top {
  margin-bottom: clamp(34px, 4vw, 50px) !important;
}

.ai-grid,
.contact-wrap,
.process-wrap {
  gap: clamp(34px, 5vw, 70px) !important;
}

.enterprise-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.enterprise-card {
  min-height: 330px !important;
  padding: clamp(22px, 2vw, 28px) !important;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-submit,
.btn-primary,
.btn-secondary,
.profile-link,
.header-action,
.control-btn,
.menu-toggle {
  min-height: 44px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 1rem !important;
}

.contact-form span {
  letter-spacing: .08em !important;
}

body.rtl-mode .contact-form span {
  letter-spacing: 0 !important;
}

.menu-left h2 {
  font-size: clamp(2.25rem, 4.5vw, 4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.menu-link {
  font-size: clamp(1.375rem, 2.2vw, 2.125rem) !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.menu-toggle.active::before,
body.menu-open .menu-toggle::before {
  content: "x" !important;
}

.cta {
  min-height: auto !important;
  padding-top: clamp(82px, 9vw, 118px) !important;
  padding-bottom: clamp(82px, 9vw, 118px) !important;
}

.license-track,
.logo-track {
  will-change: transform;
}

@media (max-width: 1180px) {
  .services-grid,
  .enterprise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-grid,
  .section-head,
  .enterprise-head,
  .ai-grid,
  .contact-wrap,
  .process-wrap {
    grid-template-columns: 1fr !important;
  }

  .sticky-title {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 820px) {
  :root {
    --mcs-gutter: 22px;
    --mcs-h1: clamp(2rem, 8vw, 2.5rem);
    --mcs-h2: clamp(1.75rem, 6.2vw, 2.125rem);
    --mcs-h3: clamp(1.25rem, 5vw, 1.5rem);
  }

  .site-header {
    padding: 16px 18px !important;
  }

  .site-logo {
    width: 144px !important;
  }

  .hero {
    padding-top: 112px !important;
    padding-bottom: 42px !important;
  }

  .hero-grid {
    gap: 34px !important;
  }

  .hero h1,
  body.rtl-mode .hero h1 {
    font-size: var(--mcs-h1) !important;
    line-height: 1.22 !important;
  }

  .hero p,
  .section-copy,
  .enterprise-copy,
  .contact-copy p,
  .cta p {
    font-size: .96rem !important;
  }

  .stats,
  .enterprise-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section-title,
  .enterprise-title,
  .contact-copy h2,
  .cta h2,
  body.rtl-mode .section-title,
  body.rtl-mode .enterprise-title,
  body.rtl-mode .contact-copy h2,
  body.rtl-mode .cta h2 {
    font-size: var(--mcs-h2) !important;
    line-height: 1.26 !important;
  }

  .services-grid,
  .enterprise-grid,
  .ai-cards {
    grid-template-columns: 1fr !important;
  }

  .service,
  .enterprise-card {
    min-height: auto !important;
  }

  .contact-form {
    padding: 22px !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .floating-controls {
    right: 14px !important;
    bottom: 76px !important;
    max-width: calc(100vw - 28px);
  }

  body.rtl-mode .floating-controls {
    right: auto !important;
    left: 14px !important;
  }

  .menu-left h2 {
    font-size: 2.125rem !important;
  }

  .menu-link {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 460px) {
  :root {
    --mcs-gutter: 20px;
  }

  .site-header {
    grid-template-columns: 1fr auto auto !important;
  }

  .hero-actions,
  .cta-actions,
  .enterprise-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-secondary,
  .profile-link,
  .contact-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .stats,
  .enterprise-metrics {
    gap: 10px !important;
  }

  .stat,
  .enterprise-metrics div {
    padding: 18px !important;
  }

  .stat strong,
  .enterprise-metrics strong {
    font-size: 1.45rem !important;
  }

  .footer-logo {
    width: 220px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}