/* TechSight AI — design tokens and component styles (extracted from the page head) */
/* ---------- Design tokens: light is the bare :root, dark redefines ---------- */
  :root {
    --bg: #F7F9FC;
    --surface: #FFFFFF;
    --surface-2: #EDF2F8;
    --line: #D3DCE8;
    --text: #0F172A;
    --muted: #4E5D75;
    --accent: #059669;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(5, 150, 105, 0.10);
    --ice: #2F5AA8;
    --ice-soft: rgba(47, 90, 168, 0.10);
    --hero-grid: rgba(15, 23, 42, 0.06);
    --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0F172A;
      --surface: #16213B;
      --surface-2: #1C2A48;
      --line: #273757;
      --text: #F1F5F9;
      --muted: #A3B1C6;
      --accent: #10B981;
      --accent-ink: #062A1E;
      --accent-soft: rgba(16, 185, 129, 0.14);
      --ice: #BAE0FF;
      --ice-soft: rgba(186, 224, 255, 0.10);
      --hero-grid: rgba(186, 224, 255, 0.07);
      --shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0F172A;
    --surface: #16213B;
    --surface-2: #1C2A48;
    --line: #273757;
    --text: #F1F5F9;
    --muted: #A3B1C6;
    --accent: #10B981;
    --accent-ink: #062A1E;
    --accent-soft: rgba(16, 185, 129, 0.14);
    --ice: #BAE0FF;
    --ice-soft: rgba(186, 224, 255, 0.10);
    --hero-grid: rgba(186, 224, 255, 0.07);
    --shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }

  html { scroll-behavior: smooth; }
  [hidden] { display: none !important; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: "IBM Plex Sans", "Readex Pro", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  html[lang="ar"] body,
  html[lang="ar"] .font-display,
  html[lang="ar"] .font-body { font-family: "Readex Pro", "IBM Plex Sans", system-ui, sans-serif; }
  html[lang="ar"] .font-mono { font-family: "IBM Plex Mono", "Readex Pro", monospace; }

  h1, h2, h3 { text-wrap: balance; }
  .eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); }
  html[lang="ar"] [data-i18n="hero.m1.n"] { font-size: 1.5rem; line-height: 1.3; }
  html[lang="ar"] .eyebrow { letter-spacing: 0; font-family: "Readex Pro", sans-serif; font-weight: 500; }
  .num { font-variant-numeric: tabular-nums; }

  .hero-grid {
    background-image:
      linear-gradient(var(--hero-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  }

  .hero-fx {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  .btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: .5rem; padding: .8rem 1.25rem; font-weight: 600; font-size: .95rem; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-secondary { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
  .btn-secondary:hover { border-color: var(--ice); }
  .btn-ghost { border: 1px solid var(--line); color: var(--text); padding: .45rem .7rem; font-size: .8rem; font-weight: 500; }
  .btn-ghost:hover { border-color: var(--ice); }

  .tab { border-bottom: 2px solid transparent; padding: .6rem .25rem; font-weight: 600; color: var(--muted); }
  .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
  .tab:hover { color: var(--text); }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; }
  .card-hover { transition: border-color .15s ease, transform .15s ease; }
  .card-hover:hover { border-color: var(--ice); transform: translateY(-2px); }

  .chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; color: var(--text); }
  .chip-accent { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

  /* Method rail */
  .gate { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .5rem .25rem; cursor: pointer; background: none; border: 0; color: var(--muted); font: inherit; }
  .gate .dot { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: .85rem; font-weight: 500; color: var(--text); transition: border-color .15s ease, background-color .15s ease; }
  .gate:hover .dot { border-color: var(--ice); }
  .gate[aria-selected="true"] { color: var(--text); }
  .gate[aria-selected="true"] .dot { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .gate.done .dot { border-color: var(--accent); color: var(--accent); }
  .rail { position: relative; }
  .rail::before { content: ""; position: absolute; top: 1.6rem; inset-inline: 8%; height: 2px; background: var(--line); z-index: 0; }
  .rail > * { position: relative; z-index: 1; }

  .tier { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--line); }
  .tier:first-child { border-top: 0; }
  .tier b { font-family: "IBM Plex Mono", monospace; color: var(--accent); font-weight: 500; }

  .field { display: flex; flex-direction: column; gap: .35rem; }
  .field label { font-size: .85rem; font-weight: 500; color: var(--muted); }
  .input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: .5rem; padding: .65rem .8rem; color: var(--text); font: inherit; }
  .input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
  .input::placeholder { color: var(--muted); opacity: .8; }
  input[type="range"] { accent-color: var(--accent); width: 100%; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  a { text-underline-offset: 3px; }

  .nav-link { color: var(--muted); font-size: .9rem; font-weight: 500; }
  .nav-link:hover { color: var(--text); }
  header { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 84%, transparent); }

  .fade-in { animation: fade .5s ease both; }
  @keyframes fade { from { opacity: .001; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .fade-in, .card-hover { animation: none; transition: none; } html { scroll-behavior: auto; } }

/* Direction-safe off-screen utility (used by the contact-form spam trap).
   Never use left:-9999px — it adds ~10000px of scrollWidth in RTL. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}