/* Industrial Machinery Atlas: shared tokens and site chrome.
   Layout: plant console. Engineering-sheet neutrals, one working blue, hazard yellow reserved for safety. */
:root{
  --bg:#e6eaee; --surface:#f8fafb; --sunk:#eef2f5; --ink:#132029; --muted:#55636f; --line:#c9d2da;
  --accent:#1d63b8; --accent-ink:#ffffff; --accent-soft:#dbe7f5;
  --ok:#17804c; --ok-soft:#daf0e3; --warn:#a96400; --warn-soft:#f7e7c9; --bad:#c42f2f; --bad-soft:#f7dcdc; --on-bad:#ffffff;
  --hazard:#e0a020; --hazard-ink:#1b1608;
  --scene:#dde4ea; --grid-a:#aebbc7; --grid-b:#c9d2da;
  --shadow:0 1px 2px rgba(20,32,41,.10), 0 4px 14px rgba(20,32,41,.06);
  --f-display:"Noto Kufi Arabic","Vazirmatn",Tahoma,sans-serif;
  --f-body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1015; --surface:#111a21; --sunk:#0d151b; --ink:#e2e9ef; --muted:#8c9baa; --line:#24323d;
    --accent:#5f9de4; --accent-ink:#06121f; --accent-soft:#14304d;
    --ok:#3dbb7e; --ok-soft:#0f2a1d; --warn:#eca23d; --warn-soft:#33250f; --bad:#f06262; --bad-soft:#3a1719; --on-bad:#1a0606;
    --hazard:#e8ad35; --hazard-ink:#1b1608;
    --scene:#0f171e; --grid-a:#2b3a46; --grid-b:#18232c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1015; --surface:#111a21; --sunk:#0d151b; --ink:#e2e9ef; --muted:#8c9baa; --line:#24323d;
  --accent:#5f9de4; --accent-ink:#06121f; --accent-soft:#14304d;
  --ok:#3dbb7e; --ok-soft:#0f2a1d; --warn:#eca23d; --warn-soft:#33250f; --bad:#f06262; --bad-soft:#3a1719; --on-bad:#1a0606;
  --hazard:#e8ad35; --hazard-ink:#1b1608;
  --scene:#0f171e; --grid-a:#2b3a46; --grid-b:#18232c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.9; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
[hidden]{ display:none !important; }
.en{ font-family:var(--f-data); font-size:12px; color:var(--muted); letter-spacing:.02em; direction:ltr; unicode-bidi:isolate; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline:16px; }
.skip{ position:absolute; inset-inline-start:8px; top:-40px; background:var(--accent); color:var(--accent-ink); padding:4px 10px; border-radius:6px; z-index:20; }
.skip:focus{ top:8px; }

/* header */
.site-top{ position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.site-top .wrap{ max-width:1760px; display:flex; align-items:center; gap:12px 22px; min-height:56px; flex-wrap:wrap; padding-block:6px; }
.logo{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:17px; line-height:1.4; }
.logo svg{ width:30px; height:30px; flex:none; }
.site-nav{ display:flex; flex-wrap:wrap; gap:2px 4px; margin-inline-start:auto; }
.site-nav a{ color:var(--muted); text-decoration:none; padding:4px 10px; border-radius:7px; font-size:15px; }
.site-nav a:hover{ color:var(--ink); background:var(--sunk); }
.site-nav a[aria-current="page"]{ color:var(--ink); font-weight:700; background:var(--sunk); }
.btn-cta{ display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:700; font-size:14.5px; padding:6px 14px; border-radius:8px; border:1px solid var(--accent); }
.btn-cta.ghost{ background:transparent; color:var(--accent); }
.btn-cta.lg{ font-size:16px; padding:9px 20px; }
@media (max-width:640px){
  .site-top .btn-cta{ display:none; }
  .site-nav{ margin-inline-start:auto; }
  .site-nav a{ padding:3px 7px; font-size:14px; }
}

/* footer */
.site-foot{ border-top:1px solid var(--line); margin-top:56px; padding-block:26px 34px; font-size:13.5px; color:var(--muted); }
.site-foot .wrap{ display:grid; gap:14px; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); }
.site-foot h2{ font-size:13.5px; color:var(--ink); margin:0 0 4px; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.site-foot a{ color:var(--muted); }
.site-foot a:hover{ color:var(--ink); }
.site-foot p{ margin:0; }
@media (max-width:760px){ .site-foot .wrap{ grid-template-columns:minmax(0,1fr); } }

/* shared content blocks */
.eyebrow{ font-family:var(--f-data); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); direction:ltr; unicode-bidi:isolate; display:inline-block; }
.section{ padding-block:52px 8px; }
.section h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(22px,2.6vw,30px); line-height:1.6; margin:4px 0 10px; text-wrap:balance; }
.section .intro{ color:var(--muted); max-width:62ch; margin:0 0 22px; font-size:16.5px; }
.prose{ max-width:68ch; }
.prose h2{ font-family:var(--f-display); font-weight:800; font-size:22px; line-height:1.6; margin:40px 0 8px; scroll-margin-top:76px; }
.prose h3{ font-size:17px; margin:24px 0 4px; }
.prose p{ margin:0 0 12px; }
.prose ul,.prose ol{ padding-inline-start:22px; margin:0 0 12px; display:grid; gap:4px; }
.prose table{ border-collapse:collapse; width:100%; font-size:14.5px; }
.table-wrap{ overflow-x:auto; margin:6px 0 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.prose th,.prose td{ text-align:start; padding:7px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose tr:last-child td{ border-bottom:0; }
.prose th{ background:var(--sunk); font-size:13px; color:var(--muted); }
.note{ border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:10px 14px; font-size:15px; margin:0 0 14px; }
.note.safety{ border-color:var(--hazard); position:relative; overflow:hidden; padding-top:18px; }
.note.safety::before{ content:""; position:absolute; inset-inline:0; top:0; height:6px; background:repeating-linear-gradient(-45deg, var(--hazard) 0 9px, var(--hazard-ink) 9px 18px); }
kbd{ font-family:var(--f-data); font-size:12px; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 6px; background:var(--surface); direction:ltr; unicode-bidi:isolate; }
.page-head{ padding-block:40px 6px; }
.page-head h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(26px,3.4vw,38px); line-height:1.55; margin:4px 0 8px; text-wrap:balance; }
.page-head p{ color:var(--muted); margin:0; max-width:62ch; font-size:17px; }
.toc{ display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:0; list-style:none; }
.toc a{ display:inline-block; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:2px 12px; font-size:14px; }
.toc a:hover{ border-color:var(--accent); }

/* landing */
.hero{ padding-block:34px 10px; }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.25fr); gap:30px; align-items:center; }
.hero h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(30px,4.6vw,54px); line-height:1.45; margin:6px 0 14px; text-wrap:balance; }
.hero .lede{ font-size:clamp(17px,1.6vw,19.5px); color:var(--muted); margin:0 0 22px; max-width:46ch; }
.hero .lede strong{ color:var(--ink); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hero-facts{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:22px 0 0; padding:0; list-style:none; font-size:14px; color:var(--muted); }
.hero-facts b{ color:var(--ink); font-size:18px; font-variant-numeric:tabular-nums; margin-inline-end:4px; }
.showcase{ position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--scene); aspect-ratio:16/10.5; box-shadow:var(--shadow); max-width:100%; }
.showcase img,.showcase iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.showcase iframe{ opacity:0; transition:opacity .6s; }
.showcase.live iframe{ opacity:1; }
.showcase .chip-live{ position:absolute; top:10px; inset-inline-start:10px; z-index:2; display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px 11px; font-size:13px; box-shadow:var(--shadow); }
.showcase .chip-live i{ width:8px; height:8px; border-radius:50%; background:var(--ok); }
.showcase .open{ position:absolute; bottom:12px; inset-inline-end:12px; z-index:2; }
@media (max-width:900px){ .hero .wrap{ grid-template-columns:minmax(0,1fr); } }

.pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
.pillar{ padding:18px 0 4px; padding-inline-end:22px; }
.pillar + .pillar{ padding-inline-start:22px; border-inline-start:1px solid var(--line); }
.pillar h3{ margin:0 0 4px; font-size:17.5px; }
.pillar p{ margin:0; color:var(--muted); font-size:15.5px; }
.pillar .glyph{ width:34px; height:34px; margin-bottom:8px; color:var(--accent); }
@media (max-width:820px){ .pillars{ grid-template-columns:minmax(0,1fr); } .pillar + .pillar{ padding-inline-start:0; border-inline-start:0; border-top:1px solid var(--line); } }

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; counter-reset:s; }
.step{ counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:grid; grid-template-rows:auto 1fr; }
.step figure{ margin:0; aspect-ratio:16/9; background:var(--scene); border-bottom:1px solid var(--line); }
.step figure img{ width:100%; height:100%; object-fit:cover; }
.step .txt{ padding:12px 16px 16px; }
.step h3{ margin:0 0 4px; font-size:17.5px; display:flex; align-items:center; gap:10px; }
.step h3::before{ content:counter(s, persian); width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-size:14px; }
.step p{ margin:0; color:var(--muted); font-size:15.5px; }
@media (max-width:760px){ .steps{ grid-template-columns:minmax(0,1fr); } }

.story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.story p{ margin:0 0 12px; }
.chainline{ list-style:none; margin:0; padding:0; counter-reset:c; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding-block:8px; }
.chainline li{ counter-increment:c; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:7px 16px; position:relative; font-size:15.5px; }
.chainline li::before{ content:counter(c, persian); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--warn-soft); border:1px solid var(--warn); font-size:13px; font-weight:700; }
.chainline li:first-child::before{ background:var(--bad); border-color:var(--bad); color:var(--on-bad); }
.chainline li:last-child::before{ background:var(--bad-soft); border-color:var(--bad); }
.chainline li:not(:last-child)::after{ content:""; position:absolute; inset-inline-start:30px; top:37px; bottom:-5px; width:1px; background:var(--line); }
.source{ font-size:13px; color:var(--muted); }
@media (max-width:820px){ .story{ grid-template-columns:minmax(0,1fr); } }

.audience{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.audience li{ border-top:2px solid var(--ink); padding-top:10px; }
.audience h3{ margin:0 0 2px; font-size:16.5px; }
.audience p{ margin:0; color:var(--muted); font-size:15px; }

/* machine catalog */
.catalog-group{ margin:0 0 34px; }
.catalog-group h2{ font-size:18px; font-family:var(--f-body); font-weight:800; margin:0 0 12px; display:flex; align-items:baseline; gap:10px; }
.catalog-group h2 span{ font-size:13px; color:var(--muted); font-weight:400; }
.mgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.mcard{ display:grid; grid-template-rows:auto 1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; color:var(--ink); text-decoration:none; min-width:0; }
a.mcard:hover{ border-color:var(--accent); box-shadow:var(--shadow); }
.mcard figure{ margin:0; aspect-ratio:16/9; background:var(--scene); border-bottom:1px solid var(--line); display:grid; place-items:center; color:var(--muted); }
.mcard figure img{ width:100%; height:100%; object-fit:cover; }
.mcard figure svg{ width:54px; height:54px; opacity:.55; }
.mcard .body{ padding:10px 14px 14px; display:grid; gap:2px; align-content:start; }
.mcard h3{ margin:0; font-size:16.5px; line-height:1.6; }
.mcard p{ margin:0; font-size:14px; color:var(--muted); }
.mcard .meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.status{ display:inline-block; font-size:12px; font-weight:700; padding:0 9px; border-radius:999px; line-height:1.9; }
.status.ready{ background:var(--ok-soft); color:var(--ok); }
.status.soon{ background:var(--sunk); color:var(--muted); border:1px dashed var(--line); }
.mcard.soon{ background:transparent; border-style:dashed; }
.mcard.soon figure{ background:transparent; }
.feature{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; color:var(--ink); text-decoration:none; margin-bottom:34px; }
.feature:hover{ border-color:var(--accent); }
.feature figure{ margin:0; background:var(--scene); min-height:240px; }
.feature figure img{ width:100%; height:100%; object-fit:cover; }
.feature .body{ padding:22px 24px; display:grid; gap:8px; align-content:center; }
.feature h3{ margin:0; font-family:var(--f-display); font-weight:800; font-size:24px; line-height:1.55; }
.feature p{ margin:0; color:var(--muted); }
.feature ul{ margin:0; padding-inline-start:20px; font-size:15px; }
@media (max-width:820px){ .feature{ grid-template-columns:minmax(0,1fr); } .feature figure{ aspect-ratio:16/9; min-height:0; } }

.band{ margin-top:56px; background:var(--surface); border-block:1px solid var(--line); padding-block:34px; }
.band .wrap{ display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; justify-content:space-between; }
.band h2{ margin:0; font-family:var(--f-display); font-weight:800; font-size:clamp(20px,2.4vw,26px); line-height:1.6; }
.band p{ margin:2px 0 0; color:var(--muted); }

.faq details{ border-bottom:1px solid var(--line); padding:10px 0; }
.faq summary{ cursor:pointer; font-weight:700; }
.faq details p{ margin:6px 0 0; color:var(--muted); }

@media (prefers-reduced-motion: reduce){ .showcase iframe{ transition:none; } }

/* theme-matched renders */
picture{ display:block; }
.step figure picture,.mcard figure picture,.feature figure picture{ width:100%; height:100%; }