/* Design tokens extracted from Figma node 150:794 ("Slide 16:9 - 3", 1920 × 10042). */
:root {
  /* Colors */
  --color-page: #00020f;
  --color-header: #02020c;
  --color-hero: #010205;
  --color-shade: #010310;
  --color-card-rgb: 7 7 36; /* #070724 as channels, for alpha variants */
  --color-decor: #201f39;
  --color-lime: #d9ff4c;
  --color-purple: #3e26dc;
  --color-white: #ffffff;
  --color-ink: #000210;
  --color-knob: #010210;
  --color-social-ring: #ebebef;
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-purple-10: rgba(62, 38, 220, 0.1);

  /* Type families */
  --font-kufi: 'Noto Kufi Arabic', sans-serif;
  --font-plex: 'IBM Plex Sans Arabic', sans-serif;
  --font-cairo: 'Cairo', sans-serif;
  --font-manrope: 'Manrope', sans-serif;
  --font-icons: 'Font Awesome 5 Free';

  /* Type scale: one size per text role, shared by both languages; phones redefine it (responsive.css).
     Text drawn inside fixed artwork (button label, menu, phone, hero tagline, rating) keeps its own size. */
  --fs-display: 46px;    /* hero title */
  --fs-title: 36px;      /* section headings */
  --fs-step: 28px;       /* process step and pillar titles */
  --fs-card-title: 22px; /* card, project, FAQ question and footer column titles */
  --fs-lead: 20px;       /* section intros */
  --fs-body: 18px;       /* card copy, answers, form fields */
  --fs-small: 16px;      /* tags, labels, links */
  --fs-badge: 17px;      /* section badge */

  /* One button size across the page (the showreel button of the design); the header keeps its compact one */
  --cta-zoom: 0.834688;

  /* Radii */
  --radius-card: 20px;
  --radius-service: 4px;
  --radius-pill: 999px;

  /* Layout */
  --frame: 1920px;
  --dir: 1; /* horizontal motion sign: 1 in the Arabic (RTL) page, -1 in the English (LTR) page */

  /* Motion (Figma prototype: OUT_CUBIC easing curve stored as [0, 0, 0.58, 1]) */
  --ease-out-cubic: cubic-bezier(0, 0, 0.58, 1);
  --dur-button: 0.5s;
  --dur-card: 0.8s;
  --dur-row: 1s;
  --dur-tile: 1s;
  --dur-project: 1.5s;

  --header-h: 88px; /* fixed header; its controls are centred in it */
  --ctl-h: 46px;    /* height of the round header controls: menu pill, language switch, phone */
}
:root[dir="ltr"] { --dir: -1; }