/* arbab.tech - site.css - Arbab Technologies design system tokens (dark only), 14 Oct 2026 */
:root {
  color-scheme: dark;
  --arbab-digital: #000e2b; --authority: #0c376f; --loyalty: #42166a; --ambition: #8f6b00;
  --arbab-ice: #f9fdff; --ink-muted: #a3b1c9; --ambition-lift: #d9ae3a; --on-ambition-lift: var(--arbab-digital);
  --signal: #2282bc; --line: #1c3560; --focus-ring: var(--ambition-lift); --nav-ground: rgba(0,14,43,.88);
  --plate-x: 8px; --plate-ambition: var(--plate-x) 8px 0 0 var(--ambition); --plate-loyalty: var(--plate-x) 8px 0 0 var(--loyalty); --plate-authority: var(--plate-x) 8px 0 0 var(--authority);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --r-sm: 6px; --r-lg: 16px; --content-max: 1200px; --measure: 660px;
  --gutter: max(var(--s4), calc((100% - var(--content-max)) / 2));
  --font-display: "Archivo","Helvetica Neue",Arial,sans-serif; --font-sans: "Inter","Helvetica Neue",Arial,sans-serif; --font-arabic: "Tajawal","Noto Kufi Arabic",Tahoma,sans-serif; --stretch: 125%;
}
:root[lang="ar"] { --font-display: var(--font-arabic); --font-sans: var(--font-arabic); --stretch: 100%; --plate-x: -8px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The root carries the brand navy as well as the body: once the 3D hero is live the body, hero and sections go transparent and the fixed canvas fades in over 900 ms,
   so without this the browser's white root showed through during the fade and in not-yet-painted tiles on a fast scroll (the "white wash", fixed 15 Oct). */
html { background: var(--arbab-digital); }
body { margin: 0; background: var(--arbab-digital); color: var(--arbab-ice); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; }
h1,h2,h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.display-xl { font-family: var(--font-display); font-stretch: var(--stretch); font-size: clamp(40px, 6vw, 76px); line-height: 1.0; font-weight: 800; letter-spacing: -0.01em; }
.display-l { font-family: var(--font-display); font-stretch: var(--stretch); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 800; }
.heading { font-family: var(--font-display); font-stretch: var(--stretch); font-size: 24px; line-height: 30px; font-weight: 700; }
.eyebrow { font-family: var(--font-display); font-stretch: var(--stretch); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ambition-lift); }
.body-l { font-size: 19px; line-height: 30px; }
.caption { font-size: 13px; line-height: 20px; }
:root[lang="ar"] .display-xl { line-height: 1.25; letter-spacing: 0; }
:root[lang="ar"] .display-l { line-height: 1.3; }
:root[lang="ar"] .heading { line-height: 36px; }
:root[lang="ar"] .eyebrow { font-size: 15px; line-height: 22px; letter-spacing: 0; text-transform: none; font-weight: 700; }
:root[lang="ar"] .body-l { font-size: 20px; line-height: 34px; }
:root[lang="ar"] body { font-size: 17px; line-height: 29px; }
.lede { color: var(--ink-muted); max-width: var(--measure); }
.gold { color: var(--ambition-lift); }
em { font-style: normal; color: var(--ambition-lift); }
.skip { position: absolute; inset-inline-start: var(--s4); top: -60px; z-index: 40; padding: var(--s2) var(--s4); background: var(--ambition-lift); color: var(--on-ambition-lift); font-weight: 600; }
.skip:focus { top: var(--s4); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.section { padding-block: var(--s24); padding-inline: var(--gutter); scroll-margin-top: 80px; }
.section--tight { padding-block: var(--s16); }
.section-head { display: grid; gap: var(--s4); max-width: var(--measure); margin-block-end: var(--s12); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 52px; padding: 0 var(--s6); border: 1px solid transparent; border-radius: var(--r-sm); font: 600 16px/26px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.btn--primary { background: var(--ambition-lift); color: var(--on-ambition-lift); }
.btn--primary:hover { transform: translate(calc(var(--plate-x) / -2), -4px); box-shadow: var(--plate-loyalty); }
.btn--secondary { background: transparent; color: var(--arbab-ice); border-color: var(--ink-muted); }
.btn--secondary:hover { border-color: var(--arbab-ice); }
.btn--sm { height: 44px; padding: 0 var(--s4); font-size: 15px; }
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--gutter); background: var(--nav-ground); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; font: 800 16px/24px "Archivo",Arial,sans-serif; font-stretch: 125%; letter-spacing: .02em; white-space: nowrap; }
.brand img { display: block; width: 30px; height: auto; }
.nav__links { display: flex; gap: var(--s6); margin-inline-start: auto; }
.nav__links a { padding: var(--s2) 0; border-bottom: 2px solid transparent; text-decoration: none; font-size: 15px; }
.nav__links a:hover, .nav__links a[aria-current] { border-bottom-color: var(--ambition-lift); }
.nav__phone { text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--arbab-ice); text-decoration: none; font: 600 15px/1 var(--font-sans); }
.lang[lang="ar"] { font-family: var(--font-arabic); font-size: 17px; }
.lang[lang="en"] { font-family: "Inter",Arial,sans-serif; }
.nav__toggle { display: none; width: 44px; height: 44px; margin-inline-start: auto; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--arbab-ice); cursor: pointer; position: relative; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { position: absolute; left: 12px; width: 18px; height: 2px; background: currentColor; border-radius: 2px; content: ""; transition: transform 200ms ease, background 200ms ease; }
.nav__toggle span { top: 21px; } .nav__toggle span::before { top: -6px; left: 0; } .nav__toggle span::after { top: 6px; left: 0; }
.nav.is-open .nav__toggle span { background: transparent; } .nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); } .nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) { .nav__links, .nav__phone { display: none; } .nav__toggle { display: inline-block; } .nav .btn { margin-inline-start: 0; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 0; margin: 0; position: absolute; inset-inline: 0; top: 100%; padding: var(--s2) var(--gutter) var(--s6); background: var(--arbab-digital); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0,0,0,.35); }
  .nav.is-open .nav__links a { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--line); min-height: 48px; } }
.footer nav a { display: inline-block; padding: 10px 0; min-height: 44px; }
.hero { position: relative; isolation: isolate; min-height: min(92vh, 860px); display: grid; align-items: center; padding: var(--s24) var(--gutter) var(--s16); overflow: hidden;
  background: radial-gradient(120% 80% at 70% 20%, #0c2a63 0%, #061a44 35%, var(--arbab-digital) 75%); }
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.hero[data-hero-live] .hero__canvas { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0,14,43,.86) 0%, rgba(0,14,43,.55) 48%, rgba(0,14,43,.15) 100%); }
:root[dir="rtl"] .hero::after { background: linear-gradient(270deg, rgba(0,14,43,.86) 0%, rgba(0,14,43,.55) 48%, rgba(0,14,43,.15) 100%); }
.hero__copy { position: relative; max-width: 760px; display: grid; gap: var(--s6); }
.hero__copy .lede { max-width: 600px; }
.audit { display: grid; gap: var(--s3); max-width: 600px; }
.audit label { font-weight: 600; }
.audit__row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.audit input { flex: 1 1 260px; height: 52px; padding: 0 var(--s4); border: 1px solid var(--ink-muted); border-radius: var(--r-sm); background: rgba(0,14,43,.7); color: var(--arbab-ice); font: 16px/1 var(--font-sans); }
.audit input::placeholder { color: var(--ink-muted); }
.audit__note { color: var(--ink-muted); }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0; padding-inline: var(--gutter); border-block: 1px solid var(--line); }
.figure { display: grid; align-content: start; gap: var(--s2); padding: var(--s8) var(--s6); border-inline-start: 1px solid var(--line); min-width: 0; }
.figure:first-child { border-inline-start: 0; padding-inline-start: 0; }
.figure dt { order: 2; margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.figure dd { order: 1; margin: 0; font: 800 40px/1 "Archivo",Arial,sans-serif; font-stretch: 125%; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .figures { grid-template-columns: repeat(2, minmax(0,1fr)); } .figure:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; } .figure { padding-block: var(--s6); } }
.plates { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s12) var(--s8); margin: 0; padding: 0 0 var(--s2); list-style: none; }
.plate { display: grid; align-content: start; gap: var(--s3); height: 100%; padding: var(--s6); color: var(--arbab-ice); background: linear-gradient(90deg, var(--authority), var(--loyalty)); box-shadow: var(--plate-ambition); text-decoration: none; transition: transform 120ms ease; }
.plate:hover { transform: translate(calc(var(--plate-x) / -2), -4px); }
.plate h3 { margin: 0; }
.plate p { color: #dbe4f5; }
.plate .more { color: var(--ambition-lift); font-weight: 600; }
.plate--wide { grid-column: 1 / -1; background: linear-gradient(90deg, var(--ambition), var(--authority)); box-shadow: var(--plate-loyalty); }
@media (max-width: 960px) { .plates { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .plates { grid-template-columns: 1fr; gap: var(--s8); } }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.case { position: relative; display: grid; gap: var(--s4); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(12,55,111,.18); }
.case__logo { height: 44px; width: auto; }
.case__lane { color: var(--ambition-lift); font-weight: 600; font-size: 14px; }
.case__ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.case__ba div { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: rgba(0,14,43,.6); }
.case__ba span { color: var(--ink-muted); font-size: 13px; }
.case__ba b { font-weight: 600; }
.case__time { color: var(--ink-muted); font-size: 14px; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; } .case__ba { grid-template-columns: 1fr; } }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.quote { position: relative; display: grid; gap: var(--s4); padding: var(--s6); background: var(--authority); box-shadow: var(--plate-loyalty); }
.quote blockquote { margin: 0; font-size: 18px; line-height: 28px; }
.quote footer { display: flex; align-items: center; gap: var(--s3); }
.quote img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote footer span { display: block; color: var(--ink-muted); font-size: 14px; }
.quote footer b { font-weight: 600; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.reviews__under { margin-block-start: var(--s8); color: var(--ink-muted); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s8); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { display: grid; gap: var(--s3); padding-block-start: var(--s4); border-top: 2px solid var(--ambition-lift); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 800 40px/1 "Archivo",Arial,sans-serif; font-stretch: 125%; color: var(--ambition-lift); }
.step h3 { margin: 0; }
.step p { color: var(--ink-muted); }
.terms { margin-block-start: var(--s12); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: var(--s3); }
.terms ul { margin: 0; padding-inline-start: 20px; display: grid; gap: var(--s2); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.academy { background: linear-gradient(180deg, rgba(12,55,111,.35), transparent); }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s12); align-items: start; }
.split > * { min-width: 0; }
.inside { display: grid; gap: var(--s3); padding: var(--s6); background: var(--authority); box-shadow: var(--plate-ambition); }
.inside ul { margin: 0; padding-inline-start: 20px; display: grid; gap: var(--s2); }
.price { font: 800 28px/1.2 var(--font-display); font-stretch: var(--stretch); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.coffee { background: var(--loyalty); }
.coffee .lede { color: #e6dcf2; }
.coffee input { height: 52px; padding: 0 var(--s4); border: 1px solid #a98fcf; border-radius: var(--r-sm); background: rgba(0,14,43,.5); color: var(--arbab-ice); font: 16px/1 var(--font-sans); flex: 1 1 260px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); margin: 0; }
.facts div { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); }
.facts dt { color: var(--ink-muted); font-size: 13px; }
.facts dd { margin: 0; font-weight: 600; }
.prose { display: grid; gap: var(--s4); max-width: var(--measure); }
.prose p { font-size: 17px; line-height: 29px; }
:root[lang="ar"] .prose p { font-size: 18px; line-height: 32px; }
.faq { display: grid; gap: var(--s2); max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); background: rgba(0,14,43,.5); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::after { content: "+"; color: var(--ambition-lift); font-weight: 800; }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin-block-start: var(--s3); color: var(--ink-muted); }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); max-width: 820px; }
.checks li { position: relative; padding-inline-start: 28px; }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 12px; height: 12px; background: var(--ambition-lift); }
.final { background: linear-gradient(90deg, var(--authority), var(--loyalty)); }
.final .lede { color: #dbe4f5; }
.footer { padding: var(--s12) var(--gutter); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; display: grid; gap: var(--s4); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--arbab-ice); }
.page-hero { padding: var(--s16) var(--gutter) var(--s12); display: grid; gap: var(--s4); background: radial-gradient(90% 70% at 80% 0%, #0c2a63 0%, var(--arbab-digital) 70%); }
.page-hero .display-l { max-width: 900px; }
[data-sample] { outline: 1px dashed rgba(217,174,58,.5); }
.sample { position: absolute; top: 10px; inset-inline-end: 10px; padding: 2px 8px; background: var(--ambition-lift); color: var(--on-ambition-lift); font: 700 11px/18px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6); }
.contact-grid div { padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: var(--s2); }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .btn, .plate { transition: none; } .hero__canvas { display: none; } }
@media (max-width: 520px) { .brand span { display: none; } .nav { gap: var(--s3); } }
/* ---- v2: fixed holographic backdrop, glass surfaces, reveals (14 Oct, late) ---- */
:root[data-hero-live] .hero__canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; opacity: 1; }
:root[data-hero-live] .hero { background: transparent; min-height: 100vh; }
/* The canvas is fixed but still painted inside .hero's stacking context, so everything after the hero must sit above it (15 Oct). */
:root[data-hero-live] main > :not(.hero), :root[data-hero-live] .footer { position: relative; z-index: 1; }
:root[data-hero-live] .hero::after { background: linear-gradient(90deg, rgba(0,14,43,.62) 0%, rgba(0,14,43,.28) 50%, rgba(0,14,43,0) 100%); }
:root[data-hero-live][dir="rtl"] .hero::after { background: linear-gradient(270deg, rgba(0,14,43,.62) 0%, rgba(0,14,43,.28) 50%, rgba(0,14,43,0) 100%); }
:root[data-hero-live] body { background: transparent; }
:root[data-hero-live] .section, :root[data-hero-live] .page-hero { background: transparent; }
:root[data-hero-live] .figures { background: rgba(0,14,43,.5); backdrop-filter: blur(14px); }
:root[data-hero-live] .academy, :root[data-hero-live] .coffee, :root[data-hero-live] .final { background: rgba(6,22,58,.55); backdrop-filter: blur(18px) saturate(140%); }
:root[data-hero-live] .footer, :root[data-hero-live] .nav { background: rgba(0,14,43,.72); }
.glass, :root[data-hero-live] .plate, :root[data-hero-live] .case, :root[data-hero-live] .quote, :root[data-hero-live] .inside, :root[data-hero-live] .terms, :root[data-hero-live] .faq details, :root[data-hero-live] .facts div, :root[data-hero-live] .contact-grid div {
  position: relative; background: rgba(6,22,58,.42); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.35); border-radius: var(--r-lg); overflow: hidden; }
:root[data-hero-live] .plate::before, :root[data-hero-live] .case::before, :root[data-hero-live] .quote::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(217,174,58,.9), rgba(95,215,255,.5) 45%, rgba(122,75,209,.7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
:root[data-hero-live] .plate::after, :root[data-hero-live] .case::after, :root[data-hero-live] .quote::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(95,215,255,.22), rgba(217,174,58,.08) 40%, transparent 70%); }
:root[data-hero-live] .plate:hover::after, :root[data-hero-live] .case:hover::after, :root[data-hero-live] .quote:hover::after { opacity: 1; }
:root[data-hero-live] .plate { box-shadow: none; }
:root[data-hero-live] .plate--wide { background: rgba(143,107,0,.28); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.btn { will-change: transform; }
.cursor-trail { position: fixed; inset: 0; z-index: 50; pointer-events: none; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cursor-trail { display: none; } }
/* blog (14 Oct 2026): article cards, article body, data tables, four-column steps */
.steps--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px) { .steps, .steps--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .steps, .steps--4 { grid-template-columns: 1fr; } }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s8); margin: 0; padding: 0; list-style: none; }
.post { display: grid; align-content: start; gap: var(--s3); height: 100%; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(12,55,111,.18); text-decoration: none; transition: transform 120ms ease, border-color 120ms ease; }
.post:hover { transform: translateY(-4px); border-color: var(--ambition-lift); }
.post h2 { font-size: 22px; line-height: 28px; }
.post p { color: var(--ink-muted); }
.post .more { color: var(--ambition-lift); font-weight: 600; }
.post__meta, .article__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--ink-muted); font-size: 14px; }
.article__meta b { color: var(--arbab-ice); font-weight: 600; }
.article .section--tight { padding-block: var(--s8); }
.article .section-head { margin-block-end: var(--s6); }
.article .section-head .display-l { font-size: clamp(26px, 3vw, 34px); }
.article .checks { max-width: var(--measure); }
.article .checks li { font-size: 17px; line-height: 29px; }
:root[lang="ar"] .article .checks li { font-size: 18px; line-height: 32px; }
.tablewrap { overflow-x: auto; max-width: 100%; margin-block-end: var(--s6); }
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.table th { color: var(--ambition-lift); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
:root[lang="ar"] .table th { letter-spacing: 0; text-transform: none; font-size: 15px; }
.table td:first-child, .table td:last-child { font-weight: 700; }
.table tr.low td { color: var(--ink-muted); }
.table tr.gap td { border-top: 2px solid var(--ambition); }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }
/* ---- v3: centred object switcher + glitch artifacts (15 Oct) ---- */
.switcher { position: relative; z-index: 2; margin-top: var(--s12); display: grid; gap: var(--s3); }
.switcher__label { color: var(--ink-muted); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
:root[lang="ar"] .switcher__label { letter-spacing: 0; text-transform: none; font-size: 14px; }
.switcher__row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.switcher button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s3); padding: 6px 14px 6px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(6,22,58,.5); backdrop-filter: blur(12px); color: var(--arbab-ice); font: 600 13px/1.2 var(--font-sans); cursor: pointer; transition: border-color 160ms, transform 160ms, box-shadow 160ms; }
.switcher button img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.switcher button:hover { border-color: var(--ambition-lift); transform: translateY(-2px); }
.switcher button[aria-pressed="true"] { border-color: var(--ambition-lift); box-shadow: 0 0 0 1px var(--ambition-lift), 0 0 24px rgba(217,174,58,.35); }
:root:not([data-hero-live]) .switcher { display: none; }
.artifacts { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.artifacts i { position: absolute; display: block; opacity: .9; mix-blend-mode: screen; }
.hero.is-glitching .hero__copy { animation: hero-rgb 120ms steps(2) infinite; }
@keyframes hero-rgb { 0% { text-shadow: 3px 0 rgba(255,40,40,.7), -3px 0 rgba(0,243,255,.7); transform: translateX(1px); } 100% { text-shadow: -2px 0 rgba(255,40,40,.7), 2px 0 rgba(0,243,255,.7); transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) { .hero.is-glitching .hero__copy { animation: none; } .artifacts { display: none; } }
/* readability scrim behind long prose and FAQ while the live backdrop runs (flagged by the hero-canvas fix session) */
:root[data-hero-live] .prose, :root[data-hero-live] .checks { padding: var(--s6); border-radius: var(--r-lg); background: rgba(0,14,43,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* ---- inner pages carry the same fixed 3D backdrop; shorter hero ---- */
.hero--page { min-height: 0; padding: var(--s16) var(--gutter) var(--s12); display: grid; align-items: start; }
:root[data-hero-live] .hero--page { min-height: 58vh; padding-block: var(--s24) var(--s16); }
.hero--page .hero__copy { max-width: 900px; gap: var(--s4); }
.hero--page .hero__copy .lede { max-width: 720px; }
/* ---- coder flex (15 Oct): border beam, 3D tilt, decrypt headings, terminal labels. Glitch removed. ---- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero.is-glitching .hero__copy { animation: none; }
:root[data-hero-live] .plate, :root[data-hero-live] .case, :root[data-hero-live] .quote, :root[data-hero-live] .inside, :root[data-hero-live] .terms, :root[data-hero-live] .faq details, :root[data-hero-live] .contact-grid div, :root[data-hero-live] .facts div {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 160ms ease-out, box-shadow 220ms ease; transform-style: preserve-3d; }
:root[data-hero-live] .plate::before, :root[data-hero-live] .case::before, :root[data-hero-live] .quote::before {
  background: conic-gradient(from var(--beam), transparent 0 68%, rgba(95,215,255,.9) 80%, rgba(217,174,58,1) 88%, transparent 96%); opacity: 1; animation: beam 5.5s linear infinite; }
:root[data-hero-live] .plate:nth-child(2n)::before, :root[data-hero-live] .case:nth-child(2n)::before { animation-duration: 7s; animation-delay: -2.6s; }
:root[data-hero-live] .quote:nth-child(3n)::before { animation-delay: -4s; }
@keyframes beam { to { --beam: 360deg; } }
:root[data-hero-live] .plate:hover, :root[data-hero-live] .case:hover, :root[data-hero-live] .quote:hover { box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(95,215,255,.25), 0 0 48px rgba(95,215,255,.18); }
:root[lang="en"][data-hero-live] .eyebrow::before { content: ">_ "; color: var(--signal); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0; }
:root[lang="en"][data-hero-live] .eyebrow::after { content: "▍"; color: var(--ambition-lift); margin-inline-start: 2px; animation: caret 1s steps(1) infinite; }
:root[lang="ar"][data-hero-live] .eyebrow::after { content: "▍"; color: var(--ambition-lift); margin-inline-start: 4px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.decrypt { font-variant-numeric: tabular-nums; }
.decrypt .ch { display: inline; }
.decrypt .ch.scr { color: var(--signal); opacity: .85; }
.figure dd[data-count] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { :root[data-hero-live] .plate::before, :root[data-hero-live] .case::before, :root[data-hero-live] .quote::before { animation: none; } .eyebrow::after { animation: none !important; } }
/* ---- the avatar dock: fixed, centred, on every page while the scene runs (15 Oct) ---- */
.switcher.dock { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; margin: 0; padding: 10px 14px; gap: 6px; justify-items: center;
  background: rgba(0,14,43,.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.switcher.dock .switcher__label { display: none; }
.switcher.dock .switcher__row { flex-wrap: nowrap; gap: 6px; }
.switcher.dock button { padding: 4px 12px 4px 4px; background: transparent; border-color: transparent; backdrop-filter: none; }
.switcher.dock button span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 260ms ease, opacity 200ms ease, margin 260ms ease; margin-inline-start: -8px; }
.switcher.dock button:hover span, .switcher.dock button[aria-pressed="true"] span { max-width: 180px; opacity: 1; margin-inline-start: 0; }
.switcher.dock button img { width: 44px; height: 44px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.switcher.dock button[aria-pressed="true"] { background: rgba(217,174,58,.14); border-color: rgba(217,174,58,.6); box-shadow: 0 0 24px rgba(217,174,58,.3); }
:root[data-hero-live] .footer { padding-bottom: 110px; }
@media (max-width: 1100px) { .switcher.dock button span { display: none; } }

/* Fictional-client illustrations (15 Oct 2026): cards link to a labelled demo page */
.case__wrap { display: block; color: inherit; text-decoration: none; }
.case__wrap:hover .case__logo { transform: scale(1.03); }
.footer__note { max-width: 70ch; opacity: .75; margin-block: 12px 4px; }
.demo .demo-banner { margin: 0; padding: 10px 24px; background: var(--ambition-lift); color: var(--on-ambition-lift); font: 600 13px/20px var(--font-sans); text-align: center; }
.demo .demo-hero { text-align: center; padding-top: 72px; }
.demo .demo-hero .lede { margin-inline: auto; max-width: 42ch; margin-bottom: 28px; }
.demo .demo-logo { display: block; margin: 0 auto 24px; width: 200px; height: auto; }
.demo .case__ba { max-width: 720px; margin-inline: auto; }
.demo .case__time { text-align: center; margin-top: 12px; }
.nav--demo { justify-content: space-between; }