@charset "UTF-8";
/* ============================================================
   RTLUB — DESIGN TOKENS
   ------------------------------------------------------------
   This is the single source of truth for the visual system.
   Everything the Figma file needs is in this one file.

   RTLUB = RTL (the direction, the roots — right to left)
         + LUB (لُبّ — the core a system cannot run without).
   To rebrand: change BRAND + logoMark() at the top of js/layout.js.
   ============================================================ */
:root {
  /* ---- 1. CORE SURFACES (Master Brand — dark, luxurious) ---- */
  --ink-900: #06070A; /* deepest — hero background          */
  --ink-850: #090B0F;
  --ink-800: #0C0E14; /* default page background            */
  --ink-700: #12151D; /* raised surface / cards             */
  --ink-600: #191D28; /* hover surface                      */
  --ink-500: #232937; /* borders on dark, disabled fills    */
  /* ---- 2. LIGHT SURFACES (knowledge arm / Insights) ---- */
  --paper-000: #FFFFFF;
  --paper-100: #FAFAF7; /* warm off-white — reading surface  */
  --paper-200: #F1F0EA;
  --paper-300: #E3E1D8;
  /* ---- 3. TEXT ---- */
  --text-hi: #F5F6F8; /* headings on dark   */
  --text-mid: rgba(245, 246, 248, 0.68);
  --text-low: rgba(245, 246, 248, 0.42);
  --text-faint: rgba(245, 246, 248, 0.22);
  --text-on-light-hi: #14161C;
  --text-on-light-mid: rgba(20, 22, 28, 0.66);
  /* ---- 4. MASTER BRAND ACCENT (champagne) ----
     Gold = the parent company only. Investor-facing, luxurious.
     Deliberately NOT neon, so the sub-brands can own the neons. */
  --gold-300: #F0DDB4;
  --gold-400: #E0C692;
  --gold-500: #C9A96A; /* PRIMARY BRAND ACCENT              */
  --gold-600: #A8874A;
  --gold-700: #7A6134;
  /* ---- 5. SUB-BRAND ACCENTS (one per subdomain) ----
     Each subdomain owns one hue. The gold logo stays in the
     corner as the fixed parent signature. (docs/07 §1.5) */
  --studio-500: #0FB37E; /* emerald   — studio.brand.com   */
  --studio-400: #34D399;
  --studio-glow: rgba(15, 179, 126, 0.35);
  --academy-500: #4A8CFF; /* neon blue — academy.brand.com  */
  --academy-400: #7DABFF;
  --academy-glow: rgba(74, 140, 255, 0.35);
  --insights-500: #D9834B; /* amber     — insights.brand.com */
  --insights-400: #E8A375;
  --insights-glow: rgba(217, 131, 75, 0.30);
  --media-500: #9D5CFF; /* violet    — media.brand.com    */
  --media-400: #B98CFF;
  --media-glow: rgba(157, 92, 255, 0.35);
  --careers-500: #C9A96A; /* inherits parent gold           */
  /* ---- 5b. FOUNDER PERSONAL SITES (docs/05) ----
     Not tied to an arm - each founder's craft gets its own
     unrelated, deliberately bolder accent. */
  --omar-500: #FF3D77; /* UI/UX - hot, editorial contrast   */
  --omar-400: #FF7AA3;
  --omar-glow: rgba(255, 61, 119, 0.35);
  --moaz-500: #29F5C8; /* Dev - cyberpunk terminal cyan      */
  --moaz-400: #7CFFE0;
  --moaz-glow: rgba(41, 245, 200, 0.35);
  /* ---- 6. LINES & GLASS ---- */
  --line-soft: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.10);
  --line-hard: rgba(255, 255, 255, 0.18);
  --line-light: rgba(20, 22, 28, 0.10);
  --glass: rgba(12, 14, 20, 0.72);
  /* ---- 7. TYPE SCALE ----
     Single family across both scripts: IBM Plex Sans Arabic
     carries Arabic + Latin, so RTL/LTR stay visually identical. */
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code",
               Consolas, monospace;
  --fs-display: clamp(2.75rem, 7vw, 6.5rem); /* hero wordmark */
  --fs-h1: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78125rem;
  --fs-micro: 0.6875rem; /* eyebrow / label caps           */
  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-body: 1.72; /* generous — Arabic needs it     */
  --ls-display: -0.03em;
  --ls-tight: -0.015em;
  --ls-caps: 0.18em; /* eyebrow letter-spacing         */
  /* ---- 8. SPACE (8px base) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1320px;
  --maxw-text: 68ch;
  /* ---- 9. RADIUS ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  /* ---- 10. ELEVATION ---- */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 8px 30px rgba(0,0,0,.45);
  --sh-lg: 0 24px 70px rgba(0,0,0,.6);
  --sh-glow: 0 0 60px -12px var(--gold-500);
  /* ---- 11. MOTION ----
     Slow and heavy = expensive. Nothing snaps. */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-mid: 380ms;
  --t-slow: 720ms;
  --t-vslow: 1200ms;
  /* ---- 12. LAYERS ---- */
  --z-hero-bg: 0;
  --z-content: 10;
  --z-header: 100;
  --z-mega: 200;
  --z-overlay: 300;
}

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

* {
  margin: 0;
  padding: 0;
}

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

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* ---------- PAGE ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-mid);
  background: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

/* Latin text inside an Arabic page keeps its own direction */
:dir(rtl) .ltr-run,
[dir=rtl] .ltr-run {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- TYPE ---------- */
h1, h2, h3, h4 {
  color: var(--text-hi);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

p {
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--s-5);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

[dir=rtl] .eyebrow {
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-mid);
  max-width: var(--maxw-text);
}

.muted {
  color: var(--text-low);
}

/* ---------- LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(5rem, 12vh, var(--s-10));
  position: relative;
}

.section--full {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* ---------- BUTTONS ---------- */
.btn {
  --btn-fg: var(--ink-900);
  --btn-bg: var(--gold-500);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.9rem 1.75rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px var(--btn-bg);
}

.btn:active {
  transform: translateY(0);
}

.btn .ico {
  transition: transform var(--t-mid) var(--e-out);
}

.btn:hover .ico {
  transform: translateX(4px);
}

[dir=rtl] .btn:hover .ico {
  transform: translateX(-4px);
}

.btn--ghost {
  --btn-fg: var(--text-hi);
  --btn-bg: transparent;
  border-color: var(--line-hard);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  border-color: var(--gold-500);
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-xs);
}

/* text link with animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-hi);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding-block-end: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-mid) var(--e-out), color var(--t-mid);
}

[dir=rtl] .link-arrow {
  background-position: 100% 100%;
}

.link-arrow:hover {
  background-size: 100% 1px;
}

.link-arrow .ico {
  transition: transform var(--t-mid) var(--e-out);
}

.link-arrow:hover .ico {
  transform: translateX(4px);
}

[dir=rtl] .link-arrow .ico {
  transform: scaleX(-1);
}

[dir=rtl] .link-arrow:hover .ico {
  transform: scaleX(-1) translateX(4px);
}

/* focus */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-vslow) var(--e-out), transform var(--t-vslow) var(--e-out);
}

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

.reveal[data-d="1"] {
  transition-delay: 90ms;
}

.reveal[data-d="2"] {
  transition-delay: 180ms;
}

.reveal[data-d="3"] {
  transition-delay: 270ms;
}

.reveal[data-d="4"] {
  transition-delay: 360ms;
}

/* ============ GLOBAL NAV BAR (Apple/Meta: slim, fixed, luxurious) ============ */
.hdr {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  transition: background var(--t-mid) var(--e-out), border-color var(--t-mid), backdrop-filter var(--t-mid);
  border-block-end: 1px solid transparent;
}

.hdr.is-stuck,
.hdr.is-open {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  border-block-end-color: var(--line-soft);
}

.hdr__bar {
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- logo ---- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
}

.logo__mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.logo__mark path, .logo__mark rect {
  transition: fill var(--t-mid) var(--e-out);
}

.logo__text {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-hi);
  text-transform: uppercase;
}

[dir=rtl] .logo__text {
  letter-spacing: 0;
  font-weight: 700;
}

/* ---- primary nav ---- */
.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: var(--s-5);
}

@media (max-width: 1040px) {
  .nav {
    display: none;
  }
}
.nav__item {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-sm);
  color: var(--text-mid);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
  white-space: nowrap;
}

.nav__item::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--arm, var(--gold-500));
  transition: width var(--t-mid) var(--e-out);
}

.nav__item:hover, .nav__item.is-active {
  color: var(--text-hi);
}

.nav__item.is-active::after {
  width: 60%;
}

.hdr__spacer {
  flex: 1;
}

.hdr__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

/* "All RTLUB" mega trigger */
.allbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-mid);
  transition: all var(--t-fast);
}

.allbtn:hover, .allbtn.is-on {
  color: var(--text-hi);
  border-color: var(--gold-600);
  background: rgba(201, 169, 106, 0.08);
}

.allbtn__grid {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  gap: 2px;
}

.allbtn__grid i {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 1px;
}

.langbtn {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  min-width: 40px;
  text-align: center;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--text-low);
  border: 1px solid var(--line-soft);
  transition: all var(--t-fast);
  letter-spacing: 0.04em;
}

.langbtn:hover {
  color: var(--gold-400);
  border-color: var(--gold-700);
}

/* Three languages, so the old single toggle became a segmented control -
   with AR/EN/TR a cycling button gives no clue what comes next. */
.langsw {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.langsw__opt {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  min-width: 34px;
  text-align: center;
  padding: 0.45rem 0.55rem;
  color: var(--text-low);
  background: transparent;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color var(--t-fast), background var(--t-fast);
}

.langsw__opt + .langsw__opt {
  border-inline-start: 1px solid var(--line-soft);
}

.langsw__opt:hover {
  color: var(--gold-400);
}

.langsw__opt.is-on {
  color: var(--gold-400);
  background: color-mix(in srgb, var(--gold-700) 22%, transparent);
}

.langsw__opt:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: -2px;
}

@media (max-width: 520px) {
  .langsw__opt {
    min-width: 28px;
    padding: 0.4rem 0.4rem;
  }
}
/* Below 1040px the primary nav is hidden, so the mega-menu trigger IS the
   navigation. It must stay obvious - never collapse it to a bare icon. */
@media (max-width: 1040px) {
  .allbtn {
    border-color: var(--gold-700);
    color: var(--text-hi);
  }
}
@media (max-width: 720px) {
  .hdr__bar {
    height: 60px;
    gap: var(--s-3);
  }
  .acct span {
    display: none;
  }
  .acct {
    padding-inline: 0.72rem;
  }
  .mega__inner {
    padding-block-start: 92px;
  }
}
@media (max-width: 520px) {
  .hdr__bar {
    gap: var(--s-2);
    padding-inline: 1rem;
  }
  .allbtn {
    padding: 0.45rem 0.7rem;
  }
  .logo__text {
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
  }
  .mega__band {
    flex-direction: column;
    align-items: flex-start;
  }
  .mega__band .btn {
    margin-inline-start: 0;
  }
}
/* ================= IMMERSIVE SUB-HEADER (Apple §1.2) =================
   Hovering a nav item drops a panel previewing that entity. */
.subhdr {
  position: absolute;
  inset-block-start: 68px;
  inset-inline: 0;
  background: linear-gradient(180deg, var(--ink-850), var(--ink-800));
  border-block-end: 1px solid var(--line-soft);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-mid) var(--e-out);
}

.subhdr.is-open {
  max-height: 420px;
}

.subhdr__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-6);
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: var(--s-8);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--t-mid) var(--e-out) 60ms, transform var(--t-mid) var(--e-out) 60ms;
}

.subhdr.is-open .subhdr__inner {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .subhdr__inner {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}
.subhdr__brand h3 {
  font-size: 1.5rem;
  margin-block-end: var(--s-3);
}

.subhdr__brand p {
  font-size: var(--fs-sm);
  color: var(--text-low);
  max-width: 34ch;
}

.subhdr__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--arm);
  box-shadow: 0 0 16px var(--arm);
  display: inline-block;
  margin-inline-end: 0.6rem;
  vertical-align: middle;
}

.subhdr__go {
  margin-block-start: var(--s-5);
  color: var(--arm);
}

.subhdr__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem;
  align-content: start;
}

.subhdr__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-mid);
  border: 1px solid transparent;
  transition: all var(--t-fast);
}

.subhdr__link:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--text-hi);
}

.subhdr__link .ico {
  color: var(--arm);
  flex: none;
  opacity: 0.85;
}

/* ================= FULLSCREEN MEGA MENU (Microsoft §1.1) =================
   Split by USER PATHWAY, not by department. */
.mega {
  position: fixed;
  inset: 0;
  z-index: var(--z-mega);
  background: var(--ink-900);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--e-out), visibility var(--t-mid);
  overflow-y: auto;
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
}

.mega__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 900px;
  height: 900px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201, 169, 106, 0.1), transparent 62%);
}

.mega__inner {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 120px var(--gutter) var(--s-8);
}

.mega__close {
  position: fixed;
  inset-block-start: 20px;
  inset-inline-end: var(--gutter);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-mid);
  display: grid;
  place-items: center;
  transition: all var(--t-fast);
  z-index: 2;
}

.mega__close:hover {
  border-color: var(--gold-500);
  color: var(--gold-400);
  rotate: 90deg;
}

.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

@media (max-width: 900px) {
  .mega__cols {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}
.mega__coltitle {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: var(--s-4);
  margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--line-soft);
}

[dir=rtl] .mega__coltitle {
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
}

.mega__link {
  display: block;
  padding: var(--s-4) 0;
  border-block-end: 1px solid var(--line-soft);
  transition: padding-inline-start var(--t-mid) var(--e-out);
}

.mega__link:hover {
  padding-inline-start: var(--s-3);
}

.mega__link strong {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-hi);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: color var(--t-fast);
}

.mega__link:hover strong {
  color: var(--arm, var(--gold-400));
}

.mega__link span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-low);
  margin-block-start: 4px;
}

/* closing band - the Meta idea: many faces, one account */
.mega__band {
  margin-block-start: var(--s-8);
  padding: var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(201, 169, 106, 0.09), transparent 60%);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.mega__band h4 {
  font-size: 1.125rem;
  margin-block-end: 0.35rem;
}

.mega__band p {
  font-size: var(--fs-sm);
  color: var(--text-low);
  max-width: 52ch;
}

.mega__band .btn {
  margin-inline-start: auto;
}

.mega__dots {
  display: flex;
  gap: 6px;
  margin-block-start: var(--s-4);
}

.mega__dots i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  display: block;
}

.mega__link .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--arm, var(--gold-500));
  box-shadow: 0 0 10px var(--arm, var(--gold-500));
}

/* ================= HERO — 100vh, slow abstract data-flow ================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--ink-900);
}

#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-hero-bg);
  opacity: 0.85;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 0%, rgba(6, 7, 10, 0.55) 70%, var(--ink-900) 100%), linear-gradient(180deg, rgba(6, 7, 10, 0.75) 0%, transparent 25%, transparent 70%, var(--ink-900) 100%);
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  padding-inline: var(--gutter);
  padding-block: 120px var(--s-8);
  max-width: 1000px;
}

.hero__mark {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--s-6);
}

@media (max-width: 640px) {
  .hero__mark {
    width: 62px;
    height: 62px;
  }
}
.hero__word {
  font-size: var(--fs-display);
  font-weight: 300;
  letter-spacing: 0.34em;
  color: var(--text-hi);
  text-transform: uppercase;
  line-height: 1;
  margin-inline-start: 0.34em; /* optical: cancel trailing tracking */
  background: linear-gradient(180deg, #fff 20%, var(--gold-400) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[dir=rtl] .hero__word {
  letter-spacing: 0;
  margin-inline-start: 0;
  font-weight: 500;
}

.hero__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold-600);
  margin-block-start: var(--s-4);
}

[dir=rtl] .hero__tag {
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.hero__statement {
  font-size: clamp(1.0625rem, 2.1vw, 1.5rem);
  line-height: 1.62;
  color: var(--text-mid);
  max-width: 46ch;
  margin: var(--s-6) auto 0;
  font-weight: 300;
}

.hero__statement b {
  color: var(--text-hi);
  font-weight: 500;
}

/* scroll cue */
.hero__cue {
  position: absolute;
  inset-block-end: var(--s-6);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

[dir=rtl] .hero__cue {
  letter-spacing: 0;
  font-family: var(--font-sans);
}

.hero__cue i {
  width: 1px;
  height: 44px;
  display: block;
  background: linear-gradient(180deg, var(--gold-600), transparent);
  animation: cue 2.4s var(--e-in-out) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%, 100% {
    transform: scaleY(0.35);
    opacity: 0.35;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
/* ================= GATEWAY CARDS (docs/02 §2.1) =================
   Quick routing. Each lights with its own arm identity on hover. */
.gateways {
  position: relative;
  z-index: var(--z-content);
  margin-block-start: calc(var(--s-9) * -1);
  padding-block-end: var(--s-9);
}

.gateways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 880px) {
  .gateways__grid {
    grid-template-columns: 1fr;
  }
}
.gate {
  --arm: var(--gold-500);
  position: relative;
  overflow: hidden;
  padding: var(--s-6) var(--s-5) var(--s-5);
  min-height: 232px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  transition: transform var(--t-slow) var(--e-out), border-color var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
}

.gate::before { /* arm-colored wash that fades in */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 120%, var(--arm-glow), transparent 70%);
  transition: opacity var(--t-slow) var(--e-out);
}

.gate::after { /* top hairline in arm color */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--arm);
  transform: scaleX(0);
  transform-origin: var(--org, left);
  transition: transform var(--t-slow) var(--e-out);
}

[dir=rtl] .gate::after {
  --org: right;
}

.gate:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: var(--sh-lg);
}

.gate:hover::before {
  opacity: 1;
}

.gate:hover::after {
  transform: scaleX(1);
}

.gate > * {
  position: relative;
  z-index: 1;
}

.gate__ico {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--arm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  margin-block-end: var(--s-4);
  transition: all var(--t-slow) var(--e-out);
}

.gate:hover .gate__ico {
  border-color: var(--arm);
  box-shadow: 0 0 24px -6px var(--arm);
}

.gate__title {
  font-size: 1.1875rem;
  margin-block-end: 0.4rem;
}

.gate__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--s-4);
}

[dir=rtl] .gate__sub {
  letter-spacing: 0.06em;
}

/* blurb revealed on hover */
.gate__blurb {
  font-size: var(--fs-sm);
  color: var(--text-low);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--e-out), opacity var(--t-mid) var(--e-out);
}

.gate:hover .gate__blurb {
  max-height: 120px;
  opacity: 1;
}

.gate__go {
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--arm);
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0.55;
  transition: opacity var(--t-mid), gap var(--t-mid) var(--e-out);
}

.gate:hover .gate__go {
  opacity: 1;
  gap: 0.85rem;
}

[dir=rtl] .gate__go .ico {
  transform: scaleX(-1);
}

/* ============ THE NAME AS AN EQUATION: RTL + LUB = RTLUB ============
   The founders are engineers and the name reads like a formula,
   so it is set as one. Latin letters stay LTR in both directions -
   the mark and the letters never mirror, because the direction is
   the whole point of the name. */
.nameband {
  position: relative;
  background: var(--ink-900);
  border-block-start: 1px solid var(--line-soft);
  padding-block: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}

.nameband::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 900px;
  height: 420px;
  background: radial-gradient(ellipse at top, rgba(201, 169, 106, 0.1), transparent 68%);
}

.nameband > .wrap {
  position: relative;
}

.nameband .eyebrow {
  margin-block-end: var(--s-6);
}

.eq {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.15fr;
  align-items: start;
  gap: var(--s-5);
}

@media (max-width: 940px) {
  .eq {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
}
.eq__part {
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  transition: border-color var(--t-mid), transform var(--t-mid) var(--e-out);
}

.eq__part:hover {
  border-color: var(--gold-700);
  transform: translateY(-3px);
}

.eq__part--result {
  border-color: rgba(201, 169, 106, 0.28);
  background: linear-gradient(160deg, rgba(201, 169, 106, 0.1), transparent 70%);
}

/* the Latin token - always LTR, always monospaced: it is a formula */
.eq__latin {
  display: block;
  direction: ltr;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--gold-400);
  margin-block-end: var(--s-3);
}

/* keep the letters in Latin order, but align them with the Arabic beside them */
[dir=rtl] .eq__latin {
  text-align: right;
}

.eq__latin--lg {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  color: var(--text-hi);
  background: linear-gradient(180deg, #fff 30%, var(--gold-400) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eq__ar {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-hi);
  margin-block-end: var(--s-3);
}

.eq__part p {
  font-size: var(--fs-sm);
  color: var(--text-low);
  line-height: 1.7;
}

/* the + and = signs */
.eq__op {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold-700);
  padding-block-start: var(--s-6);
  user-select: none;
}

@media (max-width: 940px) {
  .eq__op {
    justify-self: center;
    padding-block-start: 0;
  }
}
/* ============ ECOSYSTEM ROUTER — full-screen cinematic arms (docs/07 §1.4) ============ */
.arm {
  --arm: var(--gold-500);
  position: relative;
  overflow: hidden;
  border-block-start: 1px solid var(--line-soft);
  padding-block: clamp(5rem, 14vh, 9rem);
}

.arm__aura {
  position: absolute;
  pointer-events: none;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--arm-glow), transparent 65%);
  filter: blur(30px);
  opacity: 0.55;
  inset-block-start: -20%;
  inset-inline-end: -14%;
}

.arm__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, var(--s-9));
  align-items: center;
}

@media (max-width: 940px) {
  .arm__grid {
    grid-template-columns: 1fr;
  }
}
.arm__eyebrow {
  color: var(--arm);
}

.arm__eyebrow::before {
  background: var(--arm);
}

.arm__title {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.arm__title em {
  font-style: normal;
  color: var(--arm);
}

.arm__body {
  font-size: var(--fs-lead);
  color: var(--text-mid);
  margin-block-end: var(--s-5);
  max-width: 46ch;
}

.arm__url {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-block-end: var(--s-5);
  display: block;
}

.arm__feats {
  display: grid;
  gap: 0.85rem;
  margin-block-end: var(--s-6);
}

.arm__feat {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.arm__feat .ico {
  color: var(--arm);
  flex: none;
  margin-block-start: 3px;
}

.arm__cta {
  --btn-bg: var(--arm);
  --btn-fg: var(--ink-900);
}

.arm__cta-row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.arm__cta-row .link-arrow {
  color: var(--insights-400);
}

/* --- KNOWLEDGE ARM: light, vibrant (contrast against the dark) --- */
.arm--light {
  background: var(--paper-100);
  border-block-color: var(--paper-300);
}

.arm--light .arm__title, .arm--light h3 {
  color: var(--text-on-light-hi);
}

.arm--light .arm__body, .arm--light p {
  color: var(--text-on-light-mid);
}

.arm--light .arm__feat {
  color: rgba(20, 22, 28, 0.6);
}

.arm--light .arm__url {
  color: rgba(20, 22, 28, 0.35);
}

.arm--light .arm__aura {
  opacity: 0.3;
}

/* ============ VISUAL STAGE (the "screenshot" side of each arm) ============ */
.stage {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  box-shadow: var(--sh-lg);
  padding: var(--s-5);
  min-height: 340px;
  overflow: hidden;
}

.arm--light .stage {
  background: linear-gradient(150deg, #fff, var(--paper-200));
  border-color: var(--paper-300);
  box-shadow: 0 24px 60px -20px rgba(20, 22, 28, 0.22);
}

.stage__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-block-end: var(--s-4);
  margin-block-end: var(--s-4);
  border-block-end: 1px solid var(--line-soft);
}

.arm--light .stage__bar {
  border-block-end-color: var(--paper-300);
}

.stage__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-hard);
}

.arm--light .stage__bar i {
  background: var(--paper-300);
}

.stage__url {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  letter-spacing: 0;
}

.arm--light .stage__url {
  color: rgba(20, 22, 28, 0.32);
}

/* code-ish rows used inside the studio stage */
.codeline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.codeline .n {
  color: var(--text-faint);
  width: 1.4rem;
  text-align: end;
  flex: none;
}

.codeline .b {
  height: 8px;
  border-radius: 3px;
  background: var(--line);
}

.codeline .b--arm {
  background: var(--arm);
  opacity: 0.55;
}

/* metric tiles */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

@media (max-width: 520px) {
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 380px) {
  .metrics {
    grid-template-columns: 1fr;
  }
}
.metric {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.arm--light .metric {
  border-color: var(--paper-300);
  background: #fff;
}

.metric b {
  display: block;
  direction: ltr;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--arm);
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.metric > span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

.arm--light .metric > span {
  color: rgba(20, 22, 28, 0.4);
}

/* course / track rows for academy stage */
.trow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all var(--t-mid);
}

.trow:hover {
  border-color: var(--arm);
  background: rgba(255, 255, 255, 0.03);
}

.arm--light .trow:hover {
  background: #fff;
}

.trow__i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--arm);
  background: var(--arm-glow);
}

.trow__t {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-hi);
}

.arm--light .trow__t {
  color: var(--text-on-light-hi);
}

.trow__m {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.arm--light .trow__m {
  color: rgba(20, 22, 28, 0.4);
}

.trow__bar {
  margin-inline-start: auto;
  width: 74px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  flex: none;
}

.arm--light .trow__bar {
  background: var(--paper-300);
}

.trow__bar i {
  display: block;
  height: 100%;
  background: var(--arm);
  border-radius: 2px;
}

/* media thumbnails */
.thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.thumb {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(140deg, var(--ink-600), var(--ink-900));
  display: grid;
  place-items: center;
  transition: all var(--t-mid) var(--e-out);
}

.thumb:hover {
  border-color: var(--arm);
  transform: scale(1.02);
}

.thumb__play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-900);
  background: var(--arm);
  box-shadow: 0 0 26px -4px var(--arm);
  transition: transform var(--t-mid) var(--e-out);
}

.thumb:hover .thumb__play {
  transform: scale(1.12);
}

.thumb__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-micro);
  color: var(--text-mid);
  background: linear-gradient(0deg, rgba(6, 7, 10, 0.92), transparent);
}

.thumb--wide {
  grid-column: 1/-1;
  aspect-ratio: 21/9;
}

/* cross-pollination note strip */
.xpoll {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.arm--light .xpoll {
  border-color: var(--paper-300);
  color: rgba(20, 22, 28, 0.55);
}

.xpoll .ico {
  color: var(--arm);
  flex: none;
}

/* ============================================================
   STUDIO — studio.rtlub.com
   Emerald is this subdomain's colour. The RTLUB gold stays only
   in the shared header/footer, as the parent signature.
   ============================================================ */
.studio {
  --arm: var(--studio-500);
  --arm-glow: var(--studio-glow);
}

/* ---------- DUAL-TRACK HERO (docs/03) ----------
   The whole page thesis: one landing, two immediate doors.
   Enterprise = engineered, gridded, sober.
   Startups   = cinematic, glowing, inviting. */
.shero {
  position: relative;
  padding-block: 128px clamp(3rem, 8vh, 5rem);
  background: var(--ink-900);
  overflow: hidden;
}

.shero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset-block-start: -240px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 1100px;
  height: 640px;
  background: radial-gradient(ellipse at top, var(--studio-glow), transparent 66%);
  opacity: 0.5;
}

.shero > .wrap {
  position: relative;
}

.shero__id {
  max-width: 780px;
  margin-block-end: clamp(2.5rem, 6vh, 4rem);
}

.shero__id h1 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  margin-block-end: var(--s-4);
}

.shero__id h1 em {
  font-style: normal;
  color: var(--studio-400);
}

.shero__id p {
  font-size: var(--fs-lead);
  color: var(--text-mid);
  max-width: 56ch;
}

.shero__url {
  display: inline-block;
  direction: ltr;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: var(--s-4);
}

/* the two doors */
.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .dual {
    grid-template-columns: 1fr;
  }
}
.track {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: transform var(--t-slow) var(--e-out), border-color var(--t-slow) var(--e-out), box-shadow var(--t-slow) var(--e-out);
}

.track:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
}

.track > * {
  position: relative;
  z-index: 1;
}

.track__num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin-block-end: var(--s-4);
}

[dir=rtl] .track__num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  font-weight: 600;
}

.track h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  margin-block-end: var(--s-3);
}

.track p {
  font-size: var(--fs-sm);
  color: var(--text-low);
  max-width: 42ch;
}

.track__list {
  margin-block: var(--s-5) 0;
  display: grid;
  gap: 0.6rem;
}

.track__list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.track__list .ico {
  flex: none;
  margin-block-start: 3px;
}

.track__cta {
  margin-block-start: auto;
  padding-block-start: var(--s-6);
}

/* --- ENTERPRISE: precise, gridded, steel --- */
.track--ent {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--ink-800);
}

.track--ent::before { /* blueprint grid */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

.track--ent .ico {
  color: var(--studio-500);
}

.track--ent:hover {
  border-color: var(--studio-500);
}

/* --- STARTUPS: cinematic, warm, in motion --- */
.track--start {
  background: radial-gradient(ellipse 120% 90% at 50% 118%, rgba(157, 92, 255, 0.2), transparent 68%), linear-gradient(160deg, rgba(15, 179, 126, 0.1), transparent 55%), var(--ink-800);
}

.track--start::before { /* soft drifting aurora */
  content: "";
  position: absolute;
  pointer-events: none;
  inset-block-end: -50%;
  inset-inline-start: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle at 30% 70%, rgba(157, 92, 255, 0.22), transparent 55%);
  filter: blur(20px);
  animation: drift 14s var(--e-in-out) infinite alternate;
}

@keyframes drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(6%, -6%) scale(1.12);
  }
}
.track--start .ico {
  color: var(--media-400);
}

.track--start:hover {
  border-color: var(--media-500);
}

.track--start .btn {
  --btn-bg: var(--media-500);
  --btn-fg: #fff;
}

.track__time {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-mid);
  margin-inline-start: var(--s-3);
}

/* ---------- SECTION SHELL ---------- */
.sec {
  position: relative;
  padding-block: clamp(4rem, 11vh, 7.5rem);
  border-block-start: 1px solid var(--line-soft);
}

.sec--alt {
  background: var(--ink-900);
}

.sec__head {
  max-width: 720px;
  margin-block-end: var(--s-8);
}

.sec__head h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.sec__head h2 em {
  font-style: normal;
  color: var(--studio-400);
}

.sec__head p {
  font-size: var(--fs-lead);
  color: var(--text-mid);
}

/* ---------- CAPABILITY CARDS ---------- */
.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 940px) {
  .caps {
    grid-template-columns: 1fr;
  }
}
.cap {
  padding: var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  transition: border-color var(--t-mid), transform var(--t-mid) var(--e-out);
}

.cap:hover {
  border-color: var(--studio-500);
  transform: translateY(-4px);
}

.cap__ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--studio-400);
  border: 1px solid var(--line);
  background: rgba(15, 179, 126, 0.07);
  margin-block-end: var(--s-4);
}

.cap h3 {
  margin-block-end: 0.6rem;
}

.cap p {
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.cap__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: var(--s-4);
}

.cap__tags span {
  direction: ltr;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  color: var(--text-faint);
}

/* ---------- ARCHITECTURE DIAGRAM ----------
   Technical diagrams stay LTR in both languages (service names are
   English and the convention is universal), so this block opts out
   of the RTL flip on purpose. */
.diagram {
  margin-block-start: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--ink-900);
  overflow-x: auto;
}

/* Technical LTR artefact — force direction so RTL never bidi-reorders
   latin labels like "JWT · rate-limit". (The Odyssey flowchart, which has
   real Arabic <text>, is deliberately NOT covered by this.) */
.diagram > svg {
  min-width: 620px;
  width: 100%;
  height: auto;
  direction: ltr;
}

.diagram > svg text {
  direction: ltr;
  unicode-bidi: isolate;
}

.diagram__cap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.diagram__cap b {
  color: var(--studio-400);
  font-weight: 600;
}

/* ---------- SECURITY / COMPLIANCE ---------- */
.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 940px) {
  .sec-grid {
    grid-template-columns: 1fr;
  }
}
.slab {
  padding: var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(15, 179, 126, 0.05), transparent 60%);
}

.slab h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: var(--s-4);
}

.slab h3 .ico {
  color: var(--studio-400);
  flex: none;
}

.slab p {
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.crypto {
  margin-block-start: var(--s-5);
  display: grid;
  gap: 0.5rem;
}

.crypto__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

.crypto__row code {
  direction: ltr;
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--studio-400);
  flex: none;
}

.crypto__lock {
  color: var(--studio-500);
  flex: none;
}

/* compliance badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

.badge {
  direction: ltr;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  min-width: 122px;
  transition: all var(--t-mid) var(--e-out);
}

.badge:hover {
  border-color: var(--studio-500);
  background: rgba(15, 179, 126, 0.06);
}

.badge b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--text-hi);
  letter-spacing: 0.04em;
}

.badge span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-start: 3px;
}

/* DevSecOps pipeline */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--s-5);
}

.pipeline__step {
  position: relative;
  flex: 1 1 118px;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-micro);
  color: var(--text-mid);
  text-align: center;
}

.pipeline__step b {
  display: block;
  direction: ltr;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--studio-400);
  margin-block-end: 3px;
}

.pipeline__step--gate {
  border-color: var(--studio-600, var(--studio-500));
  background: rgba(15, 179, 126, 0.1);
}

/* ---------- CASE STUDY ---------- */
.case {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(165deg, var(--ink-700), var(--ink-900));
}

.case__top {
  padding: var(--s-7) var(--s-6) var(--s-6);
}

.case__sector {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(15, 179, 126, 0.35);
  background: rgba(15, 179, 126, 0.08);
  font-size: var(--fs-micro);
  color: var(--studio-400);
  margin-block-end: var(--s-4);
}

.case__top h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.5;
}

/* the four-beat structure docs/03 mandates */
.beats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block-start: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
  .beats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .beats {
    grid-template-columns: 1fr;
  }
}
.beat {
  padding: var(--s-5);
  border-inline-start: 1px solid var(--line-soft);
  transition: background var(--t-mid);
}

.beat:first-child {
  border-inline-start: 0;
}

.beat:hover {
  background: rgba(255, 255, 255, 0.02);
}

.beat__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--studio-500);
  letter-spacing: 0.12em;
  display: block;
  margin-block-end: var(--s-3);
}

.beat h4 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: 0.4rem;
}

.beat p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: 1.65;
}

.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block-start: 1px solid var(--line-soft);
  background: rgba(15, 179, 126, 0.05);
}

@media (max-width: 620px) {
  .results {
    grid-template-columns: 1fr;
  }
}
.result {
  padding: var(--s-5) var(--s-6);
  border-inline-start: 1px solid var(--line-soft);
}

.result:first-child {
  border-inline-start: 0;
}

.result b {
  display: block;
  direction: ltr;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 300;
  color: var(--studio-400);
  line-height: 1.1;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

.result > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: 0.5rem;
}

/* ---------- CLIENT PORTAL + SLA ---------- */
.portal {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7);
  align-items: center;
}

@media (max-width: 940px) {
  .portal {
    grid-template-columns: 1fr;
  }
}
.miles {
  display: grid;
  gap: 0;
}

.mile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.mile:first-child {
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}

.mile:last-child {
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
}

.mile + .mile {
  border-block-start: 0;
}

.mile.is-done {
  background: rgba(15, 179, 126, 0.07);
  border-color: rgba(15, 179, 126, 0.22);
}

.mile.is-now {
  background: rgba(15, 179, 126, 0.12);
  border-color: var(--studio-500);
}

.mile__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hard);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.is-done .mile__dot {
  background: var(--studio-500);
  border-color: var(--studio-500);
  color: var(--ink-900);
}

.is-now .mile__dot {
  border-color: var(--studio-500);
  color: var(--studio-400);
  animation: pulse-em 2s var(--e-in-out) infinite;
}

@keyframes pulse-em {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(15, 179, 126, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(15, 179, 126, 0);
  }
}
.mile__t {
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.is-now .mile__t, .is-done .mile__t {
  color: var(--text-hi);
}

.mile__repo {
  margin-inline-start: auto;
  direction: ltr;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  flex: none;
}

.sla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

.sla__item {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

.sla__item b {
  display: block;
  direction: ltr;
  font-size: 1.375rem;
  color: var(--studio-400);
  font-weight: 600;
  font-feature-settings: "tnum";
}

.sla__item span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-start: 4px;
}

/* ---------- SAAS PRODUCT SUITE (Apple-calm) ---------- */
.suite {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 940px) {
  .suite {
    grid-template-columns: 1fr;
  }
}
.prod {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  transition: transform var(--t-slow) var(--e-out), border-color var(--t-slow), box-shadow var(--t-slow) var(--e-out);
}

.prod:hover {
  transform: translateY(-6px);
  border-color: var(--line-hard);
  box-shadow: var(--sh-lg);
}

.prod__mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-block-end: var(--s-5);
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-weight: 600;
  background: linear-gradient(145deg, var(--studio-400), var(--studio-500));
}

.prod h3 {
  font-size: 1.25rem;
  margin-block-end: 0.5rem;
}

.prod__what {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-end: var(--s-4);
}

.prod p {
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.prod__price {
  margin-block: var(--s-5) 0;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.prod__price b {
  direction: ltr;
  font-size: 1.5rem;
  color: var(--text-hi);
  font-weight: 600;
}

.prod__price span {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.prod__acts {
  margin-block-start: auto;
  padding-block-start: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- THE SHARED ENGINE PITCH ---------- */
.engine {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid rgba(15, 179, 126, 0.28);
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse 90% 120% at 100% 0%, rgba(15, 179, 126, 0.16), transparent 62%), linear-gradient(180deg, var(--ink-700), var(--ink-900));
}

.engine__q {
  font-size: clamp(1.0625rem, 1.9vw, 1.5rem);
  line-height: 1.85;
  color: var(--text-hi);
  font-weight: 300;
  max-width: 60ch;
}

.engine__q b {
  color: var(--studio-400);
  font-weight: 500;
}

.engine__by {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--text-low);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.engine__by .ico {
  color: var(--studio-400);
  flex: none;
}

/* ---------- ODYSSEY TEASER ---------- */
.ody {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: radial-gradient(ellipse 80% 120% at 20% 110%, rgba(157, 92, 255, 0.22), transparent 62%), linear-gradient(160deg, var(--ink-700), var(--ink-900));
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: center;
}

@media (max-width: 860px) {
  .ody {
    grid-template-columns: 1fr;
  }
}
.ody h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.ody h2 em {
  font-style: normal;
  color: var(--media-400);
}

.ody p {
  color: var(--text-mid);
}

.ody .btn {
  --btn-bg: var(--media-500);
  --btn-fg: #fff;
  margin-block-start: var(--s-6);
}

.stations {
  display: grid;
  gap: 0.5rem;
}

.station {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
}

.station__n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--media-500);
  color: var(--media-400);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.station__t {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.station__r {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.station__soon {
  margin-inline-start: auto;
  flex: none;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}

/* ---------- CLOSING CTA ---------- */
.close-cta {
  text-align: center;
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-900);
}

.close-cta h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.close-cta p {
  color: var(--text-mid);
  max-width: 52ch;
  margin-inline: auto;
}

.close-cta__acts {
  margin-block-start: var(--s-6);
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

.close-cta .btn {
  --btn-bg: var(--arm, var(--studio-500));
  --btn-fg: var(--ink-900);
}

.close-cta .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-hi);
}

/* ============================================================
   ACADEMY — academy.rtlub.com (docs/06 §6.1)
   Neon blue, youthful and energetic voice (docs/07 §1.4: "لغة
   حماسية شبابية" vs. the studio's strategic/formal register).
   The core secret: courses are built from RTLUB Studio's own
   real client case studies, not generic curricula.
   ============================================================ */
.academy {
  --arm: var(--academy-500);
  --arm-glow: var(--academy-glow);
}

/* ---------- HERO ---------- */
.ahero {
  position: relative;
  padding-block: 128px clamp(3rem, 8vh, 5rem);
  background: var(--ink-900);
  overflow: hidden;
}

.ahero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset-block-start: -260px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 1200px;
  height: 680px;
  background: radial-gradient(ellipse at top, var(--academy-glow), transparent 66%);
  opacity: 0.55;
}

.ahero > .wrap {
  position: relative;
}

.ahero__id {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.ahero__id .eyebrow {
  justify-content: center;
  color: var(--academy-400);
}

.ahero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-block: var(--s-3) var(--s-5);
}

.ahero h1 em {
  font-style: normal;
  color: var(--academy-500);
}

.ahero__id p {
  color: var(--text-mid);
  font-size: var(--fs-lead);
  margin-inline: auto;
}

.ahero__acts {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  margin-block-start: var(--s-7);
  flex-wrap: wrap;
}

.ahero__acts .btn:not(.btn--ghost) {
  --btn-bg: var(--academy-500);
  --btn-fg: #0C0E14;
}

.ahero__stats {
  display: flex;
  justify-content: center;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--line-soft);
}

.ahero__stat {
  text-align: center;
}

.ahero__stat b {
  display: block;
  direction: ltr;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--academy-400);
  font-feature-settings: "tnum";
}

.ahero__stat > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: 0.35rem;
}

/* ---------- THE SECRET ---------- */
.asecret {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.asecret__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (max-width: 860px) {
  .asecret__inner {
    grid-template-columns: 1fr;
  }
}
.asecret h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.asecret h2 em {
  font-style: normal;
  color: var(--academy-500);
}

.asecret p {
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-block-end: var(--s-4);
}

.asecret__pipe {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.asecret__step {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

.asecret__step + .asecret__step {
  border-block-start: 1px solid var(--line-soft);
}

.asecret__step i {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--academy-glow);
  color: var(--academy-400);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.asecret__step div h4 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.asecret__step div span {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.asecret__step svg.ico {
  color: var(--text-faint);
  margin-inline-start: auto;
  flex: none;
}

[dir=rtl] .asecret__step svg.ico {
  transform: scaleX(-1);
}

/* ---------- LEARNING TRACKS ---------- */
.atracks {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-900);
}

.atracks__head {
  max-width: 42rem;
  margin-block-end: var(--s-8);
}

.atracks__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) 0;
}

.atracks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1080px) {
  .atracks__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .atracks__grid {
    grid-template-columns: 1fr;
  }
}
.atrack {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid);
}

.atrack:hover {
  transform: translateY(-5px);
  border-color: var(--academy-500);
}

.atrack__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--academy-glow);
  color: var(--academy-400);
}

.atrack h3 {
  font-size: var(--fs-lead);
  color: var(--text-hi);
}

.atrack p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
  flex: 1;
}

.atrack__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  border-block-start: 1px solid var(--line-soft);
  padding-block-start: var(--s-3);
}

.atrack__level {
  color: var(--academy-400);
}

/* ---------- STUDENT DASHBOARD PREVIEW ---------- */
.adash {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.adash__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (max-width: 900px) {
  .adash__grid {
    grid-template-columns: 1fr;
  }
}
.adash h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.adash p {
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-block-end: var(--s-5);
}

.adash__list {
  display: grid;
  gap: var(--s-3);
}

.adash__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.adash__list .ico {
  color: var(--academy-500);
  flex: none;
}

.dash-card {
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.dash-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line-soft);
}

.dash-card__bar b {
  color: var(--text-hi);
  font-size: var(--fs-sm);
}

.dash-card__bar span {
  font-size: var(--fs-xs);
  color: var(--academy-400);
}

.dash-card__body {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}

.dprog {
  display: grid;
  gap: var(--s-2);
}

.dprog__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

.dprog__bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
}

.dprog__bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--academy-500), var(--academy-400));
  width: 0%;
  transition: width 1.1s var(--e-out);
}

.dash-card.is-in .dprog__bar i {
  width: var(--w, 0%);
}

/* ---------- GRADUATE STORIES ---------- */
.astats {
  border-block-start: 1px solid var(--line-soft);
  background: rgba(74, 140, 255, 0.05);
}

.astats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 620px) {
  .astats__grid {
    grid-template-columns: 1fr;
  }
}
.astat {
  padding: var(--s-7) var(--s-6);
  border-inline-start: 1px solid var(--line-soft);
  text-align: center;
}

.astat:first-child {
  border-inline-start: 0;
}

.astat b {
  display: block;
  direction: ltr;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  color: var(--academy-400);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

.astat > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: 0.5rem;
}

/* ---------- PLANS & PRICING ---------- */
.aplans {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.aplans__head {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto var(--s-8);
}

.aplans__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) 0;
}

.aplans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 860px) {
  .aplans__grid {
    grid-template-columns: 1fr;
  }
}
.aplan {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
}

.aplan--feat {
  border-color: var(--academy-500);
  box-shadow: 0 0 0 1px var(--academy-500), var(--sh-md);
  position: relative;
}

.aplan__badge {
  position: absolute;
  top: -12px;
  inset-inline-start: var(--s-5);
  background: var(--academy-500);
  color: #0C0E14;
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
}

.aplan h3 {
  font-size: var(--fs-lead);
  color: var(--text-hi);
  margin-block-end: var(--s-2);
}

.aplan__price {
  direction: ltr;
  text-align: start;
  font-size: 2rem;
  color: var(--text-hi);
  font-weight: 300;
  margin-block-end: var(--s-5);
}

.aplan__price span {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.aplan ul {
  display: grid;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
  flex: 1;
}

.aplan li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

.aplan li .ico {
  color: var(--academy-500);
  flex: none;
}

.aplan .btn {
  width: 100%;
  justify-content: center;
}

.aplan:not(.aplan--feat) .btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-hi);
  border: 1.5px solid var(--line-hard);
  box-shadow: none;
}

.aplan--feat .btn {
  --btn-bg: var(--academy-500);
  --btn-fg: #0C0E14;
}

/* ---------- CROSS-POLLINATION BANNER (docs/07 §1.2) ---------- */
.axpol {
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-800);
  padding-block: var(--s-6);
}

.axpol__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.axpol p {
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.axpol p b {
  color: var(--text-hi);
}

.axpol a {
  flex: none;
}

/* ============================================================
   INSIGHTS — insights.rtlub.com (docs/06 §6.2)
   Medium-style open blogging/research platform. Amber accent.
   Reading comfort is the whole point (docs/06: "أعلى معايير
   البساطة والراحة البصرية للقراءة") — so past the dark hero band
   (kept dark for header legibility + brand consistency with the
   other arms) the page switches to the --paper-* light surfaces
   reserved for this arm alone (docs/07 §1.5, tokens.scss §2).
   Goal: thought leadership + SEO dominance (docs/06 §6.2).
   ============================================================ */
.insights {
  --arm: var(--insights-500);
  --arm-glow: var(--insights-glow);
}

/* ---------- HERO (dark, matches sibling arms) ---------- */
.ihero {
  position: relative;
  padding-block: 128px clamp(3rem, 8vh, 5rem);
  background: var(--ink-900);
  overflow: hidden;
}

.ihero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset-block-start: -260px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 1200px;
  height: 680px;
  background: radial-gradient(ellipse at top, var(--insights-glow), transparent 66%);
  opacity: 0.6;
}

.ihero > .wrap {
  position: relative;
}

.ihero__id {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.ihero__id .eyebrow {
  justify-content: center;
  color: var(--insights-400);
}

.ihero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-block: var(--s-3) var(--s-5);
}

.ihero h1 em {
  font-style: normal;
  color: var(--insights-500);
}

.ihero__id > p {
  color: var(--text-mid);
  font-size: var(--fs-lead);
  margin-inline: auto;
  max-width: 46rem;
}

.isearch {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 34rem;
  margin: var(--s-7) auto 0;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.4rem 0.35rem 1.2rem;
}

[dir=rtl] .isearch {
  padding: 0.35rem 1.2rem 0.35rem 0.4rem;
}

.isearch svg {
  color: var(--text-faint);
  flex: none;
}

.isearch input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-hi);
  font: inherit;
  font-size: var(--fs-sm);
}

.isearch input::placeholder {
  color: var(--text-faint);
}

.isearch button {
  flex: none;
  --btn-bg: var(--insights-500);
  --btn-fg: #1C1006;
}

.ihero__stats {
  display: flex;
  justify-content: center;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--line-soft);
}

.ihero__stat {
  text-align: center;
}

.ihero__stat b {
  display: block;
  direction: ltr;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--insights-400);
  font-feature-settings: "tnum";
}

.ihero__stat > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: 0.35rem;
}

/* ---------- LIGHT READING CANVAS (from here down) ---------- */
.i-paper {
  background: var(--paper-100);
}

/* ---------- FEATURED ARTICLE ---------- */
.ifeat {
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--paper-100);
}

.ifeat__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  box-shadow: 0 20px 60px -30px rgba(20, 22, 28, 0.18);
}

@media (max-width: 900px) {
  .ifeat__card {
    grid-template-columns: 1fr;
    padding: var(--s-6);
  }
}
.ifeat__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--insights-500);
  margin-block-end: var(--s-4);
}

.ifeat h2 {
  font-size: var(--fs-h2);
  color: var(--text-on-light-hi);
  line-height: var(--lh-snug);
  margin-block-end: var(--s-4);
}

.ifeat p.dek {
  color: var(--text-on-light-mid);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  margin-block-end: var(--s-6);
}

.ifeat__by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.ifeat__av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, var(--insights-400), var(--insights-500));
  display: grid;
  place-items: center;
  color: #1C1006;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.ifeat__by div b {
  display: block;
  color: var(--text-on-light-hi);
  font-size: var(--fs-sm);
}

.ifeat__by div span {
  display: block;
  color: var(--text-on-light-mid);
  font-size: var(--fs-xs);
  margin-block-start: 2px;
}

.ifeat__art {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--insights-glow), var(--paper-300));
  position: relative;
  display: grid;
  place-items: center;
}

.ifeat__art svg {
  color: var(--insights-500);
  opacity: 0.5;
}

/* ---------- CATEGORY FILTERS ---------- */
.icats {
  background: var(--paper-100);
  padding-block-end: var(--s-6);
}

.icats__row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.icats__pill {
  padding: 0.55rem 1.2rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-on-light-mid);
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  transition: all var(--t-fast) var(--e-out);
}

.icats__pill:hover {
  color: var(--text-on-light-hi);
  border-color: var(--insights-500);
}

.icats__pill.is-active {
  color: #1C1006;
  background: var(--insights-500);
  border-color: var(--insights-500);
}

/* ---------- ARTICLE GRID ---------- */
.igrid {
  padding-block: clamp(2rem, 6vh, 4rem) clamp(4rem, 10vh, 7rem);
  background: var(--paper-100);
}

.igrid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

@media (max-width: 980px) {
  .igrid__list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .igrid__list {
    grid-template-columns: 1fr;
  }
}
.icard {
  display: flex;
  flex-direction: column;
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}

.icard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px -24px rgba(20, 22, 28, 0.28);
}

.icard__thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(140deg, var(--paper-300), var(--paper-200));
  position: relative;
  display: grid;
  place-items: center;
  color: var(--insights-500);
  opacity: 0.8;
}

.icard__thumb i {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  color: var(--insights-600, var(--insights-500));
  background: var(--paper-000);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  font-style: normal;
}

.icard__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.icard h3 {
  font-size: var(--fs-lead);
  color: var(--text-on-light-hi);
  line-height: var(--lh-snug);
}

.icard p {
  font-size: var(--fs-sm);
  color: var(--text-on-light-mid);
  line-height: var(--lh-body);
  flex: 1;
}

.icard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--text-on-light-mid);
  border-block-start: 1px solid var(--line-light);
  padding-block-start: var(--s-3);
}

.icard__meta .ltr-run {
  color: var(--text-on-light-mid);
}

/* ---------- OUR WRITERS ---------- */
.iauth {
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--paper-200);
}

.iauth__head {
  max-width: 42rem;
  margin-inline: auto var(--s-8);
  text-align: center;
}

.iauth__head h2 {
  font-size: var(--fs-h2);
  color: var(--text-on-light-hi);
  margin-block: var(--s-3) var(--s-3);
}

.iauth__head p {
  color: var(--text-on-light-mid);
}

.iauth__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

@media (max-width: 900px) {
  .iauth__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .iauth__grid {
    grid-template-columns: 1fr;
  }
}
.iauthor {
  text-align: center;
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.iauthor__av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-inline: auto var(--s-4);
  background: linear-gradient(135deg, var(--insights-400), var(--insights-500));
  display: grid;
  place-items: center;
  color: #1C1006;
  font-weight: 700;
  font-size: var(--fs-lead);
}

.iauthor b {
  display: block;
  color: var(--text-on-light-hi);
  font-size: var(--fs-sm);
}

.iauthor span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--insights-500);
  margin-block: 0.3rem 0.6rem;
  font-weight: 600;
}

.iauthor p {
  font-size: var(--fs-xs);
  color: var(--text-on-light-mid);
  line-height: var(--lh-body);
}

/* ---------- SHARED LIGHT SECTION HEAD ---------- */
.i-sec__head {
  max-width: 44rem;
  margin-block-end: var(--s-8);
}

.i-sec__head .eyebrow {
  color: var(--insights-500);
}

.i-sec__head h2 {
  font-size: var(--fs-h2);
  color: var(--text-on-light-hi);
  margin-block: var(--s-3) var(--s-4);
}

.i-sec__head h2 em {
  font-style: normal;
  color: var(--insights-500);
}

.i-sec__head p {
  color: var(--text-on-light-mid);
  line-height: var(--lh-body);
}

/* ---------- MOST READ + TOPICS ---------- */
.itop {
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--paper-100);
  border-block-start: 1px solid var(--line-light);
}

.itop__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 900px) {
  .itop__grid {
    grid-template-columns: 1fr;
  }
}
.irank {
  display: grid;
  gap: 0;
}

.irank__row {
  display: flex;
  gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-4);
}

.irank__row + .irank__row {
  border-block-start: 1px solid var(--line-light);
}

.irank__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  color: #C4C1B4;
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  transition: color var(--t-fast);
}

.irank__row:hover .irank__n {
  color: var(--insights-500);
}

.irank__body h3 {
  font-size: var(--fs-sm);
  color: var(--text-on-light-hi);
  line-height: var(--lh-snug);
  margin-block-end: 0.35rem;
}

.irank__body span {
  font-size: var(--fs-micro);
  color: var(--text-on-light-mid);
}

.itopics {
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.itopics h3 {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-on-light-mid);
  margin-block-end: var(--s-5);
}

.itopics__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.itopics__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--text-on-light-mid);
  border: 1px solid var(--line-light);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
  transition: all var(--t-fast) var(--e-out);
}

.itopics__tag:hover {
  border-color: var(--insights-500);
  color: var(--insights-500);
}

/* count must stay legible on white — --paper-300 is near-invisible here */
.itopics__tag b {
  color: var(--insights-500);
  font-weight: 600;
  font-size: var(--fs-micro);
  direction: ltr;
}

/* ---------- EDITORIAL STANDARDS ---------- */
.istd {
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--paper-200);
  border-block-start: 1px solid var(--line-light);
}

.istd__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 860px) {
  .istd__grid {
    grid-template-columns: 1fr;
  }
}
.istd__card {
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.istd__card i {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--insights-glow);
  color: var(--insights-500);
  margin-block-end: var(--s-4);
}

.istd__card h3 {
  font-size: var(--fs-sm);
  color: var(--text-on-light-hi);
  margin-block-end: var(--s-3);
}

.istd__card p {
  font-size: var(--fs-xs);
  color: var(--text-on-light-mid);
  line-height: var(--lh-body);
}

/* ---------- RESEARCH / WHITEPAPERS ---------- */
.ires {
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--paper-100);
  border-block-start: 1px solid var(--line-light);
}

.ires__list {
  display: grid;
  gap: var(--s-4);
}

.ires__row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  background: var(--paper-000);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.ires__row:hover {
  border-color: var(--insights-500);
  transform: translateY(-3px);
}

.ires__badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--insights-500);
  background: var(--insights-glow);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.6rem;
}

.ires__main {
  flex: 1;
  min-width: 240px;
}

.ires__main h3 {
  font-size: var(--fs-sm);
  color: var(--text-on-light-hi);
  margin-block-end: 0.3rem;
}

.ires__main span {
  font-size: var(--fs-xs);
  color: var(--text-on-light-mid);
}

.ires__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-on-light-mid);
  direction: ltr;
  flex: none;
}

/* ---------- NEWSLETTER ---------- */
.inews {
  padding-block: clamp(4rem, 10vh, 7rem);
  background: var(--paper-100);
  border-block-start: 1px solid var(--line-light);
}

.inews__card {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  background: var(--ink-900);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}

.inews__card::before {
  content: "";
  position: absolute;
  inset-block-start: -140px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 640px;
  height: 340px;
  background: radial-gradient(ellipse at top, var(--insights-glow), transparent 70%);
}

.inews__card > * {
  position: relative;
}

.inews__card h2 {
  color: var(--text-hi);
  font-size: var(--fs-h3);
  margin-block-end: var(--s-3);
}

.inews__card p {
  color: var(--text-mid);
  margin-block-end: var(--s-6);
}

.inews__form {
  display: flex;
  gap: var(--s-3);
  max-width: 26rem;
  margin-inline: auto;
  flex-wrap: wrap;
}

.inews__form input {
  flex: 1;
  min-width: 12rem;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.4rem;
  color: var(--text-hi);
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
}

.inews__form input::placeholder {
  color: var(--text-faint);
}

.inews__form button {
  --btn-bg: var(--insights-500);
  --btn-fg: #1C1006;
  flex: none;
}

.inews__fine {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-start: var(--s-4);
}

/* ---------- CROSS-POLLINATION BANNER → Academy (docs/06 §6.4) ---------- */
.ixpol {
  border-block-start: 1px solid var(--line-light);
  background: var(--paper-200);
  padding-block: var(--s-6);
}

.ixpol__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.ixpol p {
  font-size: var(--fs-sm);
  color: var(--text-on-light-mid);
}

.ixpol p b {
  color: var(--text-on-light-hi);
}

.ixpol a {
  flex: none;
  color: var(--text-on-light-hi);
}

.ixpol a:hover {
  color: var(--insights-600, var(--insights-500));
}

/* ============================================================
   MEDIA LAB — media.rtlub.com (docs/06 §6.3, docs/07 §1.4)
   "منصة عرض سينمائية بوضع داكن بالكامل (Netflix / Apple TV)."
   Violet accent. Podcast, documentaries, conference coverage.
   ============================================================ */
.media {
  --arm: var(--media-500);
  --arm-glow: var(--media-glow);
}

/* ---------- CINEMATIC HERO (featured episode backdrop) ---------- */
.mlhero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-block: 128px clamp(3.5rem, 9vh, 6rem);
  background: var(--ink-900);
  overflow: hidden;
}

.mlhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, var(--ink-900) 4%, rgba(6, 7, 10, 0.55) 46%, rgba(6, 7, 10, 0.15) 100%), linear-gradient(100deg, var(--ink-900) 10%, transparent 55%), radial-gradient(ellipse 900px 620px at 78% 18%, var(--media-glow), transparent 68%);
}

.mlhero__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
  pointer-events: none;
  background-image: repeating-linear-gradient(100deg, rgba(157, 92, 255, 0.05) 0 2px, transparent 2px 90px), repeating-linear-gradient(10deg, rgba(157, 92, 255, 0.04) 0 1px, transparent 1px 70px);
}

.mlhero > .wrap {
  position: relative;
  z-index: 1;
}

.mlhero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--media-400);
  margin-block-end: var(--s-4);
}

.mlhero__tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--media-500);
  box-shadow: 0 0 0 4px var(--media-glow);
}

.mlhero h1 {
  font-size: var(--fs-h1);
  max-width: 34rem;
  line-height: var(--lh-tight);
  margin-block-end: var(--s-4);
  color: var(--text-hi);
}

.mlhero p {
  color: var(--text-mid);
  font-size: var(--fs-lead);
  max-width: 34rem;
  line-height: var(--lh-body);
  margin-block-end: var(--s-6);
}

.mlhero__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
  flex-wrap: wrap;
}

.mlhero__chip {
  font-size: var(--fs-xs);
  color: var(--text-mid);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
}

.mlhero__acts {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.mlhero__acts .btn:not(.btn--ghost) {
  --btn-bg: var(--media-500);
  --btn-fg: #14061F;
}

.mlhero__acts .play-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: currentColor;
  display: grid;
  place-items: center;
  margin-inline-start: -0.4rem;
}

.mlhero__acts .play-ico svg {
  color: var(--media-500);
}

[dir=rtl] .mlhero__acts .play-ico {
  margin-inline-start: 0;
  margin-inline-end: -0.4rem;
}

/* ---------- CONTENT ROWS (horizontal shelves) ---------- */
.mlrows {
  padding-block: clamp(3rem, 8vh, 5rem);
  position: relative;
  z-index: 2;
  margin-block-start: -80px;
}

.mlrow {
  padding-block: var(--s-6);
}

.mlrow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-5);
}

.mlrow__head h2 {
  font-size: var(--fs-h3);
  color: var(--text-hi);
}

.mlrow__head a {
  flex: none;
}

.mlrow__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  padding-block-end: var(--s-3);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mlrow__track::-webkit-scrollbar {
  display: none;
}

.mlcard {
  flex: none;
  width: 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform var(--t-mid) var(--e-out);
}

.mlcard:hover {
  transform: translateY(-6px);
}

.mlcard__thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-600), var(--ink-800));
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
}

.mlcard__thumb svg {
  color: var(--media-400);
  opacity: 0.55;
}

.mlcard__thumb .dur {
  position: absolute;
  inset-block-end: var(--s-2);
  inset-inline-end: var(--s-2);
  font-size: var(--fs-micro);
  background: rgba(6, 7, 10, 0.75);
  color: var(--text-hi);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  direction: ltr;
}

.mlcard__thumb .playhover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 6, 31, 0);
  opacity: 0;
  transition: opacity var(--t-fast) var(--e-out);
}

.mlcard:hover .playhover {
  opacity: 1;
  background: rgba(20, 6, 31, 0.35);
}

.mlcard__thumb .playhover i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--media-500);
  color: #14061F;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -6px var(--media-glow);
}

.mlcard h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  line-height: var(--lh-snug);
}

.mlcard p {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

/* ---------- STATS BAND ---------- */
.mlstats {
  border-block-start: 1px solid var(--line-soft);
  background: rgba(157, 92, 255, 0.05);
}

.mlstats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 760px) {
  .mlstats__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mlstat {
  padding: var(--s-7) var(--s-6);
  border-inline-start: 1px solid var(--line-soft);
  text-align: center;
}

.mlstat:first-child {
  border-inline-start: 0;
}

.mlstat b {
  display: block;
  direction: ltr;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  color: var(--media-400);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

.mlstat > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: 0.5rem;
}

/* ---------- SHARED SECTION RHYTHM ---------- */
.ml-sec {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.ml-sec__head {
  max-width: 44rem;
  margin-block-end: var(--s-8);
}

.ml-sec__head .eyebrow {
  color: var(--media-400);
}

.ml-sec__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-4);
}

.ml-sec__head h2 em {
  font-style: normal;
  color: var(--media-500);
}

.ml-sec__head p {
  color: var(--text-mid);
  line-height: var(--lh-body);
}

/* ---------- NOW-PLAYING / EPISODE PLAYER ---------- */
.mlplay__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 940px) {
  .mlplay__grid {
    grid-template-columns: 1fr;
  }
}
.mlplay__panel {
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-md);
}

.mlplay__now {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-end: var(--s-5);
}

.mlplay__art {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--media-500), var(--ink-800));
  display: grid;
  place-items: center;
  color: #fff;
}

.mlplay__now h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: 0.3rem;
}

.mlplay__now span {
  font-size: var(--fs-xs);
  color: var(--text-low);
  font-family: var(--font-mono);
  direction: ltr;
  display: block;
}

/* waveform */
.mlwave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 62px;
  margin-block-end: var(--s-4);
}

.mlwave i {
  flex: 1;
  background: var(--ink-500);
  border-radius: 2px;
  display: block;
  transition: background var(--t-fast);
}

.mlwave i.is-played {
  background: var(--media-500);
}

.mlwave:hover i {
  background: var(--ink-600);
}

.mlwave:hover i.is-played {
  background: var(--media-400);
}

.mlplay__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.mlplay__btn {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--media-500);
  color: #14061F;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -6px var(--media-glow);
}

.mlplay__time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-low);
  direction: ltr;
}

.mlplay__ctrls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
  color: var(--text-faint);
}

.mlplay__ctrls span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.45rem;
}

/* chapters */
.mlchap {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.mlchap h3 {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-block-end: var(--s-4);
}

.mlchap__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

.mlchap__row + .mlchap__row {
  border-block-start: 1px solid var(--line-soft);
}

.mlchap__row b {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--media-400);
  flex: none;
  direction: ltr;
}

.mlchap__row span {
  font-size: var(--fs-xs);
  color: var(--text-mid);
  line-height: var(--lh-body);
}

/* ---------- WHERE TO LISTEN ---------- */
.mlplat__row {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.mlplat {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 190px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.mlplat:hover {
  border-color: var(--media-500);
  transform: translateY(-3px);
}

.mlplat i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--media-glow);
  color: var(--media-400);
}

.mlplat b {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.mlplat span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

/* ---------- HOSTS ---------- */
.mlhost__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 860px) {
  .mlhost__grid {
    grid-template-columns: 1fr;
  }
}
.mlhost {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.mlhost__av {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--media-400), var(--media-500));
  display: grid;
  place-items: center;
  color: #14061F;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.mlhost b {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.mlhost__role {
  font-size: var(--fs-xs);
  color: var(--media-400);
  font-weight: 600;
}

.mlhost p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---------- PRODUCTION / BEHIND THE SCENES ---------- */
.mlprod__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (max-width: 900px) {
  .mlprod__grid {
    grid-template-columns: 1fr;
  }
}
.mlprod__list {
  display: grid;
  gap: var(--s-4);
}

.mlprod__item {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}

.mlprod__item i {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--media-glow);
  color: var(--media-400);
}

.mlprod__item h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: 0.25rem;
}

.mlprod__item p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

.mlprod__kit {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.mlprod__kit h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-block-end: var(--s-5);
}

.mlprod__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  font-size: var(--fs-xs);
}

.mlprod__spec + .mlprod__spec {
  border-block-start: 1px solid var(--line-soft);
}

.mlprod__spec dt {
  color: var(--text-faint);
}

.mlprod__spec dd {
  color: var(--text-hi);
  font-family: var(--font-mono);
  direction: ltr;
  text-align: end;
}

/* ---------- SUBSCRIBE ---------- */
.mlsub__card {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

.mlsub__card::before {
  content: "";
  position: absolute;
  inset-block-start: -150px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 620px;
  height: 340px;
  background: radial-gradient(ellipse at top, var(--media-glow), transparent 70%);
}

.mlsub__card > * {
  position: relative;
}

.mlsub__card h2 {
  font-size: var(--fs-h3);
  color: var(--text-hi);
  margin-block-end: var(--s-3);
}

.mlsub__card > p {
  color: var(--text-mid);
  margin-block-end: var(--s-6);
}

.mlsub__form {
  display: flex;
  gap: var(--s-3);
  max-width: 26rem;
  margin-inline: auto;
  flex-wrap: wrap;
}

.mlsub__form input {
  flex: 1;
  min-width: 12rem;
  background: var(--ink-800);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  padding: 0.85rem 1.4rem;
  color: var(--text-hi);
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
}

.mlsub__form input::placeholder {
  color: var(--text-faint);
}

.mlsub__form button {
  --btn-bg: var(--media-500);
  --btn-fg: #14061F;
  flex: none;
}

/* ---------- CROSS-POLLINATION → Insights (docs/06 §6.4) ---------- */
.mlxpol {
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-800);
  padding-block: var(--s-6);
}

.mlxpol__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.mlxpol p {
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.mlxpol p b {
  color: var(--text-hi);
}

.mlxpol a {
  flex: none;
}

/* ============================================================
   CAREERS — careers.rtlub.com (docs/02 §2.3)
   The unified ATS for every arm of the group. One account,
   one application, apply anywhere. Inherits the parent gold
   (docs/07 §1.5 — this is a corporate function, not a sub-brand).
   Pipeline copy is verbatim from docs/02 §2.3.
   ============================================================ */
.careers {
  --arm: var(--gold-500);
  --arm-glow: rgba(201, 169, 106, .30);
}

/* ---------- HERO ---------- */
.chero {
  position: relative;
  padding-block: 128px clamp(3rem, 8vh, 5rem);
  background: var(--ink-900);
  overflow: hidden;
}

.chero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset-block-start: -260px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 1200px;
  height: 680px;
  background: radial-gradient(ellipse at top, var(--arm-glow), transparent 66%);
  opacity: 0.7;
}

.chero > .wrap {
  position: relative;
}

.chero__id {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.chero__id .eyebrow {
  justify-content: center;
  color: var(--gold-400);
}

.chero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-block: var(--s-3) var(--s-5);
}

.chero h1 em {
  font-style: normal;
  color: var(--gold-500);
}

.chero__id > p {
  color: var(--text-mid);
  font-size: var(--fs-lead);
  margin-inline: auto;
  max-width: 44rem;
}

.chero__acts {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  margin-block-start: var(--s-7);
  flex-wrap: wrap;
}

.chero__stats {
  display: flex;
  justify-content: center;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--line-soft);
}

.chero__stat {
  text-align: center;
}

.chero__stat b {
  display: block;
  direction: ltr;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--gold-400);
  font-feature-settings: "tnum";
}

.chero__stat > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: 0.35rem;
}

/* ---------- ONE ACCOUNT / PIPELINE (docs/02 §2.3) ---------- */
.cpipe {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.cpipe__head {
  max-width: 42rem;
  margin-inline: auto var(--s-9);
  text-align: center;
}

.cpipe__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-3);
}

.cpipe__head h2 em {
  font-style: normal;
  color: var(--gold-500);
}

.cpipe__head p {
  color: var(--text-mid);
  line-height: var(--lh-body);
}

.cpipe__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 56rem;
  margin-inline: auto;
}

.cpipe__step {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: var(--s-6) var(--s-4);
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}

.cpipe__step i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--arm-glow);
  color: var(--gold-400);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  margin-inline: auto var(--s-4);
}

.cpipe__step h4 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: var(--s-2);
}

.cpipe__step p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

.cpipe__arrow {
  flex: none;
  color: var(--text-faint);
  padding-inline: var(--s-3);
}

[dir=rtl] .cpipe__arrow svg {
  transform: scaleX(-1);
}

@media (max-width: 760px) {
  .cpipe__rail {
    flex-direction: column;
  }
  .cpipe__arrow svg {
    transform: rotate(90deg) !important;
  }
}
/* ---------- OPEN ROLES ---------- */
.croles {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-900);
}

.croles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-end: var(--s-6);
}

.croles__head h2 {
  font-size: var(--fs-h2);
}

.croles__filters {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.croles__filters button {
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-mid);
  background: var(--ink-700);
  border: 1px solid var(--line);
  transition: all var(--t-fast) var(--e-out);
}

.croles__filters button:hover {
  color: var(--text-hi);
}

.croles__filters button.is-active {
  color: #221805;
  background: var(--gold-500);
  border-color: var(--gold-500);
}

.croles__list {
  display: grid;
  gap: var(--s-3);
}

.crole {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-mid), transform var(--t-mid) var(--e-out);
}

.crole:hover {
  border-color: var(--gold-500);
  transform: translateY(-3px);
}

.crole__dept {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.crole__main {
  flex: 1;
  min-width: 220px;
}

.crole__main h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: 0.3rem;
}

.crole__main span {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.crole__tags {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.crole__tag {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
}

.crole__cta {
  flex: none;
}

/* ---------- WHY WORK HERE ---------- */
.cwhy {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.cwhy__head {
  max-width: 42rem;
  margin-block-end: var(--s-8);
}

.cwhy__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) 0;
}

.cwhy__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1080px) {
  .cwhy__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .cwhy__grid {
    grid-template-columns: 1fr;
  }
}
.cwhy__card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cwhy__card i {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--arm-glow);
  color: var(--gold-400);
}

.cwhy__card h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.cwhy__card p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---------- GRADUATE PROGRAMME (docs/06 §6.4 point 3) ---------- */
.cgrad {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
  background: rgba(201, 169, 106, 0.05);
}

.cgrad__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (max-width: 900px) {
  .cgrad__inner {
    grid-template-columns: 1fr;
  }
}
.cgrad h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
}

.cgrad h2 em {
  font-style: normal;
  color: var(--gold-500);
}

.cgrad p {
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-block-end: var(--s-5);
}

.cgrad__flow {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: grid;
  gap: 0;
}

.cgrad__node {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
}

.cgrad__node + .cgrad__node {
  border-block-start: 1px solid var(--line-soft);
}

.cgrad__node i {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--academy-glow);
  color: var(--academy-400);
}

.cgrad__node:last-child i {
  background: var(--arm-glow);
  color: var(--gold-400);
}

.cgrad__node div h4 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.cgrad__node div span {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

/* ---------- BENEFITS ---------- */
.cben {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-900);
}

.cben__head {
  max-width: 44rem;
  margin-block-end: var(--s-8);
}

.cben__head .eyebrow {
  color: var(--gold-400);
}

.cben__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-4);
}

.cben__head h2 em {
  font-style: normal;
  color: var(--gold-500);
}

.cben__head p {
  color: var(--text-mid);
  line-height: var(--lh-body);
}

.cben__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .cben__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .cben__grid {
    grid-template-columns: 1fr;
  }
}
.cben__item {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.cben__item i {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--arm-glow);
  color: var(--gold-400);
}

.cben__item h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: 0.3rem;
}

.cben__item p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---------- TEAM VOICES ---------- */
.cvoice {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.cvoice__head {
  max-width: 44rem;
  margin-block-end: var(--s-8);
}

.cvoice__head .eyebrow {
  color: var(--gold-400);
}

.cvoice__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) 0;
}

.cvoice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 900px) {
  .cvoice__grid {
    grid-template-columns: 1fr;
  }
}
.cvoice__card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.cvoice__card blockquote {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  line-height: var(--lh-body);
  flex: 1;
}

.cvoice__card blockquote::before {
  content: "“";
  color: var(--gold-500);
  font-size: 2em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-inline-end: 0.08em;
}

.cvoice__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-soft);
}

.cvoice__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: #221805;
  font-weight: 700;
  font-size: var(--fs-xs);
}

/* scoped to the inner text block so the .cvoice__av <span> is not caught
   (a bare `.cvoice__who span` outranks .cvoice__av and kills its grid centring) */
.cvoice__who > div b {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-hi);
}

.cvoice__who > div span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

/* ---------- FAQ ---------- */
.cfaq {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-900);
}

.cfaq__head {
  max-width: 44rem;
  margin-inline: auto var(--s-8);
  text-align: center;
}

.cfaq__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) 0;
}

.cfaq__list {
  max-width: 48rem;
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}

.cfaq__item {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.cfaq__item[open] {
  border-color: var(--gold-600);
}

.cfaq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-hi);
  font-weight: 500;
}

.cfaq__item summary::-webkit-details-marker {
  display: none;
}

.cfaq__item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid var(--gold-500);
  border-block-end: 2px solid var(--gold-500);
  rotate: 45deg;
  transition: rotate var(--t-fast) var(--e-out);
}

.cfaq__item[open] summary::after {
  rotate: -135deg;
}

.cfaq__item p {
  padding: 0 var(--s-6) var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---------- MY APPLICATION (status preview) ---------- */
.cstat {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.cstat__card {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.cstat__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-block-end: 1px solid var(--line-soft);
}

.cstat__bar b {
  color: var(--text-hi);
  font-size: var(--fs-sm);
}

.cstat__bar span {
  font-size: var(--fs-xs);
  color: var(--gold-400);
}

.cstat__body {
  padding: var(--s-6);
}

.cstat__track {
  display: flex;
  align-items: center;
}

.cstat__pt {
  flex: 1;
  text-align: center;
  position: relative;
}

.cstat__pt i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-inline: auto var(--s-2);
  background: var(--ink-800);
  border: 2px solid var(--line-hard);
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.cstat__pt.is-done i {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #221805;
}

.cstat__pt.is-now i {
  border-color: var(--gold-500);
  color: var(--gold-400);
}

.cstat__pt span:not(.cstat__line) {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

.cstat__pt.is-done span, .cstat__pt.is-now span {
  color: var(--text-hi);
}

.cstat__line {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-start: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-hard);
  z-index: -1;
}

.cstat__pt.is-done .cstat__line {
  background: var(--gold-500);
}

.cstat__pt:first-child .cstat__line {
  display: none;
}

/* ============================================================
   THE CREATION ODYSSEY — interactive journey (docs/04)
   Design-prototype simulation of the video + Rive/WebGL layer
   described in docs/07 §2.4, using CSS/SVG animation instead.
   ============================================================ */
.odyssey-page main {
  background: var(--ink-900);
}

.ody-app {
  min-height: 100svh;
  padding-block: calc(68px + var(--s-6)) var(--s-9);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-7);
  max-width: var(--maxw);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .ody-app {
    grid-template-columns: 1fr;
  }
}
/* ---------- progress rail ---------- */
.ody-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: sticky;
  top: calc(68px + var(--s-5));
  align-self: start;
}

@media (max-width: 900px) {
  .ody-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--s-3);
    padding-block-end: var(--s-2);
  }
}
.ody-rail__dot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: var(--font-sans);
  text-align: start;
  cursor: pointer;
  padding: var(--s-2) var(--s-1);
  border-radius: var(--r-md);
  transition: color var(--t-mid) var(--e-out), opacity var(--t-mid);
  opacity: 0.5;
}

.ody-rail__dot:disabled {
  cursor: not-allowed;
}

.ody-rail__dot:not(:disabled):hover {
  color: var(--text-mid);
  opacity: 0.85;
}

.ody-rail__n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line-hard);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-low);
}

.ody-rail__t {
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.ody-rail__dot.is-active {
  color: var(--text-hi);
  opacity: 1;
}

.ody-rail__dot.is-active .ody-rail__n {
  border-color: var(--p, var(--gold-500));
  color: var(--p, var(--gold-500));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--p, var(--gold-500)) 18%, transparent);
}

/* ---------- viewport + stages ---------- */
.ody-viewport {
  position: relative;
  min-height: 60svh;
}

.ody-stage {
  display: none;
  animation: odyIn var(--t-slow) var(--e-out);
}

.ody-stage.is-active {
  display: block;
}

@keyframes odyIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ---------- gate ---------- */
.gate {
  max-width: 46rem;
}

.gate h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-block: var(--s-3) var(--s-4);
}

.gate .lead {
  margin-block-end: var(--s-7);
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.gate__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gate__field > span:first-child {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  font-weight: 500;
}

#odyName {
  background: var(--ink-700);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-hi);
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  padding: var(--s-4) var(--s-5);
  outline: none;
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}

#odyName:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(201, 169, 106, 0.18);
}

.gate__types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.chip {
  background: var(--ink-700);
  border: 1.5px solid var(--line);
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  border-radius: var(--r-pill);
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: all var(--t-mid) var(--e-out);
}

.chip:hover {
  border-color: var(--line-hard);
  color: var(--text-hi);
}

.chip.is-on {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #14161C;
  font-weight: 600;
}

.gate__err {
  color: #E8846B;
  font-size: var(--fs-sm);
}

/* ---------- station shell (shared by 4 team stops) ---------- */
.station {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 780px) {
  .station {
    grid-template-columns: 1fr;
  }
}
.station__person {
  text-align: center;
}

.avatar-loop {
  width: 132px;
  height: 132px;
  margin-inline: auto var(--s-4);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--p, var(--gold-500)) 55%, var(--ink-700)), var(--ink-800));
  border: 1.5px solid color-mix(in srgb, var(--p, var(--gold-500)) 45%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--pg, var(--gold-500)) 12%, transparent), var(--sh-md);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: avatarBreathe 4.2s ease-in-out infinite;
}

@keyframes avatarBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}
.avatar-loop span {
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--text-hi);
  font-family: var(--font-sans);
}

.station__person h3 {
  font-size: var(--fs-h3);
  color: var(--text-hi);
}

.station__person .role {
  font-size: var(--fs-xs);
  color: var(--p, var(--gold-500));
  margin-block-start: var(--s-1);
}

.station__main {
  max-width: 46rem;
}

.dialogue {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-hi);
  min-height: 6.5em;
  margin-block-end: var(--s-6);
}

.dialogue.is-typing::after {
  content: "▌";
  display: inline-block;
  margin-inline-start: 2px;
  color: var(--p, var(--gold-500));
  animation: caretBlink 0.9s step-end infinite;
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}
.ody-next {
  --btn-bg: var(--p, var(--gold-500));
  --btn-fg: #0C0E14;
  margin-block-start: var(--s-6);
}

.ody-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.viz {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-sm);
}

/* ---- station 1: generative flowchart ---- */
.viz--flow .viz__cap {
  font-size: var(--fs-xs);
  color: var(--text-low);
  margin-block-end: var(--s-4);
}

.viz__flow-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.flow-node rect {
  fill: var(--ink-800);
  stroke: color-mix(in srgb, var(--p, var(--studio-500)) 50%, var(--line-hard));
  stroke-width: 1.4;
}

.flow-node text {
  fill: var(--text-mid);
  font-size: 11px;
  font-family: var(--font-sans);
}

.flow-node__sub {
  fill: var(--p, var(--studio-500)) !important;
  font-family: var(--font-mono);
  font-size: 9px !important;
}

.flow-node {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transform-origin: center;
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}

.flow-node.is-in {
  opacity: 1;
  transform: none;
}

.flow-link {
  fill: none;
  stroke: var(--p, var(--studio-500));
  stroke-width: 2;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  transition: stroke-dashoffset var(--t-vslow) var(--e-in-out);
}

.flow-link.is-drawn {
  stroke-dashoffset: 0;
}

/* ---- station 2: phone prototype ---- */
.viz--phone {
  display: flex;
  justify-content: center;
}

.phone {
  width: 220px;
  background: var(--ink-800);
  border: 1.5px solid var(--line-hard);
  border-radius: 30px;
  padding: var(--s-2) var(--s-2) var(--s-4);
  box-shadow: var(--sh-md);
  transition: transform var(--t-mid) var(--e-out);
}

.phone.is-flipping {
  transform: scale(0.97) rotateX(6deg);
}

.phone__notch {
  width: 64px;
  height: 16px;
  background: var(--ink-900);
  border-radius: 0 0 10px 10px;
  margin-inline: auto;
}

.phone__screen {
  height: 300px;
  margin-block: var(--s-3);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: var(--paper-100);
}

.phone__wire {
  padding: var(--s-4);
  height: 100%;
  box-sizing: border-box;
}

.wf-bar {
  height: 10px;
  width: 40%;
  background: #D8D6CC;
  border-radius: 4px;
  margin-block-end: var(--s-4);
}

.wf-block--img {
  height: 120px;
  background: #E3E1D8;
  border-radius: 8px;
  margin-block-end: var(--s-4);
}

.wf-line {
  height: 8px;
  background: #D8D6CC;
  border-radius: 4px;
  margin-block-end: var(--s-2);
}

.wf-btn {
  height: 34px;
  width: 100%;
  background: #C7C4B7;
  border-radius: 8px;
  margin-block-start: var(--s-4);
}

.phone__ui {
  height: 100%;
  box-sizing: border-box;
  padding: var(--s-4);
  background: var(--ink-800);
  animation: odyIn var(--t-slow) var(--e-out);
}

.ui-bar {
  height: 10px;
  width: 46%;
  background: var(--media-400);
  border-radius: 4px;
  margin-block-end: var(--s-4);
  opacity: 0.8;
}

.ui-hero {
  height: 120px;
  border-radius: 10px;
  margin-block-end: var(--s-4);
  background: linear-gradient(135deg, var(--media-500), var(--media-glow));
}

.ui-title {
  color: var(--text-hi);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block-end: var(--s-1);
}

.ui-price {
  color: var(--media-400);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.phone__cta {
  display: block;
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--p, var(--media-500));
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--e-out);
}

.phone__cta:hover {
  transform: translateY(-1px);
}

.phone.is-done .phone__cta {
  background: var(--studio-500);
}

/* ---- station 3: code stream + lighthouse gauge ---- */
.viz--code {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: var(--s-6);
  align-items: center;
}

@media (max-width: 640px) {
  .viz--code {
    grid-template-columns: 1fr;
  }
}
.code-win {
  background: var(--ink-900);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.code-win__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.code-win__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-hard);
}

.code-win__bar span {
  margin-inline-start: auto;
}

.code-win__body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--academy-400);
  padding: var(--s-4);
  min-height: 8em;
  margin: 0;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}

.lh-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.lh-gauge svg {
  width: 110px;
  height: 110px;
  transform: rotate(-90deg);
}

.lh-gauge__track {
  fill: none;
  stroke: var(--line);
  stroke-width: 8;
}

.lh-gauge__fill {
  fill: none;
  stroke: var(--academy-500);
  stroke-width: 8;
  stroke-linecap: round;
}

.lh-gauge__val {
  position: absolute;
  top: 34px;
  inset-inline: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-hi);
}

.lh-gauge__cap {
  font-size: var(--fs-micro);
  color: var(--text-low);
  text-align: center;
}

/* ---- station 4: QA console + bug hunt ---- */
.qa-console {
  background: var(--ink-800);
  border-radius: var(--r-md);
  padding: var(--s-5);
  border: 1px solid var(--line);
}

.qa-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--text-mid);
  position: relative;
}

.qa-row:last-child {
  border-block-end: none;
}

.qa-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E8846B;
  flex: none;
  transition: background var(--t-mid);
}

.qa-row.is-pass .qa-dot {
  background: var(--studio-500);
}

.qa-row.is-pass {
  color: var(--text-hi);
}

.qa-bug {
  margin-inline-start: auto;
  background: none;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  filter: grayscale(0.2);
  transition: transform var(--t-fast) var(--e-out);
  opacity: 0.4;
}

.qa-row--bug.is-armed .qa-bug {
  opacity: 1;
  animation: bugPulse 1.1s ease-in-out infinite;
}

.qa-bug:hover {
  transform: scale(1.15);
}

.qa-bug.is-squashed {
  animation: none;
  transform: scale(0);
  opacity: 0;
}

@keyframes bugPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
.qa-status {
  margin-block-start: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.qa-status.is-clear {
  color: var(--studio-400);
}

/* ---------- closing ---------- */
.closing {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.closing__team {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
}

.closing__av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--p) 35%, var(--ink-700));
  border: 1.5px solid var(--p);
  color: var(--text-hi);
  font-weight: 600;
  font-size: var(--fs-lead);
}

.closing h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-4);
}

.closing .lead {
  margin-inline: auto var(--s-7);
}

.closing__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  text-align: start;
  margin-block-end: var(--s-7);
}

@media (max-width: 700px) {
  .closing__cards {
    grid-template-columns: 1fr;
  }
}
.closing__card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.closing__card .ico {
  color: var(--gold-500);
}

.closing__card h4 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.closing__file {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-low);
  word-break: break-all;
}

.closing__note {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.closing__slots {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.slot {
  background: var(--ink-800);
  border: 1.5px solid var(--line);
  color: var(--text-mid);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--t-mid) var(--e-out);
  text-align: start;
}

.slot:hover:not(:disabled) {
  border-color: var(--gold-500);
  color: var(--text-hi);
}

.slot.is-picked {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #14161C;
  font-weight: 600;
}

.slot:disabled:not(.is-picked) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   FOUNDER PERSONAL SITES — shared shell (docs/05 §5.2)
   Deliberately NOT the master-brand header/mega-menu. Just a
   quiet floating authority badge, and one conversion block at
   the end. The craft-specific hero/body lives in each founder's
   own partial (_founder-omar.scss / _founder-moaz.scss).
   ============================================================ */
.founder-page {
  background: var(--ink-900);
}

.founder-page main {
  position: relative;
}

/* ---- 5.2.A the fixed floating authority badge ---- */
.f-badge {
  position: fixed;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  transition: border-color var(--t-mid), background var(--t-mid);
}

[dir=rtl] .f-badge {
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
}

.f-badge__mark {
  width: 22px;
  height: 22px;
  flex: none;
}

.f-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.f-badge__role {
  font-size: var(--fs-micro);
  color: var(--text-hi);
  font-weight: 600;
}

.f-badge__brand {
  font-size: var(--fs-micro);
  color: var(--text-low);
}

.f-badge__lang {
  margin-inline-start: var(--s-2);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-hard);
  background: none;
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-mid) var(--e-out);
}

.f-badge__lang:hover {
  border-color: var(--p, var(--gold-500));
  color: var(--text-hi);
}

@media (max-width: 640px) {
  .f-badge__brand {
    display: none;
  }
}
/* ---- 5.2.B expansion / conversion block ---- */
.f-expand {
  padding-block: clamp(4rem, 10vh, 6.5rem);
  border-block-start: 1px solid var(--line-soft);
  background: var(--ink-800);
}

.f-expand__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.f-expand .eyebrow {
  justify-content: center;
}

.f-expand h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-5);
}

.f-expand p {
  color: var(--text-mid);
  line-height: var(--lh-body);
  font-size: var(--fs-lead);
  margin-inline: auto var(--s-7);
  max-width: 46rem;
}

.f-expand .btn {
  --btn-bg: var(--p, var(--gold-500));
  --btn-fg: #0C0E14;
}

/* ---- minimal footer (not the universal one - stays lightweight) ---- */
.f-footer {
  padding-block: var(--s-6);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.f-footer a {
  color: var(--text-low);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all var(--t-mid);
}

.f-footer a:hover {
  color: var(--text-hi);
  border-color: currentColor;
}

.f-footer .dot {
  margin-inline: var(--s-2);
  opacity: 0.5;
}

/* ============================================================
   OMAR — UI/UX Director personal site (docs/05 §5.1.A)
   Fluid, bold, typography-centric, cinematic. Hard color
   contrast. Soft parallax that reacts to the cursor.
   ============================================================ */
.omar-page {
  --p: var(--omar-500);
  --pg: var(--omar-glow);
}

/* ---- hero ---- */
.o-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-inline: var(--gutter);
}

.o-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  transition: transform 0.3s var(--e-out);
}

.o-hero__orb--a {
  width: 46vw;
  height: 46vw;
  top: -10%;
  inset-inline-end: -10%;
  background: var(--omar-glow);
}

.o-hero__orb--b {
  width: 30vw;
  height: 30vw;
  bottom: -6%;
  inset-inline-start: -6%;
  background: rgba(240, 221, 180, 0.14);
}

.o-hero__eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--omar-400);
  margin-block-end: var(--s-5);
  position: relative;
  z-index: 1;
}

.o-hero h1 {
  font-size: clamp(3.25rem, 10vw, 9rem);
  line-height: 0.94;
  letter-spacing: var(--ls-display);
  font-weight: 700;
  color: var(--text-hi);
  position: relative;
  z-index: 1;
}

.o-hero h1 em {
  font-style: normal;
  color: var(--omar-500);
}

.o-hero__sub {
  margin-block-start: var(--s-6);
  font-size: var(--fs-lead);
  color: var(--text-mid);
  max-width: 40rem;
  position: relative;
  z-index: 1;
}

.o-hero__badge {
  margin-block-start: var(--s-7);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-low);
  position: relative;
  z-index: 1;
}

.o-hero__scroll {
  position: absolute;
  bottom: var(--s-6);
  inset-inline-start: var(--gutter);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.o-hero__scroll i {
  width: 1px;
  height: 28px;
  background: linear-gradient(var(--omar-500), transparent);
  display: block;
}

.o-hero__acts {
  display: flex;
  gap: var(--s-4);
  margin-block-start: var(--s-7);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.o-hero__acts .btn:not(.btn--ghost) {
  --btn-bg: var(--omar-500);
  --btn-fg: #ffffff;
}

.o-hero__acts .btn--ghost:hover {
  border-color: var(--omar-500);
}

.o-hero__strip {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line-soft);
  position: relative;
  z-index: 1;
}

.o-hero__stat b {
  display: block;
  direction: ltr;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--omar-400);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

.o-hero__stat > span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-start: 0.35rem;
}

/* ---- shared section rhythm ---- */
.o-sec {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.o-sec__head {
  max-width: 44rem;
  margin-block-end: var(--s-8);
}

.o-sec__head .eyebrow {
  color: var(--omar-400);
}

.o-sec__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-4);
  letter-spacing: var(--ls-tight);
}

.o-sec__head h2 em {
  font-style: normal;
  color: var(--omar-500);
}

.o-sec__head p {
  color: var(--text-mid);
  line-height: var(--lh-body);
}

/* ---- what I do ---- */
.o-serv__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1080px) {
  .o-serv__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .o-serv__grid {
    grid-template-columns: 1fr;
  }
}
.o-serv__card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid);
}

.o-serv__card:hover {
  transform: translateY(-5px);
  border-color: var(--omar-500);
}

.o-serv__card > i {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--omar-glow);
  color: var(--omar-400);
}

.o-serv__card h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.o-serv__card p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---- design process ---- */
.o-proc__rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1000px) {
  .o-proc__rail {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .o-proc__rail {
    grid-template-columns: 1fr;
  }
}
.o-proc__step {
  position: relative;
  padding-block-start: var(--s-5);
  border-block-start: 2px solid var(--line);
}

.o-proc__step::before {
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  width: 34%;
  height: 2px;
  background: var(--omar-500);
}

.o-proc__step b {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--omar-500);
  display: block;
  margin-block-end: var(--s-3);
}

.o-proc__step h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: var(--s-2);
}

.o-proc__step p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---- case study outcome metrics ---- */
.o-case__out {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line-soft);
}

.o-case__metric b {
  display: block;
  direction: ltr;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--omar-400);
  font-weight: 300;
  font-feature-settings: "tnum";
}

.o-case__metric > span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-start: 0.3rem;
}

/* ---- design system showcase ---- */
.o-ds__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-6);
}

@media (max-width: 900px) {
  .o-ds__grid {
    grid-template-columns: 1fr;
  }
}
.o-ds__panel {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.o-ds__panel h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-block-end: var(--s-5);
}

/* type scale */
.o-ds__type {
  display: grid;
  gap: var(--s-4);
}

.o-ds__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
}

.o-ds__row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.o-ds__row span:first-child {
  color: var(--text-hi);
  line-height: 1.1;
}

.o-ds__row span:last-child {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  flex: none;
  direction: ltr;
}

.o-ds__row--display span:first-child {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: var(--ls-display);
}

.o-ds__row--h span:first-child {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
}

.o-ds__row--body span:first-child {
  font-size: var(--fs-body);
  color: var(--text-mid);
}

.o-ds__row--cap span:first-child {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-low);
}

/* colour swatches */
.o-ds__sw {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-block-end: var(--s-6);
}

.o-ds__chip {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.o-ds__chip i {
  display: block;
  height: 54px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}

.o-ds__chip span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  direction: ltr;
}

/* component samples */
.o-ds__comp {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.o-ds__btnrow {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.o-ds__btn {
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
}

.o-ds__btn--solid {
  background: var(--omar-500);
  color: #fff;
}

.o-ds__btn--out {
  border: 1.5px solid var(--line-hard);
  color: var(--text-hi);
}

.o-ds__btn--ghost {
  color: var(--omar-400);
}

.o-ds__field {
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  padding: 0.7rem 1rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  background: var(--ink-800);
}

.o-ds__toggles {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.o-ds__switch {
  width: 38px;
  height: 21px;
  border-radius: var(--r-pill);
  background: var(--omar-500);
  position: relative;
  flex: none;
}

.o-ds__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
}

.o-ds__switch--off {
  background: var(--ink-500);
}

.o-ds__switch--off::after {
  inset-inline-end: auto;
  inset-inline-start: 3px;
}

.o-ds__toggles span {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

/* ---- testimonial ---- */
.o-quote {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.o-quote blockquote {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--text-hi);
  line-height: 1.55;
  font-weight: 500;
}

.o-quote blockquote::before {
  content: "“";
  color: var(--omar-500);
  font-size: 2.2em;
  line-height: 0;
  vertical-align: -0.32em;
  margin-inline-end: 0.08em;
}

.o-quote__by {
  margin-block-start: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.o-quote__by b {
  color: var(--omar-400);
  font-weight: 600;
}

/* ---- contact ---- */
.o-contact__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.o-contact__inner h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s-4);
  letter-spacing: var(--ls-tight);
}

.o-contact__inner h2 em {
  font-style: normal;
  color: var(--omar-500);
}

.o-contact__inner > p {
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-block-end: var(--s-6);
}

.o-contact__acts {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}

.o-contact__acts .btn:not(.btn--ghost) {
  --btn-bg: var(--omar-500);
  --btn-fg: #ffffff;
}

.o-contact__acts .btn--ghost:hover {
  border-color: var(--omar-500);
}

/* ---- philosophy statement ---- */
.o-phil {
  padding-block: clamp(5rem, 12vh, 8rem);
  border-block-start: 1px solid var(--line-soft);
}

.o-phil__inner {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.o-phil p {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.5;
  color: var(--text-hi);
  font-weight: 500;
}

.o-phil em {
  font-style: normal;
  color: var(--omar-500);
}

/* ---- case studies ---- */
.o-cases {
  padding-block: clamp(4rem, 10vh, 7rem);
}

.o-case {
  padding-block: var(--s-9);
  border-block-start: 1px solid var(--line-soft);
}

.o-case:first-child {
  border-block-start: none;
}

.o-case__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
  flex-wrap: wrap;
}

.o-case__num {
  font-family: var(--font-mono);
  color: var(--omar-500);
  font-size: var(--fs-sm);
}

.o-case h3 {
  font-size: var(--fs-h2);
  color: var(--text-hi);
}

.o-case__tag {
  font-size: var(--fs-xs);
  color: var(--text-low);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
}

.o-chain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 760px) {
  .o-chain {
    grid-template-columns: 1fr;
  }
}
.o-chain__step {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform var(--t-mid) var(--e-out), border-color var(--t-mid);
}

.o-chain__step:hover {
  transform: translateY(-6px);
  border-color: var(--omar-500);
}

.o-chain__step h4 {
  font-size: var(--fs-xs);
  color: var(--omar-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-block-end: var(--s-3);
}

.o-chain__visual {
  height: 120px;
  border-radius: var(--r-md);
  margin-block-end: var(--s-3);
  position: relative;
  overflow: hidden;
}

.o-chain__visual--map {
  background: var(--ink-800);
}

.o-chain__visual--map svg {
  width: 100%;
  height: 100%;
}

.o-chain__visual--wire {
  background: var(--paper-200);
  display: grid;
  place-items: center;
  gap: 6px;
  padding: var(--s-4);
}

.o-chain__visual--wire span {
  display: block;
  width: 100%;
  height: 8px;
  background: #C7C4B7;
  border-radius: 3px;
}

.o-chain__visual--wire span:nth-child(2) {
  width: 70%;
}

.o-chain__visual--final {
  background: linear-gradient(135deg, var(--omar-500), var(--omar-glow));
}

.o-chain__step p {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

/* ---- embedded interactive prototype ---- */
.o-proto {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.o-proto__head {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--s-8);
}

.o-proto__head h2 {
  font-size: var(--fs-h2);
  margin-block: var(--s-3) var(--s-4);
}

.o-proto__head p {
  color: var(--text-mid);
}

.figma-frame {
  max-width: 420px;
  margin-inline: auto;
  background: var(--ink-700);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}

.figma-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.figma-frame__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--omar-500);
}

.figma-frame__stage {
  height: 380px;
  position: relative;
  background: var(--paper-100);
  cursor: pointer;
  overflow: hidden;
}

.figma-frame__screen {
  position: absolute;
  inset: 0;
  padding: var(--s-5);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity var(--t-slow) var(--e-out);
}

.figma-frame__screen.is-on {
  opacity: 1;
}

.figma-frame__cursor {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: left var(--t-slow) var(--e-in-out), top var(--t-slow) var(--e-in-out);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.figma-frame__foot {
  padding: var(--s-3) var(--s-4);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-low);
  border-block-start: 1px solid var(--line-soft);
}

/* ============================================================
   MOAZ — Co-Founder & CTO personal site (docs/05 §5.1.B)
   "تصميم مستقبلي، نظيف وصاروخي الأداء (Cyberpunk Tech)...
    Dark Mode... عرض نتائج Google Lighthouse الحية ومستودعات
    GitHub الحقيقية."
   Cyberpunk terminal cyan. Everything on this page is proof,
   not claim: gauges, benchmark tables, architecture, repos.
   ============================================================ */
.moaz-page {
  --p: var(--moaz-500);
  --pg: var(--moaz-glow);
}

.moaz-page * {
  transition-duration: 120ms;
}

.moaz-page .reveal {
  transition-duration: var(--t-mid);
}

.moaz-page ::selection {
  background: var(--moaz-500);
  color: #04120E;
}

/* shared section rhythm */
.m-sec {
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block-start: 1px solid var(--line-soft);
}

.m-sec__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-end: var(--s-7);
}

.m-sec__head h2 {
  font-size: var(--fs-h2);
}

.m-sec__head h2 em {
  font-style: normal;
  color: var(--moaz-500);
}

/* direct child only — a bare `.m-sec__head span` outranks .m-eyebrow (0,1,1 vs 0,1,0)
   and would repaint the cyan eyebrow grey */
.m-sec__head > span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.m-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--moaz-500);
  margin-block-end: var(--s-3);
  display: block;
}

.m-eyebrow::before {
  content: "// ";
  color: var(--text-faint);
}

/* ---- hero: terminal ---- */
.m-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  padding-block: 96px var(--s-8);
  background: radial-gradient(ellipse 900px 500px at 15% 12%, rgba(41, 245, 200, 0.08), transparent 70%), linear-gradient(var(--ink-900), var(--ink-900)), repeating-linear-gradient(0deg, rgba(41, 245, 200, 0.035) 0px, rgba(41, 245, 200, 0.035) 1px, transparent 1px, transparent 32px);
}

.m-hero__inner {
  max-width: 62rem;
  width: 100%;
}

.m-hero__prompt {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--moaz-500);
  margin-block-end: var(--s-5);
}

.m-hero__prompt::before {
  content: "$ ";
  color: var(--text-faint);
}

.m-hero h1 {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 6.5vw, 5rem);
  line-height: 1.08;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}

.m-hero h1 .cur {
  display: inline-block;
  width: 0.55ch;
  background: var(--moaz-500);
  animation: mCaret 1s step-end infinite;
}

@keyframes mCaret {
  50% {
    opacity: 0;
  }
}
.m-hero__role {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--moaz-400);
  margin-block-start: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.m-hero__role i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moaz-500);
  box-shadow: 0 0 0 4px var(--moaz-glow);
  flex: none;
}

.m-hero__sub {
  margin-block-start: var(--s-5);
  font-size: var(--fs-lead);
  color: var(--text-mid);
  max-width: 42rem;
  line-height: var(--lh-body);
}

.m-hero__acts {
  display: flex;
  gap: var(--s-4);
  margin-block-start: var(--s-7);
  flex-wrap: wrap;
}

.m-hero__acts .btn:not(.btn--ghost) {
  --btn-bg: var(--moaz-500);
  --btn-fg: #04120E;
}

.m-hero__acts .btn--ghost:hover {
  border-color: var(--moaz-500);
}

.m-hero__strip {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line-soft);
  font-family: var(--font-mono);
}

.m-hero__stat b {
  display: block;
  direction: ltr;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--moaz-400);
  font-feature-settings: "tnum";
}

.m-hero__stat > span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-start: 0.35rem;
}

/* ---- capabilities ---- */
.m-cap__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

@media (max-width: 1080px) {
  .m-cap__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .m-cap__grid {
    grid-template-columns: 1fr;
  }
}
.m-cap__card {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.m-cap__card:hover {
  border-color: var(--moaz-500);
  transform: translateY(-4px);
}

.m-cap__card > i {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--moaz-glow);
  color: var(--moaz-400);
}

.m-cap__card h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
}

.m-cap__card p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
  flex: 1;
}

.m-cap__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line-soft);
}

.m-cap__tags span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.5rem;
}

/* ---- performance dashboard ---- */
.m-perf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

@media (max-width: 760px) {
  .m-perf__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.m-gauge {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: center;
}

.m-gauge__ring {
  position: relative;
  width: 84px;
  height: 84px;
  margin-inline: auto;
}

.m-gauge__ring svg {
  width: 84px;
  height: 84px;
  transform: rotate(-90deg);
}

.m-gauge__track {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
}

.m-gauge__fill {
  fill: none;
  stroke: var(--moaz-500);
  stroke-width: 7;
  stroke-linecap: round;
}

.m-gauge__val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-hi);
}

.m-gauge__label {
  font-size: var(--fs-xs);
  color: var(--text-low);
  margin-block-start: var(--s-3);
}

/* ---- case study: architecture + benchmarks ---- */
.m-case__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: start;
  margin-block-end: var(--s-8);
}

@media (max-width: 900px) {
  .m-case__intro {
    grid-template-columns: 1fr;
  }
}
.m-case__intro h3 {
  font-size: var(--fs-h3);
  color: var(--text-hi);
  margin-block-end: var(--s-4);
}

.m-case__intro p {
  color: var(--text-mid);
  line-height: var(--lh-body);
}

.m-case__facts {
  display: grid;
  gap: 0;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.m-case__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  font-size: var(--fs-xs);
}

.m-case__fact + .m-case__fact {
  border-block-start: 1px solid var(--line-soft);
}

.m-case__fact dt {
  color: var(--text-faint);
}

.m-case__fact dd {
  color: var(--text-hi);
  font-family: var(--font-mono);
  text-align: end;
}

/* architecture diagram */
.m-arch {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  overflow-x: auto;
  margin-block-end: var(--s-8);
}

.m-arch__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-block-end: var(--s-5);
}

/* The diagram is a technical LTR artefact: force direction so Arabic RTL
   never bidi-reorders label text like "CDN edge" or "cache · WAF". */
.m-arch svg {
  display: block;
  min-width: 660px;
  width: 100%;
  height: auto;
  direction: ltr;
}

.m-arch svg text {
  direction: ltr;
  unicode-bidi: isolate;
}

.m-arch .an-box {
  fill: var(--ink-700);
  stroke: var(--line-hard);
  stroke-width: 1;
}

.m-arch .an-box--hot {
  fill: rgba(41, 245, 200, 0.1);
  stroke: var(--moaz-500);
}

.m-arch .an-t {
  fill: var(--text-hi);
  font-size: 10.5px;
  font-family: var(--font-mono);
}

.m-arch .an-s {
  fill: var(--text-faint);
  font-size: 8.5px;
  font-family: var(--font-mono);
}

.m-arch .an-line {
  stroke: var(--line-hard);
  stroke-width: 1.2;
  fill: none;
}

.m-arch .an-line--hot {
  stroke: var(--moaz-500);
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
  animation: mFlow 1.4s linear infinite;
}

@keyframes mFlow {
  to {
    stroke-dashoffset: -14;
  }
}
/* benchmark table */
.m-bench {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.m-bench__head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.9fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.m-bench__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.9fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-xs);
}

.m-bench__row + .m-bench__row {
  border-block-start: 1px solid var(--line-soft);
}

.m-bench__row b {
  color: var(--text-hi);
  font-weight: 500;
}

.m-bench__before {
  font-family: var(--font-mono);
  color: var(--text-low);
  direction: ltr;
  text-align: start;
}

.m-bench__after {
  font-family: var(--font-mono);
  color: var(--moaz-400);
  direction: ltr;
  text-align: start;
}

.m-bench__delta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  direction: ltr;
  text-align: start;
  color: var(--moaz-500);
  background: var(--moaz-glow);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.5rem;
  justify-self: start;
}

@media (max-width: 720px) {
  .m-bench__head {
    display: none;
  }
  .m-bench__row {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--s-2);
  }
  .m-bench__row b {
    grid-column: 1/-1;
  }
}
/* ---- engineering principles ---- */
.m-prin__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

@media (max-width: 760px) {
  .m-prin__grid {
    grid-template-columns: 1fr;
  }
}
.m-prin__item {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
}

.m-prin__item > b {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--moaz-500);
  border: 1px solid var(--moaz-500);
  border-radius: var(--r-sm);
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.m-prin__item h3 {
  font-size: var(--fs-sm);
  color: var(--text-hi);
  margin-block-end: var(--s-2);
}

.m-prin__item p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: var(--lh-body);
}

/* ---- github repos ---- */
.m-repos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .m-repos__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .m-repos__grid {
    grid-template-columns: 1fr;
  }
}
.m-repo {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.m-repo:hover {
  border-color: var(--moaz-500);
  transform: translateY(-3px);
}

.m-repo__name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-hi);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.m-repo__name .ico {
  color: var(--text-faint);
}

.m-repo p {
  font-size: var(--fs-xs);
  color: var(--text-low);
  margin-block: var(--s-3);
  min-height: 2.6em;
  line-height: var(--lh-body);
}

.m-repo__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.m-repo__lang {
  display: flex;
  align-items: center;
  gap: 5px;
}

.m-repo__lang i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ---- testimonial ---- */
.m-quote {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.m-quote blockquote {
  font-size: var(--fs-lead);
  color: var(--text-hi);
  line-height: var(--lh-body);
}

.m-quote blockquote::before {
  content: "“";
  color: var(--moaz-500);
  font-size: 2.5em;
  line-height: 0;
  vertical-align: -0.35em;
  margin-inline-end: 0.1em;
}

.m-quote__by {
  margin-block-start: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.m-quote__by b {
  color: var(--moaz-400);
  font-weight: 500;
}

/* ---- stack ticker ---- */
.m-stack {
  padding-block: var(--s-7);
  border-block-start: 1px solid var(--line-soft);
  overflow: hidden;
}

.m-stack__track {
  display: flex;
  gap: var(--s-8);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  animation: mTicker 26s linear infinite;
  width: max-content;
}

.m-stack__track span {
  color: var(--moaz-400);
}

@keyframes mTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
[dir=rtl] .m-stack__track {
  animation-name: mTickerRtl;
}

@keyframes mTickerRtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
/* ---- contact terminal ---- */
.m-contact__card {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--ink-850);
  border: 1px solid var(--line-hard);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.m-contact__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--line-soft);
  background: var(--ink-800);
}

.m-contact__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-hard);
}

.m-contact__bar i:first-child {
  background: #FF5F57;
}

.m-contact__bar i:nth-child(2) {
  background: #FEBC2E;
}

.m-contact__bar i:nth-child(3) {
  background: var(--moaz-500);
}

.m-contact__bar span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  margin-inline-start: auto;
}

.m-contact__body {
  padding: var(--s-7) var(--s-6);
  text-align: center;
}

.m-contact__body h2 {
  font-size: var(--fs-h3);
  color: var(--text-hi);
  margin-block-end: var(--s-3);
}

.m-contact__body > p {
  color: var(--text-mid);
  margin-block-end: var(--s-6);
}

.m-contact__acts {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}

.m-contact__acts .btn:not(.btn--ghost) {
  --btn-bg: var(--moaz-500);
  --btn-fg: #04120E;
}

.m-contact__acts .btn--ghost:hover {
  border-color: var(--moaz-500);
}

/* ============ GOVERNANCE & VISION (docs/02 §2.2) ============ */
.gov {
  background: var(--ink-900);
  border-block-start: 1px solid var(--line-soft);
}

.gov__head {
  max-width: 720px;
  margin-block-end: var(--s-8);
}

.gov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .gov__grid {
    grid-template-columns: 1fr;
  }
}
.card {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  transition: border-color var(--t-mid), background var(--t-mid), transform var(--t-mid) var(--e-out);
}

.card:hover {
  border-color: var(--gold-700);
  transform: translateY(-4px);
}

.card__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--gold-600);
  letter-spacing: 0.1em;
  margin-block-end: var(--s-4);
  display: block;
}

.card h3 {
  margin-block-end: 0.6rem;
}

.card p {
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.card ul {
  margin-block-start: var(--s-4);
  display: grid;
  gap: 0.55rem;
}

.card li {
  display: flex;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.card li .ico {
  color: var(--gold-600);
  flex: none;
  margin-block-start: 4px;
}

/* stat band */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--line-soft);
}

@media (max-width: 760px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.stat b {
  display: block;
  direction: ltr;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--text-hi);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

.stat b i {
  color: var(--gold-500);
  font-style: normal;
}

.stat > span {
  display: block;
  margin-block-start: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ============ CAREERS / UNIFIED ATS (docs/02 §2.3) ============ */
/* MUST stay scoped to `section.careers`: the careers subdomain page uses
   <body class="careers"> for arm theming, and a bare `.careers` here would
   put overflow:hidden on that page's <body> and kill its scrolling. */
section.careers {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  border-block-start: 1px solid var(--line-soft);
}

.careers__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-8);
  align-items: center;
}

@media (max-width: 940px) {
  .careers__grid {
    grid-template-columns: 1fr;
  }
}
/* the application status pipeline */
.pipe {
  display: grid;
  gap: 0;
}

.pipe__step {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--t-mid) var(--e-out);
}

.pipe__step:first-child {
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}

.pipe__step:last-child {
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
}

.pipe__step + .pipe__step {
  border-block-start: 0;
}

.pipe__step.is-done {
  background: rgba(201, 169, 106, 0.06);
  border-color: rgba(201, 169, 106, 0.22);
}

.pipe__step.is-now {
  background: rgba(201, 169, 106, 0.1);
  border-color: var(--gold-600);
  box-shadow: inset 0 0 40px -20px var(--gold-500);
}

.pipe__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hard);
  color: var(--text-faint);
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
}

.is-done .pipe__dot {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-900);
}

.is-now .pipe__dot {
  border-color: var(--gold-500);
  color: var(--gold-400);
  animation: pulse 2s var(--e-in-out) infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 169, 106, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(201, 169, 106, 0);
  }
}
.pipe__t {
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.is-now .pipe__t, .is-done .pipe__t {
  color: var(--text-hi);
}

.pipe__tag {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  letter-spacing: 0;
}

.dept-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--s-5);
}

.chip {
  --arm: var(--gold-500);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-low);
  transition: all var(--t-fast);
}

.chip:hover {
  border-color: var(--arm);
  color: var(--text-hi);
}

.chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arm);
  flex: none;
}

/* ============ UNIVERSAL INSTITUTIONAL FOOTER (docs/02 §2.4) ============
   Shipped as ONE component and rendered on every subdomain.
   Source of truth: js/layout.js  */
.ftr {
  background: var(--ink-900);
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-9) var(--s-6);
  position: relative;
}

.ftr__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  padding-block-end: var(--s-8);
}

@media (max-width: 1180px) {
  .ftr__top {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .ftr__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
}
.ftr__brand {
  max-width: 32ch;
}

@media (max-width: 1040px) {
  .ftr__brand {
    grid-column: 1/-1;
  }
}
.ftr__brand p {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin-block-start: var(--s-4);
  line-height: 1.7;
}

.ftr__social {
  display: flex;
  gap: 0.5rem;
  margin-block-start: var(--s-5);
}

.ftr__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  transition: all var(--t-fast);
}

.ftr__social a:hover {
  color: var(--gold-400);
  border-color: var(--gold-700);
  transform: translateY(-2px);
}

.ftr__col h4 {
  --arm: var(--gold-500);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-hi);
  margin-block-end: var(--s-4);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ftr__col h4::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--arm);
  flex: none;
}

.ftr__col li {
  margin-block-end: 0.7rem;
}

.ftr__col a {
  font-size: var(--fs-xs);
  color: var(--text-low);
  transition: color var(--t-fast), padding-inline-start var(--t-fast);
}

.ftr__col a:hover {
  color: var(--text-hi);
  padding-inline-start: 4px;
}

.ftr__legal {
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}

.ftr__legal p {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.ftr__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-inline-start: auto;
}

.ftr__legal nav a {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  transition: color var(--t-fast);
}

.ftr__legal nav a:hover {
  color: var(--gold-400);
}

/* prototype watermark so nobody mistakes this for production */
.protobar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-overlay);
  background: rgba(201, 169, 106, 0.12);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid rgba(201, 169, 106, 0.28);
  padding: 0.45rem var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  color: var(--gold-300);
  transform: translateY(0);
  transition: transform var(--t-mid) var(--e-out);
}

.protobar.is-hidden {
  transform: translateY(100%);
}

.protobar b {
  font-weight: 600;
}

.protobar__x {
  margin-inline-start: auto;
  color: var(--gold-400);
  opacity: 0.7;
}

.protobar__x:hover {
  opacity: 1;
}

/*# sourceMappingURL=main.css.map */