/* ==========================================================================
   base.css — reset, element defaults, typography primitives, utilities.
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

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

ul, ol { list-style: none; }

/* Focus: invisible for mouse users, unmissable for keyboard users. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible,
.dark-surface :focus-visible { outline-color: var(--gold-bright); }

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

/* Scrollbars — thin and unobtrusive, matched to the paper palette. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ------------------------------------------------------------- headings -- */

/* Headings INHERIT their colour rather than pinning it.
   A pinned heading colour has to be overridden per dark section
   (`.section--dark h3 { … }`), and that override then leaks into any light
   surface nested inside — a white product card in a dark band ends up with
   cream-on-white titles. Inheriting means a surface sets `color` once and
   everything inside follows, and a light component can reset it for its whole
   subtree (see `.card`, `.panel`, `.empty-state`). */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  color: inherit;
}
:root[lang="ar"] h1,
:root[lang="ar"] h2,
:root[lang="ar"] h3,
:root[lang="ar"] h4,
:root[lang="ar"] h5 { letter-spacing: 0; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { max-width: 68ch; }

/* --------------------------------------------------------------- shared -- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section--sunken { background: var(--bg-sunken); }
/* Sets `color` once; headings and inline text inherit it. */
.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
}

/* Eyebrow: the small tracked-out label that sits above a section heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-3);
}
:root[lang="ar"] .eyebrow { text-transform: none; font-size: var(--fs-xs); }
.eyebrow::before {
  content: '';
  inline-size: 28px;
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
}
.section--dark .eyebrow { color: var(--gold-bright); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}
.section-head__text { max-width: 62ch; }
.section-head__lede {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.section--dark .section-head__lede { color: var(--dark-text-soft); }

/* Hairline rule with a gold diamond — used between major blocks. */
.rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--line-gold);
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: currentColor;
}
.rule__mark {
  inline-size: 7px;
  block-size: 7px;
  rotate: 45deg;
  background: var(--gold);
  opacity: 0.65;
}

/* ------------------------------------------------------------ utilities -- */

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: calc(var(--z-header) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: inset-block-start var(--t-base) var(--ease);
}
.skip-link:focus-visible { inset-block-start: var(--sp-4); }

.is-hidden { display: none !important; }
.no-scroll { overflow: hidden; }

.stack > * + * { margin-block-start: var(--sp-4); }

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Numerals stay Latin, lining and tabular even in Arabic.
   `lining-nums` matters: the display serif defaults to old-style figures,
   where "1" renders as a small-cap I — fine in prose, unreadable in a price
   or a dashboard statistic. */
.num {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---------------------------------------------------------- animations -- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}
@keyframes spin { to { rotate: 360deg; } }

/* Page-enter choreography: content lifts in once, on load. */
.page-enter { animation: fade-up var(--t-slow) var(--ease-out) both; }

/* Scroll-reveal — JS adds .is-in when the element crosses the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slower) var(--ease-out), transform var(--t-slower) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

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