@font-face { font-family: Geist; src: url(/fonts/Geist-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/Geist-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono-Light.ttf) format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/InstrumentSerif-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/fonts/IBMPlexSansArabic-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/fonts/IBMPlexSansArabic-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }

/*
 * packages/tokens. Dark is the primary direction. The theme follows the system unless the
 * toggle has set data-theme on <html>, so the light values appear twice: once for a light
 * system with no override, once for an explicit light choice.
 */
:root {
  --bg: #121314; --surface: #1A1B1D; --elevated: #27292C;
  --line: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.12);
  --text: #FAFAF0; --text-2: #A1A3A8; --text-3: #5F6166;
  --track: #2A2C30; --ember: #FF7A45; --ember-text: #FF7A45; --brass: #C9A86A;
  --disc-high: #24262A; --disc-low: #17181B;
  --sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Instrument Serif", Georgia, serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FAFAF8; --surface: #FFFFFF; --elevated: #ECEAE5;
    --line: rgba(0,0,0,0.07); --line-strong: rgba(0,0,0,0.14);
    --text: #0F1113; --text-2: #6B7280; --text-3: #A3A3A3;
    --track: #E8E6E1; --ember: #E8622F; --ember-text: #C2410C; --brass: #7A5F2C;
    --disc-high: #FFFFFF; --disc-low: #EFEEEA;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #FAFAF8; --surface: #FFFFFF; --elevated: #ECEAE5;
  --line: rgba(0,0,0,0.07); --line-strong: rgba(0,0,0,0.14);
  --text: #0F1113; --text-2: #6B7280; --text-3: #A3A3A3;
  --track: #E8E6E1; --ember: #E8622F; --ember-text: #C2410C; --brass: #7A5F2C;
  --disc-high: #FFFFFF; --disc-low: #EFEEEA;
  color-scheme: light;
}

/* Arabic: Plex Sans Arabic for text and headings (ADR 0006), no letter-spacing, taller lines. */
:root[lang="ar"] {
  --sans: "IBM Plex Sans Arabic", Geist, system-ui, sans-serif;
  --display: "IBM Plex Sans Arabic", Geist, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s, color .2s;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 0; }
.brand { display: flex; align-items: center; gap: 10px; font: 500 16px/1 Geist, sans-serif; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.brand svg { width: 28px; height: 28px; }
.actions { display: flex; align-items: center; gap: 8px; }
.pill { font-size: 13px; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.lang, .theme {
  display: inline-grid; place-items: center; height: 32px; min-width: 32px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--text); font: 500 13px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.lang[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; }
.lang:hover, .theme:hover { background: var(--surface); }
.lang:focus-visible, .theme:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.theme { padding: 0; }
.theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* Show the icon for the theme a tap switches to. */
.theme .sun { display: none; }
:root[data-mode="dark"] .theme .sun { display: block; }
:root[data-mode="dark"] .theme .moon { display: none; }

.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 56px 0 80px; }
h1 { font: 400 clamp(44px, 7vw, 76px)/1.02 var(--display); letter-spacing: -0.02em; }
:root[lang="ar"] h1 { font-weight: 500; font-size: clamp(38px, 6vw, 62px); line-height: 1.25; letter-spacing: 0; }
h1 em { font-style: normal; color: var(--ember-text); }
.lede { margin-top: 20px; font-size: 18px; color: var(--text-2); max-width: 30em; }
:root[lang="ar"] .lede { line-height: 1.8; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store {
  display: flex; align-items: center; gap: 12px; min-width: 196px;
  padding-block: 10px; padding-inline: 14px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text);
  cursor: default; user-select: none;
}
.store svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.store small { display: block; font-size: 11px; line-height: 1.3; color: var(--text-2); letter-spacing: 0.02em; }
:root[lang="ar"] .store small { font-size: 12px; letter-spacing: 0; }
.store strong { display: block; font: 500 17px/1.25 Geist, sans-serif; }
.note { margin-top: 14px; font-size: 14px; color: var(--text-3); }

/* The Focus Ring, counting down a short demo session. Clocks don't mirror in Arabic. */
.ring { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; direction: ltr; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: var(--track); }
.ring .arc { stroke: var(--ember); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.disc {
  position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--disc-high), var(--disc-low) 70%);
  display: grid; place-items: center; text-align: center;
}
.time { font: 300 clamp(48px, 9vw, 72px)/1 "Geist Mono", ui-monospace, monospace; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phase { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.dots i.on { background: var(--ember); width: 10px; height: 10px; margin-top: -1px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 96px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.card h2 { font: 400 26px/1.15 var(--display); margin-bottom: 8px; }
:root[lang="ar"] .card h2 { font-weight: 500; font-size: 21px; line-height: 1.5; }
.card p { color: var(--text-2); font-size: 15px; }
:root[lang="ar"] .card p { line-height: 1.8; }
.tag { display: inline-block; margin-inline-start: 6px; font: 500 11px/1 Geist, sans-serif; color: var(--brass); border: 1px solid var(--brass); border-radius: 999px; padding: 3px 7px; vertical-align: 4px; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--text-3); font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 40px; }
  .ring { width: min(100%, 300px); }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .pill { display: none; } }
@media (prefers-reduced-motion: reduce) { .ring .arc, body { transition: none; } }