/* ===================================================================
   8toZ — Brand Identity Override
   Applies the official 8toZ visual language on top of style.css.
   Palette:
     Deep Forest   #003427   Sage          #094732
     Emerald       #0E5642   Acid Lime     #B9E825
     Frozen Forest #CDE6B2   Herbal Tea    #F8FEE4
   Typography: Funnel Display + Inter (LTR), Thmanyah Sans (AR)
   =================================================================== */

/* ---------- WEB FONTS ---------- */
@font-face{font-family:"Funnel Display";src:url("../brand/fonts/funnel/FunnelDisplay-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("../brand/fonts/funnel/FunnelDisplay-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("../brand/fonts/funnel/FunnelDisplay-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("../brand/fonts/funnel/FunnelDisplay-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Display";src:url("../brand/fonts/funnel/FunnelDisplay-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:"Inter 8toz";src:url("../brand/fonts/inter/Inter-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter 8toz";src:url("../brand/fonts/inter/Inter-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter 8toz";src:url("../brand/fonts/inter/Inter-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter 8toz";src:url("../brand/fonts/inter/Inter-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter 8toz";src:url("../brand/fonts/inter/Inter-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter 8toz";src:url("../brand/fonts/inter/Inter-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}

@font-face{font-family:"Thmanyah";src:url("../brand/fonts/thmanyah/thmanyahsans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../brand/fonts/thmanyah/thmanyahsans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../brand/fonts/thmanyah/thmanyahsans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../brand/fonts/thmanyah/thmanyahsans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../brand/fonts/thmanyah/thmanyahsans-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* SpaceGrotesk — brand's supplementary display font */
@font-face{font-family:"Space Grotesk";src:url("../brand/fonts/space-grotesk/SpaceGrotesk-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../brand/fonts/space-grotesk/SpaceGrotesk-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../brand/fonts/space-grotesk/SpaceGrotesk-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../brand/fonts/space-grotesk/SpaceGrotesk-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../brand/fonts/space-grotesk/SpaceGrotesk-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

/* JetBrains Mono — brand monospace for code/numeric displays */
@font-face{font-family:"JetBrains Mono";src:url("../brand/fonts/jetbrains/JetBrainsMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../brand/fonts/jetbrains/JetBrainsMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../brand/fonts/jetbrains/JetBrainsMono-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* ---------- BRAND VARIABLES ---------- */
:root,
[data-theme="dark"]{
  /* Core palette */
  --bz-deep:        #003427;
  --bz-sage:        #094732;
  --bz-emerald:     #0E5642;
  --bz-lime:        #B9E825;
  --bz-lime-soft:   #CDE6B2;
  --bz-cream:       #F8FEE4;
  --bz-ink:         #012018;
  --bz-ink-2:       #06281E;

  /* Map the existing system vars onto the 8toZ palette */
  --primary:        #B9E825;
  --primary-light:  #D5F15A;
  --primary-dark:   #94BE1A;
  --accent:         #CDE6B2;
  --accent-light:   #F8FEE4;
  --gold:           #D5F15A;

  --primary-rgb:      185,232,37;
  --primary-dark-rgb: 148,190,26;
  --accent-rgb:       205,230,178;

  --cta-bg-from:  #B9E825;
  --cta-bg-to:    #94BE1A;
  --cta-text:     #012018;
  --cta-text-soft:#003427;
  --cta-btn-bg:   #012018;
  --cta-btn-text: #CDE6B2;

  --text-on-primary: #012018;

  --gradient:       linear-gradient(135deg,#B9E825 0%,#CDE6B2 100%);
  --gradient-text:  linear-gradient(135deg,#D5F15A 0%,#F8FEE4 60%,#B9E825 100%);
  --gradient-soft:  linear-gradient(135deg,rgba(185,232,37,.14) 0%,rgba(205,230,178,.08) 100%);
  --glow:           radial-gradient(ellipse at center,rgba(185,232,37,.35) 0%,transparent 65%);

  /* Surfaces */
  --bg:         #012018;
  --bg-alt:     #06281E;
  --bg-darker:  #000f0A;
  --surface:    #0A3528;
  --surface-2:  #0E4232;
  --surface-3:  #124D3B;

  --border:        rgba(205,230,178,.10);
  --border-strong: rgba(205,230,178,.22);

  --text:        #F8FEE4;
  --text-muted:  rgba(248,254,228,.72);
  --text-light:  rgba(248,254,228,.50);
  --text-on-dark:#F8FEE4;

  --shadow-glow: 0 0 80px rgba(185,232,37,.35);

  /* Typography — Funnel Display for display, Inter for body;
     Thmanyah replaces Latin for Arabic content via [dir="rtl"] rule below. */
  --font:         "Inter 8toz","Inter",-apple-system,system-ui,sans-serif;
  --font-display: "Funnel Display","Inter 8toz","Inter",sans-serif;
  --font-serif:   "Funnel Display","Inter 8toz",sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Light theme override — Herbal cream background with deep forest ink */
[data-theme="light"]{
  --bg:         #F8FEE4;
  --bg-alt:     #EEF8D5;
  --bg-darker:  #CDE6B2;
  --surface:    #FFFFFF;
  --surface-2:  #F3FADE;
  --surface-3:  #EEF8D5;
  --border:        rgba(0,52,39,.12);
  --border-strong: rgba(0,52,39,.22);
  --text:        #003427;
  --text-muted:  rgba(0,52,39,.72);
  --text-light:  rgba(0,52,39,.5);
  --text-on-primary: #003427;
  --primary:        #003427;
  --primary-light:  #0E5642;
  --primary-dark:   #012018;
  --accent:         #B9E825;
  --accent-light:   #CDE6B2;
  --primary-rgb:      0,52,39;
  --primary-dark-rgb: 1,32,24;
  --accent-rgb:       185,232,37;
  --gradient:      linear-gradient(135deg,#003427 0%,#0E5642 100%);
  --gradient-text: linear-gradient(135deg,#003427 0%,#0E5642 60%,#094732 100%);
  --shadow-lg: 0 30px 60px -10px rgba(0,52,39,.18);
}

/* ---------- ARABIC TYPOGRAPHY ---------- */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button{
  font-family:"Thmanyah","Tajawal","Inter 8toz",system-ui,sans-serif;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6{
  font-family:"Thmanyah","Tajawal",sans-serif;
  letter-spacing:0;
}

body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -20%,rgba(185,232,37,.09),transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 30%,rgba(14,86,66,.35),transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 60%,rgba(185,232,37,.05),transparent 60%);
}

/* 8toZ brand pattern — tile reproduces the identity kit's interlocking
   mark-glyph motif. Two copies of the brand mark are stacked (second
   rotated 180°) inside a 200×280 tile, so when it repeats across the
   viewport the marks interlock exactly like Pattern.pdf. The SVG embeds
   the mark PNG as a base64 data URI, so it works even when SVG background
   images are sandboxed from external resources. */
/* 8toZ brand pattern — vertical strips with gap, inspired by the "strip"
   variation in the identity kit (Pattern.pdf page 2). Each tile is a
   mark-wide column (one upright + one inverted mark stacked, interlocked)
   followed by a wider gap. When repeated horizontally the result is
   parallel columns of brand marks separated by negative space — a far
   more sophisticated backdrop than the dense all-over tiling. */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.22;
  background-image:url("../brand/pattern-tile.svg");
  background-size:420px 448px;
  background-repeat:repeat;
  background-position:0 0;
}
/* ============================================================
   REAL ROOT CAUSE of mobile pinch-zoom crash (confirmed via
   bisection on 2026-10-15):

   .svc-detail-overlay has:
     position: fixed; inset: 0;        → viewport-filling layer
     backdrop-filter: blur(14px);      → requires GPU paint buffer
     opacity: 0; pointer-events: none; → hidden but STILL RENDERED

   The 6 service modals in DOM each allocate a viewport-sized GPU
   layer with backdrop-filter running on it. At rest ≈18MB; during
   pinch-zoom these buffers scale quadratically → ~160MB just from
   hidden modals → Chrome mobile OOM crash.

   Fix: force display:none on closed modals so no layer is allocated.
   The 'open' class gets display:flex restored.
   ============================================================ */
.svc-detail-overlay:not(.open){display:none !important;}

/* ============================================================
   MOBILE PINCH-ZOOM CRASH FIX
   Chrome mobile crashes during pinch-zoom when GPU paint memory
   exceeds the per-tab ceiling. Root causes found in style.css:
     1. .hero-blob × 3 — filter:blur(100px) on 350-500px animated
        elements. Blur buffers scale QUADRATICALLY with zoom
        (3 blobs × 15MB each × 9× at 3× zoom ≈ 400MB → OOM).
     2. backdrop-filter × 10+ instances — each one forces the
        browser to re-blur whatever's behind it at every zoom step.
     3. body background-attachment:fixed over stacked radials.
     4. .service-card::before filter:blur(80px) × 6 cards.
   Fix is surgical: strip ONLY these GPU-heavy effects on mobile.
   Everything else — hero float animation, images, masks, logos —
   stays untouched.
   ============================================================ */
@media(max-width:900px){
  /* 1) The three giant blurred animated hero blobs — THE main OOM
        trigger. 100px blur on 500px elements, times three, animated. */
  .hero-blob{display:none !important;}

  /* 2) Service card inner-glow blur */
  .service-card::before,
  .service-card::after{filter:none !important;}

  /* 3) backdrop-filter is the #2 killer. Each use forces real-time
        re-blur of the background during pinch-zoom. Strip ALL. */
  *,*::before,*::after{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* 4) Body fixed-attachment radials — scroll-attached is cheap at zoom */
  body{background-attachment:scroll !important;}
  /* Pattern stays active on mobile (the real crash was the modals, not
     the pattern) — kept at its default fixed/viewport-size layer. */
}
.sections-flow,.header,.footer{position:relative;z-index:1;}

/* ---------- BRAND LOGO (fallback, when admin hasn't uploaded one) ---------- */
.logo-brand:has(.logo-brand-fallback){
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  transform:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.logo-brand-fallback{
  height:56px !important;
  max-width:210px !important;
  width:auto;
  filter:drop-shadow(0 4px 12px rgba(185,232,37,.35));
}
.header.scrolled .logo-brand:has(.logo-brand-fallback){transform:none !important;padding:0 !important;}
.header.scrolled .logo-brand-fallback{height:46px !important;}
@media(max-width:900px){
  .logo-brand-fallback{height:40px !important;max-width:150px !important;}
  /* Vertically center ALL header items inside the 80px bar — logo and
     hamburger were sticking to the top edge on phones because the logo
     plate had residual top padding/transform. Reset to clean flex-center. */
  .header .nav{align-items:center !important;height:var(--header-h);}
  .header .logo,
  .header .logo-brand,
  .header .nav-actions,
  .header .menu-toggle,
  .header .icon-btn{
    align-self:center !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:none !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* Footer logo — reset the "badge plate" treatment style.css applies to any
   .logo that contains a .logo-img. In the footer we want a plain, modest
   logo mark sitting above the tagline — no card, no shadow halo, no
   downward translate (which was pushing it over the paragraph below). */
.logo-brand-footer{
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  transform:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  display:inline-block !important;
  margin-bottom:20px;
  position:static !important;
}
.logo-brand-footer .logo-img{
  height:48px !important;
  max-width:180px !important;
  width:auto !important;
  filter:drop-shadow(0 4px 12px rgba(185,232,37,.3));
  display:block;
}
.footer-about p{margin-top:6px;}
@media(max-width:900px){.logo-brand-footer .logo-img{height:40px !important;max-width:150px !important;}}

/* ---------- HEADER / NAV — opaque deep-forest bar so page content
   never shows through the header strip. */
.header{
  background:#003427;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(185,232,37,.14);
}
.header.scrolled{
  background:#002b20;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:rgba(185,232,37,.22);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
.logo-text{
  font-family:var(--font-display);
  font-weight:900;
  background:linear-gradient(135deg,#F8FEE4 0%,#B9E825 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Plain cream nav links — no pill container, equal spacing, lime hover.
   Matches the clean typography-first nav in the brand reference. */
.nav-menu{
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;
  gap:4px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav-menu a{
  color:#F8FEE4;
  font-family:var(--font-display);
  font-weight:500;
  font-size:15px;
  padding:10px 18px;
  background:transparent;
  position:relative;
  transition:color .2s;
}
html[dir="rtl"] .nav-menu a{font-family:"Thmanyah",sans-serif;font-weight:500;font-size:15px;}
.nav-menu a:hover{background:transparent;color:#B9E825;}
.nav-menu a.active{
  background:transparent;
  color:#B9E825;
}
.nav-menu a.active::after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:4px;
  height:2px;
  background:#B9E825;
  border-radius:2px;
}

.nav-dropdown{
  background:rgba(0,52,39,.98);
  border-color:rgba(185,232,37,.3);
}

/* Icon buttons (theme toggle, hamburger) — plain cream, no pill */
.icon-btn{
  background:transparent;
  border:none;
  color:#F8FEE4;
  border-radius:0;
  width:44px;height:44px;
}
.icon-btn:hover{
  background:transparent;
  color:#B9E825;
  border:none;
  transform:none;
}
.lang-switch{
  padding:0 12px;height:44px;display:inline-grid;place-items:center;
  border-radius:0;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;font-size:13px;
  background:transparent;border:none;color:#F8FEE4;
}
.lang-switch:hover{background:transparent;color:#B9E825;}

/* Header CTA — compact lime pill sized to sit alongside the nav links.
   align-self:center keeps it vertically centered inside the 80px header
   instead of sticking to the top edge. */
.nav-cta{
  --bz-notch:8px;
  padding:8px 14px;
  font-size:12.5px;
  gap:6px;
  line-height:1.2;
  height:36px;
  align-self:center;
}
.nav-cta svg{width:13px;height:13px;}
html[dir="rtl"] .nav-cta{font-size:13px;padding:8px 14px;}

.nav-actions{gap:14px;align-items:center;}

/* ---------- BUTTONS — brand chamfered-corner style ----------
   Signature 8toZ shape: two diagonal cuts on opposite corners — TOP-LEFT and
   BOTTOM-RIGHT in LTR, mirrored in RTL so the chamfer always sits on the
   "lead" side opposite the trailing arrow. The other two corners are
   perfectly sharp 90°. */
.btn{
  --bz-notch:12px;
  border-radius:0 !important;      /* defeat the 100px pill-radius from style.css */
  font-family:var(--font-display);
  letter-spacing:.01em;
  text-transform:none;
  font-weight:700;
  font-size:14px;
  padding:14px 24px;
  gap:12px;
  position:relative;
  isolation:isolate;
  overflow:visible;        /* keep the shimmer disabled since clip-path replaces overflow:hidden */
  clip-path:polygon(
    var(--bz-notch) 0,
    100% 0,
    100% calc(100% - var(--bz-notch)),
    calc(100% - var(--bz-notch)) 100%,
    0 100%,
    0 var(--bz-notch)
  );
  transition:transform .25s cubic-bezier(.4,0,.2,1),filter .25s;
}
.btn::before{display:none;}  /* kill the diagonal shine sweep (incompatible with clip-path) */
.btn svg{width:16px;height:16px;}
/* Hero / large CTAs are a 1.3× proportional scale-up of the header .nav-cta
   so the two "Start your project" buttons look like a matched pair — same
   chamfer ratio (~22% of height), same crisp 90° cut, same geometry.
   Header:  h36 / notch8 / pad8-14 / font12.5 / svg13
   Hero:    h46 / notch10 / pad10-18 / font15 / svg15
*/
.btn-lg{
  --bz-notch:10px;
  padding:10px 18px;
  font-size:15px;
  gap:8px;
  line-height:1.2;
  height:46px;
}
.btn-lg svg{width:15px;height:15px;}
html[dir="rtl"] .btn-lg{font-size:15.5px;}
html[dir="rtl"] .btn{font-family:"Thmanyah","Tajawal",sans-serif;font-weight:700;font-size:14.5px;}
html[dir="rtl"] .btn-lg{font-size:15.5px;}

/* RTL: mirror the chamfer so the cut corners stay on the opposite side of
   the arrow (which is physically on the left in RTL). */
html[dir="rtl"] .btn{
  clip-path:polygon(
    0 0,
    calc(100% - var(--bz-notch)) 0,
    100% var(--bz-notch),
    100% 100%,
    var(--bz-notch) 100%,
    0 calc(100% - var(--bz-notch))
  );
}

.btn-primary{
  background:#B9E825;
  color:#012018;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:#D5F15A;
  /* No drop-shadow filter here — a soft shadow around a clipped shape
     visually rounds the sharp 90° corners. A flat hover keeps the two
     non-chamfered corners perfectly crisp. */
  box-shadow:none !important;
  filter:none !important;
}

/* Secondary — outlined chamfered.
   clip-path on a bordered element also cuts the border, so we fake the stroke
   by layering a lime fill UNDER a slightly inset dark fill. The lime visible
   around the inner shape IS the border. */
.btn-secondary{
  background:#B9E825;
  color:#F8FEE4;
  border:none;
  padding:16px 26px;         /* a hair wider so the inner inset still has room */
}
.btn-secondary::after{
  content:"";
  position:absolute;
  inset:1.5px;
  background:#003427;
  clip-path:polygon(
    calc(var(--bz-notch) - 1px) 0,
    100% 0,
    100% calc(100% - calc(var(--bz-notch) - 1px)),
    calc(100% - calc(var(--bz-notch) - 1px)) 100%,
    0 100%,
    0 calc(var(--bz-notch) - 1px)
  );
  z-index:-1;
  transition:background .25s;
}
html[dir="rtl"] .btn-secondary::after{
  clip-path:polygon(
    0 0,
    calc(100% - calc(var(--bz-notch) - 1px)) 0,
    100% calc(var(--bz-notch) - 1px),
    100% 100%,
    calc(var(--bz-notch) - 1px) 100%,
    0 calc(100% - calc(var(--bz-notch) - 1px))
  );
}
.btn-secondary:hover{transform:translateY(-2px);color:#B9E825;}
.btn-secondary:hover::after{background:#06281E;}

.btn-ghost{color:#F8FEE4;background:transparent;}
.btn-ghost:hover{background:rgba(185,232,37,.08);color:#B9E825;}

/* The arrow icon sits at the END of the label (after text in DOM order) and
   gets a hair of extra breathing room so the two feel like separate chambers
   inside the chamfered shell. svg_icon() already picks arrow-left for RTL so
   no mirror transform is needed. */
.btn > svg:last-child{
  margin-inline-start:4px;
}

/* ---------- ICONS (reusable tiles) ----------
   The feature/process/contact-icon pattern was six different sizes and
   rounded shapes. Normalise to a single geometric square-with-notch feel
   (rounded 14px) and consistent 24px glyphs so icon tiles across the page
   read as one family. */
.feature-icon,
.process-icon,
.contact-icon,
.stat-icon,
.about-badge-icon{
  width:52px;height:52px;
  border-radius:14px;
  display:grid;place-items:center;
  flex-shrink:0;
  position:relative;
  transition:transform .3s ease;
}
.feature-icon svg,
.process-icon svg,
.contact-icon svg,
.stat-icon svg,
.about-badge-icon svg{width:24px;height:24px;}

.feature-icon{
  background:linear-gradient(135deg,#B9E825 0%,#D5F15A 100%);
  color:#012018;
  box-shadow:0 10px 28px -12px rgba(185,232,37,.6);
}
.feature:hover .feature-icon{transform:scale(1.08) rotate(-4deg);}

.stat-icon{
  background:rgba(185,232,37,.1);
  color:#B9E825;
  border:1px solid rgba(185,232,37,.3);
}

.process-icon{
  background:rgba(185,232,37,.1);
  color:#B9E825;
  border:1px solid rgba(185,232,37,.25);
}

.contact-icon{
  background:linear-gradient(135deg,#B9E825 0%,#D5F15A 100%);
  color:#012018;
  box-shadow:0 10px 28px -12px rgba(185,232,37,.5);
}

.about-badge-icon{
  background:rgba(185,232,37,.14);
  color:#B9E825;
}

/* ---------- BADGES & SECTION TAGS ---------- */
.badge{
  background:rgba(185,232,37,.08);
  color:#CDE6B2;
  border:1px solid rgba(185,232,37,.35);
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
}
html[dir="rtl"] .badge{font-family:"Thmanyah",sans-serif;letter-spacing:0;text-transform:none;}
.badge .dot{background:#B9E825;box-shadow:0 0 0 4px rgba(185,232,37,.25);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(185,232,37,.25);}50%{box-shadow:0 0 0 10px rgba(185,232,37,0);}}

.section-tag{
  background:rgba(185,232,37,.08);
  color:#CDE6B2;
  border:1px solid rgba(185,232,37,.3);
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;
}
html[dir="rtl"] .section-tag{font-family:"Thmanyah",sans-serif;letter-spacing:0;text-transform:none;}

/* ---------- HEADLINES ----------
   Arabic (Thmanyah) renders visually heavier than Latin at the same weight
   and size — scale it down and drop one weight step so headlines don't dwarf
   the layout. Keep Latin unchanged. */
.h-section{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(1.75rem,3vw,2.75rem);
  line-height:1.2;
}
.h-section + .lead{font-size:clamp(.95rem,1.2vw,1.1rem);}

html[dir="rtl"] .h-section{
  font-family:"Thmanyah",sans-serif;
  font-weight:700;
  letter-spacing:0;
  font-size:clamp(1.5rem,2.6vw,2.3rem);
  line-height:1.35;
}
html[dir="rtl"] h3{font-weight:700;font-size:1.15rem;}
html[dir="rtl"] h4{font-weight:700;font-size:1rem;}
html[dir="rtl"] .stat-num{font-size:2.2rem;font-weight:800;line-height:1;}
html[dir="rtl"] .stat-label{font-size:.9rem;font-weight:500;}
html[dir="rtl"] .process-number{font-size:1.1rem;}
html[dir="rtl"] .testimonial p{font-size:.95rem;line-height:1.85;}
html[dir="rtl"] .faq-question{font-size:1rem;font-weight:700;}
html[dir="rtl"] .about-badge strong{font-size:.95rem;font-weight:700;}
html[dir="rtl"] .about-badge span{font-size:.78rem;}
html[dir="rtl"] .section-header .lead{font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.75;}
html[dir="rtl"] body{font-weight:400;}
html[dir="rtl"] strong,html[dir="rtl"] b{font-weight:700;}

/* Inline brand logo inside a heading (used by "لماذا تختار [8toZ]")
   Uses block-level flex (not inline-flex) so the section-tag badge above
   it stacks on its own line instead of sitting next to the heading. */
.h-with-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.h-brand-label{display:inline-block;line-height:1;}
.h-brand-logo{
  /* Scaled up so the logo lockup reads balanced next to the heading
     text instead of appearing as a tiny inline chip. */
  height:1.5em;
  width:auto;
  max-height:90px;
  display:inline-block;
  vertical-align:middle;
  filter:drop-shadow(0 4px 14px rgba(185,232,37,.4));
  transform:translateY(2px);
}
html[dir="rtl"] .h-brand-logo{height:1.4em;max-height:84px;}
@media(max-width:640px){.h-brand-logo{max-height:56px;height:1.3em;}}
.gradient-text{background:linear-gradient(135deg,#B9E825 0%,#F8FEE4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.gradient-italic{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  color:#B9E825;
  background:none;-webkit-text-fill-color:#B9E825;
}
html[dir="rtl"] .gradient-italic{font-family:"Thmanyah",sans-serif;font-style:normal;}

/* ===================================================================
   HERO — brand splash
   Left: 3D render of the 8toZ hex sculpture
   Right: bilingual lockup headline + CTA
   =================================================================== */
.hero{
  min-height:100vh;
  padding-top:calc(var(--header-h) + 40px);
  padding-bottom:60px;
  text-align:start;
  overflow:hidden;
  /* The hero's bottom color is the SAME as --bg below it, so when the image
     fades out at the bottom there is no color seam between the hero section
     and the sections below. The deep-forest tint lives up top and fades
     downward into the body color. */
  background:linear-gradient(180deg,#003427 0%,#012018 70%,#012018 100%);
  --text:#F8FEE4;
  --text-muted:rgba(248,254,228,.76);
  --border:rgba(185,232,37,.14);
}
.hero-bg{
  background-color:transparent;
}
.hero-bg::before{
  background:
    radial-gradient(ellipse 70% 80% at 15% 40%,rgba(185,232,37,.18) 0%,transparent 55%),
    radial-gradient(ellipse 60% 60% at 90% 20%,rgba(14,86,66,.5) 0%,transparent 60%),
    linear-gradient(180deg,rgba(0,52,39,.4) 0%,rgba(1,32,24,0) 70%);
}
.hero-bg.has-image::before{
  background:
    radial-gradient(ellipse 70% 80% at 15% 50%,rgba(185,232,37,.18) 0%,transparent 55%),
    linear-gradient(180deg,rgba(0,52,39,.55) 0%,rgba(1,32,24,.82) 100%);
}
.hero-bg-pattern{
  background-image:
    linear-gradient(rgba(185,232,37,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(185,232,37,.045) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 70% 40%,black 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,black 20%,transparent 70%);
}
.hero-blob.b1{background:rgba(185,232,37,.22);top:30%;right:50%;width:600px;height:600px;}
.hero-blob.b2{background:rgba(14,86,66,.5);bottom:-10%;left:-10%;width:500px;height:500px;}
.hero-blob.b3{background:rgba(205,230,178,.08);top:10%;right:5%;width:400px;height:400px;}

/* Full brand hero composition image — contains the 3D sculpture + bilingual
   headline together. Floats with the same gentle bob as before.
   All four edges fade to transparent via a combined mask so the image melts
   into the hero background instead of ending on a visible rectangle. */
.hero::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(100vw,1600px);
  aspect-ratio:2.4/1;
  background-image:url("../brand/3d/hero-composition.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  z-index:1;
  pointer-events:none;
  animation:bzFloat 7s ease-in-out infinite;
  border-radius:0;
  /* Compose a V-shaped vignette: strong bottom fade + soft horizontal fade
     on the extreme edges. mask-composite:intersect keeps a pixel visible only
     where BOTH masks are opaque, so corners disappear smoothly. */
  -webkit-mask-image:
    linear-gradient(180deg,
      #000 0%,
      #000 50%,
      rgba(0,0,0,.9) 68%,
      rgba(0,0,0,.55) 82%,
      rgba(0,0,0,0) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.6) 6%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.6) 94%,
      rgba(0,0,0,0) 100%);
          mask-image:
    linear-gradient(180deg,
      #000 0%,
      #000 50%,
      rgba(0,0,0,.9) 68%,
      rgba(0,0,0,.55) 82%,
      rgba(0,0,0,0) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.6) 6%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.6) 94%,
      rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* Richer, multi-stage float — the sculpture drifts, tilts and slightly
   scales so the hero feels alive instead of just gently bobbing. */
@keyframes bzFloat{
  0%,100% {transform:translate(-50%,-50%)                    rotate(0deg)  scale(1);}
  20%     {transform:translate(calc(-50% + 10px),calc(-50% - 18px)) rotate(1.5deg)  scale(1.015);}
  40%     {transform:translate(calc(-50% - 14px),calc(-50% - 28px)) rotate(-1.8deg) scale(1.025);}
  60%     {transform:translate(calc(-50% - 10px),calc(-50% - 14px)) rotate(-2deg)  scale(1.015);}
  80%     {transform:translate(calc(-50% + 12px),calc(-50% - 22px)) rotate(1.2deg)  scale(1.02);}
}

.hero .container{position:relative;z-index:3;}

/* The composition image already carries the full headline, so hide the HTML
   text content (badge, big title, lead paragraph). Keep the CTA buttons so
   the hero still has an actionable call-to-action under the image. */
.hero .badge,
.hero .hero-brand,
.hero h1,
.hero .lead{display:none !important;}

.hero-inner{
  margin:0 auto;
  max-width:1480px;
  width:100%;
  text-align:center;
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /* Buttons previously sat near the hero's bottom edge (70vh) and risked
     falling below the fold. Pull them up so they land just under the
     headline image, well inside the viewport. */
  min-height:min(58vh,620px);
}
.hero-inner::before{display:none;}

.hero-cta{
  justify-content:center;
  gap:16px;
  position:relative;
  z-index:4;
  margin-top:auto;
  padding-top:24px;
}

.hero .badge{
  background:rgba(248,254,228,.06);
  border:1px solid rgba(185,232,37,.4);
  color:#F8FEE4;
}

/* Hide the gigantic brand text — the 3D sculpture is the brand mark */
.hero .hero-brand{display:none;}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5.5vw,5rem);
  line-height:.95;
  letter-spacing:-.03em;
  font-weight:800;
  color:#F8FEE4;
  margin-bottom:28px;
  text-transform:uppercase;
}
html[dir="rtl"] .hero h1{
  font-family:"Thmanyah",sans-serif;
  text-transform:none;
  letter-spacing:0;
  line-height:1.2;
  font-size:clamp(1.9rem,4.2vw,3.6rem);
  font-weight:700;
}
html[dir="rtl"] .hero h1 .gradient-italic{font-weight:700;}
html[dir="rtl"] .hero .lead{font-size:clamp(.8rem,.95vw,.9rem);line-height:1.85;}
.hero h1 .gradient-italic{
  display:block;
  color:#B9E825;
  -webkit-text-fill-color:#B9E825;
  font-style:normal;
  font-weight:600;
  margin-top:12px;
  font-size:.48em;      /* subtitle — a bit larger, still subordinate to h1 */
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
}
.hero .lead{
  color:rgba(248,254,228,.8);
  font-size:clamp(.82rem,1.05vw,.95rem);
  margin:0 0 36px;
  max-width:520px;
  line-height:1.7;
}
.hero-cta{justify-content:flex-start;gap:14px;}
.hero-cta .btn{padding:16px 30px;border-radius:14px;}
.hero-cta .btn-secondary{color:#F8FEE4;}

/* ============================================================
   MOBILE HERO — professional layout inspired by the brand mockup.
   Content stacks vertically and fills the viewport:
     - large bilingual headline
     - lime divider + small cap-label
     - description paragraph
     - CTA buttons
   The 3D sculpture lives as a background accent on the right edge
   (cropped off-screen) — it's atmosphere, not the main subject.
   All content fits above the fold on any ≥640px-tall phone.
   ============================================================ */
@media(max-width:900px){
  .hero{
    text-align:start;
    padding:calc(var(--header-h) + 24px) 22px 20px;
    /* Hero collapses to its content height — no empty gap between the
       last button and the services section below. */
    min-height:auto;
    display:flex;
    align-items:flex-start;
    overflow:hidden;
  }

  /* Full-hero floating sculpture — large, visible brand element behind
     the headline + buttons. Uses the 237KB mobile-optimized PNG (vs the
     original 3.1MB) so decode cost stays low while visual size is big. */
  .hero::before{
    background-image:url("../brand/3d/hero-main-mobile.png");
    width:min(130vw,780px);
    aspect-ratio:1/1;
    top:50%;
    left:50%;
    right:auto;
    bottom:auto;
    transform:translate(-50%,-50%);
    animation:bzFloatMobile 7s ease-in-out infinite;
    -webkit-mask-image:none;
            mask-image:none;
    -webkit-mask-composite:add;
            mask-composite:add;
    filter:none;           /* no drop-shadow on mobile */
    opacity:.55;         /* clearer brand presence without drowning text */
    z-index:1;
  }
  html[dir="rtl"] .hero::before{right:auto;left:50%;}

  @keyframes bzFloatMobile{
    0%,100% {transform:translate(-50%,-50%)                      rotate(0deg);}
    25%     {transform:translate(calc(-50% + 10px),calc(-50% - 14px)) rotate(2deg);}
    50%     {transform:translate(-50%,calc(-50% - 22px))              rotate(-1.6deg);}
    75%     {transform:translate(calc(-50% - 10px),calc(-50% - 14px)) rotate(1.4deg);}
  }

  /* Soft radial vignette BEHIND the content so text/buttons sit on a
     slightly darker patch where they overlap the brightest sculpture areas. */
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
      radial-gradient(ellipse 70% 55% at 30% 50%,rgba(0,52,39,.75) 0%,transparent 70%),
      linear-gradient(180deg,rgba(1,32,24,.25) 0%,rgba(1,32,24,.5) 100%);
  }
  html[dir="rtl"] .hero::after{
    background:
      radial-gradient(ellipse 70% 55% at 70% 50%,rgba(0,52,39,.75) 0%,transparent 70%),
      linear-gradient(180deg,rgba(1,32,24,.25) 0%,rgba(1,32,24,.5) 100%);
  }

  /* Content column — standard block flow, text + buttons clustered at
     the top of the hero (no space-between). */
  .hero-inner{
    position:relative;
    z-index:3;
    min-height:auto;
    display:block;
    padding:0;
    margin:0;
    max-width:100%;
    width:100%;
    text-align:start;
  }
  .hero-inner::before{display:none;}
  .hero-cta{margin-top:0;}

  /* Bring back the admin-managed hero text with mobile-friendly sizes. */
  .hero .badge{
    display:inline-flex !important;
    font-size:11px;
    padding:6px 14px;
    margin-bottom:0;
  }

  .hero h1{
    display:block !important;
    font-size:clamp(2rem,9vw,3.4rem);
    line-height:1.02;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-.03em;
    margin:18px 0 0;
    padding:0;
    color:#F8FEE4;
    text-shadow:0 2px 20px rgba(0,0,0,.65);
  }
  html[dir="rtl"] .hero h1{
    font-family:"Thmanyah",sans-serif;
    text-transform:none;
    letter-spacing:0;
    line-height:1.15;
    font-weight:700;
    font-size:clamp(1.8rem,8vw,2.8rem);
  }
  .hero h1 .gradient-italic{
    display:block;
    color:#B9E825;
    font-weight:600;
    margin-top:10px;
    font-size:.52em;        /* mobile subtitle — bumped up slightly */
    line-height:1.4;
    letter-spacing:0;
    text-transform:none;
  }

  /* Lime divider accent — the small bar from the brand mockup */
  .hero h1::after{
    content:"";
    display:block;
    width:48px;
    height:4px;
    background:#B9E825;
    border-radius:2px;
    margin-top:18px;
  }

  .hero .lead{
    display:block !important;
    font-size:11.5px !important;
    line-height:1.6;
    color:rgba(248,254,228,.85);
    margin:14px 0 20px !important;
    max-width:92%;
    padding:0;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  html[dir="rtl"] .hero .lead{
    font-size:11px !important;
    line-height:1.75;
  }

  .hero-cta{
    display:flex;
    justify-content:flex-start;
    gap:10px;
    padding:0;
    flex-wrap:wrap;
    margin-top:0;
  }
}

/* On narrower / shorter phones squeeze a bit more and stack buttons. */
@media(max-width:640px){
  .hero{padding-top:calc(var(--header-h) + 18px);padding-bottom:16px;}
  .hero::before{width:min(150vw,680px);opacity:.45;}
  .hero h1{font-size:clamp(1.9rem,8.5vw,2.6rem);}
  html[dir="rtl"] .hero h1{font-size:clamp(1.7rem,7.5vw,2.3rem);}
  .hero .lead{font-size:11px !important;}
  html[dir="rtl"] .hero .lead{font-size:10.5px !important;}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;}
  .hero-cta .btn{width:100%;justify-content:center;}
}

/* ---------- STATS ---------- */
.stats{background:linear-gradient(180deg,#06281E 0%,#012018 100%);border-color:rgba(185,232,37,.08);}
.stat{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.12);
  border-radius:20px;
}
.stat:hover{
  transform:translateY(-6px);
  border-color:#B9E825;
  box-shadow:0 20px 60px -20px rgba(185,232,37,.5);
}
.stat-icon{
  background:rgba(185,232,37,.1);color:#B9E825;border:1px solid rgba(185,232,37,.25);border-radius:14px;
}
.stat-num{
  font-family:var(--font-display);font-weight:900;
  background:linear-gradient(180deg,#F8FEE4 0%,#B9E825 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- SERVICES — image-rich hero header per card ----------
   Each service card gets a tall "visual" area at the top (hex pattern + glow
   + the service icon floated as a large tile), making every card feel like a
   small poster instead of a flat text block. */
.service-card{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.12);
  border-radius:24px;
  padding:0;
  overflow:hidden;
  position:relative;
}
.service-card::before{
  content:"";
  display:block;
  height:200px;
  background:
    linear-gradient(180deg,rgba(0,52,39,.15) 0%,rgba(1,32,24,.75) 100%),
    var(--svc-img, linear-gradient(135deg,#003427 0%,#0E5642 100%)) center/cover no-repeat;
  position:relative;
  width:100%;
  inset:auto;
  filter:none;
  opacity:1;
  border-radius:0;
  z-index:0;
}
/* Per-icon imagery pulled from the 8toZ identity kit. */
.service-card[data-icon="network"]{--svc-img:url("../brand/services/network.jpg");}
.service-card[data-icon="server"] {--svc-img:url("../brand/services/server.jpg");}
.service-card[data-icon="code"]   {--svc-img:url("../brand/services/code.jpg");}
.service-card[data-icon="camera"] {--svc-img:url("../brand/services/camera.jpg");}
.service-card[data-icon="shield"] {--svc-img:url("../brand/services/shield.jpg");}
.service-card[data-icon="headset"]{--svc-img:url("../brand/services/headset.jpg");}

/* Soft lime glow at the top-right corner for brand pop (no more hex grid) */
.service-card::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:200px;
  background:radial-gradient(ellipse 60% 80% at 85% 15%,rgba(185,232,37,.25) 0%,transparent 55%);
  pointer-events:none;
  z-index:1;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(185,232,37,.5);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(185,232,37,.25);
}
.service-icon{
  position:absolute;
  top:138px;              /* nested half-overlap on the 200px photo header */
  inset-inline-start:28px;
  width:76px;height:76px;
  color:#012018;
  border-radius:18px;
  display:grid;place-items:center;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 0 0 4px #06281E,0 0 0 5px rgba(185,232,37,.35);
  z-index:3;
  margin:0;
}
.service-icon svg{width:40px;height:40px;}
.service-card:hover .service-icon{transform:scale(1.05) rotate(-4deg);}

/* keep the SVG icon on dark deep-forest tiles that pop against the lime glow */
.service-icon-blue,
.service-icon-purple,
.service-icon-cyan,
.service-icon-green,
.service-icon-red,
.service-icon-orange{background:linear-gradient(135deg,#B9E825 0%,#D5F15A 100%);color:#012018;}
.service-icon-purple{background:linear-gradient(135deg,#CDE6B2 0%,#F8FEE4 100%);}
.service-icon-cyan  {background:linear-gradient(135deg,#D5F15A 0%,#CDE6B2 100%);}
.service-icon-green {background:linear-gradient(135deg,#94BE1A 0%,#B9E825 100%);}
.service-icon-red   {background:linear-gradient(180deg,#003427 0%,#0E5642 100%);color:#B9E825;box-shadow:0 20px 40px -10px rgba(0,0,0,.5),0 0 0 4px #06281E,0 0 0 5px rgba(185,232,37,.5);}
.service-icon-orange{background:linear-gradient(135deg,#F8FEE4 0%,#B9E825 100%);}

/* push the card's text content below the visual header */
.service-card h3,
.service-card > p,
.service-card .service-features{
  position:relative;z-index:2;
  margin-inline:28px;
}
.service-card h3{margin-top:56px;margin-bottom:10px;font-family:var(--font-display);font-weight:800;font-size:1.3rem;}
html[dir="rtl"] .service-card h3{font-family:"Thmanyah",sans-serif;font-weight:700;font-size:1.2rem;}
.service-card > p{color:var(--text-muted);margin-bottom:16px;}
.service-card .service-features{margin-bottom:20px;padding:0;}
.service-card .service-link{display:inline-flex;margin:0 28px 28px;position:relative;z-index:2;}
.service-card:has(.btn),
.service-card:has(.service-link){padding-bottom:0;}

.service-features li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012018' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-color:#B9E825;
}
.service-link{color:#B9E825;font-family:var(--font-display);font-weight:700;}
html[dir="rtl"] .service-link{font-family:"Thmanyah",sans-serif;}
.service-link:hover{color:#D5F15A;}

/* ---------- ABOUT ---------- */
.about{background:linear-gradient(180deg,#012018 0%,#06281E 100%);}
.about-image{
  background:
    radial-gradient(ellipse at center,rgba(185,232,37,.18) 0%,transparent 65%),
    linear-gradient(135deg,#003427 0%,#0E5642 50%,#094732 100%);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 0 100px -20px rgba(185,232,37,.3);
  border:1px solid rgba(185,232,37,.14);
  position:relative;
  overflow:hidden;
}
/* Soften the stock radial-gradient overlay from style.css so the uploaded
   admin image (or brand fallback) remains clearly visible underneath. */
.about-image::before{
  background-image:
    radial-gradient(circle at 30% 30%,rgba(185,232,37,.12),transparent 55%),
    radial-gradient(circle at 70% 75%,rgba(0,0,0,.15),transparent 60%) !important;
  z-index:1;
  pointer-events:none;
}
.about-image img{
  position:relative;
  z-index:2;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* Brand-fallback photo (8toZ technician in uniform): fills the frame with
   a subtle Ken-Burns zoom so the shot feels alive. The lime glow from
   .about-image::before gives it a brand-tinted vignette. */
.about-image img.about-brand-photo{
  object-fit:cover;
  object-position:center;
  animation:aboutKenBurns 18s ease-in-out infinite alternate;
}
@keyframes aboutKenBurns{
  0%  {transform:scale(1)      translate(0,0);}
  100%{transform:scale(1.08) translate(-1%,-1%);}
}

.about-badge{
  background:rgba(10,53,40,.95);
  border:1px solid rgba(185,232,37,.3);
  backdrop-filter:blur(14px);
  z-index:3;
}
.about-badge-icon{color:#B9E825;background:rgba(185,232,37,.1);}

/* ---------- FEATURES ---------- */
.feature{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.1);
  border-radius:20px;
}
.feature:hover{border-color:rgba(185,232,37,.4);box-shadow:0 20px 50px -20px rgba(185,232,37,.3);}
.feature-icon{
  background:linear-gradient(135deg,#B9E825 0%,#CDE6B2 100%);
  color:#012018;
  border-radius:14px;
}

/* ---------- PROCESS ---------- */
.process-step{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.1);
  border-radius:20px;
}
.process-step:hover{border-color:rgba(185,232,37,.4);transform:translateY(-6px);}

/* Reset style.css's gradient-clip watermark trick (which made the number
   render as a tiny lime shape instead of a legible digit) and render the
   step number as a bold, visible lime watermark in the corner. */
.process-number{
  background:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  -webkit-text-fill-color:#B9E825 !important;
  color:#B9E825 !important;
  font-family:var(--font-display);
  font-weight:900;
  font-size:80px !important;
  line-height:1;
  opacity:.18 !important;
  letter-spacing:-.04em;
}
html[dir="rtl"] .process-number{
  font-size:72px !important;
  font-family:var(--font-display);     /* keep Latin digits in Funnel for weight */
}
.process-icon{color:#B9E825;background:rgba(185,232,37,.08);border:1px solid rgba(185,232,37,.2);}

/* ---------- PROJECTS ---------- */
.projects-filter button{
  background:rgba(248,254,228,.04);
  border:1px solid rgba(185,232,37,.15);
  color:rgba(248,254,228,.75);
}
.projects-filter button.active,.projects-filter button:hover{
  background:#B9E825;color:#012018;border-color:#B9E825;
}
.project-card{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.1);
  border-radius:24px;overflow:hidden;
}
.project-card:hover{border-color:rgba(185,232,37,.45);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
.project-cat{color:#B9E825;}

/* ---------- CTA — "Ready to start your project?" ---------- */
.cta{
  background:
    radial-gradient(ellipse at top left,rgba(185,232,37,.3),transparent 60%),
    radial-gradient(ellipse at bottom right,rgba(14,86,66,.6),transparent 60%),
    linear-gradient(135deg,#003427 0%,#012018 100%);
  position:relative;
  overflow:hidden;
  border-radius:28px;
  margin:60px 24px;
  padding:80px 24px;
}

/* When a background image is set, lay a deep-forest wash over the brochure
   so it reads as a subtle atmospheric backdrop — restrained but still
   visible, not drowned out. */
.cta.has-bg-image{
  background:
    linear-gradient(135deg,rgba(0,52,39,.9) 0%,rgba(1,32,24,.93) 100%),
    var(--cta-bg-url,none) center/cover no-repeat;
  background-color:#003427;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
}
/* Keep the headline legible over whatever photo texture remains. */
.cta.has-bg-image .cta-inner h2{text-shadow:0 4px 20px rgba(0,0,0,.6);}
.cta.has-bg-image .cta-inner p{text-shadow:0 2px 10px rgba(0,0,0,.4);}
/* lime glow accents layered above the photo */
.cta.has-bg-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 15% 20%,rgba(185,232,37,.35),transparent 55%),
    radial-gradient(ellipse at 85% 85%,rgba(185,232,37,.18),transparent 60%);
  pointer-events:none;
  z-index:0;
}

.cta .container{position:relative;z-index:2;}
.cta-inner{color:#F8FEE4;text-align:center;max-width:720px;margin:0 auto;}
.cta-inner h2{
  color:#F8FEE4;
  font-family:var(--font-display);
  font-size:clamp(2rem,3.6vw,3rem);
  margin-bottom:16px;
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}
html[dir="rtl"] .cta-inner h2{font-family:"Thmanyah",sans-serif;font-weight:700;}
.cta-inner p{color:rgba(248,254,228,.85);margin-bottom:32px;}
.cta-inner .btn-primary{background:#B9E825;color:#012018;}

@media(max-width:900px){
  .cta{margin:40px 16px;padding:60px 20px;border-radius:20px;}
}

/* ---------- TESTIMONIALS ---------- */
.testimonial{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.1);
  border-radius:24px;
}
.testimonial-rating svg{color:#B9E825;fill:#B9E825;}
.testimonial-avatar{background:linear-gradient(135deg,#B9E825 0%,#CDE6B2 100%);color:#012018;}

/* ---------- FAQ ---------- */
.faq-item{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.12);
  border-radius:18px;
}
.faq-item.active,.faq-item:hover{border-color:rgba(185,232,37,.4);}
.faq-question{color:#F8FEE4;font-family:var(--font-display);font-weight:700;}
html[dir="rtl"] .faq-question{font-family:"Thmanyah",sans-serif;}
.faq-question svg{color:#B9E825;}

/* ---------- CONTACT ---------- */
.contact-form{
  background:linear-gradient(180deg,#0A3528 0%,#06281E 100%);
  border:1px solid rgba(185,232,37,.1);
  border-radius:24px;
}
.form-control{
  background:rgba(1,32,24,.6);
  border:1.5px solid rgba(185,232,37,.14);
  color:#F8FEE4;
  border-radius:12px;
}
.form-control:focus{border-color:#B9E825;box-shadow:0 0 0 4px rgba(185,232,37,.14);}
.contact-info > div{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;}
.contact-icon{
  width:52px;height:52px;flex-shrink:0;
  background:linear-gradient(135deg,#B9E825 0%,#CDE6B2 100%);
  color:#012018;border-radius:14px;
  display:grid;place-items:center;
}
.contact-icon svg{width:22px;height:22px;}

/* ---------- FOOTER ---------- */
.footer{
  background:#000f0A;
  border-top:1px solid rgba(185,232,37,.14);
  color:rgba(248,254,228,.7);
}
.footer .logo-text{background:linear-gradient(135deg,#F8FEE4 0%,#B9E825 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.footer h4{color:#F8FEE4;font-family:var(--font-display);}
html[dir="rtl"] .footer h4{font-family:"Thmanyah",sans-serif;}
.footer-links a:hover{color:#B9E825;}
.footer-social a{
  background:rgba(185,232,37,.08);
  border:1px solid rgba(185,232,37,.2);
  color:#F8FEE4;
}
.footer-social a:hover{background:#B9E825;color:#012018;border-color:#B9E825;}

/* ---------- FAB (WhatsApp) ---------- */
.fab{
  background:#B9E825;
  color:#012018;
  box-shadow:0 10px 30px -5px rgba(185,232,37,.5);
}
.fab:hover{background:#D5F15A;}
.scroll-top{
  background:rgba(185,232,37,.9);color:#012018;
  box-shadow:0 10px 30px -8px rgba(185,232,37,.5);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar-thumb{background:rgba(185,232,37,.3);}
::-webkit-scrollbar-thumb:hover{background:#B9E825;}
::selection{background:#B9E825;color:#012018;}

/* ============================================================
   CONTENT PAGES (page.php) — Privacy, Terms, etc.
   Applies the 8toZ identity: deep-forest surface, Thmanyah font
   for Arabic, lime accents, chamfered meta chips.
   ============================================================ */
.cp-wrap{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(185,232,37,.08) 0%,transparent 60%),
    linear-gradient(180deg,#012018 0%,#06281E 100%);
  color:#F8FEE4;
  min-height:100vh;
}
.cp-head{
  border-bottom-color:rgba(185,232,37,.18) !important;
  padding-bottom:28px !important;
  margin-bottom:40px !important;
}
.cp-title{
  font-family:var(--font-display);
  font-weight:800;
  color:#F8FEE4 !important;
  letter-spacing:-.02em;
}
html[dir="rtl"] .cp-title{font-family:"Thmanyah",sans-serif;font-weight:700;letter-spacing:0;}
.cp-meta{color:rgba(248,254,228,.65) !important;}
.cp-meta span{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(185,232,37,.08);
  border:1px solid rgba(185,232,37,.25);
  padding:6px 12px;
  border-radius:8px;
  font-weight:600;
}
.cp-meta svg{color:#B9E825;}

.cp-body{color:rgba(248,254,228,.85) !important;line-height:1.95;font-size:16.5px;}
html[dir="rtl"] .cp-body{font-family:"Thmanyah","Tajawal",sans-serif;font-size:15.5px;line-height:2;}

.cp-body h1,.cp-body h2,.cp-body h3,.cp-body h4{
  font-family:var(--font-display);
  color:#F8FEE4 !important;
  font-weight:800;
  letter-spacing:-.015em;
}
html[dir="rtl"] .cp-body h1,
html[dir="rtl"] .cp-body h2,
html[dir="rtl"] .cp-body h3,
html[dir="rtl"] .cp-body h4{
  font-family:"Thmanyah",sans-serif;
  font-weight:700;
  letter-spacing:0;
}
.cp-body h2{
  padding-inline-start:14px;
  border-inline-start:4px solid #B9E825;
  margin-top:40px !important;
}
.cp-body h3{color:#CDE6B2 !important;}

.cp-body p,.cp-body li{color:rgba(248,254,228,.82);}
.cp-body strong,.cp-body b{color:#F8FEE4;}

.cp-body a{
  color:#B9E825 !important;
  text-decoration-color:rgba(185,232,37,.4) !important;
  transition:color .2s;
}
.cp-body a:hover{color:#D5F15A !important;}

.cp-body blockquote{
  border-inline-start:4px solid #B9E825 !important;
  background:rgba(185,232,37,.08) !important;
  color:#F8FEE4 !important;
  border-radius:0 12px 12px 0;
  padding:16px 22px !important;
  margin:28px 0 !important;
}

.cp-body code{
  background:#003427 !important;
  color:#B9E825 !important;
  border:1px solid rgba(185,232,37,.2);
  font-family:"JetBrains Mono",ui-monospace,monospace !important;
}
.cp-body pre{
  background:#003427 !important;
  border:1px solid rgba(185,232,37,.18) !important;
  border-radius:14px !important;
}
.cp-body pre code{border:none;background:transparent !important;}

.cp-body hr{border-top:1px solid rgba(185,232,37,.14) !important;margin:40px 0 !important;}

.cp-body ul li::marker,
.cp-body ol li::marker{color:#B9E825;}

.cp-body table{border:1px solid rgba(185,232,37,.18) !important;border-radius:12px;overflow:hidden;}
.cp-body th{
  background:#0A3528 !important;
  color:#F8FEE4 !important;
  border-color:rgba(185,232,37,.18) !important;
  font-family:var(--font-display);
}
html[dir="rtl"] .cp-body th{font-family:"Thmanyah",sans-serif;}
.cp-body td{border-color:rgba(185,232,37,.12) !important;}

@media(max-width:900px){
  .cp-wrap{padding:calc(var(--header-h) + 40px) 20px 60px !important;}
  .cp-body{font-size:15px;}
  html[dir="rtl"] .cp-body{font-size:14.5px;}
}