/* ==========================================================================
   SITE SNAP — Design System v2
   --------------------------------------------------------------------------
   A single stylesheet serving Arabic (RTL) and English (LTR).
   Everything is authored with CSS logical properties, so direction is
   handled by the document, never by per-element hacks.

   1.  Tokens              8.  Hero
   2.  Reset & base        9.  Section components
   3.  Typography         10.  Cards (service / work / post / stat)
   4.  Layout & surfaces  11.  Editorial & long-form
   5.  Buttons & controls 12.  Forms
   6.  Motion & utilities 13.  Footer & floaters
   7.  Header & nav       14.  Responsive audit
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand accent (overridable from the dashboard) -------------------- */
  --primary:        #FF6A1A;
  --secondary:      #3A6EFF;

  /* --- Surfaces --------------------------------------------------------- */
  --background:     #07080D;
  --background-alt: #0B0E16;
  --surface:        #0E1119;
  --surface-2:      #131722;
  --surface-3:      #1A1F2C;
  --surface-hover:  #171C28;

  /* --- Text ------------------------------------------------------------- */
  --text-primary:   #F3F6FB;
  --text-secondary: #A3ACBD;
  --text-muted:     #6E7789;
  --text-faint:     #4C5466;

  /* --- Lines & glass ---------------------------------------------------- */
  --border:         rgba(255, 255, 255, .075);
  --border-strong:  rgba(255, 255, 255, .15);
  --glass:          rgba(255, 255, 255, .035);
  --glass-2:        rgba(255, 255, 255, .07);

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px -6px rgba(0, 0, 0, .5);
  --shadow:     0 12px 30px -12px rgba(0, 0, 0, .7);
  --shadow-md:  0 22px 48px -20px rgba(0, 0, 0, .78);
  --shadow-lg:  0 40px 90px -34px rgba(0, 0, 0, .85);

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 42px;
  --r-pill: 999px;

  /* --- Rhythm ----------------------------------------------------------- */
  --section-y: clamp(4rem, 7.5vw, 8rem);
  --section-y-tight: clamp(3rem, 5vw, 5.5rem);
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --max: 1240px;
  --max-wide: 1480px;
  --max-text: 68ch;
  --header-h: 74px;

  /* --- Motion ----------------------------------------------------------- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .16s;
  --t:      .28s;
  --t-slow: .55s;

  /* --- Type families ---------------------------------------------------- */
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-en: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* Derived accent shades. Kept in a second block so a dashboard-injected
   `--primary` override (declared before this file's cascade order is
   irrelevant — custom properties resolve at use time) flows through. */
:root {
  --primary-hover: color-mix(in srgb, var(--primary) 78%, #FFFFFF);
  --primary-deep:  color-mix(in srgb, var(--primary) 82%, #000000);
  --primary-soft:  color-mix(in srgb, var(--primary) 11%, transparent);
  --primary-line:  color-mix(in srgb, var(--primary) 30%, transparent);
  --primary-glow:  color-mix(in srgb, var(--primary) 34%, transparent);
  --primary-ink:   #0A0A0A;
  --secondary-soft: color-mix(in srgb, var(--secondary) 14%, transparent);

  --shadow-primary: 0 20px 50px -18px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Fallbacks for engines without color-mix() (older Safari / Firefox ESR). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --primary-hover: #FF8B45;
    --primary-deep:  #D9540C;
    --primary-soft:  rgba(255, 106, 26, .11);
    --primary-line:  rgba(255, 106, 26, .30);
    --primary-glow:  rgba(255, 106, 26, .34);
    --secondary-soft: rgba(58, 110, 255, .14);
    --shadow-primary: 0 20px 50px -18px rgba(255, 106, 26, .55);
  }
}

/* Aliases kept so existing markup and partials keep resolving. */
:root {
  --ink-900: var(--background);
  --ink-800: var(--background-alt);
  --ink-700: var(--surface);
  --ink-600: var(--surface-2);
  --graphite: var(--surface-3);
  --panel:    var(--surface-2);
  --panel-2:  var(--surface-3);
  --orange:      var(--primary);
  --orange-lift: var(--primary-hover);
  --orange-deep: var(--primary-deep);
  --orange-glow: var(--primary-glow);
  --orange-soft: var(--primary-soft);
  --orange-line: var(--primary-line);
  --white:  var(--text-primary);
  --gray-1: var(--text-secondary);
  --gray-2: var(--text-muted);
  --gray-3: var(--text-faint);
  --line:        var(--border);
  --line-strong: var(--border-strong);
  --shadow-orange: var(--shadow-primary);
  --font-mono: var(--font-num);
}

/* Light theme — the same identity on an off-white ground. Surfaces and
   text flip; the orange accent stays exactly as it is. Toggled from the
   header and remembered in localStorage (see site.js → theme). */
:root {
  color-scheme: dark;
  --primary-text: var(--primary);   /* orange used as text colour */
}
:root[data-theme="light"] {
  color-scheme: light;

  --background:     #F7F7F4;
  --background-alt: #F0F0EB;
  --surface:        #FFFFFF;
  --surface-2:      #F4F4F0;
  --surface-3:      #E7E7E1;
  --surface-hover:  #F1F1EC;

  --text-primary:   #0B0E16;
  --text-secondary: #424959;
  --text-muted:     #5E6576;
  --text-faint:     #8A909D;

  --border:         rgba(11, 14, 22, .09);
  --border-strong:  rgba(11, 14, 22, .16);
  --glass:          rgba(11, 14, 22, .035);
  --glass-2:        rgba(11, 14, 22, .065);

  --shadow-sm:  0 1px 2px rgba(15, 18, 28, .06), 0 4px 14px -6px rgba(15, 18, 28, .12);
  --shadow:     0 12px 30px -14px rgba(15, 18, 28, .18);
  --shadow-md:  0 22px 48px -22px rgba(15, 18, 28, .22);
  --shadow-lg:  0 40px 90px -36px rgba(15, 18, 28, .28);

  /* Orange text on off-white needs a deeper shade to stay AA-legible. */
  --primary-text: #B8500F;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-theme="light"] {
    --primary-text: color-mix(in srgb, var(--primary) 74%, #000000);
    --primary-glow: color-mix(in srgb, var(--primary) 24%, transparent);
  }
}

/* A few decorations were drawn for a dark ground only. */
:root[data-theme="light"] .texture-grid::before,
:root[data-theme="light"] .hero-bg .mesh,
:root[data-theme="light"] .cta-band::after,
:root[data-theme="light"] .page-hero::before {
  background-image:
    linear-gradient(to right, rgba(11, 14, 22, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 14, 22, .045) 1px, transparent 1px);
}
:root[data-theme="light"] .btn--ghost:hover { --btn-bd: rgba(11, 14, 22, .26); }
/* Chips that sit on photographs keep their dark glass and light text. */
:root[data-theme="light"] .work-media .work-cat,
:root[data-theme="light"] .post-media .post-cat { color: #F3F6FB; border-color: rgba(255, 255, 255, .16); }
:root[data-theme="light"] .alert--success { color: #11643C; }
:root[data-theme="light"] .alert--error   { color: #B3261E; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #C8C8C0; }

/* Theme swap: suspend transitions for one frame; cross-fade where the
   View Transitions API exists. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after { transition: none !important; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease); }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* Nothing may ever push the page sideways. */
  overflow-x: hidden;
}

/* Reserve the scrollbar track only where a classic scrollbar exists, so
   locking scroll for the drawer cannot shift the fixed header. Phones use
   overlay scrollbars and would just lose the space. */
@media (min-width: 1024px) {
  html { scrollbar-gutter: stable; }
}

body {
  min-height: 100svh;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Arabic gets its own family, a looser leading and no letter-spacing. */
html[lang="ar"] body {
  font-family: var(--font-ar);
  font-size: 1.02rem;
  line-height: 1.9;
  letter-spacing: 0;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, li, dt, dd, blockquote { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
:target { scroll-margin-block-start: calc(var(--header-h) + 24px); }

/* One visible, consistent focus ring across the whole site. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary); color: #fff; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: #262C3B; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Arabic never wants tight tracking, and needs more leading to stay legible. */
html[lang="ar"] :is(h1, h2, h3, h4, h5) {
  letter-spacing: 0;
  line-height: 1.42;
  font-weight: 700;
}

.h-display { font-size: clamp(2.15rem, 5.6vw, 4.25rem); font-weight: 700; }
.h-1       { font-size: clamp(1.95rem, 4.4vw, 3.35rem); }
.h-2       { font-size: clamp(1.6rem, 3.2vw, 2.55rem); }
.h-3       { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
.h-4       { font-size: clamp(1.06rem, 1.5vw, 1.25rem); line-height: 1.4; }

html[lang="ar"] .h-display { font-size: clamp(1.95rem, 5.1vw, 3.85rem); }
html[lang="ar"] .h-1       { font-size: clamp(1.8rem, 4vw, 3rem); }
html[lang="ar"] .h-2       { font-size: clamp(1.5rem, 3vw, 2.35rem); }

.lead {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.78;
  color: var(--text-secondary);
  max-width: 62ch;
}
html[lang="ar"] .lead { font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 2.05; max-width: 58ch; }

.muted   { color: var(--text-secondary); }
.muted-2 { color: var(--text-muted); }
.accent  { color: var(--primary); }

/* Numerals always render in the geometric latin face for consistency. */
.num, .stat-value, .sec-index, time, [data-count] {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
}

/* Highlighted phrase inside a headline.
   A hairline underline rather than a filled block: it reads as emphasis
   instead of a highlighter pen, wraps natively across lines, and stays
   legible against Arabic descenders. */
.hl {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-color: var(--primary-line);
  text-decoration-thickness: max(2px, .07em);
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}
html[lang="ar"] .hl { text-underline-offset: .3em; }

/* --------------------------------------------------------------------------
   4. Layout & surfaces
   -------------------------------------------------------------------------- */
.container      { width: min(100% - (var(--gutter) * 2), var(--max));      margin-inline: auto; max-width: 100%; }
.container-wide { width: min(100% - (var(--gutter) * 2), var(--max-wide)); margin-inline: auto; max-width: 100%; }

.section {
  padding-block: var(--section-y);
  position: relative;
  /* Contain the ambient glows. `clip` (not `hidden`) so this never
     becomes a scroll container and breaks the sticky sidebars. */
  overflow: clip;
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-block-start: 0; }
.section--alt {
  background: var(--background-alt);
  border-block: 1px solid var(--border);
}

.stack > * + * { margin-block-start: var(--gap, 1rem); }
.grid { display: grid; gap: var(--gap, 1.5rem); }

/* Hairline separator that fades at both ends. */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}

/* Ambient background glows — GPU friendly, never animated. */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}
.glow--orange { background: radial-gradient(circle, var(--primary-glow), transparent 68%); }
.glow--blue   { background: radial-gradient(circle, var(--secondary-soft), transparent 68%); }

/* Decoration only — not worth the paint cost or the overflow risk on phones. */
@media (max-width: 767px) {
  .glow { display: none; }
}

.section > .container,
.section > .container-wide { position: relative; z-index: 1; }

/* Faint engineering grid used behind selected sections. */
.texture-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 25%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}


/* --------------------------------------------------------------------------
   5. Buttons & controls
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--glass);
  --btn-fg: var(--text-primary);
  --btn-bd: var(--border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .88rem 1.6rem;
  min-height: 46px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-en);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
html[lang="ar"] .btn { font-family: var(--font-ar); font-weight: 600; letter-spacing: 0; }

.btn .icon { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Directional arrow — mirrors itself in RTL, then nudges on hover. */
.btn .icon--arrow { transition: transform var(--t) var(--ease); }
html[dir="rtl"] .btn .icon--arrow { transform: scaleX(-1); }
.btn:hover .icon--arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .icon--arrow { transform: scaleX(-1) translateX(4px); }

.btn--primary {
  --btn-bg: var(--primary);
  --btn-fg: #FFFFFF;
  --btn-bd: transparent;
  box-shadow: 0 10px 26px -12px var(--primary-glow);
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--primary-hover), var(--primary));
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: -1;
}
.btn--primary:hover::after { opacity: 1; }
.btn--primary:hover { box-shadow: var(--shadow-primary); }

.btn--ghost { --btn-bg: var(--glass); --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bg: var(--glass-2); --btn-bd: rgba(255,255,255,.26); }

.btn--outline { --btn-bg: transparent; --btn-bd: var(--primary-line); --btn-fg: var(--primary); }
.btn--outline:hover { --btn-bg: var(--primary-soft); --btn-bd: var(--primary); }

.btn--quiet { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-secondary); }
.btn--quiet:hover { --btn-fg: var(--text-primary); --btn-bg: var(--glass); }

/* Outlined rather than filled: two saturated buttons side by side fought
   each other and pulled the palette away from the single orange accent.
   The green reads on the icon and the border, and fills in on hover. */
.btn--wa { --btn-bg: rgba(31,168,85,.10); --btn-fg: #4FD182; --btn-bd: rgba(31,168,85,.45); }
.btn--wa:hover { --btn-bg: #1FA855; --btn-fg: #fff; --btn-bd: #1FA855; box-shadow: 0 18px 38px -20px rgba(31,168,85,.6); }

.btn--sm { padding: .62rem 1.15rem; min-height: 38px; font-size: .87rem; }
.btn--sm .icon { width: 16px; height: 16px; }
.btn--lg { padding: 1.06rem 2rem; min-height: 54px; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* Admin-authored labels can be long; wrapping beats overflowing. */
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
}

/* Icon-only control. */
.btn--icon { padding: 0; width: 42px; height: 42px; min-height: 0; border-radius: var(--r-sm); }

/* Text link with an animated underline. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--primary);
  font-weight: 600;
  font-size: .93rem;
  padding-block-end: 2px;
  width: fit-content;
}
.link-arrow::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t) var(--ease);
}
html[dir="rtl"] .link-arrow::after { transform-origin: right center; }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
html[dir="rtl"] .link-arrow .icon { transform: scaleX(-1); }
.link-arrow:hover .icon { transform: translateX(4px); }
html[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); }

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .82rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
}
.chip--accent { border-color: var(--primary-line); color: var(--primary); background: var(--primary-soft); }
.chip .icon { width: 14px; height: 14px; }

/* Eyebrow — small labelled heading above a section title. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-num);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-block-end: .95rem;
}
html[lang="ar"] .eyebrow {
  font-family: var(--font-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: .88rem;
  font-weight: 600;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
/* An index already anchors the line — a rule as well is one mark too many. */
.eyebrow:has(.sec-index)::before { display: none; }

/* --------------------------------------------------------------------------
   6. Motion & utilities
   -------------------------------------------------------------------------- */
/* The start offset travels in a custom property rather than in competing
   `transform` declarations. The direction overrides used to out-specify
   `.is-in`, so in Arabic every left/right reveal stayed offset by 26px
   for good — the section never settled into alignment. */
[data-reveal] {
  --rv-x: 0px;
  --rv-y: 22px;
  opacity: 0;
  transform: translate(var(--rv-x), var(--rv-y));
  transition: opacity .68s var(--ease-out) var(--reveal-delay, 0ms),
              transform .68s var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { --rv-y: 0px; }
[data-reveal="left"]  { --rv-x: -26px; --rv-y: 0px; }
[data-reveal="right"] { --rv-x: 26px;  --rv-y: 0px; }
html[dir="rtl"] [data-reveal="left"]  { --rv-x: 26px; }
html[dir="rtl"] [data-reveal="right"] { --rv-x: -26px; }
/* Nothing else sets `transform`, so this always wins once revealed. */
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 999;
  padding: .8rem 1.3rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 1rem; }


/* --------------------------------------------------------------------------
   7. Header & navigation
   A slim bar in three zones — brand · centred navigation · controls — laid
   out on a grid so the navigation stays optically centred in either
   language. Direction comes from the document: RTL needs no overrides.
   -------------------------------------------------------------------------- */
.site-header {
  --hdr-shadow: 0 14px 36px -26px rgba(0, 0, 0, .95);
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-block-end: 1px solid transparent;
  transition: height var(--t) var(--ease), background-color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
:root[data-theme="light"] .site-header { --hdr-shadow: 0 12px 32px -24px rgba(15, 18, 28, .28); }

/* At the top of a hero page the header dissolves into the artwork. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 5, 10, .72), transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--background) 72%, transparent), transparent);
  opacity: 1;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}

/* The header element itself never paints: the bar inside it does. */
.site-header.is-stuck { border-block-end-color: transparent; box-shadow: none; }
.site-header.is-stuck::before,
body:not(.is-home) .site-header::before,
html.nav-open .site-header::before { opacity: 0; }

.header-inner {
  width: min(100% - (var(--gutter) * 2), var(--max-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: height var(--t) var(--ease), padding var(--t) var(--ease),
              background-color var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

/* Floating capsule: it detaches from the top edge once the page moves, and
   on inner pages — which have no hero to dissolve into — it is there from
   the first frame. Glass, a hairline and a whisper of shadow. */
.site-header.is-stuck .header-inner,
body:not(.is-home) .header-inner {
  height: 56px;
  padding-inline: .7rem;
  border-color: var(--border);
  background-color: rgba(7, 8, 13, .78);
  background-color: color-mix(in srgb, var(--background) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--hdr-shadow);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-stuck .header-inner,
  body:not(.is-home) .header-inner { background-color: var(--background-alt); }
}

/* One capsule at a time: the nav pill flattens into the floating bar so the
   two never read as a ring inside a ring. */
.site-header.is-stuck .nav-list,
body:not(.is-home) .nav-list { background-color: transparent; border-color: transparent; }

/* --- Brand (the generic rules are shared with the footer) -------------- */
.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; min-width: 0; }
.brand img { height: 38px; width: auto; max-width: 190px; object-fit: contain; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.brand-mark .dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--primary);
  box-shadow: 0 0 14px var(--primary-glow);
  margin-inline-end: .18rem;
  flex: none;
}
.brand-mark span { color: var(--text-primary); }
.brand-mark b { color: var(--primary); font-weight: 700; }

.site-header .brand {
  justify-self: start;
  border-radius: var(--r-xs);
  transition: opacity var(--t-fast) var(--ease);
}
.site-header .brand:hover { opacity: .86; }
.site-header .brand-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  transition: height var(--t) var(--ease);
}
/* The original mark, with its ink copy for the light theme. */
.brand-logo--on-light { display: none; }
:root[data-theme="light"] .brand-logo--on-dark { display: none; }
:root[data-theme="light"] .brand-logo--on-light { display: block; }

/* --- Desktop navigation ------------------------------------------------ */
.nav { justify-self: center; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
}
.nav-link {
  --nav-pad: clamp(.85rem, 1.1vw, 1.1rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-inline: var(--nav-pad);
  border-radius: var(--r-pill);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
html[lang="ar"] .nav-link { font-size: .95rem; }
.nav-link:focus-visible { border-radius: var(--r-pill); outline-offset: 0; }

/* Hover draws an underline out from the centre; the current page keeps a
   short fixed tick with a faint glow. One accent colour, nothing else. */
.nav-link::after {
  content: '';
  position: absolute;
  inset-inline: var(--nav-pad);
  inset-block-end: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0;
  transform: scaleX(0);
  transition: transform var(--t) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--primary-text); }
.nav-link:hover::after { opacity: 1; transform: scaleX(1); }

.nav-link.is-active { color: var(--text-primary); font-weight: 600; background-color: var(--primary-soft); }
.nav-link.is-active::after {
  inset-inline: calc(50% - 9px);
  opacity: 1;
  transform: none;
  box-shadow: 0 0 10px var(--primary-glow);
}
.nav-link.is-active:hover { color: var(--primary-text); }

/* A trigger is a button, so it needs the link's typography back. */
.nav-trigger {
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
html[lang="ar"] .nav-trigger { font-size: .95rem; }
.nav-has-menu.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition-delay: 0s;
}
.nav-has-menu.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }

/* The drawer row that opens the list. */
.mnav-trigger {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
html[lang="ar"] .mnav-trigger { font-size: 1.04rem; }
.mnav-caret {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--t) var(--ease-out), color var(--t-fast) var(--ease);
}
.mnav-trigger[aria-expanded="true"] { color: var(--primary-text); }
.mnav-trigger[aria-expanded="true"] .mnav-caret { transform: rotate(180deg); color: var(--primary); }
/* --- "Our work" menu: the portfolio categories, one click away -------- */
.nav-has-menu { position: relative; }
.nav-has-menu > .nav-link { gap: .32rem; }
.nav-caret {
  width: 13px;
  height: 13px;
  opacity: .65;
  transition: transform var(--t) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-has-menu:hover .nav-caret,
.nav-has-menu:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }

.nav-menu {
  position: absolute;
  inset-block-start: calc(100% + 13px);
  inset-inline-start: 50%;
  z-index: 30;
  min-width: 272px;
  padding: .4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-7px);
  transition: opacity .2s var(--ease), transform .26s var(--ease-out), visibility 0s linear .26s;
}
/* Bridges the gap under the link so the menu survives the trip down. */
.nav-menu::before {
  content: '';
  position: absolute;
  inset-block-start: -15px;
  inset-inline: 0;
  height: 15px;
}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition-delay: 0s;
}

.nav-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 42px;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav-menu-item:hover,
.nav-menu-item:focus-visible { color: var(--text-primary); background-color: var(--glass-2); }
.nav-menu-item:focus-visible { border-radius: var(--r-sm); outline-offset: -2px; }
.nav-menu-n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding-inline: .3rem;
  border-radius: 6px;
  background: var(--glass);
  font-size: .7rem;
  color: var(--text-faint);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav-menu-item:hover .nav-menu-n { color: var(--primary-text); background-color: var(--primary-soft); }

.nav-menu-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: .3rem;
  padding: .6rem .75rem;
  border-block-start: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .87rem;
  font-weight: 600;
  color: var(--primary-text);
}
.nav-menu-all .icon { width: 15px; height: 15px; transition: transform var(--t) var(--ease); }
html[dir="rtl"] .nav-menu-all .icon { transform: scaleX(-1); }
.nav-menu-all:hover .icon { transform: translateX(4px); }
html[dir="rtl"] .nav-menu-all:hover .icon { transform: scaleX(-1) translateX(4px); }

/* --- The same categories inside the drawer --------------------------- */
.mnav-has-sub { position: relative; }
.mnav-has-sub > .mnav-link { padding-inline-end: 2.6rem; }
.mnav-has-sub > .mnav-link .mnav-go { display: none; }
.mnav-sub-toggle {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.mnav-sub-toggle:hover { color: var(--text-primary); background-color: var(--glass); }
.mnav-sub-toggle .icon { transition: transform var(--t) var(--ease-out); }
.mnav-sub-toggle[aria-expanded="true"] { color: var(--primary); }
.mnav-sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.mnav-sub {
  display: grid;
  gap: .1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s var(--ease-out);
}
.mnav-sub.is-open { max-height: 420px; }
.mnav-sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  min-height: 44px;
  padding: .5rem .8rem .5rem 3.05rem;
  border-radius: var(--r-sm);
  font-size: .92rem;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
html[dir="rtl"] .mnav-sub a { padding: .5rem 3.05rem .5rem .8rem; }
.mnav-sub a:hover { color: var(--primary-text); background-color: var(--glass); }
.mnav-sub a .num { font-size: .72rem; color: var(--text-faint); }
/* --- Controls ---------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: .5rem;
}

/* Shared round control: language, theme, menu. */
.hdr-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.hdr-control:hover,
.hdr-control[aria-expanded="true"] {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background-color: var(--glass-2);
}
.hdr-control:focus-visible { border-radius: var(--r-pill); }
.hdr-control .icon {
  width: 17px; height: 17px;
  transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}

/* --- Language menu ----------------------------------------------------- */
.lang-menu { position: relative; }
.lang-toggle { padding-inline: .75rem .6rem; }
.lang-toggle:hover .icon--globe,
.lang-menu.is-open .icon--globe { color: var(--primary); }
.lang-code {
  font-family: var(--font-num);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
}
.lang-code[lang="ar"] { font-family: var(--font-ar); font-size: .86rem; letter-spacing: 0; }
.lang-toggle .icon--caret { width: 13px; height: 13px; opacity: .7; transform: rotate(180deg); }
.lang-menu.is-open .lang-toggle .icon--caret { transform: none; }

.lang-list {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 5;
  min-width: 190px;
  padding: .35rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  transition: opacity .2s var(--ease), transform .24s var(--ease-out), visibility 0s linear .24s;
}
.lang-menu.is-open .lang-list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.lang-list a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 42px;
  padding: .45rem .7rem;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-list a[lang="ar"] { font-family: var(--font-ar); }
.lang-list a[lang="en"] { font-family: var(--font-en); }
.lang-list a:hover { background-color: var(--glass-2); color: var(--text-primary); }
.lang-list a:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); background-color: var(--glass-2); }
.lang-list a[aria-current] { color: var(--text-primary); }
.lang-list .icon--check { width: 16px; height: 16px; margin-inline-start: auto; color: var(--primary); opacity: 0; }
.lang-list a[aria-current] .icon--check { opacity: 1; }

/* --- Theme toggle ------------------------------------------------------ */
.theme-toggle { position: relative; width: 40px; overflow: hidden; }
.theme-toggle .icon {
  position: absolute;
  width: 18px; height: 18px;
  transition: transform .35s var(--ease-out), opacity .25s var(--ease), color var(--t-fast) var(--ease);
}
.theme-toggle:hover .icon { color: var(--primary); }
.theme-toggle .icon--moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
:root[data-theme="light"] .theme-toggle .icon--sun  { opacity: 0; transform: rotate(70deg) scale(.5); }
:root[data-theme="light"] .theme-toggle .icon--moon { opacity: 1; transform: none; }

/* --- Call to action ---------------------------------------------------- */
.header-cta.btn {
  min-height: 40px;
  padding: .6rem 1.25rem;
  font-size: .9rem;
  box-shadow: 0 8px 22px -14px var(--primary-glow);
}
.header-cta.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -12px var(--primary-glow), 0 0 0 4px var(--primary-soft);
}
.header-cta.btn:focus-visible { border-radius: var(--r-pill); }

/* --- Menu toggle: two lines that fold into a cross --------------------- */
.burger { display: none; width: 40px; }
.burger-lines { position: relative; display: block; width: 16px; height: 10px; }
.burger-lines i {
  position: absolute;
  inset-inline: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t) var(--ease-out), top var(--t) var(--ease-out);
}
.burger-lines i:first-child { top: 0; }
.burger-lines i:last-child  { top: calc(100% - 1.6px); }
html.nav-open .burger {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background-color: var(--glass-2);
}
html.nav-open .burger-lines i { top: calc(50% - .8px); }
html.nav-open .burger-lines i:first-child { transform: rotate(45deg); }
html.nav-open .burger-lines i:last-child  { transform: rotate(-45deg); }

/* --- Sliding hover indicator ------------------------------------------ */
.nav { position: relative; }
.nav-ind {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--ind-w, 0);
  transform: translateX(var(--ind-x, 0));
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--glass-2);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s var(--ease-out), width .32s var(--ease-out), opacity .2s var(--ease);
}
.nav.has-ind .nav-ind { opacity: 1; }
.nav-link { z-index: 1; }

/* --- Mobile drawer: a full-height panel sliding in from the end edge --- */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 201;
  background: rgba(3, 4, 8, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
:root[data-theme="light"] .nav-scrim { background: rgba(11, 14, 22, .32); }
html.nav-open .nav-scrim { opacity: 1; visibility: visible; }

.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  /* Physical right in both languages, as specified. */
  right: 0;
  left: auto;
  z-index: 205;
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  padding: 1.1rem clamp(1.1rem, 4vw, 1.4rem) max(1.2rem, env(safe-area-inset-bottom));
  background: linear-gradient(200deg, var(--surface), var(--background) 64%);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  /* At rest the panel stays inside the viewport. Parking it off-screen
     with a transform widened the document on phones, which shifted every
     page sideways; the slide now lives in the opening animation instead. */
  transform: none;
  transition: opacity .26s var(--ease), visibility 0s linear .26s;
}
html.nav-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  animation: drawerIn .4s var(--ease-out) both;
}
@keyframes drawerIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
html.nav-open,
body.nav-open { overflow: hidden; }

/* Logo and close button share the drawer's top edge. */
.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid var(--border);
}
.mnav-brand .brand-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.mnav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--glass);
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}
.mnav-close:hover {
  color: var(--primary-text);
  border-color: var(--primary-line);
  background-color: var(--primary-soft);
  transform: rotate(90deg);
}
.mnav-close:focus-visible { border-radius: 50%; }

.mnav-nav { flex: 1 1 auto; padding-block-start: 1rem; }
.mnav-list { display: flex; flex-direction: column; gap: .2rem; }
.mnav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  /* Comfortably above the 44px minimum hit area. */
  min-height: 52px;
  padding: .6rem .8rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
html[lang="ar"] .mnav-link { font-size: 1.04rem; }
.mnav-ico {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--glass);
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.mnav-ico .icon { width: 18px; height: 18px; }
.mnav-text { flex: 1 1 auto; min-width: 0; }
.mnav-go { flex: none; width: 16px; height: 16px; color: var(--primary); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
html[dir="rtl"] .mnav-go { transform: scaleX(-1); }

.mnav-link:hover { color: var(--text-primary); background-color: var(--glass); }
.mnav-link:hover .mnav-ico { color: var(--primary); border-color: var(--primary-line); }
.mnav-link:hover .mnav-go { opacity: .75; }
.mnav-link:focus-visible { border-radius: var(--r-md); outline-offset: -2px; }

/* Current page: orange type, a soft orange bed and a lit edge marker. */
.mnav-link.is-active { color: var(--primary-text); background-color: var(--primary-soft); }
.mnav-link.is-active .mnav-ico {
  color: var(--primary);
  border-color: var(--primary-line);
  background-color: var(--primary-soft);
}
.mnav-link.is-active .mnav-go { opacity: 1; }
.mnav-link.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 13px;
  width: 3px;
  border-radius: 3px;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* Links arrive one after another, just behind the panel itself. */
.mnav-list li,
.mnav-foot > * {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .32s var(--ease), transform .4s var(--ease-out);
}
html[dir="rtl"] .mnav-list li,
html[dir="rtl"] .mnav-foot > * { transform: translateX(-14px); }
html.nav-open .mnav-list li,
html.nav-open .mnav-foot > * { opacity: 1; transform: none; }
html.nav-open .mnav-list li:nth-child(1) { transition-delay: .10s; }
html.nav-open .mnav-list li:nth-child(2) { transition-delay: .14s; }
html.nav-open .mnav-list li:nth-child(3) { transition-delay: .18s; }
html.nav-open .mnav-list li:nth-child(4) { transition-delay: .22s; }
html.nav-open .mnav-list li:nth-child(5) { transition-delay: .26s; }
html.nav-open .mnav-list li:nth-child(6) { transition-delay: .30s; }
html.nav-open .mnav-foot > *:nth-child(1) { transition-delay: .34s; }
html.nav-open .mnav-foot > *:nth-child(2) { transition-delay: .38s; }

.mnav-foot {
  margin-block-start: auto;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--border);
  display: grid;
  gap: .75rem;
}
.mnav-tools { display: flex; align-items: center; gap: .55rem; }

/* --- Compact AR / EN pill, shared by the mobile bar and the drawer ----- */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: 3px;
  padding-inline-start: .55rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
}
.lang-pill-ico { display: inline-flex; color: var(--text-muted); margin-inline-end: .3rem; }
.lang-pill-ico .icon { width: 15px; height: 15px; }
.lang-pill a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding-inline: .45rem;
  border-radius: var(--r-pill);
  font-family: var(--font-num);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* Each label in its own script: العربية in the Arabic face, EN in the latin one. */
.lang-pill a[lang="ar"] { font-family: var(--font-ar); font-size: .8rem; letter-spacing: 0; }
.lang-pill a[lang="en"] { font-family: var(--font-num); letter-spacing: .06em; }
.lang-pill a:hover { color: var(--text-primary); }
.lang-pill a[aria-current] {
  color: #FFFFFF;
  background: var(--primary);
  box-shadow: 0 6px 16px -8px var(--primary-glow);
}
.lang-pill a:focus-visible { border-radius: var(--r-pill); outline-offset: -2px; }

/* In the bar it appears only where the dropdown steps aside. */
.lang-pill--bar { display: none; flex: none; }
/* In the drawer it spans the row beside the theme switch. */
.lang-pill--block { display: flex; flex: 1 1 auto; padding: 4px; padding-inline-start: .65rem; }
.lang-pill--block a { flex: 1 1 0; height: 36px; }
/* Theme as a switch: the knob sits on the active mode. */
.theme-switch {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 34px 34px;
  grid-template-rows: 36px;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-faint);
}
.theme-switch:focus-visible { border-radius: var(--r-pill); }
.theme-switch-knob {
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 4px;
  width: 34px;
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  transition: inset-inline-start var(--t) var(--ease-out), background-color var(--t) var(--ease);
}
:root[data-theme="light"] .theme-switch-knob { inset-inline-start: calc(100% - 38px); background: var(--surface); }
.theme-switch .icon { position: relative; z-index: 1; width: 17px; height: 17px; transition: color var(--t) var(--ease); }
:root:not([data-theme="light"]) .theme-switch .icon--moon,
:root[data-theme="light"] .theme-switch .icon--sun { color: var(--primary); }

.mnav-cta { min-height: 50px; font-size: .98rem; }

/* --- Responsive -------------------------------------------------------- */
@media (min-width: 1140px) {
  .site-header.is-stuck { height: 64px; }
  .site-header.is-stuck .brand-logo { height: 36px; }
  .mobile-nav, .nav-scrim { display: none; }
}
/* Narrow desktops: tighten gradually before the menu collapses. */
@media (max-width: 1319px) {
  .header-inner { gap: 1.1rem; }
  .nav-link { --nav-pad: .8rem; }
}
/* Tablets: the links move into the panel; language, theme and CTA stay. */
@media (max-width: 1139px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header-inner { grid-template-columns: 1fr auto; }
  .site-header .brand-logo { height: 36px; }
}
/* Phones: logo · language · theme · menu. The CTA waits in the drawer. */
@media (max-width: 639px) {
  .header-actions .lang-menu,
  .header-actions .header-cta { display: none; }
  .header-actions .lang-pill--bar { display: inline-flex; }
  .header-actions { gap: .4rem; }
  .site-header.is-stuck .header-inner,
  body:not(.is-home) .header-inner { height: 52px; padding-inline: .5rem; }
  .site-header .brand-logo { height: 32px; }
}
@media (max-width: 439px) {
  .lang-pill--bar { padding-inline-start: 4px; }
  .lang-pill--bar .lang-pill-ico { display: none; }
  .lang-pill--bar a { min-width: 0; padding-inline: .4rem; }
  .site-header .brand { min-width: 0; }
  .site-header .brand-logo { max-width: 100%; }
}
@media (max-width: 379px) {
  .header-actions { gap: .32rem; }
  .lang-pill--bar a { padding-inline: .32rem; font-size: .74rem; }
  .lang-pill--bar a[lang="ar"] { font-size: .76rem; }
  .site-header .brand-logo { height: 29px; }
}
@media (max-width: 339px) {
  .header-actions { gap: .28rem; }
  .hdr-control { height: 36px; min-width: 36px; }
  .burger { width: 36px; }
  .site-header .brand-logo { height: 26px; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem)) clamp(3rem, 7vw, 6rem);
  min-height: min(100svh, 940px);
  overflow: hidden;
  background: var(--background);
}

/* --- Ambient background stack ----------------------------------------- */
.hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

.hero-bg .beam {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}
.hero-bg .beam--primary {
  inset-inline-start: -12%;
  inset-block-start: -18%;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--primary-glow), transparent 66%);
  opacity: .85;
}
.hero-bg .beam--secondary {
  inset-inline-end: -14%;
  inset-block-end: -22%;
  width: min(58vw, 660px);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--secondary-soft), transparent 68%);
  opacity: .7;
}

/* Fine technical grid, masked so it never fights the copy. */
.hero-bg .mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 8%, transparent 72%);
}

/* When the admin supplies a poster or video the ambient beams step back,
   so the hero never stacks two competing background treatments. */
.hero--media .hero-bg .beam { opacity: .4; }
.hero--media .hero-bg .mesh { opacity: .5; }

/* Optional poster / video supplied from the dashboard. */
.hero-media { position: absolute; inset: 0; z-index: -1; opacity: .22; }
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--t-slow) var(--ease);
}
.hero-media video { position: absolute; inset: 0; opacity: 0; }
.hero-media video.is-live { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--background) 4%, transparent 55%),
    linear-gradient(to right, var(--background) 0%, transparent 62%);
  pointer-events: none;
}
html[dir="rtl"] .hero-overlay {
  background:
    linear-gradient(to top, var(--background) 4%, transparent 55%),
    linear-gradient(to left, var(--background) 0%, transparent 62%);
}

/* This element also carries .container, which owns the width and the page
   gutter. Never set `width` here — being later in the file, it would win
   and the hero would run edge to edge with no gutter at all.
   `min-width: 0` keeps it shrinkable as a flex item of .hero. */
.hero-inner { position: relative; z-index: 2; min-width: 0; }

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-content { min-width: 0; max-width: 40rem; }

/* --- Availability badge ------------------------------------------------ */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .95rem .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-block-end: clamp(1.1rem, 2.4vw, 1.7rem);
  max-width: 100%;
}
html[dir="rtl"] .hero-badge { padding: .45rem .7rem .45rem .95rem; }
.hero-badge .pulse {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #35D07F;
  flex: none;
}
.hero-badge .pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #35D07F;
  opacity: .5;
  animation: pulseRing 2.4s var(--ease-out) infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(.6); opacity: .6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- Headline ---------------------------------------------------------- */
.hero-title {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-block-end: clamp(1rem, 2.2vw, 1.5rem);
  text-wrap: balance;
}
html[lang="ar"] .hero-title {
  font-size: clamp(1.85rem, 4.9vw, 3.5rem);
  line-height: 1.44;
  letter-spacing: 0;
}
.hero-title .line { display: block; }

.hero-lead {
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 54ch;
  margin-block-end: clamp(1.6rem, 3vw, 2.3rem);
}
html[lang="ar"] .hero-lead { line-height: 2.1; max-width: 50ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

/* --- Trust strip ------------------------------------------------------- */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: clamp(1.3rem, 2.6vw, 1.9rem);
  border-block-start: 1px solid var(--border);
}
.hero-fact { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.hero-fact .v {
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-fact .v em { font-style: normal; color: var(--primary); }
.hero-fact .l { font-size: .86rem; color: var(--text-muted); line-height: 1.45; max-width: 16ch; }

/* --- Composed visual --------------------------------------------------- */
.hero-visual {
  position: relative;
  min-width: 0;
  perspective: 1400px;
}

/* A single uploaded image, framed. */
.hero-figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.hero-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; }
.hero-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, transparent 55%, var(--primary-soft));
  pointer-events: none;
}

/* The generated fallback: an abstract "product" panel. */
.hero-panel {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: linear-gradient(155deg, var(--surface-2), var(--surface) 62%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-line), transparent);
}
.hero-panel-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.1rem;
  border-block-end: 1px solid var(--border);
  background: var(--glass);
}
.hero-panel-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-3);
  flex: none;
}
.hero-panel-bar i:first-child { background: var(--primary); }
.hero-panel-bar .addr {
  margin-inline-start: .7rem;
  flex: 1 1 auto;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  padding-inline: .7rem;
  font-family: var(--font-num);
  font-size: .68rem;
  color: var(--text-faint);
  letter-spacing: .04em;
  overflow: hidden;
  white-space: nowrap;
  direction: ltr;
}
.hero-panel-body { padding: clamp(1.1rem, 2.4vw, 1.6rem); display: grid; gap: .9rem; }
.hero-skel { height: 10px; border-radius: 99px; background: var(--surface-3); }
.hero-skel--title { height: 15px; width: 62%; background: linear-gradient(90deg, var(--primary), var(--primary-deep)); opacity: .85; }
.hero-skel--w80 { width: 80%; }
.hero-skel--w60 { width: 60%; }
.hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-block-start: .4rem; }
.hero-tile {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--glass);
  padding: .85rem .7rem;
  display: grid;
  gap: .45rem;
  justify-items: center;
  text-align: center;
}
.hero-tile .icon { width: 19px; height: 19px; color: var(--primary); }
.hero-tile span { font-size: .68rem; color: var(--text-muted); line-height: 1.3; }

/* Floating metric chips around the panel. */
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .68rem .95rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: rgba(19, 23, 34, .92);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: floatChip 6s var(--ease-in-out) infinite alternate;
}
.hero-chip .icon { width: 17px; height: 17px; color: var(--primary); }
.hero-chip .t { min-width: 0; }
.hero-chip b { font-family: var(--font-num); font-size: .95rem; font-weight: 700; display: block; line-height: 1.2; }
.hero-chip span { font-size: .72rem; color: var(--text-muted); }
/* Sits against the side of the panel, clear of the browser-chrome row so
   it never covers the address line. */
.hero-chip--a { inset-block-start: 18%; inset-inline-end: -1.1rem; }
.hero-chip--b { inset-block-end: -1.5rem; inset-inline-start: -1.2rem; animation-delay: -3s; }

@keyframes floatChip {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* --- Scroll cue -------------------------------------------------------- */
.hero-cue {
  position: absolute;
  inset-block-end: 1.6rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-num);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}
html[dir="rtl"] .hero-cue { transform: translateX(50%); }
html[lang="ar"] .hero-cue { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: .74rem; }
.hero-cue .bar {
  position: relative;
  width: 1px;
  height: 34px;
  background: var(--border-strong);
  overflow: hidden;
}
.hero-cue .bar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 12px;
  background: var(--primary);
  animation: cueDrop 2.1s var(--ease-in-out) infinite;
}
@keyframes cueDrop {
  0%   { transform: translateY(-14px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* --- Hero responsiveness ---------------------------------------------- */
@media (max-width: 1023px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: clamp(2.4rem, 6vw, 3.4rem); }
  .hero-content { max-width: 100%; }
  .hero-visual { max-width: 520px; margin-inline: auto; width: 100%; }
  .hero-chip--a { inset-inline-end: -.2rem; }
  .hero-chip--b { inset-inline-start: -.2rem; }
}
@media (max-width: 767px) {
  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 2.2rem) 3.2rem;
    text-align: start;
  }
  .hero-cue { display: none; }
  /* They would hang off the viewport here, and .hero-facts already shows
     the same two figures immediately above. */
  .hero-chip { display: none; }
  .hero-facts { gap: 1.1rem 1.6rem; }
  .hero-fact .v { font-size: 1.4rem; }
  .hero-actions { gap: .65rem; }
  .hero-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 479px) {
  .hero-visual { max-width: none; }
  .hero-chip { padding: .55rem .75rem; }
  .hero-chip b { font-size: .85rem; }
  .hero-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .hero-tile { padding: .7rem .4rem; }
}
/* --- Cinematic hero: the footage is the whole stage -------------------- */
/* Local token overrides: the copy always sits on graded video, so it keeps
   light-on-dark values in either theme while the page around it flips. */
.hero--cinematic {
  --text-primary:   #F5F7FB;
  --text-secondary: #C6CCD9;
  --text-muted:     #9BA4B5;
  --border:         rgba(255, 255, 255, .14);
  --border-strong:  rgba(255, 255, 255, .26);
  --glass:          rgba(255, 255, 255, .07);
  --glass-2:        rgba(255, 255, 255, .12);
  min-height: min(100svh, 1000px);
  background: #05060A;
}

/* Full-bleed footage — never cropped into a card, never a split screen. */
.hero--cinematic .hero-media { opacity: 1; z-index: -3; }
.hero--cinematic .hero-bg { opacity: .45; }
.hero--cinematic .hero-media img,
.hero--cinematic .hero-media video { animation: heroDrift 28s var(--ease-in-out) infinite alternate; }
@keyframes heroDrift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.11); }
}

/* The grade: a vertical scrim for depth, a directional one for the copy. */
.hero--cinematic .hero-overlay {
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(4, 5, 10, .86) 0%, rgba(4, 5, 10, .30) 34%, rgba(4, 5, 10, .68) 76%, var(--background) 100%),
    linear-gradient(to right, rgba(4, 5, 10, .92) 2%, rgba(4, 5, 10, .54) 46%, rgba(4, 5, 10, .10) 80%);
}
html[dir="rtl"] .hero--cinematic .hero-overlay {
  background:
    linear-gradient(to bottom, rgba(4, 5, 10, .86) 0%, rgba(4, 5, 10, .30) 34%, rgba(4, 5, 10, .68) 76%, var(--background) 100%),
    linear-gradient(to left, rgba(4, 5, 10, .92) 2%, rgba(4, 5, 10, .54) 46%, rgba(4, 5, 10, .10) 80%);
}

/* A whisper of brand orange, and a lit hairline where the hero ends. */
.hero-grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 12% 26%, var(--primary-soft), transparent 72%),
    radial-gradient(40% 46% at 88% 88%, var(--secondary-soft), transparent 74%);
}
html[dir="rtl"] .hero-grade {
  background:
    radial-gradient(58% 52% at 88% 26%, var(--primary-soft), transparent 72%),
    radial-gradient(40% 46% at 12% 88%, var(--secondary-soft), transparent 74%);
}
.hero--cinematic::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--primary-line) 28%, var(--primary-line) 72%, transparent);
  pointer-events: none;
}

/* One column: the copy owns the frame. */
.hero--cinematic .hero-layout { grid-template-columns: minmax(0, 1fr); }
.hero--cinematic .hero-content { max-width: min(100%, 44rem); }
.hero--cinematic .hero-badge {
  margin-block-end: clamp(1rem, 1.7vw, 1.35rem);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero--cinematic .hero-title {
  font-size: clamp(2.3rem, 5.8vw, 4.3rem);
  margin-block-end: clamp(.85rem, 1.5vw, 1.2rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
html[lang="ar"] .hero--cinematic .hero-title { font-size: clamp(2rem, 5.1vw, 3.75rem); }
.hero--cinematic .hero-lead {
  max-width: 52ch;
  margin-block-end: 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .4);
}
.hero--cinematic .hero-actions {
  gap: .9rem;
  margin-block-start: clamp(1.5rem, 2.3vw, 2.1rem);
}
/* The outlined button sits on moving footage — glass keeps it legible. */
.hero--cinematic .hero-actions .btn--ghost {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Statistics as one glass strip rather than three loose figures. */
.hero--cinematic .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin-block-start: clamp(2.4rem, 3.6vw, 3.2rem);
  padding-block-start: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(8, 10, 16, .42);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
}
.hero--cinematic .hero-fact {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .22rem;
  padding: 1rem clamp(1.2rem, 2.5vw, 1.9rem);
  border-inline-end: 1px solid var(--border);
}
.hero--cinematic .hero-fact:last-child { border-inline-end: 0; }
.hero--cinematic .hero-fact .l { color: var(--text-muted); max-width: none; font-size: .82rem; }

/* Entrance: each line rises a beat after the one above it. */
@media (prefers-reduced-motion: no-preference) {
  .hero--cinematic .hero-badge,
  .hero--cinematic .hero-title,
  .hero--cinematic .hero-lead,
  .hero--cinematic .hero-actions,
  .hero--cinematic .hero-facts {
    animation: heroRise .9s var(--ease-out) backwards;
  }
  .hero--cinematic .hero-badge   { animation-delay: .06s; }
  .hero--cinematic .hero-title   { animation-delay: .15s; }
  .hero--cinematic .hero-lead    { animation-delay: .25s; }
  .hero--cinematic .hero-actions { animation-delay: .35s; }
  .hero--cinematic .hero-facts   { animation-delay: .45s; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  .hero--cinematic .hero-content { max-width: 100%; }
}
/* Phones: one screen, less type, a heavier grade under the copy. The
   footage is untouched — only what sits on top of it changes. */
@media (max-width: 767px) {
  .hero--cinematic {
    /* Height follows the content: a viewport-sized floor would leave the
       leftover height as black space under the statistics, because the
       hero centres its content. The padding below is the whole gap. */
    min-height: 0;
    padding-block: calc(var(--header-h) + 1.8rem) 1.6rem;
  }

  /* A pool of black under the text, thinning towards the top so the
     footage still reads. Same grade in both directions. */
  .hero--cinematic .hero-overlay,
  html[dir="rtl"] .hero--cinematic .hero-overlay {
    background:
      radial-gradient(132% 60% at 50% 88%, rgba(4, 5, 10, .94) 16%, rgba(4, 5, 10, .62) 58%, transparent 100%),
      linear-gradient(to bottom, rgba(4, 5, 10, .78) 0%, rgba(4, 5, 10, .40) 26%, rgba(4, 5, 10, .74) 70%, var(--background) 100%);
  }
  /* Ambient orange: light in the frame, never a colour wash. */
  .hero--cinematic .hero-grade,
  html[dir="rtl"] .hero--cinematic .hero-grade {
    background:
      radial-gradient(76% 32% at 50% 10%, var(--primary-soft), transparent 76%),
      radial-gradient(64% 28% at 50% 97%, var(--primary-soft), transparent 78%);
  }

  /* Tighter rhythm: badge → headline → one line → buttons. */
  .hero--cinematic .hero-badge { font-size: .78rem; margin-block-end: .9rem; }
  .hero--cinematic .hero-title,
  html[lang="ar"] .hero--cinematic .hero-title {
    font-size: clamp(1.72rem, 7.2vw, 2.25rem);
    line-height: 1.5;
    margin-block-end: .7rem;
  }
  .hero--cinematic .hero-lead,
  html[lang="ar"] .hero--cinematic .hero-lead {
    font-size: .95rem;
    line-height: 1.8;
    max-width: 36ch;
    margin-block-end: 0;
  }
  /* The sentence's closing clause waits for a wider screen. */
  .hero-lead-tail { display: none; }

  /* Two balanced, thumb-sized buttons sharing one row. */
  .hero--cinematic .hero-actions { gap: .6rem; margin-block-start: 1.25rem; }
  .hero--cinematic .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    padding-inline: .9rem;
    font-size: .93rem;
  }

  /* Statistics: one compact card, three columns, quiet enough to sit
     under the buttons rather than compete with them. */
  .hero--cinematic .hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin-block-start: 1.5rem;
    border-radius: var(--r-md);
    background: rgba(8, 10, 16, .5);
  }
  .hero--cinematic .hero-fact {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .12rem;
    padding: .72rem .4rem;
  }
  .hero--cinematic .hero-fact .v { font-size: 1.1rem; }
  .hero--cinematic .hero-fact .l { font-size: .67rem; line-height: 1.4; }
}
/* The narrowest phones give each button its own row. */
@media (max-width: 359px) {
  .hero--cinematic .hero-actions .btn { flex: 1 1 100%; }
  .hero--cinematic .hero-fact { padding-inline: .25rem; }
  .hero--cinematic .hero-fact .l { font-size: .63rem; }
}


/* --------------------------------------------------------------------------
   9. Section components
   -------------------------------------------------------------------------- */

/* --- Section header (with optional index number) ----------------------- */
.sec-head { max-width: 64ch; margin-block-end: clamp(2rem, 4vw, 3.4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .eyebrow::before { display: none; }
/* The heading block stays whole; only the action sits opposite it. */
.sec-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
.sec-head--split .sec-head-main { max-width: 62ch; }
.sec-head-action { padding-block-end: .3rem; }
@media (max-width: 767px) {
  .sec-head--split { grid-template-columns: 1fr; align-items: start; }
}
.sec-head .lead { margin-block-start: 1rem; }
.sec-head--center .lead { margin-inline: auto; }

/* The "_01" index borrowed from editorial layouts. */
.sec-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: .12rem .4rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-xs);
  background: var(--primary-soft);
  font-family: var(--font-num);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--primary);
  margin-inline-end: .6rem;
}

/* --- Statistics band --------------------------------------------------- */
.stats-band {
  position: relative;
  padding-block: clamp(2rem, 3.6vw, 3rem);
  border-block: 1px solid var(--border);
  background:
    radial-gradient(60% 140% at 50% 0%, var(--primary-soft), transparent 70%),
    var(--background-alt);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
}
.stat {
  padding: clamp(1.25rem, 2.6vw, 1.8rem) clamp(1rem, 2vw, 1.4rem);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  display: grid;
  gap: .4rem;
  justify-items: center;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.stat:hover { border-color: var(--primary-line); transform: translateY(-3px); }
.stat .icon { width: 20px; height: 20px; color: var(--primary); opacity: .85; }
.stat-value {
  font-family: var(--font-num);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text-primary);
}
.stat-label { font-size: .9rem; color: var(--text-muted); line-height: 1.45; }

/* --- Services: premium card grid --------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
/* A single soft accent wash instead of a heavy drop shadow. */
.svc-card::before {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  z-index: -1;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--primary-line); }
.svc-card:hover::before { opacity: 1; }

.svc-card .svc-top { display: flex; align-items: flex-start; gap: 1rem; }
.svc-card .svc-icon {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--primary);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}
.svc-card:hover .svc-icon { border-color: var(--primary-line); background: var(--primary-soft); transform: translateY(-2px); }
.svc-card .svc-icon .icon { width: 24px; height: 24px; }
.svc-card .svc-no {
  margin-inline-start: auto;
  font-family: var(--font-num);
  font-size: .8rem;
  color: var(--text-faint);
  letter-spacing: .08em;
}
.svc-card h3 { font-size: clamp(1.1rem, 1.7vw, 1.28rem); line-height: 1.4; }
.svc-card p { font-size: .93rem; color: var(--text-secondary); line-height: 1.78; }
html[lang="ar"] .svc-card p { line-height: 2; }
.svc-card .svc-tag {
  align-self: flex-start;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: var(--font-num);
}
html[lang="ar"] .svc-card .svc-tag { font-family: var(--font-ar); text-transform: none; letter-spacing: 0; font-size: .8rem; }
.svc-card .link-arrow { margin-block-start: auto; padding-block-start: .5rem; }

/* --- Why choose us: bento layout --------------------------------------- */
.why-wrap {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
  align-items: start;
}
.why-aside { position: sticky; top: calc(var(--header-h) + 30px); }
/* inline-flex so it hugs its content instead of stretching across an
   otherwise empty column. */
.why-aside .why-mark {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-block-start: 1.8rem;
  padding: .85rem 1.15rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
}
.why-aside .why-mark .icon { width: 26px; height: 26px; color: var(--primary); flex: none; }
.why-aside .why-mark p { font-size: .92rem; color: var(--text-secondary); }
.why-aside .why-mark b { color: var(--text-primary); }

.why-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.1rem);
}
.why-item {
  position: relative;
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.why-item:hover { border-color: var(--primary-line); transform: translateY(-3px); }
.why-item::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t) var(--ease);
}
html[dir="rtl"] .why-item::after {
  background: linear-gradient(270deg, var(--primary), transparent);
  transform-origin: right center;
}
.why-item:hover::after { transform: scaleX(1); }
.why-item .why-ic {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--primary);
  margin-block-end: 1rem;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}
.why-item:hover .why-ic { border-color: var(--primary-line); background: var(--primary-soft); transform: translateY(-3px); }
.why-item .why-ic .icon { width: 20px; height: 20px; }
.why-item h3 { font-size: 1.03rem; font-weight: 600; margin-block-end: .45rem; }
.why-item p { font-size: .9rem; color: var(--text-muted); line-height: 1.75; }

@media (max-width: 979px) {
  .why-wrap { grid-template-columns: 1fr; }
  .why-aside { position: static; }
}
@media (max-width: 599px) {
  .why-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

/* --- Filters ----------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: clamp(1.6rem, 3vw, 2.4rem);
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .58rem 1.1rem;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--t-fast) var(--ease);
}
.filter:hover { color: var(--text-primary); border-color: var(--border-strong); }
.filter.is-active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.filter .n { font-size: .76rem; opacity: .7; font-family: var(--font-num); }

/* --- Portfolio cards --------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.work-grid.is-loading { opacity: .4; pointer-events: none; transition: opacity var(--t) var(--ease); }

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.work-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.work-card--wide { grid-column: span 2; }
@media (max-width: 767px) { .work-card--wide { grid-column: auto; } }

.work-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--surface-2); }
.work-card--wide .work-media { aspect-ratio: 21 / 10; }
.work-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.86) brightness(.94);
  transition: transform .85s var(--ease-out), filter var(--t-slow) var(--ease);
}
.work-card:hover .work-media img { transform: scale(1.05); filter: none; }
.work-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,8,13,.9) 2%, rgba(7,8,13,.15) 46%, transparent);
  pointer-events: none;
}

/* Category pill sitting on the image. */
.work-media .work-cat {
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-start: .85rem;
  z-index: 2;
  padding: .32rem .72rem;
  border-radius: var(--r-pill);
  background: rgba(7,8,13,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
html[lang="ar"] .work-media .work-cat { letter-spacing: 0; text-transform: none; font-size: .78rem; }

.work-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.05rem, 2vw, 1.4rem);
  flex: 1 1 auto;
}
.work-body .meta { min-width: 0; flex: 1 1 auto; }
.work-title {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.45;
  transition: color var(--t) var(--ease);
}
.work-card:hover .work-title { color: var(--primary); }
.work-sub {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-block-start: .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-go {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: all var(--t) var(--ease);
}
.work-go .icon { width: 18px; height: 18px; }
html[dir="rtl"] .work-go .icon { transform: scaleX(-1); }
.work-card:hover .work-go { border-color: var(--primary); background: var(--primary); color: #fff; }

/* Footer row with the live-site link. */
.work-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 0 clamp(1.05rem, 2vw, 1.4rem) clamp(1.05rem, 2vw, 1.4rem);
  margin-block-start: auto;
}
.work-visit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--t-fast) var(--ease);
}
.work-visit:hover { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.work-visit .icon { width: 15px; height: 15px; }

/* Empty state */
.empty {
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.empty .icon { width: 40px; height: 40px; margin-inline: auto; margin-block-end: 1rem; color: var(--text-faint); }

/* --- Blog cards -------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.post-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.post-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); display: block; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post-card:hover .post-media img { transform: scale(1.05); }
.post-media .post-cat {
  position: absolute;
  inset-block-end: .8rem;
  inset-inline-start: .8rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(7,8,13,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-primary);
}
.post-body { padding: clamp(1.05rem, 2vw, 1.45rem); display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; }
.post-meta { display: flex; align-items: center; gap: .55rem; font-size: .79rem; color: var(--text-faint); flex-wrap: wrap; }
.post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }
.post-card h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.5; transition: color var(--t) var(--ease); }
.post-card:hover h3 { color: var(--primary); }
.post-card p { font-size: .89rem; color: var(--text-muted); line-height: 1.75; }
.post-card .link-arrow { margin-block-start: auto; padding-block-start: .35rem; font-size: .87rem; }

@media (max-width: 899px) { .post-grid, .post-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .post-grid, .post-grid--home { grid-template-columns: 1fr; } }

/* --- Process timeline -------------------------------------------------- */
.process { position: relative; }
.process-rail {
  --progress: 12%;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  margin-block-end: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-block-start: 1.4rem;
}
.process-rail::before {
  content: '';
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline: 0;
  height: 1px;
  background: var(--border);
}
.process-rail::after {
  content: '';
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline-start: 0;
  width: var(--progress);
  height: 1px;
  background: var(--primary);
  transition: width var(--t-slow) var(--ease);
}
.process-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  flex: 1 1 0;
  min-width: 0;
  margin-block-start: -1.4rem;
  padding-block-start: 1.4rem;
  color: var(--text-muted);
  text-align: center;
  transition: color var(--t) var(--ease);
}
.process-node .dot {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--background);
  font-family: var(--font-num);
  font-size: .82rem;
  font-weight: 600;
  transition: all var(--t) var(--ease);
}
.process-node .nm { font-size: .83rem; font-weight: 500; line-height: 1.4; }
.process-node:hover { color: var(--text-primary); }
.process-node:hover .dot { border-color: var(--primary-line); color: var(--text-primary); }
.process-node.is-active { color: var(--text-primary); }
.process-node.is-active .dot {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 5px var(--primary-soft);
}

.process-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
  overflow: hidden;
  isolation: isolate;
}
.process-panel::before {
  content: '';
  position: absolute;
  inset-block-end: -40%;
  inset-inline-start: -12%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 70%);
  z-index: -1;
}
.process-big {
  font-family: var(--font-num);
  font-size: clamp(3.4rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
  letter-spacing: -.04em;
}
.process-body { position: relative; min-width: 0; }
.process-body h3 { font-size: clamp(1.15rem, 2.1vw, 1.65rem); margin-block-end: .7rem; }
.process-body p { color: var(--text-secondary); max-width: 58ch; line-height: 1.8; }
.process-body .ic {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  margin-block-end: 1rem;
}
.process-body .ic .icon { width: 20px; height: 20px; }
.process-pane { display: none; }
.process-pane.is-shown { display: contents; }

/* Mobile: accordion instead of the rail. */
.process-acc { display: none; }
.process-acc .pa-item { border-block-end: 1px solid var(--border); }
.process-acc .pa-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding-block: 1.05rem;
  min-height: 56px;
  text-align: start;
  color: var(--text-secondary);
  transition: color var(--t) var(--ease);
}
.process-acc .pa-head .n {
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-family: var(--font-num);
  font-size: .78rem;
}
.process-acc .pa-head .t { flex: 1 1 auto; font-weight: 600; font-size: 1rem; }
.process-acc .pa-head .icon { width: 18px; height: 18px; flex: none; transition: transform var(--t) var(--ease); }
.process-acc .pa-item.is-open .pa-head { color: var(--text-primary); }
.process-acc .pa-item.is-open .pa-head .n { border-color: var(--primary); background: var(--primary); color: #fff; }
.process-acc .pa-item.is-open .pa-head .icon { transform: rotate(180deg); }
.process-acc .pa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.process-acc .pa-item.is-open .pa-body { grid-template-rows: 1fr; }
.process-acc .pa-body > div { overflow: hidden; }
.process-acc .pa-body p { padding-block-end: 1.15rem; color: var(--text-muted); font-size: .93rem; line-height: 1.8; }

@media (max-width: 899px) {
  .process-rail, .process-panel { display: none; }
  .process-acc { display: block; }
}

/* --- Testimonials ------------------------------------------------------ */
.tst { position: relative; }
.tst-viewport { overflow: hidden; }
.tst-track { display: flex; transition: transform .55s var(--ease-out); }
.tst-slide { flex: 0 0 100%; padding-inline: 2px; min-width: 0; }

.tst-card {
  position: relative;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
  overflow: hidden;
  isolation: isolate;
}
.tst-card .quote-mark {
  position: absolute;
  inset-block-start: clamp(1rem, 2vw, 1.6rem);
  inset-inline-end: clamp(1rem, 2vw, 1.6rem);
  width: 58px; height: 58px;
  color: var(--primary);
  opacity: .1;
  z-index: -1;
}
.tst-stars { display: flex; gap: .2rem; margin-block-end: 1.2rem; }
.tst-stars .icon { width: 17px; height: 17px; color: var(--primary); fill: currentColor; }
.tst-stars .icon.off { color: var(--text-faint); fill: none; }
.tst-text {
  font-size: clamp(1.02rem, 1.8vw, 1.28rem);
  line-height: 1.85;
  color: var(--text-primary);
  font-weight: 400;
  margin-block-end: 1.7rem;
  max-width: 68ch;
}
html[lang="ar"] .tst-text { line-height: 2.15; }
.tst-person { display: flex; align-items: center; gap: .9rem; }
.tst-avatar {
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  font-family: inherit;   /* the numeric face has no Arabic glyphs */
  font-size: .92rem;
  font-weight: 600;
  color: var(--primary);
}
.tst-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tst-person .who b { display: block; font-weight: 600; font-size: .99rem; }
.tst-person .who span { font-size: .85rem; color: var(--text-muted); }

.tst-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1.4rem;
  flex-wrap: wrap;
}
.tst-dots { display: flex; gap: .4rem; }
.tst-dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--surface-3);
  transition: all var(--t) var(--ease);
}
.tst-dot.is-active { width: 26px; background: var(--primary); }
.tst-arrows { display: flex; gap: .5rem; }
.tst-arrow {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: all var(--t) var(--ease);
}
.tst-arrow:hover { color: #fff; border-color: var(--primary); background: var(--primary); }
.tst-arrow .icon { width: 18px; height: 18px; }
html[dir="rtl"] .tst-arrow .icon { transform: scaleX(-1); }

/* --- FAQ accordion ----------------------------------------------------- */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
.faq-aside { position: sticky; top: calc(var(--header-h) + 30px); }
.faq-aside .faq-help {
  margin-block-start: 1.7rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--glass);
  display: grid;
  gap: .8rem;
  justify-items: start;
}
.faq-aside .faq-help p { font-size: .92rem; color: var(--text-secondary); }

.faq { display: grid; gap: .55rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item.is-open { border-color: var(--primary-line); background: var(--surface-2); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  width: 100%;
  padding: clamp(1rem, 2vw, 1.3rem) clamp(.9rem, 1.8vw, 1.2rem);
  min-height: 60px;
  border-radius: var(--r-md);
  text-align: start;
  font-size: clamp(.99rem, 1.6vw, 1.1rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-secondary);
  transition: color var(--t) var(--ease);
}
.faq-q:hover, .faq-item.is-open .faq-q { color: var(--text-primary); }
.faq-q .icon {
  width: 34px; height: 34px;
  flex: none;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.faq-q:hover .icon { border-color: var(--border-strong); color: var(--text-primary); }
.faq-item.is-open .faq-q .icon {
  transform: rotate(45deg);
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a > div > p,
.faq-a .faq-a-inner {
  padding: 0 clamp(.9rem, 1.8vw, 1.2rem) 1.3rem;
  color: var(--text-secondary);
  max-width: 72ch;
  line-height: 1.85;
  font-size: .96rem;
}
html[lang="ar"] .faq-a > div > p,
.faq-a .faq-a-inner { line-height: 2.1; }
.faq-a .faq-a-inner p + p { margin-block-start: .8rem; }

@media (max-width: 979px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}
@media (max-width: 599px) {
  .faq-a > div > p,
.faq-a .faq-a-inner { padding-inline-end: 0; }
}

/* --- About block ------------------------------------------------------- */
.about-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}
.about-points { display: grid; gap: .8rem; margin-block: 1.6rem; }
.about-points li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .97rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.about-points .icon {
  width: 22px; height: 22px;
  flex: none;
  padding: 4px;
  margin-block-start: .1em;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.about-figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.about-figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
}
.about-stat {
  padding: clamp(1.25rem, 2.4vw, 1.7rem);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.about-stat:hover { border-color: var(--primary-line); transform: translateY(-3px); }
/* The figure carries dir="ltr" so "+" and "%" land on the right side of
   the number. That also flips its flex start edge, so realign it to the
   card's reading edge explicitly. */
.about-stat .v {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  font-family: var(--font-num);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text-primary);
}
.about-stat .v em { font-style: normal; color: var(--primary); }
.about-stat .l { display: block; font-size: .88rem; color: var(--text-muted); margin-block-start: .5rem; }
html[dir="rtl"] .about-stat .v { justify-content: flex-end; }
.about-stat .icon { width: 19px; height: 19px; color: var(--primary); opacity: .8; margin-block-end: .8rem; }

@media (max-width: 899px) {
  .about-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 419px) {
  .about-stats { grid-template-columns: 1fr; }
}

/* --- Final call to action --------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.5rem, 4vw, 3.4rem);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 160% at 12% 0%, var(--primary-soft), transparent 58%),
    linear-gradient(150deg, var(--surface-2), var(--background) 78%);
  overflow: hidden;
  isolation: isolate;
}
html[dir="rtl"] .cta-band {
  background:
    radial-gradient(120% 160% at 88% 0%, var(--primary-soft), transparent 58%),
    linear-gradient(210deg, var(--surface-2), var(--background) 78%);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset-block-end: -48%;
  inset-inline: 24%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow), transparent 66%);
  filter: blur(50px);
  opacity: .55;
  z-index: -1;
}
/* Very subtle geometric texture. */
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 90% at 80% 20%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 20%, #000, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
.cta-inner .eyebrow { justify-content: center; }
.cta-inner .eyebrow::before { display: none; }
.cta-inner h2 {
  font-size: clamp(1.85rem, 4.4vw, 3.15rem);
  line-height: 1.2;
  margin-block-end: .85rem;
  text-wrap: balance;
}
html[lang="ar"] .cta-inner h2 { font-size: clamp(1.65rem, 4vw, 2.85rem); line-height: 1.45; }
.cta-inner p {
  color: var(--text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.85;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
}
.cta-actions .btn { justify-content: center; }
/* The opening-hours line always sits on its own row under the buttons. */
.cta-actions .cta-hint { flex-basis: 100%; }
.cta-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--text-faint);
  text-align: center;
}
.cta-hint .icon { width: 13px; height: 13px; flex: none; }

@media (max-width: 599px) {
  .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* --- "Why SITE SNAP" feature cards ------------------------------------- */
/* Dark glass with a top-lit gradient, a hairline that catches the light
   along the upper edge, and a warm bloom that only arrives on hover. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.5vw, 1.4rem);
}
.feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.5rem, 2.3vw, 2rem) clamp(1.35rem, 2vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 44%),
    color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .feature-card { background: var(--surface); }
}
:root[data-theme="light"] .feature-card {
  background:
    linear-gradient(180deg, rgba(11, 14, 22, .035), rgba(11, 14, 22, 0) 44%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-sm);
}

/* A lit hairline across the top edge — the glass tell. */
.feature-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  opacity: .5;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
}
/* …and a warm bloom behind the icon, held back until hover. */
.feature-card::after {
  content: '';
  position: absolute;
  inset-block-start: -45%;
  inset-inline-start: -25%;
  width: 78%;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-line);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.feature-card:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.feature-card:hover::after { opacity: 1; }

/* Icon: a soft-cornered tile, ringed in orange once the card wakes up. */
.feature-ico {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--glass-2), transparent 70%);
  color: var(--primary);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              box-shadow var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.feature-ico .icon { width: 23px; height: 23px; }
.feature-card:hover .feature-ico {
  border-color: var(--primary-line);
  background: linear-gradient(160deg, var(--primary-soft), transparent 72%);
  box-shadow: 0 12px 26px -16px var(--primary-glow);
  transform: translateY(-3px);
}

.feature-title {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  margin-block-start: .15rem;
}
html[lang="ar"] .feature-title { font-size: 1.12rem; letter-spacing: 0; }
.feature-text { font-size: .89rem; line-height: 1.85; color: var(--text-muted); }
html[lang="ar"] .feature-text { line-height: 2; }

@media (max-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones keep two columns — four stacked cards would run too long. */
@media (max-width: 639px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .feature-card { gap: .6rem; padding: 1.1rem .95rem 1.2rem; border-radius: var(--r-md); }
  .feature-card:hover { transform: translateY(-3px); }
  .feature-ico { width: 42px; height: 42px; border-radius: 12px; }
  .feature-ico .icon { width: 19px; height: 19px; }
  .feature-title { font-size: .95rem; line-height: 1.4; }
  html[lang="ar"] .feature-title { font-size: .98rem; }
  .feature-text { font-size: .8rem; line-height: 1.75; }
}
@media (max-width: 359px) {
  .feature-card { padding: .95rem .85rem 1.05rem; }
  .feature-text { font-size: .76rem; }
}
/* --- Portfolio previews: the work shown on the devices it runs on ------ */
/* The captured desktop frame sits in a laptop shell with the phone capture
   overlapping it. Both images come from the importer; a project without
   captures falls back to its cover image inside the same shell. */
.work-media { background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--background)); }
.work-media:has(.pj-stage)::after { display: none; }

.pj-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem) clamp(1.4rem, 3vw, 2.2rem);
}
.pj-laptop {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px 7px 0;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: linear-gradient(160deg, #1c2230, #0d1119);
  box-shadow: 0 26px 54px -30px rgba(0, 0, 0, .95);
}
.pj-screen {
  display: block;
  overflow: hidden;
  border-radius: 5px;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.pj-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: none;
  transition: transform .9s var(--ease-out);
}
/* The lip of the laptop base, a touch wider than the lid. */
.pj-base {
  display: block;
  height: 9px;
  margin: 5px clamp(-16px, -1.4vw, -10px) 0;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(#242c3d, #141a26);
  box-shadow: 0 12px 20px -14px rgba(0, 0, 0, .9);
}
.pj-phone {
  position: absolute;
  inset-block-end: clamp(.5rem, 1.4vw, 1rem);
  inset-inline-start: clamp(.7rem, 2vw, 1.5rem);
  width: 21%;
  max-width: 98px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: #10151f;
  box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .95);
  transition: transform var(--t) var(--ease-out);
}
.pj-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top center;
  border-radius: 9px;
  filter: none;
}
.pj-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 28%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
}

/* Hover: the page inside creeps up, the phone lifts, the card warms. */
.work-card:hover .pj-screen img { transform: scale(1.035); }
.work-card:hover .pj-phone { transform: translateY(-4px); }
.work-card:hover { border-color: var(--primary-line); box-shadow: var(--shadow-lg); }

.work-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: contain;
  background: var(--glass);
  border: 1px solid var(--border);
  padding: 3px;
  flex: none;
}
.work-title { display: flex; align-items: center; gap: .6rem; }

/* The live site is the primary action; the case study sits beside it. */
.work-visit--primary {
  color: var(--primary-text);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}
.work-visit--primary:hover { color: #FFFFFF; background: var(--primary); border-color: var(--primary); }

@media (max-width: 639px) {
  .pj-stage { padding: .85rem .85rem 1.2rem; }
  .pj-phone { width: 24%; max-width: 74px; border-radius: 11px; }
  .pj-phone img { border-radius: 8px; }
  .work-logo { width: 22px; height: 22px; }
}
/* The same devices, at case-study scale. */
.pd-devices {
  position: relative;
  display: block;
  padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.4rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--background));
  box-shadow: var(--shadow-lg);
}
.pd-devices .pj-laptop { max-width: min(100%, 980px); margin-inline: auto; }
.pd-devices .pd-phone {
  position: absolute;
  inset-block-end: clamp(1rem, 2.4vw, 2rem);
  inset-inline-end: clamp(1.2rem, 4vw, 4rem);
  width: clamp(84px, 13%, 150px);
  max-width: none;
}
@media (max-width: 639px) {
  .pd-devices { padding: .9rem .9rem 1.4rem; }
  .pd-devices .pd-phone { width: 26%; inset-inline-end: .8rem; inset-block-end: .8rem; }
}
/* --- Portfolio grid: three, two, one ---------------------------------- */
.work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .work-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Portfolio card: the studio's shopfront ---------------------------- */
.work-card {
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 42%),
    color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .work-card { background: var(--surface); }
}
:root[data-theme="light"] .work-card {
  background: linear-gradient(180deg, rgba(11, 14, 22, .03), rgba(11, 14, 22, 0) 42%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-sm);
}
.work-card:hover { transform: translateY(-6px); }

/* Type: the client's name leads, the blurb stays quiet underneath. */
.work-body { padding: clamp(1.05rem, 1.9vw, 1.4rem) clamp(1.05rem, 1.9vw, 1.4rem) .6rem; gap: .9rem; }
.work-title { font-size: 1.06rem; font-weight: 600; line-height: 1.4; }
html[lang="ar"] .work-title { font-size: 1.1rem; }
.work-sub {
  font-size: .87rem;
  line-height: 1.75;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The category badge sits on the stage, not on the artwork. */
.work-media .work-cat {
  inset-block-start: auto;
  inset-block-end: .9rem;
  inset-inline-end: .9rem;
  inset-inline-start: auto;
  background: color-mix(in srgb, var(--background) 82%, transparent);
  border-color: var(--border-strong);
  font-weight: 600;
  letter-spacing: .01em;
}
.work-card:hover .work-cat { border-color: var(--primary-line); color: var(--primary-text); }

/* One action, full width, unmistakably the way to the live site. */
.work-foot { padding: 0 clamp(1.05rem, 1.9vw, 1.4rem) clamp(1.05rem, 1.9vw, 1.4rem); border: 0; }
.work-visit--primary {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  font-weight: 600;
  font-size: .9rem;
}
.work-card:hover .work-visit--primary {
  color: #FFFFFF;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 12px 26px -14px var(--primary-glow);
}
/* --- Category filters: a rail, not a pile ----------------------------- */
.filters {
  gap: .45rem;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  width: fit-content;
  max-width: 100%;
}
.filter { border-color: transparent; background: transparent; }
.filter:hover { background: var(--glass-2); }
.filter .n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: .28rem;
  border-radius: 6px;
  background: var(--glass-2);
  font-size: .68rem;
  opacity: 1;
}
.filter.is-active { box-shadow: 0 10px 24px -14px var(--primary-glow); }
.filter.is-active .n { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

/* On phones the rail scrolls sideways instead of stacking into a block. */
@media (max-width: 767px) {
  .filters {
    flex-wrap: nowrap;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-radius: var(--r-lg);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; padding-inline: .9rem; font-size: .84rem; }
}
/* --- Portfolio card, refined ------------------------------------------ */
/* Three zones with one rhythm: the stage, the name, the way out. */
.work-card {
  overflow: hidden;
  border-radius: var(--r-lg);
}
.work-card .work-media {
  aspect-ratio: 16 / 10.5;
  border-radius: 0;
  border-block-end: 1px solid var(--border);
}

/* The stage: room on every side so the phone never touches an edge. */
.work-card .pj-stage {
  padding: clamp(1.1rem, 2.6vw, 1.7rem) clamp(1.1rem, 2.6vw, 1.7rem) clamp(1.5rem, 3vw, 2.1rem);
}
/* The laptop hugs the reading edge; the phone fills the space left over
   on the opposite side, so the two never sit on top of each other. */
.work-card .pj-laptop { width: 82%; margin-inline-start: 0; margin-inline-end: auto; }
.work-card .pj-phone {
  width: 25%;
  max-width: 84px;
  inset-block-end: clamp(1rem, 2.4vw, 1.6rem);
  inset-inline-start: auto;
  inset-inline-end: clamp(1rem, 2.4vw, 1.5rem);
}

/* The name sits with the mark, one line, never wrapping into the blurb. */
.work-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.05rem, 2vw, 1.35rem);
}
.work-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.work-logo {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--glass);
  object-fit: contain;
}
.work-title {
  min-width: 0;
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
html[lang="ar"] .work-title { font-size: 1.08rem; letter-spacing: 0; }
.work-title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.work-card:hover .work-title a { color: var(--primary-text); }

.work-sub {
  font-size: .86rem;
  line-height: 1.7;
  color: var(--text-muted);
  /* Two lines, always — so every card in a row ends at the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.92em;
  margin: 0;
}

/* One action, unmistakably the way to the live site. */
.work-card .work-visit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 46px;
  margin-block-start: .35rem;
  padding-inline: 1rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: .9rem;
  font-weight: 600;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.work-card .work-visit .icon { width: 15px; height: 15px; }
.work-card:hover .work-visit,
.work-card .work-visit:hover {
  color: #FFFFFF;
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 12px 26px -14px var(--primary-glow);
}

@media (max-width: 639px) {
  .work-card .work-media { aspect-ratio: 16 / 11; }
  .work-card .pj-stage { padding: 1rem 1rem 1.35rem; }
  .work-card .pj-laptop { width: 84%; }
  .work-card .pj-phone { width: 27%; max-width: 76px; inset-inline-start: auto; inset-inline-end: .85rem; inset-block-end: .85rem; }
  .work-body { padding: 1rem .95rem 1.1rem; gap: .5rem; }
  .work-logo { width: 30px; height: 30px; border-radius: 9px; }
  .work-title { font-size: 1rem; }
  html[lang="ar"] .work-title { font-size: 1.02rem; }
  .work-sub { font-size: .82rem; }
}
/* --- Portfolio card, final form --------------------------------------- */
/* The site itself is the card's face: the desktop capture fills the whole
   frame, and the phone capture floats in the corner as a second viewport.
   No laptop chrome — the screenshot is the artwork. */
.work-card .work-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--surface-2);
  border-block-end: 1px solid var(--border);
}
.work-card .pj-stage { position: absolute; inset: 0; padding: 0; }
.work-card .pj-laptop {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.work-card .pj-screen {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--surface-2);
}
.work-card .pj-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s var(--ease-out);
}
.work-card .pj-base { display: none; }

/* A whisper of shade at the foot of the image, so the phone and the edge
   of the card stay legible over a bright screenshot. */
.work-card .work-media::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  /* Light touch: the site should read as it really looks. */
  background: linear-gradient(to top, rgba(4, 5, 10, .34), rgba(4, 5, 10, .06) 22%, transparent 40%);
  pointer-events: none;
}

/* The phone: a real device edge, floating over the corner. */
.work-card .pj-phone {
  position: absolute;
  z-index: 2;
  inset-block-end: 10px;
  inset-inline-start: auto;
  inset-inline-end: 10px;
  width: 24%;
  max-width: 94px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  background: linear-gradient(160deg, #232a38, #0b0f17 55%);
  /* A lit rim, then a deep drop — the device reads as a real object. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 22px 40px -16px rgba(0, 0, 0, .95);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.work-card .pj-phone img {
  border-radius: 12px;
  aspect-ratio: 9 / 17.5;
  object-position: top center;
}
.work-card .pj-notch { top: 9px; width: 30%; height: 3px; background: rgba(255, 255, 255, .35); }
.work-card:hover .pj-phone {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 26px 46px -16px rgba(0, 0, 0, .98);
}

.work-card:hover .pj-screen img { transform: scale(1.05); }
.work-card:hover .pj-phone { transform: translateY(-5px); }

@media (max-width: 639px) {
  .work-card .work-media { aspect-ratio: 16 / 11.5; }
  .work-card .pj-phone {
    inset-block-end: 9px;
    inset-inline-end: 9px;
    width: 26%;
    max-width: 86px;
    border-radius: 12px;
  }
  .work-card .pj-phone img { border-radius: 10px; }
}
/* --- Portfolio preview: the screenshot, edge to edge ------------------ */
/* The capture fills the whole head of the card. It is stored at 16:10 and
   shown at 16:10, so the site is seen whole — nothing cropped, nothing
   stretched, no frame around it. */
.work-card .work-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
}
.work-card .work-media::after { content: none; }

.work-shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
  transition: none;
}
.work-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .9s var(--ease-out);
}

/* A hairline of light along the top edge and a whisper of shade at the
   foot — just enough to seat the picture in the card. */
.work-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .09), transparent 6%),
    linear-gradient(to top, rgba(4, 5, 10, .30), transparent 16%);
  transition: opacity var(--t) var(--ease);
}

/* Hover: the picture breathes, and a warm line picks out its lower edge. */
.work-card:hover .work-shot img { transform: scale(1.035); }
.work-card:hover .work-media { border-block-end-color: var(--primary-line); }

/* No device frame survives anywhere in the card. */
.work-card .pj-laptop,
.work-card .pj-phone,
.work-card .pj-base,
.work-card .pj-stage { display: none; }

/* --- Card body: name, one line, one action ---------------------------- */
.work-body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.15rem, 2vw, 1.5rem) clamp(1.15rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.6rem);
}
.work-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.work-title { font-size: 1.08rem; line-height: 1.35; }
html[lang="ar"] .work-title { font-size: 1.12rem; }
.work-sub { font-size: .87rem; line-height: 1.75; min-height: 3.05em; margin: 0; }
.work-card .work-visit { min-height: 48px; margin-block-start: .5rem; font-size: .92rem; }

@media (max-width: 639px) {
  .work-body { padding: 1.05rem 1rem 1.15rem; gap: .5rem; }
  .work-title { font-size: 1.02rem; }
  html[lang="ar"] .work-title { font-size: 1.05rem; }
  .work-sub { font-size: .83rem; min-height: 2.9em; }
  .work-card .work-visit { min-height: 46px; }
}
/* --- "Our work" menu, anchored ---------------------------------------- */
/* It hangs from the item's own reading edge instead of being centred and
   pulled back by a transform — that sideways travel was what made it look
   like it was sliding away from the navigation. Only opacity and a few
   pixels of vertical movement animate now. */
/* Centred under its own item. The horizontal half-step is part of the
   resting position, never animated, so the panel only ever fades and
   drops a few pixels — no travel across the header. */
.nav-menu {
  inset-block-start: calc(100% + 12px);
  inset-inline-start: 50%;
  inset-inline-end: auto;
  min-width: 264px;
  max-width: min(320px, calc(100vw - 2rem));
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s var(--ease), transform .22s var(--ease-out), visibility 0s linear .22s;
}
html[dir="rtl"] .nav-menu { transform: translateX(50%) translateY(-6px); }
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu,
.nav-has-menu.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition-delay: 0s;
}
html[dir="rtl"] .nav-has-menu:hover .nav-menu,
html[dir="rtl"] .nav-has-menu:focus-within .nav-menu,
html[dir="rtl"] .nav-has-menu.is-open .nav-menu { transform: translateX(50%); }
/* The bridge keeps the pointer's trip from the item to the menu unbroken. */
.nav-menu::before {
  inset-block-start: -14px;
  inset-inline: 0;
  height: 14px;
}
.nav-menu-item + .nav-menu-item { margin-block-start: 2px; }

/* The desktop menu belongs to the desktop only. */
@media (max-width: 1139px) {
  .nav-menu { display: none; }
}
/* --------------------------------------------------------------------------
   11. Inner pages & editorial
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(2.6rem, 6vw, 4.6rem)) clamp(2.2rem, 5vw, 3.8rem);
  background:
    radial-gradient(72% 120% at 18% 0%, var(--primary-soft), transparent 56%),
    var(--background-alt);
  border-block-end: 1px solid var(--border);
  overflow: hidden;
}
html[dir="rtl"] .page-hero {
  background:
    radial-gradient(72% 120% at 82% 0%, var(--primary-soft), transparent 56%),
    var(--background-alt);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 72%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.3rem); margin-block-end: .9rem; text-wrap: balance; }
html[lang="ar"] .page-hero h1 { font-size: clamp(1.75rem, 4.2vw, 3rem); }
.page-hero .lead { max-width: 58ch; }
.page-hero--media { padding-block-end: clamp(2.6rem, 6vw, 4.5rem); }

/* Breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .84rem;
  color: var(--text-muted);
  margin-block-end: 1.1rem;
}
.crumbs a { color: var(--text-muted); transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--primary); }
.crumbs .icon { width: 13px; height: 13px; opacity: .55; }
html[dir="rtl"] .crumbs .icon { transform: scaleX(-1); }
.crumbs span[aria-current] { color: var(--text-secondary); }

/* Split layouts */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.5rem); }
.split--aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
@media (max-width: 899px) { .split, .split--aside { grid-template-columns: 1fr; } }

.panel {
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.panel--accent { border-color: var(--primary-line); background: linear-gradient(160deg, var(--primary-soft), transparent 70%), var(--surface); }
.panel h3, .panel h2 { font-size: 1.1rem; margin-block-end: .85rem; display: flex; align-items: center; gap: .55rem; }
.panel h3 .icon, .panel h2 .icon { width: 20px; height: 20px; color: var(--primary); flex: none; }

/* Numbered list (challenges / features) */
.num-list { display: grid; gap: clamp(.7rem, 1.4vw, 1rem); }
.num-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.65rem);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease);
}
.num-item:hover { border-color: var(--primary-line); }
.num-item .n {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-num);
  font-size: .82rem;
  font-weight: 600;
}
.num-item h4, .num-item h3 { font-size: 1.02rem; font-weight: 600; margin-block-end: .35rem; }
.num-item p { font-size: .92rem; color: var(--text-muted); line-height: 1.78; }

/* Feature tiles */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.feat {
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.feat:hover { border-color: var(--primary-line); transform: translateY(-3px); }
.feat .icon-box {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--primary);
  margin-block-end: .95rem;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.feat:hover .icon-box { border-color: var(--primary-line); background: var(--primary-soft); }
.feat .icon-box .icon { width: 19px; height: 19px; }
.feat h4, .feat h3 { font-size: 1rem; font-weight: 600; margin-block-end: .4rem; }
.feat p { font-size: .89rem; color: var(--text-muted); line-height: 1.75; }

/* Result metrics */
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); }
.result {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.result:hover { border-color: var(--primary-line); transform: translateY(-3px); }
.result .v {
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-block-end: .5rem;
}
.result .l { font-size: .85rem; color: var(--text-muted); }

/* Meta table */
.meta-list { display: grid; }
.meta-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding-block: .85rem;
  border-block-end: 1px solid var(--border);
  font-size: .93rem;
}
.meta-row:last-child { border-block-end: 0; }
.meta-row dt { color: var(--text-faint); }
.meta-row dd { color: var(--text-primary); margin: 0; word-break: break-word; }

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); }
.gallery-item { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 10; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.04); }

/* --- Long-form prose --------------------------------------------------- */
.prose { max-width: var(--max-text); color: var(--text-secondary); font-size: 1.04rem; line-height: 1.9; }
html[lang="ar"] .prose { font-size: 1.08rem; line-height: 2.1; }
.prose > * + * { margin-block-start: 1.25em; }
.prose h2 {
  position: relative;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  color: var(--text-primary);
  margin-block-start: 1.9em;
  margin-block-end: .6em;
  padding-inline-start: 1rem;
}
.prose h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .2em .2em;
  width: 3px;
  border-radius: 3px;
  background: var(--primary);
}
.prose h3 { font-size: clamp(1.12rem, 1.9vw, 1.32rem); color: var(--text-primary); margin-block-start: 1.7em; margin-block-end: .5em; }
.prose h4 { font-size: 1.06rem; color: var(--text-primary); margin-block-start: 1.4em; }
.prose strong, .prose b { color: var(--text-primary); font-weight: 600; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--primary-hover); }
.prose ul, .prose ol { padding-inline-start: 1.3rem; display: grid; gap: .5rem; }
.prose ul li { list-style: none; position: relative; padding-inline-start: 1.05rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--primary); font-weight: 600; }
.prose blockquote {
  padding: 1.1rem 1.35rem;
  border-inline-start: 3px solid var(--primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--glass);
  color: var(--text-primary);
}
html[dir="rtl"] .prose blockquote { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.prose img { border-radius: var(--r-md); border: 1px solid var(--border); }
.prose code { padding: .16em .45em; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--border); font-family: var(--font-num); font-size: .88em; color: var(--primary); }
.prose pre { padding: 1.1rem 1.3rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; color: var(--text-secondary); }
.prose hr { border: 0; height: 1px; background: var(--border-strong); margin-block: 2.2em; }
/* Tables must scroll inside themselves, never widen the page. */
.prose table { width: 100%; font-size: .95em; display: block; overflow-x: auto; white-space: nowrap; }
.prose th, .prose td { border: 1px solid var(--border); padding: .65rem .85rem; text-align: start; }
.prose th { background: var(--surface-3); color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.25rem); }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.label { font-size: .87rem; font-weight: 500; color: var(--text-secondary); display: flex; gap: .35rem; align-items: baseline; }
.label .req { color: var(--primary); }
.label .opt { font-size: .77rem; color: var(--text-faint); font-weight: 400; }

.input, .select, .textarea {
  width: 100%;
  padding: .82rem 1rem;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: .96rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.textarea { min-height: 148px; resize: vertical; line-height: 1.75; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  background: var(--surface-2);
}
.input.has-error, .select.has-error, .textarea.has-error { border-color: #FF5B5B; box-shadow: 0 0 0 4px rgba(255,91,91,.12); }

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  padding-inline-end: 1.05rem;
  padding-inline-start: 2.6rem;
}
html[dir="ltr"] .select { background-position: right 1rem center; padding-inline-start: 1.05rem; padding-inline-end: 2.6rem; }
.select option { background: var(--surface); color: var(--text-primary); }

.field-error { font-size: .81rem; color: #FF7B7B; min-height: 1.1em; }

/* Honeypot */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .93rem;
  line-height: 1.65;
}
.alert .icon { width: 20px; height: 20px; flex: none; margin-block-start: .12em; }
.alert--success { border-color: rgba(53, 208, 127, .35); background: rgba(53, 208, 127, .08); color: #A7EFC8; }
.alert--success .icon { color: #35D07F; }
.alert--error { border-color: rgba(255, 91, 91, .35); background: rgba(255, 91, 91, .08); color: #FFC2C2; }
.alert--error .icon { color: #FF5B5B; }
.alert--info { border-color: var(--primary-line); background: var(--primary-soft); color: var(--text-secondary); }
.alert--info .icon { color: var(--primary); }

@media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } }

/* Contact info rows */
.contact-info { display: grid; gap: clamp(.6rem, 1.2vw, .85rem); }
.ci-row {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: clamp(1rem, 2vw, 1.3rem);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 68%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease);
  min-width: 0;
}
.ci-row:hover { border-color: var(--primary-line); }
.ci-row .ci-ic {
  width: 48px; height: 48px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--primary);
}
.ci-row .ci-ic .icon { width: 19px; height: 19px; }
.ci-row .k { font-size: .79rem; color: var(--text-faint); display: block; }
.ci-row .v { font-size: .96rem; color: var(--text-primary); font-weight: 500; word-break: break-word; }
.ci-row a.v:hover { color: var(--primary); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-block-start: clamp(2rem, 4vw, 3rem); }
.pagination a, .pagination span {
  min-width: 42px; height: 42px;
  display: inline-grid;
  place-items: center;
  padding-inline: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-size: .9rem;
  color: var(--text-secondary);
  transition: all var(--t-fast) var(--ease);
}
.pagination a:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--glass-2); }
.pagination .is-current { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 600; }
.pagination .is-disabled { opacity: .35; pointer-events: none; }
.pagination .icon { width: 17px; height: 17px; }
html[dir="rtl"] .pagination .icon { transform: scaleX(-1); }

/* Search box */
.searchbar { position: relative; max-width: 420px; }
.searchbar .input { padding-inline-start: 2.9rem; }
html[dir="rtl"] .searchbar .input { padding-inline-start: 2.9rem; padding-inline-end: 1.05rem; }
.searchbar > .icon {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-faint);
  pointer-events: none;
}
.search-suggest {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + .5rem);
  z-index: 40;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.search-suggest a { display: block; padding: .8rem 1rem; border-block-end: 1px solid var(--border); }
.search-suggest a:last-child { border-block-end: 0; }
.search-suggest a:hover { background: var(--glass-2); }
.search-suggest b { display: block; font-size: .92rem; font-weight: 600; color: var(--text-primary); margin-block-end: .18rem; }
.search-suggest span { display: block; font-size: .81rem; color: var(--text-muted); }


/* --------------------------------------------------------------------------
   13. Footer, floating actions, misc
   -------------------------------------------------------------------------- */
/* --- Social row --------------------------------------------------------
   One row of equal tiles under a small label. Only accounts that really
   exist reach the page: socialLinks() drops any setting still sitting on
   a bare domain. On hover the tile fills with the accent from the floor
   up, lifts, and casts a soft orange glow. */
.social-block { margin-block-start: 1.6rem; }
.social-label {
  display: block;
  margin-block-end: .7rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
html[lang="ar"] .social-label { letter-spacing: 0; font-size: .8rem; }
.social {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.social a {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  color: var(--text-secondary);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.social a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--primary-hover), var(--primary) 55%, var(--primary-deep));
  transform: translateY(101%);
  transition: transform var(--t) var(--ease-out);
}
.social a:hover,
.social a:focus-visible {
  color: #FFFFFF;
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -12px var(--primary-glow), 0 0 0 1px var(--primary-line);
}
.social a:hover::before,
.social a:focus-visible::before { transform: none; }
.social .icon { width: 18px; height: 18px; transition: transform var(--t) var(--ease-out); }
.social a:hover .icon { transform: scale(1.08); }

/* --- Floating contact actions ------------------------------------------
   Two independent rails pinned to the viewport — WhatsApp at the start
   edge, the contact panel and back-to-top at the end edge. Neither ever
   sits inside the other, both clear the phone's safe area, and the footer
   reserves room underneath so nothing is ever covered. */
:root {
  --fab-size: 54px;
  --fab-edge: clamp(.9rem, 2.2vw, 1.5rem);
  --fab-safe: env(safe-area-inset-bottom, 0px);
}

.fab-rail {
  position: fixed;
  z-index: 150;
  inset-block-end: calc(var(--fab-edge) + var(--fab-safe));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  /* Only the buttons themselves take pointer events, so the rail never
     steals a tap from the content behind it. */
  pointer-events: none;
}
.fab-rail > *,
.fab-rail .fab { pointer-events: auto; }
/* These two are anchored physically, not logically: the contact hub sits
   under the right thumb and WhatsApp under the left one in both languages,
   so the buttons never swap sides when the page flips to English. */
.fab-rail--wa  { left: var(--fab-edge); }
.fab-rail--hub { right: var(--fab-edge); }

.fab {
  position: relative;
  width: var(--fab-size);
  height: var(--fab-size);
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .85);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .fab { background: var(--surface); }
}
.fab:hover,
.fab:focus-visible { transform: translateY(-3px); }
.fab:active { transform: translateY(0) scale(.96); }
.fab .icon { width: 22px; height: 22px; }

/* WhatsApp keeps its own colour so it is recognised at a glance. */
.fab--wa {
  background: #1FB855;
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: 0 16px 34px -16px rgba(31, 184, 85, .9);
}
.fab--wa:hover { background: #19a54b; box-shadow: 0 20px 40px -16px rgba(31, 184, 85, .95); }

/* The contact trigger carries the brand accent. */
.fab--contact {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--primary) 92%, #fff),
              var(--primary));
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  color: #fff;
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--primary) 90%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .fab--contact { background: var(--primary); border-color: var(--primary); }
}
.fab--contact .icon--close { display: none; }
.fab-contact.is-open .fab--contact .icon--open { display: none; }
.fab-contact.is-open .fab--contact .icon--close { display: block; }

/* Back to top: quiet, and only once there is a page to come back up. */
.fab--top {
  width: calc(var(--fab-size) - 10px);
  height: calc(var(--fab-size) - 10px);
  color: var(--text-muted);
  display: none;
}
.fab--top .icon { width: 19px; height: 19px; }
.fab--top.is-shown { display: grid; }
.fab--top:hover { color: var(--primary-text); border-color: var(--primary-line); }

/* Tooltip — pointer devices only, and always on the inner side. */
.fab::after {
  content: attr(data-tip);
  position: absolute;
  inset-block-start: 50%;
  padding: .4rem .7rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-50%) scale(.94);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.fab-rail--hub .fab::after { right: calc(100% + .6rem); }
.fab-rail--wa .fab::after  { left: calc(100% + .6rem); }
.fab:hover::after,
.fab:focus-visible::after { opacity: 1; transform: translateY(-50%) scale(1); }

/* --- The contact panel -------------------------------------------------- */
.fab-contact { position: relative; }

.fab-panel {
  position: absolute;
  bottom: calc(100% + .7rem);
  right: 0;                       /* the hub is pinned to the right edge */
  width: min(19rem, calc(100vw - (var(--fab-edge) * 2) - 1rem));
  padding: .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  /* Opaque on purpose: it sits over the footer text, which must not read
     through it. */
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9);
}
/* It grows out of the corner it is pinned to. */
.fab-panel { transform-origin: bottom right; }
.fab-contact.is-open .fab-panel { animation: fabPop var(--t-fast) var(--ease-out) both; }
@keyframes fabPop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-contact.is-open .fab-panel { animation: none; }
}

.fab-panel-head {
  padding: .15rem .5rem .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
}
.fab-panel-list {
  display: grid;
  gap: .2rem;
  max-height: min(56vh, 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fab-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .5rem .55rem;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fab-item:hover,
.fab-item:focus-visible { background: var(--glass-2); color: var(--text-primary); }
.fab-item-ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--glass);
  color: var(--primary);
}
.fab-item-ico .icon { width: 17px; height: 17px; }
.fab-item-text { display: grid; gap: .05rem; min-width: 0; }
.fab-item-text b { font-size: .88rem; font-weight: 600; }
.fab-item-text small {
  font-size: .76rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* --- Touch and small screens -------------------------------------------- */
@media (hover: none) {
  .fab::after { display: none; }        /* no tooltips where there is no cursor */
  .fab:hover { transform: none; }
}
@media (max-width: 767px) {
  :root { --fab-size: 48px; --fab-edge: .85rem; }
  .fab .icon { width: 20px; height: 20px; }
  .fab-panel { padding: .6rem; }
  .fab-item { padding: .45rem .5rem; }
  .fab-item-ico { width: 32px; height: 32px; }
}
@media (max-width: 379px) {
  :root { --fab-size: 44px; --fab-edge: .7rem; }
}
/* --- Error pages ------------------------------------------------------- */
.err-wrap {
  min-height: 72svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
}
.err-code {
  font-family: var(--font-num);
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--text-primary) 18%, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block-end: .6rem;
}

/* --------------------------------------------------------------------------
   13b. Homepage journey
   Hero → Why us → Services → About → Projects → Reviews → FAQ.
   Each section carries its own accent while sharing the dark/orange system.
   -------------------------------------------------------------------------- */

/* --- Hero: a heavier grade on wide screens, so Arabic copy sits clearly
       on the footage without the video ever going black. ----------------- */
@media (min-width: 768px) {
  .hero--cinematic .hero-overlay {
    background:
      linear-gradient(to bottom, rgba(4, 5, 10, .90) 0%, rgba(4, 5, 10, .44) 36%, rgba(4, 5, 10, .76) 78%, var(--background) 100%),
      linear-gradient(to right, rgba(4, 5, 10, .94) 2%, rgba(4, 5, 10, .64) 48%, rgba(4, 5, 10, .20) 82%);
  }
  html[dir="rtl"] .hero--cinematic .hero-overlay {
    background:
      linear-gradient(to bottom, rgba(4, 5, 10, .90) 0%, rgba(4, 5, 10, .44) 36%, rgba(4, 5, 10, .76) 78%, var(--background) 100%),
      linear-gradient(to left, rgba(4, 5, 10, .94) 2%, rgba(4, 5, 10, .64) 48%, rgba(4, 5, 10, .20) 82%);
  }
}
/* The rule that used to close the hero read as a stray orange line above
   the next heading; the section below carries the accent instead. */
.hero--cinematic::after { display: none; }

/* --- Why us: the header carries its accent in the type itself --------- */
/* No rule, no dot: a quiet capsule for the eyebrow and a warm bloom
   behind the heading do the work instead. */
#whyus .sec-head { position: relative; margin-block-end: clamp(2.4rem, 4.2vw, 3.6rem); }
#whyus .sec-head::after {
  content: '';
  position: absolute;
  inset-block-start: -55%;
  inset-inline-start: 50%;
  width: min(520px, 78%);
  aspect-ratio: 2.4;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--primary-soft), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
#whyus .eyebrow {
  gap: 0;
  padding: .42rem 1rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: .78rem;
  letter-spacing: .02em;
  margin-block-end: 1.15rem;
}
html[lang="ar"] #whyus .eyebrow { font-size: .84rem; letter-spacing: 0; }
#whyus .eyebrow::before,
#whyus .eyebrow::after { content: none; }

/* The brand name is emphasis enough — the underline came off. */
#whyus .sec-head .hl {
  text-decoration: none;
  color: var(--primary);
  text-shadow: 0 0 34px var(--primary-glow);
}
#whyus .sec-head .h-2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); }
#whyus .sec-head .lead { margin-block-start: .9rem; }

/* --- Services: an accent rule draws itself along the card's top edge --- */
.svc-card::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t) var(--ease-out);
}
html[dir="rtl"] .svc-card::after {
  background: linear-gradient(270deg, var(--primary), transparent);
  transform-origin: right center;
}
.svc-card:hover::after { transform: scaleX(1); }
.svc-card:hover { box-shadow: var(--shadow-md); }
.svc-card:hover .link-arrow::after { transform: scaleX(1); }

/* --- Services: a lead trio, then three that carry the same language ---- */
/* The first row is the headline offer: roomier, brighter glass, a larger
   mark. The second row keeps every part — nothing is hidden — at a
   quieter weight, so six services read as one set with a clear order. */
#services .svc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.5vw, 1.35rem);
}
#services .svc-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%),
    color-mix(in srgb, var(--surface) 74%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #services .svc-card { background: var(--surface); }
}
:root[data-theme="light"] #services .svc-card {
  background: linear-gradient(180deg, rgba(11, 14, 22, .03), rgba(11, 14, 22, 0) 46%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-sm);
}

/* The lead three. */
#services .svc-card:nth-child(-n+3) { padding: clamp(1.7rem, 2.6vw, 2.2rem); gap: 1rem; }
#services .svc-card:nth-child(-n+3) .svc-icon { width: 56px; height: 56px; border-radius: 16px; }
#services .svc-card:nth-child(-n+3) .svc-icon .icon { width: 26px; height: 26px; }
#services .svc-card:nth-child(-n+3) h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
#services .svc-card:nth-child(-n+3) .svc-no { font-size: .95rem; }

/* The following three: same anatomy, lighter weight. */
#services .svc-card:nth-child(n+4) { padding: clamp(1.3rem, 2vw, 1.6rem); gap: .75rem; }
#services .svc-card:nth-child(n+4) .svc-icon { width: 44px; height: 44px; }
#services .svc-card:nth-child(n+4) .svc-icon .icon { width: 21px; height: 21px; }
#services .svc-card:nth-child(n+4) h3 { font-size: 1.04rem; }
#services .svc-card:nth-child(n+4) p { font-size: .88rem; }

/* The number reads as a quiet index until the card wakes up. */
#services .svc-card .svc-icon {
  border-radius: 15px;
  background: linear-gradient(160deg, var(--glass-2), transparent 70%);
}
#services .svc-card:hover .svc-icon {
  background: linear-gradient(160deg, var(--primary-soft), transparent 72%);
  box-shadow: 0 12px 26px -16px var(--primary-glow);
}
#services .svc-card .svc-no { transition: color var(--t) var(--ease); }
#services .svc-card:hover .svc-no { color: var(--primary); }

/* "عرض التفاصيل" becomes a quiet card footer: a hairline, the label at the
   reading edge, the arrow at the far edge — no underline. */
#services .svc-card .link-arrow {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-block-start: auto;
  padding-block-start: .95rem;
  border-block-start: 1px solid var(--border);
  font-size: .87rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#services .svc-card .link-arrow::after { display: none; }
#services .svc-card:hover .link-arrow {
  color: var(--primary-text);
  border-block-start-color: var(--primary-line);
}
#services .svc-card:hover .link-arrow .icon { transform: translateX(4px); }
html[dir="rtl"] #services .svc-card:hover .link-arrow .icon { transform: scaleX(-1) translateX(4px); }

@media (max-width: 1023px) {
  #services .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #services .svc-card:nth-child(-n+3) { padding: clamp(1.4rem, 2.4vw, 1.8rem); }
}
/* Phones: one column, tight and scannable — no card runs long. */
@media (max-width: 639px) {
  #services .svc-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  #services .svc-card,
  #services .svc-card:nth-child(-n+3),
  #services .svc-card:nth-child(n+4) {
    padding: 1.15rem 1.05rem 1.2rem;
    gap: .6rem;
    border-radius: var(--r-md);
  }
  #services .svc-card:nth-child(-n+3) .svc-icon,
  #services .svc-card:nth-child(n+4) .svc-icon { width: 42px; height: 42px; border-radius: 12px; }
  #services .svc-card:nth-child(-n+3) .svc-icon .icon,
  #services .svc-card:nth-child(n+4) .svc-icon .icon { width: 20px; height: 20px; }
  #services .svc-card:nth-child(-n+3) h3,
  #services .svc-card:nth-child(n+4) h3 { font-size: 1.02rem; }
  #services .svc-card p { font-size: .86rem; line-height: 1.75; }
  #services .svc-card .link-arrow { padding-block-start: .75rem; font-size: .83rem; }
  #services .svc-card:hover { transform: translateY(-3px); }
}

/* --- About: the same glass, composed as one panel of proof ------------ */
#about .sec-index {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding-inline: .35rem;
  border: 1px solid var(--primary-line);
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: .7rem;
}
#about .h-2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
#about .about-wrap > div:first-child .lead { max-width: 52ch; }

/* Strengths: a check tile per line, the row lighting up as a whole. */
#about .about-points { gap: .5rem; margin-block: 1.6rem 1.9rem; }
#about .about-points li {
  align-items: center;
  gap: .8rem;
  padding: .62rem .8rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .95rem;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
#about .about-points li:hover {
  color: var(--text-primary);
  background-color: var(--glass);
  border-color: var(--border);
}
#about .about-points .icon {
  width: 27px;
  height: 27px;
  padding: 5px;
  margin-block-start: 0;
  border: 1px solid var(--primary-line);
  border-radius: 9px;
  background: var(--primary-soft);
}

/* The visual column sits in its own warmth. */
#about .about-wrap > div:last-child { position: relative; }
#about .about-wrap > div:last-child::before {
  content: '';
  position: absolute;
  inset-block-start: -10%;
  inset-inline-end: -12%;
  width: 62%;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 70%);
  pointer-events: none;
}
#about .about-figure { box-shadow: var(--shadow-lg); }
#about .about-figure::before { content: none; }

/* Statistics: four cards cut from the same glass as the service cards, so
   they belong to the section instead of reading as dashboard widgets. */
#about .about-stats {
  display: grid;
  /* Two across at every width — four stacked cards would run too long. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.3vw, 1rem);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#about .about-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.15rem, 2.1vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 46%),
    color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #about .about-stat { background: var(--surface); }
}
:root[data-theme="light"] #about .about-stat {
  background: linear-gradient(180deg, rgba(11, 14, 22, .03), rgba(11, 14, 22, 0) 46%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-sm);
}
/* The glass tell: a lit hairline that turns orange on hover. */
#about .about-stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  opacity: .5;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
}
/* A warm bloom behind the figure, held back until hover. */
#about .about-stat::after {
  content: '';
  position: absolute;
  inset-block-start: -50%;
  inset-inline-start: -25%;
  width: 80%;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}
#about .about-stat:hover {
  transform: translateY(-4px);
  border-color: var(--primary-line);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#about .about-stat:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
#about .about-stat:hover::after { opacity: 1; }

/* The accent icon sits in its own orange-ringed tile. */
#about .about-stat .icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  margin-block-end: .95rem;
  border: 1px solid var(--primary-line);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  opacity: 1;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
#about .about-stat:hover .icon {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px var(--primary-glow);
}
#about .about-stat .v { font-size: clamp(1.75rem, 3vw, 2.45rem); }
#about .about-stat .l { font-size: .85rem; color: var(--text-muted); margin-block-start: .45rem; }

/* With the button gone the column ends on the strengths list. */
#about .about-points { margin-block-end: 0; }
@media (max-width: 639px) {
  #about .about-points li { padding: .55rem .6rem; font-size: .9rem; gap: .65rem; }
  #about .about-points .icon { width: 24px; height: 24px; border-radius: 8px; }
  #about .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  #about .about-stat { padding: .95rem .85rem 1.05rem; border-radius: var(--r-md); }
  #about .about-stat:hover { transform: translateY(-2px); }
  #about .about-stat .icon { width: 28px; height: 28px; padding: 5px; margin-block-end: .7rem; border-radius: 8px; }
  #about .about-stat .v { font-size: 1.45rem; }
  #about .about-stat .l { font-size: .74rem; margin-block-start: .3rem; }
  #about .about-wrap > div:last-child::before { display: none; }
}
/* --- Projects: a taller frame and a sharper lift ---------------------- */
#work .work-media { aspect-ratio: 16 / 10.5; }
#work .work-card:hover { border-color: var(--primary-line); box-shadow: var(--shadow-lg); }
#work .work-card:hover .work-cat { border-color: var(--primary-line); }

/* --- Reviews: glass, with the accent rule the other cards share ------- */
.tst-card {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.tst-card::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: .8;
  pointer-events: none;
}
html[dir="rtl"] .tst-card::after { background: linear-gradient(270deg, var(--primary), transparent); }

/* --- FAQ: quiet borders, an orange open state, a softer reveal -------- */
.faq-a { transition: grid-template-rows .34s var(--ease-out); }
.faq-item.is-open {
  border-color: var(--primary-line);
  box-shadow: 0 0 0 1px var(--primary-soft);
}
.faq-item.is-open .faq-q { color: var(--primary-text); }
/* --- Footer --------------------------------------------------------------
   One continuous dark surface carrying three bands: a lit invitation card,
   the body (brand · services · quick links · contact), and the legal line.
   The ambient layer — a warm bloom, a cool one and a faded grid — sits
   behind everything and never competes with the text. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, var(--background) 0%, var(--background-alt) 100%);
  border-block-start: 1px solid var(--border);
  /* Room for the floating buttons on phones, where they sit over the
     centred legal line. Wider screens clear them from the sides instead. */
  padding-block-end: calc(1.2rem + var(--fab-size) + var(--fab-safe));
}
/* The seam: a hairline that catches the accent in the middle. */
.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--primary) 50%, transparent 95%);
  opacity: .6;
  pointer-events: none;
  z-index: 1;
}

/* --- Ambient layer ------------------------------------------------------- */
.foot-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The blooms are wider than the screen on phones; the layer clips them
     itself so they can never widen the page, even where overflow: clip on
     the footer is not supported. */
  overflow: hidden;
  pointer-events: none;
}
.foot-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.foot-glow--warm {
  width: min(46rem, 80vw);
  height: 26rem;
  inset-block-start: -9rem;
  inset-inline-end: -8rem;
  background: var(--primary);
  opacity: .13;
}
.foot-glow--cool {
  width: min(38rem, 70vw);
  height: 22rem;
  inset-block-end: -10rem;
  inset-inline-start: -10rem;
  background: var(--secondary);
  opacity: .07;
}
.foot-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 75%);
}
:root[data-theme="light"] .foot-grid {
  background-image:
    linear-gradient(to right, rgba(11, 14, 22, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 14, 22, .045) 1px, transparent 1px);
}
:root[data-theme="light"] .foot-glow--warm { opacity: .09; }
:root[data-theme="light"] .foot-glow--cool { opacity: .05; }

/* --- The invitation card ------------------------------------------------- */
.foot-cta { padding-block: clamp(2.4rem, 5vw, 4rem) 0; }
.foot-cta-card {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.6vw, 2.9rem) clamp(1.5rem, 4vw, 3.4rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 140% at 100% 0%, var(--primary-soft), transparent 60%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[dir="rtl"] .foot-cta-card {
  background:
    radial-gradient(60% 140% at 0% 0%, var(--primary-soft), transparent 60%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
}
/* A thin lit edge along the top of the card. */
.foot-cta-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: .7;
}
/* A faint grid, only in the card's lit corner. */
.foot-cta-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 100% 0%, #000, transparent 55%);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 55%);
}
html[dir="rtl"] .foot-cta-card::after {
  mask-image: radial-gradient(circle at 0% 0%, #000, transparent 55%);
  -webkit-mask-image: radial-gradient(circle at 0% 0%, #000, transparent 55%);
}
:root[data-theme="light"] .foot-cta-card { box-shadow: var(--shadow-md), inset 0 1px 0 #FFFFFF; }
:root[data-theme="light"] .foot-cta-card::after {
  background-image:
    linear-gradient(to right, rgba(11, 14, 22, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 14, 22, .05) 1px, transparent 1px);
}

.foot-cta-text { min-width: 0; }
.foot-cta h2 {
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}
.foot-cta p {
  margin-block-start: .65rem;
  max-width: 54ch;
  font-size: clamp(.94rem, 1.15vw, 1.04rem);
  line-height: 1.85;
  color: var(--text-secondary);
}
.foot-cta-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.foot-cta-btn { box-shadow: 0 20px 44px -18px var(--primary-glow); }
.foot-cta-wa .icon { color: var(--primary); transition: transform var(--t) var(--ease-out); }
.foot-cta-wa:hover { --btn-bd: var(--primary-line); }
.foot-cta-wa:hover .icon { transform: scale(1.12) rotate(-8deg); }

/* --- The body ------------------------------------------------------------ */
.foot-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .95fr) minmax(0, .85fr) minmax(0, 1.25fr);
  gap: clamp(1.8rem, 3.4vw, 3.6rem);
  padding-block: clamp(2.8rem, 5vw, 4.2rem) clamp(2.4rem, 4.4vw, 3.4rem);
}

.foot-brand { min-width: 0; }
.foot-brand .brand { display: inline-flex; }
.foot-brand .brand-logo { height: 44px; width: auto; max-width: 190px; object-fit: contain; }
.foot-about {
  margin-block-start: 1.25rem;
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.95;
  color: var(--text-secondary);
}
.foot-site {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: 1.2rem;
  padding: .45rem .85rem .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-family: var(--font-num);
  font-size: .84rem;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
/* A small "live" pulse beside the address. */
.foot-site-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #2FD27A;
  box-shadow: 0 0 0 3px rgba(47, 210, 122, .16);
}
.foot-site .icon { width: 15px; height: 15px; color: var(--primary); }
.foot-site:hover { color: var(--text-primary); border-color: var(--primary-line); background-color: var(--primary-soft); }

/* --- Column headings ----------------------------------------------------- */
.foot-col { min-width: 0; }
.foot-h {
  position: relative;
  margin-block-end: 1.35rem;
  padding-block-end: .8rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
/* A short accent bar that fades into a hairline. */
.foot-h::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 2.4rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
}
html[dir="rtl"] .foot-h::after { background: linear-gradient(270deg, var(--primary), transparent); }

.foot-col ul { display: grid; gap: .5rem; }

/* --- Link columns -------------------------------------------------------
   A short accent dash grows in front of the label on hover and the label
   slides along with it — the same motion in both reading directions. */
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-block: .2rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), gap var(--t) var(--ease-out);
}
.foot-links a::before {
  content: '';
  width: 0;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--primary);
  transition: width var(--t) var(--ease-out);
}
.foot-links a:hover,
.foot-links a:focus-visible { color: var(--text-primary); gap: .55rem; }
.foot-links a:hover::before,
.foot-links a:focus-visible::before { width: .8rem; }

/* --- Contact rows -------------------------------------------------------- */
.foot-contact ul { gap: .35rem; }
.foot-ct {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  margin-inline: -.6rem;
  padding: .5rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.foot-ct-ico {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-line);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--primary-soft), transparent);
  color: var(--primary);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.foot-ct-ico .icon { width: 17px; height: 17px; }
.foot-ct-text { display: grid; gap: .1rem; min-width: 0; }
.foot-ct-text small {
  font-size: .75rem;
  line-height: 1.45;
  color: var(--text-faint);
}
.foot-ct-text b {
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--ease);
}
/* LTR values (numbers, email) keep the column's own alignment in Arabic. */
html[dir="rtl"] .foot-ct-text b[dir="ltr"] { text-align: right; }
a.foot-ct:hover,
a.foot-ct:focus-visible { background-color: var(--glass); border-color: var(--border); }
a.foot-ct:hover .foot-ct-text b,
a.foot-ct:focus-visible .foot-ct-text b { color: var(--primary-text); }
a.foot-ct:hover .foot-ct-ico,
a.foot-ct:focus-visible .foot-ct-ico {
  background-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 10px 22px -10px var(--primary-glow);
  transform: translateY(-2px);
}

/* --- The legal line ------------------------------------------------------ */
.foot-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-block: 1.5rem .4rem;
  font-size: .86rem;
  color: var(--text-muted);
}
/* The divider fades out at both ends instead of stopping abruptly. */
.foot-bottom::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent);
}
.foot-copy { min-width: 0; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 0;
}
.foot-legal a {
  position: relative;
  padding-inline: .9rem;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease);
}
.foot-legal a:last-child { padding-inline-end: 0; }
/* A dot between items, never before the first. */
.foot-legal a + a::before {
  content: '';
  position: absolute;
  inset-inline-start: -2px;
  inset-block-start: 50%;
  width: 4px;
  height: 4px;
  margin-block-start: -2px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: .6;
}
.foot-legal a:first-child { padding-inline-start: 0; }
.foot-legal a:hover,
.foot-legal a:focus-visible { color: var(--primary-text); }

/* --- Wide screens: the floating buttons sit in the bottom corners, so the
   legal line clears them sideways and the footer can end close to it. */
@media (min-width: 768px) {
  .site-footer { padding-block-end: calc(var(--fab-edge) + var(--fab-safe) + .9rem); }
  .foot-bottom { padding-inline: calc(var(--fab-size) + 1rem); min-height: var(--fab-size); }
}

/* --- Laptops: brand across the top, three columns beneath ---------------- */
@media (max-width: 1099px) {
  .foot-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 2.6rem) clamp(1.5rem, 3vw, 2.4rem);
  }
  .foot-brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    padding-block-end: clamp(2rem, 4vw, 2.6rem);
    border-block-end: 1px solid var(--border);
  }
  .foot-brand .brand,
  .foot-brand .foot-about,
  .foot-brand .foot-site { grid-column: 1; }
  .foot-brand .foot-site { justify-self: start; }
  .foot-about { max-width: 52ch; }
  .foot-brand .social-block {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
    margin-block-start: 0;
  }
}

/* --- Tablets: the invitation stacks; services and links pair up ---------- */
@media (max-width: 859px) {
  .foot-cta-card { flex-direction: column; align-items: flex-start; }
  .foot-cta-actions { width: 100%; }
  .foot-cta-actions .btn { flex: 1 1 12rem; }

  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-contact { grid-column: 1 / -1; }
  .foot-contact ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
}

/* --- Phones: one clean section under the next ----------------------------- */
@media (max-width: 639px) {
  .foot-cta { padding-block-start: 2rem; }
  .foot-cta-card {
    align-items: center;
    text-align: center;
    gap: 1.4rem;
    padding: 1.8rem 1.25rem;
    border-radius: var(--r-lg);
  }
  .foot-cta p { margin-inline: auto; }
  .foot-cta-actions { flex-direction: column; align-items: stretch; gap: .6rem; }
  .foot-cta-actions .btn { flex: none; width: 100%; }

  .foot-main { gap: 0; padding-block: 2.2rem 1.2rem; }

  /* The brand leads, centred, with the social row beneath it. */
  .foot-brand {
    display: block;
    text-align: center;
    padding-block-end: 1.9rem;
  }
  .foot-about { margin-inline: auto; max-width: 44ch; font-size: .92rem; }
  .foot-brand .social-block { margin-block-start: 1.5rem; }
  .foot-brand .social { justify-content: center; }

  /* Services and quick links share a row; contact follows, full width. */
  .foot-col { padding-block: 1.6rem; }
  .foot-services { padding-inline-end: .75rem; }
  .foot-contact { border-block-start: 1px solid var(--border); }
  .foot-h { margin-block-end: 1.05rem; padding-block-end: .7rem; font-size: .96rem; }
  .foot-col ul { gap: .3rem; }
  .foot-links a { font-size: .89rem; }

  .foot-contact ul { grid-template-columns: 1fr; gap: .2rem; }

  .foot-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .75rem;
    padding-block: 1.3rem 0;
    font-size: .82rem;
  }
  .foot-legal { justify-content: center; }
}

/* --- The narrowest phones ------------------------------------------------ */
@media (max-width: 379px) {
  .foot-links { grid-column: 1 / -1; }
  .foot-services { padding-inline-end: 0; border-block-end: 1px solid var(--border); }
  .foot-legal a { padding-inline: .6rem; }
  .foot-cta h2 { font-size: 1.32rem; }
}

@media (prefers-reduced-motion: reduce) {
  .social a, .social a::before, .foot-links a, .foot-links a::before,
  .foot-ct-ico, .foot-cta-wa .icon { transition: none; }
  .social a:hover, a.foot-ct:hover .foot-ct-ico { transform: none; }
}
/* --------------------------------------------------------------------------
   14. Responsive audit — global guards
   -------------------------------------------------------------------------- */

/* Any element that could out-grow its column is clamped here rather than
   being patched case by case further up the file. */
img, svg, video, iframe, table, pre, canvas { max-width: 100%; }
iframe { border: 0; width: 100%; }

/* Long unbroken strings (URLs, emails) must wrap, not scroll the page. */
a[href^="mailto:"], a[href^="tel:"], .break-any { overflow-wrap: anywhere; }

@media (max-width: 1279px) {
  :root { --max: 1120px; --max-wide: 1240px; }
}
@media (max-width: 1023px) {
  :root { --header-h: 68px; --section-y: clamp(3.4rem, 8vw, 5.5rem); }
  .sec-head--split { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 767px) {
  :root { --header-h: 64px; --section-y: clamp(3rem, 9vw, 4.2rem); --section-y-tight: 2.6rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: 1fr; }
  .process-panel { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  :root { --gutter: 1.1rem; }
  .btn { padding-inline: 1.25rem; }
  .btn--lg { padding: .95rem 1.4rem; min-height: 50px; font-size: .97rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 1.75rem; }
  .filters { gap: .4rem; }
  .filter { padding: .5rem .85rem; font-size: .84rem; }
}
@media (max-width: 359px) {
  :root { --gutter: .9rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-tile:last-child { display: none; }
}

/* --- Print ------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .nav-scrim, .fab-rail, .site-footer,
  .hero-bg, .hero-cue, .cta-band { display: none !important; }
  body { background: #fff; color: #111; }
  .prose, .lead, p { color: #222; }
  a { color: #111; text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   15. Team — the /team page and the team teaser on About
   -------------------------------------------------------------------------- */

/* --- Initials avatar (a photo replaces it once one is supplied) --------- */
.tm-av {
  --av: 56px;
  position: relative;
  width: var(--av);
  height: var(--av);
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  font-family: var(--font-ar);
  font-size: calc(var(--av) * .3);
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  background: linear-gradient(145deg, var(--primary-hover), var(--primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 3px var(--stack-ring, var(--background));
}
.tm-av--2 { background: linear-gradient(145deg, #2A303F, #131722); color: #FF8B45; }
.tm-av--3 { background: linear-gradient(145deg, #7A3A14, #2A1A12); color: #FFD7BF; }
.tm-av > span { position: relative; white-space: nowrap; transition: transform .6s var(--ease-out); }
.tm-av img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }

.team-stack { display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; }
.team-stack .tm-av { --av: 46px; }
.team-stack .tm-av + .tm-av { margin-inline-start: -12px; }

/* --- Hero ------------------------------------------------------------------ */
.team-hero .page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.team-hero h1 { margin-block-end: .5rem; }
.team-tagline {
  max-width: 32ch;
  margin-block-end: 1rem;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.65;
  color: var(--text-primary);
  text-wrap: balance;
}
.team-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: 1.5rem;
  padding: .42rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.team-back .icon { width: 15px; height: 15px; color: var(--primary); transition: transform var(--t) var(--ease-out); }
/* "Back" points toward the reading start: right in Arabic, left in English. */
html[dir="ltr"] .team-back .icon { transform: scaleX(-1); }
.team-back:hover, .team-back:focus-visible { color: var(--text-primary); border-color: var(--primary-line); background-color: var(--primary-soft); }
html[dir="rtl"] .team-back:hover .icon { transform: translateX(3px); }
html[dir="ltr"] .team-back:hover .icon { transform: scaleX(-1) translateX(3px); }

.team-summary {
  --stack-ring: var(--surface-2);
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.team-summary::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: .7;
}
.team-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .65rem; margin-block: 1.35rem .4rem; }
.team-count b { font-family: var(--font-num); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 700; line-height: 1; color: var(--primary); }
.team-count span { font-weight: 600; color: var(--text-primary); }
.team-summary p { font-size: .92rem; line-height: 1.85; color: var(--text-muted); }
.team-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: 1.1rem; }
.team-chips li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .34rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .8rem;
  color: var(--text-secondary);
}
.team-chips .icon { width: 13px; height: 13px; color: var(--primary); }

/* --- Introduction ------------------------------------------------------- */
.team-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.team-quote {
  margin-block: 1.4rem 1.3rem;
  padding: 1.15rem 1.4rem;
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--primary-soft), transparent 85%);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  font-weight: 500;
  line-height: 1.95;
  color: var(--text-primary);
}
html[dir="rtl"] .team-quote { background: linear-gradient(270deg, var(--primary-soft), transparent 85%); }
.team-intro-copy > p { line-height: 1.95; color: var(--text-secondary); }
.team-intro-copy > p + p { margin-block-start: .9rem; }
.team-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }

/* --- Member cards ---------------------------------------------------------
   The reveal lives on .tm-cell so the card's own hover transition never
   overrides the entrance fade. */
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tm-cell { display: flex; min-width: 0; }
.tm-card {
  --stack-ring: var(--surface-2);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tm-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 18%;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.tm-media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 1.8rem);
  border-block-end: 1px solid var(--border);
  background: radial-gradient(70% 90% at 50% 0%, var(--primary-soft), transparent 72%);
  overflow: hidden;
}
.tm-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 70%);
  opacity: .8;
  transition: opacity var(--t) var(--ease);
}
.tm-num {
  position: absolute;
  inset-block-start: .95rem;
  inset-inline-start: 1.1rem;
  font-family: var(--font-num);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-faint);
  transition: color var(--t) var(--ease);
}
.tm-card .tm-av {
  --av: clamp(96px, 10vw, 112px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 5px var(--surface-2),
    0 0 0 6px var(--primary-line),
    0 22px 40px -22px var(--primary-glow);
  transition: transform .5s var(--ease-out), box-shadow var(--t) var(--ease);
}
.tm-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: clamp(1.15rem, 2.4vw, 1.45rem) clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.35rem, 2.6vw, 1.7rem);
  text-align: center;
}
.tm-name { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.tm-role {
  display: inline-flex;
  align-items: center;
  padding: .26rem .75rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary-text);
}
.tm-desc { max-width: 32ch; margin-block-start: .5rem; font-size: .88rem; line-height: 1.85; color: var(--text-muted); }

.tm-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-line);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-soft);
}
.tm-card:hover::before { opacity: .85; }
.tm-card:hover .tm-media::after { opacity: 1; }
.tm-card:hover .tm-num { color: var(--primary-text); }
.tm-card:hover .tm-av {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 5px var(--surface-2),
    0 0 0 6px var(--primary),
    0 26px 48px -20px var(--primary-glow);
}
.tm-card:hover .tm-av > span { transform: scale(1.06); }
.tm-card:hover .tm-av img { transform: scale(1.08); }

/* --- Collaboration timeline --------------------------------------------- */
.tl { --tl-ring: var(--background); position: relative; display: grid; gap: clamp(.9rem, 2vw, 1.25rem); max-width: 1000px; margin-inline: auto; }
.tl::before {
  content: '';
  position: absolute;
  inset-block: 1.6rem;
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background: linear-gradient(180deg, transparent, var(--primary-line) 8%, var(--border-strong) 50%, var(--primary-line) 92%, transparent);
}
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; }
.tl-node {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--tl-ring);
  font-family: var(--font-num);
  font-size: .92rem;
  font-weight: 700;
  color: var(--primary);
  box-shadow: 0 0 0 6px var(--tl-ring), 0 0 28px -8px var(--primary-glow);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tl-card {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.tl-item:nth-child(even) .tl-card { grid-column: 3; }
.tl-ic {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--glass);
  color: var(--primary);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.tl-ic .icon { width: 19px; height: 19px; }
.tl-card h3 { margin-block-end: .3rem; font-size: 1.02rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.tl-card p { font-size: .88rem; line-height: 1.8; color: var(--text-muted); }
.tl-item:hover .tl-card { border-color: var(--primary-line); transform: translateY(-3px); box-shadow: var(--shadow); }
.tl-item:hover .tl-ic { border-color: var(--primary-line); background-color: var(--primary-soft); }
.tl-item:hover .tl-node { background-color: var(--primary); color: #FFFFFF; box-shadow: 0 0 0 6px var(--tl-ring), 0 0 34px -4px var(--primary-glow); }

/* --- Team teaser on the About page ---------------------------------------- */
.team-teaser {
  --stack-ring: var(--surface-2);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 140% at 100% 0%, var(--primary-soft), transparent 60%),
    linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  box-shadow: var(--shadow-sm);
}
html[dir="rtl"] .team-teaser {
  background:
    radial-gradient(60% 140% at 0% 0%, var(--primary-soft), transparent 60%),
    linear-gradient(195deg, var(--surface-2), var(--surface) 70%);
}
.team-teaser-copy { max-width: 56ch; }
.team-teaser-copy .h-2 { margin-block-end: .7rem; }
.team-teaser-copy p { line-height: 1.9; color: var(--text-secondary); }
.team-teaser-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }

/* --- Light theme: textures drawn for a dark ground ------------------------ */
:root[data-theme="light"] .tm-media::after {
  background-image:
    linear-gradient(to right, rgba(11, 14, 22, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 14, 22, .05) 1px, transparent 1px);
}
:root[data-theme="light"] .team-summary { box-shadow: var(--shadow-md), inset 0 1px 0 #FFFFFF; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 959px) {
  .team-hero .page-hero-inner { grid-template-columns: 1fr; align-items: start; }
  .team-intro { grid-template-columns: 1fr; }
  .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .tl::before { inset-inline-start: 26px; }
  .tl-item { grid-template-columns: 52px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .tl-node { grid-column: 1; }
  .tl-card, .tl-item:nth-child(even) .tl-card { grid-column: 2; }
  .team-teaser { flex-direction: column; align-items: flex-start; }
  .team-teaser-side { align-items: flex-start; }
}
@media (max-width: 559px) {
  /* Phones: a compact horizontal card keeps nine members from becoming a
     very long scroll. */
  .tm-grid { grid-template-columns: 1fr; gap: .8rem; }
  .tm-card { flex-direction: row; align-items: stretch; }
  .tm-media { padding: 1.1rem; border-block-end: 0; border-inline-end: 1px solid var(--border); }
  .tm-num { display: none; }
  .tm-card .tm-av { --av: 68px; }
  .tm-body { align-items: flex-start; justify-content: center; padding: 1rem 1.1rem; text-align: start; gap: .35rem; }
  .tm-desc { margin-block-start: .25rem; font-size: .84rem; line-height: 1.75; }
  .team-values { grid-template-columns: 1fr; }
  .team-teaser-side, .team-teaser-side .btn { width: 100%; }
}
@media (max-width: 479px) {
  .tl-card { grid-template-columns: 1fr; gap: .7rem; }
  .tl-ic { width: 40px; height: 40px; }
  .team-stack .tm-av { --av: 40px; }
  .team-stack .tm-av + .tm-av { margin-inline-start: -10px; }
}
/* One initial reads cleanly at the small, overlapping size. */
.team-stack .tm-av { font-size: calc(var(--av) * .42); }

/* --------------------------------------------------------------------------
   16. About section — its menu, sub-navigation and five pages
   -------------------------------------------------------------------------- */

/* --- Desktop "About us" menu: icon, title and a one-line hint ------------ */
.nav-menu.nav-menu--about {
  min-width: 348px;
  max-width: min(384px, calc(100vw - 2rem));
  padding: .45rem;
}
.nav-about-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .58rem .7rem;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  opacity: 0;
  translate: 0 5px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              opacity .32s var(--ease-out), translate .32s var(--ease-out);
}
.nav-about-item + .nav-about-item { margin-block-start: 2px; }
/* The items settle one after another as the panel opens. */
.nav-has-menu:hover .nav-about-item,
.nav-has-menu:focus-within .nav-about-item,
.nav-has-menu.is-open .nav-about-item { opacity: 1; translate: none; }
.nav-about-item:nth-child(2) { transition-delay: 0s, 0s, .035s, .035s; }
.nav-about-item:nth-child(3) { transition-delay: 0s, 0s, .07s, .07s; }
.nav-about-item:nth-child(4) { transition-delay: 0s, 0s, .105s, .105s; }
.nav-about-item:nth-child(5) { transition-delay: 0s, 0s, .14s, .14s; }

.nav-about-ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--glass);
  color: var(--primary);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.nav-about-ico .icon { width: 18px; height: 18px; }
.nav-about-text { display: grid; gap: .08rem; min-width: 0; }
.nav-about-text b { font-size: .93rem; font-weight: 600; line-height: 1.45; color: var(--text-primary); }
.nav-about-text small {
  overflow: hidden;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-about-go {
  width: 15px;
  height: 15px;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease-out);
}
html[dir="rtl"] .nav-about-go { transform: scaleX(-1) translateX(-4px); }
.nav-about-item:hover,
.nav-about-item:focus-visible { background-color: var(--glass-2); }
.nav-about-item:focus-visible { outline-offset: -2px; }
.nav-about-item:hover .nav-about-ico,
.nav-about-item:focus-visible .nav-about-ico {
  border-color: var(--primary);
  background-color: var(--primary);
  color: #FFFFFF;
  transform: scale(1.04);
}
.nav-about-item:hover .nav-about-go,
.nav-about-item:focus-visible .nav-about-go { opacity: 1; transform: none; }
html[dir="rtl"] .nav-about-item:hover .nav-about-go,
html[dir="rtl"] .nav-about-item:focus-visible .nav-about-go { transform: scaleX(-1); }
.nav-about-item.is-current { background-color: var(--primary-soft); }
.nav-about-item.is-current .nav-about-ico { border-color: var(--primary-line); }
.nav-about-item.is-current b { color: var(--primary-text); }

/* --- Drawer accordion ------------------------------------------------------ */
.mnav-sub.mnav-sub--about { gap: .15rem; }
.mnav-sub.mnav-sub--about.is-open { max-height: 560px; padding-block: .2rem .45rem; }
.mnav-sub--about a { justify-content: flex-start; gap: .75rem; min-height: 56px; padding: .45rem .8rem .45rem 2.3rem; }
html[dir="rtl"] .mnav-sub--about a { padding: .45rem 2.3rem .45rem .8rem; }
.mnav-sub-ico {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--glass);
  color: var(--primary);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mnav-sub-ico .icon { width: 16px; height: 16px; }
.mnav-sub-text { display: grid; gap: .05rem; min-width: 0; }
.mnav-sub-text b { font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--text-secondary); }
.mnav-sub-text small { font-size: .76rem; line-height: 1.45; color: var(--text-faint); }
.mnav-sub--about a:hover .mnav-sub-text b,
.mnav-sub--about a.is-current .mnav-sub-text b { color: var(--primary-text); }
.mnav-sub--about a:hover .mnav-sub-ico { border-color: var(--primary-line); }
.mnav-sub--about a.is-current { background-color: var(--primary-soft); }
.mnav-sub--about a.is-current .mnav-sub-ico { border-color: var(--primary); background-color: var(--primary); color: #FFFFFF; }

/* --- Section tabs under each hero ------------------------------------------ */
.about-nav { position: relative; border-block-end: 1px solid var(--border); background: var(--background); }
.about-nav-list {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding-block: .85rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.about-nav-list::-webkit-scrollbar { display: none; }
.about-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 40px;
  padding-inline: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.about-nav-link .icon { width: 15px; height: 15px; color: var(--text-muted); transition: color var(--t-fast) var(--ease); }
.about-nav-link:hover { color: var(--text-primary); border-color: var(--border-strong); }
.about-nav-link:hover .icon { color: var(--primary); }
.about-nav-link.is-current { border-color: var(--primary-line); background: var(--primary-soft); font-weight: 600; color: var(--primary-text); }
.about-nav-link.is-current .icon { color: var(--primary); }
@media (min-width: 900px) { .about-nav-list { justify-content: center; } }

/* --- Shared building blocks ------------------------------------------------- */
.ab-ico {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--glass);
  color: var(--primary);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ab-ico .icon { width: 19px; height: 19px; }
.ab-go { width: 16px; height: 16px; flex: none; transition: transform var(--t) var(--ease-out), color var(--t-fast) var(--ease); }
html[dir="rtl"] .ab-go { transform: scaleX(-1); }

.ab-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: 1.4rem;
  font-size: .94rem;
  font-weight: 600;
  color: var(--primary-text);
}
.ab-more .icon { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
html[dir="rtl"] .ab-more .icon { transform: scaleX(-1); }
.ab-more:hover .icon { transform: translateX(4px); }
html[dir="rtl"] .ab-more:hover .icon { transform: scaleX(-1) translateX(4px); }
.ab-center { display: flex; justify-content: center; margin-block-start: clamp(1.4rem, 3vw, 2.2rem); }
.ab-center .ab-more { margin-block-start: 0; }

.ab-prose p { line-height: 1.95; color: var(--text-secondary); }
.ab-prose p + p { margin-block-start: .9rem; }
.ab-prose { margin-block-start: 1.1rem; }

/* Anchored sections stop clear of the sticky header. */
.ab-anchor, .tl--phases .tl-item { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* --- Heroes ----------------------------------------------------------------- */
.ab-hero .page-hero-inner.ab-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.ab-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.8rem; }
.ab-hero--center .page-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-hero--center .eyebrow::before { display: none; }
.ab-hero--center h1 { max-width: 22ch; }
.ab-hero--center .lead { margin-inline: auto; }
.ab-hero--center .ab-hero-actions { justify-content: center; }

.ab-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ab-panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: .7;
}
:root[data-theme="light"] .ab-panel { box-shadow: var(--shadow-md), inset 0 1px 0 #FFFFFF; }
.ab-panel-head { display: flex; align-items: center; gap: .5rem; margin-block-end: 1.1rem; font-size: .85rem; font-weight: 600; color: var(--primary-text); }
.ab-panel-head .icon { width: 16px; height: 16px; }

.ab-points ul { display: grid; gap: .85rem; }
.ab-points li { display: flex; align-items: flex-start; gap: .7rem; font-size: .96rem; line-height: 1.7; color: var(--text-primary); }
.ab-check {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  margin-block-start: .12rem;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.ab-check .icon { width: 13px; height: 13px; }

.ab-toc ol { display: grid; gap: .15rem; counter-reset: toc; }
.ab-toc a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .6rem;
  border-radius: var(--r-sm);
  font-size: .93rem;
  color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ab-toc a::before {
  content: counter(toc, decimal-leading-zero);
  counter-increment: toc;
  min-width: 1.6rem;
  font-family: var(--font-num);
  font-size: .76rem;
  font-weight: 700;
  color: var(--text-faint);
  transition: color var(--t-fast) var(--ease);
}
.ab-toc a:hover { background-color: var(--glass-2); color: var(--text-primary); }
.ab-toc a:hover::before { color: var(--primary); }

.ab-phase-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .5rem; }
.ab-phase-index a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .55rem;
  border-radius: var(--r-sm);
  font-size: .87rem;
  line-height: 1.45;
  color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ab-phase-index a span { min-width: 1.5rem; font-family: var(--font-num); font-size: .75rem; font-weight: 700; color: var(--primary); }
.ab-phase-index a:hover { background-color: var(--glass-2); color: var(--text-primary); }

.ab-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-block-start: 2.1rem; }
.ab-proof li {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .87rem;
  color: var(--text-secondary);
}
.ab-proof b { font-family: var(--font-num); font-size: 1.05rem; font-weight: 700; color: var(--primary); }

/* --- About us: brief, offer, UX, hub ----------------------------------------- */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.ab-split--top { align-items: start; }

.ab-offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.4vw, 1rem); }
.ab-offer-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  color: var(--text-primary);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ab-offer-name { flex: 1; min-width: 0; font-size: .98rem; font-weight: 600; line-height: 1.5; }
.ab-offer-item .ab-go { color: var(--text-faint); }
.ab-offer-item:hover { border-color: var(--primary-line); box-shadow: var(--shadow); }
.ab-offer-item:hover .ab-ico { border-color: var(--primary); background-color: var(--primary); color: #FFFFFF; }
.ab-offer-item:hover .ab-go { color: var(--primary); transform: translateX(4px); }
html[dir="rtl"] .ab-offer-item:hover .ab-go { transform: scaleX(-1) translateX(4px); }

.ab-ux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.ab-ux-copy > p { margin-block-start: 1rem; line-height: 1.95; color: var(--text-secondary); }
.ab-ux-points { display: grid; gap: .8rem; }
.ab-ux-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  transition: border-color var(--t) var(--ease);
}
.ab-ux-point:hover { border-color: var(--primary-line); }
.ab-ux-point:hover .ab-ico { border-color: var(--primary-line); background-color: var(--primary-soft); }
.ab-ux-point h3 { margin-block-end: .3rem; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
.ab-ux-point p { font-size: .9rem; line-height: 1.8; color: var(--text-muted); }

.ab-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.ab-hub-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(1.3rem, 2.4vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.ab-hub-card .ab-ico { margin-block-end: .5rem; }
.ab-hub-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.ab-hub-card p { flex: 1; font-size: .88rem; line-height: 1.75; color: var(--text-muted); }
.ab-hub-go { display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .5rem; font-size: .85rem; font-weight: 600; color: var(--primary-text); }
.ab-hub-go .ab-go { width: 15px; height: 15px; }
.ab-hub-card:hover { border-color: var(--primary-line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ab-hub-card:hover .ab-ico { border-color: var(--primary); background-color: var(--primary); color: #FFFFFF; }
.ab-hub-card:hover .ab-go { transform: translateX(4px); }
html[dir="rtl"] .ab-hub-card:hover .ab-go { transform: scaleX(-1) translateX(4px); }

/* --- Why us ------------------------------------------------------------------ */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.why-cell { display: flex; min-width: 0; }
.why-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.3rem, 2.4vw, 1.65rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.why-card::after {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  z-index: -1;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-soft), transparent 68%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.why-num {
  position: absolute;
  inset-block-start: 1.05rem;
  inset-inline-end: 1.15rem;
  font-family: var(--font-num);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-faint);
  transition: color var(--t) var(--ease);
}
.why-card .ab-ico { margin-block-end: 1.05rem; }
.why-card h3 { margin-block-end: .4rem; font-size: 1.02rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.why-card p { font-size: .88rem; line-height: 1.8; color: var(--text-muted); }
.why-card:hover { border-color: var(--primary-line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-card:hover::after { opacity: 1; }
.why-card:hover .why-num { color: var(--primary-text); }
.why-card:hover .ab-ico { border-color: var(--primary); background-color: var(--primary); color: #FFFFFF; }

.ab-statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
.ab-quote {
  margin-block-start: 1.3rem;
  padding-inline-start: 1.3rem;
  border-inline-start: 3px solid var(--primary);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.75;
  color: var(--text-primary);
}
.ab-statement-body > p { line-height: 1.95; color: var(--text-secondary); }
.ab-statement-body > p + p { margin-block-start: .9rem; }
.ab-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-block-start: clamp(1.6rem, 3.5vw, 2.4rem); }
.ab-outcome { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--glass); }
.ab-outcome .ab-ico { width: 42px; height: 42px; margin-block-end: .85rem; }
.ab-outcome h3 { margin-block-end: .35rem; font-size: .98rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.ab-outcome p { font-size: .86rem; line-height: 1.75; color: var(--text-muted); }

.ab-guarantees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.3rem); }
.ab-guarantee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--primary-soft), transparent 62%),
    linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
}
html[dir="rtl"] .ab-guarantee {
  background:
    radial-gradient(80% 120% at 0% 0%, var(--primary-soft), transparent 62%),
    linear-gradient(195deg, var(--surface-2), var(--surface) 70%);
}
.ab-guarantee h3 { margin-block-end: .35rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.ab-guarantee p { font-size: .92rem; line-height: 1.85; color: var(--text-secondary); }

/* --- About in detail ------------------------------------------------------- */
.ab-callout {
  margin-block-start: 1.6rem;
  padding: 1.3rem 1.45rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--primary-soft), transparent 90%);
}
html[dir="rtl"] .ab-callout { background: linear-gradient(270deg, var(--primary-soft), transparent 90%); }
.ab-callout-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--primary-text); }
.ab-callout-head .icon { width: 17px; height: 17px; }
.ab-callout .ab-prose { margin-block-start: .5rem; }

.vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.vm-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  box-shadow: var(--shadow-sm);
}
.vm-card::before {
  content: '';
  position: absolute;
  inset-block-start: -45%;
  inset-inline-end: -25%;
  z-index: -1;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow), transparent 66%);
  filter: blur(40px);
  opacity: .4;
}
.vm-label { display: flex; align-items: center; gap: .75rem; margin-block-end: 1.2rem; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.vm-label .ab-ico { border-color: var(--primary-line); background: var(--primary-soft); }
.vm-card p { font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 500; line-height: 2; color: var(--text-secondary); }

.sector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1rem); }
.sector {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  color: var(--text-primary);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sector-text { display: grid; flex: 1; gap: .2rem; min-width: 0; }
.sector-text b { font-size: 1rem; font-weight: 700; line-height: 1.5; }
.sector-text small { font-size: .85rem; line-height: 1.75; color: var(--text-muted); }
.sector-link { display: inline-flex; align-items: center; gap: .35rem; margin-block-start: .35rem; font-size: .8rem; font-style: normal; font-weight: 600; color: var(--primary-text); }
.sector-link .ab-go { width: 14px; height: 14px; }
a.sector:hover { border-color: var(--primary-line); box-shadow: var(--shadow); }
a.sector:hover .ab-ico { border-color: var(--primary); background-color: var(--primary); color: #FFFFFF; }
a.sector:hover .ab-go { transform: translateX(3px); }
html[dir="rtl"] a.sector:hover .ab-go { transform: scaleX(-1) translateX(3px); }

.tx-path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.1rem); }
.tx-path::before {
  content: '';
  position: absolute;
  inset-block-start: 32px;
  inset-inline: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-line) 12%, var(--border-strong) 50%, var(--primary-line) 88%, transparent);
}
.tx-step { position: relative; padding-inline: .4rem; text-align: center; }
.tx-node {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 1.15rem;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--background-alt);
  color: var(--primary);
  box-shadow: 0 0 0 8px var(--background-alt), 0 0 30px -8px var(--primary-glow);
}
.tx-node .icon { width: 22px; height: 22px; }
.tx-step h3 { margin-block-end: .4rem; font-size: 1.02rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.tx-step p { max-width: 28ch; margin-inline: auto; font-size: .88rem; line-height: 1.8; color: var(--text-muted); }

/* --- Our approach: the phase timeline ----------------------------------------- */
.tl--phases .tl-card { padding: clamp(1.25rem, 2.6vw, 1.65rem) clamp(1.2rem, 2.6vw, 1.6rem); }
.tl--phases .tl-card h3 { font-size: 1.1rem; }
.tl--phases .tl-card p { font-size: .9rem; }
.tl-phase { display: block; margin-block-end: .15rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--primary-text); }

/* --- Team page: the pointer to our approach ------------------------------------ */
.about-link-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: clamp(1.2rem, 2.6vw, 1.6rem) clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 140% at 100% 0%, var(--primary-soft), transparent 60%),
    linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
html[dir="rtl"] .about-link-card {
  background:
    radial-gradient(60% 140% at 0% 0%, var(--primary-soft), transparent 60%),
    linear-gradient(195deg, var(--surface-2), var(--surface) 70%);
}
.about-link-text { display: grid; gap: .2rem; min-width: 0; }
.about-link-text small { font-size: .82rem; font-weight: 600; color: var(--primary-text); }
.about-link-text b { font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 700; line-height: 1.55; color: var(--text-primary); }
.about-link-go {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  color: var(--primary);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.about-link-go .icon { width: 18px; height: 18px; }
html[dir="rtl"] .about-link-go .icon { transform: scaleX(-1); }
.about-link-card:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); }
.about-link-card:hover .about-link-go { background-color: var(--primary); color: #FFFFFF; }

/* --- Responsive ---------------------------------------------------------------- */
@media (max-width: 1099px) {
  .why-grid, .ab-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .ab-hero .page-hero-inner.ab-hero-grid,
  .ab-split, .ab-ux, .ab-statement { grid-template-columns: 1fr; }
  .ab-hero .page-hero-inner.ab-hero-grid { align-items: start; }
  .ab-offer, .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .tx-path::before { display: none; }
}
@media (max-width: 767px) {
  .vm-grid, .ab-guarantees, .ab-outcomes { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .why-grid, .ab-hub, .ab-offer, .sector-grid { grid-template-columns: 1fr; }
  .ab-hero-actions .btn { flex: 1 1 100%; }
  .about-link-card { grid-template-columns: auto minmax(0, 1fr); }
  .about-link-go { display: none; }
  .tx-path { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .tx-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; text-align: start; padding-inline: 0; }
  .tx-node { grid-row: span 2; width: 52px; height: 52px; margin: 0; box-shadow: 0 0 24px -8px var(--primary-glow); }
  .tx-step p { max-width: none; margin-inline: 0; }
  .ab-proof li { padding: .45rem .85rem; font-size: .82rem; }
}
/* Six values sit as a clean 3 × 2 rather than auto-fitting into 4 + 2. */
.feat-grid.ab-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 959px) { .feat-grid.ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .feat-grid.ab-values { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   17. Nine-item navigation, testimonials, FAQ and the "More" pages
   -------------------------------------------------------------------------- */

/* --- Header: nine top-level items ---------------------------------------
   Tighter pills on wide desktops, and the drawer takes over sooner — below
   1440px the full row no longer fits beside the brand and the controls. */
@media (max-width: 1679px) {
  .header-inner { gap: 1rem; }
  .nav-list { gap: 0; }
  .nav-link { --nav-pad: .66rem; font-size: .88rem; }
  html[lang="ar"] .nav-link,
  html[lang="ar"] .nav-trigger { font-size: .9rem; }
  .nav-has-menu > .nav-link { gap: .22rem; }
}
@media (max-width: 1439px) {
  .nav, .nav-menu { display: none; }
  .burger { display: inline-flex; }
  .header-inner { grid-template-columns: 1fr auto; }
  .site-header .brand-logo { height: 36px; }
  /* Re-allow the drawer the ≥1140px rule used to hide. */
  .mobile-nav { display: flex; }
  .nav-scrim { display: block; }
  .nav-scrim[hidden] { display: none; }
}

/* A wider panel for the services list, which carries longer hints. */
.nav-menu.nav-menu--services { min-width: 372px; max-width: min(404px, calc(100vw - 2rem)); }
.nav-menu--about .nav-menu-all { margin-block-start: .35rem; }

/* Drawer: "All services" closes the services list. */
.mnav-sub--about a.mnav-sub-all { min-height: 48px; }
.mnav-sub--about a.mnav-sub-all .mnav-sub-text b { color: var(--primary-text); }
.mnav-sub--about a.mnav-sub-all .mnav-sub-ico { border-style: dashed; }
.mnav-sub.mnav-sub--about.is-open { max-height: 640px; }

/* --- Testimonials --------------------------------------------------------- */
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.rv-cell { display: flex; min-width: 0; }
.rv-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  overflow: hidden;
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.rv-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.rv-quote { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.2rem; width: 40px; height: 40px; color: var(--primary); opacity: .14; }
.rv-card .rv-stars { margin-block-end: 0; }
.rv-text { flex: 1; margin: 0; font-size: 1rem; line-height: 1.95; color: var(--text-secondary); }
.rv-person { display: flex; align-items: center; gap: .8rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.rv-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--primary-hover), var(--primary-deep));
  font-size: .95rem;
  font-weight: 700;
  color: #FFFFFF;
}
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-who { display: grid; gap: .1rem; min-width: 0; }
.rv-who b { font-size: .98rem; font-weight: 700; color: var(--text-primary); }
.rv-who small { font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.rv-card:hover { border-color: var(--primary-line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rv-card:hover::before { opacity: .85; }

/* --- FAQ -------------------------------------------------------------------- */
.faq-page { max-width: 880px; margin-inline: auto; }
.faq-side p { font-size: .95rem; line-height: 1.85; color: var(--text-secondary); }
.faq-side-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.2rem; }

/* --- "More" pages ------------------------------------------------------------ */
.more-badge {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-block-end: 1.2rem;
  border: 1px solid var(--primary-line);
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 0 40px -10px var(--primary-glow);
}
.more-badge .icon { width: 26px; height: 26px; }
.more-soon { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1.2rem; max-width: 860px; margin-inline: auto; }
.more-soon h2 { margin-block-end: .5rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--text-primary); }
.more-soon p { line-height: 1.9; color: var(--text-secondary); }
.more-soon .ab-hero-actions { margin-block-start: 1.3rem; }
.more-others { max-width: 860px; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; }
.more-others-title { margin-block-end: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.ab-hub.more-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 959px) {
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .rv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .more-soon { grid-template-columns: 1fr; }
  .ab-hub.more-hub { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   18. Bottom tab bar (phones)
   A floating glass capsule: four destinations and the menu, one thumb away.
   The floating contact buttons and the footer's end spacing rise above it.
   -------------------------------------------------------------------------- */
.bnav { display: none; }

@media (max-width: 767px) {
  :root {
    --bnav-h: 64px;
    --bnav-gap: .6rem;
    /* Everything that already clears the safe area now clears the bar too:
       the WhatsApp and contact buttons, and the footer's bottom padding. */
    --fab-safe: calc(env(safe-area-inset-bottom, 0px) + var(--bnav-h) + var(--bnav-gap) + .55rem);
  }

  .bnav {
    position: fixed;
    inset-inline: .75rem;
    inset-block-end: calc(var(--bnav-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 190;               /* above the floating buttons, under the drawer and its scrim */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    height: var(--bnav-h);
    padding-inline: .3rem;
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    background: rgba(14, 17, 25, .86);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  :root[data-theme="light"] .bnav { box-shadow: 0 18px 40px -20px rgba(15, 18, 28, .35), inset 0 1px 0 #FFFFFF; }

  .bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-fast) var(--ease);
  }
  .bnav-ico {
    width: 38px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
                color var(--t) var(--ease), transform var(--t-fast) var(--ease-out);
  }
  .bnav-ico .icon { width: 20px; height: 20px; }
  .bnav-label {
    max-width: 100%;
    overflow: hidden;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[lang="ar"] .bnav-label { font-size: .72rem; }

  .bnav-item:active .bnav-ico { transform: scale(.92); }
  .bnav-item:focus-visible { outline: none; }
  .bnav-item:focus-visible .bnav-ico { border-color: var(--primary); }

  .bnav-item.is-active { color: var(--primary-text); }
  .bnav-item.is-active .bnav-ico {
    border-color: var(--primary-line);
    background: linear-gradient(160deg, var(--primary-soft), transparent);
    background-color: var(--primary-soft);
    color: var(--primary);
    box-shadow: 0 6px 16px -8px var(--primary-glow);
  }
  .bnav-item.is-active .bnav-label { font-weight: 700; }
}
@media (max-width: 767px) {
  /* The end-edge rail stacks two buttons (contact + back to top), so the
     legal line needs room for both above the tab bar. */
  .site-footer { padding-block-end: calc(1.2rem + (var(--fab-size) * 2) + .55rem + var(--fab-safe)); }
}

/* ==========================================================================
   Customer reviews — screenshot gallery and lightbox
   Order is the dashboard order, so the grid fills row by row (no masonry
   columns, which would read top-to-bottom). Screenshots are never cropped.
   ========================================================================== */
.rg-grid {
  --rg-cols: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--rg-cols), minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
  align-items: start;
}
@media (min-width: 380px)  { .rg-grid { --rg-cols: 2; } }
@media (min-width: 700px)  { .rg-grid { --rg-cols: 3; } }
@media (min-width: 1100px) { .rg-grid { --rg-cols: 4; } }

.rg-cell { min-width: 0; }

.rg-item {
  position: relative;
  display: block;
  padding: clamp(.3rem, .7vw, .5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  isolation: isolate;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.rg-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, var(--primary-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.rg-item picture,
.rg-item img { display: block; width: 100%; height: auto; }
.rg-item img {
  border-radius: calc(var(--r-lg) - .45rem);
  background: var(--surface-2);
}
.rg-item:hover {
  transform: translateY(-6px);
  border-color: var(--primary-line);
  box-shadow: var(--shadow-md), 0 26px 50px -30px var(--primary-glow);
}
.rg-item:hover::after { opacity: 1; }
.rg-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.rg-zoom {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 8, 13, .72);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), background var(--t) var(--ease);
}
.rg-zoom .icon { width: 17px; height: 17px; }
.rg-item:hover .rg-zoom,
.rg-item:focus-visible .rg-zoom { opacity: 1; transform: none; background: var(--primary); border-color: var(--primary); }
@media (hover: none) {
  .rg-item:hover { transform: none; }
  .rg-zoom { opacity: 1; transform: none; top: .65rem; inset-inline-end: .65rem; width: 30px; height: 30px; }
  .rg-zoom .icon { width: 14px; height: 14px; }
}

.rg-more {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(1.6rem, 3vw, 2.4rem);
}
.rg-more__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--glass);
  color: var(--text-primary);
  font-weight: 600;
  font-size: .95rem;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.rg-more__link:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.rg-more__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t) var(--ease-out);
}
[dir="rtl"] .rg-more__arrow { transform: scaleX(-1); }
.rg-more__link:hover .rg-more__arrow { transform: translateX(3px); }
[dir="rtl"] .rg-more__link:hover .rg-more__arrow { transform: scaleX(-1) translateX(3px); }

/* --- Lightbox: always dark, whatever the site theme -------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #F3F6FB;
  font-family: var(--font-num);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }

.lb__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255, 106, 26, .13), transparent 70%),
    rgba(4, 5, 9, .93);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.lb__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: max(.75rem, env(safe-area-inset-top)) clamp(.75rem, 3vw, 1.5rem) .75rem;
}
.lb__count { min-width: 4.5rem; font-size: .9rem; letter-spacing: .04em; color: rgba(243, 246, 251, .72); }

.lb__tools {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06);
}
.lb__zoom { min-width: 3.2rem; text-align: center; font-size: .8rem; color: rgba(243, 246, 251, .8); }

.lb__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease, border-color .2s ease;
}
.lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb__btn:hover { background: rgba(255, 255, 255, .1); }
.lb__btn:disabled { opacity: .32; cursor: default; background: transparent; }
.lb__btn:focus-visible { outline: 2px solid #FF6A1A; outline-offset: 2px; }
.lb__close { border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07); }
.lb__close:hover { background: #FF6A1A; border-color: #FF6A1A; color: #FFFFFF; }

.lb__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lb__stage.is-zoomed { cursor: grab; }
.lb__stage.is-panning { cursor: grabbing; }

.lb__img {
  display: block;
  max-width: min(92vw, 900px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease);
  -webkit-user-drag: none;
}
.lb__stage.is-zoomed .lb__img { cursor: inherit; }
.lb__stage.is-panning .lb__img { transition: opacity .25s var(--ease); }
.lb__img.is-loading { opacity: 0; }
.lb.is-open .lb__img:not(.is-loading) { animation: lb-in .35s var(--ease-out); }
@keyframes lb-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

.lb__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.lb__nav:hover { background: #FF6A1A; border-color: #FF6A1A; }
.lb__nav--prev { inset-inline-start: clamp(.5rem, 2.5vw, 2rem); }
.lb__nav--next { inset-inline-end: clamp(.5rem, 2.5vw, 2rem); }
[dir="rtl"] .lb__nav svg { transform: scaleX(-1); }

.lb__foot {
  position: relative;
  z-index: 2;
  padding: .6rem 1rem max(.9rem, env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--font-ar);
  font-size: .8rem;
  color: rgba(243, 246, 251, .5);
}
html[lang="en"] .lb__foot { font-family: var(--font-en); }

html.lb-lock,
html.lb-lock body { overflow: hidden; }

@media (max-width: 640px) {
  .lb__img { max-width: 94vw; max-height: calc(100dvh - 176px); }
  .lb__btn { width: 36px; height: 36px; }
  .lb__zoom { display: none; }
  .lb__nav { top: auto; bottom: max(.7rem, env(safe-area-inset-bottom)); transform: none; width: 46px; height: 46px; }
  .lb__foot { padding-inline: 4.5rem; padding-block: 1.1rem max(1.1rem, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .rg-item, .rg-zoom, .lb, .lb__img { transition: none; }
  .lb.is-open .lb__img:not(.is-loading) { animation: none; }
}

/* ==========================================================================
   Blog — Site Snap journal
   Index (hero + search, lead article, topics, grid) and article pages.
   ========================================================================== */
.bl-hero { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.bl-hero .page-hero-inner {
  max-width: 880px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bl-hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); line-height: 1.2; margin-block: 1rem .9rem; text-wrap: balance; }
.bl-hero .lead { margin-inline: auto; max-width: 62ch; }
.bl-hl {
  background: linear-gradient(120deg, var(--primary) 10%, var(--primary-hover) 90%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.bl-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .55;
}
.bl-orb--a { width: min(46vw, 460px); aspect-ratio: 1; top: -30%; inset-inline-start: 8%; background: radial-gradient(circle, var(--primary-glow), transparent 70%); }
.bl-orb--b { width: min(38vw, 380px); aspect-ratio: 1; bottom: -45%; inset-inline-end: 6%; background: radial-gradient(circle, var(--secondary-soft), transparent 70%); }

.bl-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .38rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}
.bl-badge .icon { width: 15px; height: 15px; }

/* --- Search ------------------------------------------------------------ */
.bl-search { position: relative; width: min(100%, 640px); margin-block-start: clamp(1.6rem, 3vw, 2.3rem); }
.bl-search__box {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem;
  padding-inline-start: 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bl-search__box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-md); }
.bl-search__box > .icon { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.bl-search__input {
  flex: 1;
  min-width: 0;
  padding-block: .72rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.bl-search__input::placeholder { color: var(--text-faint); }
.bl-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bl-search__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .78rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  color: #FFFFFF;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.bl-search__btn .icon { width: 17px; height: 17px; }
.bl-search__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-primary); }
.bl-search .search-suggest { text-align: start; }
@media (max-width: 520px) {
  .bl-search__btn { padding: .78rem; }
  .bl-search__btn span { display: none; }
}

/* --- Shared bits -------------------------------------------------------- */
.bl-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  padding: .32rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.bl-chip .icon { width: 14px; height: 14px; }
a.bl-chip:hover { background: var(--primary); color: #FFFFFF; }

.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; font-size: .84rem; color: var(--text-muted); }
.bl-meta time, .bl-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.bl-meta .icon { width: 15px; height: 15px; color: var(--primary); }

.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: fit-content;
  padding: .8rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  color: #FFFFFF;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 30px -16px var(--primary-glow);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.bl-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary); }
.bl-btn--ghost { background: var(--glass); border-color: var(--border-strong); color: var(--text-primary); box-shadow: none; }
.bl-btn--ghost:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); box-shadow: none; }

.bl-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t) var(--ease-out); }
[dir="rtl"] .bl-arrow { transform: scaleX(-1); }
.bl-btn:hover .bl-arrow, .bl-card:hover .bl-arrow { transform: translateX(4px); }
[dir="rtl"] .bl-btn:hover .bl-arrow, [dir="rtl"] .bl-card:hover .bl-arrow { transform: scaleX(-1) translateX(4px); }

.bl-link { color: var(--primary); font-weight: 600; }
.bl-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Lead article ------------------------------------------------------- */
.bl-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  margin-block-end: clamp(3rem, 6vw, 4.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.bl-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 80% at 0% 100%, var(--primary-soft), transparent 70%);
  pointer-events: none;
}
.bl-feature:hover { border-color: var(--primary-line); box-shadow: var(--shadow-lg), 0 34px 70px -44px var(--primary-glow); }
.bl-feature__media { position: relative; display: block; min-height: 340px; overflow: hidden; background: var(--surface-3); }
.bl-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.bl-feature:hover .bl-feature__media img { transform: scale(1.05); }
.bl-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 8, 13, .5), transparent 50%); }
.bl-feature__flag {
  position: absolute;
  top: 1.1rem;
  inset-inline-start: 1.1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .9rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #FFFFFF;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: var(--shadow-primary);
}
.bl-feature__flag .icon { width: 14px; height: 14px; fill: currentColor; }
.bl-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.6rem, 4vw, 3.2rem); }
.bl-feature__title { font-size: clamp(1.5rem, 2.9vw, 2.2rem); font-weight: 700; line-height: 1.4; text-wrap: balance; }
.bl-feature__title a { transition: color var(--t) var(--ease); }
.bl-feature__title a:hover { color: var(--primary); }
.bl-feature__excerpt { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.95; }
.bl-feature .bl-btn { margin-block-start: .4rem; }
@media (max-width: 900px) {
  .bl-feature { grid-template-columns: 1fr; }
  .bl-feature__media { min-height: 0; aspect-ratio: 16 / 9; }
}

/* --- Section head + topics --------------------------------------------- */
.bl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-end: clamp(1.2rem, 2.5vw, 1.7rem);
}
.bl-head .bl-badge { margin-block-end: .8rem; }
.bl-sec-title { font-size: clamp(1.4rem, 2.7vw, 1.95rem); font-weight: 700; line-height: 1.35; }
.bl-sec-sub { margin-block-start: .35rem; color: var(--text-muted); font-size: .94rem; }

.bl-cats { display: flex; flex-wrap: wrap; gap: .55rem; margin-block-end: clamp(1.8rem, 3.5vw, 2.6rem); }
.bl-cat {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bl-cat .icon { width: 16px; height: 16px; color: var(--primary); }
.bl-cat .n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: .3rem;
  border-radius: 7px;
  background: var(--glass-2);
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: .72rem;
}
.bl-cat:hover { transform: translateY(-2px); border-color: var(--primary-line); color: var(--text-primary); }
.bl-cat.is-active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; box-shadow: 0 12px 26px -14px var(--primary-glow); }
.bl-cat.is-active .icon { color: #FFFFFF; }
.bl-cat.is-active .n { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
@media (max-width: 767px) {
  .bl-cats { flex-wrap: nowrap; overflow-x: auto; padding-block: .2rem .5rem; scrollbar-width: none; scroll-snap-type: x proximity; }
  .bl-cats::-webkit-scrollbar { display: none; }
  .bl-cat { flex: none; scroll-snap-align: start; }
}

/* --- Grid + card -------------------------------------------------------- */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  align-items: stretch;
}
@media (max-width: 1023px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .bl-grid { grid-template-columns: minmax(0, 1fr); } }

.bl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease-out), border-color var(--t) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.bl-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transform: scaleX(0);
  transition: transform var(--t-slow) var(--ease-out);
}
.bl-card:hover { transform: translateY(-8px); border-color: var(--primary-line); box-shadow: var(--shadow-lg), 0 30px 60px -40px var(--primary-glow); }
.bl-card:hover::before { transform: scaleX(1); }

.bl-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.bl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.bl-card:hover .bl-card__media img { transform: scale(1.08); }
.bl-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 8, 13, .42), transparent 45%); pointer-events: none; }
.bl-card__cat {
  position: absolute;
  top: .9rem;
  inset-inline-start: .9rem;
  z-index: 1;
  padding: .32rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 8, 13, .7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: .76rem;
  font-weight: 600;
}
.bl-card__body { display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto; padding: clamp(1.15rem, 2vw, 1.5rem); }
.bl-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.55;
}
.bl-card__title a { transition: color var(--t) var(--ease); }
.bl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bl-card:hover .bl-card__title a { color: var(--primary); }
.bl-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.85em * 3);
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.85;
}
.bl-card__foot { margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.bl-card__read {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .88rem;
  font-weight: 600;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.bl-card:hover .bl-card__read { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.bl-card:focus-within { border-color: var(--primary-line); }

.bl-pager { margin-block-start: clamp(2rem, 4vw, 3rem); }

.bl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border-radius: var(--r-xl);
  border: 1px dashed var(--border-strong);
  background: var(--glass);
  text-align: center;
}
.bl-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); }
.bl-empty h3 { font-size: 1.25rem; }
.bl-empty p { color: var(--text-muted); margin-block-end: .6rem; }

/* --- Article page ------------------------------------------------------- */
.bl-progress { position: fixed; top: 0; inset-inline: 0; z-index: 999; height: 3px; pointer-events: none; }
.bl-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  box-shadow: 0 0 12px var(--primary-glow);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .bl-progress span { transform-origin: right center; }

.bl-art-hero .page-hero-inner { gap: 1rem; max-width: 920px; }
.bl-art-hero h1 { font-size: clamp(1.85rem, 4.4vw, 3.05rem); line-height: 1.38; margin: 0; }
.bl-art-hero .lead { margin: 0 auto; }
.bl-art-hero .bl-meta { justify-content: center; font-size: .92rem; }

.bl-cover {
  max-width: 1140px;
  margin: 0 auto;
  aspect-ratio: 16 / 8;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.bl-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .bl-cover { aspect-ratio: 16 / 10; border-radius: var(--r-lg); } }

.bl-art-section { padding-block-start: clamp(2.5rem, 5vw, 4rem); }
.bl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 1140px;
  margin-inline: auto;
}
.bl-layout--solo { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
.bl-art-main { min-width: 0; }

.bl-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.2rem; }
.bl-panel { padding: 1.2rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--glass); }
.bl-toc summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.bl-toc summary::-webkit-details-marker { display: none; }
.bl-toc summary .icon { width: 16px; height: 16px; color: var(--primary); }
.bl-toc__chev { margin-inline-start: auto; color: var(--text-muted) !important; transition: transform var(--t) var(--ease); }
.bl-toc[open] .bl-toc__chev { transform: rotate(180deg); }
.bl-toc ol { display: grid; gap: .15rem; margin: .9rem 0 0; padding: 0; list-style: none; counter-reset: toc; }
.bl-toc a {
  display: flex;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.65;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.bl-toc a::before { counter-increment: toc; content: counter(toc); min-width: 1.2rem; color: var(--text-faint); font-family: var(--font-num); font-size: .78rem; line-height: 2.1; }
.bl-toc a:hover { background: var(--glass-2); color: var(--text-primary); }
.bl-toc a.is-active { background: var(--primary-soft); color: var(--primary); }
.bl-toc a.is-active::before { color: var(--primary); }
@media (max-width: 1023px) {
  .bl-layout { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
  .bl-aside { position: static; order: -1; }
}

/* Reading typography */
.bl-prose { max-width: 780px; color: var(--text-secondary); font-size: clamp(1.03rem, 1.25vw, 1.12rem); line-height: 2.05; }
.bl-prose > * + * { margin-block-start: 1.3em; }
.bl-prose p { margin: 0; }
.bl-prose h2 {
  position: relative;
  margin-block: 2.3em .75em;
  padding-inline-start: 1rem;
  color: var(--text-primary);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.5;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.bl-prose h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  bottom: .3em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--primary-hover), var(--primary));
}
.bl-prose > h2:first-child { margin-block-start: 0; }
.bl-prose h3 { margin-block: 1.8em .5em; color: var(--text-primary); font-size: clamp(1.14rem, 1.9vw, 1.32rem); font-weight: 700; line-height: 1.55; }
.bl-prose h2 + *, .bl-prose h3 + * { margin-block-start: 0; }
.bl-prose strong, .bl-prose b { color: var(--text-primary); font-weight: 700; }
.bl-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bl-prose ul, .bl-prose ol { display: grid; gap: .7rem; margin-inline: 0; padding: 0; list-style: none; }
.bl-prose ul li { position: relative; padding-inline-start: 1.8rem; }
.bl-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: .3rem;
  top: 1.02em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  transform: translateY(-50%) rotate(45deg);
}
.bl-prose ol { counter-reset: bl-ol; }
.bl-prose ol li { position: relative; padding-inline-start: 2.7rem; counter-increment: bl-ol; }
.bl-prose ol li::before {
  content: counter(bl-ol);
  position: absolute;
  inset-inline-start: 0;
  top: .28em;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-num);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
}
.bl-prose blockquote {
  position: relative;
  margin-block: 2em;
  margin-inline: 0;
  padding: 1.35rem 1.6rem;
  padding-inline-start: 3.7rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--primary-line);
  background: linear-gradient(135deg, var(--primary-soft), transparent 85%);
  color: var(--text-primary);
  font-size: 1.06em;
  font-weight: 500;
  line-height: 1.95;
}
.bl-prose blockquote::before {
  content: "\201D";
  position: absolute;
  inset-inline-start: 1.1rem;
  top: .5rem;
  color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  line-height: 1;
}
.bl-prose blockquote p + p { margin-block-start: .6em; }
.bl-prose figure { margin: 2.3em 0; }
.bl-prose figure img, .bl-prose > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.bl-prose img { max-width: 100%; height: auto; }
.bl-prose figcaption { margin-block-start: .8rem; color: var(--text-muted); font-size: .87rem; line-height: 1.7; text-align: center; }
.bl-prose hr { height: 1px; margin-block: 2.6em; border: 0; background: var(--border); }
.bl-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.bl-prose th, .bl-prose td { padding: .7rem .9rem; border: 1px solid var(--border); text-align: start; }
.bl-prose th { background: var(--glass-2); color: var(--text-primary); }
.bl-prose code { padding: .1rem .4rem; border-radius: 6px; background: var(--glass-2); font-size: .9em; }

/* End of article */
.bl-art-end { display: grid; gap: 1.6rem; max-width: 780px; margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.bl-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-tag { padding: .35rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--glass); color: var(--text-muted); font-size: .82rem; }
.bl-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1rem;
  padding-block: 1.2rem;
  border-block: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .95rem;
}
.bl-share { display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-share a, .bl-share button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.bl-share .icon { width: 17px; height: 17px; }
.bl-share a:hover, .bl-share button:hover { transform: translateY(-2px); background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

.bl-help {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.3rem;
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--primary-line);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  overflow: hidden;
  isolation: isolate;
}
.bl-help__glow { position: absolute; z-index: -1; inset-inline-end: -10%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary-glow), transparent 70%); filter: blur(30px); opacity: .7; }
.bl-help__copy { flex: 1 1 320px; display: grid; gap: .55rem; }
.bl-help h2 { font-size: clamp(1.2rem, 2.3vw, 1.5rem); font-weight: 700; line-height: 1.5; }
.bl-help p { color: var(--text-secondary); font-size: .96rem; line-height: 1.9; }
.bl-help__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.bl-related { background: var(--background-alt); border-block-start: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card__media img, .bl-feature__media img, .bl-btn, .bl-cat { transition: none; }
  .bl-card:hover, .bl-cat:hover, .bl-btn:hover { transform: none; }
  .bl-card:hover .bl-card__media img, .bl-feature:hover .bl-feature__media img { transform: none; }
}

/* ==========================================================================
   FAQ page — hero, topic filter, accordion, closing call to action
   ========================================================================== */
.fq-hero { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.fq-hero .page-hero-inner { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.fq-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.7rem); line-height: 1.22; margin-block: 1rem .9rem; text-wrap: balance; }
.fq-hero .lead { max-width: 60ch; margin-inline: auto; }

.fq-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .84rem;
  font-weight: 600;
}
.fq-badge .icon { width: 15px; height: 15px; }

.fq-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 35%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 75% at 50% 35%, #000 10%, transparent 75%);
  opacity: .7;
  pointer-events: none;
}
.fq-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.fq-glow--a {
  left: 50%;
  top: -45%;
  width: min(62vw, 580px);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--primary-glow), transparent 70%);
  animation: fq-pulse 10s ease-in-out infinite;
}
.fq-glow--b {
  bottom: -40%;
  inset-inline-start: 4%;
  width: min(34vw, 320px);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--primary-soft), transparent 70%);
  animation: fq-drift 16s ease-in-out infinite alternate;
}
@keyframes fq-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .75; }
  50%      { transform: translateX(-50%) translateY(6%) scale(1.12); opacity: 1; }
}
@keyframes fq-drift {
  to { transform: translate3d(12%, -10%, 0) scale(1.1); }
}

/* --- Filter -------------------------------------------------------------- */
.fq-section { padding-block-start: clamp(2rem, 4vw, 3rem); }
.fq-wrap { max-width: 900px; margin-inline: auto; }

.fq-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-block-end: clamp(1.8rem, 3.5vw, 2.6rem); }
.fq-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-secondary);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fq-filter .icon { width: 15px; height: 15px; color: var(--primary); }
.fq-filter .n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: .3rem;
  border-radius: 7px;
  background: var(--glass-2);
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: .72rem;
}
.fq-filter:hover { transform: translateY(-2px); border-color: var(--primary-line); color: var(--text-primary); }
.fq-filter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fq-filter.is-active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; box-shadow: 0 12px 26px -14px var(--primary-glow); }
.fq-filter.is-active .icon { color: #FFFFFF; }
.fq-filter.is-active .n { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
@media (max-width: 767px) {
  .fq-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-block: .2rem .5rem; scrollbar-width: none; scroll-snap-type: x proximity; }
  .fq-filters::-webkit-scrollbar { display: none; }
  .fq-filter { flex: none; scroll-snap-align: start; }
}

/* --- Accordion ----------------------------------------------------------- */
.fq-list { display: grid; gap: .9rem; }
.fq-item {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t) var(--ease), box-shadow var(--t-slow) var(--ease), transform var(--t) var(--ease-out);
}
.fq-item[hidden] { display: none; }
.fq-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 3px;
  background: linear-gradient(var(--primary-hover), var(--primary));
  transform: scaleY(0);
  transition: transform var(--t-slow) var(--ease-out);
}
.fq-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 120% at 100% 0%, var(--primary-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
[dir="ltr"] .fq-item::after { background: radial-gradient(70% 120% at 0% 0%, var(--primary-soft), transparent 60%); }
.fq-item:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.fq-item.is-open { border-color: var(--primary-line); transform: none; box-shadow: var(--shadow-md), 0 24px 50px -36px var(--primary-glow); }
.fq-item.is-open::before { transform: scaleY(1); }
.fq-item.is-open::after { opacity: 1; }

.fq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.fq-q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.05rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.6vw, 1.6rem);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.fq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: var(--r-lg); }

.fq-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: .85rem;
  font-weight: 600;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fq-item:hover .fq-num { border-color: var(--primary-line); color: var(--primary); }
.fq-item.is-open .fq-num { background: var(--primary); border-color: var(--primary); color: #FFFFFF; box-shadow: 0 10px 22px -12px var(--primary-glow); }

.fq-text { flex: 1; min-width: 0; font-size: clamp(1rem, 1.6vw, 1.12rem); font-weight: 600; line-height: 1.65; transition: color var(--t) var(--ease); }
.fq-item.is-open .fq-text { color: var(--primary); }

.fq-icon {
  flex: none;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--glass);
  transition: transform var(--t-slow) var(--ease-out), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.fq-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--text-secondary);
  transition: transform var(--t-slow) var(--ease-out), background var(--t) var(--ease);
}
.fq-icon i:last-child { transform: rotate(90deg); }
.fq-item:hover .fq-icon { border-color: var(--primary-line); }
.fq-item:hover .fq-icon i { background: var(--primary); }
.fq-item.is-open .fq-icon { transform: rotate(180deg); background: var(--primary); border-color: var(--primary); }
.fq-item.is-open .fq-icon i { background: #FFFFFF; }
.fq-item.is-open .fq-icon i:last-child { transform: rotate(0deg); }

.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-out); }
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-a-clip { min-height: 0; overflow: hidden; }
.fq-a-inner {
  padding: 0 clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.5rem);
  padding-inline-start: calc(clamp(1.1rem, 2.6vw, 1.6rem) + 42px + 1rem);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 2;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-out);
}
.fq-item.is-open .fq-a-inner { opacity: 1; transform: none; transition-delay: .08s; }
.fq-a-inner p { margin: 0; }
.fq-a-inner p + p { margin-block-start: .8em; }
.fq-topic {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-block-end: .55rem;
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
}
.fq-topic .icon { width: 13px; height: 13px; }

.fq-enter { animation: fq-in .45s var(--ease-out) both; }
@keyframes fq-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fq-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); }

@media (max-width: 560px) {
  .fq-num { display: none; }
  .fq-a-inner { padding-inline-start: clamp(1.1rem, 2.6vw, 1.6rem); }
  .fq-icon { width: 32px; height: 32px; }
  .fq-q { gap: .8rem; }
}

/* --- Closing call to action --------------------------------------------- */
.fq-cta-section { padding-block-start: 0; }
.fq-cta {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--primary-line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.fq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%);
  opacity: .6;
}
.fq-cta__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -70%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow), transparent 65%);
  filter: blur(40px);
  animation: fq-pulse 9s ease-in-out infinite;
}
.fq-cta__icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-block-end: 1.2rem;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--primary-hover), var(--primary));
  color: #FFFFFF;
  box-shadow: var(--shadow-primary);
}
.fq-cta__icon .icon { width: 28px; height: 28px; }
.fq-cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.3; margin-block-end: .7rem; }
.fq-cta p { max-width: 48ch; margin-inline: auto; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.9; }
.fq-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block-start: 1.8rem; }
.fq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.fq-btn .icon { width: 18px; height: 18px; }
.fq-btn--primary { background: linear-gradient(135deg, var(--primary-hover), var(--primary)); color: #FFFFFF; box-shadow: 0 16px 34px -16px var(--primary-glow); }
.fq-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary); }
.fq-btn--primary:hover .bl-arrow { transform: translateX(4px); }
[dir="rtl"] .fq-btn--primary:hover .bl-arrow { transform: scaleX(-1) translateX(4px); }
.fq-btn--ghost { background: var(--glass); border-color: var(--border-strong); color: var(--text-primary); }
.fq-btn--ghost:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
@media (max-width: 480px) { .fq-btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .fq-glow, .fq-cta__glow { animation: none; }
  .fq-item, .fq-a, .fq-a-inner, .fq-icon, .fq-icon i, .fq-filter { transition: none; }
  .fq-item:hover, .fq-filter:hover { transform: none; }
  .fq-enter { animation: none; }
}

/* FAQ answers that carry lists and links (imported content). */
.fq-a-inner ul, .fq-a-inner ol { display: grid; gap: .45rem; margin: .7em 0 0; padding: 0; list-style: none; }
.fq-a-inner li { position: relative; padding-inline-start: 1.4rem; }
.fq-a-inner li::before {
  content: "";
  position: absolute;
  inset-inline-start: .2rem;
  top: 1em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--primary);
  transform: translateY(-50%) rotate(45deg);
}
.fq-a-inner li p { margin: 0; }
.fq-a-inner a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t) var(--ease); }
.fq-a-inner a:hover { color: var(--primary-hover); }
.fq-a-inner a strong { color: inherit; }
.fq-a-inner strong { color: var(--text-primary); font-weight: 700; }

/* ==========================================================================
   Contact page — compact hero, form card, contact details, WhatsApp prompt
   ========================================================================== */
.ct-hero { position: relative; overflow: hidden; text-align: center; isolation: isolate; padding-block-end: clamp(2.2rem, 4.5vw, 3.4rem); }
.ct-hero .page-hero-inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.ct-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.22; margin-block: .9rem .75rem; text-wrap: balance; }
.ct-hero .lead { max-width: 56ch; margin-inline: auto; }
.ct-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 58% 80% at 50% 30%, #000 5%, transparent 72%);
          mask-image: radial-gradient(ellipse 58% 80% at 50% 30%, #000 5%, transparent 72%);
  opacity: .55;
  pointer-events: none;
}
.ct-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.ct-glow--a { left: 50%; top: -55%; width: min(60vw, 560px); aspect-ratio: 1; background: radial-gradient(circle, var(--primary-glow), transparent 70%); animation: fq-pulse 10s ease-in-out infinite; }
.ct-glow--b { bottom: -60%; inset-inline-end: 5%; width: min(32vw, 300px); aspect-ratio: 1; background: radial-gradient(circle, var(--primary-soft), transparent 70%); animation: fq-drift 15s ease-in-out infinite alternate; }
.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .38rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .82rem;
  font-weight: 600;
}
.ct-badge .icon { width: 15px; height: 15px; }
.ct-rise { animation: ct-rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
@keyframes ct-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- Layout -------------------------------------------------------------- */
.ct-section { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}
@media (max-width: 991px) { .ct-layout { grid-template-columns: minmax(0, 1fr); max-width: 720px; } }

/* --- Form card ----------------------------------------------------------- */
.ct-card {
  position: relative;
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.ct-card::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 18px 1px var(--primary-glow);
}
.ct-card__glow { position: absolute; z-index: -1; top: -35%; inset-inline-start: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary-soft), transparent 70%); filter: blur(30px); pointer-events: none; }
.ct-card.shake { animation: ct-shake .45s var(--ease-out); }
@keyframes ct-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.ct-card__head { display: flex; align-items: center; gap: 1rem; margin-block-end: clamp(1.3rem, 2.5vw, 1.8rem); }
.ct-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--primary-hover), var(--primary));
  color: #FFFFFF;
  box-shadow: var(--shadow-primary);
}
.ct-tile .icon { width: 22px; height: 22px; }
.ct-card__head h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.4; }
.ct-card__head p { color: var(--text-muted); font-size: .92rem; margin-block-start: .15rem; }

.ct-card .alert { margin-block-end: 1.2rem; border-radius: var(--r-md); }

.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1rem; }
.ct-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.ct-field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .ct-fields { grid-template-columns: minmax(0, 1fr); } }

.ct-label { font-size: .9rem; font-weight: 600; color: var(--text-secondary); }
.ct-req { color: var(--primary); }
.ct-opt { color: var(--text-faint); font-weight: 400; font-size: .82rem; }

.ct-control { position: relative; }
.ct-control__icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 1rem;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
  transition: color var(--t) var(--ease);
}
.ct-control__icon .icon { width: 18px; height: 18px; display: block; }
.ct-control--area .ct-control__icon { top: 1.05rem; transform: none; }
.ct-control__chev { position: absolute; top: 50%; inset-inline-end: .95rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.ct-control__chev .icon { width: 18px; height: 18px; display: block; }

.ct-input {
  width: 100%;
  min-height: 54px;
  padding: .8rem 1rem;
  padding-inline-start: 2.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--background) 55%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  -webkit-appearance: none;
          appearance: none;
}
.ct-input[dir="ltr"] { text-align: right; }
[dir="ltr"] .ct-input[dir="ltr"] { text-align: left; }
.ct-input::placeholder { color: var(--text-faint); }
.ct-input:hover { border-color: color-mix(in srgb, var(--text-primary) 26%, transparent); }
.ct-input:focus {
  outline: none;
  border-color: var(--primary);
  background: color-mix(in srgb, var(--background) 75%, transparent);
  box-shadow: 0 0 0 4px var(--primary-soft), 0 10px 26px -16px var(--primary-glow);
}
.ct-control:focus-within .ct-control__icon { color: var(--primary); }
.ct-control--select:focus-within .ct-control__chev { color: var(--primary); transform: translateY(-50%) rotate(180deg); }
.ct-select { padding-inline-end: 2.8rem; cursor: pointer; }
.ct-select:invalid, .ct-select option[value=""] { color: var(--text-faint); }
.ct-select option { background: var(--surface-2); color: var(--text-primary); }
.ct-textarea { min-height: 150px; padding-block: .95rem; resize: vertical; }

.ct-input.has-error, .ct-field.is-invalid .ct-input { border-color: rgba(255, 91, 91, .75); box-shadow: 0 0 0 4px rgba(255, 91, 91, .12); }
.ct-field.is-invalid .ct-control__icon { color: #FF6B6B; }
.ct-error { min-height: 0; color: #FF6B6B; font-size: .82rem; line-height: 1.4; }
.ct-error:empty { display: none; }
.ct-error:not(:empty) { animation: ct-rise .3s var(--ease-out) both; }

.ct-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 56px;
  margin-block-start: .3rem;
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary-hover), var(--primary) 55%, var(--primary-deep));
  color: #FFFFFF;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 18px 36px -18px var(--primary-glow);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
}
.ct-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.ct-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary); }
.ct-submit:hover::after { transition: transform .9s var(--ease-out); transform: translateX(120%); }
.ct-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ct-submit:disabled { cursor: progress; transform: none; opacity: .92; }
.ct-submit:disabled::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  animation: ct-spin .7s linear infinite;
}
.ct-submit:disabled::after { transform: translateX(-100%); animation: ct-sweep 1.2s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-sweep { to { transform: translateX(100%); } }

/* Success view replaces the form inside the card */
.ct-success { display: none; flex-direction: column; align-items: center; gap: .8rem; padding-block: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.ct-card.is-sent .ct-card__form { display: none; }
.ct-card.is-sent .ct-success { display: flex; animation: ct-rise .6s var(--ease-out) both; }
.ct-success__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3EDB8E, #1FA968);
  color: #FFFFFF;
  box-shadow: 0 0 0 10px rgba(53, 199, 126, .12), 0 20px 40px -18px rgba(53, 199, 126, .6);
}
.ct-success__icon .icon { width: 34px; height: 34px; stroke-width: 2.4; }
.ct-success h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-block-start: .6rem; }
.ct-success p { max-width: 42ch; color: var(--text-secondary); line-height: 1.9; }
.ct-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-block-start: .8rem; }
.ct-success__actions button { font: inherit; cursor: pointer; }

/* --- Contact details ----------------------------------------------------- */
.ct-aside { display: grid; gap: 1.4rem; }
.ct-aside__head { display: grid; gap: .6rem; }
.ct-aside__head h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; line-height: 1.4; }
.ct-aside__head p { color: var(--text-muted); line-height: 1.9; }

.ct-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 1199px) and (min-width: 992px) { .ct-info { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .ct-info { grid-template-columns: minmax(0, 1fr); } }
.ct-info__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  padding: 1rem 1.05rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  color: inherit;
  overflow: hidden;
  transition: transform var(--t) var(--ease-out), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
a.ct-info__card:hover { transform: translateY(-4px); border-color: var(--primary-line); box-shadow: var(--shadow-md), 0 22px 44px -32px var(--primary-glow); }
a.ct-info__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-info__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.ct-info__icon .icon { width: 20px; height: 20px; }
a.ct-info__card:hover .ct-info__icon { background: var(--primary); color: #FFFFFF; transform: rotate(-6deg) scale(1.05); }
.ct-info__card--wa .ct-info__icon { border-color: rgba(37, 211, 102, .35); background: rgba(37, 211, 102, .1); color: #25D366; }
.ct-info__card--wa:hover .ct-info__icon { background: #25D366 !important; color: #FFFFFF !important; }
.ct-info__body { display: grid; gap: .1rem; min-width: 0; }
.ct-info__label { color: var(--text-muted); font-size: .8rem; }
.ct-info__value { color: var(--text-primary); font-weight: 600; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-num); }
.ct-info__card--static .ct-info__value { font-family: inherit; }
[dir="rtl"] .ct-info__value[dir="ltr"] { text-align: right; }
.ct-info__go { margin-inline-start: auto; color: var(--text-faint); transition: color var(--t) var(--ease); }
a.ct-info__card:hover .ct-info__go { color: var(--primary); }
a.ct-info__card:hover .bl-arrow { transform: translateX(3px); }
[dir="rtl"] a.ct-info__card:hover .bl-arrow { transform: scaleX(-1) translateX(3px); }

.ct-social { padding: 1.25rem 1.3rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--glass); }
.ct-social h3 { font-size: 1rem; font-weight: 700; margin-block-end: .9rem; }
.ct-social__row { display: flex; flex-wrap: wrap; gap: .65rem; }
.ct-social__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ct-social__btn .icon { width: 20px; height: 20px; }
.ct-social__btn:hover { transform: translateY(-4px); color: #FFFFFF; border-color: transparent; background: var(--primary); box-shadow: 0 14px 28px -14px var(--primary-glow); }
.ct-social__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ct-social__btn--facebook:hover { background: #1877F2; box-shadow: 0 14px 28px -14px rgba(24, 119, 242, .7); }
.ct-social__btn--instagram:hover { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); box-shadow: 0 14px 28px -14px rgba(214, 36, 159, .7); }
.ct-social__btn--whatsapp:hover { background: #25D366; box-shadow: 0 14px 28px -14px rgba(37, 211, 102, .7); }
.ct-social__btn--linkedin:hover { background: #0A66C2; }
.ct-social__btn--youtube:hover { background: #FF0000; }
.ct-social__btn--tiktok:hover, .ct-social__btn--twitter:hover, .ct-social__btn--threads:hover { background: #111111; }

/* --- WhatsApp prompt ----------------------------------------------------- */
.ct-wa-section { padding-block-start: 0; }
.ct-wa {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1.2rem, 3.5vw, 2rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(37, 211, 102, .28);
  background:
    radial-gradient(60% 140% at 100% 50%, rgba(37, 211, 102, .1), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-md);
}
[dir="ltr"] .ct-wa { background: radial-gradient(60% 140% at 0% 50%, rgba(37, 211, 102, .1), transparent 60%), linear-gradient(160deg, var(--surface-2), var(--surface)); }
.ct-wa__icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #25D366; color: #FFFFFF; box-shadow: 0 16px 30px -16px rgba(37, 211, 102, .7); }
.ct-wa__icon .icon { width: 28px; height: 28px; }
.ct-wa__copy { flex: 1 1 260px; min-width: 0; }
.ct-wa__copy h2 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.45; }
.ct-wa__copy p { color: var(--text-muted); font-size: .94rem; margin-block-start: .2rem; }
.ct-wa__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.4rem;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #06290F;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.ct-wa__btn .icon { width: 18px; height: 18px; }
.ct-wa__btn:hover { transform: translateY(-2px); background: #2EE572; box-shadow: 0 16px 30px -14px rgba(37, 211, 102, .7); }
@media (max-width: 600px) { .ct-wa { text-align: center; justify-content: center; } .ct-wa__btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .ct-glow, .ct-rise, .ct-card.shake, .ct-submit:disabled::before, .ct-submit:disabled::after { animation: none; }
  .ct-input, .ct-info__card, .ct-social__btn, .ct-submit, .ct-wa__btn { transition: none; }
  a.ct-info__card:hover, .ct-social__btn:hover, .ct-submit:hover, .ct-wa__btn:hover { transform: none; }
}