/* ─────────────────────────────────────────────────────────────────────────────
   Thetaban landing page.

   The page markup carries the design's inline styles verbatim, so every rule in
   this file that has to win against one is marked !important on purpose — an
   inline style beats any selector otherwise.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Webfonts, served from this origin (no Google Fonts request) ──────────── */

@font-face {
  font-family: 'Sahel';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/sahel-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sahel';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/sahel-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html, body { margin: 0; padding: 0; background: #F6F4EF; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sahel', Tahoma, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #3E4348;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
a { color: #0A6FB8; text-decoration: none; }
a:hover { color: #C9A441; }
::selection { background: #F3EAD0; color: #1B1D21; }
input, button, textarea { font-family: inherit; }
img, svg { max-width: 100%; }

/* Body copy is justified. text-align-last keeps the closing line on the start
   edge instead of stretching it, and the hyphens/word-break defaults are left
   alone because Persian does not hyphenate. */
p {
  text-align: justify;
  text-align-last: start;
}

/* Sticky header is 68px tall; anchor targets have to clear it. */
section[id] { scroll-margin-top: 80px; }

:focus-visible {
  outline: 2px solid #C9A441;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Language switching ───────────────────────────────────────────────────── */

[data-lang="en"] { display: none !important; }
[data-tb-lang="en"] [data-lang="fa"] { display: none !important; }
[data-tb-lang="en"] [data-lang="en"] { display: revert !important; }
[data-tb-lang="en"] { direction: ltr !important; }

/* ── Section variants driven by data attributes on <html> ─────────────────── */

[data-tb-incident="off"] [data-tb-section="incident"] { display: none !important; }
[data-tb-note="audit"] { display: none !important; }
[data-tb-enf="audit-first"] [data-tb-note="audit"] { display: revert !important; }

/* ── Interaction states (the design's style-hover / style-focus) ──────────── */

.btn-lang:hover { border-color: #C9A441 !important; color: #1B1D21 !important; }
.btn-lang-dark:hover { border-color: #C9A441 !important; color: #FFFFFF !important; }
.btn-demo:hover { background: #C9A441 !important; color: #1B1D21 !important; }
.cta-primary:hover { background: #1B1D21 !important; color: #FFFFFF !important; }
.cta-secondary:hover { border-color: #1B1D21 !important; }
.btn-submit:hover { background: #C9A441 !important; color: #1B1D21 !important; }
.field:focus { border-color: #C9A441 !important; outline: none !important; }

.btn-lang, .btn-lang-dark, .btn-demo, .cta-primary, .cta-secondary, .btn-submit, .field {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Nav links carry inline `color:inherit`, so the global a:hover can never
   reach them — give them their own hover. */
.site-nav a { white-space: nowrap; }
.site-nav a:hover { color: #1B1D21 !important; }

/* ── Form status line ─────────────────────────────────────────────────────── */

.form-status {
  display: none;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #4A5057;
  background: #FBF8F0;
  border-inline-start: 2px solid #C9A441;
  padding: 12px 14px;
}
.form-status[data-state="shown"] { display: block; }
.form-status[data-state="error"] { display: block; background: #FBF1EE; border-inline-start-color: #D4694A; }

/* ── Wide blocks scroll inside themselves rather than the page ────────────── */

/* Grid and flex items default to min-width:auto, which makes them refuse to
   shrink below their content. Without this the 680px-wide comparison tables
   below stretch their whole column and the page scrolls sideways instead of
   the table scrolling inside its own box. */
.g-hero > *,
.g-video > *,
.g-split > *,
.g-cta > *,
.g-2 > *,
.g-3 > *,
.g-4 > *,
.rule-grid > *,
.fde > *,
.steps > * { min-width: 0; }

.steps { min-width: 0; }

.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* The formal Persian nav labels are long enough to wrap inside the 68px header
   before the old 960px breakpoint was reached, so the nav retires earlier now. */
@media (max-width: 1150px) {
  .site-nav { display: none !important; }
}

@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 960px) {
  .g-hero,
  .g-split,
  .g-cta { grid-template-columns: 1fr !important; gap: 44px !important; }
  .g-video { grid-template-columns: 1fr !important; gap: 20px !important; }
  .g-2,
  .g-3 { grid-template-columns: 1fr !important; }
  .rule-grid { grid-template-columns: 1fr !important; }
  .fde { grid-template-columns: 1fr !important; gap: 16px !important; }
  .steps { flex-direction: column !important; }
  .steps > .step-sep { width: auto !important; height: 1px !important; }
  .tbl-scroll > .tbl { min-width: 680px; }
}

@media (max-width: 720px) {
  .sec {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .header-inner { padding: 0 18px !important; gap: 12px !important; }
  .btn-demo { padding: 9px 13px !important; font-size: 13px !important; }
  .btn-lang { padding: 7px 10px !important; font-size: 12.5px !important; }
  .g-4 { grid-template-columns: 1fr !important; }
  .hero-facts { grid-template-columns: 1fr !important; }
  .footer-inner { gap: 18px !important; }
  .cta-primary, .cta-secondary { width: 100%; text-align: center; }
}

/* ── Product overview video ───────────────────────────────────────────────── */

/* The file is ~38 MB, so the element carries preload="none" and fetches nothing
   until someone presses play — the poster frame is the only load-time cost.
   aspect-ratio holds the box open at 16:9 so the poster arriving does not shift
   the page. */
.tb-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0B0D10;
  border-radius: 3px;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6);
}