/* ==========================================================================
   Base: reset, typography, focus, controls, reveal system
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html[lang="ar"] body{line-height:1.85}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.4}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:color-mix(in srgb,var(--violet-bright) 28%,transparent)}
[hidden]{display:none !important}

/* Latin terms inside Arabic sentences keep their own direction */
.term{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* Focus — always visible, 2 rings so it works on any background */
:focus{outline:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 5px color-mix(in srgb,var(--violet-bright) 22%,transparent)}
.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:200;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm);
  transform:translateY(-200%);transition:transform var(--dur-2) var(--ease);text-decoration:none;font-weight:600}
.skip-link:focus{transform:none}

/* Icons */
.ic{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:1em;height:1em}
.ic-fill{fill:currentColor;stroke:none}
html[dir="rtl"] .flip-rtl{transform:scaleX(-1)}

/* Buttons (min 44px touch target for primary controls) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--text);color:var(--bg);font-weight:600;font-size:var(--fs-sm);text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2),border-color var(--dur-2)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-grad{background:var(--grad);color:#fff;border:0}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{min-height:36px;padding:0 14px}
.btn-danger{background:var(--danger);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);
  transition:background var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease)}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.sm{width:36px;height:36px}

/* Chips & tags */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-2);line-height:1.2}
.chip-violet{background:var(--violet-soft);border-color:transparent;color:var(--violet)}
.chip-pink{background:var(--pink-soft);border-color:transparent;color:var(--pink)}
.chip-ok{background:var(--success-soft);border-color:transparent;color:var(--success)}
.chip-warn{background:var(--warning-soft);border-color:transparent;color:var(--warning)}
.chip-bad{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}

/* Segmented control */
.seg{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}
.seg button{min-height:34px;padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:var(--fs-sm);font-weight:600;
  transition:background var(--dur-2) var(--ease),color var(--dur-2)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
html[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--surface-3)}

/* Form basics */
.field{display:grid;gap:6px}
.field>label,.label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.input,.select{width:100%;min-height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}
.input::placeholder{color:var(--subtle)}

/* ---------- Reveal system (premium, one-shot, descender-safe) ----------
   Elements fade + rise + un-blur once as they enter the viewport.
   Nothing is clipped (no overflow masks), so descenders (g, y, p) stay intact. */
html.js .reveal{opacity:0;transform:translate3d(0,22px,0);filter:blur(5px);
  transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
html.js .reveal.in{opacity:1;transform:none;filter:none}
html.js .reveal.in.done{will-change:auto}
html.js .reveal-fade{opacity:0;transition:opacity .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js .reveal-fade.in{opacity:1}
html.js .reveal-scale{opacity:0;transform:scale(.97);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js .reveal-scale.in{opacity:1;transform:none}
/* word-by-word headline reveal: padding-bottom keeps descenders visible */
.words .w{display:inline-block;padding-bottom:.14em;margin-bottom:-.14em}
html.js .words .w{opacity:0;transform:translate3d(0,.55em,0);filter:blur(6px);
  transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms + 120ms)}
html.js .words.in .w{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js .reveal-fade,html.js .reveal-scale,html.js .words .w{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}