/* ================================================================
   ترميز — ملف الثيمة الأساسي
   ألصقه كما هو وابنِ فوقه. كل القيم مشتقة من ثيمة إنستغرام.
   ================================================================ */

/* الخطوط مستضافة على الموقع نفسه (كانت تُستورد من Google Fonts فتؤخّر أول رسم على الجوال).
   IBM Plex Sans Arabic وJetBrains Mono — رخصة SIL OFL 1.1. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plex-arabic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plex-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plex-arabic-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plex-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plex-arabic-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/jetbrains-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  /* ---------- الألوان ---------- */
  --ink-900: #04141B;
  --ink-800: #071F29;
  --ink-700: #0B2B36;
  --petrol-700: #0E4C68;
  --petrol-600: #125E7F;
  --petrol-500: #1C7BA3;
  --teal-600: #38716F;
  --teal-500: #4A8A8D;
  --teal-400: #6BAEAF;
  --aqua-300: #7FC6C8;
  --aqua-200: #A8E2E4;
  --paper-50: #F4F6F4;
  --paper-100: #E6EBE9;

  /* ---------- الأدوار (الوضع الداكن) ---------- */
  --bg: var(--ink-900);
  --surface: rgba(127, 198, 200, 0.04);
  --border: rgba(168, 226, 228, 0.18);
  --text: #FFFFFF;
  --text-2: #CBD9DF;
  --muted: #8FA6AE;
  --accent: var(--aqua-300);
  --rule: rgba(255, 255, 255, 0.17);

  /* ---------- الخطوط ---------- */
  --font-ar: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* الحروف اللاتينية بخط IBM Plex نفسه (Inter كان زينة للعناوين الإنجليزية الصغيرة ويكلّف 48KB) */
  --font-lat: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- المسافات ---------- */
  --space: 8px;
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1200px;
  --section-y: clamp(80px, 12vh, 160px);

  /* ---------- الحواف ---------- */
  --r-card: 20px;
  --r-section: 42px;
  --r-pill: 999px;

  /* ---------- الحركة ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
}

[data-theme='light'] {
  --bg: var(--paper-50);
  --surface: rgba(18, 94, 127, 0.04);
  --border: rgba(10, 38, 48, 0.14);
  --text: #0A2630;
  --text-2: #3A525C;
  --muted: #6C848C;
  --accent: var(--teal-500);
  --rule: rgba(10, 38, 48, 0.14);
}

/* ================================================================ */

* { box-sizing: border-box; }

html { direction: rtl; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ar);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.tz-wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tz-section {
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}

/* ---------- التايبوغرافي ---------- */

.tz-h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
}

.tz-h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0;
}

/* السطر الثاني من العنوان يأخذ تدرج الأكسنت */
.tz-accent-line {
  background: linear-gradient(270deg, var(--aqua-200), var(--petrol-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme='light'] .tz-accent-line {
  background: linear-gradient(270deg, var(--petrol-600), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
}

.tz-body { color: var(--text-2); max-width: 56ch; }
.tz-body--sm { font-size: 0.9375rem; color: var(--muted); }

/* السطر الفرعي بخط رأسي على يمينه */
.tz-quote-line {
  border-inline-end: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-inline-end: 26px;
}

/* ---------- الـ Kicker ---------- */

.tz-kicker {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-lat);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  direction: ltr;
  justify-content: flex-end;
}

.tz-kicker::after {
  content: '';
  width: 44px;
  height: 3px;
  background: var(--accent);
  flex: none;
}

/* ---------- خط الترويسة بقطعة الأكسنت ---------- */

.tz-rule {
  position: relative;
  height: 1px;
  background: var(--rule);
  margin-block: 34px;
}

.tz-rule::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  width: 112px;
  height: 5px;
  background: var(--accent);
}

/* ---------- البطاقة ---------- */

.tz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 32px 28px;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.tz-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-4px);
}

.tz-card__icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 26px;
  color: var(--accent);
}

/* ---------- صف بخط فاصل ---------- */

.tz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  border-top: 1px solid var(--rule);
}

.tz-row:last-child { border-bottom: 1px solid var(--rule); }

.tz-row__ar { font-weight: 600; font-size: 1.3rem; }

.tz-row__en {
  font-family: var(--font-lat);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tz-row__en::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- الوسوم ---------- */

.tz-tag {
  display: inline-block;
  padding: 12px 26px;
  border: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  color: var(--text-2);
  margin: 0 0 12px 12px;
}

/* ---------- الأزرار ---------- */

.tz-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 40px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-900);
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 1.06rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.tz-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 28%, transparent);
}

.tz-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* ---------- المونوسبيس (أرقام وبريد وروابط) ---------- */

.tz-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  direction: ltr;
  display: inline-block;
}

/* ---------- عقدة الربط (موتيف الشعار) ---------- */

.tz-node {
  width: 120px;
  height: 120px;
  position: relative;
}

.tz-node::before,
.tz-node::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.tz-node::before { bottom: 12px; left: 12px; }
.tz-node::after  { top: 12px;    right: 12px; }

.tz-node span {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 47%, var(--accent) 47%,
              var(--accent) 53%, transparent 53%);
  opacity: 0.85;
}

/* ================================================================
   الخلفيات — ثلاث فقط
   ================================================================ */

/* GRID — الافتراضية */
.tz-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 34%, transparent) 1.4px, transparent 1.5px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 45%,
                      #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 70% 45%,
                      #000 0%, transparent 78%);
}

/* المسطرة على الحافتين */
.tz-bg-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 30%, transparent) 0 1px,
      transparent 1px 34px) left / 14px 100% no-repeat,
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 30%, transparent) 0 1px,
      transparent 1px 34px) right / 14px 100% no-repeat;
}

/* SWEEP — شريط إضاءة قطري فوق الشبكة */
.tz-bg-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 52%, transparent) 1.8px, transparent 1.9px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(115deg, transparent 22%, #000 48%,
                      transparent 74%);
          mask-image: linear-gradient(115deg, transparent 22%, #000 48%,
                      transparent 74%);
}

/* MORPH — شرطات مائلة 45° */
.tz-bg-morph::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--accent) 26%, transparent) 0 2px,
    transparent 2px 14px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(225deg, #000 0%, transparent 62%);
}

/* منطقة النص المحمية — ضعها على الحاوية داخل أي قسم */
.tz-safe {
  position: relative;
  z-index: 1;
}

/* ================================================================
   الحركة
   ================================================================ */

.tz-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.tz-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}