@charset "UTF-8";
/* ==========================================================================
   منصة صناعة سورية — Syrian Industry Platform (SIP)
   Design System Core Stylesheet  ·  v1.0
   --------------------------------------------------------------------------
   Layers:  tokens → reset → primitives → layout → components → utilities
   Direction: RTL-first  ·  Theme: Light + Dark  ·  Grid: 8pt  ·  WCAG AA
   Brand source: شعار "صناعة سورية / SYRIAN MADE"
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- 1.1 Brand Palette — extracted from the official logo ---- */
  /* عنابي / Maroon — Primary */
  --sip-primary-50:  #FDF3F5;
  --sip-primary-100: #FAE3E8;
  --sip-primary-200: #F2C2CD;
  --sip-primary-300: #E39AAC;
  --sip-primary-400: #C96B84;
  --sip-primary-500: #A63F5B;
  --sip-primary-600: #85253F;
  --sip-primary-700: #64051C; /* ★ brand core */
  --sip-primary-800: #4E0416;
  --sip-primary-900: #380310;
  --sip-primary-950: #22020A;

  /* ذهبي رملي / Sand Gold — Secondary */
  --sip-gold-50:  #FBF8F2;
  --sip-gold-100: #F6EFE1;
  --sip-gold-200: #EBDCC0;
  --sip-gold-300: #DDC59A;
  --sip-gold-400: #CDAE7E;
  --sip-gold-500: #BC9761; /* ★ brand core */
  --sip-gold-600: #A07C4B;
  --sip-gold-700: #7E603A;
  --sip-gold-800: #5C452A;
  --sip-gold-900: #3B2C1B;

  /* طوبي / Terracotta — Accent */
  --sip-clay-50:  #FDF4F1;
  --sip-clay-100: #FAE5DE;
  --sip-clay-200: #F2C4B4;
  --sip-clay-300: #E69C82;
  --sip-clay-400: #D66F4C;
  --sip-clay-500: #BF4A26; /* ★ brand core */
  --sip-clay-600: #9E3C1E;
  --sip-clay-700: #7C2E17;
  --sip-clay-800: #5A2110;
  --sip-clay-900: #3A150A;

  /* زيتي / Olive — Accent */
  --sip-olive-50:  #F7F8F1;
  --sip-olive-100: #EDEFDF;
  --sip-olive-200: #D7DBB8;
  --sip-olive-300: #BDC48D;
  --sip-olive-400: #9AA35F;
  --sip-olive-500: #7A8340;
  --sip-olive-600: #63692F;
  --sip-olive-700: #505523; /* ★ brand core */
  --sip-olive-800: #3C401A;
  --sip-olive-900: #282B11;

  /* بني / Earth Brown */
  --sip-earth-100: #EFE4DA;
  --sip-earth-300: #C2A288;
  --sip-earth-500: #8B5A32;
  --sip-earth-700: #572D0D; /* ★ brand core */
  --sip-earth-900: #331A08;

  /* وردي فاتح / Blush */
  --sip-blush-100: #F7EEE9;
  --sip-blush-300: #E8CFC3;
  --sip-blush-500: #D8B9A7; /* ★ brand core */
  --sip-blush-700: #B08D77;

  /* ---- 1.2 Warm Neutrals ---- */
  --sip-n-0:   #FFFFFF;
  --sip-n-25:  #FDFCFB;
  --sip-n-50:  #FAF8F6;
  --sip-n-100: #F4F1ED;
  --sip-n-200: #E7E2DC;
  --sip-n-300: #D4CDC4;
  --sip-n-400: #A9A199;
  --sip-n-500: #7E7770;
  --sip-n-600: #5D5751;
  --sip-n-700: #453F3B;
  --sip-n-800: #2C2825;
  --sip-n-900: #1B1816;
  --sip-n-950: #110F0E;

  /* ---- 1.3 Semantic status (harmonised with brand hues) ---- */
  --sip-success:      #4F7A3A;
  --sip-success-soft: #EDF4E7;
  --sip-warning:      #B37A16;
  --sip-warning-soft: #FBF2DF;
  --sip-danger:       #A32B22;
  --sip-danger-soft:  #FBEBE9;
  --sip-info:         #2F5D78;
  --sip-info-soft:    #E8F1F6;

  /* ---- 1.4 Semantic surface roles (LIGHT THEME) ---- */
  --sip-bg:            var(--sip-n-50);
  --sip-bg-alt:        var(--sip-n-100);
  --sip-surface:       var(--sip-n-0);
  --sip-surface-raised:var(--sip-n-0);
  --sip-surface-sunken: var(--sip-n-100);
  --sip-overlay:       rgba(27, 24, 22, .48);
  --sip-glass:         rgba(255, 255, 255, .72);
  --sip-glass-brd:     rgba(255, 255, 255, .55);

  --sip-text:          var(--sip-n-900);
  --sip-text-soft:     var(--sip-n-600);
  --sip-text-mute:     var(--sip-n-500);
  --sip-text-invert:   var(--sip-n-0);
  --sip-text-brand:    var(--sip-primary-700);

  --sip-border:        var(--sip-n-200);
  --sip-border-strong: var(--sip-n-300);
  --sip-border-brand:  var(--sip-primary-200);

  --sip-accent:        var(--sip-primary-700);
  --sip-accent-hover:  var(--sip-primary-800);
  --sip-accent-soft:   var(--sip-primary-50);
  --sip-on-accent:     #FFFFFF;
  --sip-ring:          rgba(100, 5, 28, .28);

  /* ---- 1.5 Gradients ---- */
  --sip-grad-brand:  linear-gradient(135deg, #7C0A24 0%, #64051C 45%, #380310 100%);
  --sip-grad-royal:  linear-gradient(140deg, #64051C 0%, #7C2E17 55%, #572D0D 100%);
  --sip-grad-gold:   linear-gradient(135deg, #DDC59A 0%, #BC9761 55%, #7E603A 100%);
  --sip-grad-clay:   linear-gradient(135deg, #D66F4C 0%, #BF4A26 100%);
  --sip-grad-olive:  linear-gradient(135deg, #7A8340 0%, #505523 100%);
  --sip-grad-dawn:   linear-gradient(120deg, #64051C 0%, #9E3C1E 40%, #BC9761 100%);
  --sip-grad-mesh:
      radial-gradient(1100px 620px at 88% -12%, rgba(188,151,97,.30), transparent 62%),
      radial-gradient(880px 560px at 6% 6%,   rgba(191,74,38,.20),  transparent 60%),
      radial-gradient(760px 620px at 52% 112%, rgba(80,85,35,.20),  transparent 62%);
  --sip-grad-sheen:  linear-gradient(100deg, transparent 8%, rgba(255,255,255,.42) 46%, transparent 84%);
  --sip-grad-line:   linear-gradient(90deg, transparent, var(--sip-gold-500), transparent);

  /* ---- 1.6 Elevation (soft, warm-tinted) ---- */
  --sip-sh-xs: 0 1px 2px rgba(43,29,24,.06);
  --sip-sh-sm: 0 1px 3px rgba(43,29,24,.07), 0 1px 2px rgba(43,29,24,.05);
  --sip-sh-md: 0 4px 10px -2px rgba(43,29,24,.08), 0 2px 6px -2px rgba(43,29,24,.05);
  --sip-sh-lg: 0 12px 26px -6px rgba(43,29,24,.11), 0 6px 12px -6px rgba(43,29,24,.06);
  --sip-sh-xl: 0 24px 48px -12px rgba(43,29,24,.16), 0 10px 20px -10px rgba(43,29,24,.07);
  --sip-sh-2xl:0 40px 84px -20px rgba(43,29,24,.22);
  --sip-sh-brand: 0 14px 32px -10px rgba(100,5,28,.42);
  --sip-sh-gold:  0 14px 32px -10px rgba(188,151,97,.45);
  --sip-sh-inner: inset 0 1px 0 rgba(255,255,255,.65);

  /* ---- 1.7 Typography ---- */
  --sip-font-ar: "IBM Plex Sans Arabic", "Tajawal", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
  --sip-font-en: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --sip-font-num: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-monospace, system-ui, sans-serif;
  --sip-font: var(--sip-font-ar);

  /* Fluid type scale — clamp() driven, 1.25 major-third ratio */
  --sip-fs-2xs: clamp(.688rem, .66rem + .12vw, .75rem);
  --sip-fs-xs:  clamp(.75rem,  .72rem + .14vw, .8125rem);
  --sip-fs-sm:  clamp(.8125rem,.79rem + .16vw, .875rem);
  --sip-fs-md:  clamp(.9375rem,.91rem + .18vw, 1rem);
  --sip-fs-lg:  clamp(1.0625rem, 1.02rem + .24vw, 1.1875rem);
  --sip-fs-xl:  clamp(1.1875rem, 1.11rem + .38vw, 1.4375rem);
  --sip-fs-2xl: clamp(1.4375rem, 1.30rem + .62vw, 1.875rem);
  --sip-fs-3xl: clamp(1.75rem,   1.52rem + 1.05vw, 2.5rem);
  --sip-fs-4xl: clamp(2.125rem,  1.72rem + 1.85vw, 3.375rem);
  --sip-fs-5xl: clamp(2.5rem,    1.85rem + 3.00vw, 4.5rem);
  --sip-fs-6xl: clamp(3rem,      2.00rem + 4.60vw, 6rem);

  --sip-lh-tight: 1.18;
  --sip-lh-snug:  1.35;
  --sip-lh-base:  1.7;
  --sip-lh-loose: 1.9;
  --sip-ls-tight: -0.02em;
  --sip-ls-wide:  0.06em;

  --sip-fw-light: 300;
  --sip-fw-reg:   400;
  --sip-fw-med:   500;
  --sip-fw-semi:  600;
  --sip-fw-bold:  700;

  /* ---- 1.8 Spacing — 8pt grid ---- */
  --sip-s-0: 0;
  --sip-s-1: .25rem;   /*  4 */
  --sip-s-2: .5rem;    /*  8 */
  --sip-s-3: .75rem;   /* 12 */
  --sip-s-4: 1rem;     /* 16 */
  --sip-s-5: 1.5rem;   /* 24 */
  --sip-s-6: 2rem;     /* 32 */
  --sip-s-7: 2.5rem;   /* 40 */
  --sip-s-8: 3rem;     /* 48 */
  --sip-s-9: 4rem;     /* 64 */
  --sip-s-10: 5rem;    /* 80 */
  --sip-s-11: 6rem;    /* 96 */
  --sip-s-12: 8rem;    /* 128 */
  --sip-section: clamp(3.5rem, 2.2rem + 5vw, 7.5rem);

  /* ---- 1.9 Radii ---- */
  --sip-r-xs: 6px;
  --sip-r-sm: 10px;
  --sip-r-md: 14px;
  --sip-r-lg: 20px;
  --sip-r-xl: 28px;
  --sip-r-2xl: 36px;
  --sip-r-pill: 999px;

  /* ---- 1.10 Motion ---- */
  --sip-ease:        cubic-bezier(.4, 0, .2, 1);
  --sip-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --sip-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --sip-t-fast: 140ms;
  --sip-t-base: 240ms;
  --sip-t-slow: 420ms;
  --sip-t-lazy: 760ms;

  /* ---- 1.11 Layout ---- */
  --sip-container: 1320px;
  --sip-container-wide: 1680px;
  --sip-gutter: clamp(1rem, .55rem + 2vw, 2.5rem);
  --sip-header-h: 64px;
  --sip-topbar-h: 38px;
  --sip-sidebar-w: 280px;
  --sip-z-base: 1;
  --sip-z-sticky: 100;
  --sip-z-header: 200;
  --sip-z-dropdown: 300;
  --sip-z-overlay: 400;
  --sip-z-modal: 500;
  --sip-z-toast: 600;
}

/* ---- 1.12 DARK THEME ---- */
[data-theme="dark"] {
  --sip-bg:            #14100F;
  --sip-bg-alt:        #191413;
  --sip-surface:       #1F1918;
  --sip-surface-raised:#261F1D;
  --sip-surface-sunken: #120E0D;
  --sip-overlay:       rgba(0,0,0,.66);
  --sip-glass:         rgba(38, 31, 29, .70);
  --sip-glass-brd:     rgba(255, 255, 255, .10);

  --sip-text:          #F5F0EC;
  --sip-text-soft:     #C3B9B2;
  --sip-text-mute:     #948A83;
  --sip-text-invert:   #14100F;
  --sip-text-brand:    var(--sip-gold-400);

  --sip-border:        #332B29;
  --sip-border-strong: #463C39;
  --sip-border-brand:  #5A2233;

  --sip-accent:        var(--sip-gold-500);
  --sip-accent-hover:  var(--sip-gold-400);
  --sip-accent-soft:   rgba(188,151,97,.14);
  --sip-on-accent:     #201206;
  --sip-ring:          rgba(188,151,97,.34);

  --sip-success-soft: rgba(79,122,58,.18);
  --sip-warning-soft: rgba(179,122,22,.18);
  --sip-danger-soft:  rgba(163,43,34,.20);
  --sip-info-soft:    rgba(47,93,120,.20);
  --sip-success: #7FB05F; --sip-warning: #E0A63C; --sip-danger: #E0685C; --sip-info: #6FA8C9;

  --sip-grad-mesh:
      radial-gradient(1100px 620px at 88% -12%, rgba(188,151,97,.16), transparent 62%),
      radial-gradient(880px 560px at 6% 6%,   rgba(191,74,38,.13),  transparent 60%),
      radial-gradient(760px 620px at 52% 112%, rgba(80,85,35,.13),  transparent 62%);
  --sip-grad-sheen:  linear-gradient(100deg, transparent 8%, rgba(255,255,255,.10) 46%, transparent 84%);

  --sip-sh-xs: 0 1px 2px rgba(0,0,0,.40);
  --sip-sh-sm: 0 1px 3px rgba(0,0,0,.46), 0 1px 2px rgba(0,0,0,.34);
  --sip-sh-md: 0 4px 10px -2px rgba(0,0,0,.50), 0 2px 6px -2px rgba(0,0,0,.36);
  --sip-sh-lg: 0 12px 26px -6px rgba(0,0,0,.58), 0 6px 12px -6px rgba(0,0,0,.40);
  --sip-sh-xl: 0 24px 48px -12px rgba(0,0,0,.66), 0 10px 20px -10px rgba(0,0,0,.44);
  --sip-sh-2xl:0 40px 84px -20px rgba(0,0,0,.72);
  --sip-sh-inner: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sip-header-h) + 24px);
  tab-size: 4;
}

body {
  font-family: var(--sip-font);
  font-size: var(--sip-fs-md);
  line-height: var(--sip-lh-base);
  font-weight: var(--sip-fw-reg);
  color: var(--sip-text);
  background: var(--sip-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
  transition: background-color var(--sip-t-base) var(--sip-ease),
              color var(--sip-t-base) var(--sip-ease);
}

:lang(en), .sip-en { font-family: var(--sip-font-en); }
[dir="ltr"] { direction: ltr; text-align: left; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; background: var(--sip-n-100); }
[data-theme="dark"] img { background: var(--sip-surface-raised); }

button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1,h2,h3,h4,h5,h6 { font-weight: var(--sip-fw-bold); line-height: var(--sip-lh-tight); letter-spacing: var(--sip-ls-tight); }
h1 { font-size: var(--sip-fs-4xl); }
h2 { font-size: var(--sip-fs-3xl); }
h3 { font-size: var(--sip-fs-2xl); }
h4 { font-size: var(--sip-fs-xl); }
h5 { font-size: var(--sip-fs-lg); }
h6 { font-size: var(--sip-fs-md); }

::selection { background: var(--sip-primary-700); color: #fff; }
[data-theme="dark"] ::selection { background: var(--sip-gold-500); color: #201206; }

:focus-visible {
  outline: 3px solid var(--sip-ring);
  outline-offset: 2px;
  border-radius: var(--sip-r-xs);
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--sip-n-300) transparent; }
[data-theme="dark"] * { scrollbar-color: var(--sip-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sip-n-300); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sip-n-400); background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sip-border-strong); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.sip-container { width: 100%; max-width: var(--sip-container); margin-inline: auto; padding-inline: var(--sip-gutter); }
.sip-container--wide { max-width: var(--sip-container-wide); }
.sip-container--narrow { max-width: 900px; }

.sip-section { padding-block: var(--sip-section); position: relative; }
.sip-section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.sip-section--alt { background: var(--sip-bg-alt); }
.sip-section--sunken { background: var(--sip-surface-sunken); }

.sip-grid { display: grid; gap: var(--sip-s-5); }
.sip-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sip-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sip-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sip-grid--6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.sip-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.sip-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr)); }
.sip-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(360px,100%), 1fr)); }

.sip-flex { display: flex; gap: var(--sip-s-4); }
.sip-flex--center { align-items: center; }
.sip-flex--between { justify-content: space-between; align-items: center; }
.sip-flex--wrap { flex-wrap: wrap; }
.sip-flex--col { flex-direction: column; }
.sip-stack > * + * { margin-block-start: var(--sip-s-4); }

/* Asymmetric split — columns supplied via the --split custom property so the
   responsive collapse below can still win over any inline value. */
.sip-split { display: grid; gap: var(--sip-s-6); grid-template-columns: var(--split, 1fr 1fr); }
.sip-split--center { align-items: center; }
@media (max-width: 1000px) { .sip-split { grid-template-columns: 1fr; } }

/* Cartogram tile grid */
.sip-carto { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sip-s-3); }
@media (max-width: 760px) {
  .sip-carto { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sip-carto > * { grid-column: auto !important; }
  .sip-carto > :empty { display: none; }
}

@media (max-width: 1100px) {
  .sip-grid--4, .sip-grid--6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sip-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .sip-grid--2, .sip-grid--3, .sip-grid--4, .sip-grid--6 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. SECTION HEADINGS & EYEBROWS
   ========================================================================== */
.sip-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sip-s-2);
  font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi);
  letter-spacing: var(--sip-ls-wide); color: var(--sip-text-brand);
  text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--sip-r-pill);
  background: var(--sip-accent-soft);
  border: 1px solid var(--sip-border-brand);
}
.sip-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.sip-sec-head { max-width: 760px; margin-block-end: var(--sip-s-8); }
.sip-sec-head--center { margin-inline: auto; text-align: center; }
.sip-sec-head__title { font-size: var(--sip-fs-3xl); margin-block: var(--sip-s-4) var(--sip-s-3); }
.sip-sec-head__title em { font-style: normal; color: var(--sip-text-brand); }
.sip-sec-head__sub { color: var(--sip-text-soft); font-size: var(--sip-fs-lg); line-height: var(--sip-lh-base); }

.sip-sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sip-s-6); max-width: none; }
@media (max-width: 760px) { .sip-sec-head--split { flex-direction: column; align-items: stretch; } }

.sip-rule { height: 1px; background: var(--sip-grad-line); border: 0; opacity: .5; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.sip-btn {
  --_bg: var(--sip-surface); --_fg: var(--sip-text); --_bd: var(--sip-border);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sip-s-2); white-space: nowrap;
  padding: .75rem 1.5rem; min-height: 46px;
  font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); line-height: 1;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd); border-radius: var(--sip-r-pill);
  transition: transform var(--sip-t-fast) var(--sip-ease),
              box-shadow var(--sip-t-base) var(--sip-ease),
              background-color var(--sip-t-base) var(--sip-ease),
              border-color var(--sip-t-base) var(--sip-ease),
              color var(--sip-t-base) var(--sip-ease);
  overflow: hidden; isolation: isolate; user-select: none;
}
.sip-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sip-grad-sheen); transform: translateX(-140%);
  transition: transform var(--sip-t-lazy) var(--sip-ease-out);
}
.sip-btn:hover::after { transform: translateX(140%); }
.sip-btn:hover { transform: translateY(-2px); }
.sip-btn:active { transform: translateY(0) scale(.985); }
.sip-btn:disabled, .sip-btn[aria-disabled="true"] { opacity: .48; pointer-events: none; }
.sip-btn svg { width: 18px; height: 18px; flex: none; }

.sip-btn--primary { --_bg: var(--sip-primary-700); --_fg: #fff; --_bd: transparent; background: var(--sip-grad-brand); box-shadow: var(--sip-sh-brand); }
.sip-btn--primary:hover { box-shadow: 0 18px 40px -12px rgba(100,5,28,.55); }
[data-theme="dark"] .sip-btn--primary { background: var(--sip-grad-gold); color: #201206; box-shadow: var(--sip-sh-gold); }

.sip-btn--gold { --_fg: #2A1B08; --_bd: transparent; background: var(--sip-grad-gold); box-shadow: var(--sip-sh-gold); }
.sip-btn--export { --_fg: #fff; --_bd: transparent; background: linear-gradient(135deg, var(--_g-800, #0E3A22), var(--_g-600, #1A6B38)); box-shadow: 0 14px 32px -10px rgba(19,84,44,.5); }
.sip-btn--export:hover { filter: brightness(1.07); box-shadow: 0 18px 40px -12px rgba(19,84,44,.6); }
.sip-btn--export svg { color: var(--sip-gold-300, #E2C77E); }
.sip-btn--clay { --_fg: #fff; --_bd: transparent; background: var(--sip-grad-clay); box-shadow: 0 14px 32px -10px rgba(191,74,38,.44); }

.sip-btn--outline { --_bg: transparent; --_fg: var(--sip-text-brand); --_bd: var(--sip-border-brand); }
.sip-btn--outline:hover { --_bg: var(--sip-accent-soft); --_bd: var(--sip-accent); }

.sip-btn--ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--sip-text-soft); }
.sip-btn--ghost:hover { --_bg: var(--sip-bg-alt); --_fg: var(--sip-text); }

.sip-btn--glass {
  --_bg: var(--sip-glass); --_fg: var(--sip-text); --_bd: var(--sip-glass-brd);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.sip-btn--on-dark { --_bg: rgba(255,255,255,.12); --_fg: #fff; --_bd: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sip-btn--on-dark:hover { --_bg: rgba(255,255,255,.20); }

.sip-btn--sm { padding: .5rem 1rem; min-height: 36px; font-size: var(--sip-fs-xs); }
.sip-btn--lg { padding: 1rem 2.1rem; min-height: 56px; font-size: var(--sip-fs-md); }
.sip-btn--block { width: 100%; }
.sip-btn--icon { padding: 0; width: 44px; min-height: 44px; border-radius: 50%; }
.sip-btn--icon.sip-btn--sm { width: 36px; min-height: 36px; }

.sip-btn-group { display: inline-flex; gap: var(--sip-s-3); flex-wrap: wrap; }

/* ==========================================================================
   6. BADGES · CHIPS · TAGS
   ========================================================================== */
.sip-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--sip-r-pill);
  font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi); line-height: 1.6;
  background: var(--sip-bg-alt); color: var(--sip-text-soft);
  border: 1px solid var(--sip-border);
}
.sip-badge--brand   { background: var(--sip-accent-soft); color: var(--sip-text-brand); border-color: var(--sip-border-brand); }
.sip-badge--success { background: var(--sip-success-soft); color: var(--sip-success); border-color: color-mix(in srgb, var(--sip-success) 26%, transparent); }
.sip-badge--warning { background: var(--sip-warning-soft); color: var(--sip-warning); border-color: color-mix(in srgb, var(--sip-warning) 26%, transparent); }
.sip-badge--danger  { background: var(--sip-danger-soft);  color: var(--sip-danger);  border-color: color-mix(in srgb, var(--sip-danger) 26%, transparent); }
.sip-badge--info    { background: var(--sip-info-soft);    color: var(--sip-info);    border-color: color-mix(in srgb, var(--sip-info) 26%, transparent); }
.sip-badge--gold    { background: var(--sip-gold-100); color: var(--sip-gold-700); border-color: var(--sip-gold-200); }
.sip-badge--olive   { background: var(--sip-olive-100); color: var(--sip-olive-700); border-color: var(--sip-olive-200); }
.sip-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sip-badge__dot--live { animation: sip-pulse 2s var(--sip-ease) infinite; }

.sip-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .5rem 1rem; border-radius: var(--sip-r-pill);
  font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-med);
  background: var(--sip-surface); color: var(--sip-text-soft);
  border: 1px solid var(--sip-border); cursor: pointer;
  transition: all var(--sip-t-base) var(--sip-ease);
}
.sip-chip:hover { border-color: var(--sip-accent); color: var(--sip-text); transform: translateY(-1px); box-shadow: var(--sip-sh-sm); }
.sip-chip[aria-pressed="true"], .sip-chip.is-active {
  background: var(--sip-accent); color: var(--sip-on-accent); border-color: transparent; box-shadow: var(--sip-sh-md);
}
.sip-chip--on-dark {
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sip-chip--on-dark:hover { background: rgba(255,255,255,.20); color: #fff; border-color: rgba(255,255,255,.38); }

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.sip-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--sip-surface);
  border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-lg);
  box-shadow: var(--sip-sh-sm);
  overflow: hidden;
  transition: transform var(--sip-t-base) var(--sip-ease-out),
              box-shadow var(--sip-t-base) var(--sip-ease),
              border-color var(--sip-t-base) var(--sip-ease);
}
.sip-card__body { padding: var(--sip-s-5); display: flex; flex-direction: column; gap: var(--sip-s-3); flex: 1; }
.sip-card__head { padding: var(--sip-s-5) var(--sip-s-5) 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sip-s-3); }
.sip-card__foot { padding: var(--sip-s-4) var(--sip-s-5); border-block-start: 1px solid var(--sip-border); background: var(--sip-bg-alt); display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); }
.sip-card__title { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: var(--sip-lh-snug); }
.sip-card__text { color: var(--sip-text-soft); font-size: var(--sip-fs-sm); }
.sip-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sip-bg-alt); }
.sip-card__media img { width: 100%; height: 100%; transition: transform var(--sip-t-lazy) var(--sip-ease-out); }
.sip-card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(27,24,22,.55), transparent 58%); opacity: 0; transition: opacity var(--sip-t-base) var(--sip-ease); }

.sip-card--hover:hover { transform: translateY(-6px); box-shadow: var(--sip-sh-xl); border-color: var(--sip-border-brand); }
.sip-card--hover:hover .sip-card__media img { transform: scale(1.07); }
.sip-card--hover:hover .sip-card__media::after { opacity: 1; }

.sip-card--flush { box-shadow: none; }
.sip-card--raised { box-shadow: var(--sip-sh-lg); border-color: transparent; }
.sip-card--outline { box-shadow: none; background: transparent; }

.sip-card--glass {
  background: var(--sip-glass); border-color: var(--sip-glass-brd);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: var(--sip-sh-lg), var(--sip-sh-inner);
}

/* Gradient border card */
.sip-card--edge { border-color: transparent; background:
    linear-gradient(var(--sip-surface), var(--sip-surface)) padding-box,
    var(--sip-grad-dawn) border-box;
  border: 1px solid transparent; }

/* Accent bar on inline-start */
.sip-card--bar::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: var(--sip-grad-brand); opacity: 0; transition: opacity var(--sip-t-base) var(--sip-ease);
}
.sip-card--bar:hover::before, .sip-card--bar.is-active::before { opacity: 1; }

/* ==========================================================================
   7c. PRODUCT STORY — قصة المنتج
   Immersive story overlay on product cards: 6-scene slideshow or uploaded
   video, glassmorphism UI, lazy-loaded, counted views.
   ========================================================================== */
.sip-story__trigger {
  position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px; border-radius: var(--sip-r-pill);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(12,10,8,.42);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  color: #fff; cursor: pointer; font-family: inherit;
  transition: transform var(--sip-t-base) var(--sip-ease), background var(--sip-t-base) var(--sip-ease), box-shadow var(--sip-t-base) var(--sip-ease);
}
.sip-story__trigger:hover { transform: translateY(-2px); background: rgba(80,85,35,.86); box-shadow: var(--sip-sh-md); }
.sip-story__trigger-ico {
  width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--sip-gold-500); color: #2A1B08;
}
.sip-story__trigger-ico svg { width: 12px; height: 12px; }
.sip-story__trigger-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: start; font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi); }
.sip-story__trigger-txt small { font-size: 10px; font-weight: 400; opacity: .72; }
@media (hover: none) {
  .sip-story__trigger { bottom: 10px; inset-inline-end: 10px; }
}

.sip-story {
  position: absolute; inset: 0; z-index: 40;
  display: none; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, rgba(40,43,17,.88) 0%, rgba(80,85,35,.62) 48%, rgba(100,5,28,.55) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
}
.sip-story.is-open { display: flex; animation: sip-story-in .38s var(--sip-ease) both; }
@keyframes sip-story-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

.sip-story__stage { position: absolute; inset: 0; }
.sip-story__video, .sip-story__slide { position: absolute; inset: 0; width: 100%; height: 100%; }
.sip-story__video { object-fit: cover; background: #000; }

.sip-story__slide {
  display: flex; align-items: flex-end;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  opacity: 0; transform: scale(1.07);
  transition: opacity .75s var(--sip-ease), transform .75s var(--sip-ease);
  pointer-events: none;
}
.sip-story__slide.is-active { opacity: 1; transform: scale(1); }
.sip-story__slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sip-story__slide-scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(12,10,8,.82) 0%, rgba(12,10,8,.25) 45%, rgba(12,10,8,.05) 70%),
  radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(12,10,8,.35) 100%); }
.sip-story__slide-copy { position: relative; z-index: 2; max-width: 460px; }
.sip-story__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: var(--sip-fs-2xs);
  font-weight: var(--sip-fw-semi); letter-spacing: .04em; color: var(--sip-gold-300);
  padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(221,197,154,.4);
  background: rgba(12,10,8,.35); margin-block-end: 10px; }
.sip-story__kicker svg { width: 14px; height: 14px; }
.sip-story__slide-copy h4 { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: var(--sip-lh-snug); text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.sip-story__slide-copy p { margin-block-start: 6px; font-size: var(--sip-fs-xs); color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.sip-story__slide--final { align-items: center; justify-content: center; text-align: center; }
.sip-story__slide--final .sip-story__slide-copy { max-width: none; }
.sip-story__seal { width: 64px; height: 64px; margin: 0 auto 14px; color: var(--sip-gold-400); filter: drop-shadow(0 4px 18px rgba(0,0,0,.4)); }
.sip-story__slide--final h4 { font-size: clamp(1.15rem, 2.6vw, 1.6rem); }
.sip-story__slide--final .sip-story__en { display: block; margin-block-start: 6px; font-size: var(--sip-fs-xs); color: var(--sip-gold-300); letter-spacing: .03em; }

.sip-story__prog { position: absolute; inset-inline: 0; top: 0; z-index: 3; display: flex; gap: 4px; padding: 12px 12px 8px; }
.sip-story__seg { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; }
.sip-story__seg i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sip-gold-400); }

.sip-story__top { position: absolute; inset-inline: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 26px 14px 10px; }
.sip-story__brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi); color: #fff;
  padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.26); background: rgba(12,10,8,.4); }
.sip-story__brand svg { width: 14px; height: 14px; color: var(--sip-gold-300); }
.sip-story__lang { display: inline-flex; gap: 4px; }
.sip-story__lang button { font-family: inherit; font-size: var(--sip-fs-2xs); color: rgba(255,255,255,.8); background: rgba(12,10,8,.35);
  border: 1px solid rgba(255,255,255,.22); border-radius: 99px; padding: 4px 9px; cursor: pointer; }
.sip-story__lang button.is-active { background: var(--sip-gold-500); color: #2A1B08; border-color: transparent; }

.sip-story__bar { position: absolute; inset-inline: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 14px 12px 12px;
  background: linear-gradient(to top, rgba(12,10,8,.62), transparent); }
.sip-story__ctl {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-family: inherit;
  transition: background var(--sip-t-base) var(--sip-ease), transform var(--sip-t-base) var(--sip-ease);
}
.sip-story__ctl:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.sip-story__ctl svg { width: 15px; height: 15px; }
.sip-story__ctl--gold { background: var(--sip-gold-500); color: #2A1B08; border-color: transparent; }
.sip-story__ctl--gold:hover { background: var(--sip-gold-400); }
.sip-story__cta { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; font-size: var(--sip-fs-xs);
  font-weight: var(--sip-fw-med); color: #fff; padding: 7px 13px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(80,85,35,.72); cursor: pointer; font-family: inherit; }
.sip-story__cta:hover { background: rgba(80,85,35,.95); }
.sip-story__cta svg { width: 14px; height: 14px; }
.sip-story__views { position: absolute; inset-inline-end: 14px; top: 30px; z-index: 4; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: rgba(255,255,255,.75); background: rgba(12,10,8,.35); padding: 4px 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); }
.sip-story__views svg { width: 12px; height: 12px; color: var(--sip-gold-300); }
.sip-story__close { position: absolute; inset-inline-end: 10px; top: 10px; z-index: 5; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: rgba(12,10,8,.42); color: #fff; cursor: pointer; }
.sip-story__close:hover { background: rgba(255,255,255,.22); }
.sip-story__close svg { width: 15px; height: 15px; }
.sip-story__badge { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi); color: #fff; background: rgba(12,10,8,.42);
  border: 1px solid rgba(255,255,255,.2); padding: 6px 11px; border-radius: 99px; }
.sip-story__badge svg { width: 14px; height: 14px; color: var(--sip-gold-300); }

@media (prefers-reduced-motion: reduce) {
  .sip-story__slide { transition: opacity .2s linear; transform: none; }
  .sip-story.is-open { animation: none; }
}

/* Fullscreen story dialog (video or scenes) */
.sip-story--full { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(12,10,8,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sip-story--full.is-open { animation: sip-story-in .3s var(--sip-ease) both; }
.sip-story__fullcard { position: relative; width: min(980px, 92vw); aspect-ratio: 16/9; border-radius: var(--sip-r-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); box-shadow: var(--sip-sh-xl); background: #000; }
.sip-story__fullcard .sip-story__stage { position: absolute; inset: 0; }
.sip-story__fullcard .sip-story__slide { align-items: center; justify-content: center; }
.sip-story__fullcard .sip-story__slide-copy { max-width: 640px; text-align: center; }
.sip-story__fullcard .sip-story__slide-copy h4 { font-size: clamp(1.3rem, 3vw, 2rem); }
.sip-story__fullcard .sip-story__slide-copy p { font-size: var(--sip-fs-sm); }
.sip-story__fullcard .sip-story__kicker { margin-block-end: 14px; }
.sip-story__fullcard .sip-story__seal { width: 84px; height: 84px; }

@media (max-width: 680px) {
  .sip-story__trigger-txt small { display: none; }
  .sip-story__cta span { display: none; }
  .sip-story__fullcard { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
}

/* ==========================================================================
   7b. SERVICE CARD — "Government Premium"
   Equal-height tiles, brand-derived gradients, restrained motion.
   ========================================================================== */
.sip-svc-grid {
  display: grid; gap: var(--sip-s-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1400px) { .sip-svc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1040px) { .sip-svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px)  { .sip-svc-grid { grid-template-columns: 1fr; } }

.sip-svc {
  --_g: var(--sip-grad-brand);
  --_tint: 100, 5, 28;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sip-s-4);
  min-height: 286px; padding: var(--sip-s-6);
  background: var(--sip-surface);
  border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-lg);
  box-shadow: var(--sip-sh-xs);
  transition: transform var(--sip-t-base) var(--sip-ease-out),
              box-shadow var(--sip-t-base) var(--sip-ease),
              border-color var(--sip-t-base) var(--sip-ease);
}

/* Soft corner wash that blooms on hover */
.sip-svc::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: -30%; inset-inline-end: -18%;
  width: 240px; height: 240px; border-radius: 50%;
  background: var(--_g); opacity: .06; filter: blur(10px);
  transition: opacity var(--sip-t-slow) var(--sip-ease),
              transform var(--sip-t-slow) var(--sip-ease-out);
}
/* Hairline of brand gradient that draws across the top edge */
.sip-svc::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: var(--_g); transform: scaleX(0); transform-origin: var(--sip-svc-origin, right);
  transition: transform var(--sip-t-slow) var(--sip-ease-out);
}
[dir="ltr"] .sip-svc { --sip-svc-origin: left; }

.sip-svc:hover, .sip-svc:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px -16px rgba(var(--_tint), .26), var(--sip-sh-lg);
  border-color: color-mix(in srgb, rgb(var(--_tint)) 26%, var(--sip-border));
}
.sip-svc:hover::before, .sip-svc:focus-within::before { opacity: .17; transform: scale(1.14); }
.sip-svc:hover::after,  .sip-svc:focus-within::after  { transform: scaleX(1); }

/* Ghost ordinal, sits behind the content */
.sip-svc__num {
  position: absolute; inset-block-start: var(--sip-s-4); inset-inline-end: var(--sip-s-5);
  z-index: -1; font-family: var(--sip-font-en); font-weight: 700;
  font-size: 3.25rem; line-height: 1; letter-spacing: -.04em;
  color: var(--sip-text); opacity: .05;
  transition: opacity var(--sip-t-slow) var(--sip-ease), transform var(--sip-t-slow) var(--sip-ease-out);
}
.sip-svc:hover .sip-svc__num { opacity: .09; transform: translateY(-4px); }

.sip-svc__ico {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--sip-r-md);
  background: var(--_g); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(var(--_tint), .55);
  transition: transform var(--sip-t-base) var(--sip-ease-spring),
              box-shadow var(--sip-t-base) var(--sip-ease);
}
.sip-svc__ico svg { width: 27px; height: 27px; }
.sip-svc:hover .sip-svc__ico {
  transform: translateY(-2px) scale(1.06) rotate(-4deg);
  box-shadow: 0 16px 30px -8px rgba(var(--_tint), .62);
}
[dir="ltr"] .sip-svc:hover .sip-svc__ico { transform: translateY(-2px) scale(1.06) rotate(4deg); }

.sip-svc__title {
  font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold);
  line-height: var(--sip-lh-snug); letter-spacing: var(--sip-ls-tight);
  transition: color var(--sip-t-base) var(--sip-ease);
}
.sip-svc:hover .sip-svc__title { color: var(--sip-text-brand); }

.sip-svc__desc {
  font-size: var(--sip-fs-sm); color: var(--sip-text-soft); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sip-svc__foot { margin-block-start: auto; padding-block-start: var(--sip-s-2); }

.sip-svc__cta {
  display: inline-flex; align-items: center; gap: var(--sip-s-2);
  font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi);
  color: var(--sip-text-brand);
  padding: .55rem 1.1rem; border-radius: var(--sip-r-pill);
  border: 1px solid var(--sip-border-brand); background: var(--sip-accent-soft);
  transition: background-color var(--sip-t-base) var(--sip-ease),
              color var(--sip-t-base) var(--sip-ease),
              border-color var(--sip-t-base) var(--sip-ease),
              box-shadow var(--sip-t-base) var(--sip-ease);
}
.sip-svc__cta svg { width: 16px; height: 16px; transition: transform var(--sip-t-base) var(--sip-ease-out); }
.sip-svc:hover .sip-svc__cta {
  background: var(--_g); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -6px rgba(var(--_tint), .55);
}
.sip-svc:hover .sip-svc__cta svg { transform: translateX(-5px); }
[dir="ltr"] .sip-svc:hover .sip-svc__cta svg { transform: translateX(5px); }

/* Accent variants — every colour is a direct brand derivative */
.sip-svc--brand { --_g: var(--sip-grad-brand); --_tint: 100, 5, 28; }
.sip-svc--gold  { --_g: var(--sip-grad-gold);  --_tint: 188, 151, 97; }
.sip-svc--clay  { --_g: var(--sip-grad-clay);  --_tint: 191, 74, 38; }
.sip-svc--olive { --_g: var(--sip-grad-olive); --_tint: 80, 85, 35; }
.sip-svc--earth { --_g: linear-gradient(135deg, #8B5A32 0%, #572D0D 100%); --_tint: 87, 45, 13; }
.sip-svc--dawn  { --_g: var(--sip-grad-dawn);  --_tint: 158, 60, 30; }
.sip-svc--gold .sip-svc__ico { color: #2A1B08; }

.sip-svc__tag {
  position: absolute; inset-block-start: var(--sip-s-5); inset-inline-end: var(--sip-s-5);
  font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi);
  padding: 3px 10px; border-radius: var(--sip-r-pill);
  background: var(--sip-bg-alt); color: var(--sip-text-mute);
  border: 1px solid var(--sip-border);
}

/* ==========================================================================
   8. STAT / KPI
   ========================================================================== */
.sip-stat {
  position: relative; padding: var(--sip-s-5);
  border-radius: var(--sip-r-lg); background: var(--sip-surface);
  border: 1px solid var(--sip-border); box-shadow: var(--sip-sh-sm);
  display: flex; flex-direction: column; gap: var(--sip-s-3);
  transition: all var(--sip-t-base) var(--sip-ease-out); overflow: hidden;
}
.sip-stat::after {
  content:""; position: absolute; inset-block-start: -40%; inset-inline-end: -20%;
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--sip-grad-gold); opacity: .07; filter: blur(6px);
  transition: opacity var(--sip-t-slow) var(--sip-ease);
}
.sip-stat:hover { transform: translateY(-4px); box-shadow: var(--sip-sh-lg); }
.sip-stat:hover::after { opacity: .16; }
.sip-stat__icon {
  width: 46px; height: 46px; border-radius: var(--sip-r-md);
  display: grid; place-items: center; color: var(--sip-on-accent);
  background: var(--sip-grad-brand); box-shadow: var(--sip-sh-md);
}
.sip-stat__icon svg { width: 22px; height: 22px; }
.sip-stat__icon--gold { background: var(--sip-grad-gold); color: #2A1B08; }
.sip-stat__icon--clay { background: var(--sip-grad-clay); color: #fff; }
.sip-stat__icon--olive{ background: var(--sip-grad-olive); color: #fff; }
.sip-stat__value {
  font-size: var(--sip-fs-3xl); font-weight: var(--sip-fw-bold);
  line-height: 1; letter-spacing: var(--sip-ls-tight);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.sip-stat__label { font-size: var(--sip-fs-sm); color: var(--sip-text-soft); font-weight: var(--sip-fw-med); }
.sip-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi); }
.sip-stat__delta--up { color: var(--sip-success); }
.sip-stat__delta--down { color: var(--sip-danger); }
.sip-stat__delta--flat { color: var(--sip-text-mute); }

/* ==========================================================================
   9. FORMS
   ========================================================================== */
.sip-field { display: flex; flex-direction: column; gap: var(--sip-s-2); }
.sip-label { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); color: var(--sip-text); }
.sip-label__req { color: var(--sip-danger); margin-inline-start: 3px; }
.sip-hint { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-error { font-size: var(--sip-fs-xs); color: var(--sip-danger); display: flex; align-items: center; gap: 5px; }

.sip-input, .sip-select, .sip-textarea {
  width: 100%; padding: .8rem 1.05rem; min-height: 48px;
  font-size: var(--sip-fs-sm); color: var(--sip-text);
  background: var(--sip-surface);
  border: 1px solid var(--sip-border); border-radius: var(--sip-r-sm);
  transition: border-color var(--sip-t-base) var(--sip-ease),
              box-shadow var(--sip-t-base) var(--sip-ease),
              background-color var(--sip-t-base) var(--sip-ease);
}
.sip-input::placeholder, .sip-textarea::placeholder { color: var(--sip-text-mute); }
.sip-input:hover, .sip-select:hover, .sip-textarea:hover { border-color: var(--sip-border-strong); }
.sip-input:focus, .sip-select:focus, .sip-textarea:focus {
  outline: none; border-color: var(--sip-accent); box-shadow: 0 0 0 4px var(--sip-ring);
}
.sip-input[aria-invalid="true"] { border-color: var(--sip-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sip-danger) 16%, transparent); }
.sip-textarea { min-height: 128px; resize: vertical; line-height: var(--sip-lh-base); }
.sip-select {
  appearance: none; padding-inline-end: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E7770' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 17px; background-position: left 1rem center;
}
[dir="ltr"] .sip-select { background-position: right 1rem center; }
[data-theme="dark"] .sip-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948A83' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

.sip-input-group { position: relative; display: flex; align-items: center; }
.sip-input-group .sip-input { padding-inline-start: 3rem; }
.sip-input-group__icon {
  position: absolute; inset-inline-start: 1rem; width: 19px; height: 19px;
  color: var(--sip-text-mute); pointer-events: none;
}

.sip-check { display: flex; align-items: flex-start; gap: var(--sip-s-3); cursor: pointer; font-size: var(--sip-fs-sm); }
.sip-check input { appearance: none; width: 21px; height: 21px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--sip-border-strong); border-radius: var(--sip-r-xs);
  background: var(--sip-surface); transition: all var(--sip-t-fast) var(--sip-ease); cursor: pointer; }
.sip-check input[type="radio"] { border-radius: 50%; }
.sip-check input:checked { background: var(--sip-accent); border-color: var(--sip-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat; }
.sip-check input:focus-visible { box-shadow: 0 0 0 4px var(--sip-ring); outline: none; }

.sip-switch { position: relative; display: inline-flex; align-items: center; gap: var(--sip-s-3); cursor: pointer; }
.sip-switch input { appearance: none; width: 46px; height: 26px; border-radius: 99px;
  background: var(--sip-n-300); transition: background-color var(--sip-t-base) var(--sip-ease); cursor: pointer; }
[data-theme="dark"] .sip-switch input { background: var(--sip-border-strong); }
.sip-switch input::after { content:""; position: absolute; inset-inline-start: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sip-sh-sm);
  transition: transform var(--sip-t-base) var(--sip-ease-spring); }
.sip-switch input:checked { background: var(--sip-accent); }
.sip-switch input:checked::after { transform: translateX(-20px); }
[dir="ltr"] .sip-switch input:checked::after { transform: translateX(20px); }

/* ==========================================================================
   10. TABLES
   ========================================================================== */
.sip-table-wrap {
  background: var(--sip-surface); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-lg); overflow: hidden; box-shadow: var(--sip-sh-sm);
}
.sip-table-scroll { overflow-x: auto; }
.sip-table { font-size: var(--sip-fs-sm); min-width: 640px; }
.sip-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: start; padding: .95rem 1.25rem;
  font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi);
  letter-spacing: .04em; color: var(--sip-text-mute); text-transform: uppercase;
  background: var(--sip-bg-alt); border-block-end: 1px solid var(--sip-border); white-space: nowrap;
}
.sip-table tbody td { padding: 1rem 1.25rem; border-block-end: 1px solid var(--sip-border); vertical-align: middle; }
.sip-table tbody tr { transition: background-color var(--sip-t-fast) var(--sip-ease); }
.sip-table tbody tr:hover { background: var(--sip-bg-alt); }
.sip-table tbody tr:last-child td { border-block-end: 0; }
.sip-table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--sip-bg-alt) 55%, transparent); }
.sip-table__num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; font-weight: var(--sip-fw-semi); }
.sip-table__strong { font-weight: var(--sip-fw-semi); color: var(--sip-text); }
.sip-table caption { caption-side: top; text-align: start; padding: var(--sip-s-5); font-weight: var(--sip-fw-bold); font-size: var(--sip-fs-lg); }

/* ==========================================================================
   11. HEADER · NAV · MEGA MENU
   ========================================================================== */
.sip-topbar {
  height: var(--sip-topbar-h); background: var(--sip-primary-950); color: rgba(255,255,255,.78);
  font-size: var(--sip-fs-2xs); display: flex; align-items: center;
}
.sip-topbar .sip-container { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-4); }
.sip-topbar a { color: rgba(255,255,255,.76); transition: color var(--sip-t-fast) var(--sip-ease); }
.sip-topbar a:hover { color: var(--sip-gold-400); }
.sip-topbar__gov { display: inline-flex; align-items: center; gap: 8px; }
.sip-topbar__links { display: flex; align-items: center; gap: var(--sip-s-5); }
@media (max-width: 900px) { .sip-topbar__links { display: none; } }

.sip-header {
  position: sticky; top: 0; z-index: var(--sip-z-header);
  background: var(--sip-glass); border-block-end: 1px solid var(--sip-border);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  transition: box-shadow var(--sip-t-base) var(--sip-ease), background-color var(--sip-t-base) var(--sip-ease);
}
.sip-header.is-stuck { box-shadow: var(--sip-sh-md); }
.sip-header__inner { height: var(--sip-header-h); display: flex; align-items: center; gap: var(--sip-s-5); }

.sip-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.sip-logo svg, .sip-logo img { height: 34px; width: auto; max-width: 44px; object-fit: contain; }
.sip-logo__txt { display: flex; flex-direction: column; line-height: 1.1; }
.sip-logo__ar { font-size: 15px; font-weight: var(--sip-fw-bold); color: var(--sip-text); letter-spacing: var(--sip-ls-tight); }
.sip-logo__en { font-size: 8.5px; font-weight: var(--sip-fw-semi); letter-spacing: .14em; color: var(--sip-text-mute); font-family: var(--sip-font-en); white-space: nowrap; }
@media (max-width: 520px) { .sip-logo__txt { display: none; } }

.sip-nav { display: flex; align-items: center; gap: 0; margin-inline-start: auto; flex: 1 1 auto; min-width: 0; justify-content: flex-end;
  overflow: hidden; /* never paint over the logo/tools when titles are too long */ }
/* JS (Header.fitNav) adds this when the links don't fit on one line: the
   nav hides and the burger drawer takes over, at any viewport width. */
.sip-header--compact .sip-nav { display: none; }
.sip-header--compact .sip-burger { display: inline-flex; }
.sip-nav__item { position: static; }
.sip-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: .55rem clamp(.45rem, .2rem + .45vw, .85rem); border-radius: var(--sip-r-sm);
  white-space: nowrap; /* never let a menu title wrap into 2–3 lines */
  font-size: clamp(.8rem, .72rem + .25vw, var(--sip-fs-sm)); font-weight: var(--sip-fw-med); color: var(--sip-text-soft);
  transition: color var(--sip-t-fast) var(--sip-ease), background-color var(--sip-t-fast) var(--sip-ease);
}
.sip-nav__link:hover, .sip-nav__item.is-open > .sip-nav__link { color: var(--sip-text-brand); background: var(--sip-accent-soft); }
.sip-nav__link[aria-current="page"] { color: var(--sip-text-brand); font-weight: var(--sip-fw-semi); }
.sip-nav__link[aria-current="page"]::after {
  content:""; position:absolute; inset-inline: .95rem; bottom: -2px; height: 2px;
  background: var(--sip-grad-brand); border-radius: 2px;
}
.sip-nav__chev { width: 15px; height: 15px; transition: transform var(--sip-t-base) var(--sip-ease); }
.sip-nav__item.is-open .sip-nav__chev { transform: rotate(180deg); }
@media (max-width: 1280px) { .sip-nav { display: none; } }


/* Mega menu — anchored to the sticky header (nearest positioned ancestor)
   so a wide panel always stays centred inside the viewport, RTL and LTR. */
.sip-mega {
  position: absolute; inset-inline-start: 50%; top: calc(100% + 10px);
  transform: translateX(50%) translateY(-10px);
  width: min(1040px, calc(100vw - 3rem));
  background: var(--sip-surface); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-xl); box-shadow: var(--sip-sh-2xl);
  padding: var(--sip-s-6); z-index: var(--sip-z-dropdown);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--sip-t-base) var(--sip-ease), transform var(--sip-t-base) var(--sip-ease-out), visibility var(--sip-t-base);
}
[dir="ltr"] .sip-mega { transform: translateX(-50%) translateY(-10px); }
.sip-nav__item.is-open .sip-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(50%) translateY(0); }
[dir="ltr"] .sip-nav__item.is-open .sip-mega { transform: translateX(-50%) translateY(0); }
.sip-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sip-s-2) var(--sip-s-5); }
.sip-mega__col-title {
  font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-bold); letter-spacing: var(--sip-ls-wide);
  color: var(--sip-text-mute); text-transform: uppercase; padding: 0 .75rem var(--sip-s-2); grid-column: 1/-1;
}
.sip-mega__link {
  display: flex; align-items: flex-start; gap: var(--sip-s-3);
  padding: .7rem .75rem; border-radius: var(--sip-r-md);
  transition: background-color var(--sip-t-fast) var(--sip-ease), transform var(--sip-t-fast) var(--sip-ease);
}
.sip-mega__link:hover { background: var(--sip-bg-alt); transform: translateX(-3px); }
[dir="ltr"] .sip-mega__link:hover { transform: translateX(3px); }
.sip-mega__ico {
  width: 38px; height: 38px; flex: none; border-radius: var(--sip-r-sm);
  display: grid; place-items: center; background: var(--sip-accent-soft); color: var(--sip-text-brand);
}
.sip-mega__ico svg { width: 19px; height: 19px; }
.sip-mega__name { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); }
.sip-mega__desc { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); line-height: 1.5; }
.sip-mega__foot { margin-block-start: var(--sip-s-5); padding-block-start: var(--sip-s-4); border-block-start: 1px solid var(--sip-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-4); }

.sip-header__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.sip-header__tools .sip-btn--primary.sip-btn--sm { height: 34px; padding-inline: 14px; }

/* Mobile drawer */
.sip-burger { display: none; }
@media (max-width: 1180px) { .sip-burger { display: inline-flex; } }
.sip-drawer {
  position: fixed; inset: 0; z-index: var(--sip-z-modal);
  visibility: hidden; pointer-events: none;
}
.sip-drawer.is-open { visibility: visible; pointer-events: auto; }
.sip-drawer__scrim { position: absolute; inset: 0; background: var(--sip-overlay); opacity: 0;
  transition: opacity var(--sip-t-base) var(--sip-ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sip-drawer.is-open .sip-drawer__scrim { opacity: 1; }
.sip-drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(400px, 88vw);
  background: var(--sip-surface); box-shadow: var(--sip-sh-2xl);
  transform: translateX(-100%); transition: transform var(--sip-t-slow) var(--sip-ease-out);
  display: flex; flex-direction: column; overflow-y: auto;
}
[dir="ltr"] .sip-drawer__panel { transform: translateX(100%); }
.sip-drawer.is-open .sip-drawer__panel { transform: translateX(0); }
.sip-drawer__head { padding: var(--sip-s-4) var(--sip-s-5); display: flex; align-items: center; justify-content: space-between;
  border-block-end: 1px solid var(--sip-border); position: sticky; top: 0; background: var(--sip-surface); z-index: 2; }
.sip-drawer__body { padding: var(--sip-s-4); display: flex; flex-direction: column; gap: 2px; }
.sip-drawer__link { padding: .85rem 1rem; border-radius: var(--sip-r-md); font-weight: var(--sip-fw-med);
  color: var(--sip-text-soft); display: flex; align-items: center; gap: var(--sip-s-3);
  transition: background-color var(--sip-t-fast) var(--sip-ease), color var(--sip-t-fast) var(--sip-ease); }
.sip-drawer__link:hover { background: var(--sip-bg-alt); color: var(--sip-text-brand); }

/* ==========================================================================
   12. GLOBAL SEARCH (command palette)
   ========================================================================== */
.sip-cmdk { position: fixed; inset: 0; z-index: var(--sip-z-modal); display: grid; place-items: start center;
  padding-block-start: 12vh; visibility: hidden; pointer-events: none; }
.sip-cmdk.is-open { visibility: visible; pointer-events: auto; }
.sip-cmdk__scrim { position: absolute; inset: 0; background: var(--sip-overlay); opacity: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-cmdk.is-open .sip-cmdk__scrim { opacity: 1; }
.sip-cmdk__panel {
  position: relative; width: min(680px, calc(100vw - 2rem));
  background: var(--sip-surface); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-xl); box-shadow: var(--sip-sh-2xl); overflow: hidden;
  transform: translateY(-14px) scale(.98); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease);
}
.sip-cmdk.is-open .sip-cmdk__panel { transform: translateY(0) scale(1); opacity: 1; }
.sip-cmdk__input { width: 100%; padding: 1.25rem 1.5rem; font-size: var(--sip-fs-lg);
  border-block-end: 1px solid var(--sip-border); }
.sip-cmdk__input:focus { outline: none; }
.sip-cmdk__list { max-height: 52vh; overflow-y: auto; padding: var(--sip-s-2); }
.sip-cmdk__group { font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-bold); color: var(--sip-text-mute);
  text-transform: uppercase; letter-spacing: var(--sip-ls-wide); padding: var(--sip-s-3) var(--sip-s-3) var(--sip-s-2); }
.sip-cmdk__item { display: flex; align-items: center; gap: var(--sip-s-3); padding: .7rem .85rem;
  border-radius: var(--sip-r-md); cursor: pointer; font-size: var(--sip-fs-sm); }
.sip-cmdk__item:hover, .sip-cmdk__item.is-active { background: var(--sip-accent-soft); color: var(--sip-text-brand); }
.sip-cmdk__foot { padding: .75rem 1.25rem; border-block-start: 1px solid var(--sip-border);
  background: var(--sip-bg-alt); font-size: var(--sip-fs-2xs); color: var(--sip-text-mute);
  display: flex; align-items: center; gap: var(--sip-s-4); flex-wrap: wrap; }
.sip-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 6px; background: var(--sip-surface); border: 1px solid var(--sip-border);
  box-shadow: 0 1px 0 var(--sip-border-strong); font-size: 11px; font-family: var(--sip-font-en); font-weight: 600; }

/* ==========================================================================
   12b. ADMIN LOGIN DIALOG
   ========================================================================== */
.sip-login { position: fixed; inset: 0; z-index: var(--sip-z-modal); display: grid; place-items: center;
  padding: var(--sip-gutter); visibility: hidden; pointer-events: none; }
.sip-login.is-open { visibility: visible; pointer-events: auto; }
.sip-login__scrim { position: absolute; inset: 0; background: var(--sip-overlay); opacity: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-login.is-open .sip-login__scrim { opacity: 1; }
.sip-login__panel {
  position: relative; width: min(420px, 100%);
  background: var(--sip-surface); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-xl); box-shadow: var(--sip-sh-2xl);
  padding: var(--sip-s-6); overflow: hidden;
  transform: translateY(-14px) scale(.98); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease);
}
.sip-login.is-open .sip-login__panel { transform: translateY(0) scale(1); opacity: 1; }
.sip-login__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sip-s-4);
  padding-block-end: var(--sip-s-4); border-block-end: 1px solid var(--sip-border); margin-block-end: var(--sip-s-5); }
.sip-login__body { display: flex; flex-direction: column; gap: var(--sip-s-4); }
.sip-login__body .sip-alert { margin-block-start: 0; }

/* ==========================================================================
   12c. ONBOARDING WIZARD — Digital Onboarding Workflow
   ========================================================================== */
.sip-onboard { position: fixed; inset: 0; z-index: var(--sip-z-modal); display: grid; place-items: center;
  padding: var(--sip-gutter); visibility: hidden; pointer-events: none; }
.sip-onboard.is-open { visibility: visible; pointer-events: auto; }
.sip-onboard__scrim { position: absolute; inset: 0; background: var(--sip-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0;
  transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-onboard.is-open .sip-onboard__scrim { opacity: 1; }
.sip-onboard__shell {
  position: relative; width: min(1180px, 100%); height: min(900px, 94vh);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-2xl);
  box-shadow: var(--sip-sh-2xl); overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: 300px minmax(0, 1fr);
  transform: translateY(-16px) scale(.985); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease);
}
.sip-onboard.is-open .sip-onboard__shell { transform: none; opacity: 1; }

.sip-onboard__side {
  display: flex; flex-direction: column; gap: var(--sip-s-4);
  padding: var(--sip-s-6) var(--sip-s-5);
  background: var(--sip-grad-royal); color: #fff; overflow-y: auto;
}
.sip-onboard__brand { display: flex; align-items: center; gap: var(--sip-s-3); }
.sip-onboard__brand img { flex: none; }
.sip-onboard__brand-ar { font-weight: var(--sip-fw-bold); font-size: var(--sip-fs-md); line-height: 1.3; }
.sip-onboard__brand-en { font-size: var(--sip-fs-2xs); color: rgba(255,255,255,.55); letter-spacing: .16em; }
.sip-onboard__steps { list-style: none; display: flex; flex-direction: column; gap: var(--sip-s-1); }
.sip-onboard__steps li {
  display: flex; align-items: center; gap: var(--sip-s-3);
  padding: var(--sip-s-2) var(--sip-s-3); border-radius: var(--sip-r-md);
  color: rgba(255,255,255,.58); font-size: var(--sip-fs-sm); line-height: 1.45;
  transition: background-color var(--sip-t-fast) var(--sip-ease), color var(--sip-t-fast) var(--sip-ease);
}
.sip-onboard__steps li.is-done { color: var(--sip-gold-300); cursor: pointer; }
.sip-onboard__steps li.is-done::after {
  content: ""; flex: none; width: 15px; height: 15px; margin-inline-start: auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sip-onboard__steps li.is-current { background: rgba(255,255,255,.12); color: #fff; font-weight: var(--sip-fw-semi); }
.sip-onboard__steps .n {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--sip-r-pill);
  font-size: var(--sip-fs-2xs); font-family: var(--sip-font-en); font-weight: 600;
  transition: all var(--sip-t-fast) var(--sip-ease);
}
.sip-onboard__steps li.is-current .n { background: var(--sip-grad-gold); border-color: transparent; color: #201206; }
.sip-onboard__steps li.is-done .n { background: rgba(255,255,255,.14); border-color: transparent; color: var(--sip-gold-300); }
.sip-onboard__note {
  display: flex; gap: var(--sip-s-3); margin-block-start: auto;
  padding: var(--sip-s-4); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sip-r-md);
  background: rgba(255,255,255,.06); font-size: var(--sip-fs-2xs); line-height: 1.8; color: rgba(255,255,255,.72);
}
.sip-onboard__note svg { flex: none; width: 18px; height: 18px; color: var(--sip-gold-300); margin-top: 2px; }
.sip-onboard__note p { margin: 0; }

.sip-onboard__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sip-onboard__head {
  display: flex; align-items: center; gap: var(--sip-s-5);
  padding: var(--sip-s-5) var(--sip-s-6); border-block-end: 1px solid var(--sip-border);
  background: var(--sip-surface);
}
.sip-onboard__head-txt { min-width: 0; }
.sip-onboard__crumb { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); font-weight: var(--sip-fw-semi); letter-spacing: .06em; }
.sip-onboard__head h2 { font-size: var(--sip-fs-xl); line-height: 1.3; margin-block-start: 2px; }
.sip-onboard__sub { font-size: var(--sip-fs-xs); color: var(--sip-text-soft); margin-block-start: 4px; }
.sip-onboard__progress-wrap { margin-inline-start: auto; min-width: 220px; }
.sip-onboard__progress-label { display: flex; justify-content: space-between; font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); margin-block-end: 6px; }
.sip-onboard__progress { height: 6px; background: var(--sip-bg-alt); border-radius: 99px; overflow: hidden; }
.sip-onboard__progress span { display: block; height: 100%; width: 8%; background: var(--sip-grad-brand); border-radius: 99px;
  transition: width var(--sip-t-base) var(--sip-ease-out); }
[data-theme="dark"] .sip-onboard__progress span { background: var(--sip-grad-gold); }

.sip-onboard__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sip-s-6); scroll-behavior: smooth; }
.sip-onboard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-4);
  padding: var(--sip-s-4) var(--sip-s-6); border-block-start: 1px solid var(--sip-border); background: var(--sip-bg-alt);
}
.sip-onboard__foot-end { display: flex; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-onboard__hint { margin-inline-start: auto; }

.sip-onboard__step { display: none; }
.sip-onboard__step.is-current { display: block; animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }
.sip-onboard__phase[hidden] { display: none; }
.sip-onboard__phase { animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }

.sip-onboard__stage-title { display: flex; align-items: center; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); }
.sip-onboard__stage-title .ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--sip-r-md);
  display: grid; place-items: center; background: var(--sip-accent-soft); color: var(--sip-text-brand);
}
.sip-onboard__stage-title .ico svg { width: 21px; height: 21px; }
.sip-onboard__stage-title h3 { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: 1.4; }
.sip-onboard__stage-title p { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-onboard__panel { background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg); padding: var(--sip-s-5); box-shadow: var(--sip-sh-sm); }
.sip-onboard__panel + .sip-onboard__panel { margin-block-start: var(--sip-s-5); }

.sip-otp { display: grid; gap: var(--sip-s-3); }
.sip-otp__row { display: flex; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-otp__row .sip-input { flex: 1 1 180px; direction: ltr; text-align: center; font-family: var(--sip-font-en); letter-spacing: .35em; font-weight: 600; }
.sip-otp__code { display: flex; align-items: center; gap: var(--sip-s-2); padding: var(--sip-s-3) var(--sip-s-4);
  background: var(--sip-info-soft); color: var(--sip-info); border: 1px dashed color-mix(in srgb, var(--sip-info) 35%, transparent);
  border-radius: var(--sip-r-sm); font-size: var(--sip-fs-sm); }
.sip-otp__code svg { width: 17px; height: 17px; flex: none; }

.sip-act {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sip-s-2);
  padding: var(--sip-s-4); border: 1.5px solid var(--sip-border); border-radius: var(--sip-r-md);
  background: var(--sip-surface); cursor: pointer; transition: all var(--sip-t-fast) var(--sip-ease);
}
.sip-act:hover { border-color: var(--sip-accent); transform: translateY(-2px); box-shadow: var(--sip-sh-md); }
.sip-act input { position: absolute; opacity: 0; pointer-events: none; }
.sip-act:has(input:checked) { border-color: var(--sip-accent); background: var(--sip-accent-soft); box-shadow: 0 0 0 4px var(--sip-ring); }
.sip-act:has(input[aria-invalid="true"]) { border-color: var(--sip-danger); }
.sip-act__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--sip-r-sm);
  background: var(--sip-bg-alt); color: var(--sip-text-soft); }
.sip-act__ico svg { width: 18px; height: 18px; }
.sip-act:has(input:checked) .sip-act__ico { background: var(--sip-accent-soft); color: var(--sip-text-brand); }
.sip-act__t { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); }

.sip-line, .sip-material {
  border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg); padding: var(--sip-s-4) var(--sip-s-5);
  background: var(--sip-surface); box-shadow: var(--sip-sh-sm);
}
.sip-line + .sip-line, .sip-material + .sip-material { margin-block-start: var(--sip-s-4); }
.sip-line__head, .sip-material__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); }
.sip-line__title, .sip-material__title { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); color: var(--sip-text-brand); }
.sip-material { display: grid; grid-template-columns: minmax(0,1fr) 190px 140px 40px; gap: var(--sip-s-3); align-items: end; }

.sip-doc {
  display: flex; align-items: center; gap: var(--sip-s-3);
  padding: var(--sip-s-3) var(--sip-s-4); border: 1px dashed var(--sip-border-strong);
  border-radius: var(--sip-r-md); background: var(--sip-surface); cursor: pointer;
  transition: border-color var(--sip-t-fast) var(--sip-ease), background-color var(--sip-t-fast) var(--sip-ease);
}
.sip-doc:hover { border-color: var(--sip-accent); background: var(--sip-accent-soft); }
.sip-doc__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--sip-r-sm); background: var(--sip-bg-alt); color: var(--sip-text-soft); }
.sip-doc__icon svg { width: 17px; height: 17px; }
.sip-doc__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sip-doc__file { display: flex; align-items: center; gap: var(--sip-s-2); font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-doc input { display: none; }
.sip-doc__name { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sip-review { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sip-s-3) var(--sip-s-6); }
.sip-review__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sip-s-3);
  padding-block-end: var(--sip-s-2); border-block-end: 1px dashed var(--sip-border); font-size: var(--sip-fs-sm); }
.sip-review__item span { color: var(--sip-text-mute); flex: none; }
.sip-review__item b { font-weight: var(--sip-fw-semi); text-align: end; }

.sip-wf-preview { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sip-s-3); }
.sip-wf-preview div {
  display: flex; align-items: center; gap: var(--sip-s-2); padding: var(--sip-s-3);
  background: var(--sip-bg-alt); border: 1px solid var(--sip-border); border-radius: var(--sip-r-sm);
  font-size: var(--sip-fs-2xs); color: var(--sip-text-soft);
}
.sip-wf-preview .n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--sip-r-pill);
  background: var(--sip-surface); border: 1px solid var(--sip-border-strong); font-weight: 600; font-size: var(--sip-fs-2xs); }

.sip-wf { display: grid; gap: var(--sip-s-2); max-width: 780px; margin-inline: auto; }
.sip-wf__step {
  display: flex; align-items: center; gap: var(--sip-s-4);
  padding: var(--sip-s-4) var(--sip-s-5); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-lg); background: var(--sip-surface);
  opacity: .45; transition: opacity var(--sip-t-base) var(--sip-ease), border-color var(--sip-t-base) var(--sip-ease), box-shadow var(--sip-t-base) var(--sip-ease);
}
.sip-wf__step.is-active { opacity: 1; border-color: var(--sip-border-brand); box-shadow: var(--sip-sh-md); }
.sip-wf__step.is-done { opacity: 1; }
.sip-wf__ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--sip-r-pill);
  background: var(--sip-bg-alt); color: var(--sip-text-soft); border: 1px solid var(--sip-border); }
.sip-wf__ico svg { width: 18px; height: 18px; }
.sip-wf__step.is-active .sip-wf__ico { background: var(--sip-accent-soft); color: var(--sip-text-brand); border-color: var(--sip-border-brand); animation: sip-pulse 1.6s infinite; }
.sip-wf__step.is-done .sip-wf__ico { background: var(--sip-success-soft); color: var(--sip-success); border-color: transparent; }
.sip-wf__title { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); }
.sip-wf__status { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-wf__badge { margin-inline-start: auto; }

.sip-onboard__success { text-align: center; padding-block: var(--sip-s-3) var(--sip-s-6); }
.sip-onboard__success .ico { width: 72px; height: 72px; margin-inline: auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--sip-success-soft); color: var(--sip-success);
  animation: sip-zoom-in var(--sip-t-slow) var(--sip-ease-out); }
.sip-onboard__success .ico svg { width: 34px; height: 34px; }
.sip-result-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sip-s-5); align-items: start; }
.sip-filecard { border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl); overflow: hidden;
  background: var(--sip-surface); box-shadow: var(--sip-sh-md); }
.sip-filecard__head { padding: var(--sip-s-4) var(--sip-s-5); background: var(--sip-grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); }
.sip-filecard__head .sip-label { color: #fff; margin: 0; }
.sip-filecard__body { padding: var(--sip-s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--sip-s-4) var(--sip-s-5); align-items: start; }
.sip-cert-qr { width: 128px; height: 128px; background: #fff; padding: 8px; border: 1px solid var(--sip-border); border-radius: var(--sip-r-md); }
.sip-cert-qr svg { width: 100%; height: 100%; display: block; }
.sip-filecard__rows { display: grid; gap: var(--sip-s-2); }
.sip-filecard__row { display: flex; justify-content: space-between; gap: var(--sip-s-3); font-size: var(--sip-fs-sm);
  padding-block-end: var(--sip-s-2); border-block-end: 1px dashed var(--sip-border); }
.sip-filecard__row:last-child { border-block-end: 0; padding-block-end: 0; }
.sip-filecard__row span { color: var(--sip-text-mute); flex: none; }
.sip-filecard__row b { font-weight: var(--sip-fw-semi); text-align: end; }
.sip-filecard__nid { font-family: var(--sip-font-en); direction: ltr; letter-spacing: .06em; }

.sip-dash { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sip-s-3); }
.sip-dash__stat { background: var(--sip-bg-alt); border: 1px solid var(--sip-border); border-radius: var(--sip-r-md); padding: var(--sip-s-4); }
.sip-dash__stat .v { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: 1.3; word-break: break-word; }
.sip-dash__stat .l { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); margin-block-start: 4px; }
.sip-dash__stat.is-good .v { color: var(--sip-success); }
.sip-dash__stat.is-warn .v { color: var(--sip-warning); }

@media (max-width: 920px) {
  .sip-onboard__shell { grid-template-columns: 1fr; height: min(760px, 94vh); }
  .sip-onboard__side { display: none; }
  .sip-material { grid-template-columns: minmax(0,1fr) 160px 120px 40px; }
}
@media (max-width: 680px) {
  .sip-onboard__head { flex-wrap: wrap; gap: var(--sip-s-3); }
  .sip-onboard__progress-wrap { order: 3; min-width: 100%; }
  .sip-onboard__hint { display: none; }
  .sip-result-grid { grid-template-columns: 1fr; }
  .sip-review { grid-template-columns: 1fr; }
  .sip-dash { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sip-wf-preview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sip-material { grid-template-columns: 1fr; }
  .sip-filecard__body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12d. BRAND-MARK APPLICATION — Product Certification Workflow
        (طلب علامة «صناعة سورية» للمنتج — ثيم أخضر/ذهبي)
   ========================================================================== */
.sip-brand {
  --_g-950: #052010; --_g-900: #0A2B18; --_g-800: #0E3A22; --_g-700: #13542C;
  --_g-600: #1A6B38; --_g-500: #238F4C; --_g-200: #C3E3CF; --_g-100: #E7F3EC; --_g-50: #F2F9F5;
  --_gold: #C9A24B; --_gold-300: #E2C77E; --_gold-700: #8F6E2C; --_gold-soft: #FBF6E9;
  position: fixed; inset: 0; z-index: var(--sip-z-modal); display: grid; place-items: stretch;
  padding: 0; visibility: hidden; pointer-events: none;
}
.sip-brand.is-open { visibility: visible; pointer-events: auto; }
.sip-brand__scrim { position: absolute; inset: 0; background: var(--sip-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0;
  transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-brand.is-open .sip-brand__scrim { opacity: 1; }
.sip-brand__shell {
  position: relative; width: 100%; height: 100%;
  background: var(--sip-surface); border: 0; border-radius: 0;
  box-shadow: none; overflow: hidden;
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  transform: translateY(-14px); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease);
}
.sip-brand.is-open .sip-brand__shell { transform: none; opacity: 1; }

.sip-brand__side {
  display: flex; flex-direction: column; gap: var(--sip-s-4);
  padding: var(--sip-s-6) var(--sip-s-5);
  background: linear-gradient(165deg, var(--_g-800) 0%, var(--_g-900) 55%, var(--_g-950) 100%);
  color: #fff; overflow-y: auto;
}
.sip-brand__brand { display: flex; align-items: center; gap: var(--sip-s-3); }
.sip-brand__brand img { flex: none; }
.sip-brand__brand-ar { font-weight: var(--sip-fw-bold); font-size: var(--sip-fs-md); line-height: 1.3; }
.sip-brand__brand-en { font-size: var(--sip-fs-2xs); color: rgba(255,255,255,.55); letter-spacing: .16em; }
.sip-brand__crumb { font-size: var(--sip-fs-2xs); color: rgba(255,255,255,.6); font-weight: var(--sip-fw-semi); letter-spacing: .06em; }
.sip-brand__steps { list-style: none; display: flex; flex-direction: column; gap: var(--sip-s-1); }
.sip-brand__steps li {
  display: flex; align-items: center; gap: var(--sip-s-3);
  padding: var(--sip-s-2) var(--sip-s-3); border-radius: var(--sip-r-md);
  color: rgba(255,255,255,.58); font-size: var(--sip-fs-sm); line-height: 1.45;
  transition: background-color var(--sip-t-fast) var(--sip-ease), color var(--sip-t-fast) var(--sip-ease);
}
.sip-brand__steps li.is-done { color: var(--_gold-300); cursor: pointer; }
.sip-brand__steps li.is-done::after {
  content: ""; flex: none; width: 15px; height: 15px; margin-inline-start: auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sip-brand__steps li.is-current { background: rgba(255,255,255,.12); color: #fff; font-weight: var(--sip-fw-semi); }
.sip-brand__steps .n {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--sip-r-pill);
  font-size: var(--sip-fs-2xs); font-family: var(--sip-font-en); font-weight: 600;
  transition: all var(--sip-t-fast) var(--sip-ease);
}
.sip-brand__steps li.is-current .n { background: linear-gradient(135deg, var(--_gold-300), var(--_gold)); border-color: transparent; color: var(--_g-950); }
.sip-brand__steps li.is-done .n { background: rgba(255,255,255,.14); border-color: transparent; color: var(--_gold-300); }
.sip-brand__note {
  display: flex; gap: var(--sip-s-3); margin-block-start: auto;
  padding: var(--sip-s-4); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sip-r-md);
  background: rgba(255,255,255,.06); font-size: var(--sip-fs-2xs); line-height: 1.8; color: rgba(255,255,255,.72);
}
.sip-brand__note svg { flex: none; width: 18px; height: 18px; color: var(--_gold-300); margin-top: 2px; }
.sip-brand__note p { margin: 0; }

.sip-brand__main { display: flex; flex-direction: column; min-width: 0; }
.sip-brand__head {
  display: flex; align-items: center; gap: var(--sip-s-5);
  padding: var(--sip-s-5) var(--sip-s-6); border-block-end: 1px solid var(--sip-border);
  background: var(--sip-surface);
}
.sip-brand__head-txt { min-width: 0; }
.sip-brand__head h2 { font-size: var(--sip-fs-xl); line-height: 1.3; margin-block-start: 2px; }
.sip-brand__sub { font-size: var(--sip-fs-xs); color: var(--sip-text-soft); margin-block-start: 4px; }
.sip-brand__progress-wrap { margin-inline-start: auto; min-width: 220px; }
.sip-brand__progress-label { display: flex; justify-content: space-between; gap: var(--sip-s-3); font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); margin-block-end: 6px; }
.sip-brand__progress-label b { color: var(--_g-700); font-family: var(--sip-font-en); letter-spacing: .04em; }
.sip-brand__progress { height: 6px; background: var(--sip-bg-alt); border-radius: 99px; overflow: hidden; }
.sip-brand__progress span { display: block; height: 100%; width: 14%; background: linear-gradient(90deg, var(--_g-600), var(--_gold)); border-radius: 99px;
  transition: width var(--sip-t-base) var(--sip-ease-out); }

.sip-brand__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sip-s-6); scroll-behavior: smooth; }
.sip-brand__foot {
  display: flex; align-items: center; gap: var(--sip-s-4);
  padding: var(--sip-s-5) var(--sip-s-6); border-block-start: 1px solid var(--sip-border); background: var(--sip-bg-alt);
  box-shadow: 0 -1px 0 var(--sip-border);
}
.sip-brand__nav { display: flex; align-items: center; gap: var(--sip-s-3); }
.sip-brand__hint { margin-inline: auto; display: flex; align-items: center; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-brand__chip {
  display: inline-flex; align-items: center; gap: var(--sip-s-2);
  padding: 6px 14px; border: 1px solid var(--sip-border); border-radius: 99px;
  background: var(--sip-surface); font-weight: var(--sip-fw-semi); font-size: var(--sip-fs-xs);
  color: var(--_g-700); white-space: nowrap;
}
.sip-brand__kbd-hint { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sip-btn--nav { min-height: 46px; padding-inline: 26px; font-size: var(--sip-fs-sm); }
.sip-btn--nav svg { width: 17px; height: 17px; }
.sip-brand__foot-end { display: flex; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-brand__hint { margin-inline-start: auto; }

.sip-brand__step { display: none; }
.sip-brand__step.is-current { display: block; animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }
.sip-brand__phase[hidden] { display: none; }
.sip-brand__phase { animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }

.sip-brand__stage-title { display: flex; align-items: center; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); }
.sip-brand__stage-title .ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--sip-r-md);
  display: grid; place-items: center; background: var(--_g-100); color: var(--_g-700);
}
.sip-brand__stage-title .ico svg { width: 21px; height: 21px; }
.sip-brand__stage-title h3 { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: 1.4; }
.sip-brand__stage-title p { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }

.sip-brand__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); flex-wrap: wrap; }
.sip-brand__panel-title { font-weight: var(--sip-fw-semi); font-size: var(--sip-fs-sm); color: var(--_g-700); }
.sip-brand__panel-foot { display: flex; align-items: center; gap: var(--sip-s-3); margin-block-start: var(--sip-s-4); flex-wrap: wrap; }
.sip-brand__step .sip-onboard__panel + .sip-onboard__panel,
.sip-brand__phase .sip-onboard__panel + .sip-onboard__panel { margin-block-start: var(--sip-s-5); }

/* بطاقة المنشأة (بيانات تُجلب آلياً من سجل المنشآت) */
.sip-proto { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sip-s-2) var(--sip-s-5); }
.sip-proto__row { display: flex; justify-content: space-between; gap: var(--sip-s-3); font-size: var(--sip-fs-sm);
  padding-block-end: var(--sip-s-2); border-block-end: 1px dashed var(--sip-border); }
.sip-proto__row span { color: var(--sip-text-mute); flex: none; }
.sip-proto__row b { font-weight: var(--sip-fw-semi); text-align: end; }
.sip-proto__row--wide { grid-column: 1 / -1; }

/* بطاقة المنتج */
.sip-product { border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg); padding: var(--sip-s-4) var(--sip-s-5); background: var(--sip-surface); box-shadow: var(--sip-sh-sm); }
.sip-product + .sip-product { margin-block-start: var(--sip-s-4); }
.sip-product__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); }
.sip-product__title { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-semi); color: var(--_g-700); }

/* المواد الأولية */
.sip-material--b { grid-template-columns: minmax(0,1fr) 150px 150px 120px 120px 40px; }

/* المحتوى المحلي */
.sip-lc { display: grid; gap: var(--sip-s-2); }
.sip-lc__row { display: grid; grid-template-columns: minmax(0,1fr) 200px 84px; gap: var(--sip-s-3); align-items: center;
  padding: var(--sip-s-2) var(--sip-s-3); border: 1px solid var(--sip-border); border-radius: var(--sip-r-md); background: var(--sip-surface); }
.sip-lc__name { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-med); }
.sip-lc__name small { display: block; font-weight: 400; font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-lc__w { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); text-align: end; }
.sip-lc__in { position: relative; }
.sip-lc__in .sip-input { padding-inline-end: 2.2rem; text-align: center; }
.sip-lc__in i { position: absolute; inset-inline-end: .7rem; top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-lc__result { margin-block-start: var(--sip-s-4); }
.sip-lc__gauge { display: flex; align-items: center; gap: var(--sip-s-4); }
.sip-lc__bar { flex: 1; height: 12px; background: var(--sip-bg-alt); border-radius: 99px; overflow: hidden; }
.sip-lc__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--_g-600), var(--_gold)); border-radius: 99px; transition: width var(--sip-t-base) var(--sip-ease-out); }
.sip-lc__total { font-size: var(--sip-fs-2xl); font-weight: var(--sip-fw-bold); color: var(--_g-700); white-space: nowrap; }
.sip-lc__total small { display: block; font-size: var(--sip-fs-xs); color: var(--sip-text-mute); font-weight: 400; }
.sip-lc__class { margin-block-start: var(--sip-s-3); }
.sip-review__item--wide { grid-column: 1 / -1; }

/* إعادة تلوين مكوّنات سير العمل والبطاقات داخل وحدة العلامة */
.sip-brand .sip-wf__step.is-active { border-color: var(--_g-200); }
.sip-brand .sip-wf__step.is-active .sip-wf__ico { background: var(--_g-100); color: var(--_g-700); border-color: var(--_g-200); }
.sip-brand .sip-filecard__head { background: linear-gradient(135deg, var(--_g-700), var(--_g-900)); }
.sip-brand .sip-btn--primary { background: linear-gradient(135deg, var(--_g-600), var(--_g-800)); box-shadow: 0 12px 28px -10px rgba(13,43,24,.55); }
.sip-brand .sip-check input:checked { background: var(--_g-700); border-color: var(--_g-700); }
.sip-brand .sip-check input[type="radio"]:checked { background: var(--_g-700); border-color: var(--_g-700); }
.sip-brand .sip-input:focus, .sip-brand .sip-select:focus, .sip-brand .sip-textarea:focus { border-color: var(--_g-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_g-600) 16%, transparent); }
.sip-brand .sip-act:has(input:checked) { border-color: var(--_g-600); background: var(--_g-50); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_g-600) 18%, transparent); }
.sip-brand .sip-act:has(input:checked) .sip-act__ico { background: var(--_g-100); color: var(--_g-700); }
.sip-brand .sip-doc:hover { border-color: var(--_g-600); background: var(--_g-50); }

/* النجاح */
.sip-bapp-success { text-align: center; padding-block: var(--sip-s-3) var(--sip-s-6); }
.sip-bapp-success .ico { width: 72px; height: 72px; margin-inline: auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--sip-success-soft); color: var(--sip-success);
  animation: sip-zoom-in var(--sip-t-slow) var(--sip-ease-out); }
.sip-bapp-success .ico svg { width: 34px; height: 34px; }
.sip-bapp-success h3 { font-size: var(--sip-fs-xl); font-weight: var(--sip-fw-bold); margin-block-start: var(--sip-s-4); }
.sip-bapp-success p { color: var(--sip-text-soft); font-size: var(--sip-fs-sm); margin-block-start: var(--sip-s-2); }

.sip-brand__result-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sip-s-5); align-items: start; }
.sip-brand__result-side { display: grid; gap: var(--sip-s-4); }

/* الشهادة */
.sip-cert {
  position: relative; background: #fff; color: var(--_g-950);
  border: 2px solid var(--_g-200); border-radius: var(--sip-r-xl); overflow: hidden;
  box-shadow: var(--sip-sh-lg);
}
.sip-cert::before, .sip-cert::after {
  content: ""; position: absolute; width: 46px; height: 46px; border: 2px solid var(--_gold); pointer-events: none;
}
.sip-cert::before { top: 12px; inset-inline-start: 12px; border-inline-end: 0; border-block-end: 0; border-start-start-radius: 8px; }
.sip-cert::after { bottom: 12px; inset-inline-end: 12px; border-inline-start: 0; border-block-start: 0; border-end-end-radius: 8px; }
.sip-cert__band { height: 10px; background: linear-gradient(90deg, var(--_g-800), var(--_gold) 55%, var(--_g-800)); }
.sip-cert__inner { padding: var(--sip-s-6) var(--sip-s-7); }
.sip-cert__head { text-align: center; border-block-end: 1px dashed var(--_g-200); padding-block-end: var(--sip-s-4); }
.sip-cert__country { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); letter-spacing: .08em; }
.sip-cert__title { font-size: var(--sip-fs-xl); font-weight: var(--sip-fw-bold); color: var(--_g-800); margin-block: 4px; }
.sip-cert__en { font-family: var(--sip-font-en); font-size: var(--sip-fs-2xs); letter-spacing: .34em; color: var(--_gold-700); }
.sip-cert__seal { width: 54px; height: 54px; margin-inline: auto; margin-block-start: var(--sip-s-3); display: grid; place-items: center;
  border: 2px solid var(--_gold); border-radius: 50%; color: var(--_g-700); }
.sip-cert__seal svg { width: 28px; height: 28px; }
.sip-cert__no { text-align: center; margin-block: var(--sip-s-5); font-family: var(--sip-font-en); direction: ltr;
  font-weight: 700; letter-spacing: .12em; color: var(--_g-700); }
.sip-cert__body { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sip-s-2) var(--sip-s-6); }
.sip-cert__row { display: flex; justify-content: space-between; gap: var(--sip-s-3); font-size: var(--sip-fs-sm);
  padding-block-end: var(--sip-s-2); border-block-end: 1px dashed var(--sip-border); }
.sip-cert__row span { color: var(--sip-text-mute); flex: none; }
.sip-cert__row b { font-weight: var(--sip-fw-semi); text-align: end; }
.sip-cert__row--wide { grid-column: 1 / -1; }
.sip-cert__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sip-s-5); margin-block-start: var(--sip-s-5); padding-block-start: var(--sip-s-4); border-block-start: 1px dashed var(--_g-200); }
.sip-cert__sig { min-width: 0; }
.sip-cert__sig .sig { width: 130px; height: 56px; color: var(--_g-800); }
.sip-cert__sig .sig svg { width: 100%; height: 100%; display: block; }
.sip-cert__sig small { display: block; font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); margin-block-start: 2px; }
.sip-cert__sig b { font-size: var(--sip-fs-sm); }
.sip-cert__qrcap { text-align: center; font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); margin-block-start: 6px; }

/* سجل التدقيق */
.sip-audit { list-style: none; display: grid; gap: 0; }
.sip-audit li { position: relative; padding-inline-start: 22px; padding-block: 6px; font-size: var(--sip-fs-xs); color: var(--sip-text-soft); }
.sip-audit li::before { content: ""; position: absolute; inset-inline-start: 5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--_gold); box-shadow: 0 0 0 3px var(--_gold-soft); }
.sip-audit li::after { content: ""; position: absolute; inset-inline-start: 8.5px; top: 22px; bottom: -4px; width: 1px; background: var(--sip-border); }
.sip-audit li:last-child::after { display: none; }
.sip-audit li b { color: var(--_g-700); font-weight: var(--sip-fw-semi); }
.sip-audit li time { float: inline-end; direction: ltr; font-family: var(--sip-font-en); color: var(--sip-text-mute); font-size: var(--sip-fs-2xs); }

/* قرار اللجنة */
.sip-decision { display: grid; gap: var(--sip-s-2); }
.sip-decision__row { display: flex; justify-content: space-between; gap: var(--sip-s-3); font-size: var(--sip-fs-sm); padding-block-end: var(--sip-s-2); border-block-end: 1px dashed var(--sip-border); }
.sip-decision__row span { color: var(--sip-text-mute); flex: none; }
.sip-decision__row b { font-weight: var(--sip-fw-semi); text-align: end; }

/* الرفض المؤقت */
.sip-bapp-denied { max-width: 620px; margin-inline: auto; }
.sip-bapp-denied .sip-state__art svg { color: var(--sip-warning); }

/* التوست */
.sip-toast { position: fixed; inset-inline: 0; bottom: 26px; margin-inline: auto; width: max-content; max-width: 92vw; z-index: calc(var(--sip-z-modal) + 2);
  display: flex; align-items: center; gap: var(--sip-s-3); padding: var(--sip-s-3) var(--sip-s-5);
  background: var(--_g-900); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--sip-r-pill);
  box-shadow: var(--sip-sh-lg); font-size: var(--sip-fs-sm); animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }
.sip-toast svg { width: 17px; height: 17px; color: var(--_gold-300); flex: none; }

/* الطباعة — إظهار الشهادة فقط */
@media print {
  body * { visibility: hidden; }
  .sip-cert, .sip-cert * { visibility: visible; }
  .sip-cert { position: fixed; inset: 0; width: 100%; border: none; border-radius: 0; box-shadow: none; }
  .sip-cert__inner { padding: 3rem; }
}

@media (max-width: 920px) {
  .sip-brand__shell { grid-template-columns: 1fr; height: 100%; }
  .sip-brand__side { display: none; }
  .sip-material--b { grid-template-columns: minmax(0,1fr) 130px 130px 110px 110px 40px; }
}
@media (max-width: 680px) {
  .sip-brand__head { flex-wrap: wrap; gap: var(--sip-s-3); }
  .sip-brand__progress-wrap { order: 3; min-width: 100%; }
  .sip-brand__hint { display: none; }
  .sip-proto { grid-template-columns: 1fr; }
  .sip-brand__result-grid { grid-template-columns: 1fr; }
  .sip-lc__row { grid-template-columns: minmax(0,1fr) 130px; }
  .sip-cert__body { grid-template-columns: 1fr; }
  .sip-cert__foot { flex-direction: column; align-items: center; text-align: center; }
  .sip-cert__sig .sig { margin-inline: auto; }
  .sip-review__item--wide { grid-column: auto; }
}

/* ==========================================================================
   12e. PRODUCT MARK RENEWAL — Renewal Workflow
        (تجديد علامة «صناعة سورية» للمنتج — مرتبط بالشهادة الحالية)
   ========================================================================== */
.sip-renew, .sip-verify, .sip-directory {
  --_g-950: #052010; --_g-900: #0A2B18; --_g-800: #0E3A22; --_g-700: #13542C;
  --_g-600: #1A6B38; --_g-500: #238F4C; --_g-200: #C3E3CF; --_g-100: #E7F3EC; --_g-50: #F2F9F5;
  --_gold: #C9A24B; --_gold-300: #E2C77E; --_gold-700: #8F6E2C; --_gold-soft: #FBF6E9;
}
.sip-renew, .sip-verify {
  position: fixed; inset: 0; z-index: var(--sip-z-modal); display: grid; place-items: center;
  padding: var(--sip-gutter); visibility: hidden; pointer-events: none;
}
.sip-renew.is-open, .sip-verify.is-open { visibility: visible; pointer-events: auto; }
.sip-renew__scrim, .sip-verify__scrim { position: absolute; inset: 0; background: var(--sip-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0;
  transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-renew.is-open .sip-renew__scrim, .sip-verify.is-open .sip-verify__scrim { opacity: 1; }
.sip-renew__shell, .sip-verify__shell {
  position: relative; width: min(1180px, 100%); height: min(900px, 94vh);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-2xl);
  box-shadow: var(--sip-sh-2xl); overflow: hidden;
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  transform: translateY(-16px) scale(.985); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease);
}
.sip-renew.is-open .sip-renew__shell, .sip-verify.is-open .sip-verify__shell { transform: none; opacity: 1; }

.sip-renew__side, .sip-verify__side {
  display: flex; flex-direction: column; gap: var(--sip-s-4);
  padding: var(--sip-s-6) var(--sip-s-5);
  background: linear-gradient(165deg, var(--_g-800) 0%, var(--_g-900) 55%, var(--_g-950) 100%);
  color: #fff; overflow-y: auto;
}
.sip-renew__brand, .sip-verify__brand { display: flex; align-items: center; gap: var(--sip-s-3); }
.sip-renew__brand img, .sip-verify__brand img { flex: none; }
.sip-renew__brand-ar, .sip-verify__brand-ar { font-weight: var(--sip-fw-bold); font-size: var(--sip-fs-md); line-height: 1.3; }
.sip-renew__brand-en, .sip-verify__brand-en { font-size: var(--sip-fs-2xs); color: rgba(255,255,255,.55); letter-spacing: .16em; }
.sip-renew__crumb, .sip-verify__crumb, .sip-directory__crumb { font-size: var(--sip-fs-2xs); color: rgba(255,255,255,.6); font-weight: var(--sip-fw-semi); letter-spacing: .06em; }
.sip-renew__steps, .sip-verify__steps { list-style: none; display: flex; flex-direction: column; gap: var(--sip-s-1); }
.sip-renew__steps li, .sip-verify__steps li {
  display: flex; align-items: center; gap: var(--sip-s-3);
  padding: var(--sip-s-2) var(--sip-s-3); border-radius: var(--sip-r-md);
  color: rgba(255,255,255,.58); font-size: var(--sip-fs-sm); line-height: 1.45;
  transition: background-color var(--sip-t-fast) var(--sip-ease), color var(--sip-t-fast) var(--sip-ease);
}
.sip-renew__steps li.is-done, .sip-verify__steps li.is-done { color: var(--_gold-300); cursor: pointer; }
.sip-renew__steps li.is-done::after, .sip-verify__steps li.is-done::after {
  content: ""; flex: none; width: 15px; height: 15px; margin-inline-start: auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sip-renew__steps li.is-current, .sip-verify__steps li.is-current { background: rgba(255,255,255,.12); color: #fff; font-weight: var(--sip-fw-semi); }
.sip-renew__steps .n, .sip-verify__steps .n {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--sip-r-pill);
  font-size: var(--sip-fs-2xs); font-family: var(--sip-font-en); font-weight: 600;
  transition: all var(--sip-t-fast) var(--sip-ease);
}
.sip-renew__steps li.is-current .n, .sip-verify__steps li.is-current .n { background: linear-gradient(135deg, var(--_gold-300), var(--_gold)); border-color: transparent; color: var(--_g-950); }
.sip-renew__steps li.is-done .n, .sip-verify__steps li.is-done .n { background: rgba(255,255,255,.14); border-color: transparent; color: var(--_gold-300); }
.sip-renew__note, .sip-verify__note {
  display: flex; gap: var(--sip-s-3); margin-block-start: auto;
  padding: var(--sip-s-4); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sip-r-md);
  background: rgba(255,255,255,.06); font-size: var(--sip-fs-2xs); line-height: 1.8; color: rgba(255,255,255,.72);
}
.sip-renew__note svg, .sip-verify__note svg { flex: none; width: 18px; height: 18px; color: var(--_gold-300); margin-top: 2px; }
.sip-renew__note p, .sip-verify__note p { margin: 0; }

.sip-renew__main, .sip-verify__main { display: flex; flex-direction: column; min-width: 0; }
.sip-renew__head, .sip-verify__head {
  display: flex; align-items: center; gap: var(--sip-s-5);
  padding: var(--sip-s-5) var(--sip-s-6); border-block-end: 1px solid var(--sip-border);
  background: var(--sip-surface);
}
.sip-renew__head-txt, .sip-verify__head-txt { min-width: 0; }
.sip-renew__head h2, .sip-verify__head h2 { font-size: var(--sip-fs-xl); line-height: 1.3; margin-block-start: 2px; }
.sip-renew__sub, .sip-verify__sub { font-size: var(--sip-fs-xs); color: var(--sip-text-soft); margin-block-start: 4px; }
.sip-renew__progress-wrap { margin-inline-start: auto; min-width: 220px; }
.sip-renew__progress-label { display: flex; justify-content: space-between; gap: var(--sip-s-3); font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); margin-block-end: 6px; }
.sip-renew__progress-label b { color: var(--_g-700); font-family: var(--sip-font-en); letter-spacing: .04em; }
.sip-renew__progress { height: 6px; background: var(--sip-bg-alt); border-radius: 99px; overflow: hidden; }
.sip-renew__progress span { display: block; height: 100%; width: 14%; background: linear-gradient(90deg, var(--_g-600), var(--_gold)); border-radius: 99px; transition: width var(--sip-t-base) var(--sip-ease-out); }

.sip-renew__body, .sip-verify__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sip-s-6); scroll-behavior: smooth; }
.sip-renew__foot, .sip-verify__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-4);
  padding: var(--sip-s-4) var(--sip-s-6); border-block-start: 1px solid var(--sip-border); background: var(--sip-bg-alt);
}
.sip-renew__foot-end { display: flex; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-renew__hint { margin-inline-start: auto; }
.sip-verify__hint { margin-inline-start: auto; }

.sip-renew__step { display: none; }
.sip-renew__step.is-current { display: block; animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }
.sip-renew__phase[hidden] { display: none; }
.sip-renew__phase { animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }

.sip-renew__stage-title, .sip-verify__stage-title { display: flex; align-items: center; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); }
.sip-renew__stage-title .ico, .sip-verify__stage-title .ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--sip-r-md);
  display: grid; place-items: center; background: var(--_g-100); color: var(--_g-700);
}
.sip-renew__stage-title .ico svg, .sip-verify__stage-title .ico svg { width: 21px; height: 21px; }
.sip-renew__stage-title h3, .sip-verify__stage-title h3 { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: 1.4; }
.sip-renew__stage-title p, .sip-verify__stage-title p { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }

.sip-renew__step .sip-onboard__panel + .sip-onboard__panel,
.sip-renew__phase .sip-onboard__panel + .sip-onboard__panel,
.sip-verify__panel .sip-onboard__panel + .sip-onboard__panel { margin-block-start: var(--sip-s-5); }

/* سير عمل التجديد */
.sip-renew__wf ol { list-style: none; display: grid; gap: var(--sip-s-2); max-width: 860px; margin-inline: auto; }
.sip-renew__wf li {
  display: flex; align-items: center; gap: var(--sip-s-3);
  padding: var(--sip-s-3) var(--sip-s-4); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-md); background: var(--sip-surface); opacity: .55;
  transition: opacity var(--sip-t-fast) var(--sip-ease), border-color var(--sip-t-fast) var(--sip-ease), box-shadow var(--sip-t-fast) var(--sip-ease);
}
.sip-renew__wf li.is-active { opacity: 1; border-color: var(--_g-200); box-shadow: var(--sip-sh-md); }
.sip-renew__wf li.is-done { opacity: 1; }
.sip-renew__wf .wf-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: var(--sip-r-pill); background: var(--sip-bg-alt); color: var(--sip-text-soft); border: 1px solid var(--sip-border); }
.sip-renew__wf .wf-ico svg { width: 17px; height: 17px; }
.sip-renew__wf li.is-active .wf-ico { background: var(--_g-100); color: var(--_g-700); border-color: var(--_g-200); animation: sip-pulse 1.6s infinite; }
.sip-renew__wf li.is-done .wf-ico { background: var(--sip-success-soft); color: var(--sip-success); border-color: transparent; }
.sip-renew__wf li div { flex: 1; min-width: 0; }
.sip-renew__wf li b { display: block; font-size: var(--sip-fs-sm); }
.sip-renew__wf li small { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-renew__wf li em { font-style: normal; font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }

.sip-renew__result-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sip-s-5); align-items: start; }

/* جدول الشهادات المرتبطة في التجديد */
.sip-certtable { display: grid; gap: var(--sip-s-2); }
.sip-certtable__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: var(--sip-s-3); align-items: center;
  padding: var(--sip-s-3) var(--sip-s-4); border: 1px solid var(--sip-border); border-radius: var(--sip-r-md); background: var(--sip-surface); font-size: var(--sip-fs-xs); }
.sip-certtable__row b { font-weight: var(--sip-fw-semi); }
.sip-certtable__row span { color: var(--sip-text-mute); }
.sip-certtable__empty { padding: var(--sip-s-4); border: 1px dashed var(--sip-border); border-radius: var(--sip-r-md); text-align: center; font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }

/* أزرار نعم/لا داخل الصفوف */
.sip-chk-inline { display: inline-flex; gap: var(--sip-s-4); }

/* إعادة تلوين المكوّنات داخل وحدة التجديد والتحقق */
.sip-renew .sip-btn--primary, .sip-verify .sip-btn--primary { background: linear-gradient(135deg, var(--_g-600), var(--_g-800)); box-shadow: 0 12px 28px -10px rgba(13,43,24,.55); }
.sip-renew .sip-check input:checked, .sip-verify .sip-check input:checked { background: var(--_g-700); border-color: var(--_g-700); }
.sip-renew .sip-check input[type="radio"]:checked, .sip-verify .sip-check input[type="radio"]:checked { background: var(--_g-700); border-color: var(--_g-700); }
.sip-renew .sip-input:focus, .sip-verify .sip-input:focus, .sip-directory .sip-input:focus { border-color: var(--_g-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_g-600) 16%, transparent); }
.sip-renew .sip-filecard__head, .sip-verify .sip-filecard__head { background: linear-gradient(135deg, var(--_g-700), var(--_g-900)); }
.sip-renew .sip-doc:hover, .sip-verify .sip-doc:hover { border-color: var(--_g-600); background: var(--_g-50); }
.sip-renew .sip-alert--info, .sip-verify .sip-alert--info { border-color: color-mix(in srgb, var(--_g-600) 30%, transparent); }

/* ==========================================================================
   12f. CERTIFICATE VERIFICATION SYSTEM — Certificate Verification
        (نظام التحقق من الشهادات — المستوى الأول + سجل الجهات + QR)
   ========================================================================== */
.sip-verify__panel[hidden] { display: none; }
.sip-verify__panel { animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }

/* سجل الشهادات */
.sip-verify__table { border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg); overflow: hidden; }
.sip-verify__trow { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr) 105px 120px 148px; gap: var(--sip-s-3); align-items: center;
  padding: var(--sip-s-3) var(--sip-s-4); border-block-end: 1px solid var(--sip-border); font-size: var(--sip-fs-xs); }
.sip-verify__trow--issuers { grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.2fr) 110px; }
.sip-verify__trow:last-child { border-block-end: 0; }
.sip-verify__trow--head { background: linear-gradient(135deg, var(--_g-800), var(--_g-900)); color: #fff; font-weight: var(--sip-fw-semi); }
.sip-verify__trow--head span { color: rgba(255,255,255,.85); }
.sip-verify__trow__actions { display: flex; gap: var(--sip-s-2); flex-wrap: wrap; }
.sip-verify__trow .u-en { font-family: var(--sip-font-en); direction: ltr; letter-spacing: .03em; }

/* التحقق الآلي */
.sip-verify__wf { margin-block-start: var(--sip-s-5); }
.sip-verify__wf ol { list-style: none; display: grid; gap: var(--sip-s-2); margin-block-start: var(--sip-s-3); }
.sip-verify__wf li {
  display: flex; align-items: center; gap: var(--sip-s-3);
  padding: var(--sip-s-3) var(--sip-s-4); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-md); background: var(--sip-surface); opacity: .55;
  transition: opacity var(--sip-t-fast) var(--sip-ease), border-color var(--sip-t-fast) var(--sip-ease), box-shadow var(--sip-t-fast) var(--sip-ease);
}
.sip-verify__wf li.is-active { opacity: 1; border-color: var(--_g-200); box-shadow: var(--sip-sh-md); }
.sip-verify__wf li.is-done { opacity: 1; }
.sip-verify__wf li.is-fail { opacity: 1; border-color: color-mix(in srgb, var(--sip-danger) 40%, transparent); }
.sip-verify__wf .wf-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: var(--sip-r-pill); background: var(--sip-bg-alt); color: var(--sip-text-soft); border: 1px solid var(--sip-border); }
.sip-verify__wf .wf-ico svg { width: 17px; height: 17px; }
.sip-verify__wf li.is-active .wf-ico { background: var(--_g-100); color: var(--_g-700); border-color: var(--_g-200); animation: sip-pulse 1.6s infinite; }
.sip-verify__wf li.is-done .wf-ico { background: var(--sip-success-soft); color: var(--sip-success); border-color: transparent; }
.sip-verify__wf li.is-fail .wf-ico { background: var(--sip-danger-soft); color: var(--sip-danger); border-color: transparent; }
.sip-verify__wf li div { flex: 1; min-width: 0; }
.sip-verify__wf li b { display: block; font-size: var(--sip-fs-sm); }
.sip-verify__wf li small { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-verify__wf li em { font-style: normal; font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }

/* ==========================================================================
   12g. PRODUCT DIRECTORY — Syrian Industrial Products Directory
        (دليل المنتجات الصناعية السورية — عرض، تفاصيل، إدارة، QR)
   ========================================================================== */
.sip-directory {
  position: fixed; inset: 0; z-index: calc(var(--sip-z-modal) + 1);
  display: grid; place-items: center; padding: var(--sip-gutter);
  visibility: hidden; pointer-events: none;
}
.sip-directory.is-open { visibility: visible; pointer-events: auto; }
.sip-directory__scrim { position: absolute; inset: 0; background: var(--sip-overlay);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0;
  transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-directory.is-open .sip-directory__scrim { opacity: 1; }
.sip-directory__panel {
  position: relative; width: min(1420px, 100%); height: min(940px, 96vh);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-2xl);
  box-shadow: var(--sip-sh-2xl); overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(-16px) scale(.985); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease);
}
.sip-directory.is-open .sip-directory__panel { transform: none; opacity: 1; }

.sip-directory__bar { display: flex; align-items: center; gap: var(--sip-s-4); padding: var(--sip-s-4) var(--sip-s-6); border-block-end: 1px solid var(--sip-border); }
.sip-directory__bar-txt { min-width: 0; }
.sip-directory__crumb { color: var(--_gold-700); }
.sip-directory__bar h2 { font-size: var(--sip-fs-lg); line-height: 1.3; }
.sip-directory__sub { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); margin-block-start: 2px; }
.sip-directory__search { flex: 1; min-width: 220px; position: relative; margin-inline-start: auto; }
.sip-directory__search > svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--sip-text-mute); pointer-events: none; }
.sip-directory__search .sip-input { padding-inline-start: 2.4rem; }

.sip-directory__stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sip-s-3);
  padding: var(--sip-s-4) var(--sip-s-6); background: linear-gradient(135deg, var(--_g-800), var(--_g-900)); color: #fff; }
.sip-directory__stat { display: flex; flex-direction: column; gap: 2px; }
.sip-directory__stat b { font-size: var(--sip-fs-xl); color: var(--_gold-300); font-family: var(--sip-font-en); font-weight: 700; }
.sip-directory__stat span { font-size: var(--sip-fs-xs); color: rgba(255,255,255,.65); }

.sip-directory__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sip-s-5) var(--sip-s-6); scroll-behavior: smooth; }
.sip-directory__view[hidden] { display: none; }
.sip-directory__view { animation: sip-fade-up var(--sip-t-base) var(--sip-ease-out); }

.sip-directory__toolbar { display: flex; flex-direction: column; gap: var(--sip-s-3); margin-block-end: var(--sip-s-4); }
.sip-directory__chips { display: flex; flex-wrap: wrap; gap: var(--sip-s-2); }
.sip-directory__chips button { font: inherit; font-size: var(--sip-fs-xs); padding: 7px 15px; border-radius: 99px;
  border: 1px solid var(--sip-border); background: var(--sip-surface); color: var(--sip-text-soft); cursor: pointer;
  transition: all var(--sip-t-fast) var(--sip-ease); }
.sip-directory__chips button:hover { border-color: var(--_g-600); color: var(--_g-700); }
.sip-directory__chips button.is-active { background: var(--_g-700); border-color: var(--_g-700); color: #fff; }
.sip-directory__filters { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; gap: var(--sip-s-3); align-items: end; }

.sip-directory__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sip-s-4); }
.sip-directory__empty { padding: var(--sip-s-8) var(--sip-s-4); text-align: center; color: var(--sip-text-mute); font-size: var(--sip-fs-sm); border: 1px dashed var(--sip-border); border-radius: var(--sip-r-xl); }

/* بطاقة المنتج */
.sip-dir-card { display: flex; flex-direction: column; gap: var(--sip-s-3); padding: var(--sip-s-4);
  border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl); background: var(--sip-surface);
  box-shadow: var(--sip-sh-sm); cursor: pointer;
  transition: transform var(--sip-t-fast) var(--sip-ease), box-shadow var(--sip-t-fast) var(--sip-ease), border-color var(--sip-t-fast) var(--sip-ease); }
.sip-dir-card:hover { transform: translateY(-3px); box-shadow: var(--sip-sh-lg); border-color: var(--_g-200); }
.sip-dir-card__thumb { height: 118px; border-radius: var(--sip-r-lg); display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--_g-700), var(--_g-900)); position: relative; overflow: hidden; }
.sip-dir-card__thumb svg { width: 44px; height: 44px; color: var(--_gold-300); }
.sip-dir-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sip-dir-card__thumb .sip-dir-card__export { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
.sip-dir-card__tags { display: flex; gap: var(--sip-s-2); flex-wrap: wrap; }
.sip-dir-card__name { font-weight: var(--sip-fw-bold); font-size: var(--sip-fs-sm); line-height: 1.45; }
.sip-dir-card__est { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-dir-card__lc { display: flex; align-items: center; gap: var(--sip-s-2); font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-dir-card__lcbar { flex: 1; height: 7px; background: var(--sip-bg-alt); border-radius: 99px; overflow: hidden; }
.sip-dir-card__lcbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--_g-600), var(--_gold)); }
.sip-dir-card__lc b { color: var(--_g-700); font-family: var(--sip-font-en); }
.sip-dir-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-2);
  margin-block-start: auto; padding-block-start: var(--sip-s-3); border-block-start: 1px dashed var(--sip-border); }

/* تفاصيل المنتج */
.sip-directory__detail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sip-s-4); align-items: start; margin-block-start: var(--sip-s-4); }
.sip-dir-sec { border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl); background: var(--sip-surface); box-shadow: var(--sip-sh-sm); padding: var(--sip-s-5); }
.sip-dir-sec + .sip-dir-sec { margin-block-start: var(--sip-s-4); }
.sip-dir-sec__title { display: flex; align-items: center; gap: var(--sip-s-2); font-weight: var(--sip-fw-semi); font-size: var(--sip-fs-sm); color: var(--_g-700); margin-block-end: var(--sip-s-4); }
.sip-dir-sec__title .ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--sip-r-sm); background: var(--_g-100); color: var(--_g-700); }
.sip-dir-sec__title .ico svg { width: 16px; height: 16px; }
.sip-dir-sec__head { grid-column: 1 / -1; display: flex; gap: var(--sip-s-5); align-items: center; }
.sip-dir-sec__thumb { width: 128px; height: 128px; flex: none; border-radius: var(--sip-r-xl); display: grid; place-items: center; overflow: hidden;
  color: #fff; background: linear-gradient(135deg, var(--_g-700), var(--_g-900)); }
.sip-dir-sec__thumb svg { width: 52px; height: 52px; color: var(--_gold-300); }
.sip-dir-sec__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sip-dir-sec__head-txt { min-width: 0; }
.sip-dir-sec__head h3 { font-size: var(--sip-fs-xl); font-weight: var(--sip-fw-bold); }
.sip-dir-sec__head .sub { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-dir-lcchart { display: flex; align-items: center; gap: var(--sip-s-5); }
.sip-dir-lcchart .sip-lc__bar { flex: 1; }
.sip-dir-lcchart .sip-lc__total { font-size: var(--sip-fs-2xl); }

/* لوحة الإدارة */
.sip-directory__admin { display: grid; gap: var(--sip-s-4); margin-block-start: var(--sip-s-2); }
.sip-dir-admin__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-dir-admin__table { border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg); overflow: hidden; }
.sip-dir-admin__trow { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) 90px 110px 170px; gap: var(--sip-s-3); align-items: center;
  padding: var(--sip-s-3) var(--sip-s-4); border-block-end: 1px solid var(--sip-border); font-size: var(--sip-fs-xs); }
.sip-dir-admin__trow:last-child { border-block-end: 0; }
.sip-dir-admin__trow--head { background: linear-gradient(135deg, var(--_g-800), var(--_g-900)); color: #fff; font-weight: var(--sip-fw-semi); }
.sip-dir-admin__trow--head span { color: rgba(255,255,255,.85); }
.sip-dir-admin__actions { display: flex; gap: var(--sip-s-2); flex-wrap: wrap; }

/* استجابة دليل المنتجات */
@media (max-width: 1200px) {
  .sip-directory__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sip-directory__filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 920px) {
  .sip-renew__shell, .sip-verify__shell { grid-template-columns: 1fr; height: min(760px, 94vh); }
  .sip-renew__side, .sip-verify__side { display: none; }
  .sip-directory__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sip-directory__detail { grid-template-columns: 1fr; }
  .sip-dir-sec__head { grid-column: auto; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  .sip-renew__head, .sip-verify__head { flex-wrap: wrap; gap: var(--sip-s-3); }
  .sip-renew__progress-wrap { order: 3; min-width: 100%; }
  .sip-renew__hint, .sip-verify__hint { display: none; }
  .sip-renew__result-grid { grid-template-columns: 1fr; }
  .sip-directory__grid { grid-template-columns: 1fr; }
  .sip-directory__stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sip-directory__filters { grid-template-columns: 1fr; }
  .sip-directory__search { min-width: 100%; order: 4; }
  .sip-verify__trow { grid-template-columns: 1fr; gap: 6px; }
  .sip-verify__trow--head { display: none; }
  .sip-certtable__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. HERO / PANORAMIC SECTIONS
   ========================================================================== */
.sip-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 78vh, 860px);
  display: flex; align-items: center;
  background: var(--sip-primary-950); color: #fff;
}
.sip-hero__bg { position: absolute; inset: 0; z-index: -3; }
.sip-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.sip-hero__wash { position: absolute; inset: 0; z-index: -2; background: var(--sip-grad-royal); opacity: .90; }
.sip-hero__mesh { position: absolute; inset: 0; z-index: -1; background: var(--sip-grad-mesh); }
.sip-hero__pattern {
  position: absolute; inset: 0; z-index: -1; opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M60 0 120 60 60 120 0 60Z'/%3E%3Cpath d='M60 30 90 60 60 90 30 60Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px;
}
.sip-hero__content { position: relative; padding-block: clamp(4rem, 3rem + 6vw, 8rem); width: 100%; }
.sip-hero__title { font-size: var(--sip-fs-5xl); line-height: 1.06; margin-block: var(--sip-s-5) var(--sip-s-5); max-width: 17ch; }
.sip-hero__title span { display: block; background: var(--sip-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sip-hero__sub { font-size: var(--sip-fs-lg); color: rgba(255,255,255,.80); max-width: 60ch; line-height: var(--sip-lh-base); }
.sip-hero .sip-eyebrow { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: var(--sip-gold-300); }

/* Panorama band — full-bleed cinematic strip */
.sip-panorama {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(380px, 48vh, 620px);
  display: grid; place-items: center; text-align: center; color: #fff;
  background: var(--sip-grad-royal);
}
.sip-panorama__bg { position: absolute; inset: 0; z-index: -2; }
.sip-panorama__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .26; transform: scale(1.06); }
.sip-panorama__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(34,2,10,.72), rgba(34,2,10,.45) 45%, rgba(34,2,10,.85)); }
.sip-panorama__inner { padding-block: var(--sip-s-10); }
.sip-panorama__title { font-size: var(--sip-fs-4xl); max-width: 22ch; margin-inline: auto; }
.sip-panorama__sub { color: rgba(255,255,255,.80); font-size: var(--sip-fs-lg); max-width: 62ch; margin: var(--sip-s-4) auto 0; }

/* Curved / diagonal separators */
.sip-wave { position: absolute; inset-inline: 0; line-height: 0; pointer-events: none; z-index: 1; }
.sip-wave--bottom { bottom: -1px; }
.sip-wave--top { top: -1px; transform: rotate(180deg); }
.sip-wave svg { width: 100%; height: clamp(48px, 6vw, 110px); display: block; }
.sip-wave path { fill: var(--sip-bg); }
.sip-wave--alt path { fill: var(--sip-bg-alt); }

/* Marquee ticker */
.sip-ticker { overflow: hidden; border-block: 1px solid var(--sip-border); background: var(--sip-surface); }
.sip-ticker__track { display: flex; gap: var(--sip-s-8); padding-block: var(--sip-s-4);
  width: max-content; animation: sip-marquee 44s linear infinite; }
.sip-ticker:hover .sip-ticker__track { animation-play-state: paused; }
.sip-ticker__item { display: inline-flex; align-items: center; gap: var(--sip-s-3);
  font-size: var(--sip-fs-sm); color: var(--sip-text-soft); white-space: nowrap; }

/* ==========================================================================
   14. TABS · ACCORDION · STEPPER
   ========================================================================== */
.sip-tabs { display: flex; gap: 4px; padding: 5px; background: var(--sip-bg-alt);
  border: 1px solid var(--sip-border); border-radius: var(--sip-r-pill); width: max-content; max-width: 100%; overflow-x: auto; }
.sip-tab { padding: .6rem 1.25rem; border-radius: var(--sip-r-pill); font-size: var(--sip-fs-sm);
  font-weight: var(--sip-fw-med); color: var(--sip-text-soft); white-space: nowrap;
  transition: all var(--sip-t-base) var(--sip-ease); }
.sip-tab:hover { color: var(--sip-text); }
.sip-tab[aria-selected="true"] { background: var(--sip-surface); color: var(--sip-text-brand);
  font-weight: var(--sip-fw-semi); box-shadow: var(--sip-sh-sm); }
.sip-tabpanel { animation: sip-fade-up var(--sip-t-slow) var(--sip-ease-out) both; }
.sip-tabpanel[hidden] { display: none; }

.sip-accordion { border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg); overflow: hidden; background: var(--sip-surface); }
.sip-accordion__item + .sip-accordion__item { border-block-start: 1px solid var(--sip-border); }
.sip-accordion__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-4);
  padding: 1.15rem 1.4rem; text-align: start; font-weight: var(--sip-fw-semi); font-size: var(--sip-fs-md);
  transition: background-color var(--sip-t-fast) var(--sip-ease); }
.sip-accordion__btn:hover { background: var(--sip-bg-alt); }
.sip-accordion__btn svg { width: 20px; height: 20px; flex: none; color: var(--sip-text-mute);
  transition: transform var(--sip-t-base) var(--sip-ease); }
.sip-accordion__btn[aria-expanded="true"] svg { transform: rotate(45deg); color: var(--sip-accent); }
.sip-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sip-t-slow) var(--sip-ease-out); }
.sip-accordion__panel.is-open { grid-template-rows: 1fr; }
.sip-accordion__inner { overflow: hidden; }
.sip-accordion__inner > div { padding: 0 1.4rem 1.35rem; color: var(--sip-text-soft); font-size: var(--sip-fs-sm); }

.sip-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sip-s-3); counter-reset: step; padding-block: var(--sip-s-2); }
.sip-step { min-width: 0; display: flex; flex-direction: column; gap: var(--sip-s-2); }
.sip-step__bar { height: 4px; border-radius: 99px; background: var(--sip-border); overflow: hidden; }
.sip-step__bar span { display: block; height: 100%; width: 0; background: var(--sip-grad-brand);
  transition: width var(--sip-t-lazy) var(--sip-ease-out); }
.sip-step.is-done .sip-step__bar span, .sip-step.is-active .sip-step__bar span { width: 100%; }
.sip-step.is-active .sip-step__bar span { background: var(--sip-grad-gold); }
.sip-step__n { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); font-weight: var(--sip-fw-semi); }
.sip-step__t { font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-med); }
.sip-step.is-done .sip-step__t, .sip-step.is-active .sip-step__t { color: var(--sip-text-brand); font-weight: var(--sip-fw-semi); }
/* Responsive: workflow steps wrap into a grid instead of overflowing on small screens */
@media (max-width: 560px) { .sip-steps { grid-template-columns: 1fr 1fr; gap: var(--sip-s-2); } }
@media (max-width: 360px) { .sip-steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   15. STATES — loading · empty · success · error
   ========================================================================== */
.sip-skeleton {
  border-radius: var(--sip-r-sm);
  background: linear-gradient(90deg, var(--sip-bg-alt) 25%, var(--sip-n-200) 37%, var(--sip-bg-alt) 63%);
  background-size: 400% 100%; animation: sip-shimmer 1.5s ease-in-out infinite;
}
[data-theme="dark"] .sip-skeleton { background: linear-gradient(90deg, var(--sip-surface) 25%, var(--sip-surface-raised) 37%, var(--sip-surface) 63%); background-size: 400% 100%; }
.sip-skeleton--text { height: 12px; margin-block: 6px; }
.sip-skeleton--title { height: 22px; width: 62%; }
.sip-skeleton--media { aspect-ratio: 16/10; border-radius: 0; }
.sip-skeleton--circle { border-radius: 50%; }

.sip-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sip-s-4);
  padding: var(--sip-s-9) var(--sip-s-5); border-radius: var(--sip-r-lg);
  border: 1px dashed var(--sip-border-strong); background: var(--sip-bg-alt);
}
.sip-state__art { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sip-surface); border: 1px solid var(--sip-border); box-shadow: var(--sip-sh-sm); }
.sip-state__art svg { width: 40px; height: 40px; color: var(--sip-text-mute); }
.sip-state__title { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); }
.sip-state__text { color: var(--sip-text-soft); font-size: var(--sip-fs-sm); max-width: 46ch; }
.sip-state--success { border-style: solid; border-color: color-mix(in srgb, var(--sip-success) 34%, transparent); background: var(--sip-success-soft); }
.sip-state--success .sip-state__art svg { color: var(--sip-success); }
.sip-state--error { border-style: solid; border-color: color-mix(in srgb, var(--sip-danger) 34%, transparent); background: var(--sip-danger-soft); }
.sip-state--error .sip-state__art svg { color: var(--sip-danger); }

.sip-spinner { width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--sip-border); border-top-color: var(--sip-accent);
  animation: sip-spin .72s linear infinite; }

.sip-alert { display: flex; gap: var(--sip-s-3); padding: var(--sip-s-4) var(--sip-s-5);
  border-radius: var(--sip-r-md); border: 1px solid var(--sip-border); background: var(--sip-bg-alt); font-size: var(--sip-fs-sm); }
.sip-alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.sip-alert--info { background: var(--sip-info-soft); border-color: color-mix(in srgb, var(--sip-info) 30%, transparent); color: var(--sip-info); }
.sip-alert--success { background: var(--sip-success-soft); border-color: color-mix(in srgb, var(--sip-success) 30%, transparent); color: var(--sip-success); }
.sip-alert--warning { background: var(--sip-warning-soft); border-color: color-mix(in srgb, var(--sip-warning) 30%, transparent); color: var(--sip-warning); }
.sip-alert--danger { background: var(--sip-danger-soft); border-color: color-mix(in srgb, var(--sip-danger) 30%, transparent); color: var(--sip-danger); }
.sip-alert__body { color: var(--sip-text); }
.sip-alert__title { font-weight: var(--sip-fw-semi); color: inherit; }

/* ==========================================================================
   16. BREADCRUMB · PAGINATION · PROGRESS
   ========================================================================== */
.sip-crumbs { display: flex; align-items: center; gap: var(--sip-s-2); flex-wrap: wrap;
  font-size: var(--sip-fs-xs); color: var(--sip-text-mute); }
.sip-crumbs a { transition: color var(--sip-t-fast) var(--sip-ease); }
.sip-crumbs a:hover { color: var(--sip-text-brand); }
.sip-crumbs li { display: inline-flex; align-items: center; gap: var(--sip-s-2); }
.sip-crumbs li + li::before { content: "‹"; color: var(--sip-border-strong); }
[dir="ltr"] .sip-crumbs li + li::before { content: "›"; }
.sip-crumbs [aria-current="page"] { color: var(--sip-text); font-weight: var(--sip-fw-med); }

.sip-pager { display: flex; align-items: center; gap: var(--sip-s-2); justify-content: center; flex-wrap: wrap; }
.sip-pager button { min-width: 40px; height: 40px; padding: 0 .6rem; border-radius: var(--sip-r-sm);
  border: 1px solid var(--sip-border); font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-med);
  transition: all var(--sip-t-fast) var(--sip-ease); }
.sip-pager button:hover { border-color: var(--sip-accent); color: var(--sip-text-brand); }
.sip-pager button[aria-current="true"] { background: var(--sip-accent); color: var(--sip-on-accent); border-color: transparent; }

.sip-progress { height: 8px; border-radius: 99px; background: var(--sip-bg-alt); overflow: hidden; }
.sip-progress__bar { height: 100%; border-radius: 99px; background: var(--sip-grad-brand);
  width: 0; transition: width var(--sip-t-lazy) var(--sip-ease-out); }
.sip-progress--gold .sip-progress__bar { background: var(--sip-grad-gold); }
.sip-progress--olive .sip-progress__bar { background: var(--sip-grad-olive); }
.sip-progress--clay .sip-progress__bar { background: var(--sip-grad-clay); }

/* ==========================================================================
   17. CHARTS (pure CSS/SVG primitives)
   ========================================================================== */
.sip-chart { position: relative; width: 100%; }
.sip-chart__legend { display: flex; flex-wrap: wrap; gap: var(--sip-s-4); font-size: var(--sip-fs-xs); color: var(--sip-text-soft); }
.sip-chart__legend span { display: inline-flex; align-items: center; gap: 7px; }
.sip-chart__swatch { width: 11px; height: 11px; border-radius: 3px; }

.sip-bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 18px); height: 240px; padding-block-start: var(--sip-s-5); }
.sip-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sip-s-2); height: 100%; justify-content: flex-end; }
.sip-bars__bar { width: 100%; max-width: 56px; border-radius: var(--sip-r-xs) var(--sip-r-xs) 0 0;
  background: var(--sip-grad-brand); height: 0; position: relative;
  transition: height 1s var(--sip-ease-out); cursor: pointer; }
.sip-bars__bar:hover { filter: brightness(1.12); }
.sip-bars__bar::after { content: attr(data-value); position: absolute; inset-block-start: -24px; inset-inline: 0;
  text-align: center; font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi); color: var(--sip-text-soft);
  opacity: 0; transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-bars__bar:hover::after { opacity: 1; }
.sip-bars__label { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); text-align: center; }

.sip-spark { width: 100%; height: 56px; overflow: visible; }
.sip-spark path.line { fill: none; stroke: var(--sip-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.sip-spark.is-visible path.line { animation: sip-draw 1.6s var(--sip-ease-out) forwards; }
/* NB: no `fill` here — the gradient is set per-chart as a presentation
   attribute by the JS renderer, and a CSS declaration would out-rank it. */
.sip-spark path.area { opacity: 0; transition: opacity var(--sip-t-lazy) var(--sip-ease) .5s; }
.sip-spark.is-visible path.area { opacity: 1; }

.sip-donut { display: grid; place-items: center; position: relative; }
.sip-donut svg { transform: rotate(-90deg); }
.sip-donut circle { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.3s var(--sip-ease-out); }
.sip-donut__center { position: absolute; text-align: center; }
.sip-donut__val { font-size: var(--sip-fs-2xl); font-weight: var(--sip-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.sip-donut__cap { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }

/* ==========================================================================
   18. MAP
   ========================================================================== */
.sip-map { position: relative; border-radius: var(--sip-r-xl); overflow: hidden;
  border: 1px solid var(--sip-border); background: var(--sip-bg-alt); box-shadow: var(--sip-sh-md); }
.sip-map__leaflet { width: 100%; height: 520px; min-height: 420px; z-index: 1; }
.sip-map__leaflet .leaflet-container { width: 100%; height: 100%; font-family: var(--sip-font); }
.sip-map__leaflet .leaflet-popup-content { direction: rtl; text-align: right; font-size: 13px; line-height: 1.7; margin: 12px 16px; }
.sip-map__leaflet .leaflet-popup-content b { font-weight: 700; }
.sip-map__leaflet .leaflet-tooltip { direction: rtl; font-family: var(--sip-font); font-size: 12px; font-weight: 600; }
.sip-map__leaflet .leaflet-control-attribution { font-size: 10px; direction: ltr; }
.sip-map-marker-wrap { background: transparent; border: 0; }
.sip-map-marker { --sip-marker-size: 34px; position: relative; display: grid; place-items: center;
  width: var(--sip-marker-size); height: var(--sip-marker-size); border: 2px solid #fff;
  border-radius: 50% 50% 50% 12%; background: linear-gradient(145deg, var(--sip-primary-600), var(--sip-primary-900));
  box-shadow: 0 7px 16px rgba(59,4,18,.3), 0 2px 4px rgba(25,8,12,.24); transform: rotate(-45deg);
  transition: transform var(--sip-t-fast) var(--sip-ease), box-shadow var(--sip-t-fast) var(--sip-ease); }
.sip-map-marker::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.24); border-radius: inherit; }
.sip-map-marker__core { position: relative; z-index: 1; width: 38%; height: 38%; border-radius: 50%;
  background: linear-gradient(145deg, #f7dfaf, var(--sip-gold-500)); box-shadow: 0 1px 4px rgba(31,8,12,.28); }
.sip-map-marker-wrap:hover .sip-map-marker,
.sip-map-marker-wrap:focus .sip-map-marker { transform: rotate(-45deg) scale(1.1); box-shadow: 0 10px 22px rgba(59,4,18,.38), 0 0 0 4px var(--sip-ring); }
.sip-map__leaflet .leaflet-tooltip.sip-map-tooltip { display: grid; gap: 2px; min-width: max-content; padding: 8px 11px;
  border: 1px solid rgba(224,184,111,.34); border-radius: var(--sip-r-md); background: rgba(29,18,20,.94); color: #fff;
  box-shadow: var(--sip-sh-md); direction: inherit; text-align: start; }
.sip-map__leaflet .leaflet-tooltip.sip-map-tooltip::before { border-top-color: rgba(29,18,20,.94); }
.sip-map-tooltip strong { font-size: 12px; line-height: 1.2; }
.sip-map-tooltip span { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 500; }
.sip-map-popup { min-width: 210px; direction: inherit; text-align: start; }
.sip-map-popup > strong { display: block; margin-block-end: 9px; color: var(--sip-primary-700); font-size: 15px; }
.sip-map-popup dl { display: grid; gap: 7px; margin: 0; }
.sip-map-popup dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.sip-map-popup dt { color: #6f6466; font-size: 11px; }
.sip-map-popup dd { margin: 0; color: #241a1c; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[dir="ltr"] .sip-map__leaflet .leaflet-popup-content,
html[dir="ltr"] .sip-map__leaflet .leaflet-tooltip,
html[dir="ltr"] .sip-map-popup { direction: ltr; text-align: left; }
.sip-map__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sip-primary-700);
  display: inline-block; flex: none; margin-block-start: 5px; }
.sip-map__pin-ico { flex: none; color: var(--sip-text-soft); }

/* ==========================================================================
   19. DASHBOARD SHELL
   ========================================================================== */
.sip-app { display: grid; grid-template-columns: var(--sip-sidebar-w) 1fr; min-height: 100dvh; }
.sip-side {
  background: var(--sip-primary-950); color: rgba(255,255,255,.72);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--sip-s-5) var(--sip-s-4);
  border-inline-start: 1px solid rgba(255,255,255,.06);
}
[data-theme="dark"] .sip-side { background: #0E0B0A; }
.sip-side__brand { display: flex; align-items: center; gap: var(--sip-s-3); padding: 0 var(--sip-s-2) var(--sip-s-6); }
.sip-side__group { margin-block-start: var(--sip-s-5); }
.sip-side__cap { font-size: var(--sip-fs-2xs); letter-spacing: var(--sip-ls-wide); text-transform: uppercase;
  color: rgba(255,255,255,.40); padding: 0 var(--sip-s-3) var(--sip-s-2); font-weight: var(--sip-fw-semi); }
.sip-side__link {
  display: flex; align-items: center; gap: var(--sip-s-3); padding: .7rem var(--sip-s-3);
  border-radius: var(--sip-r-md); font-size: var(--sip-fs-sm); font-weight: var(--sip-fw-med);
  color: rgba(255,255,255,.78);
  transition: background-color var(--sip-t-fast) var(--sip-ease), color var(--sip-t-fast) var(--sip-ease);
  position: relative;
}
.sip-side__link svg { width: 19px; height: 19px; flex: none; opacity: .8; }
.sip-side__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sip-side__link.is-active { background: rgba(188,151,97,.16); color: var(--sip-gold-300); }
.sip-side__link.is-active::before { content:""; position:absolute; inset-inline-start: -16px; inset-block: 8px;
  width: 3px; border-radius: 99px; background: var(--sip-gold-400); }
.sip-side__badge { margin-inline-start: auto; font-size: 10px; padding: 2px 7px; border-radius: 99px;
  background: rgba(255,255,255,.12); }
.sip-side__tree { margin-block: 2px; }
.sip-side__tree > summary { list-style: none; cursor: pointer; user-select: none; }
.sip-side__tree > summary::-webkit-details-marker { display: none; }
.sip-side__tree > summary::marker { content: ""; }
.sip-side__tree > summary > span:not(.sip-side__chevron) { min-width: 0; flex: 1; }
.sip-side__chevron {
  width: 7px; height: 7px; flex: none; margin-inline-start: auto;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--sip-t-fast) var(--sip-ease); opacity: .65;
}
.sip-side__tree[open] .sip-side__chevron { transform: rotate(225deg); }
.sip-side__submenu {
  position: relative; display: grid; gap: 2px; margin: 3px var(--sip-s-3) var(--sip-s-2);
  padding-inline-start: var(--sip-s-4); border-inline-start: 1px solid rgba(255,255,255,.14);
}
.sip-side__sublink {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-2);
  min-height: 34px; padding: .45rem .65rem; border-radius: var(--sip-r-sm);
  color: rgba(255,255,255,.62); font-size: var(--sip-fs-xs); line-height: 1.35;
  transition: background-color var(--sip-t-fast) var(--sip-ease), color var(--sip-t-fast) var(--sip-ease);
}
.sip-side__sublink:hover { background: rgba(255,255,255,.07); color: #fff; }
.sip-side__sublink.is-active { background: rgba(188,151,97,.12); color: var(--sip-gold-300); font-weight: var(--sip-fw-semi); }
.sip-side__group--action { margin-block-start: var(--sip-s-5); padding-block-start: var(--sip-s-3); border-block-start: 1px solid rgba(255,255,255,.10); }

.sip-main { min-width: 0; display: flex; flex-direction: column; background: var(--sip-bg); }
.sip-appbar { position: sticky; top: 0; z-index: var(--sip-z-sticky);
  background: var(--sip-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-block-end: 1px solid var(--sip-border);
  padding: var(--sip-s-4) var(--sip-s-6); display: flex; align-items: center; gap: var(--sip-s-4); flex-wrap: wrap; }
.sip-app__body { padding: var(--sip-s-6); display: flex; flex-direction: column; gap: var(--sip-s-6); }
@media (max-width: 900px) {
  .sip-app { grid-template-columns: 1fr; }
  .sip-side { display: none; }
  .sip-app__body { padding: var(--sip-s-4); }
  .sip-appbar { padding: var(--sip-s-3) var(--sip-s-4); }
}

.sip-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sip-grad-brand); color: #fff; font-weight: var(--sip-fw-bold); font-size: var(--sip-fs-sm); flex: none; }
.sip-avatar--sm { width: 30px; height: 30px; font-size: var(--sip-fs-2xs); }
.sip-avatar--lg { width: 56px; height: 56px; font-size: var(--sip-fs-lg); }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.sip-footer { background: var(--sip-primary-950); color: rgba(255,255,255,.66); position: relative; overflow: hidden; }
.sip-footer::before { content:""; position:absolute; inset:0; background: var(--sip-grad-mesh); opacity: .55; }
.sip-footer__inner { position: relative; padding-block: var(--sip-s-10) var(--sip-s-6); }
.sip-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sip-s-8); }
@media (max-width: 980px) { .sip-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sip-footer__grid { grid-template-columns: 1fr; } }
.sip-footer h4 { color: #fff; font-size: var(--sip-fs-sm); letter-spacing: var(--sip-ls-wide);
  text-transform: uppercase; margin-block-end: var(--sip-s-4); }
.sip-footer a { color: rgba(255,255,255,.74); font-size: var(--sip-fs-sm); transition: color var(--sip-t-fast) var(--sip-ease); display: inline-block; padding-block: 5px; }
.sip-footer a:hover { color: var(--sip-gold-400); }
.sip-footer__bottom { position: relative; border-block-start: 1px solid rgba(255,255,255,.10);
  padding-block: var(--sip-s-5); display: flex; align-items: center; justify-content: space-between;
  gap: var(--sip-s-4); flex-wrap: wrap; font-size: var(--sip-fs-xs); }
.sip-social { display: flex; gap: var(--sip-s-2); }
.sip-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 0;
  color: rgba(255,255,255,.82);
  transition: all var(--sip-t-base) var(--sip-ease); }
.sip-social a:hover { background: var(--sip-gold-500); color: #2A1B08; transform: translateY(-3px); border-color: transparent; }
.sip-social svg { width: 17px; height: 17px; }

/* ==========================================================================
   21. MISC COMPONENTS
   ========================================================================== */
.sip-qr { display: flex; align-items: center; gap: var(--sip-s-4); padding: var(--sip-s-4);
  border: 1px dashed var(--sip-border-strong); border-radius: var(--sip-r-md); background: var(--sip-bg-alt); }
.sip-qr__box { width: 84px; height: 84px; flex: none; border-radius: var(--sip-r-xs);
  background: var(--sip-surface); border: 1px solid var(--sip-border); display: grid; place-items: center; padding: 6px; }

.sip-tooltip { position: relative; }
.sip-tooltip::after {
  content: attr(data-tip); position: absolute; inset-block-end: calc(100% + 9px); inset-inline-start: 50%;
  transform: translateX(50%) translateY(4px); white-space: nowrap;
  background: var(--sip-n-900); color: #fff; font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-med);
  padding: 6px 11px; border-radius: var(--sip-r-xs); opacity: 0; pointer-events: none;
  transition: opacity var(--sip-t-fast) var(--sip-ease), transform var(--sip-t-fast) var(--sip-ease-out); z-index: var(--sip-z-dropdown);
}
[dir="ltr"] .sip-tooltip::after { transform: translateX(-50%) translateY(4px); }
.sip-tooltip:hover::after { opacity: 1; transform: translateX(50%) translateY(0); }
[dir="ltr"] .sip-tooltip:hover::after { transform: translateX(-50%) translateY(0); }

.sip-divider { display: flex; align-items: center; gap: var(--sip-s-4); color: var(--sip-text-mute); font-size: var(--sip-fs-xs); }
.sip-divider::before, .sip-divider::after { content:""; flex:1; height:1px; background: var(--sip-border); }

.sip-swatch { border-radius: var(--sip-r-md); overflow: hidden; border: 1px solid var(--sip-border); box-shadow: var(--sip-sh-xs); }
.sip-swatch__fill { height: 76px; }
.sip-swatch__meta { padding: .6rem .75rem; background: var(--sip-surface); font-size: var(--sip-fs-2xs); }
.sip-swatch__hex { font-family: var(--sip-font-en); color: var(--sip-text-mute); letter-spacing: .02em; }

.sip-scrolltop { position: fixed; inset-block-end: var(--sip-s-6); inset-inline-start: var(--sip-s-6);
  z-index: var(--sip-z-sticky); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: all var(--sip-t-base) var(--sip-ease-out); }
.sip-scrolltop.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.sip-skip { position: absolute; inset-inline-start: -9999px; z-index: var(--sip-z-toast); }
.sip-skip:focus { inset-inline-start: var(--sip-s-4); top: var(--sip-s-4); padding: .75rem 1.25rem;
  background: var(--sip-accent); color: var(--sip-on-accent); border-radius: var(--sip-r-sm); }

.sip-scroll-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: var(--sip-z-toast); }
.sip-scroll-progress span { display: block; height: 100%; width: 0; background: var(--sip-grad-dawn);
  transition: width 80ms linear; }

/* ==========================================================================
   22. ANIMATIONS
   ========================================================================== */
@keyframes sip-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sip-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sip-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sip-spin { to { transform: rotate(360deg); } }
@keyframes sip-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes sip-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes sip-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes sip-draw { to { stroke-dashoffset: 0; } }
@keyframes sip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sip-glow { 0%,100% { opacity: .35; } 50% { opacity: .7; } }

.sip-float { animation: sip-float 7s var(--sip-ease) infinite; }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition:
  opacity var(--sip-t-lazy) var(--sip-ease-out), transform var(--sip-t-lazy) var(--sip-ease-out); will-change: opacity, transform; }
[data-reveal="fade"] { transform: none; }
[data-reveal="zoom"] { transform: scale(.95); }
[data-reveal="start"] { transform: translateX(34px); }
[data-reveal="end"] { transform: translateX(-34px); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Parallax layer */
[data-parallax] { will-change: transform; }

/* ==========================================================================
   23. UTILITIES
   ========================================================================== */
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.u-hide { display: none !important; }
.u-center { text-align: center; }
.u-start { text-align: start; }
.u-end { text-align: end; }
.u-muted { color: var(--sip-text-mute); }
.u-soft { color: var(--sip-text-soft); }
.u-brand { color: var(--sip-text-brand); }
.u-num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
.u-en { font-family: var(--sip-font-en); direction: ltr; unicode-bidi: isolate; }
.u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.u-full { width: 100%; }
.u-rel { position: relative; }
.u-mt-0{margin-block-start:0}.u-mt-2{margin-block-start:var(--sip-s-2)}.u-mt-3{margin-block-start:var(--sip-s-3)}
.u-mt-4{margin-block-start:var(--sip-s-4)}.u-mt-5{margin-block-start:var(--sip-s-5)}.u-mt-6{margin-block-start:var(--sip-s-6)}
.u-mt-8{margin-block-start:var(--sip-s-8)}
.u-mb-2{margin-block-end:var(--sip-s-2)}.u-mb-3{margin-block-end:var(--sip-s-3)}.u-mb-4{margin-block-end:var(--sip-s-4)}
.u-mb-5{margin-block-end:var(--sip-s-5)}.u-mb-6{margin-block-end:var(--sip-s-6)}.u-mb-8{margin-block-end:var(--sip-s-8)}
.u-gap-2{gap:var(--sip-s-2)}.u-gap-3{gap:var(--sip-s-3)}.u-gap-4{gap:var(--sip-s-4)}
.u-gap-5{gap:var(--sip-s-5)}.u-gap-6{gap:var(--sip-s-6)}.u-gap-8{gap:var(--sip-s-8)}
.u-fs-xs{font-size:var(--sip-fs-xs)}.u-fs-sm{font-size:var(--sip-fs-sm)}.u-fs-lg{font-size:var(--sip-fs-lg)}
.u-fs-xl{font-size:var(--sip-fs-xl)}.u-fs-2xl{font-size:var(--sip-fs-2xl)}
.u-fw-med{font-weight:var(--sip-fw-med)}.u-fw-semi{font-weight:var(--sip-fw-semi)}.u-fw-bold{font-weight:var(--sip-fw-bold)}

@media (max-width: 900px) { .u-hide\@md { display: none !important; } }
@media (max-width: 680px) { .u-hide\@sm { display: none !important; } }
@media (min-width: 901px) { .u-only\@md { display: none !important; } }

/* Ultra-wide / 4K refinement */
@media (min-width: 1921px) {
  :root { --sip-container: 1560px; --sip-container-wide: 1920px; }
}

/* Print */
@media print {
  .sip-header, .sip-topbar, .sip-footer, .sip-side, .sip-scrolltop, .sip-drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .sip-card, .sip-table-wrap { box-shadow: none; border-color: #ccc; }
}

/* ==========================================================================
   20. REQUESTS INTELLIGENCE CENTER — مركز معلومات طلبات المنتجات
   ========================================================================== */
.sip-dialog--ric { position: fixed; inset: 0; z-index: var(--sip-z-modal); display: grid; place-items: center;
  padding: var(--sip-gutter); visibility: hidden; pointer-events: none; }
.sip-dialog--ric.is-open { visibility: visible; pointer-events: auto; }
.sip-dialog--ric .sip-dialog__scrim { position: absolute; inset: 0; background: var(--sip-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity var(--sip-t-base) var(--sip-ease); }
.sip-dialog--ric.is-open .sip-dialog__scrim { opacity: 1; }
.sip-dialog--ric .sip-dialog__panel { position: relative; width: min(860px, 100%);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl);
  box-shadow: var(--sip-sh-2xl); overflow: hidden; display: flex; flex-direction: column; max-height: min(90dvh, 900px);
  transform: translateY(-14px) scale(.98); opacity: 0;
  transition: transform var(--sip-t-base) var(--sip-ease-out), opacity var(--sip-t-base) var(--sip-ease); }
.sip-dialog--ric.is-open .sip-dialog__panel { transform: translateY(0) scale(1); opacity: 1; }
.sip-dialog--ric .sip-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sip-s-4);
  padding: var(--sip-s-5) var(--sip-s-6) var(--sip-s-4); border-block-end: 1px solid var(--sip-border); }
.sip-dialog--ric .sip-dialog__body { padding: var(--sip-s-5) var(--sip-s-6); overflow-y: auto; }
.sip-dialog--ric .sip-dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sip-s-3);
  padding: var(--sip-s-4) var(--sip-s-6); border-block-start: 1px solid var(--sip-border); background: var(--sip-bg-alt); }

.sip-code { font-family: var(--sip-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--sip-fs-2xs); line-height: 1.7; direction: ltr; padding: var(--sip-s-4);
  background: var(--sip-bg-sunken); border: 1px solid var(--sip-border); border-radius: var(--sip-r-sm); white-space: pre-wrap; word-break: break-all; }

/* --- toolbar (period + filters) --- */
.sip-ric-toolbar { display: flex; flex-direction: column; gap: var(--sip-s-3); }
.sip-ric-toolbar__row { display: flex; flex-wrap: wrap; gap: var(--sip-s-3); align-items: flex-end; }
.sip-ric-toolbar .sip-select { min-height: 40px; width: auto; padding-block: .35rem; font-size: var(--sip-fs-2xs); }
.sip-ric-toolbar .sip-field { gap: var(--sip-s-1); }
.sip-ric-toolbar .sip-label { font-size: var(--sip-fs-2xs); }
.sip-ric-count { display: inline-flex; align-items: center; gap: var(--sip-s-2); padding: .5rem 1rem;
  border-radius: 99px; background: var(--sip-accent-soft); color: var(--sip-text-brand); font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi); }
.sip-ric-activechip { display: inline-flex; align-items: center; gap: 6px; padding: .3rem .8rem; border-radius: 99px;
  background: var(--sip-gold-100); color: var(--sip-gold-700); border: 1px solid var(--sip-gold-200); font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-med); }

/* --- workflow stepper --- */
.sip-ric-flow { display: flex; gap: 0; overflow-x: auto; padding-block-end: var(--sip-s-3);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sip-ric-stage { flex: 1 1 0; min-width: 158px; scroll-snap-align: start; position: relative; }
.sip-ric-stage + .sip-ric-stage::before { content: ""; position: absolute; inset-inline-start: -13px; inset-block-start: 30px;
  width: 26px; height: 2px; background: linear-gradient(90deg, var(--sip-gold-500), var(--sip-gold-300));
  opacity: .5; z-index: 1; }
.sip-ric-stage__card { display: flex; flex-direction: column; gap: var(--sip-s-2); padding: var(--sip-s-3);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-md);
  transition: all var(--sip-t-base) var(--sip-ease-out); cursor: pointer; position: relative; height: 100%; }
.sip-ric-stage__card:hover { transform: translateY(-3px); box-shadow: var(--sip-sh-md); border-color: var(--sip-gold-500); }
.sip-ric-stage__card.is-active { border-color: var(--sip-accent); box-shadow: 0 0 0 3px var(--sip-ring); }
.sip-ric-stage__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-2); }
.sip-ric-stage__no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sip-grad-brand); color: #fff; font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-bold); }
.sip-ric-stage__name { font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi); color: var(--sip-text); line-height: 1.4; }
.sip-ric-stage__val { font-size: var(--sip-fs-lg); font-weight: var(--sip-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.sip-ric-stage__cap { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-ric-stage__mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sip-s-2); padding-block-start: var(--sip-s-2);
  border-block-start: 1px dashed var(--sip-border); }
.sip-ric-stage__mini b { font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi); font-variant-numeric: tabular-nums; }
.sip-ric-stage__mini span { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-ric-stage__bar { height: 5px; border-radius: 99px; background: var(--sip-bg-alt); overflow: hidden; }
.sip-ric-stage__bar i { display: block; height: 100%; border-radius: 99px; background: var(--sip-grad-gold); }
.sip-ric-stage__detail { display: none; margin-block-start: var(--sip-s-3); }
.sip-ric-stage__detail.is-open { display: block; }

/* --- governorate tiles --- */
.sip-ric-govmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sip-s-3); max-width: 860px; margin-inline: auto; }
.sip-ric-govtile { border-radius: var(--sip-r-md); padding: var(--sip-s-3); cursor: pointer; border: 1px solid var(--sip-border);
  display: flex; flex-direction: column; gap: 3px; background: var(--sip-gold-200); transition: transform var(--sip-t-base) var(--sip-ease), box-shadow var(--sip-t-base) var(--sip-ease); }
.sip-ric-govtile:hover { transform: translateY(-4px) scale(1.04); box-shadow: var(--sip-sh-lg); z-index: 2; }
.sip-ric-govtile.is-active { box-shadow: 0 0 0 3px var(--sip-ring); }
.sip-ric-govtile__n { font-weight: var(--sip-fw-bold); font-variant-numeric: tabular-nums; }
.sip-ric-heat { display: flex; align-items: center; justify-content: center; gap: var(--sip-s-2); font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-ric-heat__scale { height: 10px; width: 160px; border-radius: 99px; background: linear-gradient(90deg, var(--sip-gold-200), var(--sip-gold-500), var(--sip-clay-500), var(--sip-primary-700)); }

/* --- pct bars (sector / analysis rows) --- */
.sip-ric-pctrow { display: grid; grid-template-columns: 1fr auto; gap: var(--sip-s-2) var(--sip-s-3); align-items: center; padding: var(--sip-s-2) 0; }
.sip-ric-pctrow + .sip-ric-pctrow { border-block-start: 1px dashed var(--sip-border); }
.sip-ric-pctrow__bar { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: var(--sip-bg-alt); overflow: hidden; }
.sip-ric-pctrow__bar i { display: block; height: 100%; border-radius: 99px; background: var(--sip-grad-brand); transition: width 1s var(--sip-ease-out); }
.sip-ric-pctrow b { font-size: var(--sip-fs-xs); font-weight: var(--sip-fw-semi); font-variant-numeric: tabular-nums; }
.sip-ric-pctrow span { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }

/* --- mini metric tile --- */
.sip-ric-mini { padding: var(--sip-s-4); border-radius: var(--sip-r-md); background: var(--sip-surface);
  border: 1px solid var(--sip-border); display: flex; flex-direction: column; gap: var(--sip-s-2); }
.sip-ric-mini__val { font-size: var(--sip-fs-xl); font-weight: var(--sip-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.sip-ric-mini__cap { font-size: var(--sip-fs-2xs); color: var(--sip-text-mute); }
.sip-ric-mini__ico { width: 36px; height: 36px; border-radius: var(--sip-r-sm); display: grid; place-items: center; color: var(--sip-on-accent); background: var(--sip-grad-brand); }
.sip-ric-mini__ico svg { width: 18px; height: 18px; }
.sip-ric-mini__ico--gold { background: var(--sip-grad-gold); color: #2A1B08; }
.sip-ric-mini__ico--clay { background: var(--sip-grad-clay); color: #fff; }
.sip-ric-mini__ico--olive { background: var(--sip-grad-olive); color: #fff; }

/* --- alerts --- */
.sip-ric-alerts { display: flex; flex-direction: column; gap: var(--sip-s-3); }
.sip-ric-alert { display: flex; gap: var(--sip-s-3); align-items: flex-start; padding: var(--sip-s-4) var(--sip-s-5);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-inline-start: 3px solid var(--sip-gold-500);
  border-radius: var(--sip-r-md); transition: all var(--sip-t-base) var(--sip-ease); cursor: pointer; }
.sip-ric-alert:hover { transform: translateX(-3px); box-shadow: var(--sip-sh-md); }
.sip-ric-alert--danger { border-inline-start-color: var(--sip-danger); }
.sip-ric-alert--warning { border-inline-start-color: var(--sip-warning); }
.sip-ric-alert--info { border-inline-start-color: var(--sip-info); }
.sip-ric-alert--success { border-inline-start-color: var(--sip-success); }
.sip-ric-alert svg { width: 20px; height: 20px; flex: none; margin-block-start: 2px; }
.sip-ric-alert--danger svg { color: var(--sip-danger); }
.sip-ric-alert--warning svg { color: var(--sip-warning); }
.sip-ric-alert--info svg { color: var(--sip-info); }
.sip-ric-alert--success svg { color: var(--sip-success); }
.sip-ric-alert__title { font-weight: var(--sip-fw-semi); font-size: var(--sip-fs-sm); }
.sip-ric-alert__text { font-size: var(--sip-fs-xs); color: var(--sip-text-soft); margin-block-start: 2px; }

/* --- donut legends / small multi --- */
.sip-ric-legend { display: flex; flex-wrap: wrap; gap: var(--sip-s-3); font-size: var(--sip-fs-2xs); color: var(--sip-text-soft); }
.sip-ric-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sip-ric-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* --- table cell number pills --- */
.sip-ric-num { font-variant-numeric: tabular-nums; }

.sip-ric-rank { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sip-fs-2xs); font-weight: var(--sip-fw-semi); }
.sip-ric-rank--up { color: var(--sip-success); }
.sip-ric-rank--down { color: var(--sip-danger); }

.sip-ric-heroline { display: flex; align-items: center; gap: var(--sip-s-3); flex-wrap: wrap; }
.sip-ric-heroline h2 { font-size: var(--sip-fs-xl); }
.sip-ric-sectiontitle { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sip-s-3); margin-block-end: var(--sip-s-5); }
.sip-ric-sectiontitle h2 { font-size: var(--sip-fs-lg); }
.sip-ric-sectiontitle p { font-size: var(--sip-fs-xs); color: var(--sip-text-mute); margin-block-start: 4px; }

@media (max-width: 900px) { .sip-ric-govmap { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .sip-ric-govmap { grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media print {
  .sip-dialog--ric, .sip-drawer, .sip-appbar { display: none !important; }
  .sip-app { display: block; }
  .sip-ric-flow { overflow: visible; }
}

/* Made in Syria application enhancements */
.sip-field--span-2{grid-column:span 2}.sip-help{display:block;margin-top:6px;color:var(--sip-neutral-500,#667085);font-size:.75rem;line-height:1.5}@media(max-width:760px){.sip-field--span-2{grid-column:span 1}}


/* Academic local-content calculator */
.sip-lc-academic{display:grid;gap:var(--sip-s-5)}
.sip-lc-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sip-s-4)}
.sip-formula-card{display:grid;gap:.7rem;padding:1rem;border:1px solid var(--sip-border);border-radius:var(--sip-r-lg);background:var(--sip-surface-sunken)}
.sip-formula-card>div{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,2fr);gap:1rem;align-items:center}
.sip-formula-card code{direction:ltr;text-align:left;white-space:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--sip-surface);padding:.7rem .8rem;border-radius:var(--sip-r-md);border:1px dashed var(--sip-border);font-size:.86rem}
.sip-lc-cost-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sip-s-5)}
.sip-lc-cost-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sip-s-3);padding:var(--sip-s-4);border:1px solid var(--sip-border);border-radius:var(--sip-r-lg);background:var(--sip-surface)}
.sip-lc-cost-group h4{grid-column:1/-1;margin:0;padding-bottom:.6rem;border-bottom:1px solid var(--sip-border);font-size:1rem}
.sip-lc-audit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--sip-border);border:1px solid var(--sip-border);border-radius:var(--sip-r-lg);overflow:hidden}
.sip-lc-audit__row{background:var(--sip-surface);padding:1rem;display:grid;gap:.35rem}.sip-lc-audit__row span{font-size:.78rem;color:var(--sip-text-mute)}.sip-lc-audit__row b{font-size:1.05rem}
.sip-lc-equation-result{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--sip-r-md);background:var(--sip-surface-sunken);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;text-align:left;font-size:.86rem;overflow-wrap:anywhere}
@media(max-width:900px){.sip-lc-methods,.sip-lc-cost-grid{grid-template-columns:1fr}.sip-lc-audit{grid-template-columns:1fr 1fr}.sip-formula-card>div{grid-template-columns:1fr}.sip-lc-cost-group{grid-template-columns:1fr}.sip-lc-cost-group h4{grid-column:auto}}
@media(max-width:560px){.sip-lc-audit{grid-template-columns:1fr}}

/* Brand wizard: direct side navigation + local-content field explanations */
.sip-brand__steps li{cursor:pointer;user-select:none}
.sip-brand__steps li:hover{background:rgba(255,255,255,.09);color:#fff}
.sip-brand__steps{overflow-y:auto;overscroll-behavior:contain;padding-inline-end:3px}
.sip-brand__side{position:relative;overscroll-behavior:contain}
.sip-lc-help{position:relative}
.sip-lc-info{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:5px;border:1px solid var(--sip-border);border-radius:50%;font-size:11px;font-weight:700;color:var(--_g-700);background:var(--sip-surface);cursor:help}
.sip-lc-help::after{content:attr(data-help);position:absolute;z-index:40;inset-inline-start:0;bottom:calc(100% + 8px);width:min(330px,90vw);padding:10px 12px;border-radius:10px;background:var(--_g-950);color:#fff;font-size:12px;line-height:1.7;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(4px);transition:.16s ease;pointer-events:none}
.sip-lc-help:hover::after,.sip-lc-help:focus-within::after{opacity:1;visibility:visible;transform:none}
.sip-lc-input-unit{display:flex;align-items:stretch;direction:ltr}
.sip-lc-input-unit .sip-input{border-start-end-radius:0;border-end-end-radius:0;min-width:0}
.sip-lc-input-unit>[data-lc-money-unit]{display:flex;align-items:center;justify-content:center;min-width:68px;padding-inline:10px;border:1px solid var(--sip-border);border-inline-start:0;border-start-end-radius:var(--sip-r-md);border-end-end-radius:var(--sip-r-md);background:var(--sip-bg-alt);font-size:12px;font-weight:700;color:var(--sip-text-soft);white-space:nowrap;direction:rtl}
.sip-formula-card small{display:block;margin-top:6px;color:var(--sip-text-soft);font-size:11px}
@media (max-width:920px) and (min-width:681px){
  .sip-brand__shell{grid-template-columns:220px minmax(0,1fr)}
  .sip-brand__side{display:flex;padding:var(--sip-s-4) var(--sip-s-3)}
  .sip-brand__steps li{font-size:12px;padding:8px}
  .sip-brand__note{display:none}
}
@media (max-width:680px){
  .sip-brand__shell{grid-template-columns:160px minmax(0,1fr)}
  .sip-brand__side{display:flex;padding:12px 8px;gap:10px}
  .sip-brand__brand-en,.sip-brand__crumb,.sip-brand__note{display:none}
  .sip-brand__brand-ar{font-size:13px}
  .sip-brand__steps{gap:2px}
  .sip-brand__steps li{font-size:11px;padding:7px 5px;gap:6px}
  .sip-brand__steps .n{width:22px;height:22px;font-size:10px}
  .sip-brand__body{padding:var(--sip-s-3)}
}

/* 2026-08 — Brand application: viewport-fit responsive layout */
.sip-brand__main{height:100dvh;min-height:0;overflow:hidden}
.sip-brand__head{flex:0 0 auto;padding:clamp(12px,1.7vh,22px) clamp(16px,2.2vw,34px)}
.sip-brand__head h2{font-size:clamp(1.15rem,1.7vw,1.6rem)}
.sip-brand__sub{font-size:clamp(.72rem,.9vw,.82rem)}
.sip-brand__body{
  flex:1 1 auto;min-height:0;overflow:auto;
  padding:clamp(12px,1.8vh,24px) clamp(14px,2.2vw,34px);
  scrollbar-gutter:stable;
}
.sip-brand__foot{flex:0 0 auto;padding:clamp(10px,1.4vh,18px) clamp(14px,2.2vw,34px)}
.sip-brand__step.is-current{min-height:100%;box-sizing:border-box}
.sip-brand__stage-title{margin-block-end:clamp(10px,1.4vh,18px)}
.sip-brand__stage-title .ico{width:clamp(34px,4.2vh,42px);height:clamp(34px,4.2vh,42px)}
.sip-brand__stage-title h3{font-size:clamp(1rem,1.25vw,1.2rem)}
.sip-brand__stage-title p{font-size:clamp(.72rem,.85vw,.8rem)}
.sip-brand .sip-onboard__panel{
  padding:clamp(12px,1.7vh,20px);
  border-radius:clamp(10px,1vw,16px);
}
.sip-brand__step .sip-onboard__panel + .sip-onboard__panel,
.sip-brand__phase .sip-onboard__panel + .sip-onboard__panel{margin-block-start:clamp(10px,1.4vh,18px)}
.sip-brand .sip-grid{gap:clamp(10px,1.25vw,18px)}
.sip-brand .sip-grid--2{grid-template-columns:repeat(2,minmax(220px,1fr))}
.sip-brand .sip-grid--3{grid-template-columns:repeat(3,minmax(190px,1fr))}
.sip-brand .sip-grid--4{grid-template-columns:repeat(4,minmax(160px,1fr))}
.sip-brand .sip-grid--auto,
.sip-brand .sip-grid--auto-sm,
.sip-brand .sip-grid--auto-lg{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.sip-brand .sip-field{min-width:0;gap:6px}
.sip-brand .sip-label{font-size:clamp(.78rem,.85vw,.88rem);line-height:1.35}
.sip-brand .sip-input,
.sip-brand .sip-select,
.sip-brand .sip-textarea{
  min-width:0;max-width:100%;
  min-height:clamp(40px,5.2vh,48px);
  padding-block:clamp(.55rem,1vh,.8rem);
  padding-inline:clamp(.75rem,1vw,1.05rem);
  font-size:clamp(.78rem,.9vw,.9rem)
}
.sip-brand .sip-select{padding-inline-end:2.5rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.sip-brand .sip-textarea{min-height:clamp(82px,12vh,128px)}
.sip-brand select option{white-space:normal;overflow-wrap:anywhere}
.sip-brand .sip-proto{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:8px clamp(14px,2vw,28px)}
.sip-brand .sip-product,.sip-brand .sip-doc,.sip-brand .sip-act{min-width:0}
.sip-brand__panel-head{margin-block-end:clamp(10px,1.2vh,16px)}
.sip-brand__panel-foot{margin-block-start:clamp(10px,1.2vh,16px)}
.sip-brand__steps li span:last-child{min-width:0;overflow-wrap:anywhere}

@media (min-width:1200px) and (max-height:820px){
  .sip-brand__shell{grid-template-columns:260px minmax(0,1fr)}
  .sip-brand__side{padding:16px 14px;gap:10px}
  .sip-brand__brand-ar{font-size:.92rem}
  .sip-brand__steps{gap:2px}
  .sip-brand__steps li{padding:7px 9px;font-size:.75rem}
  .sip-brand__steps .n{width:23px;height:23px;font-size:.66rem}
  .sip-brand__note{padding:10px;font-size:.68rem;line-height:1.5}
}
@media (max-width:1100px){
  .sip-brand .sip-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sip-brand .sip-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .sip-brand__head{padding:12px 14px;gap:10px}
  .sip-brand__body{padding:12px}
  .sip-brand__foot{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .sip-brand .sip-grid--2,.sip-brand .sip-grid--3,.sip-brand .sip-grid--4{grid-template-columns:1fr}
  .sip-brand .sip-field--span-2{grid-column:auto}
  .sip-brand__progress-wrap{min-width:100%}
}
@media (max-width:620px){
  .sip-brand__shell{grid-template-columns:116px minmax(0,1fr)}
  .sip-brand__side{padding:10px 6px}
  .sip-brand__brand img{width:30px!important;height:30px!important}
  .sip-brand__brand-ar{font-size:11px}
  .sip-brand__steps li{padding:7px 4px;font-size:10px;line-height:1.25;gap:4px}
  .sip-brand__steps .n{width:20px;height:20px;font-size:9px}
  .sip-brand__head h2{font-size:1rem}
  .sip-brand__sub{display:none}
  .sip-brand__stage-title .ico{display:none}
  .sip-brand__stage-title{align-items:flex-start}
  .sip-brand .sip-onboard__panel{padding:10px}
  .sip-btn--nav{min-height:40px;padding-inline:14px}
}

/* HS Code smart selector */
.sip-hs-field{position:relative}.sip-hs-combo{position:relative}.sip-hs-results{position:absolute;z-index:90;inset-inline:0;top:calc(100% + 6px);max-height:min(420px,48vh);overflow:auto;background:var(--sip-surface,#fff);border:1px solid var(--sip-border,#d7dce3);border-radius:14px;box-shadow:0 18px 44px rgba(15,23,42,.16);padding:6px}.sip-hs-option{display:grid;grid-template-columns:120px minmax(180px,1fr) minmax(180px,1fr);gap:10px;width:100%;border:0;background:transparent;text-align:start;padding:10px 12px;border-radius:10px;cursor:pointer;font:inherit;color:inherit;align-items:start}.sip-hs-option:hover,.sip-hs-option.is-active{background:rgba(21,101,192,.08)}.sip-hs-option__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;text-align:left;font-weight:800;color:var(--sip-primary,#174ea6)}.sip-hs-option__desc{font-weight:700}.sip-hs-option__trade{color:var(--sip-muted,#667085)}.sip-hs-empty{padding:16px;text-align:center;color:var(--sip-muted,#667085)}.sip-hs-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.sip-hs-meta>div{background:rgba(15,23,42,.035);border:1px solid rgba(15,23,42,.08);border-radius:10px;padding:8px 10px;min-width:0}.sip-hs-meta span{display:block;font-size:.72rem;color:var(--sip-muted,#667085);margin-bottom:3px}.sip-hs-meta b{display:block;font-size:.82rem;line-height:1.45;white-space:normal;overflow-wrap:anywhere}@media(max-width:820px){.sip-hs-option{grid-template-columns:1fr;gap:3px}.sip-hs-option__code{text-align:start}.sip-hs-meta{grid-template-columns:1fr}.sip-hs-results{max-height:55vh}}

/* Product journey entry from National Product Directory */
.sip-dir-card__journey{padding-top:10px;margin-top:8px;border-top:1px solid var(--sip-border, #e8e1e3)}
.sip-dir-card__journey-btn{width:100%;justify-content:center;position:relative;z-index:3}
@media (max-width:640px){.sip-dir-card__journey-btn{min-height:42px;font-size:13px}}
.sip-preferences{display:inline-flex;align-items:center;gap:6px;direction:ltr;flex:0 0 auto}
.sip-preference-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--sip-border);border-radius:999px;background:var(--sip-surface);box-shadow:0 1px 2px rgba(31,20,23,.04)}
.sip-preference-switch__option{min-width:29px;height:22px;padding:0 7px;border:0;border-radius:999px;display:inline-grid;place-items:center;background:transparent;color:var(--sip-text-mute);font:600 12px/1 var(--sip-font,system-ui,sans-serif);text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.sip-preference-switch__option:hover{color:var(--sip-text-brand);background:var(--sip-bg-alt)}
.sip-preference-switch__option.is-on{color:#fff;background:var(--sip-primary-700);box-shadow:0 1px 3px color-mix(in srgb,var(--sip-primary-700) 30%,transparent)}
.sip-preference-switch__option:focus-visible{outline:2px solid var(--sip-ring);outline-offset:2px}
[data-theme="light"] .sip-preference-switch__option[data-theme-choice="light"],[data-theme="dark"] .sip-preference-switch__option[data-theme-choice="dark"]{color:#fff;background:var(--sip-primary-700);box-shadow:0 1px 3px color-mix(in srgb,var(--sip-primary-700) 30%,transparent)}
@media(max-width:640px){.sip-preferences{gap:4px}.sip-preference-switch{padding:2px}.sip-preference-switch__option{min-width:27px;height:21px;padding-inline:6px}}

/* =====================================================================
 * Syrian Made — Portal hero (centered): tagline, CTA row, live stats bar,
 * trust cards. Added to match the national-portal hero reference design.
 * Background photo is optional (hero_image setting); the royal-burgundy
 * wash + mesh + flag motif render when no photo is set.
 * ===================================================================== */
.sip-btn--olive { --_fg: #fff; --_bd: transparent; background: var(--sip-grad-olive); box-shadow: 0 14px 32px -10px rgba(80,85,35,.46); }
.sip-btn--olive:hover { box-shadow: 0 18px 40px -12px rgba(80,85,35,.55); }

.sip-hero--portal { text-align: center; overflow: hidden; }
.sip-hero--portal .sip-hero__content { padding-block: clamp(3.5rem, 2.6rem + 5vw, 6.5rem); }
.sip-hero__content--center { display: flex; flex-direction: column; align-items: center; }
.sip-hero--portal .sip-eyebrow { margin-inline: auto; }

/* Decorative Syrian flag motif (subtle, behind content) */
.sip-hero__flag { position: absolute; inset-inline-end: clamp(-3rem, -1rem - 3vw, 1rem); top: clamp(2rem, 6vw, 5rem);
  width: clamp(140px, 22vw, 300px); aspect-ratio: 3 / 2; z-index: -1; opacity: .16; pointer-events: none;
  border-radius: 10px; overflow: hidden; filter: saturate(1.05); -webkit-mask-image: radial-gradient(120% 120% at 70% 30%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 120% at 70% 30%, #000 55%, transparent 100%); }
.sip-hero__flag svg { width: 100%; height: 100%; display: block; }
[dir="rtl"] .sip-hero__flag { inset-inline-start: clamp(-3rem, -1rem - 3vw, 1rem); inset-inline-end: auto; }

.sip-hero__title--display { max-width: none; margin-block: var(--sip-s-4) var(--sip-s-3);
  font-size: clamp(2.6rem, 1.7rem + 6vw, 5.25rem); font-weight: 800; letter-spacing: -.01em; color: #fff; }
.sip-hero__tagline { font-size: clamp(1.05rem, .9rem + 1vw, 1.6rem); font-weight: 700; line-height: 1.4;
  background: var(--sip-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 auto var(--sip-s-4); max-width: 46ch; }
.sip-hero__sub--center { margin-inline: auto; text-align: center; }

/* CTA row */
.sip-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sip-s-3); margin-top: var(--sip-s-7); }
.sip-hero__ctas .sip-btn svg { width: 1.15em; height: 1.15em; }

/* Live stats bar */
.sip-herostats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; width: 100%;
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sip-herostat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: clamp(1rem, .7rem + 1vw, 1.6rem) clamp(.5rem, .3rem + .6vw, 1rem);
  background: linear-gradient(180deg, rgba(60,3,18,.72), rgba(40,2,12,.82)); }
.sip-herostat__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--sip-grad-gold); color: #2A1B08; margin-bottom: 2px; }
.sip-herostat__icon svg { width: 20px; height: 20px; }
.sip-herostat__label { font-size: var(--sip-fs-xs); color: rgba(255,255,255,.72); line-height: 1.35; }
.sip-herostat__value { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; color: var(--sip-gold-300); line-height: 1.05; font-feature-settings: "tnum"; }
.sip-herostat__unit { font-size: var(--sip-fs-xs); color: rgba(255,255,255,.55); }

/* Trust / benefits strip — same look as the journey benefits card it
   replaced: one rounded dark panel, thin dividers, circular pink-tinted icons. */
.sip-herotrust { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: var(--sip-s-3); width: 100%;
  margin-top: var(--sip-s-4); padding: var(--sip-s-5) var(--sip-s-4);
  border-radius: var(--sip-r-xl); border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); }
.sip-herotrust__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding-inline: var(--sip-s-3); }
.sip-herotrust__item:not(:last-child) { border-inline-end: 1px solid rgba(255,255,255,.12); }
.sip-herotrust__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--sip-primary-700);
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.sip-herotrust__icon svg { width: 21px; height: 21px; }
.sip-herotrust__title { font-size: var(--sip-fs-sm); font-weight: 700; color: #fff; line-height: 1.45; max-width: 22ch; }
.sip-herotrust__desc { font-size: var(--sip-fs-xs); color: rgba(255,255,255,.65); line-height: 1.45; }

@media (max-width: 900px) {
  .sip-herostats { grid-template-columns: repeat(3, 1fr); }
  .sip-herotrust { grid-template-columns: repeat(3, 1fr); }
  .sip-herotrust__item { border-inline-end: 0 !important; }
}
@media (max-width: 560px) {
  .sip-herostats { grid-template-columns: repeat(2, 1fr); }
  .sip-herotrust { grid-template-columns: repeat(2, 1fr); }
  .sip-hero__ctas .sip-btn { flex: 1 1 100%; justify-content: center; }
}

/* =====================================================================
 * Syrian Made — Product journey ("How a product earns the mark"):
 * numbered step cards with tone-coloured badges, a benefits strip, and
 * a closing CTA. Replaces the old "Digital services" features section.
 * Theme-aware via design tokens; steps wrap responsively.
 * ===================================================================== */
.sip-journey__grid { list-style: none; margin: clamp(2rem, 1.4rem + 2.5vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sip-s-4); align-items: stretch; }
/* Two rows on desktop (5 + 4): the 9 steps were too narrow in a single row.
   The last row is centred so step 9 doesn't leave a hole at the edge. */
@media (min-width: 1201px) {
  .sip-journey__grid { grid-template-columns: repeat(10, 1fr); }
  .sip-journey__step { grid-column: span 2; }
  .sip-journey__step:nth-child(6) { grid-column: 2 / span 2; }
  .sip-journey__step:nth-child(5)::after, .sip-journey__step:nth-child(9)::after { display: none; }
}
.sip-journey__step { --_c: var(--sip-clay-500); --_g: var(--sip-grad-clay); --_num-fg: #fff;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: calc(var(--sip-s-6) + 6px) var(--sip-s-3) var(--sip-s-4);
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-lg);
  box-shadow: var(--sip-sh-xs); transition: transform var(--sip-t-base, .2s) ease, box-shadow var(--sip-t-base, .2s) ease; }
.sip-journey__step:hover { transform: translateY(-4px); box-shadow: var(--sip-sh-md); }
.sip-journey__step--clay  { --_c: #BF4A26; --_g: var(--sip-grad-clay); }
.sip-journey__step--olive { --_c: #505523; --_g: var(--sip-grad-olive); }
.sip-journey__step--gold  { --_c: #8A6D3B; --_g: var(--sip-grad-gold);  --_num-fg: #2A1B08; }
.sip-journey__step--brand { --_c: #64051C; --_g: var(--sip-grad-brand); }
.sip-journey__step--dawn  { --_c: #9E3C1E; --_g: var(--sip-grad-dawn); }
.sip-journey__num { position: absolute; top: -14px; inset-inline-start: 50%; transform: translateX(50%);
  min-width: 40px; height: 27px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--sip-fs-sm); letter-spacing: .02em; color: var(--_num-fg);
  background: var(--_g); border-radius: 9px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--_c) 60%, transparent); }
[dir="rtl"] .sip-journey__num { transform: translateX(-50%); }
.sip-journey__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-top: 4px;
  color: var(--_c); background: color-mix(in srgb, var(--_c) 12%, var(--sip-surface));
  border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent); }
.sip-journey__ico svg { width: 23px; height: 23px; }
.sip-journey__title { font-size: var(--sip-fs-sm); font-weight: 700; line-height: 1.35; color: var(--sip-text, #1c1116); }
.sip-journey__desc { font-size: var(--sip-fs-xs); line-height: 1.5; color: var(--sip-text-soft); }
/* Flow arrow between steps (single-row desktop layout only) */
.sip-journey__step:not(:last-child)::after { content: ""; position: absolute; top: 34px; inset-inline-start: -11px;
  width: 14px; height: 14px; background: var(--sip-text-mute); opacity: .5; z-index: 1;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
[dir="ltr"] .sip-journey__step:not(:last-child)::after { transform: scaleX(-1); }

/* Benefits strip */
.sip-journey__benefits { margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sip-s-3);
  padding: var(--sip-s-5) var(--sip-s-4); border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl);
  background: color-mix(in srgb, var(--sip-primary-700) 4%, var(--sip-surface)); }
.sip-journey__benefit { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding-inline: var(--sip-s-3); }
.sip-journey__benefit:not(:last-child) { border-inline-end: 1px solid var(--sip-border); }
.sip-journey__benefit-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--sip-primary-700); background: color-mix(in srgb, var(--sip-primary-700) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--sip-primary-700) 18%, transparent); }
.sip-journey__benefit-ico svg { width: 20px; height: 20px; }
.sip-journey__benefit-txt { font-size: var(--sip-fs-xs); font-weight: 600; line-height: 1.45; color: var(--sip-text-soft); max-width: 20ch; }

/* Closing CTA */
.sip-journey__cta { margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); text-align: center; }
.sip-journey__cta .sip-btn svg { width: 1.1em; height: 1.1em; }
.sip-journey__cta-note { margin-top: var(--sip-s-3); font-size: var(--sip-fs-sm); color: var(--sip-text-soft); }

@media (max-width: 1200px) {
  .sip-journey__grid { grid-template-columns: repeat(5, 1fr); }
  .sip-journey__step:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
  .sip-journey__grid { grid-template-columns: repeat(3, 1fr); }
  .sip-journey__benefits { grid-template-columns: repeat(3, 1fr); gap: var(--sip-s-4); }
  .sip-journey__benefit:nth-child(3n)::after, .sip-journey__benefit:last-child { border-inline-end: 0; }
  .sip-journey__benefit { border-inline-end: 0 !important; }
}
@media (max-width: 560px) {
  .sip-journey__grid { grid-template-columns: repeat(2, 1fr); }
  .sip-journey__benefits { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
 * Syrian Made — Local-content methodology ("How we measure Syrian-made
 * value"): a media + header band above three tone-coded "track" cards
 * (Path A / B / C). Uses the STATS panel type with variant local_content.
 * Image is optional (image setting); a branded fallback renders otherwise.
 * ===================================================================== */
.sip-lcv__top { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.sip-lcv__media { order: 2; position: relative; border-radius: var(--sip-r-2xl); overflow: hidden;
  min-height: clamp(240px, 30vw, 420px); background: var(--sip-grad-royal); box-shadow: var(--sip-sh-lg);
  display: grid; place-items: center; }
.sip-lcv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sip-lcv__media-motif { color: rgba(255,255,255,.22); }
.sip-lcv__media-motif svg { width: clamp(64px, 8vw, 104px); height: clamp(64px, 8vw, 104px); }
.sip-lcv__head { order: 1; }
.sip-lcv__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--sip-fs-xs);
  color: var(--sip-text-mute); margin-bottom: var(--sip-s-4); }
.sip-lcv__crumbs a { color: var(--sip-text-soft); text-decoration: none; }
.sip-lcv__crumbs a:hover { color: var(--sip-text-brand); }
.sip-lcv__title { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); font-weight: 700; line-height: 1.18;
  color: var(--sip-text-brand); margin: 0; }
.sip-lcv__title span { display: block; font-weight: 800; }
.sip-lcv__tagline { margin: var(--sip-s-4) 0 var(--sip-s-3); font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
  font-weight: 700; color: var(--sip-gold-500); line-height: 1.5; }
.sip-lcv__desc { color: var(--sip-text-soft); font-size: var(--sip-fs-md); line-height: var(--sip-lh-base, 1.7); max-width: 60ch; }
.sip-lcv__ornament { display: block; height: 12px; margin-top: var(--sip-s-6); position: relative;
  background: linear-gradient(90deg, transparent, var(--sip-gold-500), transparent); background-size: 100% 1px;
  background-position: center; background-repeat: no-repeat; }
.sip-lcv__ornament::after { content: ""; position: absolute; inset-inline-start: 50%; top: 50%;
  width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); background: var(--sip-gold-500); border-radius: 2px; }

/* Track cards */
.sip-lcv__tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sip-s-5);
  margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
.sip-lcv-track { --_c: var(--sip-primary-700); --_g: var(--sip-grad-brand); --_badge-fg: #fff;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sip-s-3);
  padding: calc(var(--sip-s-7) + 4px) var(--sip-s-5) var(--sip-s-5); background: var(--sip-surface);
  border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl); box-shadow: var(--sip-sh-sm);
  transition: transform var(--sip-t-base, .2s) ease, box-shadow var(--sip-t-base, .2s) ease; }
.sip-lcv-track:hover { transform: translateY(-4px); box-shadow: var(--sip-sh-lg); }
.sip-lcv-track--brand { --_c: #64051C; --_g: var(--sip-grad-brand); }
.sip-lcv-track--gold  { --_c: #8A6D3B; --_g: var(--sip-grad-gold);  --_badge-fg: #2A1B08; }
.sip-lcv-track--olive { --_c: #505523; --_g: var(--sip-grad-olive); }
.sip-lcv-track--clay  { --_c: #BF4A26; --_g: var(--sip-grad-clay); }
.sip-lcv-track__badge { position: absolute; top: -15px; inset-inline-start: 50%; transform: translateX(-50%);
  min-width: 96px; height: 30px; padding: 0 var(--sip-s-4); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--sip-fs-sm); letter-spacing: .02em; white-space: nowrap; color: var(--_badge-fg);
  background: var(--_g); border-radius: 10px; box-shadow: 0 8px 18px -7px color-mix(in srgb, var(--_c) 60%, transparent); }
.sip-lcv-track__title { font-size: var(--sip-fs-lg); font-weight: 800; line-height: 1.35; color: var(--_c); margin: 0; }
.sip-lcv-track__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin: var(--sip-s-2) 0;
  color: var(--_c); background: color-mix(in srgb, var(--_c) 12%, var(--sip-surface));
  border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent); }
.sip-lcv-track__ico svg { width: 32px; height: 32px; }
.sip-lcv-track__desc { color: var(--sip-text-soft); font-size: var(--sip-fs-sm); line-height: 1.6; flex: 1 0 auto; }
.sip-lcv-track__foot { display: block; width: 100%; margin-top: var(--sip-s-2); padding: var(--sip-s-3) var(--sip-s-4);
  font-size: var(--sip-fs-xs); font-weight: 700; line-height: 1.5; color: var(--_c); border-radius: var(--sip-r-md);
  background: color-mix(in srgb, var(--_c) 9%, var(--sip-surface)); border: 1px solid color-mix(in srgb, var(--_c) 18%, transparent); }

@media (max-width: 860px) {
  .sip-lcv__top { grid-template-columns: 1fr; }
  .sip-lcv__media { order: 1; min-height: 220px; }
  .sip-lcv__head { order: 2; }
  .sip-lcv__tracks { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* Dark-theme readability: lighten the per-tone accent (--_c) used for titles,
 * icons, and footers on the journey steps and local-content tracks, so brand
 * (dark burgundy) text/icons stay legible on dark card surfaces. */
[data-theme="dark"] .sip-lcv-track--brand,
[data-theme="dark"] .sip-journey__step--brand { --_c: color-mix(in srgb, #64051C 45%, #fff); }
[data-theme="dark"] .sip-lcv-track--clay,
[data-theme="dark"] .sip-journey__step--clay  { --_c: #E69C82; }
[data-theme="dark"] .sip-lcv-track--olive,
[data-theme="dark"] .sip-journey__step--olive { --_c: #BDC48D; }
[data-theme="dark"] .sip-lcv-track--gold,
[data-theme="dark"] .sip-journey__step--gold  { --_c: #DDC59A; }
[data-theme="dark"] .sip-lcv-track--dawn,
[data-theme="dark"] .sip-journey__step--dawn  { --_c: #E6A08A; }

/* =====================================================================
 * Syrian Made — Live figures on the industrial-map section (real product
 * and application counts, "Syrian industry in numbers").
 * ===================================================================== */
.sip-map-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sip-s-3);
  margin-block: var(--sip-s-6) var(--sip-s-6); }
.sip-map-figure { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: var(--sip-s-4) var(--sip-s-3); background: var(--sip-surface); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-lg); box-shadow: var(--sip-sh-xs); }
.sip-map-figure__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--sip-grad-gold); color: #2A1B08; margin-bottom: 2px; }
.sip-map-figure__ico svg { width: 19px; height: 19px; }
.sip-map-figure__value { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; color: var(--sip-text-brand);
  line-height: 1.05; font-feature-settings: "tnum"; }
.sip-map-figure__label { font-size: var(--sip-fs-xs); color: var(--sip-text-soft); }
@media (max-width: 640px) { .sip-map-figures { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
 * Syrian Made — Knowledge Center page: hero (book + bulb motif),
 * search/filter toolbar, card grid with PDF downloads, and benefits row.
 * ===================================================================== */
.sip-know-hero__motif { position: absolute; z-index: -1; top: clamp(1.5rem, 4vw, 3.5rem);
  inset-inline-end: clamp(1rem, 5vw, 5rem); color: var(--sip-gold-300); opacity: .2; pointer-events: none; }
.sip-know-hero__motif .sip-know-hero__book { width: clamp(96px, 12vw, 150px); height: clamp(96px, 12vw, 150px); display: block; }
.sip-know-hero__motif .sip-know-hero__bulb { position: absolute; top: -14%; inset-inline-start: 50%; transform: translateX(-50%);
  width: clamp(38px, 4.5vw, 58px); height: clamp(38px, 4.5vw, 58px); }

/* Toolbar */
.sip-know__toolbar { display: flex; flex-wrap: wrap; gap: var(--sip-s-3); align-items: stretch;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.sip-know__search { flex: 1 1 320px; display: flex; align-items: center; gap: var(--sip-s-3);
  padding: 0 var(--sip-s-5); background: var(--sip-surface); border: 1px solid var(--sip-border);
  border-radius: var(--sip-r-pill); box-shadow: var(--sip-sh-xs); }
.sip-know__search:focus-within { border-color: var(--sip-accent, var(--sip-primary-700)); box-shadow: 0 0 0 3px var(--sip-ring, rgba(100,5,28,.18)); }
.sip-know__search svg { width: 20px; height: 20px; color: var(--sip-text-mute); flex: none; }
.sip-know__search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: inherit;
  font: inherit; padding-block: clamp(.8rem, .6rem + .5vw, 1.05rem); }
.sip-know__filter { flex: 0 0 auto; min-width: 190px; padding: 0 var(--sip-s-5); font: inherit; color: inherit;
  background: var(--sip-surface); border: 1px solid var(--sip-border); border-radius: var(--sip-r-pill);
  box-shadow: var(--sip-sh-xs); cursor: pointer; }

/* Card grid */
.sip-know__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sip-s-4); }
.sip-know-card { --_c: var(--sip-primary-700); display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sip-s-2); padding: var(--sip-s-6) var(--sip-s-4) var(--sip-s-5); background: var(--sip-surface);
  border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl); box-shadow: var(--sip-sh-xs);
  transition: transform var(--sip-t-base, .2s) ease, box-shadow var(--sip-t-base, .2s) ease, border-color var(--sip-t-base, .2s) ease; }
.sip-know-card:hover { transform: translateY(-4px); box-shadow: var(--sip-sh-md); border-color: color-mix(in srgb, var(--_c) 30%, var(--sip-border)); }
.sip-know-card--brand { --_c: #64051C; }
.sip-know-card--clay  { --_c: #BF4A26; }
.sip-know-card--olive { --_c: #505523; }
.sip-know-card--gold  { --_c: #8A6D3B; }
.sip-know-card__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: var(--_c);
  background: color-mix(in srgb, var(--_c) 10%, var(--sip-surface)); border: 1px solid color-mix(in srgb, var(--_c) 20%, transparent); }
.sip-know-card__ico svg { width: 27px; height: 27px; }
.sip-know-card__title { font-size: var(--sip-fs-md); font-weight: 700; line-height: 1.4; color: var(--sip-text-brand); margin: var(--sip-s-1) 0 0; }
.sip-know-card__desc { font-size: var(--sip-fs-xs); line-height: 1.6; color: var(--sip-text-soft); flex: 1 0 auto; }
.sip-know-card__dl { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sip-s-2); font-size: var(--sip-fs-xs);
  font-weight: 700; color: var(--_c); text-decoration: none; }
.sip-know-card__dl svg { width: 15px; height: 15px; }
.sip-know-card__dl:hover { text-decoration: underline; }
.sip-know__empty { grid-column: 1 / -1; text-align: center; color: var(--sip-text-soft); padding: var(--sip-s-8) 0; }

/* Benefits row */
.sip-know__benefits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; overflow: hidden;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); border: 1px solid var(--sip-border); border-radius: var(--sip-r-xl);
  background: color-mix(in srgb, var(--sip-primary-700) 4%, var(--sip-surface)); }
.sip-know__benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: var(--sip-s-5) var(--sip-s-3); }
.sip-know__benefit:not(:last-child) { border-inline-end: 1px solid var(--sip-border); }
.sip-know__benefit-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--sip-primary-700); background: color-mix(in srgb, var(--sip-primary-700) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--sip-primary-700) 18%, transparent); }
.sip-know__benefit-ico svg { width: 20px; height: 20px; }
.sip-know__benefit-title { font-size: var(--sip-fs-sm); font-weight: 700; color: var(--sip-text-brand); }
.sip-know__benefit-desc { font-size: var(--sip-fs-xs); line-height: 1.5; color: var(--sip-text-soft); max-width: 22ch; }

@media (max-width: 1100px) { .sip-know__grid { grid-template-columns: repeat(3, 1fr); } .sip-know__benefits { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sip-know__grid { grid-template-columns: repeat(2, 1fr); } .sip-know__benefits { grid-template-columns: repeat(2, 1fr); } .sip-know__benefit { border-inline-end: 0 !important; } }
@media (max-width: 460px)  { .sip-know__grid { grid-template-columns: 1fr; } }

/* Portal hero with a background photo: let the image read through more than the
 * default hero wash, while keeping a burgundy gradient for white-text legibility. */
.sip-hero--portal .sip-hero__bg img { opacity: .55; }
.sip-hero--portal .sip-hero__wash { opacity: 1;
  background: linear-gradient(175deg, rgba(64,5,22,.50) 0%, rgba(64,5,22,.78) 55%, rgba(40,3,14,.92) 100%); }


/* =========================================================================
 * Syrian Made — Hero sector strip («استكشف القطاعات الصناعية»)
 * Live cards from sip_sectors (24 manufacturing divisions). Horizontal
 * scroll-snap track with prev/next arrows; image per sector (sip_sectors.image,
 * placeholder JPGs under vendor/sip/img/sectors/{code}.jpg until real photos
 * are uploaded) + icon (sprite #i-s-*) + name + live product count.
 * ========================================================================= */
.sip-sectors { width: 100%; margin-top: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); text-align: start; }
.sip-sectors__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-4); margin-bottom: var(--sip-s-4); }
.sip-sectors__title { display: flex; align-items: center; gap: 12px; margin: 0; color: #fff; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; }
.sip-sectors__title::after { content: ""; flex: 0 0 clamp(40px, 6vw, 110px); height: 1px; background: linear-gradient(to var(--sip-end, left), var(--sip-gold-500), transparent); opacity: .8; }
[dir="rtl"] .sip-sectors__title::after { --sip-end: left; } [dir="ltr"] .sip-sectors__title::after { --sip-end: right; }
.sip-sectors__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sip-gold-500); box-shadow: 0 0 0 4px rgba(188,151,97,.22); }
.sip-sectors__tools { display: flex; align-items: center; gap: 8px; }
.sip-sectors__all { color: rgba(255,255,255,.78); font-size: var(--sip-fs-xs); text-decoration: none; margin-inline-end: 6px; border-bottom: 1px dashed rgba(255,255,255,.35); transition: color var(--sip-t-base) var(--sip-ease); }
.sip-sectors__all:hover { color: var(--sip-gold-300); }
.sip-sectors__nav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transition: background var(--sip-t-base) var(--sip-ease), transform var(--sip-t-base) var(--sip-ease), opacity var(--sip-t-base); }
.sip-sectors__nav svg { width: 16px; height: 16px; }
/* #i-arrow points left. RTL: prev → right (back to the start), next → left.
   LTR: prev → left, next → right. */
.sip-sectors__nav svg { transform: scaleX(-1); } .sip-sectors__nav--next svg { transform: none; }
[dir="ltr"] .sip-sectors__nav svg { transform: none; } [dir="ltr"] .sip-sectors__nav--next svg { transform: scaleX(-1); }
.sip-sectors__nav:hover:not(:disabled) { background: var(--sip-gold-500); border-color: var(--sip-gold-500); color: var(--sip-primary-900, #380310); transform: translateY(-1px); }
.sip-sectors__nav:disabled { opacity: .35; cursor: default; }
.sip-sectors__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 9.5vw + 60px, 180px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block: 4px 10px; scrollbar-width: none; outline: none; }
.sip-sectors__track::-webkit-scrollbar { display: none; }
.sip-sectors__track:focus-visible { box-shadow: 0 0 0 2px rgba(188,151,97,.6); border-radius: 16px; }
.sip-sector { position: relative; display: block; aspect-ratio: 4 / 3.6; border-radius: 16px; overflow: hidden; scroll-snap-align: start; text-decoration: none; color: #fff; background: var(--sip-grad-brand); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 36px -22px rgba(0,0,0,.8); isolation: isolate; transition: transform var(--sip-t-base) var(--sip-ease), box-shadow var(--sip-t-base) var(--sip-ease), border-color var(--sip-t-base); }
.sip-sector:hover, .sip-sector:focus-visible { transform: translateY(-4px); border-color: rgba(188,151,97,.7); box-shadow: 0 22px 44px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(188,151,97,.35); outline: none; }
.sip-sector__media { position: absolute; inset: 0; z-index: -1; }
.sip-sector__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--sip-ease); }
.sip-sector:hover .sip-sector__media img { transform: scale(1.06); }
.sip-sector__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,2,12,.92) 0%, rgba(40,2,12,.45) 45%, rgba(40,2,12,.05) 100%); }
.sip-sector__body { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 12px; text-align: center; }
.sip-sector__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); color: #fff; }
.sip-sector__icon svg { width: 20px; height: 20px; }
.sip-sector__name { font-size: clamp(.8rem, .72rem + .3vw, .95rem); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.sip-sector__count { font-size: .7rem; color: var(--sip-gold-300); letter-spacing: .02em; }
@media (max-width: 640px) {
  .sip-sectors__head { flex-wrap: wrap; }
  .sip-sectors__track { grid-auto-columns: 46%; }
}


/* Industrial map — live density list (click → focus pin) */
.sip-map-density { list-style: none; margin: 0; padding: 0; }
.sip-map-density__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sip-s-3); width: 100%; padding: .45rem .6rem; border: 1px solid transparent; border-radius: var(--sip-r-sm); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background var(--sip-t-fast) var(--sip-ease), border-color var(--sip-t-fast) var(--sip-ease); }
.sip-map-density__item:hover, .sip-map-density__item.is-active { background: var(--sip-accent-soft); border-color: var(--sip-border); }
.sip-map-density__name { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--sip-fw-med); }
.sip-map-density__name svg { color: var(--sip-text-brand); }
.sip-map-density__nums { display: inline-flex; align-items: baseline; gap: 4px 6px; white-space: nowrap; }
.sip-map-marker-wrap.is-empty { opacity: .55; }

.sip-know-card__dl.is-disabled { opacity: .45; pointer-events: none; }

/* Header preference controls — one icon button each (language / theme) */
.sip-preferences { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sip-pref-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; min-width: 34px; padding: 0 9px;
  border: 1px solid var(--sip-border); border-radius: 999px; background: var(--sip-surface); color: var(--sip-text-soft);
  font: 700 11px/1 var(--sip-font, system-ui, sans-serif); text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.sip-pref-btn svg { width: 17px; height: 17px; flex: none; }
.sip-pref-btn svg[hidden] { display: none; }
.sip-pref-btn:hover, .sip-pref-btn:focus-visible { color: var(--sip-text-brand); background: var(--sip-accent-soft); border-color: var(--sip-border-strong, var(--sip-border)); outline: none; }
.sip-pref-btn__code { letter-spacing: .04em; }
@media (max-width: 640px) { .sip-pref-btn { height: 32px; min-width: 32px; padding: 0 7px; } }

/* Blog listing search: input + button on one line */
.sip-search { display: flex; align-items: stretch; gap: var(--sip-s-2); }
.sip-search .sip-input { flex: 1 1 auto; min-width: 0; }
.sip-search .sip-btn { flex: none; }
@media (max-width: 480px) { .sip-search { flex-wrap: wrap; } .sip-search .sip-btn { width: 100%; justify-content: center; } }