/* Nova AI — «مصنع الأنظمة». Brand tokens: brand/brand-tokens.css (70/20/10). */
/* [hidden] always wins: a component's own display (grid/flex) beat it three times — the closed meeting stayed as an invisible
   full-screen layer over the home page, the demo's «done» list held its space, the before/after button showed for every site. */
[hidden] { display: none !important; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/IBMPlexSansArabic-Regular.woff2) format("woff2"), url(../fonts/IBMPlexSansArabic-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/IBMPlexSansArabic-Medium.woff2) format("woff2"), url(../fonts/IBMPlexSansArabic-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/IBMPlexSansArabic-SemiBold.woff2) format("woff2"), url(../fonts/IBMPlexSansArabic-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(../fonts/IBMPlexSansArabic-Bold.woff2) format("woff2"), url(../fonts/IBMPlexSansArabic-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
/* Arabic inside mono text uses Plex (monospace fallbacks draw Arabic letters unjoined); Latin stays monospace */
@font-face { font-family: "Nova Mono AR"; src: url(../fonts/IBMPlexSansArabic-Medium.woff2) format("woff2"), url(../fonts/IBMPlexSansArabic-Medium.ttf) format("truetype"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope[wght].woff2") format("woff2"), url("../fonts/Manrope[wght].ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --black: #090B13;
  --ink: #0D1020;
  --violet: #6C63FF;
  --cyan: #00D5FF;
  --white: #F5F7FF;
  --gray: #96A2BD;
  --line: rgba(150, 162, 189, .14);
  --grad: linear-gradient(120deg, #00D5FF, #3F7BFF 45%, #6C4DFF);
  --ar: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  --en: "Manrope", system-ui, sans-serif;
  --mono: "Nova Mono AR", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } /* focused items never hide under the fixed nav */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--ar); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
html { scrollbar-gutter: stable; } /* the boot hides the scrollbar: keep its width so nothing re-measures when it lifts */
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, blockquote { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
[tabindex="-1"]:focus { outline: none; } /* programmatic focus targets (skip link, anchors, demo) */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip {
  position: fixed; top: 12px; inset-inline-start: 12px; z-index: 200; padding: 10px 18px; border-radius: 999px;
  background: var(--white); color: var(--black); font-weight: 700; font-size: 15px; transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus-visible { transform: none; outline-offset: 2px; }

/* ---------- Boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 100; background: var(--black);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--gutter);
  direction: ltr; transition: opacity .5s var(--ease), visibility .5s;
}
/* One plain line under the mark (Hamza 2026-10-14) — replaces the developer log. */
.boot__say { position: absolute; inset-inline: 0; top: calc(44% + clamp(78px, 10vw, 118px)); margin: 0; text-align: center; direction: rtl; font: 500 clamp(15px, 1.4vw, 18px)/1.6 var(--ar); color: var(--gray); letter-spacing: 0; opacity: 0; animation: boot-say .5s var(--ease) .15s forwards; }
[lang="en"] .boot__say { direction: ltr; font-family: var(--en); }
@keyframes boot-say { to { opacity: 1; } }
.boot__log { margin: 0 0 18px; font: 500 13px/1.9 var(--mono); color: var(--gray); white-space: pre-wrap; height: calc(1.9em * 7); overflow: hidden; contain: layout paint; } /* fixed box for all boot lines (incl. wrapped ones at 375px): appended lines no longer push the log up → no layout shift */
.boot__log .ok { color: var(--cyan); }
.boot__log .hl { color: #B9B3FF; }
.boot__bar { height: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .3s; }
body:not(.is-loading) .boot { opacity: 0; visibility: hidden; }
/* Logo mark draws itself (outline → fill on "ready"), then lifts away with the boot screen. */
.boot__mark {
  position: absolute; inset-inline-start: 50%; top: 44%; width: clamp(120px, 16vw, 190px); height: auto;
  transform: translate(-50%, -50%); overflow: visible; transition: transform .8s var(--ease);
}
.boot__mark path {
  fill: var(--f); fill-opacity: 0; stroke: #8FA3FF; stroke-width: 1.4; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: boot-draw .45s var(--ease) calc(var(--d) * .6) forwards;
  transition: fill-opacity .35s var(--ease), stroke-opacity .5s var(--ease);
}
.boot__star { transform-box: fill-box; transform-origin: center; }
.boot.is-ready .boot__mark path { fill-opacity: 1; stroke-opacity: 0; }
.boot.is-ready .boot__star { animation: boot-draw .45s var(--ease) calc(var(--d) * .6) forwards, boot-twinkle .5s var(--ease) .05s; }
body:not(.is-loading) .boot__mark { transform: translate(-50%, -50%) scale(.9) translateY(-14px); }
@keyframes boot-draw { to { stroke-dashoffset: 0; } }
@keyframes boot-twinkle { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.35) rotate(45deg); } 100% { transform: scale(1) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .boot__mark path { animation: none; stroke-dashoffset: 0; }
  .boot.is-ready .boot__star { animation: none; }
}

/* ---------- Canvas ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; z-index: 0; display: block; transition: opacity .6s; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to left, rgba(9,11,19,.94) 0%, rgba(9,11,19,.78) 30%, rgba(9,11,19,.25) 48%, rgba(9,11,19,0) 60%),
    radial-gradient(120% 90% at 40% 50%, transparent 55%, rgba(9,11,19,.7) 100%);
  transition: opacity .6s;
}

/* ---------- Audit flags ---------- */
.flags { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.flag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(13,16,32,.82); border: 1px solid rgba(108,99,255,.55); color: var(--white);
  box-shadow: 0 0 24px rgba(108,99,255,.35); backdrop-filter: blur(8px); opacity: 0;
  transform: translate(-50%, -100%); will-change: transform, opacity;
}
.flag b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--violet); font: 700 12px var(--en); }

/* ---------- System parts (3D hover) ---------- */
.part {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(13,16,32,.86); border: 1px solid rgba(0,213,255,.5); color: var(--white);
  box-shadow: 0 0 22px rgba(0,213,255,.22); backdrop-filter: blur(8px); opacity: 0; will-change: transform, opacity;
}
.part b { padding: 2px 7px; border-radius: 999px; background: rgba(0,213,255,.14); color: var(--cyan); font: 600 11px var(--en); letter-spacing: .04em; }
.cursor.is-part { border-color: var(--cyan); }

/* ---------- Static scene (no WebGL): same story, drawn once; chapters swap layers ---------- */
.still { display: none; position: fixed; top: 0; bottom: 0; left: 0; width: 64vw; z-index: 0; pointer-events: none; transition: opacity .6s; }
.no-webgl #gl { display: none; }
.no-webgl .still { display: block; }
/* Phones: the static scene until the 3D world has loaded (main.js lazyWorld), then a crossfade. */
.world-later .still { display: block; }
.world-later #gl { opacity: 0 !important; transition: none; }
.world-later.world-in #gl { opacity: 1 !important; transition: opacity .7s ease; }
.world-later.world-in .still { opacity: 0 !important; }
.still__stage { position: absolute; top: 52%; left: 50%; width: min(94%, calc(84vh * 8 / 7)); aspect-ratio: 8 / 7; transform: translate(-50%, -50%); }
.still svg { display: block; width: 100%; height: 100%; overflow: visible; }
.still svg g, .still svg rect, .still svg ellipse { transition: opacity .7s var(--ease); }
.st-grid line { stroke: rgba(150,162,189,.12); stroke-width: 1; }
.st-floorglow { opacity: 0; }
.st-card rect { fill: #141933; stroke: rgba(150,162,189,.35); stroke-width: 1.2; }
.st-card path { stroke: rgba(150,162,189,.4); stroke-width: 3; stroke-linecap: round; fill: none; }
.st-card path[d^="M0"], .st-card path[d*="v56"] { stroke-width: 1; }
.st-flag { opacity: 0; transition: opacity .5s; }
.st-flag circle { fill: #6C63FF; }
.st-flag text { fill: #fff; font: 700 13px var(--en); text-anchor: middle; }
.st-scanline { opacity: 0; }
.st-blocks, .st-arcs, .st-mark { opacity: 0; }
.st-t { fill: #1C2142; stroke: rgba(108,99,255,.55); stroke-width: 1; }
.st-l { fill: #131733; } .st-r { fill: #0E1126; }
.st-code path { stroke: rgba(0,213,255,.55); stroke-width: 2.4; stroke-linecap: round; }
.st-core .st-t { fill: #00D5FF; stroke: none; } .st-core .st-l { fill: #2F5BD8; } .st-core .st-r { fill: #4B3FD0; }
.st-arcs path { fill: none; stroke: #00D5FF; stroke-width: 1.8; stroke-opacity: .7; stroke-dasharray: 2 6; stroke-linecap: round; }
.st-arcs circle { fill: #00D5FF; }
.still__flag { position: absolute; opacity: 0; transform: translate(-50%, -100%); transition: opacity .5s; }
/* chapters */
.still[data-ch="0"] .st-chaos, .still[data-ch="1"] .st-chaos { opacity: 1; }
.st-chaos { opacity: 0; }
.still[data-ch="1"] .st-card:not(.is-flag) { opacity: .45; }
.still[data-ch="1"] .st-card.is-flag rect { stroke: #6C63FF; stroke-width: 2; }
.still[data-ch="1"] .st-flag, .still[data-ch="1"] .still__flag, .still[data-ch="1"] .st-scanline { opacity: 1; }
.still[data-ch="2"] .st-blocks, .still[data-ch="3"] .st-blocks, .still[data-ch="4"] .st-blocks { opacity: 1; }
.still[data-ch="3"] .st-arcs, .still[data-ch="4"] .st-arcs, .still[data-ch="3"] .st-floorglow, .still[data-ch="4"] .st-floorglow { opacity: 1; }
.still[data-ch="4"] .st-arcs { opacity: .55; }
.still[data-ch="4"] .st-mark { opacity: 1; }
.still[data-ch="2"] .st-core, .still[data-ch="2"] .st-floorglow { opacity: .35; }
.still[data-ch="3"] .st-t, .still[data-ch="4"] .st-t { stroke: rgba(0,213,255,.5); }
[dir="ltr"] .still { left: auto; right: 0; } /* world sits opposite the copy */
@media (max-width: 760px) {
  .still, [dir="ltr"] .still { left: 0; right: 0; width: auto; bottom: auto; height: 66vh; }
  .still__stage { width: min(96%, calc(60vh * 8 / 7)); top: 54%; }
  .still__flag { font-size: 11px; padding: 4px 9px 4px 6px; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 20; display: flex; align-items: center; gap: 32px;
  padding: 18px var(--gutter); transition: background .4s, backdrop-filter .4s, transform .5s var(--ease);
}
.nav.is-solid { background: rgba(9,11,19,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav:focus-within { transform: none; } /* keyboard focus brings the hidden nav back */
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: flex; gap: 28px; margin-inline-start: auto; font-size: 15px; color: var(--gray); }
.nav__links a { position: relative; transition: color .3s; }
.nav__links a:hover { color: var(--white); }
.nav__links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 1px; background: var(--cyan); transform: scaleX(0); transition: transform .4s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__lang { display: grid; place-items: center; min-width: 42px; min-height: 42px; padding: 0 10px; border-radius: 999px; font: 600 13px var(--en); letter-spacing: .04em; color: var(--gray); box-shadow: inset 0 0 0 1px var(--line); transition: color .3s, box-shadow .3s; }
.nav__lang:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); }
.nav__lang[lang="ar"] { font-family: var(--ar); font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--violet);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; isolation: isolate; overflow: hidden;
  font: 600 16px var(--ar); color: #fff; background: var(--bg);
  box-shadow: 0 10px 30px -10px rgba(108,99,255,.7), inset 0 1px 0 rgba(255,255,255,.2);
  transition: box-shadow .4s, transform .4s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); opacity: 0; transition: opacity .4s; }
.btn:hover::before { opacity: 1; }
.btn:hover { box-shadow: 0 14px 40px -10px rgba(0,213,255,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn span { pointer-events: none; }
.btn--ghost { background: rgba(245,247,255,.04); box-shadow: inset 0 0 0 1px rgba(245,247,255,.18); }
.btn--ghost::before { background: rgba(245,247,255,.08); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.nav .btn { white-space: nowrap; } /* the nav CTA never wraps to two lines (it did on phones once the «your field» chip appeared) */
@media (max-width: 400px) { .nav:has(.ai-chip) .btn--sm { padding: 0 12px; } }
.btn--xl { min-height: 64px; padding: 0 34px; font-size: 18px; }
.btn[hidden] { display: none; }

/* ---------- Chapter rail ---------- */
.rail {
  position: fixed; inset-inline-end: 22px; top: 50%; transform: translateY(-50%); z-index: 10;
  list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; transition: opacity .5s;
}
.rail li { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; font-size: 12px; color: var(--gray); opacity: .5; transition: opacity .4s, color .4s; }
.rail i { width: 18px; height: 2px; background: currentColor; transition: width .4s var(--ease), background .4s; }
.rail li.is-active { opacity: 1; color: var(--white); }
.rail li.is-active i { width: 34px; background: var(--cyan); }
.rail span { opacity: 0; transform: translateX(-6px); transition: .4s var(--ease); }
.rail li.is-active span { opacity: 1; transform: none; }

/* ---------- Story ---------- */
main { position: relative; z-index: 3; }
#story { position: relative; }
.chapter { position: relative; display: flow-root; min-height: 170vh; padding-inline: var(--gutter); }
.chapter--hero { min-height: 150vh; }
.panel { position: sticky; top: 19vh; width: min(540px, 40vw); padding-block: 12px; }
.hero { top: 22vh; width: min(760px, 50vw); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cyan); letter-spacing: .06em; margin-bottom: 20px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hero__title { font-size: clamp(42px, 5.6vw, 96px); line-height: 1.12; letter-spacing: -.02em; }
.hero__title em { font-style: normal; }
.hero__title em .w, .hero__title em:not(:has(.w)) { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.lead { margin-top: 22px; font-size: clamp(18px, 1.45vw, 23px); color: #C9D0E2; max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cta-row--center { justify-content: center; }
.hero__note { margin-top: 38px; font-size: 13px; color: var(--gray); opacity: .8; }
.panel h2 { font-size: clamp(30px, 3vw, 50px); margin-bottom: 20px; }
.panel > p { color: #C2C9DB; }
.scroll-hint { position: absolute; bottom: 40vh; inset-inline-start: var(--gutter); display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--gray); }
.scroll-hint i { width: 1px; height: 46px; background: linear-gradient(var(--cyan), transparent); animation: drip 1.8s infinite var(--ease); transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: center; gap: 12px; color: var(--white); }
.ticks li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1px solid rgba(108,99,255,.6); background: rgba(108,99,255,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2300D5FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Editor */
.editor { margin-top: 28px; border-radius: 16px; overflow: hidden; background: rgba(13,16,32,.85); border: 1px solid rgba(108,99,255,.3); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 40px -20px rgba(108,99,255,.6); backdrop-filter: blur(10px); }
.editor__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--gray); }
.editor__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3150; }
.editor__bar i:first-child { background: var(--cyan); }
.editor__bar i:nth-child(2) { background: var(--violet); }
.editor__bar span { margin-inline-start: auto; }
.editor__code { margin: 0; padding: 16px 18px; font: 500 13.5px/1.85 var(--mono); min-height: 13em; white-space: pre; overflow: hidden; color: #E8ECFA; }
.editor__code .k { color: #9D8CFF; } .editor__code .f { color: #3FE0FF; } .editor__code .s { color: #FFB86B; }
.editor__code .c { color: #7D88A8; font-family: var(--ar); } .editor__code .n { color: #FF7AB8; }
.editor__code .caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -2px; background: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Flow */
.flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; counter-reset: f; }
.flow li { position: relative; padding: 12px 52px 12px 0; counter-increment: f; color: var(--white); }
.flow li::before { content: counter(f); position: absolute; inset-inline-start: 0; top: 9px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 13px var(--mono); color: var(--cyan); background: rgba(0,213,255,.08); border: 1px solid rgba(0,213,255,.35); }
.flow li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 16px; top: 44px; bottom: -10px; width: 2px; background: linear-gradient(var(--cyan), rgba(0,213,255,0)); transform-origin: top; transform: scaleY(var(--fill, 0)); }

/* AI demo */
.demo { margin-top: 26px; padding: 18px; border-radius: 18px; background: rgba(13,16,32,.86); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.demo__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); margin-bottom: 12px; }
.demo__tag { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.demo__msg { padding: 12px 14px; border-radius: 14px 14px 4px 14px; background: #1b2033; width: fit-content; max-width: 90%; }
.demo__ai { margin-top: 12px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: rgba(108,99,255,.12); border: 1px solid rgba(108,99,255,.4); margin-inline-start: auto; max-width: 92%; display: none; }
.demo[data-state="typing"] .demo__ai, .demo[data-state="ready"] .demo__ai, .demo[data-state="sent"] .demo__ai { display: block; }
.demo__label { font-size: 11px; color: #B9B3FF; display: block; direction: ltr; text-align: left; }
.demo__draft { min-height: 1.6em; border-radius: 6px; }
.demo__draft[contenteditable="true"] { outline: 1px dashed rgba(0,213,255,.5); outline-offset: 4px; }
.demo__draft[contenteditable="true"]:focus { outline: 2px solid var(--cyan); }
.demo__actions { display: flex; gap: 8px; margin-top: 14px; }
.demo__done { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; }
.demo__done li { display: flex; gap: 10px; align-items: center; color: var(--cyan); opacity: 0; transform: translateY(6px); transition: .5s var(--ease); }
.demo__done li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,213,255,.14); font-size: 12px; }
.demo__done li.on { opacity: 1; transform: none; }
.law { margin-top: 22px; font-size: 13px; color: var(--gray); }

/* ---------- Sections ---------- */
.section, .work, .contact, .foot { position: relative; z-index: 3; background: var(--black); }
.section { padding: clamp(100px, 14vh, 180px) var(--gutter); }
.section__head { max-width: 900px; margin-bottom: 60px; }
.section__head h2 { font-size: clamp(34px, 4.4vw, 72px); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; padding: 28px; border-radius: 24px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--line);
  transition: border-color .4s, transform .6s var(--ease);
}
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx) var(--my), rgba(108,99,255,.16), transparent 60%); opacity: 0; transition: opacity .4s; }
.card:hover { border-color: rgba(108,99,255,.45); }
.card:hover::before { opacity: 1; }
.card--wide { grid-column: span 2; }
.card h3 { font-size: clamp(22px, 1.8vw, 28px); }
.card p { color: var(--gray); max-width: 36em; }
.card__n { font-size: 12px; color: var(--cyan); }
.card--suite { background: radial-gradient(120% 140% at 0% 100%, rgba(108,99,255,.28), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); min-height: 240px; }
.card__viz { position: absolute; inset: 22px 22px auto 22px; height: 140px; }
/* scan */
.viz-scan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; }
.viz-scan b { height: 40%; border-radius: 6px; background: rgba(150,162,189,.14); }
.viz-scan b:nth-child(3) { height: 80%; } .viz-scan b:nth-child(4) { height: 55%; background: rgba(108,99,255,.5); } .viz-scan b:nth-child(6) { height: 95%; } .viz-scan b:nth-child(7) { height: 65%; background: rgba(108,99,255,.5); }
.viz-scan i { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--cyan); box-shadow: 0 0 18px 4px rgba(0,213,255,.5); animation: sweep 3.6s infinite var(--ease); }
@keyframes sweep { 0% { right: 0; } 50% { right: 100%; } 100% { right: 0; } }
/* site */
.viz-site { border: 1px solid var(--line); border-radius: 12px; padding: 26px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.viz-site::before { content: "• • •"; position: absolute; top: 4px; inset-inline-end: 12px; font-size: 10px; color: var(--gray); letter-spacing: 2px; }
.viz-site i { border-radius: 6px; background: rgba(150,162,189,.12); animation: build 4s infinite var(--ease); transform-origin: bottom; }
.viz-site i:first-child { grid-column: span 2; background: rgba(108,99,255,.35); }
.viz-site i:nth-child(2) { animation-delay: .3s; } .viz-site i:nth-child(3) { animation-delay: .6s; } .viz-site i:nth-child(4) { grid-column: span 2; animation-delay: .9s; }
@keyframes build { 0%, 10% { transform: scaleY(0); opacity: 0; } 30%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
/* flow */
.viz-flow i { position: absolute; width: 42px; height: 42px; border-radius: 12px; background: rgba(13,16,32,.9); border: 1px solid rgba(0,213,255,.4); top: 50px; }
.viz-flow i:nth-child(1) { right: 0; } .viz-flow i:nth-child(2) { right: calc(50% - 21px); } .viz-flow i:nth-child(3) { left: 0; }
.viz-flow s { position: absolute; top: 71px; height: 2px; width: calc(50% - 42px); background: rgba(0,213,255,.15); overflow: hidden; }
.viz-flow s:nth-of-type(1) { right: 42px; } .viz-flow s:nth-of-type(2) { left: 42px; }
.viz-flow s::after { content: ""; position: absolute; top: 0; width: 30%; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: packet 1.6s linear infinite; }
.viz-flow s:nth-of-type(2)::after { animation-delay: .8s; }
@keyframes packet { from { right: -30%; } to { right: 100%; } }
/* chat */
.viz-chat { display: grid; gap: 8px; align-content: center; }
.viz-chat i { height: 26px; border-radius: 12px; background: rgba(150,162,189,.14); width: 60%; animation: chat 4.5s infinite var(--ease); opacity: 0; }
.viz-chat i:nth-child(2) { width: 75%; margin-inline-start: auto; background: rgba(108,99,255,.4); animation-delay: .7s; }
.viz-chat i:nth-child(3) { width: 34%; margin-inline-start: auto; background: rgba(0,213,255,.3); animation-delay: 1.4s; }
@keyframes chat { 0% { opacity: 0; transform: translateY(8px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* launch */
.viz-launch i { position: absolute; inset: 10px 30%; border-radius: 50%; background: conic-gradient(from 0deg, var(--cyan), var(--violet), transparent 70%); filter: blur(1px); animation: spin 6s linear infinite; -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Work (laptops, horizontal) ---------- */
.work { height: 380vh; }
.work__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--gutter); }
.work__head { margin-bottom: 40px; position: relative; z-index: 3; } /* phones: a lid tilted back (3D, --lid) reaches ~120px above its laptop — it covered «شو مجالك؟» and took its taps */
.work__track { display: flex; gap: clamp(30px, 4vw, 70px); width: max-content; will-change: transform; perspective: 1600px; padding-inline-end: 20vw; }
.laptop { margin: 0; width: clamp(300px, 40vw, 640px); flex: none; transform-style: preserve-3d; border-radius: 18px; }
.laptop { position: relative; }
.laptop__hit { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: none; border-radius: inherit; cursor: pointer; }
.laptop__hit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 10px; }
.laptop__screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 16px 16px 4px 4px; padding: 2.2% 2.2% 3%;
  background: linear-gradient(#1c2033, #0f1222); border: 1px solid rgba(255,255,255,.1);
  transform-origin: bottom; transform: rotateX(var(--lid, 0deg)); transition: transform .2s linear;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 60px -30px rgba(108,99,255,.6);
}
/* The shot is laid over the screen, not inside its flow: in iPhone Safari a `height: 100%` child of an aspect-ratio box
   fell back to the <img height="750"> attribute and stretched every screen ~3× tall and blank (Hamza's screenshots,
   2026-10-29 — «صفحة جرّب سيئة جدًا»). The box now keeps its 16:10; the insets are its padding (2.2% / 3% of the width). */
.laptop__screen { min-height: 0; }
.laptop__screen img { position: absolute; top: 3.52%; left: 2.2%; width: 95.6%; height: 91.68%; object-fit: cover; object-position: top; border-radius: 6px; }
.laptop__screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 40%); pointer-events: none; }
.laptop__base { height: 14px; margin: 0 -6%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#2a2f45, #141726); position: relative; }
.laptop__base::before { content: ""; position: absolute; top: 0; left: 42%; right: 42%; height: 5px; border-radius: 0 0 6px 6px; background: #0b0d18; }
.laptop figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 22px; }
.laptop figcaption b { font-size: 20px; }
.laptop figcaption span { color: var(--gray); font-size: 14px; }
.laptop::before { content: attr(data-tag); display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--cyan); border: 1px solid rgba(0,213,255,.35); background: rgba(0,213,255,.06); }

/* ---------- Process ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.steps::before { content: ""; position: absolute; top: 15px; inset-inline: 0; height: 1px; background: var(--line); }
.steps::after { content: ""; position: absolute; top: 15px; inset-inline: 0; height: 1px; background: var(--grad); transform-origin: right; transform: scaleX(var(--fill, 0)); }
.steps li { position: relative; padding-top: 50px; }
.steps li::before { content: ""; position: absolute; top: 9px; inset-inline-start: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--black); border: 2px solid var(--violet); z-index: 1; }
.steps span { font-size: 12px; color: var(--cyan); }
.steps h3 { font-size: 21px; margin: 6px 0 8px; }
.steps p { color: var(--gray); font-size: 15px; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.founder img { border-radius: 24px; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.2) contrast(1.05); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(108,99,255,.6); }
.founder blockquote { font-size: clamp(26px, 2.8vw, 46px); font-weight: 600; line-height: 1.4; }
.founder__name { margin-top: 26px; font-weight: 700; font-size: 18px; }
.founder__name span { display: block; font-weight: 400; color: var(--gray); font-size: 15px; }

/* ---------- Contact ---------- */
.contact { padding: clamp(120px, 20vh, 240px) var(--gutter); text-align: center; overflow: hidden; }
.contact::before { content: ""; position: absolute; left: 50%; top: 55%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(108,99,255,.32), rgba(0,213,255,.08) 55%, transparent); pointer-events: none; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .8; } }
.contact > * { position: relative; }
.contact__title { font-size: clamp(40px, 6.4vw, 110px); max-width: 14em; margin-inline: auto; }
.contact .lead { margin-inline: auto; }
.contact .btn--ghost span { font-family: var(--en); direction: ltr; }

/* ---------- Footer ---------- */
.foot { padding: 60px var(--gutter) 40px; border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; color: var(--gray); font-size: 14px; }
.foot img { height: 46px; width: auto; margin-bottom: 8px; }
.foot__line { color: var(--white); letter-spacing: .2em; font-size: 12px; }
.foot p:nth-of-type(2) { font-family: var(--en); }
.foot__meta a { color: var(--white); font-family: var(--en); }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 50; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(245,247,255,.6); pointer-events: none; mix-blend-mode: difference; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s; display: none; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(245,247,255,.9); }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

/* ---------- Split-text helpers ---------- */
.split .w { display: inline-block; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .steps::before, .steps::after { display: none; }
}
@media (max-width: 760px) {
  .nav { gap: 12px; padding-block: 12px; }
  .nav__links { display: none; }
  .nav__lang { margin-inline-start: auto; }
  .nav__logo img { height: 34px; }
  .rail { display: none; }
  .vignette { background: linear-gradient(to top, rgba(9,11,19,.96) 0%, rgba(9,11,19,.75) 38%, rgba(9,11,19,0) 62%); }
  .chapter, .chapter--hero { min-height: 0; padding-bottom: 34vh; }
  .panel, .hero { width: auto; position: relative; top: auto; margin-top: 64vh; }
  .hero { margin-top: 40vh; }
  .hero__title { font-size: clamp(36px, 10vw, 52px); }
  .hero__note, .scroll-hint { display: none; }
  .editor__code { font-size: 12px; min-height: 0; }
  .bento { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .work { height: auto; }
  .work__pin { position: relative; height: auto; padding-block: 100px; }
  .work__track { width: auto; flex-direction: column; padding: 0; transform: none !important; }
  .laptop { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder img { max-width: 320px; }
}

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

/* Tall AI panel must fit short laptop screens */
#ch-ai .panel { top: 11vh; }
@media (min-width: 761px) and (max-height: 860px) {
  .panel h2 { font-size: clamp(26px, 2.4vw, 40px); margin-bottom: 12px; }
  .demo { margin-top: 14px; padding: 14px; }
  .demo__done { margin-top: 10px; }
  .law { margin-top: 12px; }
}

/* ---------- English (LTR) — en/index.html mirrors the Arabic layout ---------- */
html[lang="en"] body { font-family: var(--en); line-height: 1.65; }
html[lang="en"] .btn { font-family: var(--en); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] blockquote { letter-spacing: -.025em; }
[dir="ltr"] .vignette {
  background:
    linear-gradient(to right, rgba(9,11,19,.94) 0%, rgba(9,11,19,.78) 30%, rgba(9,11,19,.25) 48%, rgba(9,11,19,0) 60%),
    radial-gradient(120% 90% at 60% 50%, transparent 55%, rgba(9,11,19,.7) 100%);
}
[dir="ltr"] .rail li { flex-direction: row; }
[dir="ltr"] .rail span { transform: translateX(6px); }
[dir="ltr"] .rail li.is-active span { transform: none; }
[dir="ltr"] .flow li { padding: 12px 0 12px 52px; }
[dir="ltr"] .demo__msg { border-radius: 14px 14px 14px 4px; }
[dir="ltr"] .demo__ai { border-radius: 14px 14px 4px 14px; }
[dir="ltr"] .steps::after { transform-origin: left; }
[dir="ltr"] .editor__code .c { font-family: var(--mono); }
@media (max-width: 760px) {
  [dir="ltr"] .vignette { background: linear-gradient(to top, rgba(9,11,19,.96) 0%, rgba(9,11,19,.75) 38%, rgba(9,11,19,0) 62%); }
}

/* ---------- Case card (laptop → dialog) ---------- */
.laptop { cursor: pointer; }
.laptop:hover .laptop__screen img { filter: brightness(1.08); }
.laptop__screen img { transition: filter .4s var(--ease); }
html.has-case { overflow: hidden; }
.case {
  width: min(1040px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: calc(100dvh - 48px);
  margin: auto; padding: 0; border: 0; border-radius: 22px; color: var(--white); background: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 40px 120px -30px rgba(108,99,255,.45);
  display: none; grid-template-columns: 1.35fr 1fr; overflow: hidden;
}
.case[open] { display: grid; }
.case::backdrop { background: rgba(9,11,19,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.case__shot { overflow-y: auto; max-height: calc(100dvh - 48px); background: #05060c; overscroll-behavior: contain; }
.case__shot img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.case__body { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.case__tag { margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--cyan); border: 1px solid rgba(0,213,255,.35); background: rgba(0,213,255,.06); }
.case__title { margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; }
.case__desc { margin: 0 0 22px; color: var(--gray); }
.case__label { margin: 0 0 6px; font-size: 12px; color: var(--gray); }
.case__svc { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; width: 100%; }
.case__svc a { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; color: inherit; text-decoration: none; background: rgba(245,247,255,.03); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, background .3s; }
.case__svc a:hover { box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); background: rgba(0,213,255,.05); }
.case__svc .mono { color: var(--cyan); font-size: 12px; flex: none; }
.case__body .btn { margin-top: auto; }
.case__close {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  font: 400 26px/1 var(--en); color: var(--white); background: rgba(9,11,19,.6); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
}
.case__close:hover { box-shadow: inset 0 0 0 1px rgba(0,213,255,.6); }
@media (max-width: 760px) {
  .case { grid-template-columns: 1fr; overflow-y: auto; border-radius: 18px; }
  .case__shot { max-height: 44vh; }
}

/* ---------- Live experience (laptop → case card → the client site full-screen) ---------- */
.btn--cyan { background: rgba(0,213,255,.1); box-shadow: inset 0 0 0 1px rgba(0,213,255,.45); color: var(--white); }
.btn--cyan::before { background: rgba(0,213,255,.18); }
.btn--cyan:hover { box-shadow: inset 0 0 0 1px var(--cyan); }
.case__enter { margin-top: auto; margin-bottom: 10px; }
.case__enter + .btn { margin-top: 0; }
html[lang="ar"] { --xp-label: "تجربة حيّة ↗"; }
html[lang="en"] { --xp-label: "Live ↗"; }
.laptop[data-xp] .laptop__screen::before {
  content: var(--xp-label); position: absolute; z-index: 2; top: 12px; inset-inline-start: 12px; padding: 5px 11px; border-radius: 999px;
  font: 500 12px/1 var(--ar); color: var(--ink); background: var(--cyan); box-shadow: 0 6px 20px -6px rgba(0,213,255,.7);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
html[lang="en"] .laptop[data-xp] .laptop__screen::before { font-family: var(--en); }
.laptop[data-xp]:hover .laptop__screen::before, .laptop[data-xp]:focus-visible .laptop__screen::before { opacity: 1; transform: none; }
html.has-xp { overflow: hidden; }
.xp {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--white); background: #05060c; display: none; flex-direction: column; overflow: hidden;
}
.xp[open] { display: flex; }
.xp::backdrop { background: #05060c; }
.xp__bar {
  flex: none; display: flex; align-items: center; gap: 14px; height: 56px; padding-inline: 16px;
  background: var(--ink); box-shadow: 0 1px 0 var(--line);
}
.xp__mark { width: 28px; height: 28px; flex: none; }
.xp__title { margin: 0; display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; font-size: 15px; }
.xp__title .mono { color: var(--cyan); font-size: 11px; letter-spacing: .08em; flex: none; }
.xp__title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp__cta { flex: none; }
.xp__close {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; font: 400 24px/1 var(--en); color: var(--white);
  background: rgba(245,247,255,.06); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
}
.xp__close:hover { box-shadow: inset 0 0 0 1px rgba(0,213,255,.6); }
.xp__stage { flex: 1; position: relative; min-height: 0; }
.xp__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #05060c; }
.xp__loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; letter-spacing: .12em; color: var(--gray); background: #05060c; pointer-events: none; }
.xp__hint { position: absolute; bottom: 10px; inset-inline-end: 16px; margin: 0; font-size: 11px; color: var(--gray); opacity: .7; pointer-events: none; }
@media (max-width: 760px) {
  .xp__bar { gap: 10px; padding-inline: 12px; }
  .xp__title .mono { display: none; }
  .xp__cta { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .xp__hint { display: none; }
}

.work__all { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--cyan); border-bottom: 1px solid rgba(0,213,255,.35); transition: border-color .3s; }
.work__all:hover { border-color: var(--cyan); }

/* ---------- Icon system (assets/img/icons.svg sprite, currentColor) ---------- */
.ic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
.btn .ic { width: 18px; height: 18px; }
.btn--xl .ic { width: 22px; height: 22px; }
[dir="rtl"] .ic--dir { transform: scaleX(-1); }
.btn:hover .ic--dir { animation: nudge .6s var(--ease); }
@keyframes nudge { 50% { translate: 4px 0; } }
[dir="rtl"] .btn:hover .ic--dir { animation-name: nudge-rtl; }
@keyframes nudge-rtl { 50% { translate: -4px 0; } }
.card__icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 4px;
  color: var(--cyan); background: rgba(0,213,255,.07); box-shadow: inset 0 0 0 1px rgba(0,213,255,.28);
  transition: background .4s, box-shadow .4s, transform .5s var(--ease);
}
.card__icon .ic { width: 22px; height: 22px; }
.card:hover .card__icon { background: rgba(0,213,255,.14); box-shadow: inset 0 0 0 1px rgba(0,213,255,.6), 0 0 24px -6px rgba(0,213,255,.6); transform: translateY(-2px); }
.card--suite .card__icon { color: var(--violet); background: rgba(108,99,255,.1); box-shadow: inset 0 0 0 1px rgba(108,99,255,.4); }
.steps__ic { display: block; width: 24px; height: 24px; margin-bottom: 10px; color: var(--cyan); }
.steps li { padding-top: 58px; }
.steps li::before { top: 9px; }

/* ---------- Footer (3 columns) ---------- */
.foot { gap: 34px; justify-items: stretch; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot__brand { display: grid; gap: 8px; justify-items: start; max-width: 36em; }
.foot__brand p { margin: 0; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col a, .foot__col p { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--gray); transition: color .3s; width: fit-content; }
.foot__col a:hover { color: var(--white); }
.foot__col .ic { color: var(--cyan); width: 18px; height: 18px; }
.foot__h { color: var(--white); font-size: 11px; letter-spacing: .14em; margin: 0 0 4px; }
.foot__meta { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 760px) {
  .foot__grid { grid-template-columns: 1fr; gap: 30px; }
  .founder img { max-height: 380px; width: 100%; aspect-ratio: auto; object-position: center 25%; }
}
.card { min-height: 344px; }
.card--suite { min-height: 0; }

/* ---------- Live experience v2: zoom-in, device toggle, prev/next, hint ---------- */
.xp__zoom { position: fixed; z-index: 90; background: #05060c center top / cover no-repeat; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 120px -20px rgba(0,0,0,.95); pointer-events: none; }
.xp__title { gap: 10px; }
.xp__kind { font-size: 12px; color: var(--gray); padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.xp__dev { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(245,247,255,.05); box-shadow: inset 0 0 0 1px var(--line); margin-inline-start: auto; }
.xp__dev button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--gray); font: 500 13px var(--ar); cursor: pointer; transition: background .3s, color .3s; }
html[lang="en"] .xp__dev button { font-family: var(--en); }
.xp__dev button .ic { width: 16px; height: 16px; }
.xp__dev button[aria-pressed="true"] { background: rgba(0,213,255,.14); color: var(--white); box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); }
.xp__nav { display: inline-flex; gap: 6px; }
.xp__nav button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(245,247,255,.06); color: var(--white); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: grid; place-items: center; transition: box-shadow .3s, opacity .3s; }
.xp__nav button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(0,213,255,.6); }
.xp__nav button:disabled { opacity: .3; cursor: default; }
.xp__nav .ic { width: 18px; height: 18px; }
[dir="rtl"] .ic--next { transform: scaleX(-1); }
[dir="ltr"] .ic--prev { transform: scaleX(-1); }
.xp__stage { background: #05060c; display: grid; place-items: center; }
.xp__frame { position: absolute; inset: 0; transition: inset .5s var(--ease), border-radius .5s var(--ease), box-shadow .5s; overflow: hidden; }
.xp__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #05060c; }
.xp__stage[data-device="phone"] { background: radial-gradient(600px 400px at 50% 40%, rgba(108,99,255,.18), transparent 70%), #05060c; }
.xp__stage[data-device="phone"] .xp__frame {
  inset: 22px calc(50% - 195px); width: 390px; border-radius: 34px; border: 8px solid #141726; background: #141726;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 120px -30px rgba(0,0,0,.95), 0 0 80px -20px rgba(108,99,255,.5);
}
.xp__stage[data-device="phone"] .xp__frame::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 50%; width: 110px; height: 22px; translate: -50% 0; border-radius: 999px; background: #141726; }
.xp__loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #05060c; opacity: 0; pointer-events: none; transition: opacity .4s; font-size: 0; }
.xp__loading.is-on { opacity: 1; }
.xp__loading img { animation: xp-pulse 1.4s ease-in-out infinite; }
@keyframes xp-pulse { 50% { opacity: .35; transform: scale(.92); } }
.xp__hint {
  position: absolute; z-index: 4; bottom: 22px; left: 50%; translate: -50% 12px; margin: 0; padding: 10px 16px; border-radius: 999px;
  font-size: 13px; color: var(--white); background: rgba(13,16,32,.92); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35), 0 10px 40px -10px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .4s, translate .4s var(--ease); pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
  inset-inline: auto; left: 50%; /* «inset-inline-end: auto» after «left» undid the centring in Arabic */
}
.xp__hint.is-on { opacity: 1; translate: -50% 0; }
@media (max-width: 760px) {
  .xp__dev, .xp__kind { display: none; }
  .xp__nav { margin-inline-start: auto; }
  .xp__hint { display: block; font-size: 12px; }
}

/* ---------- Hero v2: audience rotator + trust line ---------- */
.hero__for { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 24px); color: #C9D0E2; display: flex; gap: .4em; align-items: baseline; }
.hero__for b { position: relative; display: inline-grid; color: var(--cyan); font-weight: 600; min-width: 7em; }
.hero__for b span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; translate: 0 .5em; transition: opacity .45s var(--ease), translate .45s var(--ease); }
.hero__for b span.is-on { opacity: 1; translate: 0 0; }
.hero__for b span.is-out { opacity: 0; translate: 0 -.5em; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--gray); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .ic { width: 16px; height: 16px; color: var(--cyan); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 22px 0; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cyan); }
.faq summary .ic { width: 22px; height: 22px; flex: none; color: var(--cyan); transition: transform .4s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq summary .q { flex: 1; }
.faq details p { margin: 0 0 24px; padding-inline-start: 38px; color: #C9D0E2; max-width: 46em; }
.faq details p a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(0,213,255,.35); text-underline-offset: 3px; }
.faq details p a:hover { text-decoration-color: var(--cyan); }
.faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }

/* ---------- Idea 1: quick audit in the hero ---------- */
.qa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease), margin-top .6s var(--ease); margin-top: 0; }
.qa.is-open { grid-template-rows: 1fr; margin-top: 22px; }
.qa > .qa__panel { overflow: hidden; min-height: 0; }
.qa.is-open > .qa__panel { padding: 18px 20px 20px; border-radius: 18px; background: rgba(13,16,32,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -30px rgba(108,99,255,.5); }
.qa__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qa__head .mono { margin: 0; font-size: 12px; color: var(--cyan); letter-spacing: .08em; }
.qa__close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(245,247,255,.06); color: var(--white); font: 400 20px/1 var(--en); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.qa__bar { height: 2px; margin: 12px 0 16px; background: var(--line); border-radius: 2px; overflow: hidden; }
.qa__bar i { display: block; height: 100%; width: var(--w, 0); background: var(--grad); transition: width .5s var(--ease); }
.qa__q { margin: 0 0 14px; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.4; }
.qa__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qa__opt { padding: 10px 16px; border-radius: 999px; border: 0; background: rgba(245,247,255,.05); color: var(--white); font: 500 15px var(--ar); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, background .3s, transform .3s var(--ease); }
html[lang="en"] .qa__opt { font-family: var(--en); }
.qa__opt:hover, .qa__opt:focus-visible { box-shadow: inset 0 0 0 1px var(--cyan); background: rgba(0,213,255,.08); transform: translateY(-1px); outline: 0; }
.qa__leaks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.qa__leaks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: rgba(255,77,109,.07); box-shadow: inset 0 0 0 1px rgba(255,77,109,.3); animation: qa-in .6s var(--ease) both; animation-delay: calc(var(--i) * .12s); font-size: 15px; line-height: 1.5; }
.qa__leaks .ic { color: #ff6b85; width: 20px; height: 20px; margin-top: 2px; }
.qa__leaks b { font-size: 11px; color: var(--cyan); white-space: nowrap; align-self: center; }
@keyframes qa-in { from { opacity: 0; translate: 0 10px; } }
.qa__next { margin: 0 0 14px; color: #C9D0E2; font-size: 15px; }
.qa__cta { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .qa.is-open > .qa__panel { padding: 14px; } .qa__leaks li { grid-template-columns: 20px 1fr; } .qa__leaks b { grid-column: 2; } }

/* ---------- Idea 7: sound toggle (4 bars) ---------- */
.sound { position: fixed; z-index: 21; bottom: 22px; inset-inline-start: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(13,16,32,.8); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 14px; backdrop-filter: blur(10px); transition: box-shadow .3s; }
.sound:hover { box-shadow: inset 0 0 0 1px rgba(0,213,255,.6); }
.sound i { width: 3px; height: 16px; transform: scaleY(.375); transform-origin: bottom; border-radius: 2px; background: var(--gray); transition: background .3s; }
.sound.is-on i { background: var(--cyan); animation: eq .9s ease-in-out infinite alternate; }
.sound i:nth-child(2) { animation-delay: -.3s; } .sound i:nth-child(3) { animation-delay: -.6s; } .sound i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { to { transform: scaleY(1); } }
html.has-xp .sound, html.has-case .sound { display: none; }
@media (max-width: 760px) { .sound { bottom: 86px; width: 40px; height: 40px; } }

/* ---------- Idea 2: before/after inside the experience ---------- */
.xp__ba { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(245,247,255,.05); color: var(--gray); font: 500 13px var(--ar); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.xp__ba .ic { width: 16px; height: 16px; }
.xp__ba[aria-pressed="true"] { color: var(--white); background: rgba(0,213,255,.14); box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); }
.xp__cmp { position: absolute; inset: 0; z-index: 2; --x: 50%; }
.xp__cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #05060c; }
.xp__cmp::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.xp__cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.xp__cmp-l, .xp__cmp-r { position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; background: rgba(13,16,32,.85); color: var(--white); pointer-events: none; }
.xp__cmp-l { left: 14px; } .xp__cmp-r { right: 14px; }

/* ---------- Idea 8: Amman clock ---------- */
.foot__clock span { color: var(--gray); } .foot__clock b { color: var(--white); font-family: var(--en); }

/* ---------- Idea 6: the real story (horizontal, scroll-snap) ---------- */
.story__track { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 30px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.story__track::-webkit-scrollbar { display: none; }
.story__card { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; padding: 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.story__card h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 20px; }
.story__card h3 .ic { color: var(--cyan); width: 22px; height: 22px; }
.story__card p:last-child { margin: 0; color: var(--gray); font-size: 15px; }
.story__n { margin: 0; font-size: 12px; color: var(--cyan); display: flex; justify-content: space-between; }
.story__tag { color: var(--gray); letter-spacing: .06em; }
.story__art { height: 170px; border-radius: 14px; background: #0b0d18; box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.story__art--wa::before { content: "بدنا نظام يسجّل اللاعبين ويتابع الاشتراكات ويرسل تقارير للأهالي"; position: absolute; inset-inline-start: 18px; top: 48px; max-width: 78%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #1f3b2d; color: #e9f5ee; font-size: 13px; line-height: 1.5; }
html[lang="en"] .story__art--wa::before { content: "We need a system that registers players, tracks subscriptions and sends parents reports"; }
.story__art--wa::after { content: "10:42 ✓✓"; position: absolute; inset-inline-start: 26px; bottom: 30px; font: 10px var(--en); color: #8fb5a0; }
.story__art--scan { background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(150,162,189,.06) 44px 45px), #0b0d18; }
.story__art--scan::before { content: ""; position: absolute; inset: 24px 20px; background: linear-gradient(rgba(150,162,189,.14) 0 10px, transparent 10px 24px, rgba(108,99,255,.45) 24px 34px, transparent 34px 48px, rgba(150,162,189,.14) 48px 58px, transparent 58px 72px, rgba(0,213,255,.4) 72px 82px, transparent 82px); border-radius: 6px; }
.story__art--scan::after { content: ""; position: absolute; top: 10px; bottom: 10px; width: 2px; inset-inline-start: 50%; background: var(--cyan); box-shadow: 0 0 18px 4px rgba(0,213,255,.5); animation: sweep 3.6s infinite var(--ease); }
.story__art--proposal::before { content: ""; position: absolute; inset: 20px 60px 20px 20px; border-radius: 8px; background: #f5f7ff; }
.story__art--proposal::after { content: ""; position: absolute; inset: 36px 76px 36px 36px; background: repeating-linear-gradient(#cfd5e6 0 6px, transparent 6px 16px); }
.story__art--build::before { content: "const academy = build({\A  players: register(),\A  subscriptions: track(),\A  reports: weekly(parents)\A});"; white-space: pre; position: absolute; inset: 18px; font: 12px/1.7 ui-monospace, Menlo, monospace; color: #9ad7ff; direction: ltr; text-align: left; }
.story__art--chart img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.hero.has-qa { top: 9vh; }
.hero.has-qa .trust, .hero.has-qa .hero__for { display: none; }
.hero.has-qa .lead { display: none; }
@media (max-width: 760px) { .hero.has-qa .cta-row { margin-top: 18px; } }

/* ---------- Micro-interactions: pointer tilt + touch sizes ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), border-color .4s; will-change: transform; }
.wk-item .laptop__screen.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (max-width: 760px) {
  .btn--sm, .qa__opt, .xp__dev button, .xp__nav button, .xp__close, .case__close, .qa__close { min-height: 44px; }
  .xp__nav button, .xp__close, .case__close, .qa__close { min-width: 44px; }
  .faq summary { padding: 18px 0; }
  .section { padding-inline: 20px; }
  .story__card { flex-basis: 84vw; }
}

/* =====================================================================
   Axis 1 — reach anything fast: command palette, mobile dock, story progress, next-section
   ===================================================================== */
.sound { inset-inline-start: auto; inset-inline-end: 22px; } /* the assistant owns the start corner */
.nav__search {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--gray); background: rgba(245,247,255,.04); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--ar); transition: color .3s, box-shadow .3s, background .3s;
}
html[lang="en"] .nav__search { font-family: var(--en); }
.nav__search:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); background: rgba(0,213,255,.06); }
.nav__search .ic { width: 17px; height: 17px; color: var(--cyan); }
.nav__search kbd, .cmdk kbd { font: 600 11px var(--en); padding: 2px 6px; border-radius: 6px; color: var(--gray); background: rgba(245,247,255,.06); box-shadow: inset 0 0 0 1px var(--line); direction: ltr; }
.nav__search kbd[data-k]::before { content: attr(data-k); }
@media (max-width: 1100px) { .nav__search span, .nav__search kbd { display: none; } .nav__search { padding: 0; width: 42px; justify-content: center; } }

.nav__progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; pointer-events: none; }
.nav__progress i { position: absolute; inset: 0; background: var(--grad); transform-origin: right; transform: scaleX(0); box-shadow: 0 0 10px rgba(0,213,255,.6); }
html[dir="ltr"] .nav__progress i { transform-origin: left; }
.nav__progress span { position: absolute; top: 8px; inset-inline-start: var(--gutter); padding: 3px 10px; border-radius: 999px; background: rgba(9,11,19,.88); box-shadow: inset 0 0 0 1px rgba(0,213,255,.22); font-size: 11px; letter-spacing: .1em; color: var(--cyan); opacity: 0; transition: opacity .4s; } /* a badge, not bare text: it floated over cards and doubled the chapter eyebrow (critic, night cycle 2) */
.nav.is-solid .nav__progress span:not(:empty) { opacity: .9; }

.cmdk { width: min(640px, calc(100vw - 32px)); max-width: none; margin: 12vh auto auto; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--white); overflow: visible; }
.cmdk::backdrop { background: rgba(5,6,12,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmdk[open] .cmdk__box { animation: cmdk-in .35s var(--ease); }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.cmdk__box { border-radius: 20px; background: rgba(13,16,32,.94); box-shadow: inset 0 0 0 1px rgba(150,162,189,.22), 0 40px 120px -20px rgba(0,0,0,.9), 0 0 80px -30px rgba(108,99,255,.7); overflow: hidden; }
.cmdk__in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk__in .ic { width: 20px; height: 20px; color: var(--cyan); }
.cmdk__in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--white); font: 500 18px var(--ar); }
html[lang="en"] .cmdk__in input { font-family: var(--en); }
.cmdk__in input::placeholder { color: var(--gray); opacity: .8; }
.cmdk__in input::-webkit-search-cancel-button { display: none; }
.cmdk__list { list-style: none; margin: 0; padding: 8px; max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.cmdk__g { padding: 12px 12px 6px; font-size: 11px; letter-spacing: .1em; color: var(--gray); }
.cmdk__empty { padding: 10px 12px; font-size: 14px; color: var(--gray); }
.cmdk [role="option"] { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; font-size: 15px; color: #C9D0E2; }
.cmdk [role="option"] .ic { width: 18px; height: 18px; color: var(--gray); flex: none; }
.cmdk [role="option"] span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk [role="option"][aria-selected="true"] { background: rgba(0,213,255,.09); color: var(--white); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35); }
.cmdk [role="option"][aria-selected="true"] .ic { color: var(--cyan); }
.cmdk .is-ask span { color: var(--white); }
.cmdk .is-ask .ic { color: var(--violet); }
.cmdk__hint { margin: 0; padding: 10px 18px; font-size: 11px; color: var(--gray); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .cmdk { margin-top: 10px; } .cmdk__hint { display: none; } .cmdk__in input { font-size: 16px; } }

.next-sec {
  position: fixed; z-index: 19; bottom: 26px; left: 50%; translate: -50% 14px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; opacity: 0; pointer-events: none;
  color: var(--white); background: rgba(13,16,32,.85); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35), 0 10px 40px -10px rgba(0,0,0,.8);
  backdrop-filter: blur(10px); font: 500 13px var(--ar); transition: opacity .5s, translate .5s var(--ease);
}
html[lang="en"] .next-sec { font-family: var(--en); }
.next-sec .ic { width: 16px; height: 16px; color: var(--cyan); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 3px; } }
.next-sec.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
html.has-xp .next-sec, html.has-case .next-sec, html.has-cmdk .next-sec { display: none; }

.dock {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px; border-radius: 22px; background: rgba(13,16,32,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(150,162,189,.2), 0 20px 50px -10px rgba(0,0,0,.9); transition: translate .45s var(--ease), opacity .45s;
}
.dock.is-away { translate: 0 120%; opacity: 0; }
.dock a, .dock button { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 16px; background: transparent; color: var(--gray); font: 500 11px var(--ar); cursor: pointer; text-decoration: none; }
html[lang="en"] .dock a, html[lang="en"] .dock button { font-family: var(--en); }
.dock .ic { width: 22px; height: 22px; color: var(--white); }
.dock .dock__ask { background: linear-gradient(135deg, rgba(108,99,255,.28), rgba(0,213,255,.14)); color: var(--white); box-shadow: inset 0 0 0 1px rgba(108,99,255,.45); }
.dock .dock__ask .ic { color: var(--cyan); }
.dock a[data-k="wa"] .ic { color: #25d366; }
html.has-dock .nova-ai__launcher { display: none; }
html.has-dock .sound { bottom: 92px; }
html.has-dock .next-sec { display: none; }
html.has-dock body { padding-bottom: 84px; }
html.has-xp .dock, html.has-case .dock, html.has-cmdk .dock { display: none; }
@media (max-width: 760px) { .nav__progress span { display: none; } }

/* service cards → their own page */
.card__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--cyan); width: fit-content; }
.card .card__more::after { content: ""; position: absolute; inset: -400px -400px -14px; } /* whole card is clickable */
.card { cursor: default; }
.card:has(.card__more) { cursor: pointer; }
.card__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.card__more .ic { width: 16px; height: 16px; transition: translate .3s var(--ease); }
.card:hover .card__more .ic { translate: -4px 0; }
html[dir="ltr"] .card:hover .card__more .ic { translate: 4px 0; }

/* =====================================================================
   Axis 2 — the site feels intelligent: Nova core, personalisation, live AI suggestions, AI badges
   ===================================================================== */
/* Nova core companion */
.core { position: fixed; z-index: 22; bottom: 84px; inset-inline-end: 18px; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; }
html[dir="ltr"] .core { flex-direction: row; }
.core__orb { position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; pointer-events: auto; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(108,99,255,.55), rgba(13,16,32,.95) 70%); box-shadow: inset 0 0 0 1px rgba(150,162,189,.25), 0 0 40px -6px rgba(108,99,255,.7), 0 14px 40px -10px rgba(0,0,0,.9);
  transition: transform .5s var(--ease); }
.core__orb img { width: 32px; height: 32px; transform: translate(var(--look, 0px, 0px)); transition: transform .6s var(--ease); filter: drop-shadow(0 0 8px rgba(0,213,255,.6)); }
.core__ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(0,213,255,.35); border-top-color: rgba(0,213,255,.9); animation: core-spin 6s linear infinite; }
.core__ring--b { inset: -12px; border-color: rgba(108,99,255,.18); border-inline-end-color: rgba(108,99,255,.7); animation-duration: 9s; animation-direction: reverse; }
.core.is-moving .core__ring { animation-duration: 1.4s; }
.core.is-talking .core__orb { transform: scale(1.08); box-shadow: inset 0 0 0 1px rgba(0,213,255,.5), 0 0 60px -4px rgba(0,213,255,.7), 0 14px 40px -10px rgba(0,0,0,.9); }
/* breathing glow: a pseudo-element fading in and out (compositor only) instead of repainting box-shadow every frame */
.core__orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 56px -4px rgba(108,99,255,.85); opacity: 0; animation: core-breathe 4.2s ease-in-out infinite; }
@keyframes core-breathe { 50% { opacity: 1; } }
@keyframes core-spin { to { transform: rotate(360deg); } }
.core__say { position: absolute; bottom: 0; inset-inline-end: calc(100% + 10px); width: max-content; visibility: hidden; transition: opacity .4s, translate .4s var(--ease), visibility 0s .4s; /* out of the flex flow: its size changes never move the orb; hidden while silent so text swaps are not counted as shifts */
  max-width: min(320px, calc(100vw - 110px)); padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: rgba(13,16,32,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(0,213,255,.3), 0 20px 50px -15px rgba(0,0,0,.9); opacity: 0; translate: 0 8px; pointer-events: none; }
html[dir="ltr"] .core__say { border-radius: 16px 16px 16px 4px; }
.core.is-talking .core__say { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition: opacity .4s, translate .4s var(--ease), visibility 0s; }
.core__line { margin: 0; font-size: 14px; line-height: 1.6; color: var(--white); }
.core__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.core__acts button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 500 13px var(--ar); color: var(--white); background: rgba(245,247,255,.06); box-shadow: inset 0 0 0 1px var(--line); text-align: start; }
html[lang="en"] .core__acts button { font-family: var(--en); }
.core__acts .core__ask { background: linear-gradient(135deg, rgba(108,99,255,.35), rgba(0,213,255,.18)); box-shadow: inset 0 0 0 1px rgba(108,99,255,.5); }
.core__ask .ic { width: 15px; height: 15px; color: var(--cyan); flex: none; }
html.has-xp .core, html.has-case .core, html.has-cmdk .core { display: none; }
@media (max-width: 760px) {
  .core { bottom: 96px; inset-inline-end: 12px; }
  .core__orb { width: 48px; height: 48px; }
  .core__orb img { width: 26px; height: 26px; }
  html.has-dock .sound { bottom: 160px; inset-inline-end: 16px; }
}
@media (prefers-reduced-motion: reduce) { .core__orb, .core__orb::after, .core__ring { animation: none; } }

/* the element the core points at */
.ai-spot { animation: ai-spot 2.4s var(--ease); }
@keyframes ai-spot { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,213,255,0); } 25%, 60% { box-shadow: 0 0 0 3px rgba(0,213,255,.55), 0 0 40px 6px rgba(0,213,255,.35); } }

/* personalisation */
.ai-fit { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--black); background: linear-gradient(90deg, var(--cyan), #8fa8ff); box-shadow: 0 6px 20px -6px rgba(0,213,255,.7); }
.ai-fit .ic { width: 13px; height: 13px; }
.card .ai-fit { position: absolute; top: 18px; inset-inline-end: 18px; margin: 0; }
.card.is-fit { border-color: rgba(0,213,255,.45); box-shadow: 0 0 0 1px rgba(0,213,255,.2), 0 30px 80px -40px rgba(0,213,255,.5); }
.laptop.is-fit .laptop__screen { box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 70px -20px rgba(0,213,255,.8); }
.hero__for.is-locked b span.is-on { text-shadow: 0 0 24px rgba(0,213,255,.5); }
.ai-chip { position: relative; }
.ai-chip > button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 500 13px var(--ar); color: var(--white); background: rgba(0,213,255,.08); box-shadow: inset 0 0 0 1px rgba(0,213,255,.4); }
html[lang="en"] .ai-chip > button { font-family: var(--en); }
.ai-chip > button .ic { width: 15px; height: 15px; color: var(--cyan); }
.ai-chip b { color: var(--cyan); font-weight: 600; }
.ai-chip__menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30; min-width: 200px; padding: 8px; border-radius: 14px; background: rgba(13,16,32,.97); box-shadow: inset 0 0 0 1px var(--line), 0 20px 60px -15px rgba(0,0,0,.9); display: grid; gap: 2px; }
.ai-chip__menu[hidden] { display: none; }
.ai-chip__menu p { margin: 4px 8px 6px; font-size: 12px; color: var(--gray); }
.ai-chip__menu button { text-align: start; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #C9D0E2; font: 500 14px var(--ar); cursor: pointer; }
html[lang="en"] .ai-chip__menu button { font-family: var(--en); }
.ai-chip__menu button:hover, .ai-chip__menu button[aria-pressed="true"] { background: rgba(0,213,255,.09); color: var(--white); }
.ai-chip__menu .ai-chip__clear { color: var(--gray); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
@media (max-width: 1100px) { .ai-chip > button span { display: none; } .ai-chip > button { width: 42px; padding: 0; justify-content: center; } }

/* live AI suggestions on service cards */
.card__ai { position: absolute; z-index: 1; inset: 18px 18px auto 18px; min-height: 140px; padding: 14px; border-radius: 14px; background: rgba(9,11,19,.92); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35), 0 20px 50px -20px rgba(0,213,255,.4);
  opacity: 0; translate: 0 10px; transition: opacity .35s, translate .35s var(--ease); pointer-events: none; display: grid; align-content: start; gap: 8px; }
.card.is-ai .card__ai { opacity: 1; translate: 0 0; }
.card .card__viz { transition: opacity .3s; }
.card.is-ai .card__viz { opacity: .15; }
.card__ai-l { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cyan); letter-spacing: .06em; }
.card__ai-l .ic { width: 13px; height: 13px; }
.card__ai-t { margin: 0; font-size: 14px; line-height: 1.6; color: var(--white); min-height: 3.2em; }
.card__ai-t::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-inline-start: 2px; vertical-align: -2px; background: var(--cyan); animation: caret 1s steps(1) infinite; }
.card__ai.is-done .card__ai-t::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.card__ai-a { margin: 0; display: flex; gap: 6px; opacity: 0; transition: opacity .3s; }
.card__ai.is-done .card__ai-a { opacity: 1; }
.card__ai-a span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--gray); box-shadow: inset 0 0 0 1px var(--line); }
.card__ai-a span:first-child { color: var(--white); background: rgba(108,99,255,.3); box-shadow: inset 0 0 0 1px rgba(108,99,255,.6); }
.card__ai-a .ic { width: 12px; height: 12px; }

/* «what does AI do here?» */
.ai-badge { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font: 700 10px var(--en); letter-spacing: .08em; color: var(--cyan); background: rgba(0,213,255,.08); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35); cursor: help; vertical-align: middle; margin-inline-start: 8px; }
.ai-badge .ic { width: 11px; height: 11px; }
.ai-badge__tip { position: absolute; z-index: 40; bottom: calc(100% + 10px); inset-inline-start: 50%; translate: 50% 6px; width: 240px; padding: 10px 12px; border-radius: 12px; font: 400 13px/1.6 var(--ar); letter-spacing: 0; color: #C9D0E2; background: rgba(13,16,32,.97); box-shadow: inset 0 0 0 1px rgba(0,213,255,.3), 0 20px 50px -15px rgba(0,0,0,.9); opacity: 0; pointer-events: none; transition: opacity .3s, translate .3s var(--ease); text-align: start; }
html[dir="ltr"] .ai-badge__tip { translate: -50% 6px; font-family: var(--en); }
.ai-badge__tip b { display: block; margin-bottom: 4px; color: var(--white); font-weight: 600; }
.ai-badge:hover .ai-badge__tip, .ai-badge:focus-visible .ai-badge__tip { opacity: 1; translate: 50% 0; }
html[dir="ltr"] .ai-badge:hover .ai-badge__tip, html[dir="ltr"] .ai-badge:focus-visible .ai-badge__tip { translate: -50% 0; }
.ai-badge--core { position: absolute; top: -6px; inset-inline-start: -6px; margin: 0; height: 18px; padding: 0 6px; font-size: 9px; pointer-events: auto; background: rgba(9,11,19,.95); }
.core .ai-badge--core { inset-inline-start: auto; inset-inline-end: -4px; top: -4px; }
.ai-badge--core .ai-badge__tip { inset-inline-start: auto; inset-inline-end: 0; translate: 0 6px; }
.ai-badge--core:hover .ai-badge__tip, .ai-badge--core:focus-visible .ai-badge__tip { translate: 0 0; }
html[dir="ltr"] .ai-badge--core:hover .ai-badge__tip, html[dir="ltr"] .ai-badge--core:focus-visible .ai-badge__tip { translate: 0 0; }
.qa__open + .ai-badge { align-self: center; }
.core__acts[hidden] { display: none; }

/* ---------- Smart layer: select-to-ask, voice, summarise ---------- */
.sel-ask { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 13px var(--ar); color: var(--white); background: linear-gradient(135deg, rgba(108,99,255,.95), rgba(0,150,255,.9)); box-shadow: 0 12px 30px -8px rgba(108,99,255,.8); animation: sel-in .25s var(--ease); }
html[lang="en"] .sel-ask { font-family: var(--en); }
.sel-ask[hidden] { display: none; }
.sel-ask .ic { width: 15px; height: 15px; }
@keyframes sel-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.nova-ai__mic { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--gray); background: rgba(245,247,255,.06); box-shadow: inset 0 0 0 1px var(--line); transition: color .3s, box-shadow .3s; }
.nova-ai__mic:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(0,213,255,.5); }
.nova-ai__mic.is-on { color: #fff; background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255,77,109,.6); animation: mic-pulse 1.2s ease-out infinite; }
@keyframes mic-pulse { to { box-shadow: 0 0 0 12px rgba(255,77,109,0); } }
.sum-btn { margin-top: 12px; }

/* ---------- Smart planner (/work/) ---------- */
.pl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; }
.pl__in, .pl__out { padding: 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--line); }
.pl__out { position: sticky; top: 96px; border-color: rgba(0,213,255,.3); box-shadow: 0 30px 80px -40px rgba(0,213,255,.45); display: grid; gap: 14px; }
.pl__out.is-in > * { animation: qa-in .5s var(--ease) both; }
.pl__out.is-in > *:nth-child(2) { animation-delay: .05s; } .pl__out.is-in > *:nth-child(3) { animation-delay: .1s; } .pl__out.is-in > *:nth-child(4) { animation-delay: .15s; }
.pl__l { margin: 0 0 10px; font-size: 12px; color: var(--cyan); letter-spacing: .08em; }
.pl__l + * { margin-bottom: 22px; }
.pl__seg, .pl__feats { display: flex; flex-wrap: wrap; gap: 8px; }
.pl__seg button, .pl__feats button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 500 14px var(--ar); color: #C9D0E2; background: rgba(245,247,255,.04); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s, color .25s, transform .25s var(--ease); }
html[lang="en"] .pl__seg button, html[lang="en"] .pl__feats button { font-family: var(--en); }
.pl__feats button .ic { width: 16px; height: 16px; color: var(--gray); }
.pl__seg button[aria-checked="true"] { color: var(--black); background: var(--cyan); box-shadow: none; }
.pl__feats button[aria-pressed="true"] { color: var(--white); background: rgba(108,99,255,.22); box-shadow: inset 0 0 0 1px rgba(108,99,255,.7); }
.pl__feats button[aria-pressed="true"] .ic { color: var(--cyan); }
.pl__seg button:hover, .pl__feats button:hover { transform: translateY(-1px); }
.pl__tag { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; color: var(--cyan); }
.pl__tag .ic { width: 14px; height: 14px; }
.pl__tier { margin: 0; font-size: clamp(22px, 2vw, 30px); }
.pl__dl { margin: 0; display: grid; gap: 12px; }
.pl__dl dt { font-size: 12px; color: var(--gray); margin-bottom: 4px; }
.pl__dl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl__dl dd > .ic { width: 16px; height: 16px; color: var(--cyan); margin-inline-end: 4px; }
.pl__pages span, .pl__adds span { padding: 4px 10px; border-radius: 999px; font-size: 13px; background: rgba(245,247,255,.05); box-shadow: inset 0 0 0 1px var(--line); animation: qa-in .4s var(--ease) both; animation-delay: calc(var(--i, 0) * .04s); }
.pl__adds span { display: inline-flex; align-items: center; gap: 4px; color: var(--white); background: rgba(108,99,255,.15); box-shadow: inset 0 0 0 1px rgba(108,99,255,.45); }
.pl__adds .ic { width: 12px; height: 12px; }
.pl__xps a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0,213,255,.4); }
.pl__xps .ic { width: 14px; height: 14px; }
.pl__out .btn { justify-self: start; }
.pl__note { margin: 0; font-size: 12px; color: var(--gray); }
@media (max-width: 960px) { .pl { grid-template-columns: 1fr; } .pl__out { position: static; } }
.core__acts button[hidden] { display: none; }

/* =====================================================================
   Axis 3 — page transitions (cross-document View Transitions; Chrome/Edge/Safari 18+, others just navigate)
   ===================================================================== */
@view-transition { navigation: auto; }
.nav__logo { view-transition-name: nova-logo; }
.core__orb { view-transition-name: nova-core; }
.nav { view-transition-name: nova-nav; }
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.2,.7,.1,1) both; }
::view-transition-group(nova-core) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2,.7,.1,1); }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* =====================================================================
   Controls v2 — one family for every button, pill and toggle (Hamza: «المربعات أحلى وأذكى»)
   Primary: gradient body + light edge + shine sweep + icon chip. Ghost: glass with gradient hairline.
   Same height scale (42 / 52 / 64), same icon size (18 / 16 / 22), same gap (10), same focus ring.
   ===================================================================== */
.btn {
  --bg: linear-gradient(135deg, #7b6dff 0%, #5d52f2 55%, #4a43d8 100%);
  gap: 10px; font-weight: 600; letter-spacing: 0;
  background: var(--bg);
  box-shadow: 0 12px 34px -12px rgba(108,99,255,.85), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18);
  transition: box-shadow .4s, transform .35s var(--ease), background .4s;
}
.btn::after { /* shine sweep */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 18px 44px -12px rgba(0,213,255,.55), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.18); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn--sm .ic { width: 16px; height: 16px; }
.btn--xl .ic { width: 22px; height: 22px; }
/* the trailing arrow sits in a small round chip */
.btn .ic--dir { box-sizing: content-box; padding: 5px; margin-inline-end: -8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.btn--sm .ic--dir { padding: 4px; margin-inline-end: -6px; }

.btn--ghost, .btn--cyan {
  color: var(--white);
  background: linear-gradient(rgba(13,16,32,.72), rgba(13,16,32,.72)) padding-box,
              linear-gradient(135deg, rgba(0,213,255,.55), rgba(108,99,255,.35) 45%, rgba(150,162,189,.18)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--ghost::before, .btn--cyan::before { background: radial-gradient(120% 140% at 50% 0%, rgba(0,213,255,.16), transparent 60%); }
.btn--ghost:hover, .btn--cyan:hover { box-shadow: 0 14px 36px -16px rgba(0,213,255,.55); }
.btn--ghost .ic, .btn--cyan .ic { color: var(--cyan); }
.btn--cyan { background: linear-gradient(rgba(0,213,255,.12), rgba(0,213,255,.12)) padding-box, linear-gradient(135deg, rgba(0,213,255,.8), rgba(108,99,255,.5)) border-box; }

/* a small tag inside a button: «AI · ٣ أسئلة» */
.btn__tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; margin-inline-start: 2px; border-radius: 999px;
  font: 700 10px var(--en); letter-spacing: .06em; color: var(--cyan); background: rgba(0,213,255,.1); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35); }
.btn__tag b { font: 500 11px var(--ar); letter-spacing: 0; color: #C9D0E2; }
.qa__open .ic { animation: spark 3.2s ease-in-out infinite; }
@keyframes spark { 0%, 70%, 100% { transform: rotate(0) scale(1); } 80% { transform: rotate(45deg) scale(1.2); } 90% { transform: rotate(90deg) scale(1); } }
.qa__open[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 30px -8px rgba(0,213,255,.6); }

/* nav controls share one pill shape */
.nav .btn { min-height: 44px; }
.nav__lang {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 12px 0 10px; border-radius: 999px;
  color: #C9D0E2; background: linear-gradient(rgba(13,16,32,.6), rgba(13,16,32,.6)) padding-box, linear-gradient(135deg, rgba(150,162,189,.35), rgba(150,162,189,.12)) border-box;
  border: 1px solid transparent; box-shadow: none; transition: color .3s, background .3s;
}
.nav__lang .ic { width: 16px; height: 16px; color: var(--cyan); }
.nav__lang:hover { color: var(--white); background: linear-gradient(rgba(0,213,255,.08), rgba(0,213,255,.08)) padding-box, linear-gradient(135deg, var(--cyan), rgba(108,99,255,.6)) border-box; }
.nav__lang.is-suggest { color: var(--white); animation: lang-hint 2.4s ease-in-out 3; }
@keyframes lang-hint { 50% { box-shadow: 0 0 0 4px rgba(0,213,255,.18), 0 0 24px -4px rgba(0,213,255,.6); } }
.nav__search { min-height: 44px; border: 1px solid transparent; box-shadow: none;
  background: linear-gradient(rgba(13,16,32,.6), rgba(13,16,32,.6)) padding-box, linear-gradient(135deg, rgba(150,162,189,.35), rgba(150,162,189,.12)) border-box; }
.nav__search:hover { background: linear-gradient(rgba(0,213,255,.06), rgba(0,213,255,.06)) padding-box, linear-gradient(135deg, var(--cyan), rgba(108,99,255,.6)) border-box; }
.ai-chip > button { min-height: 44px; }
.nav:not(.is-solid) .nav__lang, .nav:not(.is-solid) .nav__search { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* the smart CTA label swaps with a soft roll */
.btn [data-smart] { display: inline-block; }
.btn [data-smart].is-swap { animation: roll .45s var(--ease); }
@keyframes roll { from { opacity: 0; transform: translateY(60%); } }

/* chips everywhere (filters, planner, quick audit, palette tags) — same hover/active language */
.wk-chips button, .pl__seg button, .pl__feats button, .qa__opt, .xp__dev button, .ai-chip__menu button { transition: background .25s, box-shadow .25s, color .25s, transform .25s var(--ease); }
.wk-chips button:focus-visible, .pl__seg button:focus-visible, .pl__feats button:focus-visible, .qa__opt:focus-visible, .nav__lang:focus-visible, .nav__search:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 760px) {
  .nav__lang span { display: none; }
  .nav__lang { padding: 0; width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .btn::after, .qa__open .ic, .nav__lang.is-suggest { animation: none; transition: none; } }
.btn__tag { gap: 6px; }
.btn__tag b { padding-inline-start: 6px; border-inline-start: 1px solid rgba(0,213,255,.35); }

/* =====================================================================
   Service cards v2 — clean grid layout (illustration · icon + code · title · text · details),
   richer brand-coloured mini illustrations instead of grey placeholders.
   ===================================================================== */
.bento .card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 0; align-content: start; justify-content: stretch; min-height: 0; padding: 22px 24px 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(108,99,255,.09), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.bento .card > * { grid-column: 1 / -1; }
.bento .card > .card__viz { position: relative; inset: auto; height: 150px; margin: 0 0 20px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(9,11,19,.55), rgba(9,11,19,.25)); box-shadow: inset 0 0 0 1px rgba(150,162,189,.12); }
.bento .card > .card__icon { grid-column: 1; width: 40px; height: 40px; border-radius: 12px; margin: 0; align-self: center; }
.bento .card > .card__icon .ic { width: 20px; height: 20px; }
.bento .card > .card__n { grid-column: 2; align-self: center; margin: 0; font-size: 12px; letter-spacing: .1em; }
.bento .card > h3 { margin: 14px 0 6px; }
.bento .card > p:not(.card__n) { margin: 0; color: #B9C1D6; }
.bento .card > .card__more { margin-top: 16px; }
.bento .card--suite { background: radial-gradient(90% 120% at 100% 0%, rgba(108,99,255,.22), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.bento .card .card__ai { inset: 22px 24px auto 24px; min-height: 150px; }
.bento .card .ai-fit { top: 32px; inset-inline-end: 34px; }

/* 01 · scan: bars with two leaks, a sweeping line, floating finding chips */
.viz-scan { display: block; padding: 18px 18px 0; }
.vs__bars { position: absolute; inset: auto 18px 0 18px; height: 110px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.vs__bars b { height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(108,99,255,.75), rgba(108,99,255,.18)); }
.vs__bars b:nth-child(even) { background: linear-gradient(180deg, rgba(0,213,255,.6), rgba(0,213,255,.12)); }
.vs__bars b.is-leak { background: linear-gradient(180deg, rgba(255,90,120,.85), rgba(255,90,120,.15)); box-shadow: 0 0 22px -4px rgba(255,90,120,.6); }
.vs__line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cyan); box-shadow: 0 0 18px 4px rgba(0,213,255,.45); animation: sweep 4.2s infinite var(--ease); }
.vs__chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--white); background: rgba(13,16,32,.88); box-shadow: inset 0 0 0 1px rgba(255,90,120,.45); backdrop-filter: blur(6px); }
.vs__chip .ic { width: 13px; height: 13px; color: #ff6b85; }
.vs__chip--a { top: 14px; inset-inline-start: 14px; animation: float-y 5s ease-in-out infinite; }
.vs__chip--b { top: 48px; inset-inline-end: 16px; animation: float-y 5s ease-in-out -2.5s infinite; }
@keyframes float-y { 50% { translate: 0 -5px; } }

/* 02 · site: a mini browser building itself */
.viz-site { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px 14px 14px; border: 0; }
.viz-site::before { display: none; }
.vw__bar { display: flex; align-items: center; gap: 5px; }
.vw__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(150,162,189,.35); animation: none; }
.vw__bar span { flex: 1; height: 10px; margin-inline-start: 8px; border-radius: 999px; background: rgba(150,162,189,.14); }
.vw__hero { position: relative; border-radius: 10px; padding: 12px; background: linear-gradient(120deg, rgba(0,213,255,.55), rgba(63,123,255,.5) 45%, rgba(108,77,255,.6)); display: grid; align-content: center; gap: 6px; animation: build 5s infinite var(--ease); transform-origin: bottom; }
.vw__hero b { display: block; height: 8px; width: 62%; border-radius: 4px; background: rgba(255,255,255,.85); }
.vw__hero b + b { width: 40%; opacity: .6; }
.vw__hero em { display: block; width: 46px; height: 14px; margin-top: 4px; border-radius: 999px; background: #fff; }
.vw__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vw__cards i { height: 26px; border-radius: 8px; background: rgba(150,162,189,.14); box-shadow: inset 0 0 0 1px rgba(150,162,189,.12); animation: build 5s infinite var(--ease); transform-origin: bottom; }
.vw__cards i:nth-child(1) { animation-delay: .25s; } .vw__cards i:nth-child(2) { animation-delay: .4s; } .vw__cards i:nth-child(3) { animation-delay: .55s; }

/* 03 · flow: three real nodes with icons and a travelling packet */
.viz-flow { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 18px 22px; }
.vf__n { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(13,16,32,.95); box-shadow: inset 0 0 0 1px rgba(0,213,255,.45), 0 0 24px -6px rgba(0,213,255,.5); }
.vf__n .ic { width: 20px; height: 20px; color: var(--cyan); }
.vf__n:nth-child(1) .ic { color: #25d366; }
.viz-flow s { position: relative; flex: 1; height: 2px; top: 0; width: auto; background: rgba(0,213,255,.18); overflow: hidden; }
.viz-flow s::after { content: ""; position: absolute; top: -1px; width: 34%; height: 4px; border-radius: 4px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: packet 1.8s linear infinite; }
.viz-flow s:nth-of-type(2)::after { animation-delay: .9s; }
.vf__cap { position: absolute; bottom: 12px; inset-inline: 0; margin: 0; text-align: center; font-size: 11px; color: var(--gray); letter-spacing: .06em; }

/* 04 · chat: customer → AI draft (typing) → human approve */
.viz-chat { display: grid; align-content: center; gap: 8px; padding: 14px 16px; }
.viz-chat p { margin: 0; }
.vc__in { width: fit-content; max-width: 70%; padding: 7px 12px; border-radius: 14px 14px 14px 4px; font-size: 12px; color: #dfe4f2; background: rgba(150,162,189,.16); animation: chat 6s infinite var(--ease); }
html[dir="rtl"] .vc__in { border-radius: 14px 14px 4px 14px; }
.vc__ai { display: flex; align-items: center; gap: 5px; width: fit-content; margin-inline-start: auto; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, rgba(108,99,255,.75), rgba(0,150,255,.55)); animation: chat 6s .6s infinite var(--ease); }
html[dir="rtl"] .vc__ai { border-radius: 14px 14px 14px 4px; }
.vc__ai .mono { font-size: 10px; font-weight: 700; color: #fff; margin-inline-end: 4px; }
.vc__ai i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: dots 1.2s infinite; height: 6px; opacity: .5; }
.vc__ai i:nth-child(3) { animation-delay: .15s; } .vc__ai i:nth-child(4) { animation-delay: .3s; }
@keyframes dots { 30% { opacity: 1; transform: translateY(-3px); } }
.vc__ok { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-inline-start: auto; padding: 4px 10px; border-radius: 999px; font-size: 11px; color: #0b2a1e; background: #3ee6a3; animation: chat 6s 1.4s infinite var(--ease); }
.vc__ok .ic { width: 12px; height: 12px; }

/* 05 · launch: the brand's channels orbiting a rising core */
.viz-launch { display: grid; place-items: center; }
.vl__ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 1px dashed rgba(0,213,255,.35); animation: spin 18s linear infinite; inset: auto; background: none; }
.vl__t { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(13,16,32,.95); box-shadow: inset 0 0 0 1px rgba(150,162,189,.3);
  transform: rotate(var(--a)) translateX(60px) rotate(calc(-1 * var(--a))); animation: orbit 18s linear infinite; }
.vl__t .ic { width: 16px; height: 16px; color: var(--cyan); }
@keyframes orbit { from { transform: rotate(var(--a)) translateX(60px) rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(60px) rotate(calc(-1 * var(--a) - 360deg)); } }
.vl__core { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #00d5ff, #3f7bff 50%, #6c4dff); box-shadow: 0 0 40px -6px rgba(108,99,255,.8); animation: float-y 3s ease-in-out infinite; }
.vl__core .ic { width: 24px; height: 24px; color: #fff; }
@media (prefers-reduced-motion: reduce) { .vs__line, .vs__chip, .vl__ring, .vl__t, .vl__core, .vc__in, .vc__ai, .vc__ok, .vw__hero, .vw__cards i { animation: none !important; } }
/* v2 overrides beat the v1 positional rules */
.viz-chat .vc__ai i { width: 6px; height: 6px; margin: 0; background: #fff; opacity: .5; border-radius: 50%; animation: dots 1.2s infinite; }
.viz-chat .vc__ai i:nth-of-type(2) { animation-delay: .15s; } .viz-chat .vc__ai i:nth-of-type(3) { animation-delay: .3s; }
.viz-launch .vl__ring { position: absolute; inset: auto; width: 120px; height: 120px; border-radius: 50%; border: 1px dashed rgba(0,213,255,.35); background: none; animation: spin 18s linear infinite; }
.viz-flow s:nth-of-type(n) { position: relative; top: 0; right: auto; left: auto; width: auto; flex: 1; }
.viz-site .vw__bar i { animation: none; transform: none; opacity: 1; }
.bento .card > .viz-site { grid-template-columns: 1fr; }
.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento .card, .bento .card > * { min-width: 0; }
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento .card--wide { grid-column: auto; } }

/* no sideways page pan on phones (3D lids / transformed items may poke out a few px) */
html, body { overflow-x: clip; }

/* =====================================================================
   «احجز تحليلًا» in the same spirit as «فحص سريع»: glass + gradient hairline + inside tag,
   but lit (violet glass, brighter edge, soft glow) so it still reads as the main action.
   ===================================================================== */
.btn--prime {
  color: #fff;
  background: linear-gradient(135deg, rgba(123,109,255,.92), rgba(84,74,232,.88)) padding-box,
              linear-gradient(135deg, #00d5ff, #8f86ff 45%, rgba(255,255,255,.45)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 14px 40px -14px rgba(108,99,255,.95), 0 0 0 4px rgba(108,99,255,.12), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--prime::before { background: linear-gradient(135deg, rgba(0,213,255,.35), rgba(108,77,255,0) 60%); }
.btn--prime:hover { box-shadow: 0 18px 50px -14px rgba(0,213,255,.7), 0 0 0 5px rgba(0,213,255,.14), inset 0 1px 0 rgba(255,255,255,.35); }
.btn--prime .btn__lead { width: 18px; height: 18px; color: #fff; animation: tick 4s ease-in-out infinite; }
@keyframes tick { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } }
.btn__tag--lit { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-family: var(--ar); }
html[lang="en"] .btn__tag--lit { font-family: var(--en); }
.btn__tag--lit b { color: rgba(255,255,255,.85); border-inline-start-color: rgba(255,255,255,.35); }
.btn--prime .ic--dir { background: rgba(255,255,255,.2); }
.nav .btn--prime { box-shadow: 0 10px 30px -12px rgba(108,99,255,.9), inset 0 1px 0 rgba(255,255,255,.3); }
@media (max-width: 760px) { .btn--prime .btn__tag b { display: none; } .btn--prime .btn__tag b + * { display: none; } .chapter--hero .btn--prime .btn__tag { display: none; } } /* hero: «٣٠ دقيقة» is in the label itself now (Q10) — the tag would only say «بعدها» */
@media (prefers-reduced-motion: reduce) { .btn--prime .btn__lead { animation: none; } }

/* =====================================================================
   Sections v2 — the same glass + gradient-hairline language everywhere (Hamza: «أشكال حلوة بكل مكان»)
   ===================================================================== */
:root { --glass: rgba(13,16,32,.62); --hair: linear-gradient(135deg, rgba(0,213,255,.45), rgba(108,99,255,.3) 45%, rgba(150,162,189,.12)); }

/* section eyebrows become small lit pills (like the hero's) */
.section__head .eyebrow, .contact .eyebrow, .wk-hero .eyebrow, .sx__copy .eyebrow {
  padding: 6px 14px 6px 12px; border-radius: 999px; font-size: 12px;
  background: linear-gradient(rgba(0,213,255,.06), rgba(0,213,255,.06)) padding-box, var(--hair) border-box; border: 1px solid transparent;
}
.section__head .eyebrow::before, .contact .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.section__head h2 { text-wrap: balance; }

/* «كيف نعمل» — five glass step cards joined by a glowing line */
.steps { gap: 14px; }
.steps::before, .steps::after { top: 46px; inset-inline: 8%; }
.steps li { padding: 22px 18px 20px; border-radius: 20px; background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--hair) border-box; border: 1px solid transparent;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .5s var(--ease), box-shadow .5s; }
.steps li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(0,213,255,.45); }
.steps li::before { display: none; }
.steps .steps__ic { position: relative; z-index: 1; display: grid; place-items: center; box-sizing: content-box; width: 22px; height: 22px; padding: 12px; margin: 0 0 14px; border-radius: 14px;
  color: var(--cyan); background: #0b0e1c; box-shadow: inset 0 0 0 1px rgba(0,213,255,.4), 0 0 26px -6px rgba(0,213,255,.55); }
.steps li > span.mono { display: block; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-family: var(--en);
  background: linear-gradient(135deg, #00d5ff, #8f86ff); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.steps h3 { margin: 10px 0 6px; font-size: 19px; }
.steps p { margin: 0; font-size: 14px; }
@media (max-width: 1000px) { .steps::before, .steps::after { display: none; } }

/* FAQ — each question a glass card; the open one lights up */
.faq { display: grid; gap: 10px; }
.faq details, .faq details:last-child { border: 1px solid transparent; border-radius: 18px; padding: 0 20px; background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(135deg, rgba(150,162,189,.22), rgba(150,162,189,.08)) border-box; transition: background .4s, box-shadow .4s; }
.faq details[open] { background: linear-gradient(rgba(0,213,255,.05), rgba(13,16,32,.7)) padding-box, var(--hair) border-box; box-shadow: 0 24px 60px -30px rgba(0,213,255,.4); }
.faq summary { padding: 20px 0; }
.faq summary .ic { box-sizing: content-box; padding: 7px; border-radius: 50%; background: rgba(0,213,255,.08); box-shadow: inset 0 0 0 1px rgba(0,213,255,.3); width: 16px; height: 16px; }
.faq details p { padding-inline-start: 46px; }

/* founder — framed photo, big quote mark, a small signature line */
.founder img { border-radius: 28px; box-shadow: 0 0 0 1px rgba(150,162,189,.18), 0 0 0 10px rgba(108,99,255,.06), 0 50px 100px -40px rgba(108,99,255,.7); }
.founder blockquote { position: relative; margin: 0; }
.founder blockquote::before { content: "”"; position: absolute; top: -.55em; inset-inline-start: -.1em; font: 700 3.4em/1 var(--en); color: rgba(108,99,255,.35); pointer-events: none; }
.founder__name { display: inline-flex; flex-direction: column; padding-inline-start: 14px; border-inline-start: 2px solid; border-image: linear-gradient(#00d5ff, #6c63ff) 1; }

/* contact — one lit glass panel around the call to action */
.contact { padding-block: clamp(90px, 14vh, 170px); }
.contact::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: min(1040px, calc(100% - 2 * var(--gutter))); height: calc(100% - clamp(120px, 18vh, 220px)); transform: translate(-50%, -50%);
  border-radius: 36px; background: linear-gradient(rgba(13,16,32,.55), rgba(13,16,32,.55)) padding-box, var(--hair) border-box; border: 1px solid transparent; pointer-events: none; }
.contact > * { z-index: 1; }
.contact__title { font-size: clamp(36px, 5.2vw, 88px); text-wrap: balance; }
.contact .btn--xl { min-height: 60px; }

/* the home «أعمالنا» status pills match the gallery */
.laptop::before { align-self: flex-start; width: fit-content; }
.work__all { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(rgba(0,213,255,.06), rgba(0,213,255,.06)) padding-box, var(--hair) border-box; }
.work__all .ic { width: 16px; height: 16px; }

/* story cards + tier cards + footer columns share the glass edge */
.story__card, .wk-tiergrid .card { border: 1px solid transparent; background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(135deg, rgba(150,162,189,.25), rgba(150,162,189,.08)) border-box; }
.story__card:hover, .wk-tiergrid .card:hover { background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--hair) border-box; }
.foot__grid > * { padding: 20px; border-radius: 20px; background: rgba(245,247,255,.02); box-shadow: inset 0 0 0 1px rgba(150,162,189,.08); }
.steps::before, .steps::after { display: none; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 44px; inset-inline-end: -12px; width: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(0,213,255,.7), rgba(108,99,255,.7)); box-shadow: 0 0 8px rgba(0,213,255,.6); }
.founder blockquote::before { top: -.95em; inset-inline-start: auto; inset-inline-end: 0; font-size: 2.6em; color: rgba(108,99,255,.28); }
.founder .eyebrow { margin-bottom: 26px; }
@media (max-width: 1000px) { .steps li::after { display: none; } }

/* «قصة حقيقية» v2: pinned horizontal story on desktop, swipe + arrows + dots on phones */
#story-real.is-pinned { min-height: 100vh; padding-block: clamp(80px, 11vh, 120px) 40px; display: flex; flex-direction: column; justify-content: center; overflow: clip; }
#story-real.is-pinned .section__head { margin-bottom: 34px; }
#story-real.is-pinned .story__track { overflow: visible; scroll-snap-type: none; padding-bottom: 10px; will-change: transform; }
.story__card { flex-basis: min(380px, 82vw); transition: transform .5s var(--ease), box-shadow .5s; }
.story__card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -30px rgba(0,213,255,.45); }
.story__art { height: 190px; }
.story__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.story__arrow { width: 44px; height: 44px; border: 1px solid transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--white);
  background: linear-gradient(rgba(13,16,32,.7), rgba(13,16,32,.7)) padding-box, var(--hair) border-box; }
.story__arrow .ic { width: 18px; height: 18px; color: var(--cyan); }
html[dir="rtl"] .story__arrow[data-d="1"] .ic, html[dir="ltr"] .story__arrow[data-d="-1"] .ic { transform: scaleX(-1); }
.story__dots { display: flex; gap: 8px; }
.story__dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(150,162,189,.3); cursor: pointer; transition: width .4s var(--ease), background .4s; }
.story__dots i.is-on { width: 28px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
#story-real.is-pinned { padding-block: 96px 28px; }
#story-real.is-pinned .section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: end; column-gap: 40px; max-width: none; margin-bottom: 26px; }
#story-real.is-pinned .section__head .eyebrow { grid-column: 1 / -1; justify-self: start; }
#story-real.is-pinned .section__head h2 { font-size: clamp(30px, 3.3vw, 52px); margin: 0; }
#story-real.is-pinned .section__head .lead { margin: 0; font-size: 16px; }
#story-real.is-pinned .story__art { height: 160px; }
#story-real.is-pinned .story__nav { margin-top: 14px; }

/* «اجتماع نوفا» — hero launcher card (critical: above the fold; the room itself lives in meeting.css, loaded async). */
.meet-card {
  position: absolute; z-index: 3; inset-inline-end: var(--gutter); top: 34vh; width: min(380px, 30vw);
  display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 18px 20px 18px 18px;
  border-radius: 22px; background: linear-gradient(160deg, rgba(20, 24, 46, .78), rgba(9, 11, 19, .7));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(108, 99, 255, .35), 0 30px 90px -30px rgba(108, 99, 255, .65), 0 0 0 1px rgba(0, 213, 255, .06);
  cursor: pointer; text-align: start; color: inherit; font: inherit; border: 0;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.meet-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.meet-card:hover, .meet-card:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0, 213, 255, .45), 0 40px 110px -30px rgba(0, 213, 255, .45); }
.meet-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.meet-card__orb { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(0, 213, 255, .28), rgba(108, 99, 255, .12) 55%, transparent 70%); }
.meet-card__orb img { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(0, 213, 255, .7)); animation: meet-breathe 3.2s ease-in-out infinite; }
.meet-card__orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 213, 255, .3); border-top-color: rgba(0, 213, 255, .95); animation: core-spin 5s linear infinite; }
.meet-card__orb i + i { inset: -8px; border-color: rgba(108, 99, 255, .2); border-inline-end-color: rgba(108, 99, 255, .8); animation-duration: 8s; animation-direction: reverse; }
.meet-card__live { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #8FF0FF; letter-spacing: .02em; }
.meet-card__live i, .meet__live i { width: 8px; height: 8px; border-radius: 50%; background: #2FE38A; box-shadow: 0 0 0 0 rgba(47, 227, 138, .6); animation: meet-ping 1.8s infinite; }
.meet-card__live b { font: 600 10px var(--en); padding: 1px 6px; border-radius: 6px; background: rgba(0, 213, 255, .14); color: var(--cyan); }
.meet-card__h { font-size: 1.12rem; line-height: 1.35; margin-top: 4px; }
.meet-card__p { grid-column: 1 / -1; color: var(--gray); font-size: .9rem; line-height: 1.6; }
.meet-card__go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(0, 213, 255, .18), rgba(108, 77, 255, .28)); box-shadow: inset 0 0 0 1px rgba(0, 213, 255, .35); font-weight: 600; }
.meet-card__go .ic { width: 18px; height: 18px; }
.meet-card__steps { grid-column: 1 / -1; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .72rem; color: var(--gray); flex-wrap: wrap; }
.meet-card__steps li { padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
html[dir="rtl"] .meet-card__go .ic--dir { transform: scaleX(-1); }
@media (max-width: 1100px) { .meet-card { width: min(340px, 36vw); } }
@media (max-width: 900px) { .meet-card { position: relative; inset: auto; top: auto; width: 100%; margin-top: 20px; } }

@keyframes meet-ping { 0% { box-shadow: 0 0 0 0 rgba(47, 227, 138, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(47, 227, 138, 0); } }
@keyframes meet-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .meet-card__orb img, .meet-card__orb i, .meet-card__live i { animation: none; } }

/* Closing gateway (R080): «ابدأ من هنا» is transparent and the 3D world returns behind it at the Nova-mark frame
   (main.js story()); the copy sits beside the mark like the story chapters. Phones: the mark on top, the copy below. */
.contact.contact--portal { background: transparent; min-height: 100vh; display: grid; align-content: center; justify-items: start; text-align: start; }
.contact--portal::after { display: none; }
.contact--portal::before { left: auto; inset-inline-end: -12vw; top: 50%; width: min(980px, 90vw); background: radial-gradient(closest-side, rgba(9,11,19,.92), rgba(9,11,19,.6) 55%, transparent); animation: none; }
.contact--portal > * { max-width: 620px; }
.contact--portal .contact__title { margin-inline: 0; font-size: clamp(34px, 4.4vw, 72px); }
.contact--portal .lead { margin-inline: 0; }
.contact--portal .cta-row--center { justify-content: flex-start; flex-wrap: wrap; }
.contact--portal .btn--xl.btn--ghost { min-height: 52px; font-size: .95em; }
@media (max-width: 760px) {
  .contact.contact--portal { min-height: 115vh; align-content: end; padding-top: 58vh; padding-bottom: 80px; }
  .contact--portal::before { inset-inline-end: -40vw; top: 72%; width: 160vw; }
  .contact--portal .btn--xl { min-height: 52px; font-size: 16px; }
  .contact--portal a[href^="mailto"] { display: none; } /* the email is in the footer right below; the copy clears the mark */
  .contact--portal .contact__title { font-size: clamp(30px, 8.4vw, 40px); }
}

/* ===== «كيف نعمل» as a live production line (assets/js/pipeline.js · R040 + R094) ===== */
.pl--pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 84px 28px; box-sizing: border-box; }
.pl--pin .section__head { margin-bottom: 18px; }
.pl--pin .steps li { padding-block: 16px 14px; }
.pl--pin .steps li > span.mono { font-size: 24px; }
.pl--pin .section__head h2 { font-size: clamp(30px, 3.4vw, 52px); }
.pl-screen { position: relative; height: clamp(210px, 30vh, 290px); max-width: 760px; width: 100%; margin: 0 auto 26px; flex: none; border-radius: 22px;
  background: linear-gradient(170deg, rgba(20,24,46,.85), rgba(11,13,24,.8)); box-shadow: inset 0 0 0 1px rgba(108,99,255,.3), 0 40px 120px -40px rgba(0,213,255,.35); overflow: hidden; }
.pl-screen__glow { position: absolute; inset: -40% -10% auto; height: 80%; background: radial-gradient(closest-side, rgba(108,99,255,.25), transparent); pointer-events: none; }
.pl-art { position: absolute; inset: 0; padding: 22px 26px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.pl-art.is-active { opacity: 1; transform: none; }
.pl--pin .steps li { transition: opacity .4s, transform .5s var(--ease); opacity: .45; }
.pl--pin .steps li.is-done { opacity: .75; }
.pl--pin .steps li.is-on { opacity: 1; transform: translateY(-6px); }
.pl--pin .steps { margin-top: 34px; }
.pl--pin .steps::before, .pl--pin .steps::after { display: block; top: -20px; inset-inline: 2%; height: 2px; }
.pl--pin .steps li::after { display: none; }
.pl--pin .steps li.is-on { box-shadow: 0 0 0 1px rgba(0,213,255,.55), 0 30px 60px -26px rgba(0,213,255,.55); }
.pl--pin .steps li.is-on .steps__ic { color: #fff; box-shadow: 0 0 22px rgba(0,213,255,.6); }
.pl-pulse { position: absolute; top: -19px; inset-inline-start: calc(2% + var(--fill, 0) * 96%); width: 14px; height: 14px; margin-top: -7px; margin-inline-start: -7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(0,213,255,.35), 0 0 22px 6px rgba(0,213,255,.75); z-index: 2; pointer-events: none; }

/* the small screens (shared by the pinned screen and the inline cards) */
.pa { height: 100%; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.pa__top { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--white); }
.pa__top span { margin-inline-start: auto; font-weight: 400; font-size: 12px; color: var(--gray); }
.pa__live { width: 8px; height: 8px; border-radius: 50%; background: #2FE38A; box-shadow: 0 0 0 0 rgba(47,227,138,.5); animation: pa-ping 1.6s infinite; }
.pa-call__people { display: flex; align-items: center; gap: 12px; }
.pa-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(245,247,255,.07); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.pa-av--nova { font: 800 18px var(--en); color: #fff; background: linear-gradient(135deg, #00D5FF, #6C4DFF); box-shadow: 0 0 18px rgba(0,213,255,.45); }
.pa-wave { flex: 1; height: 40px; display: flex; align-items: center; gap: 4px; }
.pa-wave i { flex: 1; height: 95%; transform: scaleY(.32); border-radius: 3px; background: linear-gradient(var(--cyan), var(--violet)); }
.is-active .pa-wave i, .is-on .pa-wave i { animation: pa-wave 1.1s ease-in-out infinite alternate; }
.pa-wave i:nth-child(3n) { animation-delay: -.3s; } .pa-wave i:nth-child(3n+1) { animation-delay: -.7s; } .pa-wave i:nth-child(4n) { animation-delay: -.5s; }
.pa-bub { display: grid; gap: 6px; }
.pa-bub p { justify-self: start; max-width: 80%; padding: 6px 12px; border-radius: 12px; background: rgba(245,247,255,.06); font-size: 13px; color: #DCE1F2; opacity: 0; transform: translateY(6px); }
.pa-bub p.me { justify-self: end; background: rgba(108,99,255,.22); }
.is-active .pa-bub p, .is-on .pa-bub p { animation: pa-in .5s var(--ease) forwards; }
.pa-bub p:nth-child(2) { animation-delay: .6s !important; } .pa-bub p:nth-child(3) { animation-delay: 1.2s !important; }
.pa-bars { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(9,11,19,.5); overflow: hidden; }
.pa-bars i { flex: 1; height: 6%; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--violet), rgba(108,99,255,.25)); transition: height .9s var(--ease) var(--d), background .4s 1s; }
.is-active .pa-bars i, .is-on .pa-bars i { height: var(--h); }
.is-active .pa-bars i.leak, .is-on .pa-bars i.leak { background: linear-gradient(#ff5f6d, rgba(229,72,77,.3)); }
.pa-scan { position: absolute; top: 0; bottom: 0; width: 3px; inset-inline-start: 0; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); opacity: 0; }
.is-active .pa-scan, .is-on .pa-scan { animation: pa-scan 1.8s var(--ease) .3s forwards; }
.pa-leaks { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-leaks span { padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #ffb3b6; box-shadow: inset 0 0 0 1px rgba(229,72,77,.5); opacity: 0; }
.is-active .pa-leaks span, .is-on .pa-leaks span { animation: pa-in .4s var(--ease) var(--d) forwards; }
.pa-doc { display: grid; gap: 6px; }
.pa-doc i { height: 6px; border-radius: 4px; background: rgba(245,247,255,.1); } .pa-doc i.s { width: 60%; }
.pa-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pa-rows li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(9,11,19,.5); box-shadow: inset 0 0 0 1px var(--line); }
.pa-rows b { flex: 1; height: 5px; border-radius: 3px; background: rgba(245,247,255,.08); }
.pa-rows em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: #1f9d5c; transform: scale(0); }
.is-active .pa-rows em, .is-on .pa-rows em { animation: pa-pop .4s cubic-bezier(.3,1.6,.5,1) var(--d) forwards; }
.pa-sign { margin-top: auto; font-size: 12px; color: var(--cyan); }
.pa-browser { flex: 1; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgba(9,11,19,.6); box-shadow: inset 0 0 0 1px var(--line); }
.pa-url { display: flex; align-items: center; gap: 5px; padding: 7px 10px; font-size: 11px; color: var(--gray); background: rgba(245,247,255,.04); }
.pa-url i { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,247,255,.2); } .pa-url span { margin-inline-start: 8px; direction: ltr; }
.pa-site { flex: 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; padding: 10px; }
.pa-site b, .pa-site .b3 b { display: block; border-radius: 6px; opacity: 0; transform: translateY(10px); }
.pa-site .b1 { height: 10px; background: rgba(245,247,255,.15); }
.pa-site .b2 { min-height: 40px; background: linear-gradient(120deg, rgba(0,213,255,.35), rgba(108,77,255,.45)); }
.pa-site .b3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pa-site .b3 b { height: 26px; background: rgba(245,247,255,.1); }
.pa-site .b4 { height: 8px; width: 40%; background: rgba(245,247,255,.1); }
.is-active .pa-site b, .is-on .pa-site b { animation: pa-in .45s var(--ease) forwards; }
.pa-site .b2 { animation-delay: .25s !important; } .pa-site .b3 b:nth-child(1) { animation-delay: .45s !important; } .pa-site .b3 b:nth-child(2) { animation-delay: .55s !important; } .pa-site .b3 b:nth-child(3) { animation-delay: .65s !important; } .pa-site .b4 { animation-delay: .85s !important; }
.pa-code { font-family: var(--mono); font-size: 11px; color: var(--cyan); white-space: nowrap; overflow: hidden; }
.pa-bento { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.pa-bento > div { border-radius: 12px; background: rgba(9,11,19,.5); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 10px; min-width: 0; }
.pa-chart { grid-row: span 2; display: flex; flex-direction: column; font-size: 12px; color: var(--gray); }
.pa-chart svg { flex: 1; width: 100%; } .pa-chart path { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 260; stroke-dashoffset: 260; filter: drop-shadow(0 0 6px rgba(0,213,255,.6)); }
.is-active .pa-chart path, .is-on .pa-chart path { animation: pa-draw 1.6s var(--ease) .2s forwards; }
.pa-tg { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; }
.pa-tg i { width: 30px; height: 17px; border-radius: 999px; background: rgba(245,247,255,.12); position: relative; flex: none; transition: background .3s .6s; }
.pa-tg i::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: inset-inline-start .3s .6s; }
.is-active .pa-tg i, .is-on .pa-tg i { background: #1f9d5c; } .is-active .pa-tg i::after, .is-on .pa-tg i::after { inset-inline-start: 15px; }
.pa-mini { display: none; }
@keyframes pa-ping { 0% { box-shadow: 0 0 0 0 rgba(47,227,138,.5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(47,227,138,0); } }
@keyframes pa-wave { from { transform: scaleY(.19); } to { transform: scaleY(1); } }
@keyframes pa-in { to { opacity: 1; transform: none; } }
@keyframes pa-pop { to { transform: scale(1); } }
@keyframes pa-scan { 0% { opacity: 1; inset-inline-start: 0; } 90% { opacity: 1; } 100% { opacity: 0; inset-inline-start: 100%; } }
@keyframes pa-draw { to { stroke-dashoffset: 0; } }

/* inline (phones, smaller screens, reduced motion): a small screen under each step */
.pl--inline .steps li { opacity: 1; }
.pl-mini { min-height: 150px; margin-top: 14px; padding: 14px; border-radius: 16px; background: linear-gradient(170deg, rgba(20,24,46,.85), rgba(11,13,24,.8)); box-shadow: inset 0 0 0 1px rgba(108,99,255,.25); overflow: hidden; }
.pl-mini .pa { font-size: 12px; gap: 8px; height: auto; }
.pl-mini .pa-bars { height: 96px; flex: none; } .pl-mini .pa-browser { min-height: 120px; flex: none; } .pl-mini .pa-bento { min-height: 120px; flex: none; }
.pl-mini .pa-bub p { font-size: 12px; } .pl-mini .pa-bub p:nth-child(3) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .pa-chart path { stroke-dashoffset: 0; } .pa-bars i { height: var(--h); } .pa-scan { display: none; }
}

/* ===== Headings that build themselves + section rules (assets/js/headings.js · R004 + R020) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sx-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; grid-column: 1 / -1; }
.sx-rule i { flex: 1; height: 1px; max-width: 420px; background: linear-gradient(90deg, rgba(0,213,255,.85), rgba(108,99,255,.5) 60%, transparent); transform-origin: right; box-shadow: 0 0 10px rgba(0,213,255,.35); }
[dir="rtl"] .sx-rule i { background: linear-gradient(270deg, rgba(0,213,255,.85), rgba(108,99,255,.5) 60%, transparent); }
[dir="ltr"] .sx-rule i { transform-origin: left; }
.sx-rule span { font-size: 12px; color: var(--gray); letter-spacing: .12em; direction: ltr; }
.kt-caret { display: inline-block; width: 3px; height: .9em; margin-inline: .08em; vertical-align: -.08em; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.kt-caret.is-done { animation: kt-blink .5s steps(1) 3; }
.split .w.kt-key { will-change: transform; }
.split .w.kt-key.is-swept { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--white) 0 38%, #00D5FF 46%, #6C63FF 54%, var(--white) 62% 100%); background-size: 320% 100%; background-position: 100% 0; animation: kt-sweep 1.3s var(--ease) forwards; }
@keyframes kt-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes kt-blink { 50% { opacity: 0; } }

/* ===== «شو مجالك؟» field picker (assets/js/fields.js) ===== */
.fx { margin-top: 18px; max-width: 100%; }
.fx__q { margin: 0 0 8px; font-size: 13px; color: var(--gray); }
.fx__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.fx__chips::-webkit-scrollbar { display: none; }
.fx__chips button { flex: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--white); cursor: pointer; white-space: nowrap;
  background: linear-gradient(rgba(245,247,255,.04), rgba(245,247,255,.04)) padding-box, var(--hair) border-box; border: 1px solid transparent; transition: background .25s, box-shadow .25s, color .25s; }
.fx__chips button:first-child { margin-inline-start: 12px; }
.fx__chips button:hover { background: linear-gradient(rgba(0,213,255,.1), rgba(0,213,255,.1)) padding-box, var(--hair) border-box; }
.fx__chips button[aria-checked="true"] { color: #fff; background: linear-gradient(rgba(108,99,255,.45), rgba(0,213,255,.25)) padding-box, var(--hair) border-box; box-shadow: 0 0 18px rgba(0,213,255,.3); }
.fx__chips button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* desktop: every field visible at once (the English row lost «Offices & services» past the edge at 1440) */
@media (min-width: 1024px) { .fx__chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } .fx__chips button:first-child { margin-inline-start: 0; } }
.fx__say { margin: 6px 0 0; min-height: 1.5em; font-size: 14px; color: var(--gray); }
.fx__say b { color: var(--white); font-weight: 600; }
.fx__say .ic { width: 14px; height: 14px; color: var(--cyan); vertical-align: -2px; }
.fx__meet { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 6px; padding: 5px 12px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--violet), #3F7BFF); }
.laptop.is-off, .wk-item.is-off { opacity: .38; filter: saturate(.4); transition: opacity .5s, filter .5s; }
.laptop.is-off:hover, .laptop.is-off:focus-visible, .wk-item.is-off:hover { opacity: 1; filter: none; }

/* ---------- Phones: no live blur over the moving scene ----------
   backdrop-filter re-blurs whatever is behind it every frame; over the 3D/static scene that is a full-screen cost on
   a phone GPU. On phones these surfaces use a near-opaque fill instead (they already read as solid panels). */
@media (max-width: 760px) {
  .nav.is-solid, .dock, .sound, .next-sec, .core__say, .editor, .demo, .qa.is-open > .qa__panel,
  .nav:not(.is-solid) .nav__lang, .nav:not(.is-solid) .nav__search,
  .btn, .steps li, .nova-ai__launcher { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.is-solid { background: rgba(9,11,19,.94); }
  .dock { background: rgba(13,16,32,.97); }
  .sound { background: rgba(13,16,32,.94); }
  .qa.is-open > .qa__panel { background: rgba(13,16,32,.96); }
}

/* ---------- «calm» trial (?v=calm) — easier on the eyes, fewer moving parts ---------- */
.v-calm .sound { display: none !important; }
.v-calm:has(.core) .nova-ai__launcher { display: none !important; } /* one button: where the Nova orb exists it opens «اسأل نوفا» (pages without the orb keep the launcher) */
.v-calm #story .panel { opacity: calc(var(--fi, 1) * var(--fo, 1)); }  /* one chapter on screen at a time (main.js) */
.v-calm .vignette {                                                       /* a calmer, darker reading side */
  background:
    linear-gradient(to left, rgba(9,11,19,.96) 0%, rgba(9,11,19,.9) 32%, rgba(9,11,19,.5) 48%, rgba(9,11,19,0) 64%),
    radial-gradient(120% 90% at 40% 50%, transparent 50%, rgba(9,11,19,.78) 100%);
}
.v-calm[dir="ltr"] .vignette, [dir="ltr"].v-calm .vignette {
  background:
    linear-gradient(to right, rgba(9,11,19,.96) 0%, rgba(9,11,19,.9) 32%, rgba(9,11,19,.5) 48%, rgba(9,11,19,0) 64%),
    radial-gradient(120% 90% at 60% 50%, transparent 50%, rgba(9,11,19,.78) 100%);
}
.v-calm .panel > p, .v-calm .ticks li { color: #D2D8E6; }
.v-calm .core__ring { animation-duration: 16s; }
.v-calm .core__ring--b { animation-duration: 24s; }
.v-calm .core__orb::after { animation-duration: 7s; }
.v-calm .next-sec .ic { animation: none; }
@media (max-width: 760px) {
  .v-calm .core { display: none !important; } /* phones already have «اسأل نوفا» in the dock — one button, not two */
  .v-calm .vignette, .v-calm[dir="ltr"] .vignette { background: linear-gradient(to top, rgba(9,11,19,.97) 0%, rgba(9,11,19,.86) 44%, rgba(9,11,19,0) 70%); }
}

/* ---------- Phone pass (2026-10-09, Hamza tested on his phone) ---------- */
@media (max-width: 760px) {
  /* live experience bar: the site name was cut to «شا…» — the WhatsApp CTA becomes an icon so the title has room */
  .xp__bar { gap: 8px; padding-inline: 10px; }
  .xp__mark { width: 24px; height: 24px; }
  .xp__title { font-size: 14px; }
  .xp__cta { width: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .xp__cta span { display: none; }
  .xp__cta .ic { margin: 0; }
  .xp__nav { gap: 4px; }
  /* service cards: the AI suggestion stays inside the picture area instead of covering the title and text */
  .bento .card .card__ai { inset: 22px 22px auto 22px; height: 150px; min-height: 0; overflow: hidden; padding: 12px; gap: 6px; }
  .card__ai-t { font-size: 13px; line-height: 1.55; min-height: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card.is-ai .card__viz { opacity: 0; }
  /* hero: both buttons sit above the dock on the first screen */
  .hero { margin-top: 32vh; }
  /* closing: the copy stays readable over the Nova mark */
  .contact--portal .contact__title, .contact--portal .lead, .contact--portal .eyebrow { text-shadow: 0 2px 14px rgba(9,11,19,.95), 0 0 34px rgba(9,11,19,.9); }
  /* footer links were 25px tall — thumb-sized now */
  .foot__col { gap: 2px; }
  .foot__col a { min-height: 44px; }
  .card__more { min-height: 44px; }
  /* tiny 10px labels → readable */
  .btn__tag { font-size: 11px; }
  .ai-badge { font-size: 11px; }
  /* the «what does AI do here?» tip opened off-screen; on phones it opens from the badge's end edge and on tap */
  .ai-badge__tip, html[dir="ltr"] .ai-badge__tip { width: min(240px, calc(100vw - 48px)); inset-inline-start: auto; inset-inline-end: -8px; translate: 0 6px; }
  .ai-badge:focus .ai-badge__tip, .ai-badge:hover .ai-badge__tip, html[dir="ltr"] .ai-badge:focus .ai-badge__tip { opacity: 1; translate: 0 0; }
  .dock a, .dock button { font-size: 12px; }
}

/* English lines inside Arabic pages (the footer tagline): read left-to-right so the full stop sits at the end,
   still aligned with the Arabic text on the right. */
html[dir="rtl"] p[lang="en"] { direction: ltr; unicode-bidi: isolate; text-align: end; }

/* ---------- Comfort pass (Hamza, 2026-10-13): fewer things on screen at once, labels you can read ----------
   1. Desktop hero: the glass «60-second meeting» card is the one invitation to Nova; the second button in the CTA
      row said the same thing. Phones keep the button (there the card sits below the first screen).
   2. The «next section» pill and the chapter rail are gone: scrolling is obvious, they were two more floating things.
   4. Labels people actually read go up one step; the mock-UI drawings inside cards stay small on purpose. */
@media (min-width: 901px) { .hero .cta-row .meet__open { display: none; } }
.next-sec, .rail { display: none !important; }
.card__n, .sx-rule span, .trust, .foot__h, .vf__cap, .card__ai-l, .pl__tag, .demo__label,
.nav__progress span, .cmdk__g, .cmdk__hint, .xp__title .mono, .meet-card__steps { font-size: 13px; }
.sx-rule span { color: #B4BDD2; }
.xp__hint { font-size: 12.5px; opacity: .9; }
.trust { color: #A9B3C9; }
/* «أنظمة شغّالة» — running systems before the websites (Hamza 2026-10-14). Text cards: facts from business/05 only. */
.wk-sys { padding-top: clamp(28px, 5vh, 64px); padding-bottom: 0; }
.wk-sys__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wk-sys__grid .card { justify-content: flex-start; min-height: 0; gap: 10px; }
.wk-sys__grid h3 { margin: 0; font-size: clamp(18px, 1.5vw, 21px); }
.wk-sys__grid p { margin: 0; color: #C9D0E2; font-size: 15px; line-height: 1.7; }
.wk-sys__grid .wk-sys__tag { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-size: 12px; letter-spacing: .04em; }
.wk-sys__tag .ic { width: 16px; height: 16px; flex: none; }
.wk-sys__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--white); font-weight: 600; font-size: 14px; }
.wk-sys__go .ic { width: 16px; height: 16px; }
@media (max-width: 1100px) { .wk-sys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wk-sys__grid { grid-template-columns: 1fr; } }
/* Home: the strip sits on the 3D world (between the hero and chapter 1) — solid cards so it reads over any scene. */
.wk-sys--home { position: relative; z-index: 2; }
.wk-sys--home .card { background: rgba(13, 16, 32, .9); }
.wk-sys__all { margin: 22px 0 0; }
.wk-sys__all a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cyan); font-weight: 600; }
.wk-sys__all .ic { width: 16px; height: 16px; }
/* «أنظمة شغّالة» v2 (night cycle 4): the evidence is seen before it is read (R084/R086) — real screenshots where we have
   them (Playmaker, Wheel), an icon tile of the same height where we don't yet (no stand-in image). Phones: a swipeable row. */
.wk-sys__shot { margin: -6px -6px 6px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, rgba(108,99,255,.16), rgba(0,213,255,.06)), #0d1020; box-shadow: inset 0 0 0 1px var(--line); }
.wk-sys__shot { position: relative; }
.wk-sys__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* overlay: same iPhone Safari stretch as .laptop__screen img */
.wk-sys__shot--mark { display: grid; place-items: center; }
.wk-sys__shot--mark .ic { width: 44px; height: 44px; color: var(--cyan); opacity: .8; }
@media (max-width: 640px) {
  .wk-sys__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .wk-sys__grid::-webkit-scrollbar { display: none; }
  .wk-sys__grid > li { flex: 0 0 82%; scroll-snap-align: center; }
}
/* Service pages: the 14-day pilot right where the intent is (automation, AI assistant) — night cycle 5 */
.sv-pilot { padding-block: clamp(28px, 5vh, 56px); }
.sv-pilot__in { max-width: 920px; margin-inline: auto; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: linear-gradient(135deg, rgba(0,213,255,.10), rgba(108,99,255,.14)), rgba(13,16,32,.92); box-shadow: inset 0 0 0 1px rgba(0,213,255,.28), 0 30px 70px -40px rgba(108,99,255,.7); display: grid; gap: 12px; justify-items: start; }
.sv-pilot__in .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--cyan); }
.sv-pilot__in .eyebrow .ic { width: 16px; height: 16px; }
.sv-pilot__in h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); }
.sv-pilot__in p:not(.eyebrow) { margin: 0; color: #C9D0E2; max-width: 62ch; line-height: 1.8; }
.sv-pilot__in .btn { margin-top: 6px; }
/* Night cycle 9 (critic 8 #4, #5) — phones only.
   Chapter copy sat straight on the 3D papers (BUILD, AUTOMATE, the closing CTA read «بالكاد»): a soft dark scrim under
   each chapter panel. The hero keeps its approved look. */
@media (max-width: 760px) {
  #story .chapter:not(.chapter--hero) .panel { padding: 18px 16px; margin-inline: -8px; border-radius: 18px;
    background: linear-gradient(180deg, rgba(9,11,19,.62), rgba(9,11,19,.9) 26%, rgba(9,11,19,.9)); box-shadow: inset 0 0 0 1px rgba(150,162,189,.08); }
  /* footer was one long column (~1200px): brand on top, the two link columns side by side */
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col { gap: 4px; }
  .foot__col a, .foot__col p { min-height: 40px; font-size: 14px; }
}

/* services bento: a real example from our work on every card (2026-10-26) */
.bento .card > .card__shot { background: #0D1020; }
.bento .card > .card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bento .card:hover > .card__shot img { transform: scale(1.04); }
.bento .card > .card__ex { margin-top: 12px; font-size: 13px; color: var(--cyan, #00D5FF); }
.bento .card > .card__ex span { color: #96A2BD; }
@media (prefers-reduced-motion: reduce) { .bento .card > .card__shot img { transition: none; } }

/* ===================== Home v5 (Hamza 2026-10-26) =====================
   Hero «بنعملك [موقعك].» with the matching example on the side and the nine services as chips;
   services grouped in three needs. The 3D world stays as a dimmed Nova-mark backdrop (main.js story()). */
.hx { position: relative; z-index: 1; min-height: 100svh; display: flex; align-items: center; padding: clamp(110px, 15vh, 150px) var(--gutter) clamp(48px, 8vh, 90px); }
.hx__in { width: 100%; max-width: 1400px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hx .hero { position: static; top: auto; width: auto; margin: 0; padding: 0; }
.hx__title { font-size: clamp(42px, 5.2vw, 88px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.hx__word { position: relative; display: inline-grid; vertical-align: bottom; }
.hx__word > span { grid-area: 1 / 1; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em;
  opacity: 0; translate: 0 .45em; filter: blur(6px); transition: opacity .5s var(--ease), translate .5s var(--ease), filter .5s var(--ease); }
.hx__word > span.is-on { opacity: 1; translate: 0 0; filter: none; }
.hx__word > span.is-out { opacity: 0; translate: 0 -.45em; filter: blur(6px); }
.hx__stop { display: none; } /* the word box is as wide as the longest word — a full stop after it floats away from short words */
.hx .lead { max-width: 30em; }
.hx .cta-row { margin-top: 30px; }
.hx__chips { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.hx__chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #C9D0E2; text-decoration: none;
  background: rgba(245,247,255,.04); box-shadow: inset 0 0 0 1px rgba(245,247,255,.12); transition: color .3s, background .3s, box-shadow .3s, transform .3s var(--ease); }
.hx__chips a .ic { width: 16px; height: 16px; color: var(--gray); transition: color .3s; }
.hx__chips a:hover, .hx__chips a:focus-visible, .hx__chips a.is-on { color: var(--white); background: rgba(0,213,255,.1); box-shadow: inset 0 0 0 1px rgba(0,213,255,.55), 0 10px 30px -16px rgba(0,213,255,.7); }
.hx__chips a.is-on .ic, .hx__chips a:hover .ic { color: var(--cyan); }
.hx__chips a:hover { transform: translateY(-2px); }
.hx__meet { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--gray); cursor: pointer; }
.hx__meet .ic { width: 16px; height: 16px; color: var(--violet); }
.hx__meet:hover span { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

.hx__show { position: relative; aspect-ratio: 16 / 11; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px rgba(245,247,255,.1), 0 40px 120px -40px rgba(0,213,255,.35), 0 30px 80px -30px rgba(108,99,255,.4); overflow: hidden; isolation: isolate; }
.hx__label { position: absolute; z-index: 3; top: 16px; inset-inline-start: 18px; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .08em; color: var(--white);
  padding: 6px 12px; border-radius: 999px; background: rgba(9,11,19,.6); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(245,247,255,.12); }
.hx__label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hx__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.hx__slide.is-on { opacity: 1; transform: scale(1); z-index: 1; }
.hx__slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx__slide figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 22px 26px; display: grid; gap: 2px; background: linear-gradient(180deg, transparent, rgba(9,11,19,.92) 70%); }
.hx__slide figcaption .mono { font-size: 12px; color: var(--cyan); letter-spacing: .06em; }
.hx__slide figcaption b { font-size: clamp(18px, 1.6vw, 24px); }
.hx__slide figcaption em { font-style: normal; font-size: 13px; color: var(--gray); }
.hx__bar { position: absolute; z-index: 3; inset: auto 22px 12px; height: 2px; border-radius: 2px; background: rgba(245,247,255,.12); overflow: hidden; }
.hx__bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); animation: hx-bar 2.6s linear forwards; }
[dir="rtl"] .hx__bar i { transform-origin: right; }
.hx__bar.is-held i { animation-play-state: paused; }
@keyframes hx-bar { to { transform: scaleX(1); } }

/* chat mock (chatbot example — no screenshot of a client chat exists) */
.hx-chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 60px clamp(22px, 4vw, 54px) 120px;
  background: radial-gradient(80% 70% at 30% 20%, rgba(0,213,255,.14), transparent 60%), radial-gradient(70% 60% at 80% 90%, rgba(108,99,255,.2), transparent 60%), #0D1020; }
.hx-chat p { margin: 0; max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; }
.hx-chat__in { align-self: flex-start; background: rgba(245,247,255,.08); border-end-start-radius: 6px; }
.hx-chat__ai { align-self: flex-end; background: linear-gradient(135deg, rgba(0,213,255,.22), rgba(108,99,255,.28)); border-end-end-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,213,255,.35); }
.hx-chat__ai .mono { display: block; font-size: 11px; color: var(--cyan); margin-bottom: 4px; }
.hx-chat__ok { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0 !important; font-size: 12px !important; color: #7CF0C5; }
.hx-chat__ok .ic { width: 14px; height: 14px; }
.hx-chat--card { position: relative; padding: 18px; gap: 10px; justify-content: center; }
.hx-chat--card p { font-size: 13px; padding: 8px 12px; max-width: 88%; }

/* services, three needs */
.svx .section__head { margin-bottom: 40px; }
.svx__group + .svx__group { margin-top: 64px; }
.svx__gh { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.svx__gn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 16px; color: var(--cyan); background: rgba(0,213,255,.08); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35); }
.svx__gh h3 { font-size: clamp(24px, 2.2vw, 34px); }
.svx__gh p { margin: 2px 0 0; color: var(--gray); }
.bento--4 { grid-template-columns: repeat(4, 1fr); }
.bento--2 { grid-template-columns: repeat(2, 1fr); }
.bento .card > h4 { margin: 14px 0 6px; font-size: clamp(19px, 1.45vw, 23px); font-weight: 700; line-height: 1.3; }
.bento--2 .card > .card__viz { height: 220px; }

@media (max-width: 1100px) {
  .bento--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* phones/tablets: the example sits right under the promise, before the buttons */
  .hx { min-height: 0; padding-top: 104px; }
  .hx__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hx__copy { display: contents; }
  .hx__copy > .eyebrow { order: 1; align-self: flex-start; }
  .hx__title { order: 2; }
  .hx .lead { order: 3; }
  .hx__show { order: 4; margin-top: 24px; }
  .hx .cta-row { order: 5; }
  .hx__chips { order: 6; margin-top: 24px; }
  .hx__meet { order: 7; align-self: flex-start; }
}
@media (max-width: 760px) {
  .hx__title { font-size: clamp(38px, 11vw, 56px); }
  .hx__chips a { font-size: 14px; padding: 8px 12px; }
  .hx__show { aspect-ratio: 4 / 3; border-radius: 20px; }
  .bento--4, .bento--2 { grid-template-columns: 1fr; }
  .svx__group + .svx__group { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx__word > span, .hx__slide { transition: none; filter: none; }
  .hx__bar { display: none; }
}
/* automation example: four steps light up in turn */
.hx-flow { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 64px clamp(22px, 5vw, 70px) 132px;
  background: radial-gradient(70% 60% at 70% 20%, rgba(108,99,255,.18), transparent 60%), radial-gradient(60% 60% at 20% 90%, rgba(0,213,255,.14), transparent 60%), #0D1020; }
.hx-flow p { position: relative; margin: 0; display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 14px; font-size: clamp(14px, 1.1vw, 17px);
  background: rgba(245,247,255,.05); box-shadow: inset 0 0 0 1px rgba(245,247,255,.1); animation: hx-flow 4s var(--ease) calc(var(--k) * .6s) infinite; }
.hx-flow p:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 30px; top: 100%; width: 2px; height: 12px; background: linear-gradient(var(--cyan), transparent); }
.hx-flow .ic { width: 20px; height: 20px; color: var(--cyan); flex: none; }
@keyframes hx-flow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(245,247,255,.1); } 12%, 30% { box-shadow: inset 0 0 0 1px rgba(0,213,255,.7), 0 0 24px -6px rgba(0,213,255,.6); background: rgba(0,213,255,.1); } }
.card__shot .hx-flow { position: relative; height: 100%; padding: 14px 18px; gap: 6px; }
.card__shot .hx-flow p { padding: 5px 10px; font-size: 12.5px; gap: 8px; }
.card__shot .hx-flow p::after { display: none; }
.card__shot .hx-flow .ic { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .hx-flow p { animation: none; } }
/* captions never overlap during the cross-fade: the old one leaves first, the new one arrives after */
.hx__slide figcaption { transition: opacity .35s var(--ease) .3s, translate .45s var(--ease) .3s; }
.hx__slide:not(.is-on) figcaption { opacity: 0; translate: 0 8px; transition-duration: .15s; transition-delay: 0s; }