:root{
  /* --- retheme here: these carry the whole brand --- */
  --ink:#0d1b2a;
  --ink-soft:#5a6c7d;
  --bg:#fbfaf8;
  --bg-alt:#f2efea;
  --accent:#0d1b2a;
  --hairline:#e2ddd5;
  --font-en:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f2efea; --ink-soft:#9aa7b4;
    --bg:#0b1218; --bg-alt:#131e27;
    --accent:#e8e2d8; --hairline:#26333d;
  }
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-en); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100dvh; overflow-x:hidden;
}
html[dir="rtl"] body{font-family:var(--font-ar)}
a{color:inherit}

/* ---------- language switch ---------- */
.topbar{
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  padding:22px clamp(20px,5vw,56px) 0;
}
.topbar .home{
  font-size:14px; letter-spacing:.02em; text-decoration:none;
  color:var(--ink-soft); transition:color .18s ease;
}
.topbar .home:hover{color:var(--ink)}
.lang-btn{
  font:inherit; font-size:13px; letter-spacing:.04em;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--hairline); border-radius:999px;
  padding:7px 16px; cursor:pointer; white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.lang-btn:hover{color:var(--ink); border-color:var(--ink-soft)}
.lang-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- landing ---------- */
body.landing::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-alt) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 110%, var(--bg-alt) 0%, transparent 55%);
}
main{position:relative; z-index:1; flex:1}
body.landing main{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px clamp(20px,6vw,64px) 56px;
}
.wordmark{
  margin:0 0 20px; font-size:clamp(34px,7.5vw,68px);
  font-weight:500; letter-spacing:-0.02em; line-height:1.06;
}
html[dir="rtl"] .wordmark{letter-spacing:0; line-height:1.24}
.rule{
  width:clamp(48px,10vw,88px); height:1px;
  background:var(--ink); opacity:.28; margin:0 0 26px;
}
.status{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--hairline); border-radius:999px;
  padding:9px 20px; background:rgba(255,255,255,.55);
}
@media (prefers-color-scheme:dark){.status{background:rgba(255,255,255,.04)}}
html[dir="rtl"] .status{letter-spacing:0; text-transform:none; font-size:13px}
.status .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.55;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.8;transform:scale(1.25)}}

/* ---------- document pages ---------- */
body.doc main{
  width:100%; max-width:760px; margin:0 auto;
  padding:44px clamp(20px,6vw,40px) 64px;
}
.doc h1{
  margin:0 0 8px; font-size:clamp(26px,4.4vw,38px);
  font-weight:500; letter-spacing:-0.015em; line-height:1.2;
}
html[dir="rtl"] .doc h1{letter-spacing:0; line-height:1.4}
.doc .updated{
  margin:0 0 40px; font-size:13px; color:var(--ink-soft);
  padding-bottom:24px; border-bottom:1px solid var(--hairline);
}
.doc h2{
  margin:38px 0 12px; font-size:clamp(16px,2.4vw,19px);
  font-weight:600; letter-spacing:-0.01em;
}
html[dir="rtl"] .doc h2{letter-spacing:0}
.doc p, .doc li{
  font-size:15px; font-weight:300; line-height:1.75; color:var(--ink-soft);
}
html[dir="rtl"] .doc p, html[dir="rtl"] .doc li{line-height:2}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px; padding-inline-start:22px}
.doc li{margin-bottom:8px}
.doc strong{color:var(--ink); font-weight:500}
.doc a[href^="mailto"]{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:1; margin-top:auto;
  padding:26px clamp(20px,6vw,64px) 30px;
  border-top:1px solid var(--hairline);
  font-size:12px; line-height:1.9; color:var(--ink-soft); text-align:center;
}
body.landing footer{border-top:none}
footer nav{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  justify-content:center; margin-bottom:12px;
}
footer nav a{text-decoration:none; transition:color .18s ease}
footer nav a:hover{color:var(--ink)}
footer .legal{opacity:.8}

/* ---------- entrance ---------- */
.reveal{opacity:0; transform:translateY(10px); animation:rise .85s cubic-bezier(.22,.8,.3,1) forwards}
.reveal:nth-child(1){animation-delay:.05s}
.reveal:nth-child(2){animation-delay:.16s}
.reveal:nth-child(3){animation-delay:.26s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none}
  .status .dot{animation:none}
}