/* ============================================================
   site.css — the homepage's Apple-style look, applied to the inner pages
   (about, how-it-works, partners, contact, terms, privacy, faq, ar/faq).
   Loaded AFTER each page's own <style>, so it re-maps that page's colour
   variables and restyles the shared classes (.nav, .hero, cards, footer).
   Page markup, data-i18n keys and scripts are untouched.
   ============================================================ */
/* only light: stops phone browsers (Edge/Chrome on Android "force dark") from repainting the white theme black */
:root {
  color-scheme: only light;
  --purple: #0a7556; --purple-light: #0a7556; --green: #0a7556;
  --dark: #ffffff; --card: #f5f5f7; --border: #d2d2d7;
  --text: #1d1d1f; --muted: #6e6e73; --head: #1d1d1f;
  --ink: #1d1d1f; --soft: #f5f5f7; --line: #d2d2d7; --accent: #0a7556; --accent-hover: #065c43;
  --bg: #ffffff; --pill: #0a7556; --nav-bg: rgba(255,255,255,0.72); --nav-line: rgba(0,0,0,0.08); --hover: rgba(0,0,0,0.05);
}
/* black theme — theme.js sets data-theme="dark" when the visitor picks it */
:root[data-theme="dark"] {
  color-scheme: dark;
  --purple: #2bb383; --purple-light: #2bb383; --green: #2bb383;
  --dark: #000000; --card: #1c1c1e; --border: #424245;
  --text: #f5f5f7; --muted: #a1a1a6; --head: #f5f5f7;
  --ink: #f5f5f7; --soft: #1c1c1e; --line: #424245; --accent: #2bb383; --accent-hover: #3ccf9a;
  --bg: #000000; --nav-bg: rgba(0,0,0,0.72); --nav-line: rgba(255,255,255,0.12); --hover: rgba(255,255,255,0.08);
}
html body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select {
  font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'SF Arabic', Tahoma, sans-serif;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* nav — translucent, like the homepage */
.nav {
  position: sticky; top: 0; z-index: 50; height: 52px; padding: 0 max(16px, calc((100% - 1024px) / 2));
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-line);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px; gap: 10px; }
.nav { display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.nav-logo svg { display: none; }
.nav-link, .nav-links a:not(.nav-cta) { color: var(--ink); font-size: 14px; font-weight: 400; }
.nav-link:hover, .nav-links a:not(.nav-cta):hover { color: var(--ink); opacity: .7; }
.nav a.nav-link { padding: 8px 14px; }
html[dir="rtl"] .nav-link { margin-left: 0; margin-right: auto; }

/* buttons — pill, green */
.nav-cta, .btn-primary, .btn-submit, .sidebar-cta, .cta-row a.primary {
  background: var(--pill); color: #ffffff; border: 0; border-radius: 980px;
  font-weight: 500; transition: transform 100ms ease-out;
}
.nav-cta { padding: 7px 14px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; }
.btn-primary { padding: 14px 28px; font-size: 17px; }
.nav-cta:hover, .btn-primary:hover, .btn-submit:hover, .sidebar-cta:hover, .cta-row a.primary:hover {
  color: #ffffff; text-decoration: none; filter: brightness(1.08); opacity: 1;
}
.nav-cta:active, .btn-primary:active, .btn-submit:active, .sidebar-cta:active, .cta-row a.primary:active { transform: scale(0.97); }

/* hero + sections — big type, quiet labels, no gradients */
.hero, .insight-quote, .vision-close, .close { background: var(--bg); border-color: transparent; }
.hero h1 { font-weight: 700; font-size: clamp(36px, 6vw, 64px); line-height: 1.08; letter-spacing: -0.015em; }
html[lang="ar"] .hero h1, html[lang="ar"] .section-title, html[lang="ar"] .section h2 { letter-spacing: 0; line-height: 1.35; }
.hero p { font-size: clamp(19px, 2vw, 23px); line-height: 1.5; }
html[lang="ar"] .hero p, html[lang="ar"] .section p, html[lang="ar"] .section-sub { line-height: 1.8; }
.hero-badge, .section-tag {
  background: none; border: 0; padding: 0; color: var(--muted);
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.hero h1 .accent { color: var(--ink); }
.section-title, .section h2 { font-weight: 700; letter-spacing: -0.01em; }
.section, .container { border-color: var(--line); }

/* cards — soft grey, no borders */
.problem-card, .step-card, .snapshot-card, .chart-card, .asset-card, .qa-card, .tier, .diagram,
.axes li, .contact-card, .faq-item, .stat-card, .badge-pill, .tailwind-note, .coverage {
  background: var(--soft); border-color: transparent; border-radius: 18px;
}
.stat-num, .snapshot-num, .bar-val { color: var(--ink); }
.bar-fill { background: var(--accent); }
.compare-table th.us, .compare-table td.us { background: var(--soft); color: var(--ink); }

/* forms */
input, textarea, select { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
select option { background: var(--bg); }

/* contact page sidebar — light */
.sidebar { background: var(--soft); border-color: var(--line); }
.sidebar-brand { color: var(--ink); border-color: var(--line); }
.sidebar-nav a { color: var(--ink); }
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--hover); color: var(--ink); }
.nav-badge { background: rgba(10,117,86,0.1); color: var(--accent); }

/* footer — grey band, small type */
footer { background: var(--soft); border-top: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
footer a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nav-cta, .btn-primary, .btn-submit, .sidebar-cta, .cta-row a.primary { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* language toggle (i18n.js) — light pill instead of the old dark one */
#ss-lang-toggle {
  background: rgba(255,255,255,0.85); color: var(--ink); border: 1px solid var(--line);
  font-weight: 500; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
#ss-lang-toggle:hover { background: #ffffff; border-color: var(--muted); }
@media (max-width: 600px) { #ss-lang-toggle { box-shadow: 0 2px 10px rgba(0,0,0,.12); } }
:root[data-theme="dark"] #ss-lang-toggle { background: rgba(28,28,30,0.85); }
:root[data-theme="dark"] #ss-lang-toggle:hover { background: #1c1c1e; }

/* white / black switch (theme.js) — sits in the nav, before the CTA */
#ss-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0; margin-inline-start: auto; margin-inline-end: 10px;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
#ss-theme-toggle:hover { background: var(--hover); }
/* a Partners link before it already takes the free space (its own margin-left:auto) — two auto margins
   would split the space and push Partners under the top-centre language button */
.nav .nav-link + #ss-theme-toggle { margin-inline-start: 0; }

/* phone: logo, Partners, the white/black switch and the CTA must fit one 390px row
   (.nav .x beats each page's own inline .nav-cta / .nav-link padding) */
@media (max-width: 480px) {
  .nav .nav-logo { font-size: 15px; gap: 8px; }
  .nav a.nav-link { padding: 8px 6px; }
  nav.nav { column-gap: 4px; }
  .nav .nav-cta { padding: 7px 12px; font-size: 13px; }
  #ss-theme-toggle { margin-inline-end: 4px; }
}
/* very small phones (320px): Partners stays reachable from the footer */
@media (max-width: 360px) { .nav a.nav-link { display: none; } }