/* Selberg Technologies: shared site styles.
   Layout lives inline in each page (it is the design reference, one to one).
   This file holds the tokens, base, forms, the interactive model, the sieve animation
   and the responsive overrides. See DESIGN.md for the system. */

:root {
  --ink: #0B1F3A;        /* text, mark outlines, dark bands */
  --paper: #F5F3EE;      /* page background */
  --graphite: #4A5160;   /* secondary text, eyebrows */
  --signal: #1F8A70;     /* accent: found dot, CTAs, rules */
  --white: #FFFFFF;      /* cards */
  --line: #E3DFD6;       /* card borders, dividers on paper */
  --line-strong: #C9C4B8;/* chip and input borders */
  --body: #2B3340;       /* body text on paper and white */
  --dark-line: #27405F;  /* borders inside dark bands */
  --dark-muted: #B9C0CC; /* eyebrows inside dark bands */
  --dark-body: #C5CBD6;  /* body text inside dark bands */
  --radius: 12px;
  --radius-lg: 14px;
  --radius-sm: 8px;
  --container: 1200px;
}

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--paper); color: var(--ink); font-synthesis: none; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

a { color: var(--ink); }
a:hover { color: var(--signal); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

button { font-family: inherit; cursor: pointer; }

/* Forms (Contact pages) */
input, textarea, select {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 14px; width: 100%;
}
textarea { resize: vertical; }

/* Interactive five-step model (home pages). Rendered by assets/js/model.js */
.stage-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  flex: 1 1 180px; min-width: 160px; min-height: 44px;
  padding: 18px 20px; border-radius: var(--radius); text-align: start; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-strong);
}
.stage-btn.is-on { background: var(--paper); border: 2px solid var(--ink); padding: 17px 19px; }
.stage-btn .stage-dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--ink); }
.stage-btn.is-on .stage-dot { background: var(--signal); border-color: var(--signal); }
.stage-btn .stage-n { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; }
[dir="rtl"] .stage-btn .stage-n { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--graphite); }
.stage-btn .stage-name { font-size: 17px; font-weight: 800; }
[dir="rtl"] .stage-btn .stage-name { font-weight: 700; }

/* Sieve animation (home hero). Data falls from four systems, one trusted stream continues. */
@keyframes sieveIn  { 0% { transform: translateY(-24px); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(132px); opacity: 0; } }
@keyframes sieveOut { 0% { transform: translateY(0); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateY(150px); opacity: 1; } }
.s-in  { animation: sieveIn 4.2s linear infinite; }
.s-out { animation: sieveOut 4.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .s-in, .s-out { animation: none; } }

/* Responsive overrides. Pages set desktop sizes inline; these win on small screens. */
@media (max-width: 900px) {
  h1 { font-size: 40px !important; line-height: 1.1 !important; }
  [dir="rtl"] h1 { font-size: 34px !important; line-height: 1.4 !important; }
  h2 { font-size: 28px !important; }
  [dir="rtl"] h2 { font-size: 26px !important; line-height: 1.45 !important; }
}
@media (max-width: 720px) {
  header nav { width: 100%; margin-left: 0 !important; margin-inline-start: 0 !important; gap: 14px 20px !important; }
  h1 { font-size: 34px !important; }
  [dir="rtl"] h1 { font-size: 30px !important; }
}

body { font-family: Manrope, sans-serif; }
[dir=rtl] body { font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif; }