/* ============================================================
   Giant Vision Marketing — Design System v3
   Dual theme: Dark (default) + Light
   Bilingual: Arabic RTL (default) + English LTR
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ============================================================
   DESIGN TOKENS — DARK THEME (DEFAULT)
   ============================================================ */
:root {
  /* Background layers */
  --bg:           #050505;
  --bg-2:         #080808;
  --bg-3:         #0D0D0D;
  --surface:      #111111;
  --surface-2:    #161616;
  --surface-3:    #1C1C1C;

  /* Brand orange */
  --brand:        #E8751A;
  --brand-h:      #F5923E;
  --brand-d:      #C05F0F;
  --brand-a18:    rgba(232,117,26,.18);
  --brand-a12:    rgba(232,117,26,.12);
  --brand-a08:    rgba(232,117,26,.08);
  --brand-a05:    rgba(232,117,26,.05);
  --brand-glow:   0 0 40px rgba(232,117,26,.25);

  /* Text */
  --fg:           #F5F4F0;
  --fg-2:         #C8C7C2;
  --fg-muted:     #8A8A82;
  --fg-dim:       #4A4A45;

  /* Borders */
  --border:       rgba(255,255,255,.07);
  --border-2:     rgba(255,255,255,.12);
  --border-brand: rgba(232,117,26,.28);

  /* Shadow */
  --shadow-sm:    0 4px 16px rgba(0,0,0,.4);
  --shadow-md:    0 12px 40px rgba(0,0,0,.55);
  --shadow-lg:    0 28px 70px rgba(0,0,0,.7);
  --shadow-brand: 0 12px 32px rgba(232,117,26,.38);

  /* Status colors */
  --error:        #e84040;
  --error-a10:    rgba(232,64,64,.1);
  --success:      #2ea852;
  --success-a12:  rgba(46,168,82,.12);
  --success-a30:  rgba(46,168,82,.3);

  /* Radius */
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 100px;

  /* Transitions */
  --t-fast:   .15s ease;
  --t:        .25s ease;
  --t-slow:   .45s ease;

  /* Layout */
  --max-w:    1200px;
  --nav-h:    72px;

  /* Mega menu */
  --mm-bg:    rgba(8,8,8,.97);
  --mm-border: rgba(255,255,255,.08);
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
[data-theme="light"] {
  --bg:           #FAFAF8;
  --bg-2:         #F2F1EE;
  --bg-3:         #ECEAE6;
  --surface:      #FFFFFF;
  --surface-2:    #F7F6F3;
  --surface-3:    #EEEDE9;

  --brand:        #D96810;
  --brand-h:      #E8751A;
  --brand-d:      #B85A0C;
  --brand-a18:    rgba(217,104,16,.14);
  --brand-a12:    rgba(217,104,16,.10);
  --brand-a08:    rgba(217,104,16,.07);
  --brand-a05:    rgba(217,104,16,.04);
  --brand-glow:   0 0 32px rgba(217,104,16,.18);

  --fg:           #121212;
  --fg-2:         #2E2E2B;
  --fg-muted:     #636360;
  --fg-dim:       #9A9A96;

  --border:       rgba(0,0,0,.08);
  --border-2:     rgba(0,0,0,.14);
  --border-brand: rgba(217,104,16,.25);

  --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
  --shadow-md:    0 8px 28px rgba(0,0,0,.10);
  --shadow-lg:    0 20px 56px rgba(0,0,0,.14);
  --shadow-brand: 0 8px 24px rgba(217,104,16,.28);

  --mm-bg:        rgba(250,250,248,.97);
  --mm-border:    rgba(0,0,0,.07);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img  { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
a      { text-decoration: none; }
ul     { list-style: none; }

body {
  font-family: 'Tajawal', sans-serif;
  background: var(--bg);
  color: var(--fg);
  direction: rtl;
  overflow-x: hidden;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-slow), color var(--t-slow);
}

/* LTR override for English */
[lang="en"] body,
[lang="en"] .wrap,
[lang="en"] section { direction: ltr; }
[dir="ltr"] { direction: ltr; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.h1 {
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 900;
  line-height: 1.08;
}
.h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 18px;
}
.h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; }
.h4 { font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 700; }

.text-brand  { color: var(--brand); }
.text-muted  { color: var(--fg-muted); }
.text-center { text-align: center; }

/* Gradient text — vivid, embossed, glossy premium orange centerpiece.
   A thin dark stroke keeps the glyphs defined against busy backgrounds
   of any brightness, which is what actually reads as "embossed" rather
   than the gradient color alone. */
.grad-text {
  background: linear-gradient(180deg, #ffe0b8 0%, #ffa64d 22%, #f36b21 52%, #d85a12 78%, #a83f0a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: .5px rgba(60,20,3,.35);
  text-shadow:
    0 -1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(120,45,5,.4),
    0 3px 2px rgba(90,32,4,.45),
    0 6px 22px rgba(243,107,33,.65),
    0 0 40px rgba(255,154,61,.4);
  filter: saturate(1.3) brightness(1.04) contrast(1.05);
}
[data-theme="light"] .grad-text {
  background: linear-gradient(180deg, #ffcf9e 0%, #ff9a3d 24%, #f36b21 55%, #d85a12 80%, #a83f0a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: .9px rgba(65,22,3,.55);
  text-shadow:
    0 -1px 0 rgba(255,240,220,.6),
    0 1.5px 0 rgba(70,25,3,.55),
    0 3px 2px rgba(60,20,2,.5),
    0 2px 0 rgba(40,14,2,.4),
    0 7px 18px rgba(160,70,10,.4);
  filter: saturate(1.35) contrast(1.12);
}

/* Hero impact phrase — "تتحول إلى أثر" is split into two plain inline
   spans (prefix text + the word "أثر" itself) purely so each has its own
   data-i18n key; both sit inside ONE .hero-impact-text run so the Arabic
   shaper still joins every letter within each span correctly (never
   splitting a single word's characters across boxes). The phrase text
   itself is never animated — only a small glow anchored to the word
   "أثر" via .impact-word-anchor moves/fades; the words stay put and
   fully readable throughout. */
.hero-impact {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hero-impact-text {
  display: inline-block;
  white-space: nowrap;
}

/* On narrow screens the full "تتحول إلى أثر" run can be wider than the
   hero's own box; since it's forced onto one nowrap line, the overflow
   bleeds past the trailing edge and gets clipped by .hero's
   overflow:hidden — and because "أثر" is the trailing (leftmost, in RTL)
   word, it's the one that visibly loses part of itself. Letting the line
   wrap fixes that, but only ever at the single space between the prefix
   and the word (the prefix span keeps its own nowrap so it can't split
   mid-phrase) — so "أثر" either sits on the same line or drops to a
   full line of its own, never with letters cut. */
@media (max-width: 768px) {
  .hero-impact-text { white-space: normal; }
  .hero-impact-prefix { white-space: nowrap; }
  .hero-impact { flex-wrap: wrap; justify-content: center; }
  /* Extra headroom for "أثر" specifically. .hero-title's padding-block
     is in em, so it shrinks in real pixels right along with the smaller
     mobile font-size — leaving little slack above the tallest Arabic
     ascenders (hamza on "أ", the dots on "ث") once the reveal animation
     settles into its final resting position. Widening line-height and
     giving .impact-word-anchor its own explicit top padding (rather than
     relying on the shared line box) keeps those ascenders inside a
     visible, never-clipped area regardless of animation state. */
  .hero-title { line-height: 1.45; }
  .impact-word-anchor {
    display: inline-block;
    overflow: visible;
    padding-top: .28em;
  }
  .hero-impact-text,
  .hero-impact {
    overflow: visible;
  }
}

/* The impact trail lives entirely on the word itself: .impact-word-anchor
   is the ONLY positioned ancestor its ::before/::after need, sized and
   placed in em/% units relative to that word's own box — never the
   screen, never the whole phrase — so it can't drift into looking like a
   separate shape and stays attached at every viewport size with zero JS.
   z-index:0 opens a local stacking context so the trail's z-index:-1
   only tucks behind THIS word's glyphs, not the rest of the page.
   --trail-dir flips the travel direction with the page's own direction:
   -1 sends the trail toward the LEFT (RTL default — "أثر" is the last,
   leftmost word, so left is outward/away from the rest of the phrase);
   [dir="ltr"] flips it to +1 (RIGHT — "Impact" is the last, rightmost
   word there, so right is the equivalent outward direction). Either way
   the trail always travels away from the preceding words, never under
   them.
   Two layers confined to a short zone just past the word's trailing
   edge: ::after is a soft blurred glow (the "impact"), ::before a thin
   fading line just under the baseline (the "trace"). Both actually
   MOVE — real @keyframes animation, not a one-shot transition that
   settles and then sits still — looping softly with a long idle gap
   built into the keyframe timing (see impactTrail) so it reads as an
   occasional gentle pulse of motion, not constant flicker. */
.impact-word-anchor {
  position: relative;
  z-index: 0;
  --trail-dir: -1;
}
[dir="ltr"] .impact-word-anchor { --trail-dir: 1; }
.impact-word-anchor::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline-start: -6%;
  inset-inline-end: -60%;
  bottom: -12%;
  height: 55%;
  background: radial-gradient(ellipse closest-side, var(--brand-a18), transparent 78%);
  opacity: 0;
  transform: scaleX(.2);
  pointer-events: none;
}
.impact-word-anchor::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline-start: -4%;
  inset-inline-end: -55%;
  bottom: 2%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to left, var(--brand-a18), transparent);
  opacity: 0;
  transform: scaleX(.2);
  pointer-events: none;
}
[dir="ltr"] .impact-word-anchor::before { background: linear-gradient(to right, var(--brand-a18), transparent); }

/* Animation only ever starts once .hero-impact has picked up the sitewide
   .visible reveal class (added by the IntersectionObserver in shared.js)
   — until then no animation-name is set at all, so there's no risk of
   the keyframe clock ticking away during page/font load and the first
   visible frame landing mid-cycle. */
@media (prefers-reduced-motion: no-preference) {
  .hero-impact.visible .impact-word-anchor::after {
    animation: impactTrailGlow 4.2s cubic-bezier(.33,.1,.3,1) 1s infinite;
  }
  .hero-impact.visible .impact-word-anchor::before {
    animation: impactTrailLine 4.2s cubic-bezier(.33,.1,.3,1) 1.15s infinite;
  }
  /* Idle stretch built into 0–24% and 78–100% (both fully transparent)
     so each cycle reads as one soft pulse of motion followed by a real
     pause, not a nonstop loop. */
  @keyframes impactTrailGlow {
    0%, 24%  { opacity: 0;   transform: translateX(0) scaleX(.2); }
    46%      { opacity: .75; transform: translateX(calc(var(--trail-dir) * 10px)) scaleX(1); }
    64%      { opacity: .5;  transform: translateX(calc(var(--trail-dir) * 22px)) scaleX(1.12); }
    78%, 100% { opacity: 0;  transform: translateX(calc(var(--trail-dir) * 34px)) scaleX(1.22); }
  }
  @keyframes impactTrailLine {
    0%, 24%  { opacity: 0;  transform: translateX(0) scaleX(.2); }
    46%      { opacity: .85; transform: translateX(calc(var(--trail-dir) * 8px)) scaleX(1); }
    64%      { opacity: .6; transform: translateX(calc(var(--trail-dir) * 18px)) scaleX(1.1); }
    78%, 100% { opacity: 0; transform: translateX(calc(var(--trail-dir) * 30px)) scaleX(1.18); }
  }
}
/* Reduced motion: show a settled, non-moving trace instead of nothing. */
@media (prefers-reduced-motion: reduce) {
  .hero-impact.visible .impact-word-anchor::after  { opacity: .55; transform: scaleX(1); }
  .hero-impact.visible .impact-word-anchor::before { opacity: .7;  transform: scaleX(1); }
}

/* Shared section header */
.section-hd {
  text-align: center;
  margin-bottom: 52px;
}
.section-sub {
  font-size: .97rem;
  color: var(--fg-muted);
  max-width: 520px;
  margin: 8px auto 0;
  line-height: 1.7;
}

/* ============================================================
   ATOMS — Chip, Tag, Badge
   ============================================================ */
.chip {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  border: 1px solid var(--border-brand);
  background: var(--brand-a05);
  padding: 5px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 20px;
}
.tag {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: .82rem;
  transition: border-color var(--t), color var(--t);
}
.tag:hover { border-color: var(--border-brand); color: var(--brand); }
.tag-row   { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--brand);
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 30px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover {
  background: var(--brand-h);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--fg);
  font-family: 'Tajawal', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-a05);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--brand);
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 24px;
  border: 1.5px solid var(--brand);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.btn-outline:hover {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-block { width: 100%; justify-content: center; padding: 15px; font-size: 1.05rem; }
.btn-sm    { padding: 9px 20px; font-size: .88rem; }

/* Icon button */
.btn-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.btn-icon:hover {
  border-color: var(--border-brand);
  color: var(--brand);
  background: var(--brand-a05);
}
.btn-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-fade { opacity: 0; transition: opacity .8s ease; }
.reveal-fade.visible { opacity: 1; }
.reveal-left  { opacity: 0; transform: translateX(-24px); transition: opacity .65s ease, transform .65s ease; }
.reveal-right { opacity: 0; transform: translateX( 24px); transition: opacity .65s ease, transform .65s ease; }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ============================================================
   ANTI-FOUC (set in HTML inline script, confirmed here)
   ============================================================ */
html:not([data-theme]) { visibility: hidden; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0;
  transition: background var(--t-slow), border-color var(--t-slow), backdrop-filter var(--t-slow);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: rgba(5,5,5,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(250,250,248,.94);
}
.nav-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.5px;
  margin-inline-end: auto;
}
.nav-logo-img  { height: 56px; width: auto; object-fit: contain; display: block; }
.nav-logo-svg  { width: 56px; height: 56px; flex-shrink: 0; display: none; }
.nav-brand-name {
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--fg);
  display: block;
}
.nav-brand-name span { color: var(--brand); }

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: 8px;
}
.nav-link {
  position: relative;
  color: var(--fg-muted);
  font-size: .9rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  outline: none;
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--fg); background: var(--brand-a05); }
.nav-link.active { color: var(--brand); }

/* Dropdown trigger — plain link with a small arrow, never a boxed button.
   `.nav-link` already resets background/border above (needed because this
   is a <button> element and would otherwise show native button chrome). */
.nav-link.has-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.nav-link.has-dropdown svg {
  opacity: .7;
  transition: transform var(--t), opacity var(--t);
  flex-shrink: 0;
}
.nav-link.has-dropdown:hover svg,
.nav-link.has-dropdown.open svg { opacity: 1; }
.nav-link.has-dropdown.open svg { transform: rotate(180deg); }

/* Nav utilities */
.nav-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--border-brand);
  color: var(--brand);
  transform: rotate(20deg);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Language toggle */
.lang-toggle {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-muted);
  font-family: 'Tajawal', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--t), color var(--t), background var(--t);
  flex-shrink: 0;
  white-space: nowrap;
}
.lang-toggle:hover {
  border-color: var(--border-brand);
  color: var(--brand);
  background: var(--brand-a05);
}
.lang-toggle-sm { font-size: .72rem; height: 28px; padding: 0 10px; }

/* Nav CTA */
.nav-cta {
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: .86rem;
  padding: 9px 22px;
  border: none;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.nav-cta:hover {
  background: var(--brand-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,117,26,.35);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: all var(--t);
}

/* ============================================================
   MEGA MENU
   ============================================================ */
/* position:fixed + viewport-centered so the panel can never be clipped by
   the edge of the screen, regardless of where its trigger sits in the nav
   or which text direction (RTL/LTR) is active. mouseenter/mouseleave still
   work correctly because .mega-menu-wrap stays a DOM descendant of the
   trigger's <li>, which is what those listeners actually key off. */
.mega-menu-wrap {
  position: fixed;
  top: calc(var(--nav-h) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(800px, calc(100vw - 32px));
  max-height: calc(100vh - var(--nav-h) - 24px);
  overflow-y: auto;
  background: var(--mm-bg);
  border: 1px solid var(--mm-border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
  pointer-events: none;
}
[data-theme="light"] .mega-menu-wrap {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.08);
}

.nav-link.has-dropdown.open + .mega-menu-wrap,
.mega-menu-wrap:hover,
.mega-menu-wrap.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* relative positioning context for the dropdowns */
.nav-dropdown {
  position: relative;
}

.mm-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.mm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
  text-decoration: none;
}
.mm-item:hover {
  background: var(--brand-a05);
  border-color: var(--border-brand);
}
.mm-item-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.mm-item-text h5 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
  transition: color var(--t);
}
.mm-item:hover .mm-item-text h5 { color: var(--brand); }
.mm-item-text p {
  font-size: .76rem;
  color: var(--fg-muted);
  line-height: 1.4;
}
.mm-cta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mm-cta-text { font-size: .82rem; color: var(--fg-muted); }
.mm-cta-link {
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap var(--t);
}
.mm-cta-link:hover { gap: 8px; }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg-2);
  backdrop-filter: blur(24px);
  flex-direction: column;
  padding: 24px 28px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.mobile-nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: all var(--t);
}
.mobile-nav-link:hover {
  color: var(--fg);
  background: var(--surface);
  border-color: var(--border);
}
.mobile-nav-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mobile-nav-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
  padding: 0 4px;
}
.mobile-nav-sub {
  font-size: .92rem;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color var(--t), background var(--t);
}
.mobile-nav-sub:hover { color: var(--fg); background: var(--surface); }
.mobile-nav-sub .sub-icon { font-size: 1.1rem; }
.mobile-nav-foot {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) 28px 100px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Hero background — official approved artwork (images/dark-mode-hero.webp,
   images/light-mode-hero.webp). Switches automatically with [data-theme]. */
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("images/dark-mode-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="light"] .hero-photo {
  background-image: url("images/light-mode-hero.webp");
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.5) 0, rgba(5,5,5,.05) 130px, rgba(5,5,5,.08) 55%, rgba(5,5,5,.16) 100%);
}
[data-theme="light"] .hero-photo::after {
  background: linear-gradient(180deg, rgba(250,247,240,.55) 0, rgba(250,247,240,.06) 130px, rgba(250,247,240,.1) 55%, rgba(250,247,240,.18) 100%);
}

@media (max-width: 768px) {
  .hero-photo { background-position: 70% center; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(5,5,5,.6) 0, rgba(5,5,5,.14) 120px, rgba(5,5,5,.18) 55%, rgba(5,5,5,.3) 100%); }
  [data-theme="light"] .hero-photo::after { background: linear-gradient(180deg, rgba(250,247,240,.65) 0, rgba(250,247,240,.16) 120px, rgba(250,247,240,.22) 55%, rgba(250,247,240,.35) 100%); }
}

/* Hero content */
.hero-content {
  position: relative; z-index: 1;
  max-width: 880px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 36px;
}
.hero-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
  animation: dotPulse 2.4s ease-in-out infinite;
}
.hero-dot:last-child { animation-delay: .4s; }
@keyframes dotPulse {
  0%,100% { opacity:.4; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.5); }
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: clamp(2.75rem, 6.8vw, 5.4rem);
  font-weight: 900;
  line-height: 1.22;
  padding-block: .1em;
  margin-bottom: 28px;
}
/* .hero-line-1 and .hero-impact both carry the sitewide .reveal
   transform/opacity transition. Without will-change, the browser only
   promotes them to their own composited layer WHILE the transition is
   actually running, then demotes them back into normal paint once it
   settles — and demotion can force a repaint of the gradient-clipped
   text (.grad-text, background-clip:text) inside .hero-impact using a
   tighter bounding box than the one used mid-transition, clipping tall
   Arabic ascenders (the hamza on "أ", the dots on "ث") right as the
   animation finishes. Keeping the layer promoted throughout — not just
   during the transition — avoids that repaint entirely. */
.hero-line-1,
.hero-impact {
  will-change: transform, opacity;
}
.hero-line-1 { color: var(--fg); }
.hero-desc {
  font-size: clamp(.92rem, 1.8vw, 1.12rem);
  color: var(--fg-muted);
  margin-bottom: 44px;
  line-height: 1.85;
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
/* English alignment */
[lang="en"] .hero-title, [lang="en"] .hero-eyebrow, [lang="en"] .hero-content {
  text-align: center;
}

/* Floating badges */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--fg-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.hbadge:hover { border-color: var(--border-brand); color: var(--brand); background: var(--brand-a05); }
[data-theme="light"] .hbadge { background: rgba(0,0,0,.03); }

/* ============================================================
   MARQUEE BAND
   ============================================================ */
.marquee-band {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
  /* Force LTR box flow regardless of page direction. Under dir="rtl" a
     block wider than its container (the track, via width:max-content) with
     default margins anchors to the RIGHT edge and overflows to the LEFT
     instead of the left-anchor/right-overflow behavior the marqueeScroll
     math assumes — on narrow viewports that pushes the entire track
     permanently off-screen. Arabic glyph shaping is driven by the Unicode
     bidi algorithm on the characters themselves, not this property, so
     Arabic text still renders correctly. */
  direction: ltr;
}
/* The track holds N byte-identical groups (initMarquee() in shared.js
   clones the single authored .marquee-group at runtime) and is the ONLY
   animated element — translating it by exactly 1/N of its own width per
   loop means the frame after the jump back to 0 is pixel-identical to the
   frame before it (the next clone is sitting exactly where the first one
   started), so the reset is invisible. width:max-content stops the flex
   container from being stretched to the band's width, which would
   otherwise make the 1/N math point at the wrong pixel offset.
   News-ticker convention: motion is always left-to-right (content enters
   from the left edge, exits at the right) regardless of language/reading
   direction — intentionally NOT tied to [lang]/[dir]. */
.marquee-track {
  display: flex;
  width: max-content;
  --marquee-n: 2; /* overwritten by initMarquee() in shared.js once real clone count is known */
  animation: marqueeScroll 36s linear infinite;
  will-change: transform;
}
.marquee-group {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
  padding-inline-end: 28px;
}
.marquee-group span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg-dim);
  text-transform: uppercase;
  transition: color var(--t);
  flex-shrink: 0;
}
.marquee-band:hover .marquee-group span { color: var(--fg-muted); }
.mdot { color: var(--brand) !important; font-size: .65rem !important; }
/* Translating by exactly 1/N of the track's width (N = live clone count)
   means the frame after the reset to 0 is pixel-identical to the frame
   before it — the next clone is sitting exactly where the first one
   started, so the loop has no gap, jump, or pause. Starting shifted left
   by one group-width and animating toward 0 makes the track visibly slide
   rightward, so content enters at the left edge and exits at the right. */
@keyframes marqueeScroll { from { transform: translateX(calc(-100% / var(--marquee-n))); } to { transform: translateX(0); } }

/* ============================================================
   STATS — "أرقام تثبت القدرة" band. Background is the two approved
   photographic assets (images/section2_dark.png / section2_light.png)
   used as-is, swapped per real site theme — same pattern as the Hero's
   .hero-photo. Text colors follow the normal theme variables (not
   forced) so they stay readable against whichever image is active.
   ============================================================ */
.stats {
  padding: 96px 0;
  background-image: url("images/section2_dark.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fg);
  position: relative;
}
[data-theme="light"] .stats {
  background-image: url("images/section2_light.png");
}
.stats .section-hd { position: relative; z-index: 1; }
.stats .chip { display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 18px -6px var(--brand-a18); }
.chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px 2px var(--brand-a18);
  animation: wavePulse 2.6s ease-in-out infinite;
}
.stats .h2 {
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
  letter-spacing: -.01em;
}
.stats .section-sub { color: var(--fg-2); text-shadow: 0 1px 8px rgba(0,0,0,.2); }

.stats-panel {
  position: relative;
  z-index: 1;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 18px;
  text-align: center;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 14%; bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border) 25%, var(--border) 75%, transparent);
}
.stat-icon { font-size: 1.6rem; margin-bottom: 4px; transition: background var(--t), box-shadow var(--t); }
.stat:hover .stat-icon { background: var(--brand-a18); box-shadow: var(--brand-glow); }
.stat-val {
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Solid color, not a gradient-clipped fill — the gradient-clip technique
     is what made the numbers read as blurry/distorted (anti-aliased clip
     edges) and washed out in light mode (the gradient's light end nearly
     disappeared against a light background). A flat color with a light,
     controlled shadow stays sharp and readable in both themes. */
  color: #ff7a18;
  opacity: 1;
  text-shadow: 0 0 12px rgba(249,115,22,.45);
}
[data-theme="light"] .stat-val {
  color: #e8660d;
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.stat-val-text {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 800;
  line-height: 1.3;
  max-width: 9em;
  margin: 0 auto;
}
.stat p {
  color: var(--fg-2);
  font-weight: 600;
  font-size: .83rem;
  margin-top: 4px;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.5);
}

/* ============================================================
   ABOUT — "من نحن" premium section on the homepage, reached via the
   main nav's "من نحن" link (#about). Uses the approved sec3 background
   photos, swapped per real theme (same pattern as the homepage stats
   section and the about.html "من نحن" section).
   ============================================================ */
.about {
  position: relative;
  padding: 120px 0;
  background-image: url("images/sec3_dark.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fg);
}
[data-theme="light"] .about { background-image: url("images/sec3_light.png"); }
.about .section-hd { position: relative; z-index: 1; }
.about .h2 { text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.about .section-sub { color: var(--fg-2); text-shadow: 0 1px 8px rgba(0,0,0,.2); }

.about-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 1;
}
.about-premium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 260px;
  padding: 40px 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(232,117,26,.28);
  border-radius: var(--r-xl);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
[data-theme="light"] .about-premium-card {
  background: rgba(255,255,255,.6);
  border-color: rgba(217,104,16,.25);
}
.about-premium-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-brand);
  box-shadow: 0 20px 50px -25px rgba(0,0,0,.5), 0 0 40px -15px var(--brand-a18);
}
.apc-icon {
  width: 80px; height: 80px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 18px var(--brand-a18));
}
.apc-icon img { width: 100%; height: 100%; object-fit: contain; }
.about-premium-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; color: var(--fg); }
.about-premium-card p  { font-size: .88rem; color: var(--fg-muted); line-height: 1.7; text-shadow: 0 1px 6px rgba(0,0,0,.15); }
.about .about-cta { position: relative; z-index: 1; justify-content: center; margin-top: 40px; }

@media (max-width:1024px) {
  .about-premium-grid { grid-template-columns: repeat(2, 1fr); }
  .about-premium-card:last-child { grid-column: 1 / -1; }
}
@media (max-width:768px) {
  .about-premium-grid { grid-template-columns: 1fr; }
  .about-premium-card:last-child { grid-column: auto; }
}

/* Legacy rules below are no longer used by the homepage About section
   (replaced by .about-premium-* above) but .acard-icon is still used by
   about.html's Values cards, so these are kept intact, not deleted. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-text .h2  { margin-bottom: 18px; }
.about-text > p  { color: var(--fg-muted); font-size: .98rem; margin-bottom: 12px; line-height: 1.8; }
.about-cta       { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.about-cards { display: flex; flex-direction: column; gap: 12px; }
.acard {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 2px solid transparent;
  border-radius: var(--r-lg);
  padding: 20px 22px;
  transition: border-color var(--t), border-inline-start-color var(--t), transform var(--t), box-shadow var(--t);
}
.acard:hover {
  border-color: var(--brand-a18);
  border-inline-start-color: var(--brand);
  transform: translateX(-4px);
  box-shadow: var(--shadow-md);
}
[lang="en"] .acard:hover { transform: translateX(4px); }
.acard-icon { font-size: 1.55rem; flex-shrink: 0; margin-top: 2px; transition: background var(--t), box-shadow var(--t); }
.acard:hover .acard-icon { background: var(--brand-a18); box-shadow: var(--brand-glow); }
.acard h4   { font-weight: 700; font-size: .95rem; margin-bottom: 5px; color: var(--fg); }
.acard p    { font-size: .83rem; color: var(--fg-muted); margin: 0; line-height: 1.55; }

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding: 120px 0;
  background-image: url("images/sec4_dark.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="light"] .services { background-image: url("images/sec4_light.png"); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 44px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  font-family: 'Tajawal', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  transition: all var(--t);
}
.tab:hover { border-color: var(--border-brand); color: var(--fg); }
.tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(232,117,26,.32);
}
.tab-icon { font-size: .95rem; }

.panels { min-height: 380px; }
.panel  { display: none; }
.panel.active { display: block; }

.panel-hd {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.panel-icon   { font-size: 2.4rem; }
.panel-hd h3  { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; color: var(--fg); }
.panel-hd span{ color: var(--fg-muted); font-size: .85rem; }

/* Service cards */
.scards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
.scard {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
[data-theme="light"] .scard { background: var(--surface); }
.scard::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 0;
  width: 0; height: 3px;
  background: linear-gradient(to right, var(--brand), transparent);
  transition: width .4s ease;
}
[dir="rtl"] .scard::before { background: linear-gradient(to left, var(--brand), transparent); }
.scard:hover { border-color: rgba(232,117,26,.3); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.scard:hover::before { width: 100%; }
.scard-wide   { grid-column: 1 / -1; max-width: 680px; }
.scard-num    { font-size: 2.6rem; font-weight: 900; color: var(--brand-a12); line-height: 1; transition: color var(--t); }
.scard:hover .scard-num { color: var(--brand-a18); }
.scard h4     { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--fg); }
.scard p      { color: var(--fg-muted); font-size: .87rem; flex: 1; line-height: 1.65; }
.scard-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: .87rem;
  font-weight: 600;
  margin-top: 6px;
  width: fit-content;
  transition: gap var(--t), opacity var(--t);
}
.scard-link:hover { gap: 12px; }

.services-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.services-footer p { color: var(--fg-muted); font-size: .92rem; }

/* ============================================================
   SERVICE FINDER
   ============================================================ */
.service-finder {
  padding: 130px 0;
  background-color: var(--bg-2);
  background-image: url('images/sec5_dark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .service-finder {
  background-image: url('images/sec5_light.png');
}
.sf-card {
  position: relative;
  background: rgba(17,17,17,.78);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-xl);
  padding: 56px 60px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand-a05), 0 0 60px -20px var(--brand-a18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
[data-theme="light"] .sf-card {
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand-a05), 0 0 50px -20px var(--brand-a12);
}
.sf-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
}
.sf-step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  flex-shrink: 0;
}
.sf-step-dot.active { background: var(--brand); transform: scale(1.35); box-shadow: 0 0 0 4px var(--brand-a12), 0 0 14px var(--brand-a18); }
.sf-step-dot.done   { background: var(--brand); opacity: .55; }
.sf-step-line {
  flex: 1; height: 2px;
  border-radius: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.sf-step-line::after {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
  width: var(--pct, 0%);
  transition: width .45s ease;
  box-shadow: 0 0 8px var(--brand-a18);
}
.sf-q-num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.sf-question {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 28px;
  line-height: 1.3;
}
.sf-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sf-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 14px 20px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
  text-align: start;
  font-family: 'Tajawal', sans-serif;
}
[data-theme="light"] .sf-option { background: var(--bg-3); }
.sf-option:hover {
  border-color: var(--border-brand);
  background: var(--brand-a05);
  transform: translateY(-2px);
}
.sf-option.selected {
  border-color: var(--brand);
  background: var(--brand-a12);
  box-shadow: 0 0 0 1px var(--brand-a18), var(--brand-glow);
}
.sf-option-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--brand-a08);
  color: var(--brand);
  transition: background var(--t);
}
.sf-option:hover .sf-option-icon,
.sf-option.selected .sf-option-icon { background: var(--brand-a18); }
.sf-option-icon svg { width: 18px; height: 18px; }
.sf-option-text { font-size: .92rem; font-weight: 600; color: var(--fg); }
.sf-actions { display: flex; margin-top: 24px; }
.sf-result {
  display: none;
  text-align: center;
}
.sf-result.show { display: block; }
.sf-result-icon { font-size: 3rem; margin-bottom: 16px; }
.sf-result h3   { font-size: 1.6rem; font-weight: 900; color: var(--fg); margin-bottom: 8px; }
.sf-result p    { color: var(--fg-muted); font-size: .95rem; margin-bottom: 24px; line-height: 1.7; }
.sf-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PROCESS
   Premium 4-step cards over the sec7 artwork: squircle icon badges
   (clean inline SVG, no image assets), a large muted step numeral for
   hierarchy, and an inline SVG connector that mirrors for RTL via CSS
   transform instead of shipping two separate arrow image files.
   ============================================================ */
.process {
  padding: 180px 0;
  background-color: var(--bg-2);
  background-image: url('images/sec7_dark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
[data-theme="light"] .process {
  background-image: url('images/sec7_light.png');
}
/* overflow-x:auto here forces the browser to also clip the vertical axis
   (a container can't scroll on one axis while staying visible on the
   other), so the padding below exists purely to give the hover-lifted
   .step room to rise without its top edge/glow getting clipped by that
   axis-locked overflow box. */
.steps-wrap { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding: 22px 2px 18px; }
.steps-wrap::-webkit-scrollbar { display: none; }
.steps { display: flex; align-items: stretch; min-width: 720px; gap: 4px; }
.step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 44px 22px 30px;
  border-radius: var(--r-xl);
  background: rgba(17,17,17,.55);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-brand);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
[data-theme="light"] .step { background: rgba(255,255,255,.72); }
/* Gated to real pointer/hover devices — on touch, a tap otherwise triggers
   this as a "sticky hover" that stays lifted after the tap, reading as an
   unwanted jump. Desktop mouse hover is unaffected. */
@media (hover: hover) and (pointer: fine) {
  .step:hover { border-color: var(--border-brand); background: var(--brand-a08); transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 40px -22px var(--brand-a18); }
}

.step-num {
  position: absolute;
  top: 14px;
  inset-inline-end: 18px;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brand-a12);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color var(--t);
}
.step:hover .step-num { color: var(--brand-a18); }

.step-icon {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--brand-a18), var(--brand-a05));
  border: 1px solid var(--border-brand);
  box-shadow: 0 0 0 1px var(--brand-a05), inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--brand);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.step-icon::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 26px;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.4s ease-in-out infinite;
}
.step:nth-of-type(3) .step-icon::before { animation-delay: -.85s; }
.step:nth-of-type(5) .step-icon::before { animation-delay: -1.7s; }
.step:nth-of-type(7) .step-icon::before { animation-delay: -2.55s; }
.step-icon svg { filter: drop-shadow(0 0 8px var(--brand-a18)); transition: filter var(--t), transform var(--t); }
.step:hover .step-icon {
  background: linear-gradient(145deg, var(--brand-a18), var(--brand-a12));
  box-shadow: 0 0 0 1px var(--brand-a08), var(--brand-glow);
  transform: scale(1.05);
}
.step:hover .step-icon svg { filter: drop-shadow(0 0 14px var(--brand-a18)); }

/* Outcome node — the final step reads as the destination/result */
.step-outcome .step-icon {
  background: linear-gradient(145deg, var(--brand), var(--brand-h));
  color: #fff;
  box-shadow: 0 0 0 1px var(--brand-a05), var(--brand-glow);
}
.step-outcome .step-icon::before { border-color: var(--brand); animation-duration: 2.3s; }
.step-outcome .step-num { color: var(--brand-a18); }

.step h4 { font-weight: 800; font-size: 1rem; color: var(--fg); }
.step p  { font-size: .85rem; color: var(--fg-muted); max-width: 190px; line-height: 1.6; }
@keyframes nodeRingPulse {
  0%,100% { transform: scale(1);    opacity: .7; }
  50%     { transform: scale(1.12); opacity: 0;  }
}

/* Connector — inline SVG line + arrowhead, drawn once and mirrored for
   RTL with a CSS transform so no separate left/right image assets are
   needed. Points toward the next step: right in LTR, left in RTL. */
.step-connector {
  flex-shrink: 0;
  align-self: center;
  width: 44px;
  color: var(--brand);
  opacity: .8;
  filter: drop-shadow(0 0 6px var(--brand-a12));
}
.step-connector-svg { width: 100%; height: 24px; display: block; }
[dir="rtl"] .step-connector-svg { transform: scaleX(-1); }
/* Shared flowing-dash used by the new flow/beam/converge diagram systems */
@keyframes dashFlow  { to { stroke-dashoffset: -24; } }
@keyframes corePulse  { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes beamRise   { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ============================================================
   WHY GV
   ============================================================ */
.why-gv {
  padding: 130px 0;
  background-color: var(--bg-2);
  background-image: url('images/sec8_dark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
[data-theme="light"] .why-gv {
  background-image: url('images/sec8_light.png');
}

/* --- Ribbon infographic: numbered ribbons on the reading-start side,
   each with its own curved connector feeding into a glowing orange
   concentric-ring graphic on the reading-end side. DOM order is
   ribbons → circle → connectors, so flexbox's natural RTL/LTR reversal
   places the ribbons on the reading-start side automatically; the
   connector overlay is absolutely positioned and its paths are computed
   in JS from real element positions, so it stays correct either way. */
.why-infographic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 44px;
  opacity: 0;
  transition: opacity .5s ease;
}
.why-infographic.in-view { opacity: 1; }
.why-infographic.no-anim,
.why-infographic.no-anim * { transition: none !important; animation: none !important; }

.why-ribbons {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Ribbon --- */
.why-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-brand);
  border-radius: var(--r-lg);
  opacity: 0;
  transition: opacity .6s ease, border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t);
  transition-delay: calc(1500ms + var(--ri, 0) * 130ms), 0s, 0s, 0s, 0s;
}
[data-theme="light"] .why-ribbon { background: rgba(255,255,255,.8); }
.why-infographic.in-view .why-ribbon { opacity: 1; }
.why-ribbon:hover {
  border-color: var(--border-brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.why-ribbon-num {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  background-color: var(--brand);
  background-image: linear-gradient(150deg, rgba(255,255,255,.22), rgba(0,0,0,.15));
  box-shadow: 0 6px 18px -6px var(--brand-a18);
  font-variant-numeric: tabular-nums;
}
.why-ribbon-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--brand-a18), var(--brand-a05));
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.why-ribbon:hover .why-ribbon-icon {
  background: linear-gradient(145deg, var(--brand-a18), var(--brand-a12));
  box-shadow: 0 0 0 1px var(--brand-a08), var(--brand-glow);
  transform: translateY(-1px) scale(1.05);
}
.why-ribbon-icon svg { width: 22px; height: 22px; }
.why-ribbon-body h4 { font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; color: var(--fg); }
.why-ribbon-body p  { font-size: .83rem; color: var(--fg-muted); line-height: 1.55; }

/* --- Right-side glowing orange circular graphic --- */
.why-circle {
  position: relative;
  z-index: 1;
  flex: 0 0 260px;
  width: 260px;
  height: 260px;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .15s;
}
.why-infographic.in-view .why-circle { opacity: 1; }
.why-circle-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.why-ring {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: calc(.3 + var(--ri, 0) * .1);
  transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1), opacity .3s ease, stroke-width .3s ease, filter .3s ease;
  transition-delay: calc(var(--ri, 0) * 90ms), 0s, 0s, 0s;
}
.why-infographic.in-view .why-ring { stroke-dashoffset: 0; }
.why-ring.is-active { opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--brand-a18)); }
.why-circle-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-a18), transparent 70%);
  border: 1px solid var(--border-brand);
  box-shadow: var(--brand-glow);
  display: flex; align-items: center; justify-content: center;
}
.why-circle-core::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px solid var(--brand-a18);
}
@media (prefers-reduced-motion: no-preference) {
  .why-circle-core::before { animation: whyCorePulse 3.2s ease-in-out infinite; }
}
.why-circle-core img { width: 48%; height: auto; filter: drop-shadow(0 0 10px var(--brand-a12)); }
@keyframes whyCorePulse {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%      { transform: scale(1.1); opacity: 0;  }
}

/* --- Per-ribbon connectors, computed in JS from real element positions --- */
.why-connectors {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.why-connector-path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .55;
  filter: drop-shadow(0 0 5px var(--brand-a12));
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1), opacity .3s ease, stroke-width .3s ease, filter .3s ease;
}
.why-connector-path.is-active { opacity: 1; stroke-width: 2.4; filter: drop-shadow(0 0 10px var(--brand-a18)); }

/* Tablet: keep ribbons + circle + connectors, just tighter */
@media (max-width: 1024px) {
  .why-circle { flex-basis: 190px; width: 190px; height: 190px; }
  .why-infographic { gap: 18px; }
}

/* Mobile: vertical timeline — drop the circle/connectors, stack ribbons */
@media (max-width: 768px) {
  .why-infographic { flex-direction: column; gap: 0; margin-top: 32px; opacity: 1; }
  .why-circle, .why-connectors { display: none; }
  .why-ribbons { gap: 0; width: 100%; }
  .why-ribbon { margin-bottom: 14px; opacity: 1; transition-delay: 0s; }
  .why-ribbon:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-start: 41px;
    bottom: -14px;
    width: 2px; height: 14px;
    background: linear-gradient(to bottom, var(--brand-a18), transparent);
  }
}

/* ============================================================
   WORK / PORTFOLIO PREVIEW — "Our Works"
   Editorial masonry collage of real project photos with a large,
   glowing central hub overlapping the grid — the hub clusters the
   real client logos, echoing a "brand ecosystem" visual concept.
   Tiles animate via the sitewide .reveal system; the hub scales/fades
   in and reveals its logos progressively via initWorkHub() in shared.js.
   ============================================================ */
.work-section {
  padding: 120px 0;
  overflow: clip;
  background-color: var(--bg);
  background-image: url('images/sec9_dark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-theme="light"] .work-section {
  background-image: url('images/sec9_light.png');
}

.work-collage {
  position: relative;
  margin-top: 48px;
}

.work-collage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 18px;
}

.work-tile {
  position: relative;
  grid-column: span 1;
  grid-row: span 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.work-tile.reveal { opacity: 0; translate: 0 22px; scale: .96; transition: opacity .6s ease, translate .6s ease, scale .6s ease, border-color var(--t), transform var(--t), box-shadow var(--t); }
.work-tile.reveal.visible { opacity: 1; translate: 0 0; scale: 1; }
.work-tile:hover { border-color: var(--border-brand); transform: translateY(-5px); box-shadow: var(--shadow-lg); z-index: 3; }
.work-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.work-tile:hover img { transform: scale(1.08); }

.work-tile--xl  { grid-column: span 2; grid-row: span 2; }
.work-tile--tall { grid-row: span 2; }
.work-tile--wide { grid-column: span 2; }

.work-tile figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.work-tile figcaption span { font-size: .95rem; font-weight: 800; }
.work-tile figcaption small { font-size: .74rem; font-weight: 700; color: var(--brand); }

/* --- Client logo strip: reuses the MARQUEE BAND mechanism above (same
   .marquee-band/.marquee-track/.marquee-group scroll math, same
   initMarquee() clone-to-fill-width logic, same reduced-motion and
   print handling) — this only adds the logo-specific box appearance.
   Sits between the section title and the project gallery, no longer
   overlapping it. */
.work-logos-band {
  background: transparent;
  border: none;
  /* .marquee-band (below) sets overflow:hidden to hide the marquee's
     off-screen clones — with padding:0 here, a hovered/tapped logo's
     lift + glow had nowhere to go and got clipped at the top/bottom
     edge. This padding gives that effect room without changing the
     horizontal clipping the ticker relies on. */
  padding: 20px 0;
  margin-top: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.work-logos-band .marquee-group { gap: 20px; padding-inline-end: 20px; }

.work-logo-item {
  flex: 0 0 auto;
  width: 148px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
/* Gated to real pointer/hover devices — on touch, a tap otherwise triggers
   this as a "sticky hover" that stays lifted/glowing after the tap, which
   read as the strip jumping/clipping on click. Desktop mouse hover is
   unaffected. */
@media (hover: hover) and (pointer: fine) {
  .work-logo-item:hover {
    border-color: var(--border-brand);
    box-shadow: var(--brand-glow);
    transform: translateY(-3px);
  }
}
.work-logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .work-tile { transition: none !important; }
}

/* Tablet */
@media (max-width: 1024px) {
  .work-collage-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; gap: 14px; }
  .work-logo-item { width: 128px; height: 72px; padding: 14px 18px; }
}

/* Mobile */
@media (max-width: 640px) {
  .work-collage-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 96px; gap: 10px; }
  .work-tile--xl { grid-column: span 2; grid-row: span 2; }
  .work-tile--tall { grid-row: span 2; }
  .work-tile--wide { grid-column: span 2; grid-row: span 1; }
  .work-logos-band { margin-top: 28px; }
  .work-logos-band .marquee-group { gap: 14px; padding-inline-end: 14px; }
  .work-logo-item { width: 108px; height: 60px; padding: 10px 14px; }
}

/* ============================================================
   CTA BAND
   .cta-band / .cta-band-inner is the shared component also used as-is
   by about.html's simpler CTA strip — its base rules must stay intact.
   The homepage's richer "final push" treatment (glass panel over the
   wave-glow + convergence-line decoration) is scoped to the extra
   .cta-band-home modifier so about.html is unaffected.
   ============================================================ */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--brand-a12), var(--brand-a05));
  border-top: 1px solid var(--border-brand);
  border-bottom: 1px solid var(--border-brand);
  padding: 64px 0;
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band-inner h3 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 800; margin-bottom: 6px; }
.cta-band-inner > div > p { color: var(--fg-muted); font-size: .95rem; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Homepage-only premium treatment --- */
.cta-band.cta-band-home {
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-2), var(--bg) 65%);
  padding: 110px 0;
}

.cta-panel {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 48px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--brand-a08), transparent 45%), var(--surface);
  border: 1px solid var(--border-brand);
  box-shadow: var(--shadow-lg), 0 0 90px -30px var(--brand-a18), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cta-title {
  font-size: clamp(1.65rem, 3.4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.28;
  color: var(--fg);
  max-width: 20ch;
}
.cta-desc {
  color: var(--fg-muted);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 46ch;
}
.cta-panel .cta-actions { justify-content: center; margin-top: 6px; gap: 14px; }
.btn-cta { padding: 16px 36px; font-size: 1.02rem; }
a.btn.btn-cta { box-shadow: 0 12px 32px -12px var(--brand-a18); }
a.btn.btn-cta:hover { box-shadow: 0 16px 40px -12px var(--brand-a18), var(--shadow-brand); }

/* Convergence accent — service pillars flowing into one CTA */
.cta-converge { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cta-converge .cc-line { fill: none; stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 6; opacity: .35; animation: dashFlow 2.4s linear infinite; }
.cta-converge .cc-node-ring { fill: none; stroke: var(--brand); stroke-width: 1.2; opacity: .55; }
.cta-converge .cc-node-dot { fill: var(--brand); }
.cta-converge .cc-core { fill: var(--brand); opacity: .16; animation: corePulse 3.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
[data-theme="light"] .cta-converge { opacity: .6; }
@media (max-width: 768px) { .cta-converge { display: none; } }

@media (max-width: 640px) {
  .cta-band.cta-band-home { padding: 80px 0; }
  .cta-panel { padding: 40px 24px; gap: 14px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding: 120px 0; background: var(--bg-2); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.contact-info .h2  { margin-bottom: 18px; }
.contact-info > p  { color: var(--fg-muted); font-size: .97rem; margin-bottom: 36px; line-height: 1.8; }
.cinfo-items       { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.cinfo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--fg);
  transition: color var(--t);
}
.cinfo-item:hover { color: var(--brand); }
.cinfo-icon { transition: background var(--t), box-shadow var(--t); }
.cinfo-item:hover .cinfo-icon { background: var(--brand-a18); box-shadow: var(--brand-glow); }
.cinfo-label { display: block; font-size: .74rem; color: var(--fg-muted); margin-bottom: 2px; }
.cinfo-val   { font-size: .92rem; font-weight: 500; }

/* Multi-step form */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.form-step  { display: none; flex-direction: column; gap: 18px; }
.form-step.active { display: flex; }
.form-step-header { margin-bottom: 6px; }
.form-step-num {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
}
.form-step-title { font-size: 1.15rem; font-weight: 800; color: var(--fg); }
.form-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 3px;
  margin-bottom: 28px;
  overflow: hidden;
}
.form-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width .4s ease;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld      { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-size: .78rem; font-weight: 600; color: var(--fg-muted); }
.fld input,
.fld select,
.fld textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  font-family: 'Tajawal', sans-serif;
  font-size: .92rem;
  padding: 13px 16px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  direction: inherit;
}
[data-theme="light"] .fld input,
[data-theme="light"] .fld select,
[data-theme="light"] .fld textarea {
  background: var(--bg-2);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--fg-dim); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-a12);
}
.fld input.error, .fld select.error, .fld textarea.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-a10);
}
.fld-error { font-size: .72rem; color: var(--error); margin-top: 2px; }
.fld select { appearance: none; cursor: pointer; }
.fld select option { background: var(--bg-2); color: var(--fg); }
.fld textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-nav { display: flex; gap: 12px; margin-top: 4px; }
.form-nav-split { justify-content: space-between; }
.form-note { font-size: .76rem; color: var(--fg-dim); text-align: center; margin-top: 12px; }
.form-review-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  min-height: 80px;
  margin-bottom: 16px;
  font-size: .86rem;
  color: var(--fg-muted);
  line-height: 2;
}
.form-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .85rem; }
.form-checkbox-label input[type="checkbox"] { margin-top: 3px; accent-color: var(--brand); }
.form-error-banner {
  display: none;
  color: var(--error);
  font-size: .85rem;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--error-a10);
  margin-bottom: 12px;
}
.hp-field { display: none; position: absolute; }

/* Form success */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 20px 0;
}
.form-success.show { display: flex; }
.success-icon { font-size: 3rem; }
.success-title { font-size: 1.4rem; font-weight: 900; color: var(--fg); }
.success-desc  { color: var(--fg-muted); font-size: .95rem; line-height: 1.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 88px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset-inline-end: 0; bottom: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--brand-a05) 0%, transparent 70%);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  position: relative;
}
.footer-logo-wrap {
  /* inline-flex (not flex) so the lockup shrinks to fit its own content
     and sits flush at the RTL/LTR start edge — same as the header logo —
     instead of stretching the full grid-column width, which is what let
     row-reverse pack the icon+text toward the wrong side with a big
     empty gap between it and the description/email below.
     gap/size below are copied verbatim from .nav-logo/.nav-logo-img (the
     header lockup), not re-eyeballed, so the two match exactly. */
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.5px;
  margin-bottom: 16px;
}
.footer-logo     { height: 56px; width: auto; object-fit: contain; display: block; }
.footer-logo-svg { width: 56px; height: 56px; flex-shrink: 0; display: none; }
.footer-brand-text {
  /* Same text scale as .nav-brand-name (the header) — was .85rem/.14em/
     1.25 here, a size that never actually matched the header's own
     .8rem/.12em/1.2, which is what made the footer lockup read as a
     different logo instead of the same one repeated. */
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--fg);
  display: block;
}
.footer-brand-text span { color: var(--brand); }
.footer-brand p {
  color: var(--fg-muted);
  font-size: .875rem;
  line-height: 1.8;
  max-width: 300px;
  margin-bottom: 14px;
}
.footer-email {
  color: var(--brand);
  font-size: .875rem;
  font-weight: 500;
  transition: opacity var(--t);
  display: block;
  max-width: 300px;
  /* The element carries dir="ltr" (keeps the address itself reading
     left-to-right) which also flips text-align:start to the LEFT even on
     this RTL page, stranding it away from the right-aligned logo/
     description above it. Force the visual side explicitly instead of
     relying on start/end, which is relative to THIS element's own
     direction, not the page's. */
  text-align: right;
  margin-bottom: 20px;
}
[dir="ltr"] .footer-email { text-align: left; }
.footer-email:hover { opacity: .75; }
.footer-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-size: 1rem;
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
}
.social-link:hover {
  border-color: var(--border-brand);
  color: var(--brand);
  background: var(--brand-a05);
  transform: translateY(-2px);
}
.social-link-text { font-size: .8rem; font-weight: 700; }
.footer-col h5 {
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--fg);
}
.footer-col ul   { display: flex; flex-direction: column; gap: 10px; }
.footer-col a    { color: var(--fg-muted); font-size: .875rem; transition: color var(--t); }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p  { color: var(--fg-dim); font-size: .76rem; }
.footer-brand-tag { color: var(--brand); font-size: .68rem; font-weight: 700; letter-spacing: .16em; }
.footer-bottom-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom-links a { color: var(--fg-dim); font-size: .76rem; transition: color var(--t); }
.footer-bottom-links a:hover { color: var(--brand); }
.footer-newsletter { margin-top: 22px; }
.footer-newsletter-label { font-size: .78rem; color: var(--fg-muted); margin-bottom: 8px; }
.footer-newsletter-row { display: flex; gap: 6px; }
.newsletter-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-family: 'Tajawal', sans-serif;
  font-size: .82rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--t);
}
.newsletter-input:focus { border-color: var(--brand); }
.newsletter-submit {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 9px 14px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: background var(--t);
}
.newsletter-submit:hover { background: var(--brand-h); }

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-float {
  position: fixed;
  inset-inline-end: 24px;
  bottom: 28px;
  z-index: 800;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.4);
  transition: transform var(--t), box-shadow var(--t);
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(37,211,102,.5); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* ============================================================
   RESPONSIVE — 1200px
   ============================================================ */
@media (max-width:1200px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width:1024px) {
  .about-grid   { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  /* 2 explicit columns with 4 items produced a dangling empty cell and an
     orphaned last row (the 1200px breakpoint's :last-child full-span rule
     had nowhere clean to sit) — stack to a single column here instead,
     matching the 768px behavior, so nothing floats or leaves a gap. */
  .footer-grid  { grid-template-columns: 1fr; gap: 32px; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 22px; }
  .stats-grid .stat:last-child { grid-column: 1 / -1; }
  .stat + .stat::before { display: none; }
  .stat { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 16px; }
  .nav-links    { display: none; }
  .nav-toggle   { display: flex; }
  .nav-cta      { display: none; }
  .sf-options   { grid-template-columns: 1fr; }
  .sf-card      { padding: 36px 28px; }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width:768px) {
  .hero         { padding: calc(var(--nav-h) + 40px) 20px 80px; }
  .hero-badges  { display: none; }
  .tabs         { gap: 8px; }
  .tab          { font-size: .78rem; padding: 8px 14px; }
  .tab-icon     { display: none; }
  .scards       { grid-template-columns: 1fr; }
  .scard-wide   { grid-column: auto; max-width: 100%; }
  .contact-form { padding: 26px 20px; }
  .form-row     { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-band-inner { flex-direction: column; text-align: center; }
  .acard:hover  { transform: none; }
  .steps-wrap   { overflow: visible; }
  .steps        { flex-direction: column; min-width: 0; gap: 6px; }
  .step         { width: 100%; max-width: 380px; margin: 0 auto; padding: 22px 20px; }
  .step-connector { display: none; }
  .mega-menu-wrap { display: none !important; }
  .nav-logo-img, .nav-logo-svg { height: 44px; width: 44px; }
  .nav-logo-img { width: auto; }
  .nav-brand-name { font-size: .72rem; }
  .footer-logo-img, .footer-logo, .footer-logo-svg { height: 44px; width: 44px; }
  .footer-logo { width: auto; }
  .footer-brand-text { font-size: .72rem; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width:480px) {
  .wrap    { padding: 0 18px; }
  .h2      { font-size: 1.8rem; }
  .hero-title { font-size: 2.5rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  /* Keep the stats row horizontal on mobile instead of stacking each stat
     under the previous one — same visual rhythm as desktop, just scaled
     down, with horizontal scroll for whatever doesn't fit. */
  .stats-grid  {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding: 16px;
  }
  .stats-grid::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 152px; scroll-snap-align: start; padding: 22px 14px; }
  .stat-val { font-size: clamp(1.7rem, 6vw, 2.2rem); min-height: 2.6rem; }
  .stat-val-text { font-size: clamp(.92rem, 3.4vw, 1.05rem); }
  .stat p { font-size: .76rem; }
  .about, .services, .service-finder, .process, .why-gv, .contact { padding-top: 80px; padding-bottom: 80px; }
  .footer      { padding-top: 64px; }
  .contact-form { padding: 20px 16px; }
  .section-hd  { margin-bottom: 36px; }
  .services-footer { flex-direction: column; text-align: center; }
  .about-cta   { flex-direction: column; align-items: flex-start; }
  .sf-actions  { flex-direction: column; }
}

/* ============================================================
   WAVE / AMBIENT BACKGROUND SYSTEM
   Subtle orange wave accents — brand identity layer.
   ============================================================ */

/* Intensities per theme */
:root {
  --wave-lo:  .07;
  --wave-hi:  .13;
  --wave-line: rgba(232,117,26,.08);
  --wave-glow-c: rgba(232,117,26,.12);
}
[data-theme="light"] {
  --wave-lo:  .04;
  --wave-hi:  .07;
  --wave-line: rgba(217,104,16,.05);
  --wave-glow-c: rgba(217,104,16,.07);
}

/* Keyframes */
@keyframes waveDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(14px,-10px) scale(1.03); }
  66%      { transform: translate(-9px,5px) scale(.97); }
}
@keyframes waveFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes wavePulse {
  0%,100% { opacity: var(--wave-lo); }
  50%      { opacity: var(--wave-hi); }
}
@keyframes waveRotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes waveTrace {
  from { stroke-dashoffset: 1200; }
  to   { stroke-dashoffset: 0; }
}
@keyframes waveOrbit {
  0%,100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(20px) translateY(-12px); }
  50%      { transform: translateX(0) translateY(-20px); }
  75%      { transform: translateX(-20px) translateY(-10px); }
}

/* Container */
.wave-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.wave-layer > * { position: absolute; }

/* Glow blobs */
.wave-glow {
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--brand) 0%, transparent 70%);
  opacity: var(--wave-lo);
}
.wave-glow-xl { width: 800px; height: 500px; animation: wavePulse 10s ease-in-out infinite; }
.wave-glow-lg { width: 500px; height: 340px; animation: wavePulse 8s ease-in-out infinite; }
.wave-glow-sm { width: 260px; height: 180px; animation: wavePulse 6s ease-in-out infinite; }
.wave-glow-drift { animation: wavePulse 8s ease-in-out infinite, waveDrift 22s ease-in-out infinite; }

/* SVG wave canvas */
.wave-svg {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.wave-path {
  fill: none;
  stroke: var(--brand);
  stroke-opacity: .07;
  stroke-linecap: round;
}
[data-theme="light"] .wave-path { stroke-opacity: .04; }

.wave-path-anim {
  stroke-dasharray: 1200;
  animation: waveTrace 4s ease-out forwards;
}
.wave-arc-1 { animation: waveDrift 28s ease-in-out infinite; }
.wave-arc-2 { animation: waveDrift 36s ease-in-out infinite reverse; }
.wave-arc-3 { animation: waveOrbit 44s ease-in-out infinite; }

/* Dot particle */
.wave-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--brand);
  animation: wavePulse 5s ease-in-out infinite;
}

/* Sections that use wave backgrounds */
.stats         { position: relative; overflow: hidden; }
.about         { position: relative; overflow: hidden; }
.why-gv        { position: relative; overflow: hidden; }
.cta-band      { position: relative; overflow: hidden; }
.footer        { position: relative; overflow: hidden; }

/* Icon styles — professional SVG icon containers */
.icon-box {
  width: 44px; height: 44px;
  border-radius: var(--r);
  background: var(--brand-a08);
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t);
}
.icon-box:hover { background: var(--brand-a18); box-shadow: var(--brand-glow); }
.icon-box svg   { width: 20px; height: 20px; }

/* Stat icon (in stats section) */
.stat-icon {
  position: relative;
  z-index: 1;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand-a12), var(--brand-a05));
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin: 0 auto 16px;
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 20px var(--brand-a12), inset 0 1px 0 rgba(255,255,255,.08);
}
.stat-icon::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.6s ease-in-out infinite;
}
.stat:nth-of-type(2) .stat-icon::before { animation-delay: -.7s; }
.stat:nth-of-type(3) .stat-icon::before { animation-delay: -1.4s; }
.stat:nth-of-type(4) .stat-icon::before { animation-delay: -2.1s; }
.stat:nth-of-type(5) .stat-icon::before { animation-delay: -2.8s; }
.stat-icon svg { width: 22px; height: 22px; }
.stat {
  position: relative;
  z-index: 0;
}
.stat::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 66%;
  background: linear-gradient(to top, var(--brand-a18), transparent);
  pointer-events: none;
  z-index: -1;
}

/* About card icon */
.acard-icon {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--brand-a08);
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--brand-a05), 0 0 14px var(--brand-a12);
}
.acard-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--border-brand);
  animation: nodeRingPulse 3.6s ease-in-out infinite;
}
.acard:nth-of-type(2) .acard-icon::before { animation-delay: -1s; }
.acard:nth-of-type(3) .acard-icon::before { animation-delay: -2s; }
.acard-icon svg { width: 20px; height: 20px; }

/* Contact info icon */
.cinfo-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--brand-a08);
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.cinfo-icon svg { width: 18px; height: 18px; }

/* Mega menu & mobile nav icon */
.mm-item-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--brand-a08);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
  transition: background var(--t);
}
.mm-item:hover .mm-item-icon { background: var(--brand-a18); }
.mm-item-icon svg { width: 16px; height: 16px; }

/* Tab icon */
.tab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: inherit;
}
.tab-icon svg { width: 16px; height: 16px; }

/* Panel header icon */
.panel-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--brand-a12);
  border: 1px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.panel-icon svg { width: 20px; height: 20px; }

/* Hero badge icon */
.hbadge-icon {
  width: 16px; height: 16px;
  color: var(--brand);
  display: inline-flex; align-items: center;
}
.hbadge-icon svg { width: 14px; height: 14px; }

/* Service finder result icon */
.sf-result-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--brand-a12);
  border: 1.5px solid var(--border-brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin: 0 auto 20px;
}
.sf-result-icon svg { width: 28px; height: 28px; }

/* Form success icon */
.success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--success-a12);
  border: 1.5px solid var(--success-a30);
  display: flex; align-items: center; justify-content: center;
  color: var(--success);
  margin: 0 auto 16px;
}
.success-icon svg { width: 28px; height: 28px; }

/* Sub icon in mobile nav */
.sub-icon {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--brand-a08);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.sub-icon svg { width: 13px; height: 13px; }

/* Social icon */
.social-link svg { width: 16px; height: 16px; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .marquee-track { animation: none; }
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar, .whatsapp-float, .mobile-nav, .hero-scroll, .marquee-band { display: none; }
  body { background: #fff; color: #000; }
}