/* ==========================================================================
   THT Design Guide — Southern Machinery
   Brand system matched to existing SMThelp landing pages
   Primary #1C64F2 · Deep navy #0b132b · Amber #f59e0b · Inter
   ========================================================================== */

:root {
  --brand: #1C64F2;
  --brand-dark: #0d3b8c;
  --brand-deep: #1e3a8a;
  --brand-050: #eff6ff;
  --brand-100: #dbeafe;

  --ink: #0b132b;
  --ink-2: #0f172a;
  --slate: #64748b;
  --slate-2: #94a3b8;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #0b132b;
  --text-2: #0f172a;
  --bg-soft: #f8fafc;
  --bg-soft-2: #f1f5f9;

  --amber: #f59e0b;
  --amber-dark: #d97706;
  --amber-050: #fffbeb;
  --amber-100: #fef3c7;

  --green: #25D366;
  --red: #dc2626;
  --red-050: #fef2f2;
  --ok: #059669;
  --ok-050: #ecfdf5;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(11, 19, 43, .06);
  --shadow: 0 4px 16px rgba(11, 19, 43, .08);
  --shadow-lg: 0 14px 40px rgba(11, 19, 43, .13);
  --maxw: 1180px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: 18px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand-text { display: none; }

.nav { display: flex; gap: 2px; margin-inline-start: auto; flex-wrap: wrap; }
.nav a {
  padding: 8px 12px; border-radius: 8px;
  color: var(--slate); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--brand-050); color: var(--brand-dark); font-weight: 600; }

.nav-toggle {
  display: none; margin-inline-start: auto;
  background: none; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 11px; font-size: 18px; cursor: pointer; color: var(--text);
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1100px 460px at 88% -12%, rgba(28,100,242,.20), transparent 62%),
    linear-gradient(170deg, #0b132b 0%, #12224a 52%, #0d3b8c 100%);
  color: #fff; padding: 62px 0 74px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #dbeafe; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(30px, 4.1vw, 50px); line-height: 1.12;
  margin: 0 0 8px; letter-spacing: -.022em; font-weight: 800;
}
.hero h1 .cn { display: block; font-size: clamp(16px, 1.9vw, 21px); font-weight: 600; color: #93b4f5; letter-spacing: .01em; margin-top: 12px; }
.hero .lead { font-size: 17px; color: #c3d2ea; margin: 18px 0 26px; max-width: 60ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 560px; }
.hero-stats .stat {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.hero-stats .num { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.hero-stats .lbl { font-size: 11.5px; color: #9db4d8; text-transform: uppercase; letter-spacing: .05em; }

.hero-img {
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.18); background: #0b132b;
}
.hero-img img { width: 100%; height: 340px; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 21px; border-radius: 10px;
  font-weight: 600; font-size: 15px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(28,100,242,.34); }
.btn-primary:hover { background: #1558d6; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* ---------- Sections ---------- */
.section { padding: 60px 0; }
.section.soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section.dark { background: var(--ink); color: #e2e8f0; }

.sec-head { max-width: 76ch; margin-bottom: 34px; }
.sec-head .tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 9px;
}
.sec-head h2 { font-size: clamp(23px, 2.7vw, 32px); margin: 0 0 10px; letter-spacing: -.018em; font-weight: 800; line-height: 1.2; }
.sec-head p { color: var(--slate); font-size: 16.5px; margin: 0; }
.section.dark .sec-head p { color: #9fb3cc; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--slate); font-size: 14.5px; }
.card .kicker { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin-bottom: 8px; }
.card.accent { border-inline-start: 3px solid var(--amber); background: var(--amber-050); }
.card.ok { border-inline-start: 3px solid var(--ok); background: var(--ok-050); }
.card.warn { border-inline-start: 3px solid var(--amber-dark); background: var(--amber-050); }
.card.bad { border-inline-start: 3px solid var(--red); background: var(--red-050); }

.stat-card { text-align: center; }
.stat-card .big { font-size: 30px; font-weight: 800; color: var(--brand-dark); letter-spacing: -.025em; line-height: 1.1; }
.stat-card .cap { font-size: 13px; color: var(--slate); margin-top: 5px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
thead th {
  background: var(--bg-soft-2); text-align: start; padding: 11px 14px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-soft); }
td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }

.badge {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.badge.ok { background: var(--ok-050); color: var(--ok); border: 1px solid #a7f3d0; }
.badge.warn { background: var(--amber-100); color: var(--amber-dark); border: 1px solid #fcd34d; }
.badge.bad { background: var(--red-050); color: var(--red); border: 1px solid #fecaca; }
.badge.info { background: var(--brand-050); color: var(--brand-dark); border: 1px solid var(--brand-100); }
.badge.neutral { background: var(--bg-soft-2); color: var(--slate); border: 1px solid var(--line-2); }

/* ---------- Formula / code ---------- */
.formula {
  background: var(--ink); color: #dbeafe; border-radius: var(--radius-sm);
  padding: 15px 18px; font-family: var(--mono); font-size: 13.5px;
  overflow-x: auto; margin: 12px 0; line-height: 1.75;
}
.formula .hl { color: #fbbf24; font-weight: 700; }
.formula .cm { color: #7f9bc4; }

.callout {
  border-inline-start: 4px solid var(--brand); background: var(--brand-050);
  padding: 15px 19px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 18px 0; font-size: 14.5px;
}
.callout.warn { border-color: var(--amber-dark); background: var(--amber-050); }
.callout.danger { border-color: var(--red); background: var(--red-050); }
.callout strong { color: var(--text); }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Calculators ---------- */
.calc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--slate-2); font-weight: 400; }
.field input, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2);
  border-radius: 8px; font-size: 14.5px; font-family: var(--font);
  color: var(--text); background: var(--surface);
}
.field input:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

.result {
  background: var(--bg-soft); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); padding: 18px; min-height: 120px;
}
.result .r-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.result .r-row:last-child { border-bottom: 0; }
.result .r-label { font-size: 13px; color: var(--slate); }
.result .r-val { font-size: 17px; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.result .r-val.ok { color: var(--ok); }
.result .r-val.bad { color: var(--red); }

/* ---------- Checklist ---------- */
.check-list { display: grid; gap: 10px; }
.check-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; transition: border-color .13s, background .13s;
}
.check-item:hover { border-color: var(--brand); background: var(--brand-050); }
.check-item input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
.check-item .ci-body { flex: 1; }
.check-item .ci-title { font-weight: 600; font-size: 14.5px; }
.check-item .ci-desc { font-size: 13px; color: var(--slate); margin-top: 2px; }
.check-item.checked { background: var(--ok-050); border-color: #a7f3d0; }
.check-item.checked .ci-title { text-decoration: line-through; color: var(--slate); }

.score-bar {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  padding: 14px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-radius: 0 0 var(--radius) var(--radius);
}
.score-bar .meter { flex: 1; height: 9px; background: var(--bg-soft-2); border-radius: 999px; overflow: hidden; min-width: 140px; }
.score-bar .meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--ok)); width: 0; transition: width .3s; }
.score-bar .val { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.gallery figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.gallery img { width: 100%; height: 152px; object-fit: cover; transition: transform .35s; }
.gallery figure:hover img { transform: scale(1.045); }
.gallery figcaption { padding: 9px 11px; font-size: 12px; color: var(--slate); line-height: 1.45; }

/* ---------- Video / catalog ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.video-card .thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-soft-2); }
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card .thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,19,43,.32); opacity: 0; transition: opacity .2s;
}
.video-card:hover .thumb .play { opacity: 1; }
.video-card .thumb .play span {
  width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.94);
  display: grid; place-items: center; color: var(--brand); font-size: 19px; padding-inline-start: 3px;
}
.video-card .vc-body { padding: 15px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.video-card h4 { margin: 0; font-size: 14.5px; line-height: 1.4; letter-spacing: -.005em; }
.video-card .vc-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.video-card .vc-desc { font-size: 13px; color: var(--slate); margin: 0; }

.filter-bar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; }
.chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--slate);
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .n { opacity: .7; font-weight: 500; margin-inline-start: 4px; }

.catalog-list { display: grid; gap: 11px; }
.catalog-item {
  display: flex; gap: 15px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 17px; transition: border-color .13s, box-shadow .13s;
}
.catalog-item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.catalog-item .ci-icon {
  width: 42px; height: 42px; border-radius: 9px; background: var(--brand-050);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: var(--brand-dark); flex-shrink: 0; text-transform: uppercase;
}
.catalog-item .ci-main { flex: 1; min-width: 0; }
.catalog-item .ci-title { font-weight: 600; font-size: 14.5px; }
.catalog-item .ci-meta { font-size: 12.5px; color: var(--slate); margin-top: 2px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-100); }
.blog-card .bc-top { height: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.blog-card .bc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-card .bc-topic { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--amber-dark); margin-bottom: 9px; }
.blog-card h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.35; letter-spacing: -.012em; }
.blog-card .bc-excerpt { font-size: 13.5px; color: var(--slate); margin: 0 0 15px; flex: 1; }
.blog-card .bc-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--slate-2); border-top: 1px solid var(--line); padding-top: 12px; }

.article { max-width: 800px; margin-inline: auto; }
.article h1 { font-size: clamp(25px, 3.2vw, 37px); line-height: 1.22; letter-spacing: -.022em; margin: 0 0 14px; }
.article h2 { font-size: 22px; margin: 40px 0 12px; letter-spacing: -.015em; padding-top: 20px; border-top: 1px solid var(--line); }
.article h2:first-of-type { border-top: 0; padding-top: 0; }
.article h3 { font-size: 17.5px; margin: 26px 0 9px; }
.article p { margin: 0 0 15px; font-size: 16.5px; color: var(--text); }
.article ul, .article ol { margin: 0 0 17px; padding-inline-start: 24px; }
.article li { margin-bottom: 7px; font-size: 16px; color: var(--text); }
.article .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--slate); margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.article .byline { display: flex; align-items: center; gap: 10px; }
.article .byline .av { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }

.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 17px 21px; margin-bottom: 30px; }
.toc .toc-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-bottom: 9px; }
.toc ol { margin: 0; padding-inline-start: 20px; }
.toc li { font-size: 14px; margin-bottom: 4px; }

/* ---------- Static (crawler-readable) articles ----------
   The full text of every article is rendered into #route-blog as real HTML so
   search engines and AI answer engines can read it without executing JS.
   Section headings are <h4> (article title is <h3>) to keep the outline correct,
   so they are styled here to match the <h2> look used by the JS-rendered view. */
.static-articles { margin-top: 62px; }
.static-articles > h2 { font-size: 22px; letter-spacing: -.015em; margin: 0 0 8px; }
.sa-intro { font-size: 14.5px; color: var(--slate); max-width: 760px; margin: 0 0 8px; }
.static-article { padding-top: 42px; margin-top: 42px; border-top: 1px solid var(--line); }
.static-article > h3 { font-size: clamp(21px, 2.5vw, 28px); line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; }
.sa-topic { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin: 0 0 12px; }
.static-article h4 { font-size: 19px; margin: 34px 0 11px; letter-spacing: -.012em; padding-top: 18px; border-top: 1px solid var(--line); }
.static-article h4:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.static-article p { font-size: 16.5px; margin: 0 0 15px; }
.static-article li { font-size: 16px; }

/* ---------- Key terms + FAQ (static, crawler-readable) ----------
   Both blocks are plain static HTML: the key terms are definition sentences in
   the "X is Y" form so an answer engine can lift them verbatim, and the FAQ
   answers carry the same questions as the FAQPage JSON-LD in <head>.
   NOTE: the definition paragraphs must stay free of inline markup — a <strong>
   inside one breaks the sentence shape the structured data relies on. */
.key-terms { margin-top: 62px; }
.key-terms > h2 { font-size: 22px; letter-spacing: -.015em; margin: 0 0 8px; }
.key-terms > p:not(.sa-intro) {
  font-size: 16.5px; margin: 0 0 11px; padding-left: 16px;
  border-left: 2px solid var(--line); max-width: 880px;
}
.faq-list { margin-top: 62px; }
.faq-list > h2 { font-size: 22px; letter-spacing: -.015em; margin: 0 0 8px; }
.faq-item { padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--line); }
.faq-item:first-of-type { padding-top: 30px; margin-top: 30px; }
.faq-item > h3 { font-size: clamp(19px, 2.3vw, 25px); line-height: 1.28; letter-spacing: -.018em; margin: 0 0 12px; }
.faq-item p { font-size: 16.5px; margin: 0 0 13px; max-width: 880px; }
.faq-item ul { margin: 0 0 14px; padding-left: 22px; max-width: 880px; }
.faq-item li { font-size: 16px; margin-bottom: 6px; }

/* ---------- Steps / flow ---------- */
.steps { display: grid; gap: 0; counter-reset: s; }
.step {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px;
  padding-bottom: 26px; position: relative;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; top: 52px; bottom: 0;
  width: 2px; background: var(--line);
}
.step .s-num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  position: relative; z-index: 1; box-shadow: 0 0 0 5px #fff;
}
.step .s-body h3 { margin: 10px 0 7px; font-size: 17px; }
.step .s-body p { margin: 0 0 8px; color: var(--slate); font-size: 14.5px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #9fb3cc; padding: 52px 0 26px; font-size: 14px; }
.footer h4 { color: #fff; font-size: 14px; margin: 0 0 13px; letter-spacing: .01em; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 34px; }
.footer a { color: #c3d2ea; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer .social { display: flex; flex-direction: column; gap: 9px; }
.footer .social a { display: flex; align-items: center; gap: 9px; }
.footer .social .ico {
  width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,.09);
  display: grid; place-items: center; flex-shrink: 0; font-size: 13px; font-weight: 700; color: #fff;
}
.footer .contact-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-sm); padding: 18px; }
.footer .wa { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 600; margin-top: 11px; }
.footer .wa:hover { background: #1eb955; text-decoration: none; color: #fff; }
.footer .browse-line { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #93a9c6; font-size: 14px; }
.footer .browse-line a { color: #dbeafe; font-weight: 600; }
.footer .bottom { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #7f95b3; }

/* ---------- Utility ---------- */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 12px; } .mt2 { margin-top: 24px; } .mt3 { margin-top: 36px; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 12px; } .mb2 { margin-bottom: 24px; }
.small { font-size: 13px; color: var(--slate); }
.center { text-align: center; }
.hidden { display: none !important; }
.route { display: none; }
.route.active { display: block; }
.divider { height: 1px; background: var(--line); margin: 34px 0; }

.view-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-img img { height: 260px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .blog-grid, .video-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
  .nav { display: none; width: 100%; flex-direction: column; padding: 10px 0 16px; }
  .nav.open { display: flex; }
  .topbar-inner { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .nav-toggle { display: block; }
  .g2, .g3, .g4, .blog-grid, .video-grid, .calc-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: 1fr; }
  .section { padding: 42px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .article h2 { font-size: 19.5px; }
}

@media print {
  .topbar, .footer, .hero-actions, .score-bar, .filter-bar { display: none; }
  body { font-size: 11pt; }
}

/* ------------------------------------------------------------------
   Smart support launcher — pinned bottom-right on every route.
   The Chatwoot SDK injects its own fixed-position nodes; these rules
   guarantee placement above all page content regardless of route.
   ------------------------------------------------------------------ */
.woot-widget-holder,
.woot--bubble-holder {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 2147483000 !important;
}

@media (max-width: 640px) {
  .woot-widget-holder,
  .woot--bubble-holder {
    bottom: 16px !important;
    right: 16px !important;
  }
}


/* ==========================================================================
   DARK THEME
   Only tokens change here — no component rules are duplicated. --ink is
   deliberately NOT overridden: it is the hero/footer/table-header background
   and must stay deep navy in both themes.
   ========================================================================== */
[data-theme="dark"] {
  --brand: #4f8ef7;
  --brand-dark: #7fb0ff;
  --brand-deep: #1e3a8a;
  --brand-050: #16233d;
  --brand-100: #1b2c4d;

  --ink-2: #e2e8f0;
  --slate: #9aa8bd;
  --slate-2: #7b8aa0;
  --line: #26314a;
  --line-2: #33405c;

  --bg: #0a0f1e;
  --surface: #111827;
  --surface-2: #161f33;
  --text: #e8edf7;
  --text-2: #dbe3f0;

  --amber: #fbbf24;
  --amber-dark: #f59e0b;
  --amber-050: #2a2110;
  --amber-100: #3a2c12;

  --green: #25D366;
  --red: #f87171;
  --red-050: #2b1518;
  --ok: #34d399;
  --ok-050: #10281f;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.55);
}

/* The topbar is translucent white in light mode; make it translucent ink here. */
[data-theme="dark"] .topbar {
  background: rgba(10,15,30,.92);
  border-bottom-color: var(--line);
}

/* Badge borders were tuned for light chips. */
[data-theme="dark"] .badge.ok   { border-color: #1c6b52; }
[data-theme="dark"] .badge.warn { border-color: #7a5a12; }
[data-theme="dark"] .badge.bad  { border-color: #7a2e33; }
[data-theme="dark"] .check-item.checked { border-color: #1c6b52; }

/* Headings inside .section.dark are already light; keep them legible. */
[data-theme="dark"] .section.dark { background: #060a15; }

/* Figures sit on a thumbnail; a white ring reads correctly in both themes. */
[data-theme="dark"] img { color-scheme: dark; }


/* ==========================================================================
   THEME + LANGUAGE SWITCHERS
   ========================================================================== */
.topbar-tools {
  display: flex; align-items: center; gap: 8px;
  margin-inline-start: 6px; flex-shrink: 0;
}

.lang-picker { position: relative; display: flex; align-items: center; }
.lp-globe {
  position: absolute; inset-inline-start: 9px;
  font-size: 13px; line-height: 1; pointer-events: none; opacity: .7;
}
.lang-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 7px 26px 7px 28px;
  padding-inline: 28px 26px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .14s ease, background-color .14s ease;
}
.lang-select:hover { border-color: var(--brand); }
.lang-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
[dir="rtl"] .lang-select { background-position: 14px calc(50% - 1px), 9px calc(50% - 1px); }

.theme-toggle {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0;
  font-size: 16px; line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.theme-toggle:hover { border-color: var(--brand); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.theme-toggle .tt-icon { display: block; }

/* ==========================================================================
   RTL
   Flex and text flow mirror automatically from dir="rtl"; these handle the
   few places that need an explicit nudge.
   ========================================================================== */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .sec-head,
[dir="rtl"] .hero-grid > div { text-align: right; }
[dir="rtl"] .hero .lead { margin-inline: 0; }

/* Latin model codes, measurements and email addresses must stay LTR even
   inside RTL paragraphs, otherwise "±0.07 mm" renders as "mm 0.07±". */
[dir="rtl"] .badge,
[dir="rtl"] code,
[dir="rtl"] .formula,
[dir="rtl"] .ci-meta,
[dir="rtl"] .r-val,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="http"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
[dir="rtl"] .formula { display: block; text-align: left; }

/* Responsive: on narrow screens the tools row wraps under the brand. */
@media (max-width: 1000px) {
  .topbar-tools { margin-inline-start: 0; }
}
@media (max-width: 760px) {
  .topbar-inner { row-gap: 10px; }
  .topbar-tools { order: 3; width: 100%; justify-content: flex-start; }
  .lang-select { font-size: 13px; }
}