/* Basis: variables, reset, typography, helpers */

:root {
  --color-primary: #0053a3;
  --color-primary-dark: #003c78;
  --color-accent: #c02030;
  --color-accent-dark: #951827;
  --color-accent-light: #e43142;
  --color-accent-bright: #f04452;
  --color-accent-deep: #9e1727;
  --color-accent-darker: #861322;
  --color-neutral: #606070;
  --color-text: #182033;
  --color-muted: #667085;
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-white: #ffffff;
  --color-border: #e4e8f0;
  --color-control-bg: #f0f3f7;
  --color-header-top-start: #08284d;
  --color-header-top-end: #031d3e;
  --color-header-top-bg: #ffffff;
  --color-header-top-text: var(--color-primary);
  --color-header-top-muted: var(--color-primary);
  --color-header-top-icon: var(--color-accent);
  --color-header-top-border: #edf1f6;
  --color-header-top-hover: #c02030;
  --color-header-top-chip-bg: #f5f7fa;
  --color-nav-text: #4d5c75;
  --color-consultation: #526781;
  --color-consultation-border: #8fa2ba;
  --color-footer-bg: #111827;
  --rgb-primary: 0, 80, 160;
  --rgb-accent: 192, 32, 48;
  --rgb-text: 24, 32, 51;
  --rgb-white: 255, 255, 255;
  --rgb-consultation: 82, 103, 129;
  --gradient-header-top: linear-gradient(90deg, var(--color-header-top-start), var(--color-header-top-end));
  --shadow-header-top: inset 0 -1px 0 var(--color-header-top-border);
  --gradient-hero: radial-gradient(circle at 18% 18%, rgba(var(--rgb-primary), 0.12), transparent 30%), radial-gradient(circle at 84% 72%, rgba(var(--rgb-accent), 0.1), transparent 28%), linear-gradient(180deg, var(--color-white) 0%, #f6f9fd 100%);
  --gradient-page-canvas: radial-gradient(ellipse 48% 30% at 92% 21%, rgba(var(--rgb-accent), 0.075), transparent 70%), radial-gradient(ellipse 48% 34% at 17% 12%, rgba(var(--rgb-primary), 0.105), transparent 72%), radial-gradient(ellipse 52% 42% at 86% 54%, rgba(var(--rgb-accent), 0.05), transparent 76%), radial-gradient(ellipse 50% 36% at 12% 66%, rgba(var(--rgb-primary), 0.055), transparent 74%), linear-gradient(180deg, var(--color-white) 0%, #f6f9fd 42%, #fbfdff 68%, #f6f9fd 100%);
  --gradient-page-overlay: linear-gradient(180deg, rgba(var(--rgb-white), 0) 0%, rgba(var(--rgb-white), 0.38) 46%, rgba(var(--rgb-white), 0.18) 100%), radial-gradient(circle at 8% 28%, rgba(var(--rgb-white), 0.58) 0 34px, transparent 35px), radial-gradient(circle at 15% 20%, rgba(var(--rgb-primary), 0.09) 0 9px, transparent 10px), radial-gradient(circle at 92% 30%, rgba(var(--rgb-accent), 0.055), transparent 22%);
  --hero-card-bg: rgba(var(--rgb-white), 0.78);
  --hero-card-border: rgba(var(--rgb-primary), 0.1);
  --hero-blob-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --hero-accent-gradient: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  --hero-dot-muted: #a8b2c2;
  --hero-visual-shadow: 0 26px 70px rgba(var(--rgb-primary), 0.18);
  --hero-landmark-opacity: 0.34;
  --hero-landmark-muted: rgba(var(--rgb-primary), 0.22);
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --gradient-header-cta: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 58%, var(--color-accent-deep) 100%);
  --gradient-header-cta-hover: linear-gradient(135deg, var(--color-accent-bright) 0%, var(--color-accent) 52%, var(--color-accent-darker) 100%);
  --shadow-sm: 0 10px 30px rgba(var(--rgb-text), 0.08);
  --shadow-md: 0 22px 60px rgba(var(--rgb-primary), 0.14);
  --shadow-header: 0 12px 32px rgba(var(--rgb-text), 0.06);
  --shadow-header-cta: 0 14px 28px rgba(var(--rgb-accent), 0.24), inset 0 1px 0 rgba(var(--rgb-white), 0.22);
  --shadow-header-cta-hover: 0 16px 32px rgba(var(--rgb-accent), 0.3), inset 0 1px 0 rgba(var(--rgb-white), 0.26);
  --shadow-consultation: 0 2px 8px rgba(var(--rgb-consultation), 0.12);
  --shadow-consultation-hover: 0 8px 18px rgba(var(--rgb-primary), 0.14);
  --shadow-card: 0 12px 34px rgba(var(--rgb-text), 0.05);
  --drawer-glass-bg: rgba(var(--rgb-white), 0.86);
  --drawer-glass-line: rgba(var(--rgb-white), 0.46);
  --drawer-link-bg: rgba(var(--rgb-white), 0.62);
  --drawer-link-active-bg: rgba(var(--rgb-accent), 0.1);
  --drawer-backdrop-bg: rgba(var(--rgb-text), 0.5);
  --drawer-shadow: -24px 0 60px rgba(var(--rgb-text), 0.22);
  --location-pulse-color: rgba(var(--rgb-accent), 0.28);
  --modal-backdrop-bg: rgba(var(--rgb-text), 0.28);
  --modal-backdrop-gradient: radial-gradient(circle at 18% 12%, rgba(var(--rgb-primary), 0.22) 0, transparent 34%), radial-gradient(circle at 82% 18%, rgba(var(--rgb-accent), 0.16) 0, transparent 30%), linear-gradient(145deg, rgba(var(--rgb-white), 0.16), rgba(var(--rgb-white), 0.04));
  --modal-backdrop-filter: blur(3px) saturate(118%);
  --modal-backdrop-inset-shadow: inset 0 1px 0 rgba(var(--rgb-white), 0.16), inset 0 -80px 120px rgba(var(--rgb-primary), 0.08);
  --modal-surface-bg: rgba(var(--rgb-white), 0.86);
  --modal-border-color: rgba(var(--rgb-white), 0.58);
  --modal-radius: 5px;
  --modal-map-height: 315px;
  --shadow-modal: 0 32px 90px rgba(var(--rgb-text), 0.22);
  --ios-widget-bg: rgba(var(--rgb-white), 0.72);
  --ios-widget-border: rgba(var(--rgb-white), 0.64);
  --ios-widget-shadow: 0 16px 40px rgba(var(--rgb-text), 0.1);
  --ios-sheet-radius: 26px;
  --ios-grabber-bg: rgba(var(--rgb-text), 0.18);
  --font-family: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
  --font-size-2xs: 0.78rem;
  --font-size-xs: 0.82rem;
  --font-size-sm: 0.88rem;
  --font-size-body: 1rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.12rem;
  --font-size-xl: 1.2rem;
  --font-size-2xl: clamp(1.5rem, 2.5vw, 2.2rem);
  --font-size-hero: clamp(2.15rem, 4.8vw, 4.25rem);
  --font-size-stat: 1.9rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.75;
  --line-height-button: 1.15;
  --container: 1300px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-consultation-compact: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --btn-height: 42px;
  --btn-padding-y: 9px;
  --btn-padding-x: 16px;
  --btn-radius: 5px;
  --cta-height: 42px;
  --cta-height-large: 44px;
  --cta-height-compact: 38px;
  --cta-padding-y: 9px;
  --cta-padding-x: clamp(18px, 1.9vw, 28px);
  --cta-padding-x-compact: 14px;
  --cta-min-width: 136px;
  --cta-min-width-compact: 92px;
  --cta-gap: 8px;
  --cta-icon-size: 20px;
  --cta-icon-box: 26px;
  --cta-font-weight: 600;
  --header-action-height: var(--cta-height-compact);
  --header-action-radius: var(--btn-radius);
  --header-action-gap: var(--cta-gap);
  --header-cta-padding-x: var(--cta-padding-x-compact);
  --consultation-padding-x: var(--cta-padding-x-compact);
  --header-top-height: 40px;
  --header-main-height: 88px;
  --header-main-padding-y: 6px;
  --header-inner-height: 76px;
  --header-height: calc(var(--header-top-height) + var(--header-main-height));
  --header-gap: clamp(14px, 2.4vw, 32px);
  --header-nav-gap: clamp(8px, 1.1vw, 16px);
  --transition-fast: 0.2s ease;
  --space-section: clamp(45px, 7vw, 56px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

html.is-programmatic-scrolling {
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height-base);
  overflow-x: hidden;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: var(--line-height-tight);
  letter-spacing: 0;
}

h1 {
  margin-bottom: 20px;
  font-size: var(--font-size-hero);
  font-weight: 600;
}

h2 {
  margin-bottom: 14px;
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

h3 {
  margin-bottom: 10px;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

p {
  color: var(--color-muted);
}

::selection {
  color: var(--color-white);
  background: var(--color-primary);
}

.skip-link {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transform: translateY(-140%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

.stats-grid span {
  color: rgba(var(--rgb-white), 0.8);
  font-size: var(--font-size-body);
}

@media (max-width: 640px) {
  html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }
}