/* ==========================================================================
   RED ANGEL — شركة الملاك الأصهب
   components.css — every reusable component
   Layer 2 of 3.  Depends on tokens.css. Section layout lives in sections.css.
   ========================================================================== */


/* ==========================================================================
   PRELOADER — the aperture: mark resolves, gold rakes across it, curtains part
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 42%, var(--navy-800), var(--ink) 72%);
  transition: opacity .7s var(--ease-io), visibility .7s;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 26px);
  padding-inline: 24px;
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}

.preloader__mark {
  position: relative;
  inline-size: clamp(96px, 15vw, 158px);
  overflow: hidden;
  animation: preMark 1s var(--ease-out) both;
}

.preloader__mark img { inline-size: 100%; }

@keyframes preMark {
  from { opacity: 0; transform: scale(.86); filter: blur(14px) saturate(.35) brightness(.6); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0) saturate(1) brightness(1); }
}

/* The raking specular sweep — fires once, clipped to the mark's box. */
.preloader__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(249, 239, 203, .78) 48%,
    rgba(255, 255, 255, .92) 50%,
    rgba(249, 239, 203, .78) 52%,
    transparent 62%);
  mix-blend-mode: screen;
  transform: translate3d(-140%, 0, 0);
  animation: preSweep 1.25s cubic-bezier(.5, 0, .2, 1) .45s both;
  pointer-events: none;
}

@keyframes preSweep {
  to { transform: translate3d(140%, 0, 0); }
}

.preloader__word {
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: clamp(1.05rem, .9rem + .9vw, 1.7rem);
  letter-spacing: .34em;
  padding-inline-start: .34em;            /* balance the trailing track */
  color: var(--gold-200);
  background-image: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: preWord 1.1s var(--ease-out) .3s both;
}

@keyframes preWord {
  from { opacity: 0; letter-spacing: .62em; }
  to   { opacity: 1; letter-spacing: .34em; }
}

.preloader__bar {
  position: relative;
  inline-size: min(230px, 56vw);
  block-size: 1px;
  background: rgba(232, 230, 223, .13);
  overflow: hidden;
}

.preloader__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0%;
  background: linear-gradient(to left, var(--gold-600), var(--gold-100));
  box-shadow: 0 0 12px rgba(201, 162, 39, .6);
  transition: inline-size .25s linear;
}

.preloader__pct {
  font-family: var(--font-latin);
  font-size: .82rem;
  letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-400);
  direction: ltr;
  unicode-bidi: isolate;
}

/* The curtains: the overlay splits horizontally and lifts away. */
.preloader__curtain {
  position: absolute;
  inset-inline: 0;
  block-size: 50.5%;
  background: var(--ink);
  transition: transform .95s var(--ease-io);
  z-index: -1;
}
.preloader__curtain--t { inset-block-start: 0; }
.preloader__curtain--b { inset-block-end: 0; }

.preloader.is-done { pointer-events: none; }
.preloader.is-done .preloader__inner { opacity: 0; transform: scale(.96) translateY(-14px); }
.preloader.is-done .preloader__curtain--t { transform: translateY(-101%); }
.preloader.is-done .preloader__curtain--b { transform: translateY(101%); }
.preloader.is-done { background: transparent; }


/* ==========================================================================
   CUSTOM CURSOR — a gold point, a lagging ring. Desktop pointers only.
   ========================================================================== */
.cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}

.cursor.is-active { opacity: 1; }
.cursor.is-hidden { opacity: 0 !important; }

.cursor__dot,
.cursor__ring {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

.cursor__dot {
  inline-size: 6px;
  block-size: 6px;
  background: var(--gold-200);
  box-shadow: 0 0 10px rgba(240, 221, 160, .9);
}

.cursor__ring {
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid rgba(201, 162, 39, .55);
  transition: inline-size .3s var(--ease-out), block-size .3s var(--ease-out),
              border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}

.cursor.is-hover .cursor__ring {
  inline-size: 58px;
  block-size: 58px;
  border-color: rgba(240, 221, 160, .85);
  background: rgba(201, 162, 39, .07);
}

.cursor.is-hover .cursor__dot { opacity: .35; }

/* Touch devices keep their native affordances. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}


/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 120;
  block-size: var(--nav-h);
  transition: block-size .4s var(--ease-out), background-color .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 12, 24, .82), transparent);
  opacity: 1;
  transition: opacity .4s var(--ease-out);
  pointer-events: none;
}

.nav.is-stuck {
  --nav-h: 68px;
  background: rgba(6, 12, 24, .78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 0 var(--line), 0 18px 40px -30px rgba(0, 0, 0, .9);
}

.nav.is-stuck::before { opacity: 0; }

.nav__inner {
  position: relative;
  z-index: 1;
  block-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 36px);
}

/* ---- brand ---- */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav__logo {
  inline-size: clamp(34px, 3.4vw, 46px);
  filter: drop-shadow(0 4px 14px rgba(30, 144, 216, .35));
  transition: transform .5s var(--ease-out);
}

.nav__brand:hover .nav__logo { transform: rotate(-6deg) scale(1.06); }

.nav__brandtext {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav__name {
  font-weight: 800;
  font-size: clamp(.86rem, .8rem + .28vw, 1.02rem);
  color: var(--ivory);
}

.nav__latin {
  font-family: var(--font-latin);
  font-size: .62rem;
  letter-spacing: .3em;
  padding-inline-start: .3em;
  color: var(--gold-400);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- links ---- */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

.nav__link {
  position: relative;
  font-size: .96rem;
  font-weight: 500;
  color: var(--muted);
  padding-block: 8px;
  transition: color .35s var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(to left, transparent, var(--gold-300), transparent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .5s var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--gold-200); }

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__link.is-active { color: var(--gold-200); }

/* ---- actions ---- */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---- burger ---- */
.nav__burger {
  display: none;
  inline-size: 46px;
  block-size: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(12, 22, 44, .5);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}

.nav__burger:hover { border-color: var(--gold-400); }

.nav__burger-box {
  display: block;
  position: relative;
  inline-size: 20px;
  block-size: 14px;
}

.nav__burger-box i {
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background: var(--gold-200);
  border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .25s var(--ease-out);
}

.nav__burger-box i:nth-child(1) { inset-block-start: 0; }
.nav__burger-box i:nth-child(2) { inset-block-start: 50%; translate: 0 -50%; }
.nav__burger-box i:nth-child(3) { inset-block-end: 0; }

.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

/* ---- scroll progress ---- */
.nav__progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: rgba(232, 230, 223, .06);
  overflow: hidden;
}

.nav__progress-fill {
  display: block;
  block-size: 100%;
  background: linear-gradient(to left, var(--gold-600), var(--gold-100));
  transform: scaleX(var(--p, 0));
  transform-origin: 100% 50%;                 /* fills right-to-left */
  will-change: transform;
}


/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 115;
  visibility: hidden;
  pointer-events: none;
}

.menu[hidden] { display: none; }

.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}

.menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 88vw);
  padding: calc(var(--nav-h) + 34px) clamp(24px, 6vw, 46px) 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(200deg, var(--navy-800), var(--ink));
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);                /* RTL: the drawer lives on the right */
  transition: transform .55s var(--ease-io);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.menu-open .menu { visibility: visible; pointer-events: auto; }
body.menu-open .menu::before { opacity: 1; }
body.menu-open .menu__panel { transform: translateX(0); }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 15px;
  border-block-end: 1px solid var(--line-soft);
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.5rem);
  font-weight: 700;
  color: var(--ivory);
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}

body.menu-open .menu__link { opacity: 1; transform: none; }

.menu__link:hover,
.menu__link:focus-visible { color: var(--gold-200); }

.menu__idx {
  font-family: var(--font-latin);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--gold-500);
  direction: ltr;
  unicode-bidi: isolate;
}

.menu__contact {
  margin-block-start: auto;
  padding-block-start: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .92rem;
  color: var(--muted);
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}

body.menu-open .menu__contact { opacity: 1; transform: none; }

.menu__contact a { transition: color .3s; }
.menu__contact a:hover { color: var(--gold-200); }


/* ==========================================================================
   BUTTONS — magnetic, with a sheen that crosses once on hover
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 52px;
  padding-inline: clamp(22px, 3vw, 38px);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition: transform .35s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .35s var(--ease-out), color .35s var(--ease-out);
}

.btn__label {
  position: relative;
  z-index: 2;
  display: inline-block;
  will-change: transform;
}

/* the sheen */
.btn::after {
  content: "";
  position: absolute;
  inset-block: -60%;
  inline-size: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .75s var(--ease-io);
  z-index: 1;
  pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after { inset-inline-start: 115%; }

/* ---- gold ---- */
.btn--gold {
  background-image: var(--grad-gold);
  color: #2A1F05;
  box-shadow: 0 12px 32px -14px rgba(201, 162, 39, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.btn--gold:hover {
  box-shadow: 0 18px 44px -14px rgba(201, 162, 39, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* ---- ghost ---- */
.btn--ghost {
  color: var(--gold-200);
  border: 1px solid var(--line);
  background: rgba(12, 22, 44, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-100);
  box-shadow: var(--glow-gold);
}

.btn--ghost::after { background: linear-gradient(105deg, transparent, rgba(240, 221, 160, .18), transparent); }

/* ---- sizes ---- */
.btn--sm { min-block-size: 42px; padding-inline: 20px; font-size: .88rem; }
.btn--block { inline-size: 100%; }

.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }


/* ==========================================================================
   ORNAMENT — the brand's wall-sign rule: two tapered hairlines + a sparkle.
   The ✦ character is deliberately NOT used: on Windows it falls back to a
   symbol font, sits off-baseline, and drifts as a bidi-neutral in RTL.
   ========================================================================== */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  inline-size: 100%;
  max-inline-size: 340px;
}

.ornament__rule {
  flex: 1;
  block-size: 1px;
  max-inline-size: 150px;
  background: var(--grad-rule);
  transform: scaleX(0);
  transition: transform .95s var(--ease-out);
}

.ornament__rule:first-child  { transform-origin: 100% 50%; transition-delay: .05s; }
.ornament__rule:last-child   { transform-origin: 0 50%;    transition-delay: .17s; background: linear-gradient(to right, transparent, var(--gold-600) 34%, var(--gold-300)); }

.ornament__star {
  inline-size: clamp(13px, 1.5vw, 17px);
  flex-shrink: 0;
  fill: var(--gold-300);
  filter: drop-shadow(0 0 7px rgba(201, 162, 39, .55));
  opacity: 0;
  transform: rotate(-90deg) scale(.4);
  transition: opacity .8s var(--ease-out) .1s, transform .9s var(--ease-out) .1s;
}

.ornament--sm { max-inline-size: 220px; }

/* Revealed when the ornament — or any ancestor carrying [data-reveal] — lands. */
.is-revealed .ornament__rule,
.ornament.is-revealed .ornament__rule { transform: scaleX(1); }

.is-revealed .ornament__star,
.ornament.is-revealed .ornament__star { opacity: 1; transform: rotate(0) scale(1); }

/* In the hero the ornament is driven by the entrance sequence instead. */
.hero .ornament__rule { transform: scaleX(1); }
.hero .ornament__star { opacity: 1; transform: none; }


/* ==========================================================================
   CHIP — Arabic phrases reveal as whole units, never split, never tracked
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20, 38, 74, .38);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gold-200);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              border-color .35s, background-color .35s;
}

.chip::before {
  content: "";
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--gold-400);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .chip { opacity: 0; transform: translateY(9px) scale(.965); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
  .js .is-revealed .chip { opacity: 1; transform: none; }
}

.svc:hover .chip,
.vpanel:hover .chip { border-color: rgba(201, 162, 39, .4); background: rgba(20, 38, 74, .6); }


/* ==========================================================================
   PILLAR — the four brand promises under the hero
   ========================================================================== */
.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: clamp(16px, 2vw, 24px) clamp(10px, 1.6vw, 18px);
}

/* Hairline separators between pillars (not after the last). */
.pillar + .pillar::before {
  content: "";
  position: absolute;
  inset-block: 18%;
  inset-inline-end: 0;
  inline-size: 1px;
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
}

.pillar__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 35% 30%, rgba(201, 162, 39, .16), transparent 68%);
  transition: border-color .45s var(--ease-out), box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}

.pillar__icon svg {
  inline-size: 24px;
  block-size: 24px;
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar:hover .pillar__icon {
  border-color: var(--gold-400);
  box-shadow: var(--glow-gold);
  transform: translateY(-3px);
}

.pillar__text {
  font-size: clamp(.84rem, .8rem + .22vw, .96rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--muted);
  max-inline-size: 20ch;
}


/* ==========================================================================
   POINT — checklist row
   ========================================================================== */
.point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
  font-size: .98rem;
  font-weight: 500;
  color: var(--text);
}

.point__icon {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(201, 162, 39, .08);
}

.point__icon svg {
  inline-size: 15px;
  block-size: 15px;
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   SERVICE CARD — a slab of dark marble with a pointer-lit gold rim
   ========================================================================== */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(20, 38, 74, .58), rgba(6, 12, 24, .92));
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  box-shadow: var(--shadow-md);
  /* opacity/transform/filter are here so the [data-reveal] entrance still
     animates — a component-level `transition` shorthand would otherwise
     replace the property list set in tokens.css. */
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out),
              filter .9s var(--ease-out), box-shadow .55s var(--ease-out),
              border-color .55s var(--ease-out);
}

/* The rim light follows the pointer via --mx/--my written by fx.js. */
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(240, 221, 160, .75), rgba(201, 162, 39, .18) 42%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}

.svc:hover::before,
.svc:focus-visible::before,
.svc.is-lit::before { opacity: 1; }

.svc:hover,
.svc:focus-visible {
  box-shadow: 0 50px 100px -34px rgba(0, 0, 0, .95), 0 0 60px -22px rgba(201, 162, 39, .3);
  border-color: rgba(201, 162, 39, .28);
}

.svc:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

/* ---- media ---- */
.svc__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  transform: translateZ(18px);
}

.svc__media picture,
.svc__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.svc__media img {
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  filter: saturate(.92) brightness(.82);
}

.svc:hover .svc__media img {
  transform: scale(1.09);
  filter: saturate(1.05) brightness(.95);
}

.svc__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 24, .96) 4%, rgba(6, 12, 24, .28) 52%, rgba(6, 12, 24, .5));
  pointer-events: none;
}

/* Engraved Latin numerals — outline stroking is safe here because these are
   Latin figures. It must never be applied to Arabic (it fattens the i'jam
   dots until ب / ت / ث become indistinguishable). */
.svc__num {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 16px;
  z-index: 2;
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: .06em;
  direction: ltr;
  unicode-bidi: isolate;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 39, .5);
  transform: translateZ(30px);
  transition: -webkit-text-stroke-color .5s var(--ease-out), opacity .5s var(--ease-out);
  opacity: .8;
}

.svc:hover .svc__num { -webkit-text-stroke-color: rgba(240, 221, 160, .9); opacity: 1; }

/* ---- body ---- */
.svc__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 30px);
  flex: 1;
  transform: translateZ(10px);
}

.svc__icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(201, 162, 39, .16), rgba(11, 92, 158, .1));
  transition: border-color .45s, box-shadow .45s, transform .45s var(--ease-out);
}

.svc__icon svg {
  inline-size: 23px;
  block-size: 23px;
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc:hover .svc__icon {
  border-color: var(--gold-400);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

.svc__title {
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 800;
  color: var(--ivory);
  transition: color .4s var(--ease-out);
}

.svc:hover .svc__title { color: var(--gold-200); }

.svc__sub {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gold-400);
  margin-block-start: -8px;
}

.svc__desc {
  font-size: .94rem;
  line-height: 1.95;
  color: var(--muted);
}

.svc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 4px;
}

.svc__note {
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line-soft);
  font-size: .84rem;
  font-style: italic;
  color: var(--gold-400);
}


/* ==========================================================================
   VISION PANEL
   ========================================================================== */
.vpanel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(168deg, rgba(20, 38, 74, .5), rgba(6, 12, 24, .95));
  box-shadow: var(--shadow-lg);
  transform-style: preserve-3d;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out),
              filter .9s var(--ease-out), border-color .55s var(--ease-out),
              box-shadow .55s var(--ease-out);
}

.vpanel:hover { border-color: rgba(201, 162, 39, .3); }

.vpanel__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.vpanel__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: saturate(.9) brightness(.8);
  transform: scale(1.03);
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}

.vpanel:hover .vpanel__media img { transform: scale(1.1); filter: saturate(1) brightness(.92); }

.vpanel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 24, .98) 2%, rgba(6, 12, 24, .35) 60%, rgba(6, 12, 24, .55));
}

.vpanel__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3.4vw, 44px);
  margin-block-start: clamp(-70px, -6vw, -46px);
  transform: translateZ(14px);
}

.vpanel__kicker {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(6, 12, 24, .9);
  box-shadow: var(--glow-gold);
}

.vpanel__kicker svg {
  inline-size: 20px;
  block-size: 20px;
  fill: var(--gold-300);
}

.vpanel__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 800;
  color: var(--gold-200);
  background-image: var(--grad-gold-rtl);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vpanel__text {
  font-size: clamp(.98rem, .94rem + .3vw, 1.1rem);
  line-height: 2.05;
  color: var(--text);
}

.vpanel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-block-start: 4px;
}


/* ==========================================================================
   INVENTORY DEMO — the console powers on
   ========================================================================== */
.invdemo {
  position: relative;
  margin-block-start: clamp(48px, 6vw, 84px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--glass-2);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .22), var(--shadow-lg),
              inset 0 0 90px rgba(11, 92, 158, .1);
  overflow: hidden;
}

/* CRT scanlines — very low contrast, purely a material cue. */
.invdemo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
  opacity: .5;
  pointer-events: none;
}

.invdemo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-block-end: clamp(20px, 2.4vw, 30px);
  padding-block-end: 16px;
  border-block-end: 1px solid var(--line);
}

.invdemo__head h3 {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.32rem);
  font-weight: 700;
  color: var(--gold-200);
}

.invdemo__head small { color: var(--faint); font-size: .78rem; }

.invdemo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

/* There are seven tiles. Left to auto-fit, a wide screen packs six on the first
   row and strands one alone; four columns give a balanced 4 + 3. */
@media (min-width: 901px) {
  .invdemo__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.invdemo__tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.8vw, 20px);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(20, 38, 74, .5), rgba(6, 12, 24, .6));
  transition: border-color .4s var(--ease-out), transform .5s var(--ease-out);
}

.invdemo__tile:hover { border-color: rgba(201, 162, 39, .35); transform: translateY(-3px); }

@media (prefers-reduced-motion: no-preference) {
  .js .invdemo__tile { opacity: 0; transform: translateY(16px); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .invdemo.is-revealed .invdemo__tile { opacity: 1; transform: none; }
}

.invdemo__val {
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--gold-200);
  /* tabular figures stop the tile reflowing 60x a second while counting;
     isolate stops "68%" being reordered to "%68" inside the RTL section. */
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
  /* The box is LTR so the digits and "%" keep their order, but `end` pushes it
     flush right — the same edge the Arabic label starts from. */
  text-align: end;
}

.invdemo__label {
  font-size: .78rem;
  line-height: 1.7;
  color: var(--muted);
}


/* ==========================================================================
   CONTACT LINE
   ========================================================================== */
.cline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: linear-gradient(150deg, rgba(20, 38, 74, .45), rgba(6, 12, 24, .7));
  transition: opacity .9s var(--ease-out), filter .9s var(--ease-out),
              border-color .4s var(--ease-out), transform .45s var(--ease-out),
              box-shadow .45s var(--ease-out), background-color .4s;
}

.cline:hover,
.cline:focus-visible {
  border-color: rgba(201, 162, 39, .4);
  transform: translateX(-6px);                 /* RTL: nudges toward the start edge */
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9), var(--glow-gold);
}

.cline__icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(201, 162, 39, .16), rgba(11, 92, 158, .1));
}

.cline__icon svg {
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The WhatsApp glyph is a filled path, not a stroked one. */
.cline__icon svg.ico-wa { fill: var(--gold-300); stroke: none; }

.cline--wa:hover .cline__icon { border-color: #25D366; }
.cline--wa:hover .cline__icon svg.ico-wa { fill: #4be08b; }

.cline__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.cline__label {
  font-size: .76rem;
  color: var(--faint);
  letter-spacing: 0;
}

.cline__value {
  font-size: clamp(.94rem, .9rem + .3vw, 1.08rem);
  font-weight: 700;
  color: var(--ivory);
  /* The email is one long unbreakable token on narrow screens. */
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ==========================================================================
   FORM
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-block-end: 16px;
}

.field label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--gold-300);
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: rgba(6, 12, 24, .62);
  color: var(--ivory);
  font-size: .96rem;
  font-family: inherit;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s;
}

.field textarea { min-block-size: 118px; resize: vertical; line-height: 1.9; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(232, 230, 223, .3); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(201, 162, 39, .3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(6, 12, 24, .85);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .14);
}

/* Native select arrow, drawn on the RTL start side (physical left). */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6C879' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 17px;
  padding-inline-start: 44px;
}

.field select option { background: var(--navy-800); color: var(--ivory); }

.field__error {
  font-size: .78rem;
  color: #ff9d8a;
  min-block-size: 0;
  opacity: 0;
  transition: opacity .25s;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #d4573c; box-shadow: 0 0 0 3px rgba(212, 87, 60, .14); }

.field.has-error .field__error { opacity: 1; }

.form__note {
  margin-block-start: 14px;
  padding: 0 2px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold-200);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}

.form__note.is-shown { opacity: 1; transform: none; }


/* ==========================================================================
   FOOTER PARTS
   ========================================================================== */
.footer__brand img {
  inline-size: clamp(180px, 22vw, 260px);
  filter: drop-shadow(0 8px 26px rgba(30, 144, 216, .28));
}

.footer__tag {
  margin-block-start: 14px;
  font-size: .92rem;
  color: var(--muted);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.4vw, 30px);
}

.footer__nav a {
  position: relative;
  font-size: .94rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .3s;
}

.footer__nav a::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s var(--ease-out);
}

.footer__nav a:hover { color: var(--gold-200); }
.footer__nav a:hover::after { transform: scaleX(1); }

.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer__meta p { font-size: .84rem; color: var(--faint); }

.footer__meta .ornament__rule { transform: scaleX(1); }
.footer__meta .ornament__star { opacity: 1; transform: none; }


/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
/* These two floaters use PHYSICAL left/right on purpose: "WhatsApp bottom-right,
   back-to-top bottom-left" is a screen convention, not a reading-order one, so
   it must not mirror between the Arabic and the English page. */
.totop {
  position: fixed;
  inset-block-end: clamp(18px, 3vw, 34px);
  left: clamp(18px, 3vw, 34px);
  z-index: 110;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(6, 12, 24, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out),
              visibility .45s, border-color .35s, box-shadow .35s;
}

.totop.is-visible { opacity: 1; visibility: visible; transform: none; }

.totop:hover { border-color: var(--gold-400); box-shadow: var(--glow-gold); }

.totop svg {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}

.totop:hover svg { transform: translateY(-2px); }


/* ==========================================================================
   FLOATING WHATSAPP — the primary conversion path for this market.
   Navy glass + a gold hairline keeps it inside the brand; the green glyph and
   the slow pulse keep it instantly recognisable.
   ========================================================================== */
.wa {
  position: fixed;
  inset-block-end: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);          /* physical: always bottom-right */
  z-index: 111;
  display: inline-flex;
  align-items: center;
  gap: 0;
  block-size: 58px;
  padding-inline: 0;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, .45);
  background: rgba(6, 12, 24, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 26px -8px rgba(37, 211, 102, .38);
  overflow: hidden;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
              background-color .4s var(--ease-out), transform .4s var(--ease-out);
}

.wa__icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  flex-shrink: 0;
}

.wa__icon svg {
  inline-size: 27px;
  block-size: 27px;
  fill: #4be08b;
  transition: fill .35s var(--ease-out), transform .45s var(--ease-out);
}

/* The label slides open on pointer devices only — on a phone the circle alone
   is the whole affordance and a pill would crowd the viewport. */
.wa__label {
  max-inline-size: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 700;
  color: var(--gold-200);
  transition: max-inline-size .5s var(--ease-out), opacity .35s var(--ease-out),
              padding-inline-end .5s var(--ease-out);
  padding-inline-end: 0;
}

@media (hover: hover) and (pointer: fine) {
  .wa:hover .wa__label,
  .wa:focus-visible .wa__label {
    max-inline-size: 220px;
    opacity: 1;
    padding-inline-end: 22px;
  }
}

.wa:hover,
.wa:focus-visible {
  border-color: rgba(37, 211, 102, .75);
  background: rgba(8, 26, 18, .92);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .95), 0 0 40px -6px rgba(37, 211, 102, .55);
}

.wa:hover .wa__icon svg { fill: #25D366; transform: scale(1.08); }

/* Slow outward pulse — a heartbeat, not a strobe. */
.wa__pulse {
  position: absolute;
  inset-block-start: 50%;
  right: 28px;
  inline-size: 56px;
  block-size: 56px;
  margin-block-start: -28px;
  margin-inline-end: -28px;
  border-radius: 50%;
  border: 1px solid rgba(37, 211, 102, .55);
  pointer-events: none;
  animation: waPulse 3.6s var(--ease-out) infinite;
}

@keyframes waPulse {
  0%   { transform: scale(.7); opacity: 0; }
  35%  { opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 640px) {
  .wa { block-size: 52px; }
  .wa__icon { inline-size: 50px; block-size: 50px; }
  .wa__icon svg { inline-size: 24px; block-size: 24px; }
  .wa__pulse { inline-size: 50px; block-size: 50px; margin-block-start: -25px; margin-inline-end: -25px; right: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa__pulse { animation: none; opacity: 0; }
}


/* Honeypot: reachable to a bot parsing the DOM, invisible and untabbable to a
   human. Deliberately not display:none — bots skip fields hidden that way. */
.hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   LANGUAGE SWITCH — a hairline pill next to the nav CTA
   ========================================================================== */
.langswitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  block-size: 42px;
  padding-inline: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 22, 44, .5);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-300);
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out),
              background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

.langswitch:hover,
.langswitch:focus-visible {
  border-color: var(--gold-400);
  color: var(--gold-100);
  background: rgba(20, 38, 74, .6);
  box-shadow: var(--glow-gold);
}

/* In the drawer it becomes a full-width row instead of a pill. */
.menu__lang {
  margin-block-start: 22px;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}

body.menu-open .menu__lang { opacity: 1; transform: none; }

.menu__lang .langswitch { flex: 1; block-size: 46px; }

@media (max-width: 900px) {
  .nav__actions .langswitch { block-size: 46px; }
}