/* ==========================================================================
   ZKR — Homepage identity ("blueprint" concept)
   Scoped entirely under zh-* class names so it never touches the rest of
   the site's design system (app.css / --color-*, --font-ar, --font-en).
   Uses logical properties throughout so it mirrors correctly for both
   dir="rtl" (Arabic) and dir="ltr" (English), same convention as app.css.
   ========================================================================== */

:root {
  --zh-paper: #f5f2ec;
  --zh-ink: 34, 39, 42;
  --zh-blue: 31, 58, 95;
  --zh-mist: 120, 114, 101;

  --zh-font-heading: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --zh-font-body: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --zh-font-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  --zh-radius-sm: 4px;
  --zh-radius-md: 10px;
}

html[dir='ltr'] {
  --zh-font-heading: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --zh-font-body: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
}

.zh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--zh-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--zh-radius-sm);
  border: 1.5px solid transparent;
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.zh-btn--fill { background: rgb(var(--zh-blue)); color: var(--zh-paper); }
.zh-btn--fill:hover { background: rgb(var(--zh-ink)); }
.zh-btn--outline { border-color: rgba(var(--zh-mist), .5); color: rgb(var(--zh-ink)); }
.zh-btn--outline:hover { border-color: rgb(var(--zh-blue)); color: rgb(var(--zh-blue)); }
.zh-btn--outline-light { border-color: rgba(245, 242, 236, .5); color: var(--zh-paper); }
.zh-btn--outline-light:hover { background: rgba(245, 242, 236, .1); }

/* ---------- Sitewide header re-skin ----------
   The header (partials/nav.php) is shared by every page, so it's restyled
   here — via home.css, loaded on every page — rather than only matching
   the homepage hero and clashing everywhere else. Scoped to the header's
   existing class names; no markup changes needed. Deliberately does NOT
   touch --color-brand itself (used by pricing, form focus rings, admin
   sidebar, etc. on pages not covered by this pass). */
.site-header { font-family: var(--zh-font-body); }
.brand__name { font-family: var(--zh-font-heading); }
.brand__mark { background: rgb(var(--zh-blue)); }
.primary-nav > a { font-family: var(--zh-font-body); }
.primary-nav > a:hover { color: rgb(var(--zh-blue)); }
.lang-switch { font-family: var(--zh-font-body); }
.lang-switch:hover { border-color: rgb(var(--zh-blue)); color: rgb(var(--zh-blue)); }
.btn--primary { background: rgb(var(--zh-blue)); font-family: var(--zh-font-body); }
.btn--primary:hover { background: rgb(var(--zh-ink)); }

/* ---------- Index label (technical/CAD-style section marker) ---------- */
.zh-idx { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; }
.zh-idx__num { font-family: var(--zh-font-mono); font-size: .78rem; font-weight: 600; color: rgb(var(--zh-blue)); }
.zh-idx__label { font-family: var(--zh-font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: rgb(var(--zh-mist)); text-transform: uppercase; }

/* ---------- Hero ---------- */
.zh-hero {
  position: relative;
  color: var(--zh-paper);
  overflow: hidden;
  background: rgb(var(--zh-ink));
}
.zh-hero__content { position: relative; z-index: 1; padding-block: 1.3rem 1.4rem; max-width: 34rem; }
.zh-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--zh-font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  color: var(--zh-paper); border: 1px solid rgba(245, 242, 236, .32);
  padding: .28rem .7rem; border-radius: 999px; margin-bottom: .6rem;
}
.zh-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zh-paper); opacity: .8; display: inline-block; }
.zh-hero h1 {
  font-family: var(--zh-font-heading); font-weight: 700; margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.22; color: var(--zh-paper);
}
.zh-lead { margin-top: .5rem; max-width: 44ch; font-size: .86rem; color: rgba(245, 242, 236, .78); }
.zh-hero__ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.zh-hero__strip { border-top: 1px solid rgba(245, 242, 236, .18); position: relative; z-index: 1; }
.zh-hero__strip ul { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; padding-block: .55rem; margin: 0; padding-inline-start: 0; list-style: none; }
.zh-hero__strip li { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: rgba(245, 242, 236, .82); }
.zh-hero__strip li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--zh-paper); opacity: .6; flex: none; }

/* ---------- Section shell ---------- */
.zh-section { padding-block: clamp(3rem, 5.6vw, 4.6rem); }
.zh-section--tint { background: rgba(var(--zh-mist), .07); }
.zh-section-head { margin-bottom: 2rem; max-width: 62ch; }
.zh-section-head h2 {
  font-family: var(--zh-font-heading); font-weight: 700; margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: rgb(var(--zh-ink));
}
.zh-section-head p { color: rgba(var(--zh-ink), .62); margin-top: .6rem; }
.zh-more { margin-top: 1.6rem; }
.zh-empty-note { color: rgba(var(--zh-ink), .55); font-size: .95rem; padding: 1.2rem 0; }

/* ---------- Why grid ---------- */
.zh-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(var(--zh-mist), .35); border: 1px solid rgba(var(--zh-mist), .35);
}
.zh-why-card { background: var(--zh-paper); padding: 1.5rem 1.4rem; }
.zh-why-card h3 { font-family: var(--zh-font-heading); font-size: 1rem; margin: 0 0 .5rem; color: rgb(var(--zh-ink)); }
.zh-why-card p { color: rgba(var(--zh-ink), .62); font-size: .88rem; margin: 0; }

/* ---------- Engineering services ---------- */
.zh-eng-kicker { font-family: var(--zh-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: rgb(var(--zh-blue)); margin-bottom: .5rem; display: block; }
.zh-eng-lede { font-family: var(--zh-font-heading); font-size: 1.15rem; font-weight: 600; color: rgb(var(--zh-ink)); max-width: 44ch; margin: .4rem 0 0; }
.zh-eng-body { max-width: 62ch; color: rgba(var(--zh-ink), .62); margin-top: .9rem; }
.zh-svc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(var(--zh-mist), .35); border: 1px solid rgba(var(--zh-mist), .35); margin-top: 2rem;
}
.zh-svc-card { background: var(--zh-paper); padding: 1.3rem 1.2rem; }
.zh-svc-card h3 { font-family: var(--zh-font-heading); font-size: .94rem; margin: .5rem 0 .4rem; color: rgb(var(--zh-ink)); }
.zh-svc-card p { font-size: .82rem; color: rgba(var(--zh-ink), .6); margin: 0; }
.zh-n { font-family: var(--zh-font-mono); font-size: .72rem; color: rgb(var(--zh-blue)); font-weight: 600; }
.zh-eng-ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* ---------- Buyer journey ---------- */
.zh-journey { display: flex; overflow-x: auto; border-top: 1px solid rgba(var(--zh-mist), .35); border-bottom: 1px solid rgba(var(--zh-mist), .35); }
.zh-journey__step { flex: 1 0 180px; padding: 1.4rem 1.3rem; border-inline-end: 1px solid rgba(var(--zh-mist), .35); }
.zh-journey__step:last-child { border-inline-end: none; }
.zh-journey__step h3 { font-family: var(--zh-font-heading); font-size: .95rem; margin: .5rem 0 .4rem; color: rgb(var(--zh-ink)); }
.zh-journey__step p { font-size: .82rem; color: rgba(var(--zh-ink), .6); margin: 0; }
.zh-journey__cta { display: flex; justify-content: center; padding-top: 1.8rem; }

/* ---------- About preview ---------- */
.zh-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.zh-about-grid h2 { font-family: var(--zh-font-heading); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: rgb(var(--zh-ink)); margin: 0; grid-column: span 2; }
.zh-about-grid > div:last-child { grid-column: 2; }
.zh-about-grid p { margin: 0 0 1rem; color: rgba(var(--zh-ink), .68); }
.zh-about-grid .zh-idx { grid-column: 1 / -1; }

/* ---------- Final CTA ---------- */
.zh-final-cta { background: rgb(var(--zh-ink)); color: var(--zh-paper); }
.zh-final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block: 2.6rem; }
.zh-final-cta h2 { font-family: var(--zh-font-heading); color: var(--zh-paper); font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0; }
.zh-final-cta p { color: rgba(245, 242, 236, .75); margin: .4rem 0 0; }
.zh-final-cta__btns { display: flex; gap: .85rem; flex-wrap: wrap; }

/* ---------- Sticky WhatsApp (sitewide, per approved brief) ---------- */
.zh-fab {
  position: fixed; inset-inline-start: 1.4rem; bottom: 1.4rem; z-index: 50;
  display: flex; align-items: center; gap: .55rem;
  background: #25d366; color: #ffffff;
  padding: .78rem 1.1rem; border-radius: 999px;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.4);
  font-family: var(--zh-font-body); font-weight: 600; font-size: .84rem;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.zh-fab:hover { background: #1ebc59; transform: translateY(-2px); }
.zh-fab svg { width: 18px; height: 18px; flex: none; }

/* ---------- Footer trust-bar placeholder values (no invented license data) ---------- */
.trust-bar__value--pending { font-style: italic; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .zh-btn, .zh-fab { transition: none; }
}

@media (max-width: 900px) {
  .zh-hero__plan { display: none; }
  .zh-why-grid { grid-template-columns: 1fr; }
  .zh-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .zh-about-grid { grid-template-columns: 1fr; }
  .zh-about-grid h2 { grid-column: 1; }
  .zh-about-grid > div:last-child { grid-column: 1; }
}