/* Elwekalah home v13.2 (/ and /ar/). Generated from the UX prototype's
 * v7.css (specs/home/prototype, sha256 f3980c52...) by keeping only the live
 * rules, in their original order (the last rule wins), as SPEC §0 asks.
 * Dropped: prototype chrome, the old banner (.stage .tilt .floor .ring .arc
 * .orbit .sat) and the ring's data-hot reaction (CHANGE-v13.2). To change
 * the look, change the UX package and regenerate; do not hand-edit below
 * the font block.
 *
 * Fonts, self-hosted from /assets/fonts/. DM Sans is one variable file for
 * 400-700, preloaded, optional: no late swap, so no second paint and no
 * shift. Tajawal (Arabic) is optional too: it never swaps after first
 * paint (#186). IBM Plex Mono, used for small labels only, is optional too (no late re-layout). */
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-700-latin.woff2") format("woff2"); font-weight: 400 700; font-display: optional; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Tajawal"; src: url("fonts/tajawal-400-arabic.woff2") format("woff2"); font-weight: 400; font-display: optional; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Tajawal"; src: url("fonts/tajawal-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: optional; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

/* Build-only: the language switch is a plain link here (a button in the prototype). */
a.lang { display: inline-flex; align-items: center; text-decoration: none; }

:root { color-scheme: dark; --navy: #111827; --gold: #DAA520; --bg: #0E1422; --bg-deep: #090D17; --surface: #111827; --surface-2: #18213A; --hair: rgba(236, 238, 242, .09); --hair-2: rgba(236, 238, 242, .15); --shell: rgba(236, 238, 242, .035); --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .06); --text: #ECEEF2; --muted: #A3ACBF; --accent: #DAA520; --accent-text: #E7B94A; --on-accent: #111827; --dot: rgba(218, 165, 32, .14); --glow: rgba(218, 165, 32, .20); --glow-strong: rgba(218, 165, 32, .34); --ok: #3FBF7F; --hot: #F08A6B; --focus: #F2C230; --font-sans: "DM Sans", "Tajawal", system-ui, sans-serif; --font-ar: "Tajawal", "DM Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --r-shell: 30px; --r-core: 24px; --r-m: 14px; --r-s: 9px; --spring: cubic-bezier(.32, .72, 0, 1); --t-fast: 180ms; --t-mid: 420ms; --t-slow: 420ms; --t-cycle: 4200ms; }
:root[data-theme="light"] { color-scheme: light; --bg: #F2F4F8; --bg-deep: #E6EAF1; --surface: #FFFFFF; --surface-2: #F1F3F8; --hair: rgba(17, 24, 39, .09); --hair-2: rgba(17, 24, 39, .16); --shell: rgba(17, 24, 39, .035); --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9); --text: #111827; --muted: #4A5568; --accent: #DAA520; --accent-text: #85600C; --on-accent: #111827; --dot: rgba(17, 24, 39, .10); --glow: rgba(218, 165, 32, .16); --glow-strong: rgba(218, 165, 32, .28); --ok: #0F6B3C; --hot: #9A3412; --focus: #1E5BD8; }
:root { --ring: rgba(236, 238, 242, .10); --ring-gold: rgba(218, 165, 32, .45); }
:root[data-theme="light"] { --ring: rgba(17, 24, 39, .16); --ring-gold: rgba(160, 112, 10, .55); }
/* UX T1: with scripts off there is no data-theme; follow the system. */
@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #F2F4F8; --bg-deep: #E6EAF1; --surface: #FFFFFF; --surface-2: #F1F3F8; --hair: rgba(17, 24, 39, .09); --hair-2: rgba(17, 24, 39, .16); --shell: rgba(17, 24, 39, .035); --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .9); --text: #111827; --muted: #4A5568; --accent: #DAA520; --accent-text: #85600C; --on-accent: #111827; --dot: rgba(17, 24, 39, .10); --glow: rgba(218, 165, 32, .16); --glow-strong: rgba(218, 165, 32, .28); --ok: #0F6B3C; --hot: #9A3412; --focus: #1E5BD8; --ring: rgba(17, 24, 39, .16); --ring-gold: rgba(160, 112, 10, .55); } }
html, body { background: var(--bg-deep); }
body { margin: 0; color: var(--text); font-family: var(--font-sans); min-height: 100dvh; display: flex; flex-direction: column; }
.site { container: site / inline-size; position: relative; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; flex: 1 0 auto; display: flex; flex-direction: column; align-self: stretch; width: 100%; }
.site > .skip, .site > .hdr, .site > main, .site > .foot { flex-shrink: 0; align-self: stretch; }
.site > main { width: 100%; margin-block-end: clamp(40px, 6cqi, 96px); }
.site:lang(ar) { font-family: var(--font-ar); }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site [hidden] { display: none !important; }
.site [id] { scroll-margin-top: 96px; }
.site a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 40; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: var(--r-s); font-weight: 700; text-decoration: none; }
.skip:focus-visible { top: 12px; outline-color: var(--text); }
.bezel { padding: 6px; border-radius: var(--r-shell); background: var(--shell); border: 1px solid var(--hair); }
.bezel > * { border-radius: var(--r-core); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font: 700 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast) var(--spring), background-color var(--t-fast) var(--spring), border-color var(--t-fast) var(--spring); }
.site:lang(ar) .btn { font-family: var(--font-ar); font-size: 16px; }
.btn:active { transform: scale(.98); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.site .btn--gold { background: var(--accent); color: var(--on-accent); }
.btn--gold:hover { background: #E4B53F; }
.btn--ghost { border-color: var(--hair-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); }
.btn--go { padding-inline-end: 6px; }
.btn__ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(17, 24, 39, .14); transition: transform var(--t-mid) var(--spring); }
.btn__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site[dir="rtl"] .btn__ic svg { transform: scaleX(-1); }
.btn--go:hover .btn__ic { transform: translateX(3px) scale(1.05); }
.site[dir="rtl"] .btn--go:hover .btn__ic { transform: translateX(-3px) scale(1.05); }
.btn--fake { cursor: default; pointer-events: none; }
.btn--locked { background: transparent; color: var(--muted); border: 1px dashed var(--hair-2); gap: 8px; }
.btn--locked svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hair-2); background: transparent; color: var(--text); cursor: pointer; transition: border-color var(--t-fast) var(--spring); }
.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 30px; height: 30px; }
.ico--sm svg { width: 13px; height: 13px; }
.ico:hover { border-color: var(--accent); }
.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--muted); font: 400 11px/1.5 var(--font-mono); white-space: nowrap; }
.site:lang(ar) .pill { font-family: var(--font-ar); font-size: 12px; }
.pill--beta { border-color: var(--accent); color: var(--accent-text); }
.hdr { position: sticky; top: 10px; z-index: 20; display: flex; align-items: center; gap: 14px; margin: 12px clamp(10px, 3cqi, 40px) 0; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--surface) 98%, transparent); box-shadow: var(--inner-hi), 0 10px 30px -18px rgba(0, 0, 0, .6); }
.site[dir="rtl"] .hdr { padding: 8px 16px 8px 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.m-ring { fill: var(--navy); stroke: var(--gold); stroke-width: 5; }
.m-needle { fill: #F1E6D2; }
.m-thread { fill: var(--gold); }
.brand__word { font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.brand__alt { display: none; font-family: var(--font-ar); font-weight: 700; color: var(--accent-text); font-size: 15px; }
.nav { display: none; gap: 4px; margin-inline-start: auto; }
.nav > a:not(.btn) { text-decoration: none; color: var(--muted); font-size: 15px; padding: 8px 14px; border-radius: 999px; transition: color var(--t-fast) var(--spring), background-color var(--t-fast) var(--spring); }
.nav > a:not(.btn):hover { color: var(--text); background: var(--shell); }
.nav__theme, .nav__talk { display: none; }
.nav__theme { align-items: center; gap: 12px; width: 100%; margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 20px; padding: 14px 16px; text-align: start; cursor: pointer; }
.nav__theme svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hdr__act { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.lang { font: 400 14px/1 system-ui, sans-serif; color: var(--text); background: transparent; border: 1px solid var(--hair-2); border-radius: 999px; height: 40px; padding: 0 14px; cursor: pointer; }
.site:lang(ar) .lang { font-family: var(--font-sans); }
.lang:hover { border-color: var(--accent); }
.hdr__talk { display: none; }
#theme-switch { display: none; }
.burger { position: relative; width: 16px; height: 10px; }
.burger i { position: absolute; inset-inline: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform var(--t-mid) var(--spring); }
.burger i:first-child { top: 0; }
.burger i:last-child { bottom: 0; }
.hdr[data-menu="open"] .burger i:first-child { transform: translateY(4.25px) rotate(45deg); }
.hdr[data-menu="open"] .burger i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.hdr[data-menu="open"] .nav { display: flex; flex-direction: column; gap: 0; position: absolute; inset-inline: 0; top: calc(100% + 8px); padding: 10px; border-radius: 24px; border: 1px solid var(--hair); background: var(--surface); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }
.hdr[data-menu="open"] .nav > a:not(.btn) { font-size: 20px; padding: 14px 16px; color: var(--text); animation: rise var(--t-mid) var(--spring) both; }
.hdr[data-menu="open"] .nav > a:not(.btn):nth-child(2) { animation-delay: 50ms; }
.hdr[data-menu="open"] .nav > a:not(.btn):nth-child(3) { animation-delay: 100ms; }
@container site (max-width: 559px) {
  .site:lang(ar) .brand__word { display: none; }
  .site:lang(ar) .brand__alt { display: inline; font-size: 18px; }
  .hdr[data-menu="open"] .nav__theme { display: flex; animation: rise var(--t-mid) var(--spring) both; animation-delay: 150ms; }
  .hdr[data-menu="open"] .nav__talk { display: inline-flex; align-self: stretch; justify-content: center; margin-block-start: 6px; animation: rise var(--t-mid) var(--spring) both; animation-delay: 200ms; }
}
@container site (min-width: 560px) {
  .hdr__talk { display: inline-flex; }
  #theme-switch { display: inline-grid; }
  .brand__alt { display: inline; }
}
@container site (min-width: 920px) {
  .hdr { max-width: 1180px; margin-inline: auto; }
  .nav { display: flex; }
  .menu { display: none; }
  .hdr__act { margin-inline-start: 10px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.i-play { display: none; }
[aria-pressed="true"] > .i-pause { display: none; }
[aria-pressed="true"] > .i-play { display: block; }
.site [data-p="0"], .site [data-i="0"] { --c: #DAA520; --n: 0; }
.site [data-p="1"], .site [data-i="1"] { --c: #C8102E; --n: 1; }
.site [data-p="2"], .site [data-i="2"] { --c: #12B5CB; --n: 2; }
.site [data-p="3"], .site [data-i="3"] { --c: #7B3FC4; --n: 3; }
.site [data-p="4"], .site [data-i="4"] { --c: #1FA35B; --n: 4; }
@keyframes rise { from { opacity: .001; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hero { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; text-align: center; min-height: max(640px, calc(100svh - 60px)); margin-block-start: -72px; padding: calc(clamp(56px, 7cqi, 112px) + 72px) clamp(16px, 4cqi, 48px) clamp(80px, 9cqi, 128px); view-timeline: --hero block; }
.halo { inset: 18%; background: radial-gradient(circle, var(--glow-strong) 0%, var(--glow) 32%, transparent 66%); }
.r1 { inset: 4%; border-color: var(--ring-gold); }
.r2 { inset: 13%; }
.r3 { inset: 22%; }
.r4 { inset: 31%; border-style: dashed; }
.beam { inset: auto -22% 9% -22%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); box-shadow: 0 0 24px var(--glow-strong); }
.hero__copy { position: relative; display: grid; justify-items: center; gap: 26px; max-width: 60rem; min-width: 0; }
.hero h1 { margin: 0; font-weight: 700; letter-spacing: -.055em; line-height: .93; font-size: clamp(3rem, 10.6cqi, 8.4rem); text-wrap: balance; overflow-wrap: anywhere; }
.site:lang(ar) .hero h1 { letter-spacing: 0; line-height: 1.2; font-size: clamp(2.6rem, 9cqi, 6.4rem); }
.sub { margin: 0; color: var(--muted); font-size: clamp(17px, 2cqi, 20px); max-width: 34rem; }
.site:lang(ar) .sub { font-size: clamp(18px, 2.1cqi, 21px); }
.ask { position: relative; z-index: 6; display: flex; align-items: center; gap: 10px; width: min(100%, 580px); padding: 7px; padding-inline-start: 18px; border-radius: 999px; border: 1px solid var(--hair-2); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--inner-hi), 0 0 0 7px var(--shell), 0 26px 60px -30px rgba(0, 0, 0, .85); transition: border-color var(--t-fast) var(--spring), box-shadow var(--t-mid) var(--spring); text-align: start; }
.ask:focus-within { border-color: var(--accent); box-shadow: var(--inner-hi), 0 0 0 7px var(--glow), 0 26px 60px -30px rgba(0, 0, 0, .85); }
.ask:focus-within .ask__in:focus-visible { outline: none; }
.ask__ic svg, .ask__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ask__ic { color: var(--muted); display: inline-grid; }
.ask__in { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 17px/1.2 var(--font-sans); }
.site:lang(ar) .ask__in { font-family: var(--font-ar); font-size: 18px; }
.ask__in::placeholder { color: var(--muted); opacity: 1; }
.ask__go { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform var(--t-mid) var(--spring); }
.site[dir="rtl"] .ask__go svg { transform: scaleX(-1); }
.ask:focus-within .ask__go { transform: scale(1.06); }
.ask__list { position: absolute; top: calc(100% + 12px); inset-inline: 0; margin: 0; padding: 8px; list-style: none; display: grid; gap: 2px; border-radius: 24px; border: 1px solid var(--hair-2); background: var(--surface); box-shadow: var(--inner-hi), 0 34px 70px -28px rgba(0, 0, 0, .85); animation: rise 320ms var(--spring) both; }
.ask__list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; font-size: 15px; }
.site:lang(ar) .ask__list li { font-size: 16px; }
.ask__list li:hover, .ask__list li[aria-selected="true"] { background: var(--surface-2); }
.ask__list .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.ask__list b { font: 400 12px/1.3 var(--font-mono); color: var(--muted); }
.down { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; padding: 8px 4px; }
.site a.down { color: var(--muted); }
.site a.down:hover { color: var(--text); }
.down svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pass { to { transform: scale(1.5); opacity: 0; } }
.hg { max-width: 1260px; margin-inline: auto; display: grid; gap: 40px; padding: clamp(64px, 9cqi, 140px) clamp(16px, 4cqi, 48px) clamp(48px, 6cqi, 96px); }
.hg__head { display: grid; gap: 16px; max-width: 48rem; }
.hg__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 14px/1.4 var(--font-mono); color: var(--accent-text); }
.pip { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.hg h2 { margin: 0; font-size: clamp(2rem, 5.2cqi, 3.6rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.site:lang(ar) .hg h2 { letter-spacing: 0; line-height: 1.35; }
.hg__note { margin: 0; color: var(--muted); font-size: 17px; }
.tiles { display: grid; gap: 16px; }
@container site (min-width: 900px) {
  .tiles { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.tile { position: relative; overflow: hidden; display: grid; gap: 18px; align-content: start; padding: 24px; border-radius: 28px; border: 1px solid var(--hair); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--inner-hi), 0 30px 60px -40px rgba(0, 0, 0, .8); transition: transform var(--t-mid) var(--spring), border-color var(--t-mid) var(--spring); }
.tile:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.tile > :not(.spot) { position: relative; z-index: 1; }
.tile h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.tile > p { margin: 0; color: var(--muted); font-size: 15px; }
.site:lang(ar) .tile > p { font-size: 16px; }
.spot { position: absolute; top: 0; left: 0; z-index: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 62%); transform: translate(var(--px, -999px), var(--py, -999px)); opacity: 0; transition: opacity var(--t-mid) var(--spring); pointer-events: none; }
.tile:hover .spot { opacity: 1; }
.tile__ui { display: grid; gap: 10px; align-content: center; min-height: 196px; padding: 16px; border-radius: 18px; border: 1px solid var(--hair); background: var(--bg); }
.ok { width: 18px; height: 18px; margin-inline-start: auto; fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface-2); font-size: 14px; color: var(--muted); }
.plan .bar { width: 64px; height: 8px; border-radius: 4px; background: var(--hair-2); flex: none; }
.plan--new { border-color: var(--accent); color: var(--text); }
.plan--new .bar { background: var(--accent); width: 92px; }
.plan--diff { background: color-mix(in srgb, var(--accent) 11%, var(--surface-2)); color: var(--text); }
.plan--diff em { font-style: normal; font-weight: 700; color: var(--accent-text); text-align: end; }
.fake { justify-self: start; display: inline-flex; padding: 9px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; }
.gauge { position: relative; height: 18px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hair); overflow: hidden; }
.gauge__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 62%; border-radius: inherit; background: linear-gradient(to right, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); transform-origin: left center; }
.site[dir="rtl"] .gauge__fill { transform-origin: right center; background: linear-gradient(to left, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); }
.gauge__cap { position: absolute; inset-block: 0; inset-inline-start: 82%; width: 2px; background: var(--text); }
.legend { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 13px; }
.sw { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: var(--accent); }
.sw--cap { width: 2px; height: 12px; background: var(--text); margin-inline-start: 8px; }
.tile.wait .tile__ui > * { opacity: .001; transform: translateY(10px); }
.tile__ui > * { transition: opacity 320ms var(--spring), transform 320ms var(--spring); }
.tile__ui > :nth-child(2) { transition-delay: 50ms; }
.tile__ui > :nth-child(3) { transition-delay: 100ms; }
.tile__ui > :nth-child(4) { transition-delay: 150ms; }
.tile.wait .gauge__fill { transform: scaleX(0); }
.gauge__fill { transition: transform 600ms var(--spring) 100ms; }
.hall { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 34px; padding: clamp(56px, 8cqi, 120px) clamp(16px, 4cqi, 48px) clamp(64px, 9cqi, 128px); }
.hall__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hall__glow i { position: absolute; inset: 8% 0 10%; background: radial-gradient(42% 46% at 50% 52%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%); opacity: 0; transition: opacity 350ms var(--spring); }
.hall[data-active="0"] .hall__glow i[data-p="0"], .hall[data-active="1"] .hall__glow i[data-p="1"], .hall[data-active="2"] .hall__glow i[data-p="2"], .hall[data-active="3"] .hall__glow i[data-p="3"], .hall[data-active="4"] .hall__glow i[data-p="4"] { opacity: 1; }
.hall__head { text-align: center; }
.hall h2 { margin: 0; font-size: clamp(2.2rem, 6.4cqi, 4.4rem); letter-spacing: -.045em; line-height: 1; }
.site:lang(ar) .hall h2 { letter-spacing: 0; line-height: 1.3; }
.flow { position: relative; display: grid; touch-action: pan-y; perspective: 1500px; perspective-origin: 50% 38%; --peek1: 62%; --peek2: 104%; --tilt: 34deg; --dir: 1; }
.site[dir="rtl"] .flow { --dir: -1; }
.flow > .sp { grid-area: 1 / 1; justify-self: center; width: min(100%, 620px); transform-style: preserve-3d; backface-visibility: hidden; cursor: pointer; transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 420ms cubic-bezier(.22, 1, .36, 1); }
.flow > .sp[data-pos="0"] { z-index: 5; cursor: auto; transform: translateZ(0); }
.flow > .sp[data-pos="1"], .flow > .sp[data-pos="-1"] { z-index: 4; opacity: .62; }
.flow > .sp[data-pos="2"], .flow > .sp[data-pos="-2"] { z-index: 3; opacity: .28; }
.flow > .sp[data-pos="1"] { transform: translateX(calc(var(--peek1) * var(--dir))) translateZ(-220px) rotateY(calc(var(--tilt) * -1 * var(--dir))); }
.flow > .sp[data-pos="-1"] { transform: translateX(calc(var(--peek1) * -1 * var(--dir))) translateZ(-220px) rotateY(calc(var(--tilt) * var(--dir))); }
.flow > .sp[data-pos="2"] { transform: translateX(calc(var(--peek2) * var(--dir))) translateZ(-460px) rotateY(calc(var(--tilt) * -1.2 * var(--dir))); }
.flow > .sp[data-pos="-2"] { transform: translateX(calc(var(--peek2) * -1 * var(--dir))) translateZ(-460px) rotateY(calc(var(--tilt) * 1.2 * var(--dir))); }
.flow > .sp:not([data-pos="0"]) .sp__copy { visibility: hidden; }
.flow > .sp:not([data-pos="0"]) > * { pointer-events: none; }
.flow > .sp:not([data-pos="0"]):hover { opacity: .9; }
@container site (max-width: 700px) {
  .flow { --peek1: 16%; --peek2: 26%; --tilt: 20deg; }
  .flow > .sp { width: 84%; }
}
.sp { position: relative; display: grid; align-content: start; overflow: hidden; border-radius: 30px; border: 1px solid var(--hair-2); background: var(--surface); box-shadow: var(--inner-hi), 0 50px 90px -50px rgba(0, 0, 0, .9); }
.sp::before { content: ""; position: absolute; z-index: 2; inset-inline: 10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); box-shadow: 0 0 22px 2px color-mix(in srgb, var(--c) 60%, transparent); }
.sp__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg); }
.sp__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp__media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, var(--surface), transparent); }
.sp__copy { position: relative; z-index: 1; display: grid; gap: 14px; margin-block-start: -22px; padding: 0 clamp(20px, 3.4cqi, 34px) clamp(24px, 3.4cqi, 34px); }
.sp__need { margin: 0; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 6px 14px; padding-inline-start: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hair-2); font-size: 14px; }
.sp__need::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.site:lang(ar) .sp__need { font-size: 15px; }
.sp__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 13px/1.4 var(--font-mono); color: var(--accent-text); }
.sp h3 { margin: 0; font-size: clamp(1.3rem, 2.6cqi, 1.7rem); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.site:lang(ar) .sp h3 { letter-spacing: 0; line-height: 1.5; }
.sp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: 15px; }
.sp__list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; }
.sp__list li::before { content: ""; width: 14px; height: 1.5px; margin-block-start: .8em; background: var(--c); }
.link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 700; text-decoration: none; padding-block: 6px; }
.site a.link { color: var(--accent-text); }
.arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-mid) var(--spring); }
.site[dir="rtl"] .arr { transform: scaleX(-1); }
.link:hover .arr { transform: translateX(4px); }
.site[dir="rtl"] .link:hover .arr { transform: scaleX(-1) translateX(4px); }
.flow > .sp[data-pos="0"] .sp__copy > * { animation: rise 320ms cubic-bezier(.22, 1, .36, 1) both; }
.flow > .sp[data-pos="0"] .sp__copy > :nth-child(2) { animation-delay: 50ms; }
.flow > .sp[data-pos="0"] .sp__copy > :nth-child(3) { animation-delay: 100ms; }
.flow > .sp[data-pos="0"] .sp__copy > :nth-child(4) { animation-delay: 150ms; }
.flow > .sp[data-pos="0"] .sp__copy > :nth-child(5) { animation-delay: 200ms; }
.flow__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.site[dir="rtl"] #flow-prev svg, .site[dir="rtl"] #flow-next svg { transform: scaleX(-1); }
.flow__dots { display: inline-flex; gap: 8px; }
.flow__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); transition: transform var(--t-fast) var(--spring), background-color var(--t-fast) var(--spring); }
.flow__dots i.on { background: var(--accent); transform: scale(1.35); }
.flow__timer { display: block; width: 72px; height: 2px; border-radius: 2px; background: var(--hair-2); overflow: hidden; }
.flow__timer::after { content: ""; display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.site[dir="rtl"] .flow__timer::after { transform-origin: right center; }
.flow[data-run="on"] ~ .flow__nav .flow__timer::after { animation: draw 3000ms linear both; }
.end { position: relative; isolation: isolate; overflow: clip; display: grid; justify-items: center; gap: 34px; text-align: center; padding: clamp(110px, 15cqi, 210px) clamp(16px, 4cqi, 48px); }
.end__ring { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(118cqi, 820px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--ring-gold); background: radial-gradient(circle, var(--glow) 0%, transparent 62%); box-shadow: 0 0 0 60px var(--shell), 0 0 0 120px color-mix(in srgb, var(--shell) 50%, transparent); }
.end h2 { margin: 0; max-width: 16ch; font-size: clamp(2.3rem, 7cqi, 5.4rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.site:lang(ar) .end h2 { letter-spacing: 0; line-height: 1.35; max-width: 18ch; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@container site (max-width: 430px) {
  .ctas .btn { flex: 1 1 100%; }
}
@container site (max-width: 600px) {
  .hero h1 { font-size: clamp(2.7rem, 13cqi, 4rem); }
  .ask__in { font-size: 16px; }
  .ask__list b { display: none; }
  .ask__list li { grid-template-columns: 10px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; }
  .tile.wait .tile__ui > * { opacity: 1; transform: none; }
  .tile.wait .gauge__fill { transform: none; }
}
.hero, .hall, .end { grid-template-columns: minmax(0, 1fr); }
.hero__copy { width: 100%; }
.hall > *, .end > *, .hero__copy > * { min-width: 0; max-width: 100%; }
@container site (max-width: 1000px) {
  .flow { perspective: none; }
  .flow > .sp { width: min(100%, 620px); }
  .flow > .sp:not([data-pos="0"]) { opacity: 0; visibility: hidden; }
  .flow > .sp[data-pos="1"], .flow > .sp[data-pos="2"] { transform: translateX(calc(40% * var(--dir))); }
  .flow > .sp[data-pos="-1"], .flow > .sp[data-pos="-2"] { transform: translateX(calc(-40% * var(--dir))); }
  .sp__copy { margin-block-start: 0; padding-block-start: 18px; }
}
.flow > .sp { contain: paint; }
.flow > .sp:not([data-pos="0"]) { box-shadow: none; }
.flow > .sp[data-pos="2"], .flow > .sp[data-pos="-2"] { visibility: hidden; }
.slogan { margin: 0; color: var(--accent-text); font-size: clamp(16px, 1.9cqi, 20px); font-weight: 500; letter-spacing: -.01em; }
.site:lang(ar) .slogan { font-size: clamp(17px, 2cqi, 21px); }
@container site (min-width: 1001px) {
  .flow { perspective: none; }
  .flow > .sp { transform-style: flat; transition-duration: 300ms; }
  .flow > .sp[data-pos="1"] { transform: translateX(calc(58% * var(--dir))) scale(.82); }
  .flow > .sp[data-pos="-1"] { transform: translateX(calc(-58% * var(--dir))) scale(.82); }
}
.flow > .sp { transition-duration: 300ms; }
.flow > .sp[data-pos="0"] .sp__copy > * { animation-duration: 260ms; }
.origin, .end, .foot { content-visibility: auto; contain-intrinsic-size: auto 700px; }
/* the product hall sits below the hero on a phone: skip its layout until it nears the screen
   (first-paint layout was ~260 ms of the home page's main-thread blocking, 2026-10-22) */
.hall { content-visibility: auto; contain-intrinsic-size: auto 880px; }
.end__ring { box-shadow: none; }
.hall__head { display: grid; gap: 12px; justify-items: center; }
.hall__lede { margin: 0; color: var(--muted); font-size: clamp(16px, 1.8cqi, 19px); }
.origin { max-width: 1100px; margin-inline: auto; display: grid; gap: clamp(24px, 4cqi, 56px); align-items: center; padding: clamp(56px, 8cqi, 120px) clamp(16px, 4cqi, 48px); }
.origin__mark { width: clamp(96px, 16cqi, 180px); height: auto; justify-self: center; }
.origin__mark .m-ring { stroke-width: 3; }
.origin__copy { display: grid; gap: 16px; max-width: 46rem; }
.origin h2 { margin: 0; font-size: clamp(2rem, 5cqi, 3.4rem); letter-spacing: -.04em; line-height: 1.05; }
.site:lang(ar) .origin h2 { letter-spacing: 0; line-height: 1.3; }
.origin p { margin: 0; color: var(--muted); font-size: clamp(17px, 1.9cqi, 20px); line-height: 1.6; }
@container site (min-width: 760px) {
  .origin { grid-template-columns: auto minmax(0, 1fr); }
}
@container site (min-width: 900px) {
  .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container site (min-width: 1400px) {
  .hdr { max-width: min(1680px, 94cqi); }
  .hg, .foot__in, .foot__bar { max-width: min(1680px, 94cqi); }
  .origin { max-width: min(1400px, 84cqi); }
  .hg { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); align-items: center; column-gap: clamp(40px, 4cqi, 96px); }
  .hg > * { min-width: 0; }
  .flow > .sp { width: min(100%, 760px); }
  .flow > .sp[data-pos="1"] { transform: translateX(calc(64% * var(--dir))) scale(.8); }
  .flow > .sp[data-pos="-1"] { transform: translateX(calc(-64% * var(--dir))) scale(.8); }
  .flow > .sp[data-pos="2"] { visibility: visible; opacity: .3; transform: translateX(calc(118% * var(--dir))) scale(.62); }
  .flow > .sp[data-pos="-2"] { visibility: visible; opacity: .3; transform: translateX(calc(-118% * var(--dir))) scale(.62); }
}
@container site (min-width: 1900px) {
  .site { font-size: 18px; }
  .hero h1 { font-size: clamp(3rem, 8.2cqi, 10.5rem); }
  .flow > .sp { width: min(100%, 880px); }
  .hall__lede, .origin p { font-size: 21px; }
}
.hall__glow i { inset: 8% max(0px, (100% - 1500px) / 2) 10%; transition-duration: 220ms; }
.sp { box-shadow: var(--inner-hi), 0 24px 48px -28px rgba(0, 0, 0, .85); }
.flow > .sp:not([data-pos="0"]) { box-shadow: none; }
.flow > .sp:not([data-pos="0"]) { background-color: transparent; border-color: transparent; box-shadow: none; }
.flow > .sp:not([data-pos="0"]) .sp__media::after { height: 60%; background: linear-gradient(to top, var(--bg), transparent); }
.flow > .sp { transition-property: transform, opacity; }
.beam { box-shadow: none; }
.hero { -webkit-user-select: none; user-select: none; }
.hero input, .hero textarea { -webkit-user-select: text; user-select: text; }
.hero { gap: clamp(18px, 2.4cqi, 32px); align-content: center; }
.emb { --beat: 20s; position: relative; width: min(100%, calc(100svh - 230px), 980px); min-width: 0; aspect-ratio: 1; margin-inline: auto; }
.emb > :is(svg, .emb__spin, .emb__h) { position: absolute; inset: 0; margin: 0; }
.emb > svg, .emb__spin > svg, .emb__h > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.emb__ring { fill: none; stroke: var(--hair-2); stroke-width: 1.5; }
.emb__ring--gold { stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
.emb__arc { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.emb__arc--a { stroke: var(--accent); }
.emb__arc--c { stroke: color-mix(in srgb, var(--accent) 65%, transparent); }
.emb__arc--b { stroke: color-mix(in srgb, var(--text) 40%, transparent); }
.emb__core { fill: var(--c); }
.emb__glow { fill: var(--c); opacity: .22; }
.emb__core, .emb__glow { transform-box: fill-box; transform-origin: center; transition: transform var(--t-mid) var(--spring); }
.emb__spin { animation: spin var(--beat) linear infinite; will-change: transform; }
.hero.off .emb__spin { animation-play-state: paused; }
/* v13.2 (INP): the banner holds still while the phone menu is open */
.hero.hold .emb__spin { animation-play-state: paused; }
.emb__h { pointer-events: none; }
.emb__slogan { font: 500 30px var(--font-sans); fill: var(--accent-text); letter-spacing: -.01em; }
.emb__t { font: 700 96px var(--font-sans); fill: var(--text); letter-spacing: -.05em; }
.site:lang(ar) .emb__slogan { font-family: var(--font-ar); font-size: 34px; letter-spacing: 0; }
.site:lang(ar) .emb__t { font-family: var(--font-ar); font-size: 92px; letter-spacing: 0; }
.site[dir="rtl"] .emb text { direction: rtl; }
.emb .ask { position: absolute; z-index: 6; top: 64%; left: 50%; translate: -50% 0; width: min(62%, 600px); margin: 0; will-change: transform; }
.hero__after { display: grid; justify-items: center; gap: 18px; text-align: center; }
@container site (max-width: 559px) {
  .emb { width: 100%; margin-bottom: 84px; }
  .emb__slogan { font-size: 40px; }
  .emb__t { font-size: 104px; }
  .site:lang(ar) .emb__t { font-size: 100px; }
  .emb .ask { top: calc(100% + 16px); width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .emb__spin { animation: none; }
}
@container site (min-width: 1001px) {
  .flow > .sp { will-change: transform, opacity; }
}
.hero, .hero .emb, .hero .emb text { cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hero ::selection { background: transparent; }
.hero .ask__in { cursor: text; -webkit-user-select: text; user-select: text; }
.hero .ask__in::selection { background: var(--glow-strong); }
.hero a, .hero [role="option"] { cursor: pointer; }
.hero { padding-top: calc(clamp(16px, 2.4cqi, 40px) + 72px); padding-bottom: clamp(40px, 5cqi, 80px); min-height: auto; }
@container site (min-width: 1400px) {
  .hall[data-active] .hall__glow i:not([data-p="0"]) { transition: none; opacity: 0; }
  .hall[data-active] .hall__glow i[data-p="0"] { transition: none; opacity: 1; }
}
.emb__dot[data-t="red"] { --c: #C8102E; }
.emb__dot[data-t="blue"] { --c: #1E5BD8; }
.emb__dot[data-t="purple"] { --c: #7B3FC4; }
.emb__dot[data-t="yellow"] { --c: #F2C230; }
.emb__dot[data-t="green"] { --c: #1FA35B; }
.emb__dot[data-t="white"] { --c: #ECEEF2; }
.emb__dot[data-t="cyan"] { --c: #12B5CB; }
:root[data-theme="light"] .emb__dot[data-t="white"] { --c: #8A93A6; }
/* v13.2 (UX CHANGE-v13.2): each arc is one seventh of its ring and runs light to light; all turn with the lights. */
.emb__arc--a, .emb__arc--b, .emb__arc--c { stroke-dasharray: 1 6; }
.emb__arc--a { stroke-dashoffset: 0; }
.emb__arc--b { stroke-dashoffset: -2; }
.emb__arc--c { stroke-dashoffset: -4; }
.emb__ring--dash { stroke-dasharray: 6 10; } /* pathLength 1456 = 91 even repeats, no seam */
/* v13.3 (Tamer, 2026-10-14): the banner keeps one steady speed. One moving layer (the spin), transform only,
   one linear speed, never paused or restarted by script (only off screen or for reduced motion);
   nothing inside the moving layer changes on hover. The emblem is capped at 860 px: at 980 px it dropped
   frames on big screens. The needs cross-fade under the search bar's text, opacity only. */
.emb { --beat: 24s; width: min(100%, calc(100svh - 230px), 860px); }
.emb__core, .emb__glow { transition: none; }
.hero.hold .emb__spin { animation-play-state: running; }
.ask__hint { position: absolute; inset-block: 7px; inset-inline: 48px 63px; display: grid; align-items: center; pointer-events: none; overflow: hidden; }
.ask__hint i { grid-area: 1 / 1; font: 400 17px/1.2 var(--font-sans); font-style: normal; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; animation: hint 15s linear infinite; }
.site:lang(ar) .ask__hint i { font-family: var(--font-ar); font-size: 18px; }
.ask__hint i:nth-child(2) { animation-delay: 3s; } .ask__hint i:nth-child(3) { animation-delay: 6s; }
.ask__hint i:nth-child(4) { animation-delay: 9s; } .ask__hint i:nth-child(5) { animation-delay: 12s; }
@keyframes hint { 0% { opacity: 0; } 3%, 17% { opacity: 1; } 20%, 100% { opacity: 0; } }
.ask:not(:focus-within) .ask__in:placeholder-shown::placeholder { color: transparent; }
.ask:focus-within .ask__hint, .ask__in:not(:placeholder-shown) ~ .ask__hint { display: none; }
.hero.off .ask__hint i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ask__hint { display: none; }
  .ask:not(:focus-within) .ask__in:placeholder-shown::placeholder { color: var(--muted); }
}

/* ---------- v13.3 (Tamer, 2026-10-14): a real footer ---------- */
/* Its own raised navy band, full width, the banner's gold floor line on top, faint static rings at the end side.
   Nothing in the footer moves. Brand navy ground in both themes, so it always reads as the footer. */
.foot {
  --text: #ECEEF2; --muted: #A3ACBF; --accent-text: #E7B94A; --hair: rgba(236, 238, 242, .10); --hair-2: rgba(236, 238, 242, .16);
  position: relative; overflow: hidden; isolation: isolate; color: var(--text);
  background: var(--navy); margin-block-start: auto;
  border-radius: 32px 32px 0 0; padding: clamp(48px, 6cqi, 88px) 0 0;
}
.foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.foot__rings { position: absolute; z-index: -1; width: 640px; height: 640px; inset-inline-end: -180px; top: -120px; fill: none; stroke: rgba(218, 165, 32, .14); stroke-width: 2; pointer-events: none; }
.foot__rings circle + circle { stroke: rgba(236, 238, 242, .06); }
.foot__in, .foot__bar { max-width: 1260px; margin-inline: auto; padding-inline: clamp(16px, 4cqi, 48px); }
.foot__in { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(40px, 5cqi, 64px); }
@container site (min-width: 560px) { .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
@container site (min-width: 1000px) { .foot__in { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .foot__brand { grid-column: auto; } }
.foot__brand { display: grid; gap: 16px; align-content: start; max-width: 30rem; }
.foot__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; min-height: 44px; }
.foot__logo .brand__mark { width: 44px; height: 44px; }
.foot__name { font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.foot__name span { color: var(--accent-text); font-family: var(--font-ar); margin-inline-start: 6px; font-weight: 500; }
.foot__origin { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.foot__slogan { margin: 0; color: var(--accent-text); font-size: 16px; font-weight: 500; }
.foot__h { margin: 0 0 14px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.site:lang(ar) .foot__h { font-family: var(--font-ar); letter-spacing: 0; font-size: 14px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot__col a:not(.btn) { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--text); text-decoration: none; font-size: 15px; }
.foot__col a:not(.btn):hover { color: var(--accent-text); }
.foot__col .pip { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--glow); }
.foot__reach { display: grid; gap: 14px; align-content: start; justify-items: start; }
.foot__reach .foot__h { margin: 0; }
.foot__mail { color: var(--text) !important; font-size: 16px !important; text-decoration: underline; text-decoration-color: rgba(218, 165, 32, .5); text-underline-offset: 4px; }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 20px 28px; border-top: 1px solid var(--hair); }
.foot__small { margin: 0; color: var(--muted); font-size: 13px; margin-inline-end: auto; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot__legal a, .foot__lang { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--muted); font-size: 14px; text-decoration: none; }
.foot__legal a:hover, .foot__lang:hover { color: var(--text); }
.foot__lang { padding: 0 14px; border: 1px solid var(--hair-2); border-radius: 999px; color: var(--text); }
.foot__lang svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.site:lang(ar) .foot__lang { font-family: var(--font-sans); }
.site:not(:lang(ar)) .foot__lang { font-family: var(--font-ar); }
.foot a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ---------- v13.3: the Hypergate sign-in tile shows what Hypergate has today ---------- */
/* email and password, an authenticator code, then the products behind the one sign-in. No third-party buttons
   until those providers are wired. Illustration only (the pill says so); builds in once, then stays still. */
.hgin { gap: 8px; min-height: 0; }
.hgin__brand { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--font-mono); color: var(--accent-text); }
.hgin__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
.hgin__f small, .hgin__gates small { grid-column: 1 / -1; font: 400 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.site:lang(ar) .hgin__f small, .site:lang(ar) .hgin__gates small { font-family: var(--font-ar); font-size: 12px; letter-spacing: 0; }
.hgin__f b { font-weight: 500; font-size: 15px; }
.hgin__dots { letter-spacing: .12em; }
.hgin__code { grid-template-columns: auto minmax(0, 1fr); border-color: var(--accent); }
.hgin__code b { display: flex; gap: 6px; }
.hgin__code b i { display: inline-grid; place-items: center; width: 24px; height: 28px; border-radius: 7px; background: var(--bg); border: 1px solid var(--hair-2); font: 500 14px/1 var(--font-mono); font-style: normal; }
.hgin__code .ok { margin-inline-start: auto; }
.hgin__gates { display: grid; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--hair-2); }
.gaterow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--bg); font-size: 14px; }
.gaterow i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.gaterow svg { width: 16px; height: 16px; margin-inline-start: auto; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site[dir="rtl"] .gaterow svg { transform: scaleX(-1); }
.tile__ui.hgin > :nth-child(5) { transition-delay: 200ms; }
/* BA 2026-10-14: no product names in the card yet (not every product signs in through Hypergate today); neutral rows */
.gaterow em { display: block; height: 8px; width: var(--w, 60%); border-radius: 4px; background: var(--hair-2); }
/* the three neutral product rows: colour and bar length as classes, because the CSP allows no inline style="" */
.gaterow--1 { --c: #C8102E; --w: 58%; }
.gaterow--2 { --c: #1E5BD8; --w: 72%; }
.gaterow--3 { --c: #1FA35B; --w: 46%; }

/* v13.3: no button transitions while the page loads. The theme is set during load, and the colour change it causes
   must not start transitions (Firefox queued four on the closing Talk to us button and never ran them).
   .live is added on window load (home.js). */
.site:not(.live) .btn { transition: none; }

/* UX W2 (PP check $6yYVsE241MA0J382c7CnBCRi4xQG0DVDOJ28h1Y2KBM): on phones the fixed chat button
   (56 px, 16-20 px from the corner, web/chat-widget.css) sat on the footer's last row. Clear it:
   56 + 20 + 16 px. */
@media (max-width: 599px) {
  .foot__bar { padding-block-end: 92px; }
}

/* UX T3, ruling 20 as updated 2026-10-16 ($UVoW8ei6u1tqUWm1JCEohIvGXwcIqNW3R-CRR0UqWtE): Tamer's pick,
   the builder. Ported from elwekalah-ux f3199ea work/beta/beta-proto.src.html (.vc). After the logo,
   every page, every width, never in the phone menu. The robot carries a brick from the pile to the
   wall: one trip 1.6 s, six trips build the wall (9.6 s), it clears and starts again.
   Only transform and opacity animate. */
.beta { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); cursor: default; outline: none; }
.site[dir="rtl"] .beta { padding: 0 8px 0 14px; }
.beta svg { width: 132px; height: 30px; flex: none; overflow: visible; }
.site[dir="rtl"] .beta svg { transform: scaleX(-1); }
.beta__txt { color: var(--accent-text); font: 700 13px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; }
.site[dir="rtl"] .beta__txt { font-family: var(--font-ar); font-size: 15px; letter-spacing: 0; }
.beta__tip { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 5; width: max-content; max-width: 240px; background: var(--navy); color: #F1E6D2; border: 1px solid rgba(218, 165, 32, .45); border-radius: 10px; padding: 8px 12px; font: 400 13px/1.4 var(--font-sans); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s var(--spring), transform .18s var(--spring); }
.site[dir="rtl"] .beta__tip { font-family: var(--font-ar); font-size: 14px; }
.beta:hover .beta__tip, .beta:focus-visible .beta__tip { opacity: 1; transform: none; }
.beta:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.beta .r { fill: var(--gold); } .beta .d { fill: var(--navy); } .beta .v { fill: #FFF4D6; } .beta .g { fill: var(--gold); opacity: .45; }
.beta .pile { fill: var(--gold); opacity: .75; }
.beta .wb { fill: var(--gold); opacity: 0; }
.beta .bot { animation: b-walk 1.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.beta .face { transform-box: fill-box; transform-origin: center; animation: b-face 1.6s steps(1, end) infinite; }
.beta .carry { fill: #E8B93A; animation: b-carry 1.6s steps(1, end) infinite; }
.beta .leg1 { animation: b-step .4s steps(2, jump-none) infinite; }
.beta .leg2 { animation: b-step .4s steps(2, jump-none) infinite reverse; }
.beta .wb1 { animation: b-w1 9.6s linear infinite; } .beta .wb2 { animation: b-w2 9.6s linear infinite; } .beta .wb3 { animation: b-w3 9.6s linear infinite; }
.beta .wb4 { animation: b-w4 9.6s linear infinite; } .beta .wb5 { animation: b-w5 9.6s linear infinite; } .beta .wb6 { animation: b-w6 9.6s linear infinite; }
@keyframes b-walk { 0%, 12% { transform: translateX(0); } 50%, 62% { transform: translateX(62px); } 100% { transform: translateX(0); } }
@keyframes b-face { 0% { transform: scaleX(1); } 56% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes b-carry { 0% { opacity: 0; } 10% { opacity: 1; } 56% { opacity: 0; } 100% { opacity: 0; } }
@keyframes b-step { 0% { transform: translateY(0); } 100% { transform: translateY(-1.2px); } }
@keyframes b-w1 { 0%, 9.1% { opacity: 0; } 9.4%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-w2 { 0%, 25.7% { opacity: 0; } 26%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-w3 { 0%, 42.4% { opacity: 0; } 42.7%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-w4 { 0%, 59.1% { opacity: 0; } 59.4%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-w5 { 0%, 75.7% { opacity: 0; } 76%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-w6 { 0%, 92.4% { opacity: 0; } 92.7%, 98.5% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 599px) {
  .beta { gap: 7px; height: 34px; padding: 0 10px 0 6px; }
  .site[dir="rtl"] .beta { padding: 0 6px 0 10px; }
  .beta svg { width: 84px; height: 19px; }
  /* the mark is wider than the old pill: on phones the logo carries the brand alone (it stays the
     home link with its label) and the header gaps tighten, so nothing is squeezed */
  .hdr { gap: 8px; }
  .hdr__act { gap: 4px; }
  .hdr .brand { flex: none; }
  .hdr .brand .brand__word, .hdr .brand .brand__alt { display: none; }
}
@media (max-width: 359px) {
  .beta { gap: 5px; padding: 0 8px 0 5px; }
  .site[dir="rtl"] .beta { padding: 0 5px 0 8px; }
  .beta svg { width: 52px; height: 12px; }
  .hdr { padding: 6px 6px 6px 10px; }
  .site[dir="rtl"] .hdr { padding: 6px 10px 6px 6px; }
}
/* 600-1099px: hide the Arabic brand word so the BETA mark does not overlap the header */
@media (min-width: 600px) and (max-width: 1099px) {
  .hdr .brand { flex: none; }
  .hdr .brand .brand__alt { display: none; }
}
/* 600-699px: hide the brand word so the BETA mark and header actions stay inside the bar */
@media (min-width: 600px) and (max-width: 699px) {
  .hdr .brand .brand__word { display: none; }
}
/* the tab is hidden (theme-boot.js sets the class): stop the loop */
.tab-hidden .beta * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .beta * { animation: none !important; }
  .beta .wb { opacity: 1; }
  .beta .carry { opacity: 0; }
}
.foot__small:has(+ .foot__beta) { margin-inline-end: 0; }
.foot__beta { margin-inline-end: auto; }
.hdr[data-menu="open"] .nav > a:not(.btn):nth-child(4) { animation-delay: 150ms; }