/* ==========================================================================
   Ideal Vision — Frontend Styles (Techzen-rich rebuild)
   ========================================================================== */

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

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f7f9fc;
  --color-bg-dark: #0a1628;
  --color-bg-darker: #061121;
  --color-text: #0a1628;
  --color-text-muted: #5a6b80;
  --color-text-light: #8a98ad;
  --color-text-on-dark: #ffffff;
  --color-text-muted-on-dark: #a8b8d0;

  --color-primary: #0066ff;
  --color-primary-dark: #0052cc;
  --color-primary-light: #e6f0ff;
  --color-accent: #00d4ff;
  --color-accent-glow: rgba(0, 212, 255, 0.15);
  --color-orange: #ff7a45;

  --color-border: #e5eaf2;
  --color-border-dark: rgba(255, 255, 255, 0.08);

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.05);
  --shadow: 0 8px 24px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 24px 60px rgba(10, 22, 40, 0.12);
  --shadow-glow: 0 0 40px rgba(0, 102, 255, 0.25);

  --container: 1280px;
  --header-h: 80px;
}

[dir="rtl"] {
  --font-display: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

/* ============= Typography ============= */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text); }
h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
h4 { font-size: 1.25rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow .dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
.eyebrow--light { background: rgba(0, 212, 255, 0.1); color: var(--color-accent); border: 1px solid rgba(0, 212, 255, 0.25); }
.eyebrow--light .dot { background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }

.section-title { margin-bottom: 16px; }
.section-subtitle { font-size: 1.0625rem; color: var(--color-text-muted); max-width: 680px; margin-bottom: 56px; }

/* ============= Buttons ============= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  font-size: 0.9375rem; font-weight: 600;
  border-radius: var(--radius);
  transition: all 0.25s ease;
  white-space: nowrap;
  border: 2px solid transparent;
  position: relative;
}
.btn-primary { background: var(--color-primary); color: white; box-shadow: 0 8px 20px rgba(0, 102, 255, 0.25); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 102, 255, 0.4); color: white; }
.btn-outline { border-color: var(--color-border); color: var(--color-text); background: white; }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost-light { border-color: rgba(255,255,255,0.2); color: white; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: white; }
.btn-accent { background: var(--color-accent); color: var(--color-bg-dark); box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 212, 255, 0.5); color: var(--color-bg-dark); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ============= Header ============= */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 32px; }
.site-header__logo { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--color-text); display: flex; align-items: center; gap: 10px; }
.site-header__logo .logo-img { height: 44px; width: auto; display: block; object-fit: contain; }
.site-footer__about .site-header__logo .logo-img { height: 46px; }
.site-header__logo .logo-mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); border-radius: 8px; position: relative; }
.site-header__logo .logo-mark::after { content: ''; position: absolute; inset: 6px; border: 2px solid white; border-radius: 4px; }
.site-nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.site-nav a { padding: 8px 16px; font-size: 0.9375rem; font-weight: 500; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: all 0.2s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--color-primary); background: var(--color-primary-light); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.lang-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); }
.lang-switcher a { padding: 4px 8px; border-radius: 999px; }
.lang-switcher a.is-active { background: var(--color-text); color: white; }
.mobile-toggle { display: none; width: 40px; height: 40px; }

/* ============= HERO — Techzen-style banner ============= */
.hero-banner {
  position: relative;
  padding: 80px 0 100px;
  background: linear-gradient(135deg, #0a1628 0%, #0f2447 60%, #061121 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
.hero-banner__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero-banner__orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-banner__orb--1 { top: -10%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(0, 212, 255, 0.4), transparent 70%); }
.hero-banner__orb--2 { bottom: -20%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 102, 255, 0.3), transparent 70%); }
.hero-banner__shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-banner__shape { position: absolute; opacity: 0.4; }
.hero-banner__shape--1 { top: 15%; right: 50%; animation: floatSlow 8s ease-in-out infinite; }
.hero-banner__shape--2 { bottom: 20%; right: 8%; animation: floatSlow 10s ease-in-out infinite 2s; }
.hero-banner__shape--3 { top: 60%; left: 5%; animation: floatSlow 12s ease-in-out infinite 4s; }
.hero-banner__shape--4 { top: 25%; left: 45%; animation: spin 30s linear infinite; opacity: 0.15; }
@keyframes floatSlow { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(8deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero-banner__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; min-height: 540px; }
.hero-banner h1 { color: white; margin-bottom: 24px; max-width: 600px; }
.hero-banner h1 .highlight { background: linear-gradient(90deg, var(--color-accent), #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; }
.hero-banner h1 .highlight::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-accent), transparent); border-radius: 2px; }
.hero-banner__description { font-size: 1.125rem; color: var(--color-text-muted-on-dark); margin-bottom: 36px; max-width: 540px; line-height: 1.7; }
.hero-banner__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-trust { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.hero-trust__item { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--color-text-muted-on-dark); }
.hero-trust__item i { color: var(--color-accent); font-size: 1rem; }

.hero-visual { position: relative; }
.hero-visual__main { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-visual__main svg { width: 100%; height: auto; max-width: 560px; }

.hero-metric { position: absolute; z-index: 3; background: rgba(10, 22, 40, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); animation: floatSlow 5s ease-in-out infinite; }
.hero-metric--tl { top: 8%; left: -8%; animation-delay: 0s; }
.hero-metric--br { bottom: 12%; right: -5%; animation-delay: 2.5s; }
.hero-metric--mr { top: 45%; right: -10%; animation-delay: 1.5s; }
.hero-metric__icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; }
.hero-metric__icon--green { background: linear-gradient(135deg, #10b981, #34d399); }
.hero-metric__icon--orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.hero-metric__label { font-size: 0.6875rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; }
.hero-metric__value { font-size: 1.0625rem; font-weight: 700; color: white; }

/* ============= Section base ============= */
.section { padding: 100px 0; position: relative; overflow: hidden; }
.section-dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: white; }
.section-alt { background: var(--color-bg-alt); }
.section-header { text-align: center; margin-bottom: 64px; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-header .eyebrow { justify-content: center; }
.section-header .section-subtitle { margin-left: auto; margin-right: auto; }
.section-deco { position: absolute; pointer-events: none; opacity: 0.4; z-index: 0; }
.section-deco--tr { top: 5%; right: 5%; }
.section-deco--bl { bottom: 5%; left: 5%; }
.section > .container { position: relative; z-index: 1; }

/* ============= Split block ============= */
.split-block { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split-block--reverse > :first-child { order: 2; }
[dir="rtl"] .split-block--reverse > :first-child { order: 0; }
[dir="rtl"] .split-block--reverse > :last-child { order: 2; }
.split-block__visual { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, var(--color-bg-dark), #1a3a6e); }
.split-block__visual--light { background: linear-gradient(135deg, var(--color-primary-light), #f0f7ff); }
.split-block__visual svg.illustration { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-badge { position: absolute; background: white; padding: 14px 18px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; z-index: 2; }
.visual-badge--tl { top: 20px; left: -20px; animation: floatSlow 5s ease-in-out infinite; }
.visual-badge--br { bottom: 20px; right: -20px; animation: floatSlow 5s ease-in-out infinite 2.5s; }
.visual-badge__icon { width: 40px; height: 40px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.visual-badge__label { font-size: 0.6875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.visual-badge__value { font-weight: 700; font-size: 1rem; }
.feature-list { list-style: none; margin-top: 24px; }
.feature-list li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; font-size: 0.9375rem; }
.feature-list li i { flex-shrink: 0; width: 24px; height: 24px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-top: 2px; }

/* ============= Service Cards ============= */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.service-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all 0.35s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s;
  z-index: 2;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(0, 102, 255, 0.15);
  border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.service-card__body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.service-card p { color: var(--color-text-muted); font-size: 0.9375rem; flex: 1; }
.service-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 24px;
  font-weight: 600; font-size: 0.875rem;
  color: var(--color-primary);
}
.service-card__link i { transition: transform 0.2s; }
.service-card:hover .service-card__link i { transform: translateX(4px); }
[dir="rtl"] .service-card:hover .service-card__link i { transform: translateX(-4px); }

/* ===== Service illustration ===== */
.service-illust {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
}
.service-illust svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============= Why Choose / Feature Grid ============= */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.feature-item { position: relative; padding-left: 72px; }
[dir="rtl"] .feature-item { padding-left: 0; padding-right: 72px; }
.feature-item__num { position: absolute; left: 0; top: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: white; border-radius: var(--radius); font-weight: 700; font-size: 1.25rem; box-shadow: 0 10px 25px rgba(0, 102, 255, 0.25); }
[dir="rtl"] .feature-item__num { left: auto; right: 0; }
.feature-item h4 { margin-bottom: 8px; }
.feature-item p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* ============= Stats banner ============= */
.stats-banner { position: relative; padding: 64px 56px; background: linear-gradient(135deg, var(--color-primary) 0%, #003d99 60%, #002966 100%); border-radius: var(--radius-2xl); color: white; overflow: hidden; }
.stats-banner__bg { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.25), transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.15), transparent 50%); }
.stats-banner__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to right, transparent, black, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black, transparent); }
.stats-banner__inner { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.stat__value { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, white, var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.stat__label { font-size: 0.9375rem; color: rgba(255,255,255,0.85); }

/* ============= Industries (with photo cards) ============= */
.industries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.industry-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-dark); transition: all 0.3s; }
.industry-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.55; transition: all 0.4s; }
.industry-card:hover .industry-card__img { opacity: 0.75; transform: scale(1.05); }
.industry-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,22,40,0.95) 100%); }
.industry-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; color: white; z-index: 1; }
.industry-card__icon { width: 44px; height: 44px; background: rgba(0, 212, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(0, 212, 255, 0.3); color: var(--color-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.125rem; }
.industry-card__name { font-size: 1.125rem; font-weight: 700; }

/* ============= Partners ============= */
.partners-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.partner-cell {
  background: white;
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 28px;
  transition: all 0.25s;
  position: relative;
}
/* Image logos: grayscale by default, color on hover (enterprise convention) */
.partner-cell img {
  max-height: 44px;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.4);
  opacity: 0.7;
  transition: all 0.25s;
}
.partner-cell:hover img { filter: none; opacity: 1; }

/* SVG monogram badges: always full color */
.partner-cell svg {
  max-height: 48px;
  max-width: 100px;
  width: auto; height: auto;
  transition: transform 0.25s;
}
.partner-cell:hover svg {
  transform: scale(1.08);
}

/* Text fallback */
.partner-cell span {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.25s;
}
.partner-cell:hover span { color: var(--color-primary); }

.partner-cell:hover { background: var(--color-bg-alt); }

/* ============= Code window ============= */
.code-window { position: relative; width: 100%; max-width: 540px; margin: 0 auto; background: rgba(0,0,0,0.6); border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); font-size: 0.8125rem; color: #a8b8d0; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
.code-window__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.06); }
.code-window__bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.code-window__bar .dot:nth-child(1) { background: #ff5f57; }
.code-window__bar .dot:nth-child(2) { background: #ffbd2e; }
.code-window__bar .dot:nth-child(3) { background: #28c940; }
.code-window__bar .filename { margin-left: auto; font-size: 0.75rem; color: #6272a4; }
.code-window pre { padding: 20px; line-height: 1.7; }
.code-window .k { color: #ff79c6; }
.code-window .s { color: #f1fa8c; }
.code-window .c { color: #6272a4; }
.code-window .n { color: #bd93f9; }

/* ============= Process steps ============= */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 14px); z-index: 0; }
.process-step { position: relative; z-index: 1; text-align: center; padding: 0 16px; }
.process-step__num { width: 64px; height: 64px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; background: white; border: 2px solid var(--color-primary); color: var(--color-primary); border-radius: 50%; font-weight: 800; font-size: 1.25rem; position: relative; }
.process-step__num::after { content: ''; position: absolute; inset: -8px; border: 1px dashed var(--color-primary); border-radius: 50%; opacity: 0.3; }
.process-step h4 { margin-bottom: 8px; font-size: 1.0625rem; }
.process-step p { color: var(--color-text-muted); font-size: 0.875rem; }

/* ============= Testimonials ============= */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.testimonial { padding: 36px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); position: relative; transition: all 0.3s; }
.testimonial:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
.testimonial__quote { position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
[dir="rtl"] .testimonial__quote { right: auto; left: 28px; }
.testimonial__stars { color: var(--color-warning); margin-bottom: 16px; font-size: 0.875rem; }
.testimonial__content { color: var(--color-text); font-size: 1rem; margin-bottom: 24px; line-height: 1.7; }
.testimonial__author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.testimonial__avatar { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--color-primary-light); flex-shrink: 0; }
.testimonial__avatar--initial { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; }
.testimonial__name { font-weight: 700; }
.testimonial__role { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ============= CTA Banner ============= */
.cta-banner { position: relative; background: linear-gradient(135deg, var(--color-bg-dark), #0f2447); color: white; border-radius: var(--radius-2xl); padding: 72px 56px; overflow: hidden; }
.cta-banner__orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.cta-banner__orb--1 { top: -30%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent 70%); }
.cta-banner__orb--2 { bottom: -50%; left: -10%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(0, 102, 255, 0.3), transparent 70%); }
.cta-banner__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse at center, black, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%); }
.cta-banner__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-banner h2 { color: white; margin-bottom: 12px; max-width: 600px; }
.cta-banner p { color: var(--color-text-muted-on-dark); max-width: 560px; font-size: 1.0625rem; }

/* ============= Footer ============= */
.site-footer { background: var(--color-bg-darker); color: var(--color-text-muted-on-dark); padding: 80px 0 24px; position: relative; overflow: hidden; }
.site-footer::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 30%, rgba(0, 102, 255, 0.15), transparent 60%), radial-gradient(circle at 90% 80%, rgba(0, 212, 255, 0.1), transparent 60%); pointer-events: none; }
.site-footer > .container { position: relative; z-index: 1; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--color-border-dark); margin-bottom: 32px; }
.site-footer__about { max-width: 360px; }
.site-footer__about p { color: var(--color-text-muted-on-dark); font-size: 0.9375rem; margin-top: 16px; }
.site-footer h4 { color: white; font-size: 0.9375rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--color-text-muted-on-dark); font-size: 0.9375rem; transition: color 0.2s; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; flex-wrap: wrap; gap: 16px; }
.site-footer__socials { display: flex; gap: 12px; }
.site-footer__socials a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-dark); border-radius: 50%; }
.site-footer__socials a:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; }

/* ============= Page Banner ============= */
.page-banner { padding: 100px 0 80px; background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-darker)); color: white; position: relative; overflow: hidden; }
.page-banner::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at center, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 70%); }
.page-banner__inner { position: relative; z-index: 1; max-width: 760px; }
.page-banner h1 { color: white; margin-bottom: 16px; }
.page-banner p { color: var(--color-text-muted-on-dark); font-size: 1.0625rem; }

/* ============= Contact form ============= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; }
.contact-info-card { padding: 32px; background: var(--color-bg-alt); border-radius: var(--radius-lg); }
.contact-info-card .item { display: flex; gap: 14px; margin-bottom: 24px; }
.contact-info-card .item i { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: white; border-radius: var(--radius); color: var(--color-primary); }
.contact-info-card .item h4 { font-size: 0.9375rem; margin-bottom: 4px; }
.contact-info-card .item p { font-size: 0.9375rem; color: var(--color-text-muted); }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: 14px 16px; font-family: inherit; font-size: 0.9375rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: white; transition: all 0.2s; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.9375rem; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ============= WhatsApp FAB ============= */
.whatsapp-fab { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 56px; height: 56px; background: #25d366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4); transition: transform 0.2s; }
[dir="rtl"] .whatsapp-fab { right: auto; left: 24px; }
.whatsapp-fab:hover { transform: scale(1.1); }

/* ============= FAQ ============= */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: white; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq-item summary { padding: 20px 24px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--color-primary); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 24px 20px; color: var(--color-text-muted); font-size: 0.9375rem; }

/* ============= Responsive ============= */
@media (max-width: 1024px) {
  .hero-banner__inner, .split-block, .contact-grid, .site-footer__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .process-steps::before { display: none; }
}
@media (max-width: 768px) {
  .site-nav { display: none; }
  .mobile-toggle { display: inline-flex; }
  .section, .hero-banner { padding: 64px 0; }
  .form-row { grid-template-columns: 1fr; }
  .stats-banner, .cta-banner { padding: 40px 24px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .process-steps { grid-template-columns: 1fr; }
  .hero-metric--tl, .hero-metric--br, .hero-metric--mr { display: none; }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============= Constellation Animation ============= */
.constellation-stage { position: relative; }
.constellation-stage .illustration { display: block; }

/* Hub: gentle continuous pulse halo */
.const-hub-pulse {
  transform-origin: 250px 200px;
  animation: hubPulse 3s ease-out infinite;
}
@keyframes hubPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* Hub gentle breathing glow */
.const-glow {
  transform-origin: 250px 200px;
  animation: hubGlow 4s ease-in-out infinite;
}
@keyframes hubGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Each client building "drops in" with a stagger, then continues to bob subtly */
.const-client {
  opacity: 0;
  animation: clientAppear 0.8s cubic-bezier(.34,1.56,.64,1) forwards,
             clientFloat 6s ease-in-out infinite 1s;
}
.const-client--1  { animation-delay: 0.3s, 1.3s;  }
.const-client--2  { animation-delay: 0.5s, 1.5s;  }
.const-client--3  { animation-delay: 0.7s, 1.7s;  }
.const-client--4  { animation-delay: 0.9s, 1.9s;  }
.const-client--5  { animation-delay: 1.1s, 2.1s;  }
.const-client--6  { animation-delay: 1.3s, 2.3s;  }
.const-client--7  { animation-delay: 1.5s, 2.5s;  }
.const-client--8  { animation-delay: 1.7s, 2.7s;  }
.const-client--9  { animation-delay: 1.9s, 2.9s;  }
.const-client--10 { animation-delay: 2.1s, 3.1s;  }

@keyframes clientAppear {
  0%   { opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(0.3); }
  100% { opacity: 1; }
}

/* Note: transform on <g> with translate() in SVG attribute — we use CSS transform-box */
.const-client {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes clientFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Connection lines: draw in sequence with stroke-dasharray reveal */
.const-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: lineReveal 1s ease-out forwards;
}
.const-line--1  { animation-delay: 0.6s; }
.const-line--2  { animation-delay: 0.8s; }
.const-line--3  { animation-delay: 1.0s; }
.const-line--4  { animation-delay: 1.2s; }
.const-line--5  { animation-delay: 1.4s; }
.const-line--6  { animation-delay: 1.6s; }
.const-line--7  { animation-delay: 1.8s; }
.const-line--8  { animation-delay: 2.0s; }
.const-line--9  { animation-delay: 2.2s; }
.const-line--10 { animation-delay: 2.4s; }

@keyframes lineReveal {
  to { stroke-dashoffset: 0; }
}

/* Subtle ongoing glow on lines after reveal */
.const-lines { animation: linesGlow 4s ease-in-out infinite 3s; }
@keyframes linesGlow {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.55; }
}

/* Data packets flowing from clients inward to hub */
.const-packet { opacity: 0; }
.const-packet--1 {
  animation: packet1 3.2s ease-in-out infinite 3s;
}
.const-packet--2 {
  animation: packet2 3.4s ease-in-out infinite 3.6s;
}
.const-packet--3 {
  animation: packet3 3.6s ease-in-out infinite 4.2s;
}
.const-packet--4 {
  animation: packet4 3.0s ease-in-out infinite 4.8s;
}
@keyframes packet1 {
  0%   { opacity: 0; cx: 370; cy: 120; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; cx: 250; cy: 200; }
}
@keyframes packet2 {
  0%   { opacity: 0; cx: 130; cy: 135; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; cx: 250; cy: 200; }
}
@keyframes packet3 {
  0%   { opacity: 0; cx: 320; cy: 160; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; cx: 250; cy: 200; }
}
@keyframes packet4 {
  0%   { opacity: 0; cx: 120; cy: 280; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; cx: 250; cy: 200; }
}

/* Status dots on rooftops */
.const-pulse-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: dotPulse 2s ease-in-out infinite;
}
.const-pulse-dot--d1 { animation-delay: 0.5s; }
.const-pulse-dot--d2 { animation-delay: 1.0s; }
.const-pulse-dot--d3 { animation-delay: 1.5s; }
.const-pulse-dot--strong { animation-duration: 1.6s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* "+ NEW" indicator: appears periodically after initial load */
.const-newclient {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: newClientFlash 8s ease-in-out infinite 4s;
}
@keyframes newClientFlash {
  0%, 5%   { opacity: 0; transform: translateY(-6px); }
  10%, 25% { opacity: 1; transform: translateY(0); }
  35%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Pause animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .const-hub-pulse, .const-glow, .const-client, .const-line, .const-lines,
  .const-packet, .const-pulse-dot, .const-newclient {
    animation: none !important;
    opacity: 1 !important;
  }
  .const-client { opacity: 1; }
  .const-line { stroke-dashoffset: 0; }
}

/* ============= Service Illustration Animations ============= */

/* Generic floater (used by floating badges on cards) */
.service-illust .floater {
  transform-box: fill-box;
  transform-origin: center;
  animation: illustFloat 3.5s ease-in-out infinite;
}
.service-illust .floater--d1 { animation-delay: 1.2s; }
@keyframes illustFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* --- Infrastructure: blinking server LEDs --- */
.service-illust--infra .server-led {
  transform-box: fill-box;
  transform-origin: center;
  animation: ledBlink 1.8s ease-in-out infinite;
}
.service-illust--infra .server-led--1  { animation-delay: 0.0s; }
.service-illust--infra .server-led--2  { animation-delay: 0.3s; }
.service-illust--infra .server-led--3  { animation-delay: 0.6s; }
.service-illust--infra .server-led--4  { animation-delay: 0.9s; }
.service-illust--infra .server-led--5  { animation-delay: 0.15s; }
.service-illust--infra .server-led--6  { animation-delay: 0.45s; }
.service-illust--infra .server-led--7  { animation-delay: 0.75s; }
.service-illust--infra .server-led--8  { animation-delay: 1.05s; }
.service-illust--infra .server-led--9  { animation-delay: 0.2s; }
.service-illust--infra .server-led--10 { animation-delay: 0.5s; }
.service-illust--infra .server-led--11 { animation-delay: 0.8s; }
.service-illust--infra .server-led--12 { animation-delay: 1.1s; }
@keyframes ledBlink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

/* --- Network: pulsing center, traveling packets, node pulse --- */
.service-illust--network .net-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: netPulse 2.5s ease-out infinite;
}
@keyframes netPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0;   }
}
.service-illust--network .net-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: netNodePulse 2s ease-in-out infinite;
}
.service-illust--network .net-node--1 { animation-delay: 0.0s; }
.service-illust--network .net-node--2 { animation-delay: 0.3s; }
.service-illust--network .net-node--3 { animation-delay: 0.6s; }
.service-illust--network .net-node--4 { animation-delay: 0.9s; }
.service-illust--network .net-node--5 { animation-delay: 1.2s; }
.service-illust--network .net-node--6 { animation-delay: 1.5s; }
@keyframes netNodePulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.15); }
}

.service-illust--network .net-packet {
  opacity: 0;
}
.service-illust--network .net-packet--1 {
  animation: netPacket1 2.4s ease-in-out infinite;
}
.service-illust--network .net-packet--2 {
  animation: netPacket2 2.8s ease-in-out infinite 0.9s;
}
.service-illust--network .net-packet--3 {
  animation: netPacket3 2.6s ease-in-out infinite 1.6s;
}
@keyframes netPacket1 {
  0%   { opacity: 0; cx: 60;  cy: 30; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; cx: 140; cy: 70; }
}
@keyframes netPacket2 {
  0%   { opacity: 0; cx: 140; cy: 70;  }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; cx: 220; cy: 110; }
}
@keyframes netPacket3 {
  0%   { opacity: 0; cx: 240; cy: 70; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; cx: 140; cy: 70; }
}

/* --- Surveillance: rotating scan beam, blinking LED, rec dot --- */
.service-illust--surveillance .surv-beam {
  transform-box: fill-box;
  transform-origin: center top;
  animation: survSweep 4s ease-in-out infinite alternate;
}
@keyframes survSweep {
  0%   { transform: rotate(-25deg); }
  100% { transform: rotate(25deg);  }
}
.service-illust--surveillance .surv-led {
  transform-box: fill-box;
  transform-origin: center;
  animation: ledBlink 1.5s ease-in-out infinite;
}
.service-illust--surveillance .surv-rec-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: recBlink 1s ease-in-out infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}
.service-illust--surveillance .surv-target {
  transform-box: fill-box;
  transform-origin: center;
  animation: targetPulse 2s ease-in-out infinite;
}
@keyframes targetPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* --- Hardware: animated screen content + chart bars growing --- */
.service-illust--hardware .hw-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: hwBar 2.5s ease-in-out infinite;
}
.service-illust--hardware .hw-bar--1 { animation-delay: 0.0s; }
.service-illust--hardware .hw-bar--2 { animation-delay: 0.15s; }
.service-illust--hardware .hw-bar--3 { animation-delay: 0.3s; }
.service-illust--hardware .hw-bar--4 { animation-delay: 0.4s; }
.service-illust--hardware .hw-bar--5 { animation-delay: 0.55s; }
.service-illust--hardware .hw-bar--6 { animation-delay: 0.7s; }
.service-illust--hardware .hw-bar--7 { animation-delay: 0.85s; }
.service-illust--hardware .hw-bar--8 { animation-delay: 1.0s; }
@keyframes hwBar {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}

/* --- Security: rotating shield rings + threats flashing --- */
.service-illust--security .sec-ring {
  transform-box: fill-box;
  transform-origin: center;
}
.service-illust--security .sec-ring--1 {
  animation: secRotate 12s linear infinite;
}
.service-illust--security .sec-ring--2 {
  animation: secRotate 8s linear infinite reverse;
}
@keyframes secRotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.service-illust--security .sec-threat {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: threatFlash 4s ease-in-out infinite;
}
.service-illust--security .sec-threat--1 { animation-delay: 0.0s; }
.service-illust--security .sec-threat--2 { animation-delay: 1.0s; }
.service-illust--security .sec-threat--3 { animation-delay: 2.0s; }
.service-illust--security .sec-threat--4 { animation-delay: 3.0s; }
@keyframes threatFlash {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1.1); }
  40%  { opacity: 1; transform: scale(1);   }
  60%  { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* --- Cloud: upload arrows pulsing + connection dots blinking --- */
.service-illust--cloud .cloud-arrow {
  opacity: 0;
  animation: cloudArrow 2.4s ease-in-out infinite;
}
.service-illust--cloud .cloud-arrow--1 { animation-delay: 0.0s; }
.service-illust--cloud .cloud-arrow--2 { animation-delay: 0.6s; }
.service-illust--cloud .cloud-arrow--3 { animation-delay: 1.2s; }
@keyframes cloudArrow {
  0%   { opacity: 0; transform: translateY(8px);  }
  30%  { opacity: 1; transform: translateY(0);    }
  70%  { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-12px);}
}
.service-illust--cloud .cloud-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: ledBlink 1.8s ease-in-out infinite;
}
.service-illust--cloud .cloud-dot--1 { animation-delay: 0.0s; }
.service-illust--cloud .cloud-dot--2 { animation-delay: 0.4s; }
.service-illust--cloud .cloud-dot--3 { animation-delay: 0.8s; }

/* --- Web: content blocks pulsing + card hover state --- */
.service-illust--web .web-line {
  transform-box: fill-box;
  transform-origin: left center;
  animation: webLine 3s ease-in-out infinite;
}
.service-illust--web .web-line--1 { animation-delay: 0.0s; }
.service-illust--web .web-line--2 { animation-delay: 0.3s; }
.service-illust--web .web-line--3 { animation-delay: 0.6s; }
@keyframes webLine {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}
.service-illust--web .web-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: webCard 2.5s ease-in-out infinite;
}
.service-illust--web .web-card--1 { animation-delay: 0.0s; }
.service-illust--web .web-card--2 { animation-delay: 0.4s; }
.service-illust--web .web-card--3 { animation-delay: 0.8s; }
@keyframes webCard {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-1.5px); }
}

/* --- Mobile: tap ripple + cards highlighting in sequence --- */
.service-illust--mobile .mob-tap-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.service-illust--mobile .mob-tap-ring--1 {
  animation: mobTap 2.2s ease-out infinite;
}
.service-illust--mobile .mob-tap-ring--2 {
  animation: mobTap 2.2s ease-out infinite 0.5s;
}
@keyframes mobTap {
  0%   { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(1.8); }
}
.service-illust--mobile .mob-card {
  animation: mobCardHighlight 3s ease-in-out infinite;
}
.service-illust--mobile .mob-card--1 { animation-delay: 0.0s; }
.service-illust--mobile .mob-card--2 { animation-delay: 1.0s; }
.service-illust--mobile .mob-card--3 { animation-delay: 2.0s; }
@keyframes mobCardHighlight {
  0%, 100% { fill: #e6f0ff; }
  25%      { fill: #cce0ff; }
  50%      { fill: #e6f0ff; }
}

/* Pause illustration animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .service-illust * {
    animation: none !important;
  }
}

/* Mobile responsiveness for service illustrations */
@media (max-width: 768px) {
  .service-illust { height: 140px; }
}

/* ==========================================================================
   HOME PAGE — May 2026 redesign
   New sections: .about-new, .partners-gold, .services-redesigned, .why-redesigned
   Naming follows existing BEM-ish style elsewhere in app.css.
   ========================================================================== */


/* ============= shared utility additions ============= */

/* Light pill-style eyebrow used in new About + Why-Choose sections */
.eyebrow--pill {
  background: rgba(0, 102, 255, 0.08);
  border: 1px solid rgba(0, 102, 255, 0.15);
}

/* Gold eyebrow used in the dark "Gold Partnerships" section */
.eyebrow--gold {
  background: rgba(0, 212, 255, 0.08);
  color: var(--color-accent);
  border: 1px solid rgba(0, 212, 255, 0.3);
}
.eyebrow--gold i { color: var(--color-accent); }

/* Text/arrow link styled as a CTA without box */
.btn-link-accent {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-primary);
  font-weight: 600; font-size: 0.9375rem;
  padding: 16px 8px;
}
.btn-link-accent:hover { color: var(--color-primary-dark); }
.btn-link-accent i { transition: transform 0.2s; }
.btn-link-accent:hover i { transform: translateX(4px); }


/* ==========================================================================
   1. ABOUT NEW — "Engineering Secure & Scalable IT Infrastructure"
   ========================================================================== */

.about-new {
  position: relative;
  overflow: hidden;
}

/* dotted-bg decoration in bottom-left corner (matches screenshot subtle dots) */
.about-new::before {
  content: '';
  position: absolute;
  bottom: 80px; left: 0;
  width: 120px; height: 120px;
  background-image: radial-gradient(rgba(0,102,255,0.18) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Tier 1: 2-column split (copy + visual) ----
   Was .about-new__grid. Renamed __split because there are now multiple tiers
   in this section, not just one grid. align-items: center keeps the visual
   vertically centred against the (now shorter) left column. */
.about-new__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}

/* ---- LEFT column ---- */
.about-new__copy { padding-top: 8px; }

.about-new__title {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 4px;
}
.about-new__title-line { color: var(--color-text); display: block; }
.about-new__title-accent { color: var(--color-primary); display: block; }
.about-new__title-underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 16px 0 24px;
}

.about-new__lead {
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 16px;
}
.about-new__hl { color: var(--color-primary); font-weight: 600; }

.about-new__body {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 14px;
}

.about-new__ctas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 28px;
}

/* ---- Tier 2: full-width feature cards row ----
   Was previously stacked inside the left column (cramped, with 4 cols squeezed
   into one half of the layout). Now spans the full container width with proper
   breathing room. */
.about-new__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 32px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.about-new__feature {}
.about-new__feature-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.1);
  color: var(--color-primary);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 1.25rem;
}
.about-new__feature-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}
.about-new__feature-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ---- Tier 3: full-width stats banner ----
   Bigger numbers now that they have more room. */
.about-new__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.about-new__stat {
  display: flex; align-items: center; gap: 16px;
}
.about-new__stat-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.about-new__stat-value {
  font-size: 1.625rem; font-weight: 800; line-height: 1; color: var(--color-text);
}
.about-new__stat-label {
  font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 4px;
}

/* ---- RIGHT column (scene + overlay cards) ---- */
.about-new__visual {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: linear-gradient(135deg, #020817, #0a1628);
  aspect-ratio: 5 / 6;
  min-height: 540px;
}
.about-new__scene { width: 100%; height: 100%; display: block; }

/* overlay cards (absolute over the scene) */
.about-new__overlay {
  position: absolute;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--color-text-on-dark);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.about-new__overlay h5 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text-on-dark);
}
.about-new__overlay p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 8px;
}
.about-new__overlay-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 212, 255, 0.15);
  color: var(--color-accent);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.875rem;
}
.about-new__overlay-link {
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.about-new__overlay-link i { font-size: 0.625rem; }

/* Title overlay (top-left, no card style, just text) */
.about-new__overlay--title {
  top: 24px; left: 24px;
  right: 24px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}
.about-new__overlay-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin: 0;
}
.about-new__overlay-rule {
  width: 40px; height: 2px;
  background: var(--color-accent);
  margin-top: 6px;
}

.about-new__overlay--1 { top: 40%; right: 16px; max-width: 240px; }
.about-new__overlay--2 { bottom: 16px; left: 24px; max-width: 200px; }
.about-new__overlay--3 { bottom: 16px; right: 16px; max-width: 200px; }

/* scene animations */
@keyframes aboutDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.6); }
}
.about-new__dot-pulse {
  animation: aboutDotPulse 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.about-new__dot-pulse--d1 { animation-delay: 0.8s; }
.about-new__dot-pulse--d2 { animation-delay: 1.6s; }

@keyframes aboutCubeFloat {
  0%, 100% { transform: translate(300px, 420px); }
  50% { transform: translate(300px, 410px); }
}
.about-new__cube { animation: aboutCubeFloat 4s ease-in-out infinite; }

@keyframes aboutSpark {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.about-new__spark { animation: aboutSpark 2s ease-in-out infinite; }
.about-new__spark--1 { animation-delay: 0s; }
.about-new__spark--2 { animation-delay: 0.5s; }
.about-new__spark--3 { animation-delay: 1s; }
.about-new__spark--4 { animation-delay: 1.5s; }

/* RTL: swap overlay sides */
[dir="rtl"] .about-new__overlay--1 { right: auto; left: 16px; }
[dir="rtl"] .about-new__overlay--2 { left: auto; right: 24px; }
[dir="rtl"] .about-new__overlay--3 { right: auto; left: 16px; }


/* ==========================================================================
   2. PARTNERS GOLD — "Gold Partnerships with Industry Leaders"
   ========================================================================== */

.partners-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #020817 0%, #061a3a 50%, #020817 100%);
}
.partners-gold__grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
/* subtle world-map dots in the background */
.partners-gold__map-bg {
  position: absolute;
  top: 10%; right: -5%;
  width: 60%; height: 70%;
  background-image: radial-gradient(rgba(0, 212, 255, 0.12) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 60% 40% at 50% 50%, black, transparent);
  pointer-events: none;
}

.partners-gold__container { position: relative; z-index: 1; }

.partners-gold__top {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}

/* ---- copy ---- */
.partners-gold__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text-on-dark);
  margin: 0;
}
.partners-gold__title-line { color: #ffffff; display: block; }
.partners-gold__title-accent { color: #4d9cff; display: block; }
.partners-gold__title-underline {
  width: 60px; height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  margin: 16px 0 28px;
}
.partners-gold__body {
  color: var(--color-text-muted-on-dark);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* feature row */
.partners-gold__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: var(--radius-lg);
}
.partners-gold__feature {
  display: flex; align-items: flex-start; gap: 10px;
}
.partners-gold__feature-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.partners-gold__feature-text {
  color: var(--color-text-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ---- visual ---- */
.partners-gold__visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  justify-self: center;
}
.partners-gold__visual svg { width: 100%; height: 100%; }

/* ---- logo grid ---- */
.partners-gold__grid-wrap {
  padding: 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius-xl);
}
.partners-gold__grid-title {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.partners-gold__logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.partners-gold__logo-card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 20px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.partners-gold__logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}
.partners-gold__logo-mark {
  display: flex; align-items: center; justify-content: center;
  flex: 1; padding: 8px 0;
}
.partners-gold__logo-tag {
  font-size: 0.6875rem;
  color: #C68400;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
}
.partners-gold__logo-tag i { color: #FFA000; }

/* "& Many More" tile */
.partners-gold__logo-card--more {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(0, 212, 255, 0.4);
}
.partners-gold__logo-card--more:hover { box-shadow: 0 14px 32px rgba(0, 212, 255, 0.15); }
.partners-gold__more-icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 32px;
  margin-bottom: 10px;
}
.partners-gold__more-icon span {
  display: block;
  width: 14px; height: 14px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.7;
}
.partners-gold__more-icon span:nth-child(2) { opacity: 0.5; }
.partners-gold__more-icon span:nth-child(3) { opacity: 0.5; }
.partners-gold__more-icon span:nth-child(4) { opacity: 0.3; }
.partners-gold__more-text {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* footer note */
.partners-gold__footer {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 24px;
  color: var(--color-text-muted-on-dark);
  font-size: 0.875rem;
}
.partners-gold__footer i { color: var(--color-accent); }
.partners-gold__footer-line {
  display: inline-block;
  flex: 0 1 80px;
  height: 1px;
  background: rgba(0, 212, 255, 0.3);
}


/* ==========================================================================
   3. SERVICES REDESIGNED — "Our Core IT Services"
   ========================================================================== */

.services-redesigned__header { text-align: center; margin-bottom: 48px; }
.services-redesigned__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.services-redesigned__eyebrow-line {
  display: inline-block; width: 24px; height: 1px;
  background: var(--color-primary); opacity: 0.4;
}
.services-redesigned__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 8px;
}
.services-redesigned__title-accent {
  color: var(--color-primary);
  border-bottom: 4px solid var(--color-primary);
  padding-bottom: 4px;
}
.services-redesigned__subtitle {
  margin: 16px auto 0;
  max-width: 720px;
}

/* Services grid: 5 columns on row 1, 4 columns on row 2 (the 9th card spans 1.25
   cols to keep row 2 visually balanced). Falls back to fewer columns on narrow
   viewports. The illustration images (in /assets/images/services/) bake the
   numbered chip into the visual, so the previous .services-redesigned__number
   element has been removed from the markup. */
.services-redesigned__grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);  /* 20-col bus, fits 5 cards (4 cols each) and 4 cards (5 cols each) */
  gap: 20px;
  margin-bottom: 48px;
}
.services-redesigned__card:nth-child(-n+5) { grid-column: span 4; }  /* row 1: 5 cards × 4 cols */
.services-redesigned__card:nth-child(n+6)  { grid-column: span 5; }  /* row 2: 4 cards × 5 cols */

.services-redesigned__card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.services-redesigned__card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 102, 255, 0.3);
  box-shadow: 0 18px 40px rgba(10, 22, 40, 0.08);
}

.services-redesigned__illustration {
  /* aspect-ratio matches the source images (5:3) so they display un-cropped */
  aspect-ratio: 5 / 3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f7ff, #fafcff);
}
.services-redesigned__illustration img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: center;
}

.services-redesigned__body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.services-redesigned__card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}
.services-redesigned__card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}

.services-redesigned__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.services-redesigned__brand {
  display: inline-flex; align-items: center;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.services-redesigned__brand:hover { opacity: 1; }

/* Bottom trust strip */
.services-redesigned__trust {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.services-redesigned__trust-item {
  display: flex; align-items: flex-start; gap: 10px;
}
.services-redesigned__trust-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 0.875rem;
}
.services-redesigned__trust-item h5 {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.3;
}
.services-redesigned__trust-item p {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}


/* ==========================================================================
   4. WHY REDESIGNED — "Built on Trust, Driven by Expertise"
   ========================================================================== */

.why-redesigned {
  position: relative;
  background: linear-gradient(135deg, #020817 0%, #061a3a 50%, #020817 100%);
  overflow: hidden;
}

.why-redesigned__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: stretch;
}

/* ---- LEFT ---- */
.why-redesigned__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 0;
}
.why-redesigned__title-line { color: #ffffff; display: block; }
.why-redesigned__title-accent { color: #4d9cff; display: block; }
.why-redesigned__title-underline {
  width: 60px; height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  margin: 16px 0 24px;
}

.why-redesigned__lead {
  color: var(--color-text-on-dark);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.why-redesigned__body {
  color: var(--color-text-muted-on-dark);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 32px;
}
.why-redesigned__sla-link {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom: 1px dashed rgba(0, 212, 255, 0.4);
}
.why-redesigned__sla-link:hover { border-bottom-style: solid; }

.why-redesigned__items { display: flex; flex-direction: column; gap: 16px; }
.why-redesigned__item {
  display: grid;
  grid-template-columns: 48px 56px 1fr;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}
.why-redesigned__item:last-child { border-bottom: none; }
.why-redesigned__item-num {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.35);
}
.why-redesigned__item-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 1.125rem;
}
.why-redesigned__item-body h4 {
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.why-redesigned__item-body p {
  color: var(--color-text-muted-on-dark);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- RIGHT (visual) ---- */
.why-redesigned__visual {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius-2xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* Deployment badge */
.why-redesigned__deploy-badge {
  position: absolute;
  top: -20px; left: 32px;
  z-index: 3;
  background: #ffffff;
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.why-redesigned__deploy-icon {
  width: 26px; height: 26px;
  background: #ecfdf5;
  color: #10b981;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 0.75rem;
}
.why-redesigned__deploy-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}
.why-redesigned__deploy-status {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Code window adjustments inside the visual */
.why-redesigned__code {
  margin: 24px auto 0;
  max-width: 100%;
  background: #1e1f2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
}
.why-redesigned__code pre {
  font-size: 0.75rem;
  padding: 16px;
  line-height: 1.7;
}

/* Performance metrics card (overlay top-right) */
.why-redesigned__metrics {
  position: absolute;
  top: 64px; right: 16px;
  z-index: 2;
  width: 200px;
  background: rgba(10, 22, 40, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
.why-redesigned__metrics-title {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  color: var(--color-text-muted-on-dark);
  font-weight: 700;
  margin-bottom: 10px;
}
.why-redesigned__metric { margin-bottom: 8px; }
.why-redesigned__metric:last-of-type { margin-bottom: 12px; }
.why-redesigned__metric-head {
  display: flex; justify-content: space-between;
  font-size: 0.625rem;
  color: var(--color-text-on-dark);
  margin-bottom: 4px;
  font-weight: 600;
}
.why-redesigned__metric-val { color: var(--color-accent); }
.why-redesigned__metric-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.why-redesigned__metric-fill {
  height: 100%;
  background: linear-gradient(90deg, #0066ff, #00d4ff);
  border-radius: 2px;
}
.why-redesigned__spark { width: 100%; height: 30px; margin-top: 4px; }

/* Cube + cloud */
.why-redesigned__cube {
  margin: 24px auto 0;
  max-width: 320px;
}
.why-redesigned__cube svg { width: 100%; height: auto; }

/* 4-item trust strip at bottom of visual panel */
.why-redesigned__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
  padding: 20px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius);
}
.why-redesigned__trust-item { text-align: center; }
.why-redesigned__trust-icon {
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 212, 255, 0.1);
  color: var(--color-accent);
  border-radius: 50%;
  font-size: 1rem;
}
.why-redesigned__trust-item h5 {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.why-redesigned__trust-item p {
  color: var(--color-text-muted-on-dark);
  font-size: 0.6875rem;
  line-height: 1.4;
  margin: 0;
}

/* RTL: deploy badge flips */
[dir="rtl"] .why-redesigned__deploy-badge { left: auto; right: 32px; }
[dir="rtl"] .why-redesigned__metrics { right: auto; left: 16px; }


/* ==========================================================================
   RESPONSIVE — collapse all new sections at common breakpoints
   ========================================================================== */

@media (max-width: 1100px) {
  .partners-gold__logos { grid-template-columns: repeat(4, 1fr); }
  .services-redesigned__trust { grid-template-columns: repeat(3, 1fr); }

  /* Services grid at tablet: 3 columns, all cards span equal */
  .services-redesigned__grid { grid-template-columns: repeat(3, 1fr); }
  .services-redesigned__card:nth-child(-n+5),
  .services-redesigned__card:nth-child(n+6) { grid-column: span 1; }
}

@media (max-width: 960px) {
  .about-new__split,
  .partners-gold__top,
  .why-redesigned__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

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

  .why-redesigned__metrics {
    position: relative;
    top: auto; right: auto;
    width: auto;
    margin: 16px 0 0;
  }
  .why-redesigned__trust { grid-template-columns: repeat(2, 1fr); }

  /* Services grid: 2 columns at narrow tablet */
  .services-redesigned__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .about-new__features,
  .about-new__stats { grid-template-columns: 1fr; }

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

  .services-redesigned__trust { grid-template-columns: 1fr; }

  /* Services grid: single column on phones */
  .services-redesigned__grid { grid-template-columns: 1fr; }

  .why-redesigned__item {
    grid-template-columns: 44px 1fr;
  }
  .why-redesigned__item-icon { display: none; }
  .why-redesigned__trust { grid-template-columns: 1fr; }

  .about-new__overlay--1,
  .about-new__overlay--2,
  .about-new__overlay--3 { display: none; }
  .about-new__visual { min-height: 400px; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   ABOUT US — v10 redesign (May 2026)
   Sections: .about-hero, .about-stats, .about-vm, .about-chairman, .about-reach
   ========================================================================== */

/* ============= 1. ABOUT HERO =============
   Two-column hero CONSTRAINED to the standard .container width (1280px).
   Straight vertical split — no diagonal cut. Left has copy, right has the
   skyline image. */
.about-hero {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  padding: 48px 0 100px; /* top breathing room + bottom room for stats overlap */
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  position: relative;
  background: #f7f9fc;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* LEFT: copy panel */
.about-hero__copy {
  padding: 56px 48px;
  display: flex; flex-direction: column;
  justify-content: center;
  background: #f7f9fc;
}

.about-hero__title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 16px 0 4px;
}
.about-hero__title-line { color: var(--color-text); display: block; }
.about-hero__title-accent { color: var(--color-primary); display: block; }
.about-hero__underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 16px 0 28px;
}

.about-hero__lead {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}

.about-hero__ctas {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.about-hero__cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9375rem;
}
.about-hero__cta-secondary:hover { color: var(--color-primary); }
.about-hero__play {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.1);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 0.75rem;
}

/* RIGHT: skyline photo panel */
.about-hero__visual {
  position: relative;
  background: #020817;
  overflow: hidden;
}
.about-hero__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ============= 2. STATS BAR ============= */
.about-stats {
  position: relative;
  margin-top: -60px; /* overlap hero */
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.08);
  padding: 32px 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  z-index: 5;
}
.about-stats__item {
  text-align: center;
  padding: 0 12px;
}
.about-stats__item + .about-stats__item {
  border-left: 1px solid var(--color-border);
}
[dir="rtl"] .about-stats__item + .about-stats__item {
  border-left: none;
  border-right: 1px solid var(--color-border);
}
.about-stats__icon {
  width: 44px; height: 44px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-size: 1.5rem;
}
.about-stats__value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.about-stats__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 6px;
}
.about-stats__desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 6px;
}

/* ============= 3. VISION / MISSION ============= */
.about-vm {
  background: var(--color-bg);
}
.about-vm__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
}
.about-vm__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.about-vm__eyebrow-line {
  display: inline-block; width: 24px; height: 1px;
  background: var(--color-primary); opacity: 0.4;
}
.about-vm__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--color-text);
}
.about-vm__title-accent { color: var(--color-primary); }
.about-vm__subtitle {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}

.about-vm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.about-vm__card {
  position: relative;
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #ffffff 100%);
  border: 1px solid rgba(0, 102, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 36px;
  overflow: hidden;
  min-height: 540px;
}
.about-vm__icon-wrap {
  margin-bottom: 28px;
}
.about-vm__icon {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(0, 102, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  font-size: 1.75rem;
}
.about-vm__body { position: relative; z-index: 2; }
.about-vm__heading {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 4px;
}
.about-vm__heading-rule {
  width: 50px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 8px 0 20px;
}
.about-vm__body p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 14px;
}
.about-vm__intro {
  color: var(--color-text) !important;
  font-weight: 600;
}

.about-vm__items {
  display: flex; flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.about-vm__item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 102, 255, 0.08);
}
.about-vm__item:last-child { border-bottom: none; }
.about-vm__item-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 8px;
  font-size: 0.9375rem;
}
.about-vm__item p {
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.55;
}

/* Decorative images in each card */
.about-vm__tower {
  position: absolute;
  bottom: 0; left: 0;
  width: 180px; height: auto;
  max-height: 70%;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  /* Fade the top of the image so it merges with the card */
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
          mask-image: linear-gradient(to top, black 60%, transparent 100%);
}
.about-vm__target {
  position: absolute;
  top: 16px; right: 16px;
  width: 180px; height: 180px;
  pointer-events: none;
}
[dir="rtl"] .about-vm__tower { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .about-vm__target { right: auto; left: 16px; transform: scaleX(-1); }

/* ============= 4. CHAIRMAN'S MESSAGE ============= */
.about-chairman { background: var(--color-bg-alt); }

.about-chairman__card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  box-shadow: 0 14px 40px rgba(10, 22, 40, 0.06);
  border: 1px solid var(--color-border);
}

.about-chairman__left {
  padding: 56px 60px;
  position: relative;
  z-index: 2;
}
.about-chairman__title {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 0;
}
.about-chairman__title-accent { color: var(--color-primary); }
.about-chairman__underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 12px 0 28px;
}
.about-chairman__body p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: 14px;
}

.about-chairman__sig {
  display: flex; align-items: center; gap: 16px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--color-border);
}
.about-chairman__sig-avatar {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.about-chairman__sig-handwriting {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.about-chairman__sig-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.about-chairman__sig-role {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
}
.about-chairman__sig-company {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* RIGHT side — chairman portrait + cityscape backdrop, single image now */
.about-chairman__right {
  position: relative;
  /* Brand navy gradient — matches CTA banners and hero (--color-bg-dark + #0f2447) */
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, #0f2447 100%);
  overflow: hidden;
  /* Straight vertical partition (was diagonal). */
}
[dir="rtl"] .about-chairman__right {
  /* RTL gets a left-anchored gradient so the lighter side mirrors visually */
  background: linear-gradient(225deg, var(--color-bg-dark) 0%, #0f2447 100%);
}
/* Composed graphic panel (replaces the chairman photo).
   Built from CSS + an inline SVG skyline — no image asset required. */
.about-chairman__panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  padding: 56px 48px 0 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #e6ecf5;
  isolation: isolate;
}
[dir="rtl"] .about-chairman__panel {
  padding: 56px 56px 0 48px;
}

/* Soft radial primary-color glow anchored top-right */
.about-chairman__panel-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(0, 102, 255, 0.32), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(0, 102, 255, 0.10), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Subtle dot-grid pattern overlay */
.about-chairman__panel-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 70%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* Large decorative quote glyph, top-left */
.about-chairman__panel-quote {
  position: absolute;
  top: 36px;
  left: 56px;
  font-size: 96px;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.22;
  z-index: 1;
  pointer-events: none;
}
[dir="rtl"] .about-chairman__panel-quote {
  left: auto;
  right: 56px;
  transform: scaleX(-1);
}

/* Identity block — centerpiece typography */
.about-chairman__panel-identity {
  position: relative;
  z-index: 2;
  max-width: 360px;
}
.about-chairman__panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(230, 236, 245, 0.7);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 28px;
}
.about-chairman__panel-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 102, 255, 0.7);
}
.about-chairman__panel-name {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 16px;
}
.about-chairman__panel-rule {
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin-bottom: 16px;
}
.about-chairman__panel-role {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.about-chairman__panel-company {
  font-size: 0.9375rem;
  color: rgba(230, 236, 245, 0.65);
  letter-spacing: 0.3px;
}

/* Skyline silhouette anchored to the bottom edge */
.about-chairman__panel-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  color: var(--color-primary);
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
}

/* Value pills banner */
.about-chairman__values {
  margin-top: -40px;
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, #061a3a, #0a1f4a);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  box-shadow: 0 14px 40px rgba(10, 22, 40, 0.15);
}
.about-chairman__value {
  display: flex; align-items: flex-start; gap: 14px;
}
.about-chairman__value-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: #00d4ff;
  border-radius: 50%;
  font-size: 1rem;
  flex-shrink: 0;
}
.about-chairman__value h5 {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.about-chairman__value p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
}

/* ============= 5. NATIONWIDE REACH ============= */
.about-reach { background: var(--color-bg); }

.about-reach__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.about-reach__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 0;
}
.about-reach__title-accent { color: var(--color-primary); display: block; }
.about-reach__underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 12px 0 24px;
}

.about-reach__lead {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.about-reach__body {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 28px;
}
.about-reach__city-link {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px dashed rgba(0, 102, 255, 0.4);
}

.about-reach__accent {
  background: linear-gradient(135deg, #061a3a, #0a1f4a);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
}
.about-reach__accent-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 1.5rem;
}
.about-reach__accent-title {
  color: #4d9cff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}
.about-reach__accent-subtitle {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 4px 0;
}
.about-reach__accent-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.about-reach__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.about-reach__feature-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 1.125rem;
  margin-bottom: 12px;
}
.about-reach__feature h5 {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}
.about-reach__feature p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* RIGHT: dark map card */
/* Map card — now a single composite image (KSA map + info box + bottom feature
   strip all baked in from the design doc), with the dark frame as a fallback
   while the image loads. */
.about-reach__map-card {
  position: relative;
  background: linear-gradient(135deg, #020817, #061a3a);
  border-radius: var(--radius-xl);
  overflow: hidden;
  line-height: 0; /* kills inline-block whitespace under the img */
}
.about-reach__map-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============= ABOUT US RESPONSIVE ============= */
@media (max-width: 1100px) {
  .about-stats {
    grid-template-columns: repeat(5, 1fr);
    padding: 24px 16px;
    gap: 12px;
  }
  .about-stats__value { font-size: 1.5rem; }
  .about-reach__features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .about-hero__inner { grid-template-columns: 1fr; }
  .about-hero__copy { padding: 40px 32px; }
  .about-hero__visual { min-height: 400px; }

  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stats__item + .about-stats__item { border-left: none; }
  [dir="rtl"] .about-stats__item + .about-stats__item { border-right: none; }

  .about-vm__grid { grid-template-columns: 1fr; }
  .about-chairman__card { grid-template-columns: 1fr; }
  .about-chairman__right {
    min-height: 400px;
  }
  .about-chairman__panel { padding: 48px 40px 0; min-height: 400px; }
  [dir="rtl"] .about-chairman__panel { padding: 48px 40px 0; }
  .about-chairman__panel-quote { left: 40px; }
  [dir="rtl"] .about-chairman__panel-quote { left: auto; right: 40px; }
  .about-chairman__values { grid-template-columns: repeat(2, 1fr); }

  .about-reach__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .about-stats { grid-template-columns: 1fr; }
  .about-chairman__left { padding: 32px 24px; }
  .about-chairman__panel { padding: 40px 24px 0; min-height: 360px; }
  .about-chairman__panel-quote { left: 24px; font-size: 72px; top: 24px; }
  [dir="rtl"] .about-chairman__panel-quote { left: auto; right: 24px; }
  .about-chairman__values { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .about-reach__features { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT US — v20 redesign (May 2026)
   Faithful to the client reference image:
   - Riyadh skyline is a decorative photo absolutely positioned at top-right
     of the page section (NO card wrapper, NO border). It bleeds across the
     section width but is clipped by the section's overflow:hidden, so it
     never pushes the page wider than the viewport.
   - Hero copy (breadcrumb + title + tagline) sits on the white area at the
     top-left, OVER the section (skyline fades to transparent on its left
     edge so the copy stays readable).
   - 3-col main grid: info | value card | form (form spans both rows).
     Location card slots under cols 1-2.
   - All STRUCTURAL content (cards, grid, trust strip) lives inside
     .container (max 1280px) — consistent width across the site.
   ========================================================================== */

.contact-page {
  position: relative;
  background: var(--color-bg);
  padding: 40px 0 72px;
}
/* The container becomes the positioning context for the skyline so the
   skyline's right edge lines up with the container's right edge (1280px max),
   matching every other section on the site. overflow:hidden clips any image
   bleed beyond the container's left edge during the fade. */
.contact-page__container {
  position: relative;
  overflow: hidden;
}

/* ============= 1. DECORATIVE SKYLINE STRIP ============= */
.contact-page__skyline {
  position: absolute;
  top: 0; right: 0;
  width: 62%;
  max-width: 780px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  /* Soft fade so the skyline blends into the white page from its left edge
     and trails off at the bottom. Uses CSS mask — supported everywhere. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 28%, black 100%),
    linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, black 28%, black 100%),
    linear-gradient(to bottom, black 60%, transparent 100%);
          mask-composite: intersect;
}
.contact-page__skyline img {
  width: 100%;
  height: auto;
  display: block;
}
[dir="rtl"] .contact-page__skyline {
  right: auto; left: 0;
  transform: scaleX(-1);
}

/* ============= 2. HERO COPY (top-left, sits over white background) ============= */
.contact-hero {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 8px 0 56px;
}
.contact-hero__crumbs {
  display: flex; align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  margin-bottom: 28px;
}
.contact-hero__crumbs a {
  color: var(--color-text);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.contact-hero__crumbs a:hover { color: var(--color-primary); }
.contact-hero__crumb-sep { color: var(--color-text-muted); }
.contact-hero__crumb-current {
  color: var(--color-primary);
  font-weight: 600;
}
.contact-hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--color-text);
}
.contact-hero__title-accent { color: var(--color-primary); }
.contact-hero__underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 16px 0 20px;
}
.contact-hero__tagline {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  max-width: 440px;
}

/* ============= 3. MAIN 3-COLUMN GRID =============
   Row 1: contact-info  | contact-value | contact-form-card (spans rows 1-2)
   Row 2: contact-location (spans cols 1-2)
*/
.contact-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.1fr;
  grid-template-rows: auto auto;
  gap: 28px;
  align-items: start;
  margin-bottom: 32px;
}
.contact-info       { grid-column: 1; grid-row: 1; }
.contact-value      { grid-column: 2; grid-row: 1; }
.contact-form-card  { grid-column: 3; grid-row: 1 / span 2; }
.contact-location   { grid-column: 1 / span 2; grid-row: 2; }

/* ===== Col 1: contact info ===== */
.contact-info {
  display: flex; flex-direction: column;
  gap: 22px;
  padding-top: 8px;
}
.contact-info__row {
  display: flex; align-items: flex-start;
  gap: 14px;
}
.contact-info__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 1rem;
}
.contact-info__body { flex: 1; padding-top: 2px; min-width: 0; }
.contact-info__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.contact-info__value {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  word-break: break-word;
}

/* ===== Col 2: "We Value Your Connection" card ===== */
.contact-value {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 10px 26px rgba(10, 22, 40, 0.05);
  position: relative;
  overflow: hidden;
}
.contact-value__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
}
.contact-value__title {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text);
}
.contact-value__title-accent { color: var(--color-primary); display: block; }

/* Decorative mail+phone graphic (top-right of card) — matches reference */
.contact-value__graphic {
  position: relative;
  width: 96px; height: 76px;
  flex-shrink: 0;
}
.contact-value__graphic::before {
  content: '';
  position: absolute;
  top: -8px; right: -8px;
  width: 110px; height: 88px;
  background-image: radial-gradient(circle, rgba(0, 102, 255, 0.18) 1px, transparent 1.5px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}
.contact-value__graphic-mail,
.contact-value__graphic-phone {
  position: absolute;
  color: var(--color-primary);
  filter: drop-shadow(0 6px 12px rgba(0, 102, 255, 0.3));
}
.contact-value__graphic-mail {
  font-size: 2rem;
  top: 4px; left: 0;
  transform: rotate(-8deg);
  opacity: 0.7;
}
.contact-value__graphic-phone {
  font-size: 2.5rem;
  bottom: 0; right: 4px;
  transform: rotate(15deg);
}
.contact-value__rule {
  width: 50px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin-bottom: 16px;
}
.contact-value__desc {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 22px;
}
.contact-value__features {
  display: flex; flex-direction: column;
  gap: 14px;
}
.contact-value__feature {
  display: flex; align-items: flex-start;
  gap: 12px;
}
.contact-value__feature-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 8px;
  font-size: 0.875rem;
}
.contact-value__feature h5 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--color-text);
}
.contact-value__feature p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ===== Col 3: form card ===== */
.contact-form-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.06);
}
.contact-form-card__title {
  font-size: 1.625rem;
  font-weight: 800;
  margin: 0;
  color: var(--color-text);
}
.contact-form-card__rule {
  width: 50px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 12px 0 24px;
}
.contact-form-card__success {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form__field { margin-bottom: 14px; }
.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(90, 107, 128, 0.7);
}
.contact-form__field textarea { resize: vertical; min-height: 130px; }
.contact-form__error {
  display: block;
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 4px;
}
.contact-form__privacy {
  display: flex; align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  cursor: pointer;
}
.contact-form__privacy a { color: var(--color-primary); }
.contact-form__privacy a:hover { text-decoration: underline; }
.contact-form__submit {
  width: 100%;
  justify-content: center;
}

/* ===== Row 2 (cols 1-2): location card ===== */
.contact-location {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: stretch;
  box-shadow: 0 8px 22px rgba(10, 22, 40, 0.04);
}
.contact-location__copy {
  padding: 12px 8px 12px 12px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.contact-location__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-location__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--color-text);
}
.contact-location__title-accent { color: var(--color-primary); display: block; }
.contact-location__desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
}
.contact-location__btn {
  display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
  align-self: flex-start;
  padding: 10px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(0, 102, 255, 0.04);
  transition: all 0.2s;
}
.contact-location__btn:hover {
  background: var(--color-primary);
  color: #ffffff;
}
.contact-location__map {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 220px;
  background: #f0f4f8;
}
.contact-location__map iframe { display: block; width: 100%; height: 100%; }

/* ============= 4. BOTTOM TRUST STRIP ============= */
.contact-trust {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  box-shadow: 0 8px 20px rgba(10, 22, 40, 0.04);
}
.contact-trust__item {
  display: flex; align-items: center; gap: 14px;
}
.contact-trust__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 1.125rem;
}
.contact-trust__item h5 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}
.contact-trust__item p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ============= CONTACT RESPONSIVE ============= */
@media (max-width: 1100px) {
  .contact-page__skyline { width: 70%; opacity: 0.8; }
  .contact-main {
    grid-template-columns: 1fr 1fr;
  }
  .contact-info       { grid-column: 1; grid-row: 1; }
  .contact-value      { grid-column: 2; grid-row: 1; }
  .contact-form-card  { grid-column: 1 / -1; grid-row: 2; }
  .contact-location   { grid-column: 1 / -1; grid-row: 3; }
  .contact-trust { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .contact-page { padding: 24px 0 48px; }
  .contact-page__skyline { width: 100%; opacity: 0.25; }
  .contact-hero { padding: 8px 0 32px; }
  .contact-main { grid-template-columns: 1fr; }
  .contact-info       { grid-column: 1; grid-row: auto; }
  .contact-value      { grid-column: 1; grid-row: auto; }
  .contact-form-card  { grid-column: 1; grid-row: auto; padding: 24px; }
  .contact-location   { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .contact-location__copy { padding: 8px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-trust { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
}

/* ==========================================================================
   SERVICES LISTINGS — v2 redesign (May 2026)
   Matches client reference (image7):
   - Compact hero with title + tagline, decorative wave on top-right
   - 3-col grid of horizontal cards (image left, content right)
   - Bottom "Custom Solution" strip with CTA + 3 trust items
   All structural content lives inside .container (max 1280px).
   ========================================================================== */

.services-page {
  position: relative;
  background: var(--color-bg);
  padding: 40px 0 72px;
}
.services-page__container {
  position: relative;
  overflow: hidden;
}

/* Decorative illustration in top-right (behind the hero copy).
   Mirrors the certifications-page illustration: clipped to the container,
   left + bottom faded so it blends into the white hero copy area. */
.services-page__illustration {
  position: absolute;
  top: 0; right: 24px;
  width: 36%;
  max-width: 460px;
  max-height: 280px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.services-page__illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 18%, black 100%),
    linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, black 18%, black 100%),
    linear-gradient(to bottom, black 70%, transparent 100%);
          mask-composite: intersect;
}
[dir="rtl"] .services-page__illustration {
  right: auto; left: 24px;
  transform: scaleX(-1);
}

/* ============= 1. HERO ============= */
.services-hero {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 24px 0 48px;
}
.services-hero__title {
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--color-text);
}
.services-hero__underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 16px 0 20px;
}
.services-hero__tagline {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 540px;
}

/* ============= 2. SERVICES GRID ============= */
.services-grid-v2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* ===== Service card (horizontal: image left, content right) ===== */
.service-card-v2 {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  /* Photo column ~41%, body ~59% — matches the proportion in the Word doc reference. */
  grid-template-columns: 0.7fr 1fr;
  align-items: stretch;
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.04);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  min-height: 240px;
}
.service-card-v2:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 102, 255, 0.25);
  box-shadow: 0 14px 32px rgba(10, 22, 40, 0.08);
}
.service-card-v2__image {
  position: relative;
  overflow: hidden;
  /* Soft light background matches the reference, so the subject sits on a
     subtle gradient rather than a hard tile of color. */
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
}
.service-card-v2__image img {
  width: 100%;
  height: 100%;
  display: block;
  /* contain (not cover) keeps the photo at its natural proportions so the
     subject is shown at the same comfortable zoom as the Word doc — no
     stretching, no cropping. */
  object-fit: contain;
  object-position: center;
  padding: 8px;
  box-sizing: border-box;
  transition: transform 0.4s;
}
.service-card-v2:hover .service-card-v2__image img {
  transform: scale(1.04);
}
.service-card-v2__body {
  padding: 20px 22px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.service-card-v2__header {
  display: flex; align-items: flex-start;
  gap: 12px;
}
.service-card-v2__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 0.9375rem;
}
.service-card-v2__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}
.service-card-v2__rule {
  width: 36px; height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  margin: 0 0 0 52px; /* aligns under title (icon width + gap) */
}
.service-card-v2__desc {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
  /* Clamp to 5 lines so cards stay even */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============= 3. CUSTOM SOLUTION STRIP ============= */
.custom-solution {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1.05fr auto 1.2fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 8px 22px rgba(10, 22, 40, 0.04);
}

.custom-solution__main {
  display: flex; align-items: center;
  gap: 18px;
}
.custom-solution__icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 1.25rem;
}
.custom-solution__copy { flex: 1; min-width: 0; }
.custom-solution__copy h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 3px;
  color: var(--color-text);
}
.custom-solution__copy p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}
.custom-solution__cta {
  flex-shrink: 0;
  font-size: 0.875rem;
  padding: 10px 18px;
  white-space: nowrap;
}

.custom-solution__divider {
  width: 1px;
  height: 56px;
  background: var(--color-border);
}

.custom-solution__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.custom-solution__trust-item {
  display: flex; align-items: center;
  gap: 10px;
}
.custom-solution__trust-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 0.875rem;
}
.custom-solution__trust-item h5 {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0 0 1px;
  color: var(--color-text);
}
.custom-solution__trust-item p {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin: 0;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1100px) {
  .services-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .custom-solution {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .custom-solution__divider { display: none; }
  .custom-solution__main { flex-wrap: wrap; gap: 14px; }
  .custom-solution__cta { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  .services-page__illustration { width: 46%; max-height: 190px; opacity: 0.6; }
  .services-grid-v2 { grid-template-columns: 1fr; }
  .service-card-v2 {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .service-card-v2__image { min-height: 180px; }
  .custom-solution { padding: 20px; }
  .custom-solution__trust { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   CERTIFICATIONS PAGE — v2 redesign (May 2026)
   Theme-consistent with services + contact pages.
   - Compact hero with title + tagline + wave decoration on top-right
   - Grid of cert cards (vertical: thumbnail on top, body below)
   - Re-uses .custom-solution strip from services page
   ========================================================================== */

.certifications-page {
  position: relative;
  background: var(--color-bg);
  padding: 40px 0 72px;
}
.certifications-page__container {
  position: relative;
  overflow: hidden;
}

/* Decorative certificate illustration (top-right corner)
   - Aligned with the cards' right edge (24px from container outer edge,
     matching .certifications-page__container's inner padding).
   - Height capped so it can never crowd the cards row below the hero. */
.certifications-page__illustration {
  position: absolute;
  top: 0;
  right: 24px;
  width: 36%;
  max-width: 460px;
  max-height: 280px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.certifications-page__illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right top;
  /* Soft left + bottom fade so the illustration blends naturally into the
     white page where the hero copy sits, with no hard edge below. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 18%, black 100%),
    linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, black 18%, black 100%),
    linear-gradient(to bottom, black 70%, transparent 100%);
          mask-composite: intersect;
}
[dir="rtl"] .certifications-page__illustration {
  right: auto; left: 24px;
  transform: scaleX(-1);
}

/* ============= 1. HERO ============= */
.certifications-hero {
  position: relative;
  z-index: 1;
  max-width: 660px;
  /* Reserve enough vertical room so the illustration above (max-height: 280px,
     anchored to top:0) sits entirely above the cards grid below. */
  min-height: 240px;
  padding: 24px 0 48px;
}
.certifications-hero__title {
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--color-text);
}
.certifications-hero__underline {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 16px 0 20px;
}
.certifications-hero__tagline {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 580px;
}

/* ============= 2. CERTIFICATIONS GRID ============= */
.certifications-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* ===== Cert card (vertical: thumbnail top, body below) ===== */
.cert-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.04);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  color: inherit;
  text-decoration: none;
}
.cert-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 102, 255, 0.25);
  box-shadow: 0 14px 32px rgba(10, 22, 40, 0.08);
}
.cert-card--clickable { cursor: pointer; }
.cert-card--clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cert-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.cert-card__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  /* contain keeps the certificate readable without cropping vital edges */
  object-fit: contain;
  object-position: center;
  padding: 12px;
  box-sizing: border-box;
  transition: transform 0.35s;
}
.cert-card:hover .cert-card__thumb img {
  transform: scale(1.03);
}
.cert-card__thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 3rem;
  opacity: 0.3;
}
/* Hover overlay with "View Certificate" pill — gives a strong visual cue
   that clicking the card opens the PDF. */
.cert-card__thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 255, 0.0);
  opacity: 0;
  transition: opacity 0.25s, background 0.25s;
  pointer-events: none;
}
.cert-card:hover .cert-card__thumb-overlay {
  opacity: 1;
  background: rgba(0, 102, 255, 0.12);
}
.cert-card__thumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.4);
  transform: translateY(8px);
  transition: transform 0.25s;
}
.cert-card:hover .cert-card__thumb-pill {
  transform: translateY(0);
}

.cert-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cert-card__title {
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--color-text);
}
.cert-card__issuer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 8px;
}
.cert-card__issuer i { font-size: 0.625rem; }
.cert-card__rule {
  width: 36px; height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  margin: 4px 0 10px;
}
.cert-card__desc {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
  /* Clamp to 3 lines so cards stay aligned */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Static "View Certificate" label now lives inside the linked card,
   not a separate <a>. Whole card is the click target. */
.cert-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: auto;
  transition: gap 0.2s;
}
.cert-card:hover .cert-card__link { gap: 10px; }
.cert-card__link i { font-size: 0.875rem; }
.cert-card__link-arrow {
  font-size: 0.6875rem !important;
  margin-left: 2px;
  opacity: 0.7;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1024px) {
  .certifications-grid { grid-template-columns: repeat(2, 1fr); }
  .certifications-page__illustration { width: 40%; max-height: 220px; }
}
@media (max-width: 640px) {
  .certifications-page__illustration { width: 55%; max-height: 180px; opacity: 0.45; }
  .certifications-hero { min-height: 180px; }
  .certifications-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Clients & Partners page  (modern, professional layout)
   ============================================================ */

/* ---- Section block ---- */
.cp-block { margin-top: 8px; }
.cp-block__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.cp-block__icon {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(43,108,255,0.12), rgba(43,108,255,0.04));
  color: var(--color-primary);
  font-size: 1.25rem;
  border: 1px solid rgba(43,108,255,0.18);
}
.cp-block__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cp-block__intro {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 720px;
}

/* ---- Clients wall (single curated panel) ---- */
.cp-clients-wall {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -18px rgba(10, 23, 51, 0.22);
  padding: clamp(20px, 4vw, 44px);
}
.cp-clients-wall img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ---- Partner logo grid (elevated tiles) ---- */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cp-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 28px;
  box-shadow: 0 6px 20px -14px rgba(10, 23, 51, 0.25);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.cp-tile a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cp-tile img {
  max-width: 100%;
  max-height: 64px;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform 0.28s ease;
}
.cp-tile span { color: var(--color-text-muted); font-weight: 700; text-align: center; }
.cp-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(43, 108, 255, 0.45);
  box-shadow: 0 18px 36px -18px rgba(43, 108, 255, 0.45);
}
.cp-tile:hover img { transform: scale(1.06); }

@media (max-width: 980px) { .cp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) {
  .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cp-tile { min-height: 108px; padding: 18px; border-radius: 14px; }
  .cp-block__head { gap: 12px; }
  .cp-block__icon { width: 44px; height: 44px; }
  .cp-block__title { font-size: 1.25rem; }
}

/* Tighten the gap between the partners hero band and the first content section */
.cp-hero-band { padding-bottom: 16px; }
.section.cp-top { padding-top: 28px; }

/* Breathing room between the CTA strip heading and its button */
.cta-strip__inner h2 { margin-bottom: 22px; }

/* ==========================================================================
   FULL MOBILE RESPONSIVE OVERHAUL  —  June 2026
   --------------------------------------------------------------------------
   Everything below lives inside @media (max-width: ...) queries, so desktop
   rendering above 1024px is byte-identical to before. We cover three tiers:
     - 1024px : large-tablet refinements
     -  880px : mobile menu kicks in (covers tablets in portrait + all phones)
     -  768px : main mobile pass (hero, sections, cards, forms, footer, FAB)
     -  480px : small phones — extra trimming
   ========================================================================== */


/* ----- Header gap tightens before the menu collapses ----- */
@media (max-width: 1024px) {
  .site-header__inner { gap: 16px; }
}

/* ============================================================
   MOBILE NAV — the critical fix
   .is-open is toggled by app.js; this block makes it actually visible.
   Activates at <=880px so portrait tablets also get the friendlier menu.
   ============================================================ */
@media (max-width: 880px) {

  /* Show hamburger, hide desktop inline nav */
  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    background: transparent;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
  }
  .mobile-toggle:hover { background: var(--color-bg-alt); }
  .mobile-toggle i { font-size: 1.25rem; pointer-events: none; }

  /* The slide-down panel itself.
     NOTE: position:fixed anchors to the viewport. This works correctly
     ONLY because we remove backdrop-filter from .site-header below at
     this same breakpoint — backdrop-filter creates a containing block
     for position:fixed descendants which would trap the nav inside the
     header. We tried position:absolute first but it had paint-position
     issues across browsers when the sticky header was stuck. */
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 16px 20px 28px;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 24px 50px rgba(10, 22, 40, 0.10);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
    z-index: 99;
    display: flex; /* still flex but column */
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-nav a {
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.is-active,
  .site-nav a:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    border-bottom-color: transparent;
  }

  /* Hamburger ↔ X icon swap (toggled by .is-active on the button) */
  .mobile-toggle .icon-close { display: none; }
  .mobile-toggle.is-active .icon-bars { display: none; }
  .mobile-toggle.is-active .icon-close { display: inline-block; }

  /* Background page scroll is intentionally NOT locked when menu opens.
     Setting overflow:hidden on a scrolled body breaks position:sticky on
     descendants (the header) — the sticky element's scrolling ancestor
     calculation falls back, and the header ends up positioned at its
     natural document origin instead of the viewport top. Most modern
     mobile menus (Twitter, GitHub, Reddit) let the page scroll behind
     a fixed overlay menu; that's the pattern we use here. */
  /* (intentionally empty — no body.menu-open scroll-lock rule) */
}

/* Very small phones — hide the Get Quote button so the header doesn't crowd */
@media (max-width: 540px) {
  .site-header__actions .btn { display: none; }
  .lang-switcher { padding: 4px 8px; font-size: 0.75rem; gap: 2px; }
  .lang-switcher a { padding: 3px 7px; }
  .site-header__inner { gap: 10px; }
}


/* ============================================================
   GLOBAL LAYOUT / TYPE / SPACING DOWN-SCALING
   ============================================================ */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .container { padding: 0 18px; }
  .section { padding: 64px 0; }

  h1 { font-size: clamp(2rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.625rem, 5.6vw, 2.125rem); }
  h3 { font-size: clamp(1.25rem, 4.4vw, 1.5rem); }

  .section-header { margin-bottom: 40px; }
  .section-subtitle { font-size: 1rem; margin-bottom: 32px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 52px 0; }

  .btn { padding: 12px 22px; font-size: 0.875rem; }
  .btn-lg { padding: 13px 24px; font-size: 0.9375rem; }
}


/* ============================================================
   HERO BANNER — home page
   ============================================================ */
@media (max-width: 768px) {
  .hero-banner { padding: 56px 0 64px; }
  .hero-banner__inner { min-height: 0; gap: 32px; }
  .hero-banner h1 { margin-bottom: 18px; }
  .hero-banner__description { font-size: 1rem; margin-bottom: 26px; }
  .hero-banner__ctas { margin-bottom: 28px; gap: 12px; }
  .hero-banner__ctas .btn { padding: 12px 20px; font-size: 0.9375rem; }
  .hero-trust { gap: 14px 22px; }
  .hero-trust__item { font-size: 0.8125rem; }
  .hero-visual__main svg { max-width: 380px; }
  /* The big rotating ring sits over the headline on narrow screens */
  .hero-banner__shape--4 { display: none; }
}

@media (max-width: 480px) {
  .hero-banner { padding: 36px 0 52px; }
  .hero-banner__inner { gap: 24px; }
  .hero-visual__main svg { max-width: 280px; }
  .hero-banner__ctas { flex-direction: column; align-items: stretch; }
  .hero-banner__ctas .btn { width: 100%; }
}


/* ============================================================
   PAGE BANNERS (services hero, about hero hat, etc.)
   ============================================================ */
@media (max-width: 768px) {
  .page-banner { padding: 56px 0 48px; }
  .page-banner h1 { font-size: clamp(1.875rem, 6.5vw, 2.5rem); }
  .page-banner p { font-size: 1rem; }
}


/* ============================================================
   STATS / CTA BANNERS / FAQ / TESTIMONIALS / FOOTER
   ============================================================ */
@media (max-width: 768px) {

  .stats-banner { padding: 36px 22px; border-radius: var(--radius-xl); }
  .stats-banner__inner { gap: 24px; }
  .stat__value { font-size: clamp(2rem, 7vw, 2.5rem); }

  .cta-banner { padding: 40px 22px; border-radius: var(--radius-xl); }
  .cta-banner h2 { font-size: clamp(1.5rem, 5vw, 1.875rem); margin-bottom: 10px; }
  .cta-banner__inner { gap: 22px; }
  /* Force the trailing CTA group full-width so the button doesn't squeeze */
  .cta-banner__inner > * { width: 100%; }

  /* Testimonial cards — tighter on mobile */
  .testimonial { padding: 28px 22px; }
  .testimonial__quote {
    width: 40px; height: 40px;
    font-size: 1.125rem;
    top: 18px; right: 18px;
  }
  [dir="rtl"] .testimonial__quote { right: auto; left: 18px; }
  .testimonial__content { font-size: 0.9375rem; }

  /* FAQ */
  .faq-item summary { padding: 16px 18px; font-size: 0.9375rem; }
  .faq-item__body { padding: 0 18px 18px; font-size: 0.875rem; }

  /* Footer */
  .site-footer { padding: 56px 0 24px; }
  .site-footer__grid { gap: 28px; padding-bottom: 36px; margin-bottom: 24px; }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 14px;
  }
  [dir="rtl"] .site-footer__bottom { align-items: flex-end; }
}


/* ============================================================
   FEATURE / PROCESS / SPLIT-BLOCK
   ============================================================ */
@media (max-width: 768px) {
  .feature-grid { gap: 24px; }
  .feature-item { padding-left: 60px; }
  [dir="rtl"] .feature-item { padding-left: 0; padding-right: 60px; }
  .feature-item__num { width: 48px; height: 48px; font-size: 1.0625rem; }

  .process-step__num { width: 52px; height: 52px; font-size: 1.0625rem; margin-bottom: 16px; }

  /* split-block visual badges have negative offsets that overflow horizontally */
  .visual-badge--tl { top: 12px; left: 12px; }
  .visual-badge--br { bottom: 12px; right: 12px; }
  [dir="rtl"] .visual-badge--tl { left: auto; right: 12px; }
  [dir="rtl"] .visual-badge--br { right: auto; left: 12px; }
  .visual-badge { padding: 10px 14px; }
}


/* ============================================================
   FORMS — contact + anywhere using .form-field
   16px font on inputs prevents iOS Safari auto-zoom on focus.
   ============================================================ */
@media (max-width: 768px) {
  .contact-form-card { padding: 24px; }
  .contact-info-card { padding: 22px; }
  .form-field { margin-bottom: 16px; }
  .form-field input,
  .form-field textarea,
  .form-field select,
  .contact-form__field input,
  .contact-form__field textarea,
  .contact-form__field select {
    padding: 13px 14px;
    font-size: 16px;   /* iOS won't zoom-on-focus at >=16px */
  }
}


/* ============================================================
   CODE WINDOW (software page hero, why-redesigned)
   Wrap horizontally on narrow screens and pad less.
   ============================================================ */
.code-window pre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  .code-window { max-width: 100%; font-size: 0.75rem; }
  .code-window pre { padding: 14px; line-height: 1.65; font-size: 0.7rem; }
  .code-window__bar { padding: 10px 12px; }
}


/* ============================================================
   WHATSAPP FAB — slightly smaller on mobile, safer placement
   ============================================================ */
@media (max-width: 768px) {
  .whatsapp-fab {
    width: 52px; height: 52px;
    bottom: 18px; right: 18px;
  }
  [dir="rtl"] .whatsapp-fab { right: auto; left: 18px; }
  .whatsapp-fab i { font-size: 24px !important; }
}


/* ============================================================
   ABOUT PAGE — extra polish on top of existing rules
   ============================================================ */
@media (max-width: 768px) {
  .about-hero { padding: 24px 0 56px; }
  .about-hero__copy { padding: 32px 22px; }
  .about-hero__lead { font-size: 0.9375rem; margin-bottom: 24px; }

  .about-vm__card { padding: 28px 22px; min-height: 0; }
  .about-vm__heading { font-size: 1.5rem; }
  .about-vm__icon { width: 60px; height: 60px; font-size: 1.5rem; }
  .about-vm__tower, .about-vm__target { width: 130px; }
  .about-vm__target { width: 130px; height: 130px; }

  .about-chairman__left { padding: 32px 22px; }
  .about-chairman__title { font-size: clamp(1.625rem, 5.5vw, 2rem); }
  .about-chairman__sig-handwriting { font-size: 1.25rem; }
  .about-chairman__values {
    margin-top: 0;
    padding: 22px 20px;
    gap: 16px;
  }
  .about-chairman__value h5 { font-size: 0.875rem; }
  .about-chairman__value p { font-size: 0.75rem; }
}


/* ============================================================
   CONTACT PAGE — extra polish on top of existing rules
   ============================================================ */
@media (max-width: 768px) {
  .contact-hero__title { font-size: clamp(2rem, 7vw, 2.75rem); }
  .contact-hero__tagline { font-size: 0.9375rem; }
  .contact-trust__item {
    padding: 14px;
  }
}


/* ============================================================
   PARTNERS / SERVICES / CERTIFICATIONS PAGE — extra polish
   The page-illustration absolute images can sit awkwardly on small phones.
   ============================================================ */
@media (max-width: 480px) {
  .services-page__illustration,
  .certifications-page__illustration {
    opacity: 0.35;
  }
}


/* ============================================================
   PARTNER LOGO STRIP — make sure cells aren't too tall
   ============================================================ */
@media (max-width: 768px) {
  .partner-cell { height: 96px; padding: 18px 20px; }
  .partner-cell img { max-height: 36px; }
}


/* ============================================================
   SMOOTH HORIZONTAL OVERFLOW GUARD
   A common cause of horizontal scroll on mobile is a single rogue
   element overflowing the viewport (an absolutely-positioned visual,
   a wide pre, etc.). This is a belt-and-suspenders safety net that
   clips the body, never the desktop layout.
   ============================================================ */
@media (max-width: 880px) {
  html, body { overflow-x: clip; }
}


/* ============================================================
   PATCH (June 2026) — partners-gold mobile overflow fix
   --------------------------------------------------------------
   The brand-mark partial renders SVGs with viewBoxes like 110x24
   (Microsoft), 120x24 (HPE), 80x24 (Lenovo). With only a fixed
   height attribute, the browser computes width from aspect ratio
   (Microsoft becomes ~165px wide at size=lg). Two of those plus
   card padding plus grid-wrap padding overflows a 375px phone
   viewport. min-width:0 on the grid tracks lets them shrink
   below their content's natural min-size; max-width:100% on the
   SVGs scales them down to fit.
   ============================================================ */
@media (max-width: 720px) {
  .partners-gold__grid-wrap {
    padding: 22px 14px;
    border-radius: var(--radius-lg);
  }
  .partners-gold__logos { gap: 10px; }
  .partners-gold__logo-card {
    min-width: 0;
    padding: 16px 10px 12px;
    min-height: 96px;
  }
  .partners-gold__logo-mark {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  /* iOS Safari (WebKit) collapses inline SVGs to 0×0 when CSS sets both
     width:auto and height:auto on an SVG whose intrinsic size comes from
     the viewBox. The brand-mark partial now ships explicit width AND
     height attributes on every SVG, and these CSS rules use max-* only
     (no width/height: auto overrides) so the aspect ratio is preserved
     on WebKit. */
  .partners-gold__logo-mark svg {
    display: block;
    max-width: 100%;
    max-height: 32px;
    /* When max-width clamps the SVG, scale height proportionally */
    height: auto;
  }
  .partners-gold__logo-tag { font-size: 0.625rem; }
  .partners-gold__more-text { font-size: 0.6875rem; }
}


/* ============================================================
   PATCH (June 2026) — footer grid now has 3 columns (Services
   column removed from footer.blade.php). 2fr 1fr 1fr keeps the
   About column wider, matching the original visual rhythm.
   ============================================================ */
.site-footer__grid {
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PATCH v3 (June 2026) — three mobile-only fixes
   ============================================================ */

/* ----- 1. Header: drop backdrop-filter at mobile so the slide-down
   nav (position:fixed) can correctly anchor to the viewport.
   backdrop-filter creates a containing block that traps fixed
   descendants. On mobile we substitute a solid-ish background that
   keeps the frosted look without the side effect. ----- */
@media (max-width: 880px) {
  .site-header {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
}

/* ----- 2. why-redesigned section overflow at mobile.
   The deployment code window has a <pre> with long single-line
   text. Without overflow-x:auto, its natural width forces the
   grid track wider than the viewport, which makes every row of
   the (now stacked) single-column grid that wide — that's why
   the left-side text was visibly cut. min-width:0 lets grid
   items shrink below their content's min-content size. ----- */
@media (max-width: 960px) {
  .why-redesigned__grid > * { min-width: 0; }
}
@media (max-width: 768px) {
  .why-redesigned__visual {
    padding: 24px 18px;
    min-width: 0;
    max-width: 100%;
  }
  .why-redesigned__code,
  .why-redesigned__code pre {
    max-width: 100%;
    min-width: 0;
  }
  .why-redesigned__code pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.6875rem;
    padding: 12px;
    line-height: 1.65;
    white-space: pre;
    word-break: normal;
  }
  /* The deploy badge sits at left:32px on desktop; tighten on phones */
  .why-redesigned__deploy-badge { left: 14px; top: -18px; padding: 8px 12px; }
  /* The metrics card overlay was already moved into flow at 960px */
}

/* ----- 3. about-new__visual aspect-ratio + min-height combo
   was forcing a min-width of ~533px on phones. Drop the aspect
   ratio at mobile and let the panel size purely by min-height. ----- */
@media (max-width: 720px) {
  .about-new__visual {
    aspect-ratio: auto;
    min-height: 360px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .about-new__split > * { min-width: 0; }
}

/* ----- General defensive guard: every direct child of common
   grid containers gets min-width:0 at mobile, preventing any
   future "wide intrinsic content blows out the grid" surprises. ----- */
@media (max-width: 768px) {
  .about-new__split > *,
  .partners-gold__top > *,
  .why-redesigned__grid > *,
  .services-redesigned__grid > *,
  .contact-grid > *,
  .form-row > * { min-width: 0; }
}


/* ============================================================
   PATCH v5 — brand text scale-down on mobile
   --------------------------------------------------------------
   Header brand text changed from "Ideal Vision" (12 chars) to
   "Ideal Vision Technology" (23 chars). At desktop 1.375rem font
   this fits comfortably, but on narrow phones it would crowd the
   lang switcher + hamburger. Scale it down progressively.
   ============================================================ */
@media (max-width: 640px) {
  .site-header__logo { font-size: 1.0625rem; gap: 8px; }
  .site-header__logo .logo-img { height: 38px; }
}
@media (max-width: 420px) {
  .site-header__logo { font-size: 0.9rem; }
  .site-header__logo .logo-img { height: 34px; }
  .site-header__logo span { letter-spacing: -0.025em; }
}


/* ============================================================
   PATCH v6 — desktop nav layout, accommodate longer brand name
   --------------------------------------------------------------
   "Ideal Vision Technology" is wider than the old "Ideal Vision",
   which pushed the nav row past its breathing room and caused
   "Clients & Partners" to wrap to two lines on desktop.

   Fix in three small changes (desktop only, mobile untouched):
     1. white-space: nowrap on nav anchors → no text wrap
     2. tighten anchor horizontal padding 16px → 12px
     3. tighten header__inner gap 32px → 24px (≥1025px only)
        (881–1024px already has gap:16px from v1)
   ============================================================ */
@media (min-width: 881px) {
  .site-nav a {
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 1025px) {
  .site-header__inner { gap: 24px; }
  .site-nav { gap: 2px; }
}