:root {
    /* Brand */
    --color-primary: #0b5f7f;
    --color-primary-strong: #084a65;
    --color-accent: #24b4c4;
    --color-gold: #dcb46c;
  
    /* Neutrals */
    --color-bg: #f7f9fa;
    --color-surface: #ffffff;
    --color-surface-soft: #f1f5f6;
    --color-border: #dbe4e7;
  
    --color-text: #17323c;
    --color-text-muted: #6b7f87;
    --color-text-soft: #8ea0a6;
  
    /* Status */
    --color-success: #1f8c6a;
    --color-warning: #c9953e;
    --color-danger: #bb5c5c;
  
    /* Typography */
    --font-sans:
      "IBM Plex Sans Arabic",
      "Segoe UI",
      Tahoma,
      Arial,
      sans-serif;
  
    /* Type Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 4rem;
  
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
  
    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 999px;
  
    /* Shadows */
    --shadow-sm:
      0 1px 2px rgba(11, 95, 127, 0.04),
      0 4px 14px rgba(11, 95, 127, 0.04);
  
    --shadow-md:
      0 8px 30px rgba(11, 95, 127, 0.08);
  
    /* Layout */
    --container: 1180px;
    --container-wide: 1360px;
  
    /* Motion */
    --duration-fast: 160ms;
    --duration-normal: 260ms;
    --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    background: var(--color-bg);
  }
  
  body {
    margin: 0;
    min-width: 320px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.8;
    direction: rtl;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Keep mixed Arabic/Latin content readable. The page is RTL, but values such
     as proposal codes, email addresses, URLs, and English product names must
     retain their natural left-to-right order. */
  :where(input, textarea, select, button) {
    unicode-bidi: plaintext;
  }

  :where(input, textarea) {
    direction: auto;
    text-align: start;
  }

  :where(input[type="email"], input[type="url"], input[type="tel"],
    input[type="password"], input[type="search"], input[autocomplete="one-time-code"], #code,
    .ltr, [dir="ltr"]) {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
  }

  :where(code, pre, kbd, samp, bdi, [dir="auto"]) {
    unicode-bidi: isolate;
  }

  /* Use this class for mixed labels such as PROP-026-V2 or SAR 68,500. */
  .bidi-isolate {
    unicode-bidi: isolate;
  }
  
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  
  button {
    cursor: pointer;
  }
  
  ::selection {
    background: color-mix(
      in srgb,
      var(--color-accent) 24%,
      transparent
    );
  }
  
  .container {
    width: min(
      calc(100% - 32px),
      var(--container)
    );
    margin-inline: auto;
  }
  
  .container-wide {
    width: min(
      calc(100% - 32px),
      var(--container-wide)
    );
    margin-inline: auto;
  }
  
  .section {
    padding-block: var(--space-20);
  }
  
  .section-sm {
    padding-block: var(--space-12);
  }
  
  .surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  
  .heading-xl {
    margin: 0;
    color: var(--color-primary-strong);
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
  }
  
  .heading-lg {
    margin: 0;
    color: var(--color-primary-strong);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.25;
  }
  
  .heading-md {
    margin: 0;
    color: var(--color-primary-strong);
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.35;
  }
  
  .text-lead {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1.9;
  }
  
  .text-muted {
    color: var(--color-text-muted);
  }
  
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 46px;
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition:
      transform var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }
  
  .button:hover {
    transform: translateY(-1px);
  }
  
  .button-primary {
    background: var(--color-primary);
    color: white;
  }
  
  .button-primary:hover {
    background: var(--color-primary-strong);
  }
  
  .button-secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-primary-strong);
  }
  
  .button-secondary:hover {
    border-color: var(--color-accent);
    background: var(--color-surface);
  }
  
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    background:
      color-mix(
        in srgb,
        var(--color-accent) 9%,
        white
      );
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
  }
  
  .gold-rule {
    width: 58px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-gold);
  }
  
  @media (max-width: 768px) {
    .container,
    .container-wide {
      width: min(
        calc(100% - 24px),
        var(--container)
      );
    }
  
    .section {
      padding-block: var(--space-12);
    }
  
    .heading-xl {
      font-size: clamp(2rem, 10vw, 3.25rem);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  .page-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; gap: 11px; align-content: center; background: #fff; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms ease; }
  .page-loader__brand { width: 68px; height: 44px; display: grid; place-items: center; opacity: .92; animation: loader-logo 1.2s ease-in-out infinite alternate; }
  .page-loader__brand img { width: 68px; height: 42px; object-fit: contain; filter: none; }
  .page-loader__line { position: relative; display: block; width: 76px; height: 2px; overflow: hidden; background: #e6edef; border-radius: 99px; box-shadow:none; }
  .page-loader__line i { position: absolute; inset-block: 0; right: -38%; display: block; width: 38%; border-radius: inherit; background: var(--color-accent); box-shadow:none; animation: loader-progress 1s ease-in-out infinite; }
  .js-ready:not(.page-loaded) .page-loader, .is-navigating .page-loader { opacity: 1; visibility: visible; }
  @keyframes loader-logo { from { transform: translateY(2px) scale(.97); opacity: .82; } to { transform: translateY(-2px) scale(1); opacity: 1; } }
  @keyframes loader-progress { 0% { right: -42%; } 55% { width: 55%; } 100% { right: 100%; width: 32%; } }
  [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 680ms var(--ease-standard), transform 680ms var(--ease-standard); }
  [data-reveal="fade-right"] { transform: translateX(22px); }
  [data-reveal="fade-left"] { transform: translateX(-22px); }
  [data-reveal].is-visible { opacity: 1; transform: none; }
  .button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 32%, transparent); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .page-loader__brand, .page-loader__line i { animation: none !important; }.page-loader__line i{right:0;width:62%;} [data-reveal] { opacity: 1 !important; transform: none !important; } }