/* ============================================================================
   TELOS NEXUS SERVICES — telosnexus.services
   The build desk of Telos Nexus. Same Canva family as telosnexus.io:
   Master Visual Identity System (DAHVQ-yU0-M), Validation Design
   (DAHVeF8iTts) and the official Grape lockup (#750FB7).

   Editorial canvas #FFFBF8 · black display type · #750FB7 brand purple ·
   dark "system panels" (Night → Rich Telos Purple) carrying luminous violet
   routes, nodes and UI · orange #E8500A only as a tiny contextual accent.
   Arabic-first, logical properties only, reduced-motion = final state.
   ========================================================================== */

:root {
  /* Canva master palette */
  --night: #0D0D1A;
  --purple-rich: #3D1F6E;
  --purple-luminous: #7B4FA6;
  --warm-neutral: #E8E0D5;
  --white: #FFFFFF;
  --graphite: #6F6A78;
  /* Official lockup (brand kit) */
  --brand: #750FB7;
  --brand-deep: #5A0B8F;
  /* Canva canvas + signal register */
  --canvas: #FFFBF8;
  --ink: #000000;
  --ink-2: #2B2733;
  --ink-3: #5E5968;
  --violet: #8B3DFF;
  --violet-node: #9C5CFF;
  --violet-soft: #C9A7FF;
  --violet-hot: #F3EAFF;
  --accent: #E8500A;             /* contextual accent — never dominant */
  --rule: rgb(0 0 0 / .12);
  --line-dark: rgb(255 255 255 / .14);

  --display-en: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --text-en: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --display: var(--arabic);
  --text: var(--arabic);

  --pad: clamp(20px, 3.3vw, 64px);
  --gap: clamp(16px, 2vw, 32px);
  --top-h: 88px;
  --radius: clamp(18px, 1.6vw, 26px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
html[lang="en"] { --display: var(--display-en); --text: var(--text-en); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top-h); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; background: var(--canvas); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html[lang="ar"] body { line-height: 1.8; }
h1, h2, h3, h4, p, ol, ul, fieldset, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg, img { display: block; max-width: 100%; }
bdi { unicode-bidi: isolate; }
::selection { background: var(--brand); color: var(--white); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.panel :focus-visible { outline-color: var(--violet-soft); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: 8px; transform: translateY(-160%); }
.skip:focus { transform: none; }
.lat { font-family: var(--text-en); direction: ltr; unicode-bidi: isolate; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 600; font-size: clamp(3.4rem, 1rem + 8.4vw, 11rem); line-height: .9; letter-spacing: -.032em; color: var(--ink); }
.display--m { font-size: clamp(2.6rem, 1rem + 5vw, 6.8rem); line-height: .94; letter-spacing: -.03em; }
.display > span { display: block; }
html[lang="ar"] .display { font-weight: 700; letter-spacing: 0; line-height: 1.12; font-size: clamp(3rem, .8rem + 8vw, 9.6rem); }
html[lang="ar"] .display--m { line-height: 1.22; font-size: clamp(2.3rem, .9rem + 4.4vw, 5.8rem); }
.label { font-family: var(--text); font-weight: 700; font-size: clamp(.95rem, .85rem + .35vw, 1.2rem); line-height: 1.35; letter-spacing: 0; color: var(--ink); }
html[lang="en"] .label--caps { text-transform: uppercase; letter-spacing: .01em; }
.pair { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 12px 32px; align-items: start; }
.pair__text { font-size: clamp(1rem, .92rem + .35vw, 1.22rem); line-height: 1.45; color: var(--ink-2); max-width: 34em; }
html[lang="ar"] .pair__text { line-height: 1.8; }
.pairs { display: grid; gap: clamp(28px, 4vw, 72px); }
.kicker { font-family: var(--display-en); font-weight: 700; font-size: clamp(1rem, .9rem + .4vw, 1.3rem); color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.kicker em { font-style: normal; color: var(--brand); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 1rem; transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--brand { background: var(--brand); color: var(--white); box-shadow: 0 10px 30px -12px rgb(117 15 183 / .7); }
.btn--brand:hover { background: var(--brand-deep); box-shadow: 0 14px 36px -12px rgb(117 15 183 / .85); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
.arrow-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: var(--ink); }
.arrow-link svg, .arr { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
[dir="rtl"] .arrow-link svg, [dir="rtl"] .arr { transform: scaleX(-1); }
.arrow-link:hover svg { transform: translateX(6px); }
[dir="rtl"] .arrow-link:hover svg { transform: scaleX(-1) translateX(6px); }
.arrow-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease); }
[dir="rtl"] .arrow-link span { background-position: 100% 100%; }
.arrow-link:hover span { background-size: 100% 1.5px; }
.plain-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-family: var(--text-en); }
.plain-link span { border-block-end: 1.5px solid var(--ink); padding-block-end: 2px; }
.plain-link:hover { color: var(--brand); }
.plain-link:hover span { border-color: var(--brand); }
.is-soon, .is-disabled { color: var(--ink-3); cursor: default; }
a.is-disabled { pointer-events: none; }
.state { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 500; color: var(--ink-3); }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.state--live { color: var(--brand); }
.state--live::before { background: currentColor; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .35s, box-shadow .35s; }
.top.is-solid { background: rgb(255 251 248 / .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--rule); }
.top__in { height: var(--top-h); padding-inline: var(--pad); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
.logo__mark { width: 40px; height: 40px; flex: none; transition: transform .9s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-90deg); }
.logo__words { display: inline-flex; align-items: center; gap: 12px; }
.logo__name { font-family: var(--text-en); font-size: 1.3rem; font-weight: 400; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.logo__sub { padding-inline-start: 12px; border-inline-start: 1px solid rgb(0 0 0 / .22); font-size: 1rem; line-height: 1.25; font-weight: 500; color: var(--brand); white-space: nowrap; }
.top__nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.top__nav > a { display: inline-flex; gap: 6px; min-height: 44px; align-items: center; padding-inline: 13px; font-size: 1rem; font-weight: 500; color: var(--ink-2); border-radius: 999px; transition: background .25s, color .25s; white-space: nowrap; }
.top__nav > a:hover, .top__nav > a[aria-current="true"] { background: rgb(117 15 183 / .08); color: var(--brand); }
.top__home { font-family: var(--text-en); }
.top__home svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .top__home svg { transform: scaleX(-1); }
.top__end { display: flex; align-items: center; gap: 8px; }
.lang { min-height: 44px; padding-inline: 12px; font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.lang:hover { color: var(--brand); }
html[lang="en"] .lang { font-family: var(--arabic); }
html[lang="ar"] .lang { font-family: var(--text-en); }
.menu-btn { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); flex: none; }
.menu-btn i { position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn i:first-of-type { top: 19px; } .menu-btn i:last-of-type { top: 27px; }
.menu-btn[aria-expanded="true"] i:first-of-type { top: 23px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { top: 23px; transform: rotate(-45deg); }

.sheet { position: fixed; inset: 0; z-index: 90; background: var(--canvas); padding: calc(var(--top-h) + 12px) var(--pad) max(24px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: 1fr auto; gap: 20px; overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet__nav { display: grid; align-content: start; }
.sheet__nav > a { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; padding-block: 16px; border-block-end: 1px solid var(--rule); }
.sheet__nav small { grid-row: span 2; font-family: var(--text-en); font-weight: 700; color: var(--brand); font-size: .9rem; }
.sheet__nav b { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 8.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; }
html[lang="ar"] .sheet__nav b { letter-spacing: 0; line-height: 1.3; }
.sheet__nav span { color: var(--ink-3); }
.sheet__end { display: grid; gap: 10px; }
.sheet__end .arrow-link { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
  .sheet:not([hidden]) .sheet__nav > * { animation: sheet-in .55s var(--ease) both; }
  .sheet:not([hidden]) .sheet__nav > *:nth-child(2) { animation-delay: .05s; }
  .sheet:not([hidden]) .sheet__nav > *:nth-child(3) { animation-delay: .1s; }
  .sheet:not([hidden]) .sheet__nav > *:nth-child(4) { animation-delay: .15s; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- slides ---------- */
.slide { position: relative; padding: clamp(88px, 10vw, 160px) var(--pad); }
.slide + .slide { border-block-start: 1px solid var(--rule); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- system panels (dark, luminous) ---------- */
.panel { position: relative; overflow: hidden; border-radius: var(--radius); background: radial-gradient(120% 90% at 50% 100%, #1D0B38 0%, #120B24 45%, var(--night) 100%); color: var(--white); isolation: isolate; }
.panel--wide { aspect-ratio: 1600 / 360; min-height: 220px; }
.panel__cap { display: flex; justify-content: space-between; gap: 16px; font-size: .8rem; color: rgb(255 255 255 / .6); }
.panel__cap--abs { position: absolute; inset-inline: 22px; inset-block-end: 16px; pointer-events: none; }
.panel svg { width: 100%; height: 100%; }
.panel--grid::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(201 167 255 / .16) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%); }

/* network wave (shared with .io close) */
.wave__axis { stroke: url(#axis2); stroke-width: 2.2; }
.wave__lines line { stroke: rgb(155 92 255 / .55); stroke-width: 1; }
.wave__nodes .wn { fill: #B98CFF; }
.wave__nodes .wn--hot { fill: var(--violet-hot); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-draw]:not(.is-in) .wave__lines line { stroke-dasharray: 400; stroke-dashoffset: 400; }
  .js [data-draw]:not(.is-in) .wave__nodes circle { opacity: 0; }
  .js [data-draw].is-in .wave__lines line { stroke-dasharray: 400; animation: route 1.4s var(--ease) both; animation-delay: calc(var(--x) * 1100ms); }
  .js [data-draw].is-in .wave__nodes circle { animation: node .5s var(--ease) both; animation-delay: calc(300ms + var(--x) * 1100ms); }
  .js [data-draw]:not(.is-in) .ui { opacity: 0; transform: translateY(14px); }
  .js [data-draw].is-in .ui { transition: opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s; }
}
@keyframes route { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes node { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   01 HERO — build desk + System Composer
   ========================================================================== */
.hero { min-height: max(760px, 100svh); grid-template-rows: auto 1fr auto; padding-block: calc(var(--top-h) + clamp(28px, 5vh, 72px)) clamp(40px, 6vh, 72px); }
.hero__pair { grid-column: 7 / -1; grid-row: 1; }
.hero__title { grid-column: 1 / 7; grid-row: 2; align-self: end; margin-block-end: clamp(24px, 4vh, 44px); font-size: clamp(3.1rem, 1rem + 5.5vw, 8.4rem); }
html[lang="ar"] .hero__title { font-size: clamp(2.7rem, .8rem + 4.9vw, 7.2rem); }
.hero__panel { grid-column: 7 / -1; grid-row: 2 / 4; align-self: end; margin-block-start: clamp(28px, 4vh, 48px); }
.hero__actions { grid-column: 1 / 7; grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.ln { display: block; overflow: hidden; padding-block-end: .12em; margin-block-end: -.08em; }
.ln > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .ln > span { animation: rise 1s var(--ease) both; }
  .js .hero .ln:nth-child(2) > span { animation-delay: .09s; }
  .js .hero .ln:nth-child(3) > span { animation-delay: .18s; }
  .js .hero__pair, .js .hero__actions { animation: fade .9s var(--ease) .45s both; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; } }

/* composer panel */
.composer { display: grid; gap: clamp(14px, 1.6vw, 20px); padding: clamp(20px, 2.2vw, 30px); }
.composer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: .82rem; color: rgb(255 255 255 / .62); }
.composer__head b { font-weight: 500; color: var(--white); font-size: .95rem; }
.composer__map { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 34px; column-gap: clamp(30px, 3.4vw, 56px); align-items: center; }
.composer__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.composer__scen { border: 0; padding: 0; min-width: 0; display: grid; gap: 7px; position: relative; z-index: 1; }
.composer__legend { padding: 0; margin-block-end: 6px; font-size: .8rem; color: rgb(255 255 255 / .6); }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip__box { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .02); font-size: .9rem; line-height: 1.3; color: rgb(255 255 255 / .74); transition: border-color .3s, background .3s, color .3s; }
html[lang="ar"] .chip__box { line-height: 1.5; font-size: .92rem; }
.chip:hover .chip__box { border-color: rgb(201 167 255 / .45); color: var(--white); }
.chip input:checked + .chip__box { border-color: var(--violet-node); background: rgb(139 61 255 / .26); color: var(--white); }
.chip input:focus-visible + .chip__box { outline: 2px solid var(--violet-soft); outline-offset: 3px; }
.chip__port { position: absolute; inset-block-start: 50%; inset-inline-end: -5px; width: 10px; height: 10px; margin-block-start: -5px; border-radius: 50%; background: var(--night); border: 1.5px solid rgb(201 167 255 / .35); transition: background .3s, border-color .3s; }
.chip input:checked ~ .chip__port { background: var(--violet-hot); border-color: var(--violet-soft); box-shadow: 0 0 0 4px rgb(139 61 255 / .3); }
.caps { position: relative; z-index: 1; display: grid; gap: 1px; }
.caps__title { font-size: .8rem; color: rgb(255 255 255 / .6); margin-block-end: 4px; }
.caps ol { position: relative; display: grid; }
.caps ol::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 4px; width: 1px; background: rgb(201 167 255 / .16); }
.cap a { display: flex; align-items: center; gap: 12px; min-height: 31px; font-size: .88rem; line-height: 1.25; color: rgb(255 255 255 / .54); transition: color .3s; }
.cap__dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--night); border: 1.5px solid rgb(201 167 255 / .32); transition: background .3s .25s, border-color .3s .25s, box-shadow .3s .25s; }
.cap__label { transition: color .3s .2s; }
.cap a:hover { color: var(--white); }
.cap a:hover .cap__label { text-decoration: underline; text-underline-offset: 3px; }
.cap.is-on a { color: var(--white); font-weight: 500; }
.cap.is-on .cap__dot { background: var(--violet-hot); border-color: var(--violet-soft); box-shadow: 0 0 0 4px rgb(139 61 255 / .32); }
.composer__node { position: relative; z-index: 1; justify-self: center; width: 34px; height: 34px; fill: rgb(201 167 255 / .35); transition: fill .4s .6s; }
.composer.is-lit .composer__node { fill: var(--white); }
.composer__out { display: grid; gap: 4px; padding-block-start: 16px; border-block-start: 1px solid var(--line-dark); }
.composer__out small { font-size: .8rem; color: rgb(255 255 255 / .6); }
.composer__out p { font-size: clamp(1rem, .95rem + .25vw, 1.14rem); line-height: 1.45; color: var(--white); min-height: 2.9em; }
html[lang="ar"] .composer__out p { line-height: 1.75; min-height: 3.5em; }
.composer__join { display: none; }
/* luminous routes drawn by main.js between the real element positions */
.route { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.route--in { stroke: #D9C2FF; }
.route--out { stroke: #A774FF; }
@media (prefers-reduced-motion: no-preference) {
  .composer__routes:not(.is-static) .route { stroke-dasharray: 1; animation: route1 .75s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
  .composer__routes:not(.is-static) .route--out { animation-delay: calc(480ms + var(--i) * 90ms); }
  .composer__out p.is-new { animation: fade .6s var(--ease) .5s both; }
}
@keyframes route1 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ============================================================================
   02 SERVICES — Canva chapters
   ========================================================================== */

.svcs { grid-column: 1 / -1; display: grid; counter-reset: svc; }
.svc { display: grid; grid-template-columns: 72px minmax(0, 1.05fr) minmax(0, 1.25fr) auto; column-gap: var(--gap); align-items: center; padding-block: clamp(22px, 2.4vw, 34px); border-block-start: 1px solid var(--rule); }
.svc:last-child { border-block-end: 1px solid var(--rule); }
.svc__n { font-family: var(--display-en); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); line-height: 1; color: var(--ink); }
.svc__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.55rem, 1rem + 1.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.028em; }
html[lang="ar"] .svc__name { font-weight: 700; letter-spacing: 0; line-height: 1.35; font-size: clamp(1.4rem, .95rem + 1.3vw, 2.2rem); }
.svc__link { display: inline-block; padding-block: 6px; min-height: 44px; }
.svc__link .arr { display: inline-block; vertical-align: middle; width: .7em; height: .7em; margin-inline-start: .25em; stroke-width: 2.4; }
.svc__link:hover { color: var(--brand); }
.svc__link:hover .arr { transform: translateX(5px); }
[dir="rtl"] .svc__link:hover .arr { transform: scaleX(-1) translateX(5px); }
.svc__line { color: var(--ink-2); font-size: clamp(.98rem, .92rem + .2vw, 1.1rem); max-width: 38em; }
.svc__act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.svc__go { display: none; font-size: .95rem; }
.svc__go svg { width: 22px; height: 22px; }
.svc__toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding-inline: 16px 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: .92rem; font-weight: 700; white-space: nowrap; transition: border-color .25s, background .25s, color .25s; }
.js .svc__toggle { display: inline-flex; }
.svc__toggle:hover { border-color: var(--brand); color: var(--brand); }
.svc__toggle i { position: relative; width: 12px; height: 12px; }
.svc__toggle i::before, .svc__toggle i::after { content: ""; position: absolute; inset-block-start: 5px; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.svc__toggle i::after { transform: rotate(90deg); }
.svc__toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.svc__toggle[aria-expanded="true"] i::after { transform: rotate(0); }
.svc__more { grid-column: 2 / -1; padding-block-start: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px var(--gap); align-items: end; }
.svc__more[hidden] { display: none; }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gap); }
.dl li { position: relative; padding-inline-start: 24px; color: var(--ink-2); font-size: .98rem; line-height: 1.45; }
html[lang="ar"] .dl li { line-height: 1.75; }
.dl li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .5em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .svc__more:not([hidden]) { animation: open .45s var(--ease) both; }
}
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }

/* ============================================================================
   03 HOW WE WORK — a route that activates step by step
   ========================================================================== */
.how { row-gap: clamp(40px, 5vw, 72px); }
.how > h2 { grid-column: 1 / 7; }
.how > .pair { grid-column: 7 / -1; align-self: end; }
.how__panel { grid-column: 1 / -1; }
.route-steps { --n: 4; --pi: clamp(24px, 3.2vw, 56px); --g: var(--gap); position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px var(--g); padding: clamp(40px, 5vw, 72px) var(--pi) clamp(36px, 4vw, 56px); }
/* the route runs from the first node's centre to the last node's centre */
.route-steps::before, .route-steps::after { content: ""; position: absolute; inset-inline: calc(var(--pi) + 8px) calc(var(--pi) + (100% - 2 * var(--pi) - (var(--n) - 1) * var(--g)) / var(--n) - 8px); inset-block-start: calc(clamp(40px, 5vw, 72px) + 7px); height: 1.5px; }
.route-steps::before { background: rgb(201 167 255 / .16); }
.route-steps::after { background: linear-gradient(90deg, #8B3DFF, #E9D8FF 70%, #C9A7FF); box-shadow: 0 0 10px rgb(139 61 255 / .6); transform-origin: left center; }
[dir="rtl"] .route-steps::after { background: linear-gradient(270deg, #8B3DFF, #E9D8FF 70%, #C9A7FF); transform-origin: right center; }
.route-steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.route-steps__node { width: 16px; height: 16px; border-radius: 50%; background: var(--violet-hot); border: 2px solid var(--violet-soft); box-shadow: 0 0 0 5px rgb(139 61 255 / .28); position: relative; z-index: 1; margin-block-end: 18px; }
.route-steps__n { font-family: var(--display-en); font-weight: 700; font-size: 1rem; color: var(--violet-soft); }
[dir="rtl"] .route-steps__n { text-align: right; } /* Latin digits stay LTR but sit with the Arabic title */
.route-steps h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; color: var(--white); }
html[lang="ar"] .route-steps h3 { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.route-steps p { color: rgb(255 255 255 / .72); font-size: .98rem; line-height: 1.5; max-width: 30em; }
html[lang="ar"] .route-steps p { line-height: 1.8; }
.route-steps li:last-child .route-steps__n { color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-draw]:not(.is-in) .route-steps::after { transform: scaleX(0); }
  .js [data-draw].is-in .route-steps::after { transform: scaleX(1); transition: transform 2.2s var(--ease) .2s; }
  .js [data-draw]:not(.is-in) .route-steps__node { background: var(--night); border-color: rgb(201 167 255 / .35); box-shadow: none; }
  .js [data-draw].is-in .route-steps__node { transition: background .4s, border-color .4s, box-shadow .5s; transition-delay: calc(.25s + var(--i) * .62s); }
}

/* ============================================================================
   04 BUILT AND RUNNING — product UI fragments (as .io)
   ========================================================================== */
.work { row-gap: clamp(40px, 5vw, 72px); }
.work > h2 { grid-column: 1 / 7; }
.work > .pair { grid-column: 7 / -1; align-self: end; }
.products { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(14px, 1.6vw, 24px); }
.prod a { display: grid; gap: 12px; }
.prod__panel { aspect-ratio: 4 / 3.3; display: grid; place-items: center; padding: 9%; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.prod a:hover .prod__panel { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgb(61 31 110 / .8); }
.prod__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prod__meta b { font-family: var(--display-en); font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; direction: ltr; }
.prod__text { color: var(--ink-2); }
.prod__svc { font-size: .88rem; color: var(--ink-3); }
.work__all { grid-column: 1 / -1; justify-self: start; }

.ui { width: 100%; max-width: 330px; display: grid; gap: 13px; font-size: .86rem; color: rgb(255 255 255 / .8); }
.ui__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ui__row--dim { color: rgb(255 255 255 / .55); font-size: .78rem; }
.ui__tag { padding: 4px 10px; border-radius: 999px; background: rgb(139 61 255 / .22); color: #D9C2FF; font-size: .72rem; white-space: nowrap; }
.ui__big { font-family: var(--display-en); font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 700; color: var(--white); letter-spacing: -.03em; direction: ltr; text-align: start; }
[dir="rtl"] .ui__big { text-align: right; }
.ui__big small { font-size: .45em; color: var(--violet-soft); }
.ui__bars { display: grid; gap: 7px; }
.ui__bars i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #8B3DFF var(--w), rgb(255 255 255 / .08) var(--w)); }
[dir="rtl"] .ui__bars i { background: linear-gradient(270deg, #8B3DFF var(--w), rgb(255 255 255 / .08) var(--w)); }
.ui__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.ui__q { font-family: var(--display-en); font-size: 2rem; font-weight: 700; color: var(--white); text-align: center; direction: ltr; }
.ui__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; direction: ltr; }
.ui__choices span { padding: 9px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .16); text-align: center; font-size: 1.1rem; }
.ui__choices .is-on { border-color: var(--violet-node); background: rgb(139 61 255 / .28); color: var(--white); }
.ui__cols { display: flex; align-items: flex-end; gap: 7px; height: 110px; direction: ltr; }
.ui__cols i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(to top, #5A1FB0, #A66BFF); }
.ui--flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ui--flow span { padding: 8px 11px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .16); font-size: .8rem; }
.ui--flow span.is-on { border-color: var(--violet-node); background: rgb(139 61 255 / .28); color: var(--white); }
.ui--flow i { width: 12px; height: 1.5px; background: var(--violet-node); }

/* ============================================================================
   05 CONTACT close + lockup panel
   ========================================================================== */
.close { row-gap: clamp(48px, 6vw, 96px); }
.close > h2 { grid-column: 1 / 7; }
.close .pairs { grid-column: 7 / -1; align-self: end; gap: clamp(24px, 3vw, 44px); }
.close .pair__text { display: grid; gap: 14px; justify-items: start; }
.close .soon-list, .soon-list { display: flex; flex-wrap: wrap; gap: 4px 20px; font-family: var(--text-en); }
.soon-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.soon-list small { font-family: var(--text); font-size: .8rem; }
.close__panel { grid-column: 1 / -1; aspect-ratio: 1600 / 520; min-height: 280px; display: grid; place-items: center; }
.close__panel .wave { position: absolute; inset: 0; opacity: .55; }
.close__lockup { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 32px); width: min(58%, 640px); }
.panel .close__mark { width: clamp(64px, 9vw, 128px); height: auto; aspect-ratio: 1; fill: var(--violet-node); }
.close__word { width: 100%; height: auto; }
.close__tag { font-family: var(--text); font-size: clamp(.8rem, .7rem + .3vw, 1rem); letter-spacing: .02em; color: rgb(255 255 255 / .7); text-align: center; }

/* ---------- footer ---------- */
.foot { border-block-start: 1px solid var(--rule); padding: clamp(48px, 6vw, 88px) var(--pad) 28px; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr); gap: 40px var(--gap); }
.foot__brand { display: grid; gap: 18px; align-content: start; }
.foot__tag { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); line-height: 1.1; letter-spacing: -.03em; text-align: start; }
html[lang="ar"] .foot__tag { font-weight: 700; line-height: 1.4; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col .label { font-size: .95rem; }
.foot__col ul { display: grid; }
.foot__col li a, .foot__col li > span { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; color: var(--ink-2); font-size: .98rem; }
.foot__col li a:hover { color: var(--brand); }
.foot__col li .is-disabled, .foot__col li .is-soon { color: var(--ink-3); }
.foot__col small { font-size: .78rem; color: var(--ink-3); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-block-start: clamp(40px, 5vw, 64px); padding-block-start: 20px; border-block-start: 1px solid var(--rule); font-size: .85rem; color: var(--ink-3); }

/* ============================================================================
   SERVICE PAGES
   ========================================================================== */
.sv-hero { min-height: max(720px, 100svh); grid-template-rows: auto 1fr auto; padding-block: calc(var(--top-h) + clamp(28px, 5vh, 72px)) clamp(40px, 6vh, 72px); }
.sv-hero__crumb { grid-column: 1 / 7; grid-row: 1; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .95rem; color: var(--ink-3); }
.sv-hero__crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 500; }
.sv-hero__crumb a:hover { color: var(--brand); }
.sv-hero__crumb i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sv-hero__pair { grid-column: 7 / -1; grid-row: 1; }
.sv-hero__pair h1 { font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); }
.sv-hero__problem { grid-column: 1 / 8; grid-row: 2; align-self: end; margin-block: clamp(32px, 5vh, 56px) clamp(28px, 4vh, 44px); font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 1rem + 3.3vw, 4.9rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); max-width: 15em; }
html[lang="ar"] .sv-hero__problem { font-weight: 700; letter-spacing: 0; line-height: 1.38; font-size: clamp(1.9rem, .9rem + 2.8vw, 4.1rem); }
.sv-hero__panel { grid-column: 8 / -1; grid-row: 2 / 4; align-self: end; margin-block-start: 40px; }
.sv-hero__actions { grid-column: 1 / 8; grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
@media (prefers-reduced-motion: no-preference) {
  .js .sv-hero__problem { animation: rise-soft 1s var(--ease) both; }
  .js .sv-hero__pair, .js .sv-hero__actions { animation: fade .9s var(--ease) .35s both; }
}
@keyframes rise-soft { from { opacity: 0; transform: translateY(24px); } }

/* service flow: a vertical luminous route inside the hero panel */
.flow-panel { display: grid; gap: 22px; padding: clamp(22px, 2.4vw, 34px); }
.flow { position: relative; display: grid; gap: 14px; }
.flow::before, .flow::after { content: ""; position: absolute; inset-inline-start: 23px; inset-block: 26px; width: 1.5px; }
.flow::before { background: rgb(201 167 255 / .16); }
.flow::after { background: linear-gradient(180deg, #8B3DFF, #E9D8FF); box-shadow: 0 0 10px rgb(139 61 255 / .6); transform-origin: top center; }
.flow li { position: relative; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 16px 12px 12px; border-radius: 14px; border: 1px solid var(--line-dark); background: rgb(255 255 255 / .02); }
[dir="rtl"] .flow li { padding: 12px 12px 12px 16px; }
.flow__node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--night); }
.flow__node::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violet-hot); box-shadow: 0 0 0 4px rgb(139 61 255 / .32); }
.flow__n { font-family: var(--display-en); font-weight: 700; font-size: .85rem; color: var(--violet-soft); }
.flow b { font-weight: 500; font-size: 1rem; color: var(--white); }
.flow li:last-child { border-color: var(--violet-node); background: rgb(139 61 255 / .24); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-draw]:not(.is-in) .flow::after { transform: scaleY(0); }
  .js [data-draw].is-in .flow::after { transform: scaleY(1); transition: transform 1.8s var(--ease) .2s; }
  .js [data-draw]:not(.is-in) .flow__node::after { background: rgb(201 167 255 / .3); box-shadow: none; }
  .js [data-draw].is-in .flow__node::after { transition: background .4s, box-shadow .5s; transition-delay: calc(.3s + var(--i) * .45s); }
  .js [data-draw]:not(.is-in) .flow li:last-child { border-color: var(--line-dark); background: rgb(255 255 255 / .02); }
  .js [data-draw].is-in .flow li:last-child { transition: border-color .5s 1.7s, background .5s 1.7s; }
}

.get { row-gap: 48px; }
.get > h2 { grid-column: 1 / 6; align-self: start; }
.rules { grid-column: 7 / -1; display: grid; }
.rules li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding-block: 22px; border-block-start: 1px solid var(--rule); }
.rules li:last-child { border-block-end: 1px solid var(--rule); }
.rules__n { font-family: var(--display-en); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); line-height: 1.1; color: var(--ink); }
.rules p { color: var(--ink-2); font-size: clamp(1rem, .95rem + .25vw, 1.18rem); }

.ex { row-gap: clamp(40px, 5vw, 72px); }
.ex > h2 { grid-column: 1 / 7; }
.ex > .pair { grid-column: 7 / -1; align-self: end; }
.ex__list { grid-column: 1 / -1; display: grid; }
.ex__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--gap); align-items: baseline; padding-block: clamp(22px, 2.6vw, 36px); border-block-start: 1px solid var(--rule); }
.ex__item:last-child { border-block-end: 1px solid var(--rule); }
.ex__item h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 1rem + 1.3vw, 2.3rem); line-height: 1.08; letter-spacing: -.028em; }
html[lang="ar"] .ex__item h3 { font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.ex__item p { color: var(--ink-2); font-size: clamp(1rem, .95rem + .2vw, 1.12rem); }
.ex > .related { grid-column: 1 / -1; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--gap); align-items: center; }
.related .label { grid-column: 2; }
.related .pair__text { grid-column: 3; display: flex; flex-wrap: wrap; gap: 0 32px; max-width: none; }
.sv-hero__problem--long { font-size: clamp(2rem, 1rem + 2.6vw, 4rem); }
html[lang="ar"] .sv-hero__problem--long { font-size: clamp(1.8rem, .9rem + 2.3vw, 3.5rem); }

.scope { row-gap: clamp(40px, 5vw, 72px); }
.scope > h2 { grid-column: 1 / 7; }
.scope > .pair { grid-column: 7 / -1; align-self: end; }
.scope__panel { grid-column: 1 / -1; }
.route-steps--3 { --n: 3; }

.close--svc .close__panel { aspect-ratio: 1600 / 420; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; grid-template-rows: 1fr auto; row-gap: 40px; padding-block: calc(var(--top-h) + 40px) 56px; }
html .nf > h1.display { grid-column: 1 / 8; align-self: end; font-size: clamp(5rem, 2rem + 12vw, 13rem); font-family: var(--display-en); font-weight: 600; letter-spacing: -.04em; line-height: .9; }
.nf > h1 > span { display: inline; }
.nf > .pair { grid-column: 8 / -1; align-self: end; }
.nf__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ============================================================================
   TABLET
   ========================================================================== */
/* ---------- 02 services — one story: eleven services, four families, a rail that follows the reader ---------- */
.svcstory { row-gap: clamp(40px, 5vw, 72px); }
.svcstory > h2 { grid-column: 1 / 8; }
.svcstory > .pairs { grid-column: 8 / -1; align-self: end; }
.svcstory__rail { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 20px; }
.svcstory__list { grid-column: 6 / -1; display: grid; gap: clamp(56px, 6vw, 96px); }
.fam-tabs { display: grid; }
.fam-tabs a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; min-height: 44px; padding-block: 13px; border-block-start: 1px solid var(--rule); color: var(--ink-3); transition: color .3s var(--ease); }
.fam-tabs a:last-child { border-block-end: 1px solid var(--rule); }
.fam-tabs .kicker { font-size: .95rem; color: inherit; transition: color .3s; }
.fam-tabs b { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, .85rem + .6vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; }
html[lang="ar"] .fam-tabs b { letter-spacing: 0; line-height: 1.5; }
.fam-tabs__count { font-size: .85rem; }
.fam-tabs a:hover, .fam-tabs a[aria-current="true"] { color: var(--ink); }
.fam-tabs a[aria-current="true"] .kicker { color: var(--brand); }
.svcstory__panel { display: grid; padding: 28px 26px 58px; min-height: 290px; }
.rail-route { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.rail-route.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.rail-route ol { position: relative; display: grid; gap: 16px; padding-inline-start: 32px; }
.rail-route ol::before, .rail-route ol::after { content: ""; position: absolute; inset-inline-start: 7.25px; inset-block: 12px; width: 1.5px; }
.rail-route ol::before { background: rgb(201 167 255 / .18); }
.rail-route ol::after { background: linear-gradient(180deg, #E9D8FF, #8B3DFF); box-shadow: 0 0 10px rgb(139 61 255 / .55); transform-origin: top center; transform: scaleY(0); transition: transform 1.3s var(--ease) .1s; }
.rail-route.is-on ol::after { transform: scaleY(1); }
.rail-route li { position: relative; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / .55); transition: color .4s; transition-delay: calc(.15s + var(--i) * .22s); }
.rail-route li i { position: absolute; inset-inline-start: -32px; inset-block-start: calc(.75em - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 2px solid rgb(201 167 255 / .35); transition: background .4s, border-color .4s, box-shadow .5s; transition-delay: calc(.15s + var(--i) * .22s); }
.rail-route.is-on li { color: rgb(255 255 255 / .82); }
.rail-route.is-on li:last-child { color: var(--white); font-weight: 500; }
.rail-route.is-on li i { background: var(--violet-hot); border-color: var(--violet-soft); box-shadow: 0 0 0 5px rgb(139 61 255 / .28); }
.svcstory__panel .panel__cap { position: absolute; inset-inline: 26px; inset-block-end: 18px; }
.svcfam { display: grid; gap: clamp(14px, 1.6vw, 22px); scroll-margin-top: calc(var(--top-h) + 24px); }
.svcfam__head { display: grid; gap: 8px; }
.svcfam__head .kicker em { font-style: normal; color: var(--brand); }
.svcfam__title { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1.1rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: -.032em; }
html[lang="ar"] .svcfam__title { font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.svcfam__text { color: var(--ink-2); max-width: 40em; font-size: clamp(1rem, .94rem + .25vw, 1.15rem); }
.svcfam__lead { font-weight: 700; color: var(--ink); }
.svcstory .svcs { grid-column: auto; }
.svcstory .svc { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 10px; }
.svcstory .svc__name { grid-column: 2; }
.svcstory .svc__line { grid-column: 2 / -1; grid-row: 2; }
.svcstory .svc__act { grid-column: 3; grid-row: 1; }
.svcstory .svc__more { grid-column: 2 / -1; }
@media (max-width: 1100px) {
  /* one flow, so the family bar can stay pinned across the whole list */
  .svcstory { display: flex; flex-direction: column; gap: 32px; }
  .svcstory__rail { z-index: 20; top: var(--top-h); margin-inline: calc(var(--pad) * -1); padding: 10px var(--pad); background: rgb(255 251 248 / .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); }
  .svcstory__panel { display: none; }
  .fam-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .fam-tabs::-webkit-scrollbar { display: none; }
  .fam-tabs a, .fam-tabs a:last-child { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; }
  .fam-tabs b { font-size: 1rem; line-height: 1.2; }
  .fam-tabs .kicker { font-size: .8rem; }
  .fam-tabs__count { display: none; }
  .fam-tabs a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .fam-tabs a[aria-current="true"] .kicker { color: var(--violet-soft); }
  .svcstory__list { gap: 56px; }
  .svcfam { scroll-margin-top: calc(var(--top-h) + 84px); }
}
@media (max-width: 680px) {
  /* the "what you get" toggle becomes a round + beside the name: one row less per service */
  .svcstory .svc { grid-template-columns: 40px minmax(0, 1fr) 44px; column-gap: 12px; }
  .svcstory .svc__line { grid-column: 2 / -1; }
  .svcstory .svc__act { grid-column: 3; grid-row: 1; align-self: start; }
  .svcstory .svc__toggle { width: 44px; padding: 0; justify-content: center; }
  .svcstory .svc__toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .svcstory .svc__more { grid-column: 1 / -1; }
  .svcfam__text .svcfam__lead { display: block; }
}

/* ---------- Iraq Jobs — our own live data product, featured ---------- */
.jobs { row-gap: clamp(36px, 4.5vw, 64px); }
.jobs__head { grid-column: 1 / 7; display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: end; }
.jobs__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.jobs__name, html[lang="ar"] .jobs__name { font-family: var(--display-en); font-weight: 700; font-size: clamp(3.4rem, .8rem + 8.2vw, 10rem); line-height: .88; letter-spacing: -.05em; unicode-bidi: isolate; }
.jobs__line { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, .95rem + 1.3vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; max-width: 16em; }
html[lang="ar"] .jobs__line { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
.jobs__more { grid-column: 7 / -1; align-self: end; }
.jobs__more > summary { display: none; }
.jobs__more > summary::-webkit-details-marker { display: none; }
.jobs__pairs { gap: clamp(18px, 2vw, 28px); }
.jobs__panel { grid-column: 1 / -1; margin: 0; padding: clamp(16px, 2.2vw, 34px); display: grid; }
.jobs__steps { --pi: clamp(8px, 1.4vw, 22px); padding-block-end: clamp(18px, 2vw, 28px); }
.jobs__actions { grid-column: 1 / 7; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.jobs__svc { grid-column: 7 / -1; align-self: center; }
.jobs__svc .pair__text .arrow-link { margin-block-start: 6px; }

.jobs-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1.05fr); gap: clamp(10px, 1.3vw, 18px); font-size: .86rem; color: rgb(255 255 255 / .8); }
.jobs-ui__col { display: grid; gap: 10px; align-content: start; padding: clamp(14px, 1.5vw, 20px); border-radius: 16px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08); }
.jobs-ui__source { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .1); }
.jobs-ui__source i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--violet-node); }
.jobs-ui__search { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); }
.jobs-ui__search i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .6); }
.jobs-ui__list { display: grid; gap: 8px; }
.jobs-ui__job { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) 8px; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .07); }
.jobs-ui__job b { color: var(--white); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-ui__job small { font-size: .74rem; color: rgb(255 255 255 / .5); white-space: nowrap; }
.jobs-ui__job .ui__dot { background: var(--violet-node); }
.jobs-ui__job:first-child { border-color: rgb(156 92 255 / .5); background: rgb(139 61 255 / .14); }
.jobs-ui__job:first-child .ui__dot { background: var(--accent); }
.jobs-ui__stat { grid-template-rows: auto auto 1fr auto; }
.jobs-ui__count { font-size: clamp(2.4rem, 1.3rem + 2.4vw, 3.8rem); color: var(--violet-hot); }
.jobs-ui__week { height: auto; min-height: 96px; }
@media (prefers-reduced-motion: no-preference) {
  .js .jobs__panel.is-in .jobs-ui__source { animation: jobs-src 1.6s var(--ease) both; animation-delay: calc(.35s + var(--i) * .3s); }
  .js .jobs__panel:not(.is-in) .jobs-ui__job { opacity: 0; transform: translateY(-12px); }
  .js .jobs__panel.is-in .jobs-ui__job { transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(.7s + (4 - var(--i)) * .24s); }
  .js .jobs__panel:not(.is-in) .jobs-ui__week i { transform: scaleY(0); }
  .js .jobs__panel.is-in .jobs-ui__week i { transform-origin: bottom; transition: transform 1s var(--ease) 1.5s; }
  .js .jobs__panel:not(.is-in) .jobs-ui__count { opacity: 0; }
  .js .jobs__panel.is-in .jobs-ui__count { transition: opacity .6s var(--ease) 1.9s; }
}
@keyframes jobs-src {
  0% { border-color: rgb(255 255 255 / .1); background: transparent; }
  45% { border-color: var(--violet-node); background: rgb(139 61 255 / .26); color: var(--white); }
  100% { border-color: rgb(156 92 255 / .45); background: rgb(139 61 255 / .1); color: var(--white); }
}
@media (max-width: 1100px) {
  .jobs__head, .jobs__more, .jobs__actions, .jobs__svc { grid-column: 1 / -1; }
  .jobs-ui { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jobs-ui__feed { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 680px) {
  .jobs-ui { grid-template-columns: 1fr; }
  .jobs__more { border-block: 1px solid var(--rule); }
  .jobs__more > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); }
  .jobs__more > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
  .jobs__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .jobs__more > .pairs { padding-block: 4px 18px; }
  .jobs__steps p { display: none; }
  .jobs__steps { row-gap: 20px !important; }
  .jobs-ui__src { display: none; }
  .jobs-ui__job { grid-template-columns: minmax(0, 1fr) auto 8px; }
  .jobs-ui__job small { display: none; }
  .jobs-ui__stat { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; column-gap: 18px; }
  .jobs-ui__stat .jobs-ui__week { grid-column: 2; grid-row: 1 / 3; height: 64px; min-height: 0; }
  .jobs-ui__stat > p:last-child { display: none; }
}

@media (max-width: 1200px) {
  .top__nav, .top__end .btn { display: none; }
  .menu-btn { display: block; }
  .top__end { margin-inline-start: auto; }
}
@media (max-width: 1100px) {
  .hero, .sv-hero { min-height: auto; grid-template-rows: auto; row-gap: 36px; }
  .hero__pair, .hero__title, .hero__actions, .hero__panel,
  .sv-hero__crumb, .sv-hero__pair, .sv-hero__problem, .sv-hero__actions, .sv-hero__panel { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  .sv-hero__crumb { margin-block-end: -16px; }
  .sv-hero__problem { max-width: 18em; }
  .how > h2, .how > .pair, .work > h2, .work > .pair,
  .close > h2, .close .pairs, .get > h2, .rules, .ex > h2, .ex > .pair, .scope > h2, .scope > .pair, html .nf > h1.display, .nf > .pair { grid-column: 1 / -1; }
  .svc { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 10px; }
  .svc__name { grid-column: 2; }
  .svc__line { grid-column: 2 / -1; grid-row: 2; }
  .svc__act { grid-column: 3; grid-row: 1; }
  .svc__more { grid-column: 2 / -1; }
  .route-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .route-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-steps:not(.route-steps--3)::before, .route-steps:not(.route-steps--3)::after { display: none; }
  .hero__title { font-size: clamp(3.1rem, 1rem + 7vw, 6.4rem); }
  html[lang="ar"] .hero__title { font-size: clamp(2.7rem, .8rem + 6.2vw, 5.6rem); }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   PHONE
   ========================================================================== */
@media (max-width: 680px) {
  :root { --top-h: 72px; }
  .top__in { gap: 10px; }
  .logo { gap: 10px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__words { display: grid; gap: 0; }
  .logo__name { font-size: 1.08rem; line-height: 1.15; }
  .logo__sub { padding: 0; border: 0; font-size: .78rem; line-height: 1.2; }
  .lang { padding-inline: 8px; }
  .pair { grid-template-columns: 1fr; gap: 8px; }
  .hero { padding-block-start: calc(var(--top-h) + 24px); }
  .hero__title { order: -1; }
  .composer__head { flex-direction: column; gap: 2px; }
  .hero__title { font-size: clamp(2.6rem, 12.4vw, 3.6rem); }
  html[lang="ar"] .hero__title { font-size: clamp(2.3rem, 10.6vw, 3.2rem); }
  .hero__actions .btn, .sv-hero__actions .btn { flex: 1 1 100%; }

  /* composer: a readable vertical composition */
  .composer__map { grid-template-columns: 1fr; row-gap: 0; }
  .composer__routes, .composer__node { display: none; }
  .composer__scen { grid-template-columns: 1fr 1fr; gap: 8px; }
  .composer__legend { grid-column: 1 / -1; }
  .chip__box { min-height: 52px; padding: 8px 12px; font-size: .86rem; }
  .chip__port { display: none; }
  .composer__join { display: grid; justify-items: start; padding-inline-start: 4px; margin-block: 10px 6px; }
  .composer__join i { width: 1.5px; height: 22px; margin-inline-start: 3.5px; background: linear-gradient(180deg, rgb(201 167 255 / .2), #C9A7FF); }
  .caps ol::before { background: linear-gradient(180deg, #C9A7FF, #8B3DFF); inset-block: 22px; }
  .cap:not(.is-on) { display: none; }
  .cap a { min-height: 44px; font-size: .98rem; }

  .svc { grid-template-columns: 44px minmax(0, 1fr); }
  .svc__act { grid-column: 2; grid-row: 3; justify-self: start; }
  .svc__go { display: inline-flex; }
  .svc__link .arr { display: none; }
  .svc__more { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
  .route-steps { grid-template-columns: 1fr; row-gap: 32px; padding-inline-start: 60px; }
  .route-steps::before, .route-steps::after { display: none !important; }
  .route-steps .route-steps__node { position: absolute; inset-inline-start: -36px; inset-block-start: 2px; margin: 0; }
  /* one luminous segment per step, so the route activates step by step */
  .route-steps li:not(:last-child)::before, .route-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: -28.75px; inset-block: 10px -42px; width: 1.5px; }
  .route-steps li:not(:last-child)::before { background: rgb(201 167 255 / .16); }
  .route-steps li:not(:last-child)::after { background: linear-gradient(180deg, #C9A7FF, #8B3DFF); box-shadow: 0 0 8px rgb(139 61 255 / .55); transform-origin: top center; }
  .products { grid-template-columns: 1fr; }
  .prod__panel { aspect-ratio: 16 / 11; }
  .close__panel { aspect-ratio: 4 / 5; }
  .close--svc .close__panel { aspect-ratio: 1; }
  .close__lockup { width: 76%; }
  .foot__in { grid-template-columns: 1fr; }
  .foot__col li a, .foot__col li > span { min-height: 44px; }
  .rules li { grid-template-columns: 48px 1fr; }
  .ex__item { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
  .ex__item p { grid-column: 2; }
  .ex > .related { grid-template-columns: 1fr; }
  .related .label, .related .pair__text { grid-column: auto; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .js [data-draw]:not(.is-in) .route-steps li::after { transform: scaleY(0); }
  .js [data-draw].is-in .route-steps li::after { transform: scaleY(1); transition: transform .6s var(--ease); transition-delay: calc(.4s + var(--i) * .62s); }
}
@media (pointer: coarse) {
  .cap a { min-height: 44px; }
  .foot__col li a, .foot__col li > span { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}