/* ==========================================================================
   STAR CODE IT — Design System
   Built from the official brand book: the logo is the `<>` tag glyph drawn as
   a folded four-band ribbon; near-black is the brand's native canvas;
   Cascadia Code is the corporate typeface; the eight brand hexes are four
   gradient pairs, one per ribbon band.
   ========================================================================== */

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
  /* The four official gradient pairs */
  --brand-teal:      #3f6f82;  --brand-navy:      #2d3e52;   /* band 1 */
  --brand-indigo:    #374d7f;  --brand-steel:     #334d66;   /* band 2 */
  --brand-red:       #bc2b20;  --brand-red-deep:  #7a1b18;   /* band 3 */
  --brand-sage:      #7d8c8c;  --brand-sage-deep: #536666;   /* band 4 */

  --grad-brand: linear-gradient(115deg, var(--brand-navy) 0%, var(--brand-indigo) 28%, var(--brand-teal) 52%, var(--brand-sage) 78%, var(--brand-sage-deep) 100%);
  --grad-fire:  linear-gradient(115deg, var(--brand-red-deep) 0%, var(--brand-red) 55%, #d8503f 100%);
  --grad-text:  linear-gradient(100deg, #ffffff 8%, #c3cedb 52%, var(--brand-teal) 100%);

  --bg:         #0a0b0d;
  --bg-elev:    #0f1114;
  --surface:    #14171c;
  --surface-2:  #191d24;
  --surface-3:  #212731;
  --border:     rgba(255, 255, 255, .09);
  --border-str: rgba(255, 255, 255, .16);
  --text:       #eef1f4;
  --text-mid:   #b6c0cc;
  --text-muted: #8794a3;
  --ring:       #d8503f;
  --shadow-md:  0 8px 24px -6px rgba(0,0,0,.55);
  --shadow-lg:  0 28px 64px -18px rgba(0,0,0,.75);
  --glow:       0 0 0 1px rgba(188,43,32,.35), 0 12px 40px -12px rgba(188,43,32,.45);

  --font-mono: "Cascadia Code", "Cascadia Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Readex Pro draws Arabic and Latin as one system, so a language switch changes
     the script and nothing else. One variable file, 300–700. */
  --font-sans: "Readex Pro", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body: var(--font-sans);

  --fs-display: clamp(2.3rem, 1rem + 5.6vw, 5.6rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --fs-lead:    clamp(1.02rem, .95rem + .5vw, 1.28rem);
  --fs-body:    clamp(.97rem, .93rem + .2vw, 1.06rem);
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --wrap: 1240px;
  --dur: 240ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Declared here, not in the HTML: a relative url() inside a custom property
     resolves against the stylesheet that *uses* it. */
  --pattern-url: url("../img/pattern.svg");
}

[data-theme="light"] {
  --bg:         #f4f6f8;
  --bg-elev:    #ffffff;
  --surface:    #ffffff;
  --surface-2:  #eef1f4;
  --surface-3:  #e3e8ed;
  --border:     rgba(20, 30, 45, .11);
  --border-str: rgba(20, 30, 45, .2);
  --text:       #10161d;
  --text-mid:   #3d4a59;
  --text-muted: #5d6b7a;
  --grad-text:  linear-gradient(100deg, #0d1319 8%, #2d3e52 52%, var(--brand-teal) 100%);
  --shadow-md:  0 8px 24px -8px rgba(20,30,45,.18);
  --shadow-lg:  0 28px 64px -20px rgba(20,30,45,.26);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img { display: block; max-width: 100%; }
/* <use>-based icons carry no intrinsic size; every context sets its own */
svg { display: block; width: 1em; height: 1em; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand-red); color: #fff; }

h1, h2, h3, h4 { line-height: 1.22; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

.mono { font-family: var(--font-mono); font-feature-settings: "calt" 1; }
bdi, .ltr { direction: ltr; unicode-bidi: isolate; }

/* Cascadia Code carries no Arabic-Indic digits (U+0660–0669), so every element
   that switches to ٠١٢٣ must switch to the sans face too, or it silently
   falls back to a mismatched system font. */
[lang="ar"] .hero__figures b,
[lang="ar"] .hero__index-num,
[lang="ar"] .hero__index-count,
[lang="ar"] .track__num,
[lang="ar"] .track__count,
[lang="ar"] .faq__n,
[lang="ar"] .step__num,
[lang="ar"] .svc__num,
[lang="ar"] .plan__price .amount,
[lang="ar"] .js-num,
[lang="ar"] .contact-line { font-family: var(--font-sans); }

/* Arabic needs its own display metrics. Two reasons, both measurable:
   1. Readex Pro's Arabic ink extent is ~1.31em — taller than the Latin display
      leading below it, so at line-height 1.06 the hero's own `overflow: hidden`
      (needed for the reveal) clips the ascenders and consecutive lines collide.
   2. Arabic is a connected script; negative tracking pulls at the joins.
   Latin keeps the tight display setting it was tuned for. */
[lang="ar"] h1, [lang="ar"] h2,
[lang="ar"] h3, [lang="ar"] h4 { line-height: 1.4; }

[lang="ar"] .hero__title,
[lang="ar"] .hero__figures b,
[lang="ar"] .sec-head__title,
[lang="ar"] .track__title,
[lang="ar"] .svc__title,
[lang="ar"] .svc-hero__title,
[lang="ar"] .plan__price .amount,
[lang="ar"] .cta-band__title { letter-spacing: normal; }

[lang="ar"] .hero__title     { line-height: 1.36; }
[lang="ar"] .svc-hero__title { line-height: 1.4; }

/* ---------- 3. Layout helpers ------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); position: relative; }
.section--tight { padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.subsection { margin-block-start: clamp(2.5rem, 1.75rem + 3vw, 4rem); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; inset-inline-start: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--brand-red); color: #fff;
  padding: .7rem 1.4rem; border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- 4. Brand primitives ----------------------------------------- */
.spark { width: 1em; height: 1em; flex: none; color: var(--brand-red); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mid); font-weight: 600;
}
.eyebrow .spark { width: .85em; height: .85em; }

.pattern-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--pattern-url);
  background-size: 269px 115px;
  opacity: .5;
}
[data-theme="light"] .pattern-field { opacity: .28; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; min-height: 48px; padding: .85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--border-str); border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--grad-fire); --btn-fg: #fff; border-color: transparent; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, #d8503f, var(--brand-red));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.btn--primary:hover { box-shadow: var(--glow); }
.btn--primary:hover::after { opacity: 1; }

.btn--ghost { --btn-bg: transparent; }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--brand-teal); }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--fs-body); }

.btn .arrow { transition: transform var(--dur) var(--ease); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
.btn:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* ---------- 6. Header ---------------------------------------------------- */
.topbar { border-bottom: 1px solid var(--border); background: var(--bg-elev); font-size: var(--fs-xs); color: var(--text-muted); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 42px; }
.topbar__group { display: flex; align-items: center; gap: var(--sp-5); }
.topbar a { transition: color var(--dur) var(--ease); }
.topbar a:hover { color: var(--brand-teal); }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__item svg { width: 14px; height: 14px; opacity: .7; }

/* Utility links — Quick Solutions / All Services / FAQ, as on the live site */
.topbar__links { display: flex; align-items: center; gap: var(--sp-4); }
.topbar__links a { position: relative; font-weight: 600; color: var(--text-mid); }
.topbar__links a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 1px;
  background: var(--brand-red); transform: scaleX(0); transform-origin: var(--origin, left);
  transition: transform 240ms var(--ease);
}
[dir="rtl"] .topbar__links a::after { --origin: right; }
.topbar__links a:hover::after { transform: scaleX(1); }

@media (max-width: 860px) { .topbar__hide { display: none; } }
@media (max-width: 620px) { .topbar__links { display: none; } }

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header[data-stuck="true"] { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 72px; }

/* The original lockup (mark + stacked wordmark), in the two ink versions */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { height: 46px; width: auto; transition: transform 500ms var(--ease); }
.brand--lg .brand__logo { height: 62px; }
.brand:hover .brand__logo { transform: scale(1.04); }
[data-theme="dark"]  .brand__logo--onlight { display: none; }
[data-theme="light"] .brand__logo--ondark  { display: none; }
@media (max-width: 620px) { .brand__logo { height: 40px; } }

.nav { display: flex; align-items: center; gap: .2rem; margin-inline-start: auto; }
.nav__link {
  position: relative; padding: .55rem .8rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-mid);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--text); background: var(--surface-2); }
.nav__link[aria-current="true"]::after {
  content: ""; position: absolute; inset-inline: .8rem; bottom: .28rem; height: 2px;
  background: var(--brand-red); border-radius: 2px;
}
@media (max-width: 1080px) { .nav { display: none; } }

.header__actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
@media (min-width: 1081px) { .header__actions { margin-inline-start: var(--sp-4); } }

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--text-mid); background: var(--surface);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-str); transform: translateY(-2px); }
.icon-btn svg { width: 18px; height: 18px; }

.lang-toggle {
  display: inline-flex; align-items: center; height: 42px; padding: 0 1rem;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  color: var(--text-mid);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lang-toggle:hover { color: var(--text); border-color: var(--brand-teal); transform: translateY(-2px); }

.burger { display: none; }
@media (max-width: 1080px) { .burger { display: inline-grid; } }
@media (max-width: 620px)  { .nav-cta { display: none; } }

.drawer {
  position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto 1fr;
  background: var(--bg); padding: var(--sp-4) 0 var(--sp-7);
  transform: translateY(-100%); visibility: hidden;
  transition: transform 420ms var(--ease-out), visibility 420ms;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { display: flex; flex-direction: column; gap: .2rem; padding-block-start: var(--sp-6); overflow-y: auto; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem .25rem; font-size: 1.3rem; font-weight: 600;
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(14px);
}
.drawer__link .spark { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur); }
/* Utility links sit below the four primary ones */
.drawer__link--sub { font-size: 1rem; color: var(--text-muted); font-weight: 500; }
.drawer__link:hover .spark { opacity: 1; }
.drawer[data-open="true"] .drawer__link { animation: drawerIn 520ms var(--ease-out) forwards; }
.drawer__link:nth-child(1){animation-delay:60ms}.drawer__link:nth-child(2){animation-delay:110ms}
.drawer__link:nth-child(3){animation-delay:160ms}.drawer__link:nth-child(4){animation-delay:210ms}
.drawer__link:nth-child(5){animation-delay:260ms}.drawer__link:nth-child(6){animation-delay:310ms}
.drawer__link:nth-child(7){animation-delay:360ms}
.drawer__cta { margin-block-start: var(--sp-6); }
@keyframes drawerIn { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   7. HERO — an editorial title block, not a hero image
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
  border-bottom: 1px solid var(--border);
}

/* Official pattern as a full-height edge band */
.hero__pattern {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 0;
  width: clamp(52px, 11vw, 168px);
  background-image: var(--pattern-url);
  background-size: 269px 115px;
  opacity: .42;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
  border-inline-end: 1px solid var(--border);
}
[data-theme="light"] .hero__pattern { opacity: .2; }

/* Giant mark bleeding off the trailing edge */
.hero__ghost {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: -14%;
  inset-inline-end: clamp(-150px, -7vw, -40px);
  height: clamp(380px, 78vw, 1020px); width: auto;
  opacity: .15;
}
/* Much lighter on the light plate: the mark's mid-tones sit close to the
   headline's weight there and were competing with the text. */
[data-theme="light"] .hero__ghost { opacity: .055; }
@media (max-width: 900px) { .hero__ghost { opacity: .09; inset-block-start: auto; inset-block-end: -4%; } }

.hero__wash {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: -30%; inset-inline-end: -10%;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, rgba(63,111,130,.22), transparent 64%);
}

.hero__inner {
  position: relative; z-index: 2;
  padding-inline-start: clamp(0px, 6vw, 96px);
  padding-block-end: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}

/* Title-block strip */
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; width: fit-content; max-width: 100%;
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.hero__meta-cell {
  padding: .5rem 1rem;
  font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .04em;
  border-inline-end: 1px solid var(--border);
  display: flex; align-items: center;
}
.hero__meta-cell:last-child { border-inline-end: 0; }
.hero__meta-cell.mono { letter-spacing: .16em; color: var(--text); font-weight: 700; }

.hero__title {
  font-size: var(--fs-display);
  /* Greedy wrap, not balance: fills line one first, which keeps "مع" with the
     opening clause and holds the accent phrase together on its own line. */
  text-wrap: wrap;
  font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
  margin-block-end: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; will-change: transform; }
/* Blue, not red: the book assigns blue to "التقنية، الثقة، الاحترافية", and red is
   reserved for actions. Solid rather than a gradient because this phrase wraps
   across lines, and background-clip:text renders per line-fragment. */
.hero__title .accent { color: color-mix(in srgb, var(--brand-teal) 78%, #fff); }
[data-theme="light"] .hero__title .accent { color: var(--brand-indigo); }

.hero__body { display: grid; gap: var(--sp-6); align-items: end; }
@media (min-width: 940px) { .hero__body { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); } }
.hero__lead { font-size: var(--fs-lead); color: var(--text-mid); max-width: 58ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }

/* Counts, not claims — each figure is verifiable on this page */
.hero__figures { list-style: none; padding: 0; display: flex; gap: var(--sp-6); }
@media (min-width: 940px) { .hero__figures { flex-direction: column; gap: var(--sp-4); } }
.hero__figures li { display: flex; align-items: baseline; gap: .6rem; }
.hero__figures b { font-size: 1.85rem; font-weight: 700; letter-spacing: -.04em; color: var(--text); line-height: 1; }
.hero__figures span { font-size: var(--fs-xs); color: var(--text-muted); }

/* Index bar — the three tracks, doubling as a contents list */
.hero__index {
  position: relative; z-index: 2;
  display: grid; border-top: 1px solid var(--border);
}
@media (min-width: 780px) { .hero__index { grid-template-columns: repeat(3, 1fr); } }
.hero__index-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: clamp(1rem, .8rem + 1vw, 1.6rem) clamp(.5rem, 1.5vw, 1.5rem);
  border-inline-end: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 780px) {
  .hero__index-item { border-bottom: 0; }
  .hero__index-item:last-child { border-inline-end: 0; }
}
@media (max-width: 779px) { .hero__index-item { border-inline-end: 0; } .hero__index-item:last-child { border-bottom: 0; } }
.hero__index-item:hover { background: var(--surface); }
.hero__index-num { font-size: var(--fs-xs); color: var(--brand-red); font-weight: 700; letter-spacing: .1em; }
.hero__index-name { font-weight: 600; font-size: var(--fs-sm); }
.hero__index-count { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- 8. Marquee --------------------------------------------------- */
.marquee {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev); padding-block: var(--sp-4);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
/* Spacing lives on the item, not as `gap` on the track. The list is duplicated
   once and scrolled by 50%, so a seamless loop needs the first half to be
   exactly half the track — and `gap` puts space *between* items only, giving
   18 items but 17 gaps. That left the shift half a gap (16px) short and made
   the loop visibly hitch at the seam. A trailing margin gives every item its
   own space, so 50% lands exactly on the repeat. */
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: .6rem; margin-inline-end: var(--sp-6); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.marquee__item .spark { width: .8em; height: .8em; color: var(--brand-sage-deep); }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-name: marqueeRtl; }
@keyframes marqueeRtl { to { transform: translateX(50%); } }

/* ---------- 9. Section headings ------------------------------------------ */
.sec-head { max-width: 62ch; margin-block-end: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__title { font-size: var(--fs-h2); letter-spacing: -.02em; margin-block: var(--sp-3) var(--sp-3); }
.sec-head__lead { color: var(--text-mid); font-size: var(--fs-lead); }
/* Demoted heading for a block nested inside another section */
.sec-head--sub .sec-head__title { font-size: var(--fs-h3); }

/* ---------- 10. Service tracks ------------------------------------------- */
.track + .track { margin-block-start: clamp(2rem, 1.25rem + 2vw, 3rem); }
.track__head { display: flex; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-5); }
.track__num {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--border-str); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand-red);
}
.track__title { font-size: var(--fs-h3); letter-spacing: -.01em; flex: none; }
.track__rule { flex: 1 1 auto; height: 1px; background: var(--border); min-width: 20px; }
.track__count { font-size: var(--fs-xs); color: var(--text-muted); flex: none; }

/* 225px lets a 5-item track fill one row at desktop width, so no track
   (3, 4 or 5 services) ever orphans a card. auto-fit collapses the unused
   tracks, so shorter rows stretch to full width. */
.svc-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

.svc {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: transform 340ms var(--ease), border-color 340ms var(--ease), box-shadow 340ms var(--ease);
}
.svc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: var(--tint, var(--brand-teal));
  transform: scaleX(0); transform-origin: var(--origin, left);
  transition: transform 420ms var(--ease-out);
}
[dir="rtl"] .svc::before { --origin: right; }
.svc:hover { transform: translateY(-4px); border-color: var(--border-str); box-shadow: var(--shadow-lg); }
.svc:hover::before { transform: scaleX(1); }
.svc__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 12px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--tint, var(--brand-teal)) 15%, transparent);
  color: var(--tint, var(--brand-teal));
  transition: transform 340ms var(--ease);
}
.svc:hover .svc__icon { transform: scale(1.08) rotate(-4deg); }
.svc__icon svg { width: 22px; height: 22px; }
.svc__title { font-size: 1.02rem; letter-spacing: -.01em; }
.svc__text { color: var(--text-mid); font-size: var(--fs-sm); }
/* Each card is a link to its own service page */
.svc__more {
  margin-block-start: auto; padding-block-start: var(--sp-3);
  display: inline-flex; align-items: center; color: var(--tint, var(--brand-teal));
  opacity: .55; transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.svc__more svg { width: 17px; height: 17px; }
[dir="rtl"] .svc__more svg { transform: scaleX(-1); }
.svc:hover .svc__more { opacity: 1; transform: translateX(4px); }
[dir="rtl"] .svc:hover .svc__more { transform: translateX(-4px); }

/* ---------- 10b. Service detail pages ------------------------------------ */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--text-muted); margin-block-end: var(--sp-5); }
.crumb a:hover { color: var(--brand-teal); }
.crumb svg { width: 12px; height: 12px; opacity: .6; }
[dir="rtl"] .crumb svg { transform: scaleX(-1); }

.svc-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(2.5rem, 1.75rem + 3vw, 4rem); }
.svc-hero__pattern {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 0;
  width: clamp(44px, 9vw, 132px);
  background-image: var(--pattern-url); background-size: 269px 115px; opacity: .35;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 60%, transparent);
  border-inline-end: 1px solid var(--border);
}
[data-theme="light"] .svc-hero__pattern { opacity: .18; }
.svc-hero > .wrap { position: relative; z-index: 2; padding-inline-start: clamp(0px, 5vw, 76px); }
/* icon and title on one line, so the hero reads as a masthead not a stack */
.svc-hero__head { display: flex; align-items: center; gap: var(--sp-4); }
.svc-hero__badge {
  display: inline-grid; place-items: center; flex: none;
  width: clamp(52px, 4.6vw, 66px); aspect-ratio: 1; border-radius: 16px;
  border: 1px solid var(--border-str);
  background: color-mix(in srgb, var(--tint, var(--brand-teal)) 16%, transparent);
  color: var(--tint, var(--brand-teal));
}
.svc-hero__badge svg { width: 50%; height: 50%; }
.svc-hero__title { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); letter-spacing: -.03em; line-height: 1.12; }
.svc-hero__intro { color: var(--text-mid); font-size: var(--fs-lead); max-width: 64ch; margin-block-start: var(--sp-5); display: grid; gap: var(--sp-3); }
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); }

/* which of the three tracks this service belongs to */
.track-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .8rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--tint, var(--brand-teal)) 45%, transparent);
  background: color-mix(in srgb, var(--tint, var(--brand-teal)) 12%, transparent);
  color: var(--tint, var(--brand-teal));
  font-size: var(--fs-xs); font-weight: 600;
}
.track-chip b { font-family: var(--font-mono); }
[lang="ar"] .track-chip b { font-family: var(--font-sans); }

.prose { color: var(--text-mid); max-width: 68ch; display: grid; gap: var(--sp-4); font-size: var(--fs-lead); }
.prose strong { color: var(--text); font-weight: 600; }

/* Challenges — a plain card; the pattern behind body copy hurt legibility */
.callout {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.5rem, 1.15rem + 2vw, 2.5rem);
}
.callout__grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 860px) { .callout__grid { grid-template-columns: auto 1fr; gap: var(--sp-7); } }
.callout__icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 14px; border: 1px solid var(--border-str);
  background: color-mix(in srgb, var(--brand-red) 18%, transparent); color: #e2705f;
}
.callout__icon svg { width: 24px; height: 24px; }
.callout h2 { font-size: var(--fs-h3); margin-block-end: var(--sp-4); }
.callout .prose { max-width: 74ch; font-size: var(--fs-body); }

/* Approach — a connected sequence, so the steps read as one flow */
.steps-list { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps-list li {
  counter-increment: s; position: relative;
  padding-inline-start: 58px; padding-block: 0 var(--sp-5);
  font-size: var(--fs-body); color: var(--text);
}
.steps-list li:last-child { padding-block-end: 0; }
/* badge */
.steps-list li::before {
  content: counter(s);
  position: absolute; inset-inline-start: 0; top: -2px;
  display: grid; place-items: center; width: 38px; height: 38px;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700;
  color: var(--tint, var(--brand-teal));
  background: var(--bg); border: 1px solid var(--border-str); border-radius: 50%;
  transition: color 280ms var(--ease), border-color 280ms var(--ease), background 280ms var(--ease);
}
/* connector to the next step */
.steps-list li::after {
  content: ""; position: absolute; inset-inline-start: 18px;
  top: 40px; bottom: 4px; width: 2px;
  background: linear-gradient(to bottom, var(--border-str), var(--border));
}
.steps-list li:last-child::after { display: none; }
.steps-list li:hover::before {
  color: #fff; background: var(--tint, var(--brand-teal)); border-color: transparent;
}
[lang="ar"] .steps-list li::before { content: counter(s, arabic-indic); font-family: var(--font-sans); }

/* what-you-get cards */
.deliver { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: dl; }
.deliver__card {
  counter-increment: dl;
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  display: grid; gap: .6rem; align-content: start;
  transition: transform 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease), background 320ms var(--ease);
}
.deliver__card h3 { font-size: 1.05rem; line-height: 1.35; }
.deliver__card p { color: var(--text-mid); font-size: var(--fs-sm); }
.deliver__card::before {
  content: counter(dl);
  display: grid; place-items: center; width: 34px; height: 34px; margin-block-end: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700;
  color: var(--tint, var(--brand-teal));
  border: 1px solid color-mix(in srgb, var(--tint, var(--brand-teal)) 40%, transparent);
  border-radius: 10px;
  transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
[lang="ar"] .deliver__card::before { content: counter(dl, arabic-indic); font-family: var(--font-sans); }
.deliver__card:hover::before { background: var(--tint, var(--brand-teal)); color: #fff; border-color: transparent; }
.deliver__card:hover {
  transform: translateY(-4px); border-color: var(--border-str);
  background: var(--surface-2); box-shadow: var(--shadow-lg);
}

/* feature cards */
/* flex, not grid: with 7 or 8 features a grid always orphans the last row */
.checklist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.checklist li {
  flex: 1 1 265px;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1rem; font-size: var(--fs-sm); color: var(--text-mid);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease);
}
.checklist li:hover { transform: translateY(-3px); border-color: var(--border-str); background: var(--surface-2); }
.checklist svg {
  width: 17px; height: 17px; flex: none; margin-block-start: .28em;
  color: var(--tint, var(--brand-sage));
  transition: transform 300ms var(--ease);
}
.checklist li:hover svg { transform: scale(1.15); }

/* other services — fixed columns so six items make two clean rows */
.more-svc { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .more-svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .more-svc { grid-template-columns: repeat(3, 1fr); } }
.more-svc a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600;
  transition: border-color 260ms var(--ease), background 260ms var(--ease), transform 260ms var(--ease);
}
.more-svc a:hover { border-color: var(--border-str); background: var(--surface-2); transform: translateY(-2px); }
.more-svc svg { width: 15px; height: 15px; flex: none; color: var(--brand-red); }
[dir="rtl"] .more-svc svg { transform: scaleX(-1); }

/* ---------- 10c. Projects ------------------------------------------------ */
.projects { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.project {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.project:hover { border-color: color-mix(in srgb, var(--tint, var(--brand-teal)) 55%, transparent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .project:hover { transform: none; } }

/* The client mark sits on its own tile so brand colours never fight the card. */
.project__brand { display: grid; gap: var(--sp-2); justify-items: center; align-content: start; width: 84px; }
.project__logo {
  width: 84px; height: 84px; border-radius: var(--r-md); object-fit: contain;
  background: var(--surface-2); border: 1px solid var(--border); padding: .35rem;
}
/* Shown only when the logo file is missing — see app.js */
.project__brand-name {
  display: none; font-size: var(--fs-xs); font-weight: 700; text-align: center;
  color: var(--text-mid); line-height: 1.35; text-wrap: balance;
}
.project--nologo .project__logo { display: none; }
.project--nologo .project__brand-name {
  display: grid; place-items: center; width: 84px; min-height: 84px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .5rem;
}

.project__body { min-width: 0; }
.project__title { font-size: 1.05rem; letter-spacing: -.01em; }
.project__text { color: var(--text-mid); font-size: var(--fs-sm); margin-block-start: var(--sp-2); }
.project__link {
  display: inline-flex; align-items: center; gap: .45rem; margin-block-start: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600; color: var(--tint, var(--brand-teal));
  transition: gap var(--dur) var(--ease);
}
.project__link:hover { gap: .8rem; }
.project__link svg { width: 1em; height: 1em; }
[dir="rtl"] .project__link svg { transform: scaleX(-1); }

@media (max-width: 520px) {
  .project { grid-template-columns: 1fr; gap: var(--sp-4); }
  .project__brand, .project--nologo .project__brand-name { width: 64px; }
  .project__logo { width: 64px; height: 64px; }
}

/* ---------- 11. Sectors -------------------------------------------------- */
.sectors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.sector {
  flex: 1 1 150px; max-width: 220px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: transform 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease);
}
.sector::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 2px; width: 100%; background: var(--grad-fire);
  transform: scaleX(0); transform-origin: var(--origin, left);
  transition: transform 380ms var(--ease-out);
}
[dir="rtl"] .sector::after { --origin: right; }
.sector:hover { transform: translateY(-4px); border-color: var(--border-str); background: var(--surface-2); }
.sector:hover::after { transform: scaleX(1); }
.sector svg { width: 26px; height: 26px; color: var(--brand-sage); transition: color 320ms var(--ease); }
.sector:hover svg { color: var(--brand-red); }
.sector span { font-weight: 600; font-size: var(--fs-sm); }

/* ---------- 12. Process -------------------------------------------------- */
.process { position: relative; display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.process__line { display: none; }
@media (min-width: 900px) {
  .process__line { display: block; position: absolute; inset-inline: 6%; top: 34px; height: 2px; background: var(--border); overflow: hidden; border-radius: 2px; }
  .process__line i { display: block; height: 100%; width: 100%; background: var(--grad-brand); transform: scaleX(var(--p, 0)); transform-origin: var(--origin, left); transition: transform 120ms linear; }
  [dir="rtl"] .process__line i { --origin: right; }
}
.step { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.step__num {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 68px; height: 68px; flex: none;
  border-radius: 50%; background: var(--bg); border: 1px solid var(--border-str);
  /* Single digit now, so it can carry more weight inside the 68px disc */
  font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; color: var(--text-muted);
  transition: color 380ms var(--ease), border-color 380ms var(--ease), background 380ms var(--ease), transform 380ms var(--ease);
}
.step.is-in .step__num { color: #fff; background: var(--grad-fire); border-color: transparent; transform: scale(1.04); }
.step__title { font-size: var(--fs-h3); }
.step__text { color: var(--text-mid); font-size: var(--fs-sm); }

/* ---------- 13. Split / values ------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }

.value-list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.value { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid transparent; transition: background 320ms var(--ease), border-color 320ms var(--ease); }
.value:hover { background: var(--surface); border-color: var(--border); }
.value__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--tint, var(--brand-teal)) 16%, transparent); color: var(--tint, var(--brand-teal)); border: 1px solid var(--border); }
.value__icon svg { width: 21px; height: 21px; }
.value h3 { font-size: 1.05rem; margin-block-end: .3rem; }
.value p { color: var(--text-mid); font-size: var(--fs-sm); }

.code-panel { position: relative; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.code-panel__bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.code-panel__dot { width: 11px; height: 11px; border-radius: 50%; }
.code-panel__dot:nth-child(1) { background: var(--brand-red); }
.code-panel__dot:nth-child(2) { background: var(--brand-sage); }
.code-panel__dot:nth-child(3) { background: var(--brand-teal); }
.code-panel__file { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); direction: ltr; }
.code-panel pre { margin: 0; padding: clamp(1rem, .8rem + 1vw, 1.6rem); overflow-x: auto; font-family: var(--font-mono); font-size: .8rem; line-height: 1.85; direction: ltr; text-align: left; }
.code-panel code { color: var(--text-mid); }
.tok-key { color: #d8503f; } .tok-str { color: #8fb4a8; } .tok-fn { color: #6ea3bd; }
.tok-com { color: #5d6b7a; font-style: italic; } .tok-num { color: #c8a26a; }

/* ---------- 14. Pricing -------------------------------------------------- */
/* Every card exposes the same eight rows to the parent grid via subgrid, so
   price, delivery time, feature list and button all sit on one line across
   all four cards regardless of how long each title or description runs.
   ROWS = kicker · name · desc · price · includes · eta · features(1fr) · cta */
.plans { display: grid; column-gap: var(--sp-4); row-gap: var(--sp-3); }
@media (min-width: 680px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform 380ms var(--ease), border-color 380ms var(--ease), box-shadow 380ms var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-str); }
.plan--featured {
  border-color: color-mix(in srgb, var(--brand-red) 55%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand-red) 10%, var(--surface)), var(--surface));
  box-shadow: var(--glow);
}
.plan__badge {
  position: absolute; top: -12px; inset-inline-start: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: var(--r-pill);
  background: var(--grad-fire); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
}
.plan__badge .spark { width: .8em; height: .8em; color: #fff; }
.plan__kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.plan__name { font-size: var(--fs-h3); }
.plan__desc { color: var(--text-mid); font-size: var(--fs-sm); }
/* No direction override on the row itself: the flex row simply follows the
   document direction, so in RTL the price starts at the right edge like every
   other line in the card. Only the numeral is isolated as an LTR run. */
.plan__price { display: flex; align-items: baseline; gap: .4rem; font-family: var(--font-mono); font-weight: 700; padding-block-start: var(--sp-3); border-top: 1px solid var(--border); }
.plan__price .amount { direction: ltr; unicode-bidi: isolate; }
/* Zero-width strut at the numeric price's size so a text-only price
   ("تواصل مع المبيعات" / "Contact sales") lands on the same baseline as "250". */
.plan__price:has(.amount--text)::before {
  content: "\200B";
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem);
  margin-inline-end: -.4rem;
}
.plan__price .from { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.plan__price .amount { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -.03em; }
.plan__price .amount--text { font-family: var(--font-sans); font-size: 1.2rem; letter-spacing: normal; }
/* Official Saudi Riyal symbol. Aspect ratio 1124:1256 ≈ 0.895, so the box is
   sized to match rather than letterboxed inside a square. */
.plan__price .cur { width: 1.16em; height: 1.3em; color: var(--brand-red); align-self: center; flex: none; }
.plan__inc { font-size: var(--fs-xs); color: var(--text-muted); }
.plan__eta { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); color: var(--brand-sage); font-weight: 600; }
.plan__eta svg { width: 14px; height: 14px; flex: none; }
.plan__list { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: var(--fs-sm); color: var(--text-mid); padding-block-start: var(--sp-2); border-top: 1px solid var(--border); }
.plan__list li { display: flex; align-items: flex-start; gap: .6rem; }
.plan__list svg { width: 15px; height: 15px; flex: none; margin-block-start: .38em; color: var(--brand-sage); }
.plan .btn { margin-block-start: auto; width: 100%; }

/* Declared after the flex fallback so it wins on browsers that support it */
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(4, auto auto auto auto auto auto 1fr auto); }
  @media (min-width: 680px)  { .plans { grid-template-rows: repeat(2, auto auto auto auto auto auto 1fr auto); } }
  @media (min-width: 1140px) { .plans { grid-template-rows: auto auto auto auto auto auto 1fr auto; } }
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 8; }
}

.notice {
  margin-block-start: var(--sp-6); padding: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  border: 1px dashed var(--border-str); border-radius: var(--r-md);
  background: var(--bg-elev);
}
.notice h4 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-block-end: var(--sp-3); }
.notice ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.notice li { position: relative; padding-inline-start: 1.1rem; font-size: var(--fs-sm); color: var(--text-muted); }
.notice li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 5px; height: 5px; background: var(--brand-sage-deep); border-radius: 50%; }

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq { display: grid; gap: var(--sp-2); max-width: 900px; margin-inline: auto; }
/* Service pages head their FAQ start-aligned, so the list aligns with it */
.faq--start { margin-inline: 0; max-width: 860px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color 280ms var(--ease), background 280ms var(--ease); }
.faq__item:hover { border-color: var(--border-str); }
.faq__item[data-open="true"] { border-color: var(--border-str); background: var(--surface-2); }
.faq__q { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 1rem 1.15rem; text-align: start; font-weight: 600; font-size: var(--fs-body); transition: color 240ms var(--ease); }
.faq__q:hover { color: var(--brand-teal); }
.faq__n {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand-red); border-radius: 8px;
  background: color-mix(in srgb, var(--brand-red) 12%, transparent);
}
[lang="ar"] .faq__n { font-family: var(--font-sans); }
/* the question takes the slack so the toggle never floats a screen away */
.faq__q > span:nth-child(2) { flex: 1 1 auto; }
.faq__icon { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--border-str); transition: background 320ms var(--ease), border-color 320ms var(--ease), transform 320ms var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 9px; height: 1.5px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); transition: transform 320ms var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[data-open="true"] .faq__icon { background: var(--brand-red); border-color: var(--brand-red); color: #fff; transform: rotate(180deg); }
.faq__item[data-open="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease-out); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-block: 0 1.15rem;
  padding-inline: calc(1.15rem + 26px + var(--sp-3)) calc(1.15rem + 22px + var(--sp-3));
  color: var(--text-mid); font-size: var(--fs-sm);
}

/* ---------- 16. Contact -------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
@media (min-width: 940px) { .contact__grid { grid-template-columns: .9fr 1.1fr; } }
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); margin-block-start: var(--sp-6); }
.contact-item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.contact-item__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--brand-teal); }
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item dt { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .04em; }
.contact-item dd { margin: .15rem 0 0; font-weight: 600; }
.contact-item dd a { transition: color var(--dur) var(--ease); }
.contact-item dd a:hover { color: var(--brand-red); }
/* Address and hours carry the same mono treatment as the number and email, so
   the whole contact block reads as one set of machine-readable details. They
   inherit dd's size and weight deliberately — matching is the whole point. */
.contact-item dd .contact-line { font-size: inherit; font-weight: inherit; }

.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); display: grid; gap: var(--sp-4); }
.form__intro { font-size: var(--fs-sm); color: var(--text-muted); }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field label .req { color: var(--brand-red); }
.field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; min-height: 48px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 22%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: .75; }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field__error { font-size: var(--fs-xs); color: #ef6b5c; display: none; align-items: center; gap: .35rem; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #ef6b5c; }
.field[data-invalid="true"] .field__error { display: flex; }
@media (min-width: 620px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
.form__note { font-size: var(--fs-xs); color: var(--text-muted); }
.form__ok { display: none; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); background: color-mix(in srgb, var(--brand-sage) 18%, transparent); border: 1px solid color-mix(in srgb, var(--brand-sage) 45%, transparent); color: var(--text); }
.form__ok[data-show="true"] { display: flex; }
.form__err { display: none; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); background: color-mix(in srgb, var(--brand-red) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand-red) 45%, transparent); color: var(--text); }
.form__err[data-show="true"] { display: flex; }
.form__err svg { color: #e2705f; }
/* Honeypot: off-screen for bots, invisible and unreachable for people */
/* Honeypot: present in the DOM for bots, invisible and unreachable for people.
   NOT `left: -9999px` — that is an LTR-only trick. In an RTL document negative
   left sits in the scrollable direction, so it added ~10,000px of horizontal
   overflow to every page. Clip it in place instead, like .sr-only. */
.hp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 17. CTA band ------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  border: 1px solid var(--border-str);
  background: linear-gradient(150deg, var(--brand-navy), var(--bg-elev) 58%);
  padding: clamp(2.2rem, 1.5rem + 4vw, 4.5rem); text-align: center;
}
/* :not() guard — a bare `> *` would reset the pattern layer's position:absolute */
.cta-band > :not(.pattern-field) { position: relative; z-index: 2; }
.cta-band .pattern-field {
  opacity: .5;
  mask-image: linear-gradient(to var(--to-end, right), #000, transparent 58%);
  -webkit-mask-image: linear-gradient(to var(--to-end, right), #000, transparent 58%);
}
[dir="rtl"] .cta-band .pattern-field { --to-end: left; }
.cta-band__title { font-size: var(--fs-h2); letter-spacing: -.02em; margin-block-end: var(--sp-4); }
.cta-band__lead { color: var(--text-mid); max-width: 56ch; margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-block-start: var(--sp-6); }

/* ---------- 18. Footer --------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding-block: var(--sp-8) var(--sp-5); }
.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } }
.footer__about { color: var(--text-muted); font-size: var(--fs-sm); max-width: 42ch; margin-block-start: var(--sp-4); }
.footer h4 { font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-block-end: var(--sp-4); font-family: var(--font-mono); }
.footer ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer li a { color: var(--text-muted); font-size: var(--fs-sm); transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease); }
.footer li a:hover { color: var(--brand-teal); padding-inline-start: 5px; }
/* Non-link entries in the contact column (opening hours) match the links
   around them, so the block reads as one list rather than two treatments. */
.footer li > span { color: var(--text-muted); font-size: var(--fs-sm); }
.footer__social { display: flex; gap: .5rem; margin-block-start: var(--sp-5); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
.footer__bottom .mono { direction: ltr; }

/* ---------- 19. Floating actions ----------------------------------------- */
.fab-stack { position: fixed; z-index: 90; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; display: grid; gap: .6rem; justify-items: center; }
.fab { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-str); color: var(--text); box-shadow: var(--shadow-lg); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.fab svg { width: 22px; height: 22px; }
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab--wa { background: var(--grad-fire); border-color: transparent; color: #fff; }
.fab--top { opacity: 0; pointer-events: none; }
.fab--top[data-show="true"] { opacity: 1; pointer-events: auto; }

.progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 120; background: var(--grad-fire); transform: scaleX(var(--p, 0)); transform-origin: var(--origin, left); }
[dir="rtl"] .progress { --origin: right; }

/* ---------- 20. Reveals -------------------------------------------------- */
/* Scoped to .js so the page stays legible if JavaScript never runs */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

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

/* ---------- 21. Print ---------------------------------------------------- */
@media print {
  .header, .topbar, .fab-stack, .progress, .marquee, .hero__pattern, .hero__ghost, .hero__wash { display: none !important; }
  body { background: #fff; color: #000; }
}