/* ==========================================================================
   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;
  background: #020817;
  overflow: hidden;
  /* Diagonal cut on left edge */
  clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
}
[dir="rtl"] .about-chairman__right {
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
}
.about-chairman__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 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 {
    clip-path: none;
    min-height: 400px;
  }
  [dir="rtl"] .about-chairman__right { clip-path: none; }
  .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__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; }