/* === tokens/fonts.css === */
/* ============================================================
   818 BUSINESS SOLUTIONS — Webfonts
   Heading (EN + AR): Amiri
   Body/UI (EN): IBM Plex Sans · (AR): IBM Plex Sans Arabic
   Logo fonts (Venom 818 Design, Blaur Neue) exist ONLY inside
   the supplied logo artwork — never loaded, never re-typed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* === tokens/colors.css === */
/* ============================================================
   818 BUSINESS SOLUTIONS — Colour tokens
   THE MIDNIGHT PALETTE (Brand Guidelines 2026)
   Seven colours: five sampled from the wave background artwork,
   plus Panel Navy from the website chrome and Ivory as light ink.
   Midnight is the primary field; gold is the ONLY accent.
   ============================================================ */

:root {
  /* ---- The seven brand colours ---- */
  --midnight:    #05080F;   /* primary field — pages, covers, heroes. Pantone Black 6 C  */
  --panel-navy:  #0E1929;   /* elevated chrome — nav, footers, modals. Pantone 5395 C    */
  --deep-wave:   #122C48;   /* brand blue — panels, gradients, links on light. 2767 C    */
  --steel-ridge: #626D76;   /* muted UI text, hairlines on dark. Pantone 431 C           */
  --ember-glow:  #462B17;   /* photographic warmth ONLY — never fill/border/text. 4625 C */
  --brand-gold:  #C6A877;   /* the only accent. Pantone 466 C                            */
  --ivory:       #EBE7D8;   /* light ink on dark + print paper. Pantone 9080 C           */

  /* ---- Gold support (from guidelines) ---- */
  --gold-text-on-light: #A07F56;  /* when gold must carry text on light  */
  --gold-hover: #D6BD95;
  --gold-pressed: #B8956A;

  /* ---- Ivory opacity steps over Midnight (approved) ---- */
  --ivory-100: #EBE7D8;                         /* headlines           */
  --ivory-72:  rgba(235,231,216,0.72);          /* body text           */
  --ivory-50:  rgba(235,231,216,0.50);          /* muted labels        */
  --ivory-10:  rgba(235,231,216,0.10);          /* hairlines           */

  /* ---- Gold opacity steps (approved) ---- */
  --gold-45: rgba(198,168,119,0.45);            /* divider rule        */
  --gold-28: rgba(198,168,119,0.28);            /* border on dark      */
  --gold-10: rgba(198,168,119,0.10);            /* tint wash           */

  /* ---- Steel Ridge steps (approved) ---- */
  --steel-40: rgba(98,109,118,0.40);            /* dividers            */
  --steel-20: rgba(98,109,118,0.20);            /* disabled            */

  /* ---- Deep Wave steps (approved) ---- */
  --wave-40: rgba(18,44,72,0.40);               /* chart fills         */
  --wave-20: rgba(18,44,72,0.20);               /* selected row        */

  /* ---- Print / light-surface ink ---- */
  --ink-on-light:   #0E1929;                    /* headings/body on ivory paper */
  --muted-on-light: #626D76;

  /* ---- Gradients ---- */
  --gradient-midnight: linear-gradient(155deg, #122C48 0%, #05080F 100%);      /* @kind color */
  --gradient-panel: linear-gradient(165deg, #0E1929 0%, #05080F 100%);         /* @kind color */
  --gradient-gold: linear-gradient(120deg, #B8956A 0%, #D6BD95 38%, #C6A877 64%, #A07F56 100%); /* @kind color */

  /* ---- Status (muted, on dark) ---- */
  --success: #6E9A7C;
  --warning: #C99B52;
  --error:   #B86B70;
  --info:    #6E87A8;
  --success-bg: rgba(110,154,124,0.16);
  --warning-bg: rgba(201,155,82,0.16);
  --error-bg:   rgba(184,107,112,0.16);
  --info-bg:    rgba(110,135,168,0.16);

  /* ============================================================
     SEMANTIC ALIASES — dark-first (digital surfaces are Midnight)
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--midnight);     /* every digital page          */
  --surface-chrome:  var(--panel-navy);   /* nav, footer, modals — solid */
  --surface-panel:   var(--deep-wave);    /* feature panels              */
  --surface-paper:   var(--ivory);        /* print documents only        */
  --surface-card:    var(--panel-navy);

  /* Text on dark (default) */
  --text-primary:   var(--ivory-100);
  --text-body:      var(--ivory-72);
  --text-muted:     var(--ivory-50);
  --text-steel:     var(--steel-ridge);
  --text-gold:      var(--brand-gold);

  /* Text on light (print / paper) */
  --text-on-light:        var(--ink-on-light);
  --text-on-light-muted:  var(--muted-on-light);
  --text-gold-on-light:   var(--gold-text-on-light);

  /* Accent */
  --accent:         var(--brand-gold);
  --accent-hover:   var(--gold-hover);
  --accent-pressed: var(--gold-pressed);
  --on-accent:      var(--midnight);      /* text on gold */

  /* Links */
  --link-on-dark:  var(--brand-gold);
  --link-on-light: var(--deep-wave);

  /* Borders */
  --border-on-dark:   var(--ivory-10);
  --border-steel:     var(--steel-40);
  --border-gold:      var(--gold-28);
  --divider-gold:     var(--gold-45);
  --border-on-light:  rgba(14,25,41,0.16);

  /* Focus */
  --focus-ring: rgba(198,168,119,0.55);

  /* Overlays (approved) */
  --scrim-image: rgba(5,8,15,0.90);
  --scrim-video: rgba(5,8,15,0.60);
}


/* === tokens/typography.css === */
/* ============================================================
   818 BUSINESS SOLUTIONS — Typography tokens
   Heading: Amiri 400 (serif — EN + AR display)
   Body/UI: IBM Plex Sans 400/600 · Arabic: IBM Plex Sans Arabic
   Logo fonts are never used for content.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Amiri', 'Times New Roman', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic-display: 'Amiri', serif;
  --font-arabic-body:    'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-light:    300;  /* @kind font */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */

  /* Amiri carries display at regular weight */
  --fw-display: 400;   /* @kind font */

  /* ---- Type hierarchy (from guidelines) ---- */
  --fs-h1-max: 76px;   /* H1 · Amiri 400 · 56–76px */
  --fs-h1: 56px;
  --fs-h2-max: 44px;   /* H2 · Amiri 400 · 36–44px */
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body-lg: 17px;  /* Body · Plex 400 · 15–17px */
  --fs-body: 15px;
  --fs-caption: 13px;  /* Caption · 12–13px */
  --fs-eyebrow: 13px;  /* Eyebrow · Plex 600 · 13px · +0.24em */
  --fs-button: 15px;   /* Button · Plex 600 · 15px */

  /* ---- Line heights ---- */
  --lh-display: 1.15;  /* @kind font */
  --lh-tight:   1.25;  /* @kind font */
  --lh-body:    1.6;   /* @kind font */
  --lh-relaxed: 1.85;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: 0em;        /* @kind font */
  --ls-eyebrow: 0.24em;     /* @kind font */
  --ls-button:  0.02em;     /* @kind font */
  --ls-wordmark: 0.32em;    /* @kind font */
}

/* ---- Helper classes ---- */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-gold);
}
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
[dir="rtl"] .t-display, .t-display-ar { font-family: var(--font-arabic-display); }
[dir="rtl"] .t-body, .t-body-ar { font-family: var(--font-arabic-body); line-height: var(--lh-relaxed); }


/* === tokens/spacing.css === */
/* ============================================================
   818 BUSINESS SOLUTIONS — Spacing, radius, shadow, motion
   8-point base. Restrained radii; shadows tuned for Midnight.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Layout ---- */
  --container-max: 1200px;   /* @kind spacing */
  --container-text: 680px;   /* @kind spacing */
  --gutter: var(--space-6);  /* @kind spacing */

  /* ---- Radii (restrained — luxury reads crisp) ---- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --hairline: 1px solid var(--border-on-dark);
  --rule-gold: 1px solid var(--divider-gold);

  /* ---- Shadows (deep, low-spread — for Midnight surfaces) ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.42);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.50);
  --shadow-xl: 0 36px 80px rgba(0,0,0,0.60);
  /* Gold glow for hero CTAs only */
  --glow-gold: 0 6px 24px rgba(198,168,119,0.28);
  /* For cards on light (print previews) */
  --shadow-on-light: 0 10px 30px rgba(14,25,41,0.18);

  /* ---- Motion (quiet, refined easing — no bounce) ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   220ms;   /* @kind other */
  --dur-slow:   420ms;   /* @kind other */
  --transition: var(--dur-base) var(--ease-out);  /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 1;          /* @kind other */
  --z-dropdown: 1000;   /* @kind other */
  --z-sticky: 1100;     /* @kind other */
  --z-overlay: 1200;    /* @kind other */
  --z-modal: 1300;      /* @kind other */
  --z-toast: 1400;      /* @kind other */
}


/* === tokens/base.css === */
/* ============================================================
   818 BUSINESS SOLUTIONS — Base element defaults
   DARK-FIRST: digital surfaces are Midnight with Ivory ink.
   Print surfaces opt in with .surface-light (ivory paper).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Amiri 400, ivory at 100% */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  margin: 0 0 16px;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 16px; text-wrap: pretty; }
a { color: var(--link-on-dark); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

small { font-size: var(--fs-caption); }
strong { font-weight: var(--fw-semibold); }
hr { border: none; border-top: 1px solid var(--divider-gold); margin: 32px 0; }

::selection { background: var(--gold-28); color: var(--ivory-100); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Light (print/paper) context ---- */
.surface-light {
  background: var(--surface-paper);
  color: var(--text-on-light);
}
.surface-light h1, .surface-light h2, .surface-light h3, .surface-light h4 { color: var(--text-on-light); }
.surface-light a { color: var(--link-on-light); }
.surface-light a:hover { color: var(--deep-wave); text-decoration: underline; }
.surface-light ::selection { background: var(--wave-20); color: var(--ink-on-light); }

/* ---- Arabic / RTL ---- */
[dir="rtl"] { font-family: var(--font-arabic-body); line-height: var(--lh-relaxed); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-arabic-display);
  letter-spacing: 0;
}


/* === components/core/components.css === */
/* ============================================================
   818 BUSINESS SOLUTIONS — Component styles (dark-first)
   Digital surfaces are Midnight; use .surface-light context
   for print/paper previews.
   ============================================================ */

/* ---------- Eyebrow / section label ---------- */
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-gold);
}
.ds-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--brand-gold); opacity: .8;
}
.ds-eyebrow--plain::before { display: none; }

/* ---------- Gold divider ---------- */
.ds-rule { border: none; height: 1px; background: var(--divider-gold); margin: var(--space-6) 0; }
.ds-rule--gradient { height: 2px; background: var(--gradient-gold); border-radius: 2px; }

/* ---------- Button ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 22px; height: 46px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.ds-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds-btn:active { transform: translateY(1px); }
.ds-btn .ds-btn__icon { width: 17px; height: 17px; display: inline-flex; }

/* Primary — gold, midnight text. The key CTA (gold ≤10% of layout). */
.ds-btn--primary { background: var(--brand-gold); color: var(--midnight); }
.ds-btn--primary:hover { background: var(--gold-hover); box-shadow: var(--glow-gold); }
.ds-btn--primary:active { background: var(--gold-pressed); }

/* Secondary — Deep Wave (the brand blue; also primary on light surfaces) */
.ds-btn--secondary { background: var(--deep-wave); color: var(--ivory-100); }
.ds-btn--secondary:hover { background: #17395d; }
.ds-btn--secondary:active { background: #0f2439; }

/* Outline — ivory hairline on dark */
.ds-btn--outline { background: transparent; color: var(--ivory-100); border-color: var(--border-steel); }
.ds-btn--outline:hover { border-color: var(--brand-gold); background: var(--gold-10); }
.surface-light .ds-btn--outline { color: var(--ink-on-light); border-color: var(--border-on-light); }
.surface-light .ds-btn--outline:hover { border-color: var(--deep-wave); background: var(--wave-20); }

/* Ghost — gold text only */
.ds-btn--ghost { background: transparent; color: var(--brand-gold); padding-inline: 10px; }
.ds-btn--ghost:hover { color: var(--gold-hover); background: var(--gold-10); }

/* Sizes */
.ds-btn--sm { height: 38px; font-size: var(--fs-caption); padding: 0 16px; }
.ds-btn--lg { height: 54px; font-size: 16px; padding: 0 30px; }

.ds-btn[disabled], .ds-btn--disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ---------- Tag (category) ---------- */
.ds-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--ivory-72);
  background: var(--panel-navy);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  padding: 6px 14px; line-height: 1;
}
.ds-tag--gold { background: var(--gold-10); border-color: var(--border-gold); color: var(--brand-gold); }
.ds-tag--navy { background: var(--deep-wave); border-color: transparent; color: var(--ivory-100); }
.ds-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold); }

/* ---------- Badge (status) ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius-xs); padding: 4px 9px; line-height: 1.2;
}
.ds-badge--neutral { background: var(--steel-20); color: var(--ivory-72); }
.ds-badge--gold    { background: var(--gold-10); color: var(--brand-gold); }
.ds-badge--success { background: var(--success-bg); color: var(--success); }
.ds-badge--warning { background: var(--warning-bg); color: var(--warning); }
.ds-badge--error   { background: var(--error-bg); color: var(--error); }

/* ---------- Card ---------- */
.ds-card {
  background: var(--panel-navy);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.ds-card--interactive { cursor: pointer; }
.ds-card--interactive:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-card--wave { background: var(--deep-wave); }
.ds-card--gold-top { border-top: 2px solid var(--brand-gold); }
.ds-card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); color: var(--ivory-100); margin: 0 0 8px; line-height: 1.2; }
.ds-card__body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ivory-72); margin: 0; }

/* ---------- Input ---------- */
.ds-field { display: flex; flex-direction: column; gap: 7px; }
.ds-field__label { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ivory-100); }
.ds-field__label .ds-req { color: var(--error); margin-left: 2px; }
.ds-input {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ivory-100);
  background: var(--panel-navy);
  border: 1px solid var(--border-steel);
  border-radius: var(--radius-sm);
  padding: 12px 14px; height: 48px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea.ds-input { height: auto; min-height: 110px; resize: vertical; line-height: 1.5; }
.ds-input::placeholder { color: var(--ivory-50); }
.ds-input:hover { border-color: var(--steel-ridge); }
.ds-input:focus { outline: none; border-color: var(--brand-gold); box-shadow: 0 0 0 3px var(--gold-10); }
.ds-input--error { border-color: var(--error); }
.ds-field__hint { font-family: var(--font-body); font-size: 12px; color: var(--ivory-50); }
.ds-field__hint--error { color: var(--error); }

/* ---------- Avatar / monogram ---------- */
.ds-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--deep-wave); color: var(--brand-gold);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px;
  border: 1px solid var(--border-gold); overflow: hidden; flex: none;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: 14px; }
.ds-avatar--lg { width: 60px; height: 60px; font-size: 24px; }
.ds-avatar--gold { background: var(--gradient-gold); color: var(--midnight); border-color: transparent; }


/* ============ PAGE STYLES ============ */

    html { scroll-behavior: smooth; }
    html, body { margin: 0; padding: 0; background: #05080F; }
    body { overflow-x: clip; }
    a { color: #EBE7D8; }
    a:hover { color: #C6A877; }
    .hero-email-input::placeholder { color: rgba(247,243,236,0.42); }
    @keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
    @keyframes heroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes ctaIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
    @keyframes cursorSpin { to { transform: rotate(360deg); } }
    @keyframes marqueeMove { to { transform: translateX(-50%); } }
    .why-row { transition: background 0.45s ease-out, transform 0.45s cubic-bezier(0.22,1,0.36,1); }
    .why-row:hover { background: linear-gradient(90deg, rgba(18,44,72,0.55) 0%, rgba(18,44,72,0) 85%); transform: scale(1.02); }
    .why-bg-layer { opacity: 0; transition: opacity 0.5s ease-out; }
    #why:hover .why-bg-layer { opacity: 1; }
    .why-blob { -webkit-mask-image: radial-gradient(circle closest-side, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 22%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(circle closest-side, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 22%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0) 100%); contain: paint; }
    .why-num { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); transform-origin: left center; display: inline-block; }
    .why-row:hover .why-num { transform: scale(1.32); }
    .partner-marquee:hover { animation-play-state: paused; }
    .mnav { transition: opacity 0.35s ease-out; }
    .mnav.is-open { opacity: 1 !important; pointer-events: auto !important; }
    .mnav-item { opacity: 0; transform: translateY(24px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); }
    .mnav.is-open .mnav-item { opacity: 1; transform: none; }
    .mnav.is-open .mi-1 { transition-delay: 0.08s; }
    .mnav.is-open .mi-2 { transition-delay: 0.15s; }
    .mnav.is-open .mi-3 { transition-delay: 0.22s; }
    .mnav.is-open .mi-4 { transition-delay: 0.29s; }
    .mnav.is-open .mi-5 { transition-delay: 0.36s; }
    .mnav.is-open .mi-6 { transition-delay: 0.46s; }
    @media (max-width: 980px) {
      .d-only { display: none !important; }
      .m-inline { display: inline !important; }
      .nav-burger { display: inline-flex !important; }
      .top-nav { padding: 18px 16px !important; }
      .nav-pill { padding: 8px 8px 8px 20px !important; }
      .nav-links { display: none !important; }
      .nav-cta { display: none !important; }
      .mnav { display: flex !important; }
      .hero-main { height: 100svh !important; min-height: 620px; }
      .hero-shift { padding: 0 24px !important; width: 100% !important; height: auto !important; box-sizing: border-box; }
      .hero-h1 { font-size: clamp(36px, 10.5vw, 52px) !important; }
      .robot-layer { height: 44vh !important; }
      .grid-2 { grid-template-columns: 1fr !important; gap: 48px !important; }
      #about { padding: 100px 24px 88px !important; }
      .about-ghost { font-size: 110px !important; top: 30px !important; }
      .h-wrap { height: auto !important; padding: 96px 0 !important; }
      .h-sticky { position: relative !important; height: auto !important; }
      .h-head { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; padding: 0 24px 36px !important; }
      .h-track { transform: none !important; overflow-x: auto !important; padding: 0 24px 24px !important; width: 100% !important; box-sizing: border-box; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
      .svc-card { width: min(320px, 84vw) !important; min-height: 400px !important; padding: 28px 24px !important; scroll-snap-align: center; }
      .h-progress { margin: 26px 24px 0 !important; width: calc(100% - 48px) !important; }
      .ws-wrap { height: auto !important; }
      .ws-sticky { position: relative !important; height: auto !important; }
      .ws-head { position: relative !important; top: auto !important; left: auto !important; right: auto !important; padding: 72px 24px 0 !important; }
      .ws-panel { position: relative !important; opacity: 1 !important; transform: none !important; padding: 56px 24px 72px !important; }
      .ws-panel + .ws-panel { border-top: 1px solid rgba(235,231,216,0.1); }
      .ws-inner { padding: 0 !important; height: auto !important; max-width: 100% !important; }
      .ws-scrim { background: linear-gradient(180deg, rgba(14,25,41,0.92) 0%, rgba(14,25,41,0.82) 100%) !important; }
      .ws-img { opacity: 1 !important; }
      #why { padding: 96px 24px !important; }
      .why-left { position: relative !important; top: 0 !important; }
      .why-row { grid-template-columns: 52px 1fr !important; gap: 16px !important; padding: 26px 8px 26px 12px !important; }
      .why-num { font-size: 36px !important; }
      .region-wrap { height: auto !important; }
      .region-sticky { position: relative !important; height: auto !important; padding: 96px 24px !important; }
      .region-row { flex-direction: column !important; align-items: flex-start !important; }
      .region-item { padding: 30px 0 0 !important; }
      #partners { padding: 88px 24px !important; }
      .partner-slot { width: 150px !important; height: 72px !important; margin-right: 40px !important; }
      .footer-cta { padding: 64px 24px !important; }
      .footer-cols { grid-template-columns: 1fr !important; gap: 44px !important; padding: 56px 0 !important; }
      .footer-legal { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    }
    @media (pointer: fine) { body, body * { cursor: none !important; } }
    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
    }
  

/* ---- alias vars used by the page markup ---- */
:root{ --text-on-dark-muted: rgba(235,231,216,0.66); --ivory-200:#EBE7D8; --gold-400:#C6A877; }
/* ---- interaction / hover states (ported from Claude Design style-hover) ---- */
.nav-link:hover{ color: var(--ivory-100); }
.hero-explore:hover{ color: var(--gold-400); }
.foot-link:hover{ color: #C6A877; }
.soc-link{ transition: border-color .3s, color .3s; }
.soc-link:hover{ border-color: rgba(198,168,119,0.7); color: #C6A877; }
.glass-cta{ transition: background-color .3s, box-shadow .3s, transform .1s; }
.glass-cta:hover{ background-color: rgba(198,168,119,0.14) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 0 22px rgba(198,168,119,0.22) !important; }
.glass-cta:active{ transform: translateY(1px); }
.svc-card{ transition: border-color .3s, transform .3s, box-shadow .3s; }
.svc-card:not(.svc-card--cta):hover{ border-color: rgba(198,168,119,0.5); transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
.about-img:hover{ transform: scale(1.045); box-shadow: 0 26px 64px rgba(0,0,0,0.55); }
.nav-link, .foot-link, .hero-explore { transition: color .3s; }
/* ---- marquee speeds: slower on smaller screens so the motion reads calm ---- */
.marquee-track   { animation: marqueeMove 38s linear infinite; }
.partner-marquee { animation: marqueeMove 32s linear infinite; }
@media (max-width: 980px) {
  .marquee-track   { animation-duration: 60s; }
  .partner-marquee { animation-duration: 50s; }
}
@media (max-width: 600px) {
  .marquee-track   { animation-duration: 88s; }
  .partner-marquee { animation-duration: 64s; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .partner-marquee { animation: none; }
}
/* ---- language switch button (عربي) ---- */
.lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 46px; padding: 0 18px; flex-shrink: 0; border-radius: 999px; background: rgba(17,30,48,0.78); border: 1px solid rgba(198,168,119,0.24); color: #EBE7D8; font-family: var(--font-arabic-body), var(--font-body); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; box-shadow: 0 12px 32px rgba(11,19,32,0.35); transition: border-color .3s, background-color .3s, color .3s; }
.lang-btn:hover { border-color: rgba(198,168,119,0.6); background: rgba(198,168,119,0.12); color: #fff; }
@media (max-width: 980px) {
  .lang-btn { height: 44px; min-width: 46px; padding: 0 14px; font-size: 14px; }
}

/* 818 autoplay-recovery (2026-07-30): suppress the iOS native play overlay on
   decorative background videos while they are paused (e.g. Low Power Mode). */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
}