/* ==========================================================================
   ترقيم للبرمجيات ونظم المعلومات — Tarqeem corporate site
   One stylesheet. No build step. No dependencies.

   Written with CSS logical properties throughout (margin-inline, padding-block,
   inset-inline, border-inline) so a single rule set serves both the Arabic RTL
   default and the English LTR toggle without any mirrored overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand — the de-facto spec, identical in tarqeem-revops and erpnext-helper
     invoice generators, plus the accents lifted from the logo artwork. */
  --brand:        #008A90;
  --brand-bright: #00A8AF;
  --brand-deep:   #00666B;
  --slate:        #0F2A3F;
  --node-blue:    #2D8FD5;
  --frame-teal:   #4CAF94;
  --lime:         #8CC63F;
  --orange:       #F08A2A;

  /* Canvas — a four-step dark ramp. Nothing else may introduce a background. */
  --bg-0: #04101A;
  --bg-1: #071A28;
  --bg-2: #0A2132;
  --bg-3: #0E2A3E;

  /* Ink. Contrast against --bg-1, measured: 16.4:1 / 7.9:1 / 5.4:1.
     --fg-dim carries 12px labels, so it has to clear 4.5:1 on its own. */
  --fg:       #F1F7F9;
  --fg-muted: #9AB0BD;
  --fg-dim:   #7592A3;

  /* Ink used ON the bright accent — white only reaches 4.2:1 there. */
  --on-accent: #04101A;

  /* Hairlines — the site is built from rules, not boxes. */
  --line:        rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .17);
  --line-brand:  rgba(0, 168, 175, .38);

  /* Glass */
  --glass:       rgba(255, 255, 255, .035);
  --glass-hover: rgba(255, 255, 255, .06);

  /* Semantic surfaces. Everything below is themeable — no rule further down
     the sheet is allowed to hardcode a colour, or light mode breaks. */
  --header-bg:    rgba(7, 26, 40, .78);
  --overlay-bg:   rgba(4, 16, 26, .97);
  --surface-tint: rgba(255, 255, 255, .025);
  --report-bg:    linear-gradient(155deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .014));
  --tint-brand:        rgba(0, 168, 175, .10);
  --tint-brand-strong: rgba(0, 168, 175, .18);
  --glow-brand:   rgba(0, 138, 144, .30);
  --shadow-lg:    0 30px 70px -30px rgba(0, 0, 0, .9);
  --shadow-float: 0 44px 90px -44px rgba(0, 0, 0, .95);

  /* Hero gradient mesh */
  --mesh-a: rgba(0, 138, 144, .34);
  --mesh-b: rgba(45, 143, 213, .22);
  --mesh-c: rgba(15, 42, 63, .85);

  /* Status. Text-weight variants, contrast-checked per theme. */
  --ok-fg:   #8CC63F;  --ok-bg:   rgba(140, 198, 63, .13);
  --warn-fg: #F08A2A;  --warn-bg: rgba(240, 138, 42, .15);
  --err-fg:  #FF9A8E;  --err-border: #FF7A6B;

  /* Type. Poppins carries Latin and numerals, El Messiri picks up Arabic
     glyph-by-glyph — the pairing documented in both DESIGN.md files. */
  --font: 'Poppins', 'El Messiri', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fluid type scale, 320px → 1440px. Floors are deliberate: --t-base never
     drops below 16px (iOS auto-zooms form fields under it) and --t-xs never
     below 12px, the readable minimum for labels. */
  --t-xs:  clamp(0.75rem, 0.73rem + 0.10vw, 0.78rem);
  --t-sm:  clamp(0.85rem, 0.83rem + 0.12vw, 0.90rem);
  --t-base:clamp(1.00rem, 0.97rem + 0.14vw, 1.04rem);
  --t-md:  clamp(1.04rem, 0.99rem + 0.26vw, 1.19rem);
  --t-lg:  clamp(1.20rem, 1.08rem + 0.56vw, 1.53rem);
  --t-xl:  clamp(1.48rem, 1.26rem + 1.05vw, 2.08rem);
  --t-2xl: clamp(1.78rem, 1.46rem + 1.60vw, 2.68rem);
  /* Arabic sets on a taller line-box than Latin, so the display size that
     works for an English hero overflows the fold in Arabic. Capped lower. */
  --t-3xl: clamp(2.02rem, 1.54rem + 2.40vw, 3.42rem);

  /* Rhythm */
  --gap:       clamp(0.85rem, 0.68rem + 0.95vw, 1.35rem);
  --section-y: clamp(2.9rem, 2.2rem + 3.6vw, 5.2rem);
  --shell:     1220px;
  --pad-x:     clamp(1.15rem, 0.5rem + 3vw, 2.5rem);

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.25, 1, .5, 1);
}

/* --------------------------------------------------------------------------
   1b. LIGHT THEME

   Designed as a pair with the dark theme rather than an inversion. Two things
   change beyond the canvas:

   - The accent darkens. #00A8AF is a fine accent on near-black but only
     reaches 2.4:1 on white; #00757C gives 5.2:1 on the canvas and 5.5:1 for
     white text on the button.
   - The status colours darken hard. Lime and orange read well on navy and are
     illegible on white, so light mode uses text-weight variants (4.7:1 / 4.8:1).

   Every value here was measured against the canvas it sits on, not eyeballed.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --bg-0: #FFFFFF;
  --bg-1: #F6F9FA;
  --bg-2: #FFFFFF;
  --bg-3: #EDF3F5;

  --fg:       #0C2231;   /* 15.4:1 */
  --fg-muted: #445D6C;   /*  6.6:1 */
  --fg-dim:   #587483;   /*  4.7:1 */

  --brand-bright: #00757C;   /* 5.2:1 on canvas */
  --brand:        #00757C;
  --on-accent:    #FFFFFF;   /* 5.5:1 on the button */

  --line:        rgba(12, 34, 49, .11);
  --line-strong: rgba(12, 34, 49, .22);
  --line-brand:  rgba(0, 117, 124, .30);

  --glass:       rgba(12, 34, 49, .022);
  --glass-hover: rgba(12, 34, 49, .05);

  --header-bg:    rgba(246, 249, 250, .82);
  --overlay-bg:   rgba(255, 255, 255, .97);
  --surface-tint: rgba(12, 34, 49, .028);
  --report-bg:    linear-gradient(155deg, #FFFFFF, #F3F8F9);
  --tint-brand:        rgba(0, 117, 124, .08);
  --tint-brand-strong: rgba(0, 117, 124, .14);
  --glow-brand:   rgba(0, 138, 144, .13);
  --shadow-lg:    0 26px 56px -30px rgba(12, 34, 49, .34);
  --shadow-float: 0 34px 66px -38px rgba(12, 34, 49, .32);

  --mesh-a: rgba(0, 168, 175, .17);
  --mesh-b: rgba(45, 143, 213, .13);
  --mesh-c: rgba(210, 230, 236, .75);

  --ok-fg:   #4A7C1F;  --ok-bg:   rgba(74, 124, 31, .11);
  --warn-fg: #A85A08;  --warn-bg: rgba(168, 90, 8, .11);
  --err-fg:  #B3261E;  --err-border: #C4372F;
}

/* The hero headline gradient needs the darker pair too, or it washes out. */
:root[data-theme="light"] .hero h1 .accent {
  background: linear-gradient(100deg, #00757C, #1B6FB0);
  -webkit-background-clip: text;
          background-clip: text;
}
:root[data-theme="light"] .stat .num {
  background: linear-gradient(160deg, var(--fg), #00757C);
  -webkit-background-clip: text;
          background-clip: text;
}

/* Selection and the skip link both sit on the accent. */
:root[data-theme="light"] ::selection { background: #00757C; color: #fff; }

/* The mark is drawn for a dark canvas — its white data bars vanish on white.
   Darken them just inside the light theme. */
:root[data-theme="light"] .brand-mark rect[fill="#fff"],
:root[data-theme="light"] .report-head svg rect[fill="#fff"],
:root[data-theme="light"] .hero-legal-name svg rect[fill="#fff"] { fill: #4A6274; }

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

/* Any rule that sets `display` outranks the UA's `[hidden] { display: none }`,
   which silently breaks every hidden/shown toggle on the page. Restate it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 82px;
}

body {
  background: var(--bg-1);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

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

h1, h2, h3, h4 {
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* Arabic does not benefit from negative tracking — it closes up the joins. */
:root[lang="ar"] h1,
:root[lang="ar"] h2,
:root[lang="ar"] h3,
:root[lang="ar"] h4 { letter-spacing: 0; line-height: 1.28; }

p { text-wrap: pretty; }

/* Phone numbers, emails, domains and tax numbers are LTR runs. Dropped into
   Arabic text the bidi algorithm reorders them — "+20 101 412 4943" renders as
   "4943 412 101 20+", which is simply the wrong number. Isolate each one so it
   keeps its own direction while still sitting in the RTL flow. */
[data-company="phoneDisplay"],
[data-company="email"],
[data-company="salesEmail"],
[data-company="supportEmail"],
[data-company="domain"],
[data-company="taxId"],
[data-company="taxCard"],
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  inline-size: 100%;
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); position: relative; }

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

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -100px;
  translate: -50% 0;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: .7rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

/* --------------------------------------------------------------------------
   4. SHARED TEXT COMPONENTS
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-bright);
}
:root[lang="ar"] .eyebrow { letter-spacing: .04em; text-transform: none; }

.eyebrow::before {
  content: '';
  inline-size: 26px;
  block-size: 1px;
  background: var(--brand-bright);
  opacity: .8;
  flex: none;
}

.section-head { max-inline-size: 62ch; margin-block-end: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem); }
.section-head h2 { font-size: var(--t-xl); margin-block: .7rem .65rem; }
.section-head p { color: var(--fg-muted); font-size: var(--t-md); }

.lede { color: var(--fg-muted); font-size: var(--t-md); max-inline-size: 66ch; }

.muted { color: var(--fg-muted); }
.dim   { color: var(--fg-dim); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
}

/* White on the brand teal only reaches 4.2:1. Dark ink on the BRIGHT teal
   reaches 6.6:1 — and reads as a far more deliberate accent on a dark canvas. */
.btn-primary {
  background: var(--brand-bright);
  color: var(--on-accent);
  box-shadow: 0 0 0 0 rgba(0, 168, 175, .45);
}
.btn-primary:hover {
  background: #2ABFC5;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0, 168, 175, .55);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn-ghost:hover {
  border-color: var(--brand-bright);
  color: var(--brand-bright);
  background: rgba(0, 168, 175, .07);
}

.btn-sm { padding: .55rem 1.05rem; font-size: var(--t-xs); }

/* The arrow glyph must point "forward" in whichever direction we're reading. */
.btn .arrow { transition: translate .22s var(--ease); }
.btn:hover .arrow { translate: 3px 0; }
:root[dir="rtl"] .btn .arrow { scale: -1 1; }
:root[dir="rtl"] .btn:hover .arrow { translate: -3px 0; }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  border-block-end: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
.site-header.is-stuck {
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-block-end-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .4rem + 1.6vw, 2.2rem);
  min-block-size: 70px;
}

/* --- Brand lockup. The full legal name lives here, visible on desktop. --- */
.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand-mark { inline-size: 38px; block-size: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.12rem; font-weight: 700; letter-spacing: .01em; }
.brand-legal {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
:root[lang="ar"] .brand-legal { letter-spacing: 0; text-transform: none; font-size: .68rem; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, .1rem + 1.1vw, 1.5rem);
  margin-inline-start: auto;
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-muted);
  padding-block: .4rem;
  position: relative;
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--brand-bright);
  transition: inline-size .25s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { inline-size: 100%; }

/* Scroll-spy: the section you are actually looking at stays marked. */
.nav-links a.is-current { color: var(--fg); }
.nav-links a.is-current::after { inline-size: 100%; opacity: .55; }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Touch targets: 44px minimum on anything tappable in the header. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-block-size: 40px;
  padding-inline: .95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  color: var(--fg-muted);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lang-toggle:hover { border-color: var(--brand-bright); color: var(--brand-bright); }

/* Theme toggle. Shows the icon of the mode you would switch TO, which is the
   convention people already read correctly without a label. */
.icon-btn {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--fg-muted);
  flex: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover { border-color: var(--brand-bright); color: var(--brand-bright); }

.icon-btn .ico-sun  { display: block; }
.icon-btn .ico-moon { display: none; }
:root[data-theme="light"] .icon-btn .ico-sun  { display: none; }
:root[data-theme="light"] .icon-btn .ico-moon { display: block; }

.nav-toggle {
  display: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg);
}
.nav-toggle:hover { border-color: var(--brand-bright); color: var(--brand-bright); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem) clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem);
  overflow: hidden;
  isolation: isolate;
}

/* Gradient mesh — three soft radial pools, biased to the reading-end corner. */
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  block-size: 150%;
  z-index: -2;
  background:
    radial-gradient(58% 48% at 78% 8%,  var(--mesh-a), transparent 62%),
    radial-gradient(46% 42% at 96% 42%, var(--mesh-b), transparent 66%),
    radial-gradient(72% 55% at 18% 96%, var(--mesh-c), transparent 70%);
  animation: mesh-drift 26s ease-in-out infinite alternate;
}
:root[dir="rtl"] .hero::before { scale: -1 1; }

@keyframes mesh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
}

/* Faint engineering grid, faded out toward the bottom. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 62px 62px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(120% 88% at 50% 0%, #000 22%, transparent 78%);
          mask-image: radial-gradient(120% 88% at 50% 0%, #000 22%, transparent 78%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero-inner { max-inline-size: 46ch; }

/* ★ The registered legal name, as real selectable text, above the headline.
   Sized to read as a company signature rather than a small eyebrow label. */
.hero-legal-name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(.95rem, .84rem + .5vw, 1.28rem);
  font-weight: 700;
  color: var(--brand-bright);
  letter-spacing: .01em;
  padding-block-end: .7rem;
  margin-block-end: 1.05rem;
  border-block-end: 1px solid var(--line-brand);
  max-inline-size: max-content;
}
.hero-legal-name svg { inline-size: 26px; block-size: 26px; flex: none; }

/* --- Hero visual: a laboratory report with the molecule motif ------------
   The mark is a molecule over a report, so the hero shows the same idea at
   full size. The values are illustrative sample data, not a real patient. */

.hero-visual { position: relative; }

.report {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--report-bg);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  box-shadow: var(--shadow-float);
  animation: float 9s ease-in-out infinite alternate;
}
.report::before {
  content: '';
  position: absolute;
  inset: 8% -12% -14% 8%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow-brand), transparent 72%);
  filter: blur(46px);
}

@keyframes float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -12px, 0); }
}

.report-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-block-end: .95rem;
  margin-block-end: .35rem;
  border-block-end: 1px solid var(--line);
}
.report-head svg { inline-size: 30px; block-size: 30px; flex: none; }
.report-head b { font-size: var(--t-sm); font-weight: 600; display: block; }
.report-head span { font-size: var(--t-xs); color: var(--fg-dim); }
.report-head .state {
  margin-inline-start: auto;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ok-fg);
  background: var(--ok-bg);
  border-radius: 999px;
  padding: .2rem .65rem;
  white-space: nowrap;
}

.rrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .7rem;
  align-items: center;
  padding-block: .62rem;
  border-block-end: 1px solid var(--line);
}
.rrow:last-of-type { border-block-end: 0; }
.rrow .rname { font-size: var(--t-xs); color: var(--fg-muted); }
.rrow .rval {
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.rpill {
  font-size: .68rem;
  font-weight: 600;
  padding: .16rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  min-inline-size: 62px;
  text-align: center;
}
.rpill.ok   { color: var(--ok-fg);   background: var(--ok-bg); }
.rpill.high { color: var(--warn-fg); background: var(--warn-bg); }

.report-ai {
  display: flex;
  align-items: start;
  gap: .6rem;
  margin-block-start: .9rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line-brand);
  border-radius: var(--radius-sm);
  background: var(--tint-brand);
}
.report-ai svg { inline-size: 17px; block-size: 17px; color: var(--brand-bright); flex: none; margin-block-start: .12rem; }
.report-ai p { font-size: var(--t-xs); color: var(--fg-muted); margin: 0; }
.report-ai strong { color: var(--brand-bright); font-weight: 600; }

.hero h1 {
  font-size: var(--t-3xl);
  font-weight: 700;
  margin-block-end: 1.05rem;
}
.hero h1 .accent {
  color: transparent;
  background: linear-gradient(100deg, var(--brand-bright), var(--node-blue));
  -webkit-background-clip: text;
          background-clip: text;
}

.hero-sub { font-size: var(--t-md); color: var(--fg-muted); max-inline-size: 56ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 1.7rem; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  /* Row gap only: the inline separation is the border + margin below, but a
     wrapped row still needs breathing space (English labels are longer). */
  gap: .9rem 0;
  margin-block-start: 2.1rem;
  padding-block-start: 1.35rem;
  border-block-start: 1px solid var(--line);
  list-style: none;
  padding-inline: 0;
}
.hero-trust li {
  padding-inline: 0 clamp(1rem, .5rem + 2vw, 2.4rem);
  margin-inline-end: clamp(1rem, .5rem + 2vw, 2.4rem);
  border-inline-end: 1px solid var(--line);
}
.hero-trust li:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.hero-trust .num {
  display: block;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.hero-trust .label { font-size: var(--t-xs); color: var(--fg-dim); }

/* --------------------------------------------------------------------------
   8. STAT BAND
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat { background: var(--bg-1); padding: clamp(1.25rem, 1rem + 1.3vw, 1.95rem) var(--gap); }
.stat .num {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--fg), var(--brand-bright));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stat .label { display: block; margin-block-start: .7rem; color: var(--fg-muted); font-size: var(--t-sm); }
.stat .note  { display: block; margin-block-start: .2rem; color: var(--fg-dim); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   9. FLAGSHIP BLOCK
   -------------------------------------------------------------------------- */

/* When a screenshot is missing its column is removed, so the split has to
   fall back to a single full-width column rather than leaving a hole. */
.split.is-single { grid-template-columns: minmax(0, 1fr); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2.2rem, 1rem + 5vw, 4.5rem);
  align-items: start;
}

/* Same cell-drawn hairline technique as .identity-grid — 14 modules rarely
   divide evenly into the available columns. */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(155px, 100%), 1fr));
  gap: 1px;
  background: var(--bg-1);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block-start: 1.6rem;
  isolation: isolate;
}
.module {
  background: var(--bg-1);
  box-shadow: 0 0 0 1px var(--line);
  padding: .85rem .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--fg-muted);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.module:hover { background: var(--bg-3); color: var(--fg); }
.module svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--brand-bright); opacity: .9; }

/* Screenshot frame — a browser chrome hint, soft shadow, brand glow behind. */
.frame {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.frame::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow-brand), transparent 70%);
  filter: blur(28px);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .85rem;
  border-block-end: 1px solid var(--line);
  background: var(--surface-tint);
}
.frame-bar i {
  inline-size: 9px; block-size: 9px;
  border-radius: 999px;
  background: var(--line-strong);
  flex: none;
}
.frame img { inline-size: 100%; }

/* --- Screenshot redaction ------------------------------------------------
   Product screenshots show a real laboratory's commercial figures — revenue,
   patient volumes, report counts. Those belong to the client, not on our
   marketing site. Each .redact patch frosts the pixels behind it, so the
   dashboard still reads as a real working product while the numbers do not
   leave the building.

   Positions are percentages of the image box, set inline per screenshot, so
   they keep working when the image is re-exported at a different resolution.
   To adjust: open the page, hover the patch, tweak --x/--y/--w/--h.          */

.shot { position: relative; display: block; line-height: 0; }
.shot img { inline-size: 100%; block-size: auto; }

/* Built mock of the product UI, shown until a real capture is supplied.
   It is plain SVG drawn on the theme tokens, so it follows light/dark and
   never goes stale against the palette. */
.mock-wrap {
  display: block;
  padding: clamp(10px, 1vw, 16px);
  background: var(--bg-1);
  line-height: 0;
}
/* The mock's coordinates are geometric, but `text-anchor: end` is *logical* —
   inside the RTL document it flips to mean "left", throwing every right-aligned
   label off the viewBox. Pin the SVG to LTR; the Arabic strings inside still
   shape and order correctly, because that is bidi, not direction. */
.mock { display: block; inline-size: 100%; block-size: auto; direction: ltr; }

.redact {
  position: absolute;
  inset-block-start: var(--y);
  left: var(--x);                 /* deliberately physical: the screenshot is
                                     a fixed raster, it does not mirror in RTL */
  inline-size: var(--w);
  block-size: var(--h);
  border-radius: 3px;
  backdrop-filter: blur(7px) saturate(60%);
  -webkit-backdrop-filter: blur(7px) saturate(60%);
  pointer-events: none;
}

/* Safari < 18 and Firefox without the flag ignore backdrop-filter; without a
   fallback the figures would render fully legible. An opaque scrim is the
   safe failure mode. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .redact { background: rgba(228, 234, 238, .93); }
}


/* --------------------------------------------------------------------------
   10. CARD GRIDS
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr)); }

.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 0.92rem + 0.75vw, 1.55rem);
  overflow: hidden;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
/* The thin accent rule along the top edge, revealed on hover. */
.card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(to right, var(--brand-bright), var(--node-blue));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .35s var(--ease);
}
.card:hover {
  background: var(--glass-hover);
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.card:hover::before { transform: scaleX(1); }

.card-icon {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint-brand);
  border: 1px solid var(--line-brand);
  color: var(--brand-bright);
  margin-block-end: 1.15rem;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.card:hover .card-icon { background: var(--tint-brand-strong); border-color: var(--brand-bright); }
.card-icon svg { inline-size: 24px; block-size: 24px; }

.card h3 { font-size: var(--t-md); margin-block-end: .3rem; }
.card .en-name {
  display: block;
  font-size: var(--t-xs);
  color: var(--fg-dim);
  letter-spacing: .06em;
  margin-block-end: .8rem;
}
.card p { color: var(--fg-muted); font-size: var(--t-sm); }

.card ul {
  list-style: none;
  padding: 0;
  margin-block-start: 1.1rem;
  display: grid;
  gap: .45rem;
}
.card ul li {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  padding-inline-start: 1.1rem;
  position: relative;
}
.card ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 999px;
  background: var(--brand-bright);
  opacity: .75;
}

/* --------------------------------------------------------------------------
   11. AI PANEL
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 130% at 100% 0%, var(--glow-brand), transparent 58%),
    var(--bg-2);
  padding: clamp(1.35rem, 1.05rem + 1.9vw, 2.5rem);
  overflow: hidden;
}
:root[dir="rtl"] .panel {
  background:
    radial-gradient(90% 130% at 0% 0%, var(--glow-brand), transparent 58%),
    var(--bg-2);
}

.feature-list { list-style: none; padding: 0; display: grid; gap: 1.15rem; }
.feature-list li { display: flex; gap: .95rem; align-items: start; }
.feature-list .fi {
  inline-size: 32px; block-size: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--tint-brand);
  border: 1px solid var(--line-brand);
  color: var(--brand-bright);
  flex: none;
}
.feature-list .fi svg { inline-size: 16px; block-size: 16px; }
.feature-list strong { display: block; font-weight: 600; font-size: var(--t-sm); }
.feature-list span { font-size: var(--t-xs); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   12. COMPLIANCE / INTEGRATIONS
   -------------------------------------------------------------------------- */

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.2rem; }
.tag {
  font-size: var(--t-xs);
  padding: .34rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-muted);
  background: var(--surface-tint);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tag:hover { border-color: var(--line-brand); color: var(--fg); }

/* --------------------------------------------------------------------------
   12b. PILLARS

   Products, integrations, industries and this section would otherwise be four
   consecutive grids of the same card, which reads as one long undifferentiated
   block. Pillars are built from hairlines instead of boxes, so the page gets a
   change of texture without a change of language.
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 1px;
  background: var(--bg-1);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.pillar {
  background: var(--bg-1);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(1.15rem, 0.98rem + 0.7vw, 1.65rem);
  transition: background-color .25s var(--ease);
}
.pillar:hover { background: var(--bg-2); }
.pillar-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-block-end: .85rem;
}
.pillar-head svg {
  inline-size: 21px;
  block-size: 21px;
  color: var(--brand-bright);
  flex: none;
}
.pillar h3 { font-size: var(--t-base); }
.pillar p { font-size: var(--t-xs); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   13. STEPS
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0; }
.step {
  padding: 1.25rem clamp(.85rem, .55rem + 1.1vw, 1.6rem);
  border-inline-start: 1px solid var(--line);
  position: relative;
}
.step:first-child { border-inline-start: 0; padding-inline-start: 0; }
.step .n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brand-bright);
  letter-spacing: .1em;
  display: block;
  margin-block-end: .8rem;
}
.step h3 { font-size: var(--t-base); margin-block-end: .4rem; }
.step p { font-size: var(--t-xs); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   14. LEGAL IDENTITY BAND — the section a verification reviewer looks for
   -------------------------------------------------------------------------- */

.identity {
  border: 1px solid var(--line-brand);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--glow-brand), transparent 60%),
    var(--bg-2);
  padding: clamp(1.3rem, 1.05rem + 1.7vw, 2.2rem);
}
.identity-name {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.25;
}
.identity-name-en {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: .04em;
  margin-block-start: .5rem;
}

/* Hairlines are drawn ON the cells, not by letting a container background
   show through a 1px gap. With auto-fit the last row is usually part-empty,
   and the gap technique renders that empty remainder as a visible lighter
   block. Cell-drawn hairlines leave it invisible however many items there are. */
.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--bg-1);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block-start: 1.5rem;
  isolation: isolate;
}
.identity-item {
  background: var(--bg-1);
  padding: .95rem 1.15rem;
  box-shadow: 0 0 0 1px var(--line);
}
.identity-item dt {
  font-size: var(--t-xs);
  color: var(--fg-dim);
  letter-spacing: .06em;
  margin-block-end: .35rem;
}
.identity-item dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.identity-item dd a:hover { color: var(--brand-bright); }

/* A TODO value renders visibly unfinished so it can't ship by accident. */
.identity-item dd.is-todo,
.todo-value {
  color: var(--warn-fg);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   15. CTA BAND + CONTACT
   -------------------------------------------------------------------------- */

.cta-band {
  text-align: center;
  background:
    radial-gradient(60% 130% at 50% 100%, var(--glow-brand), transparent 65%),
    var(--bg-0);
}
.cta-band h2 { font-size: var(--t-2xl); max-inline-size: 22ch; margin-inline: auto; }
.cta-band p { margin-block: 1.1rem 2.2rem; color: var(--fg-muted); max-inline-size: 55ch; margin-inline: auto; }
.cta-band .hero-cta { justify-content: center; margin-block-start: 0; }

.field { display: grid; gap: .45rem; margin-block-end: 1.1rem; }
.field label { font-size: var(--t-xs); color: var(--fg-muted); font-weight: 500; }

/* Required marker — an asterisk alone conveys nothing to a screen reader,
   so the visible glyph is decorative and the input keeps `required`. */
.field label .req { color: var(--orange); margin-inline-start: .2rem; }

.field input,
.field textarea,
.field select {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .78rem .95rem;      /* keeps the control ≥44px tall */
  font-size: var(--t-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
  inline-size: 100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--brand-bright);
  background: var(--bg-2);
  outline: none;
}
.field textarea { resize: vertical; min-block-size: 130px; }

/* Validation. Colour is never the only signal — an error message appears
   directly below the field it belongs to, and the field is aria-invalid. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--err-border); }

.field-error {
  display: none;
  font-size: var(--t-xs);
  color: var(--err-fg);
  align-items: center;
  gap: .35rem;
}
.field-error::before { content: '!'; font-weight: 700; }
.field.has-error .field-error { display: flex; }

.contact-methods { list-style: none; padding: 0; display: grid; gap: 1.35rem; }
.contact-methods li { display: flex; gap: .9rem; align-items: start; }
.contact-methods .fi {
  inline-size: 36px; block-size: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tint-brand);
  border: 1px solid var(--line-brand);
  color: var(--brand-bright);
  flex: none;
}
.contact-methods .fi svg { inline-size: 17px; block-size: 17px; }
.contact-methods dt { font-size: var(--t-xs); color: var(--fg-dim); }
.contact-methods dd { margin: 0; font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.contact-methods dd a:hover { color: var(--brand-bright); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-0);
  border-block-start: 1px solid var(--line);
  padding-block: clamp(2.2rem, 1.7rem + 2.2vw, 3.2rem) 1.5rem;
  font-size: var(--t-sm);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(1.8rem, 1rem + 3vw, 3.5rem);
}
.footer-brand .brand { margin-block-end: 1.1rem; }
.footer-legal-name {
  font-weight: 600;
  color: var(--fg);
  display: block;
  margin-block-end: .35rem;
}
.footer-brand p { color: var(--fg-muted); font-size: var(--t-xs); max-inline-size: 42ch; }

.footer-col h4 {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-block-end: 1rem;
  font-weight: 600;
}
:root[lang="ar"] .footer-col h4 { letter-spacing: 0; text-transform: none; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--fg-muted); font-size: var(--t-xs); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--brand-bright); }

.footer-bottom {
  margin-block-start: clamp(2.2rem, 1.5rem + 2.5vw, 3.5rem);
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--fg-dim);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom a:hover { color: var(--brand-bright); }

.socials { display: flex; gap: .5rem; }
.socials a {
  inline-size: 42px; block-size: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--fg-muted);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.socials a:hover { border-color: var(--brand-bright); color: var(--brand-bright); }
.socials svg { inline-size: 16px; block-size: 16px; }

/* --------------------------------------------------------------------------
   17. LEGAL / PROSE PAGES
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.4rem, 1.7rem + 3.4vw, 4rem) clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  border-block-end: 1px solid var(--line);
  background: radial-gradient(70% 120% at 80% 0%, var(--glow-brand), transparent 62%);
}
.page-head h1 { font-size: var(--t-2xl); margin-block: .8rem .8rem; }
.page-head p { color: var(--fg-muted); max-inline-size: 62ch; }

.prose { max-inline-size: 74ch; }
.prose h2 {
  font-size: var(--t-lg);
  margin-block: 2.8rem 1rem;
  padding-block-end: .7rem;
  border-block-end: 1px solid var(--line);
}
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-size: var(--t-base); margin-block: 1.8rem .6rem; color: var(--fg); }
.prose p, .prose li { color: var(--fg-muted); font-size: var(--t-sm); }
.prose p + p { margin-block-start: 1rem; }
.prose ul, .prose ol { margin-block: .9rem; padding-inline-start: 1.4rem; display: grid; gap: .5rem; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }
.prose table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 1.4rem;
  font-size: var(--t-xs);
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: .7rem .85rem;
  text-align: start;
  vertical-align: top;
}
.prose th { background: var(--surface-tint); color: var(--fg); font-weight: 600; }
.prose td { color: var(--fg-muted); }

.table-scroll { overflow-x: auto; }

.updated {
  display: inline-block;
  font-size: var(--t-xs);
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .85rem;
}

/* --------------------------------------------------------------------------
   18. SCROLL REVEAL
   -------------------------------------------------------------------------- */

/* Entrance only — 520ms with a short per-item stagger. Anything longer starts
   to feel like the page is loading rather than arriving. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .52s var(--ease), transform .52s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-inner { max-inline-size: 60ch; }
  .brand-legal { display: none; }
  /* Decorative — carries no information the copy does not already state. */
  .hero-visual { display: none; }
}

@media (max-width: 880px) {
  .nav-toggle { display: grid; place-items: center; }

  .nav-links {
    position: fixed;
    inset-block-start: 78px;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-block: 1px solid var(--line);
    padding: .5rem var(--pad-x) 1.4rem;
    margin-inline-start: 0;
    max-block-size: calc(100dvh - 78px);
    overflow-y: auto;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding-block: .95rem; border-block-end: 1px solid var(--line); font-size: var(--t-base); }
  .nav-links a::after { display: none; }
  .nav-links li:last-child a { border-block-end: 0; }

  .nav-actions { margin-inline-start: auto; }
  .nav-actions .btn { display: none; }

  .hero-trust li {
    border-inline-end: 0;
    padding-inline-end: 0;
    margin-inline-end: 0;
    flex: 1 1 42%;
    padding-block-end: 1rem;
  }

  .step { border-inline-start: 0; border-block-start: 1px solid var(--line); padding-inline: 0; }
  .step:first-child { border-block-start: 0; padding-block-start: 0; }

  .footer-top { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .brand-name { font-size: 1rem; }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   20. MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav, .cta-band, .socials, .hero::before, .hero::after { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .identity, .panel { border: 1px solid #999; }
}