@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* رنگ‌های برند سازه صنعت پرشیا نور: آبی و سبز لیمویی */
  --brand-blue: #2c3590;
  --accent: #a6ce39;
  --accent-soft: #c3e06a;
  --navy-950: #070a1c;
  --navy-900: #0b0f26;
  --navy-800: #121838;
  --navy-700: #1b2350;
  --line: rgba(255, 255, 255, 0.1);
  --text: #eef2f8;
  --muted: #a3afc2;
  --amber: #ffb547;
  --amber-soft: #ffd58a;
  --radius: 14px;

  /* رنگ‌های صحنه در حالت غروب؛ با اسکرول، جاوااسکریپت آن‌ها را به شب می‌برد */
  --hz: 42%;
  --sky-top: #3f4f88;
  --sky-bot: #f2a66b;
  --ground-far: #6e6460;
  --ground-near: #403b39;
  --mtn: #6a5a7a;
  --bld: #433a52;
  --win: 0.25;
  --lum: 0.8;
  --lum-f: 0.92;
  --stars: 0;
  --persp: 900px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  background: var(--navy-900);
  color: var(--text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.skip {
  position: fixed;
  top: -60px;
  right: 16px;
  z-index: 100;
  background: var(--accent);
  color: var(--navy-950);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 12px 16px auto 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(9, 14, 28, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
}
.brand-logo { height: 40px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  color: #d8dfeb;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.site-nav .nav-link:hover { background: rgba(255, 255, 255, 0.08); }
.site-nav .nav-btn { border: 1px solid rgba(255, 255, 255, 0.28); margin-inline-start: 4px; }
.site-nav .nav-btn:hover { border-color: var(--accent); }
.site-nav .nav-call { background: var(--accent); border-color: transparent; color: var(--navy-950); font-weight: 700; }
.site-nav .nav-call:hover { background: var(--accent-soft); }
.nav-call svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .site-nav .nav-link { display: none; }
  .site-header { padding-inline: 6px 14px; gap: 8px; }
  .site-nav .nav-btn { padding: 7px 12px; font-size: 0.88rem; margin: 0; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
}

/* ---------- Street scene ---------- */
.street { position: relative; height: 900vh; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: var(--persp);
  perspective-origin: 50% var(--hz);
  background: var(--sky-top);
  user-select: none;
  -webkit-user-select: none;
}

.sky {
  position: absolute;
  inset: 0 0 calc(100% - var(--hz) - 2px) 0;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
}

.sun {
  position: absolute;
  width: 110px;
  height: 110px;
  left: calc(50% - 150px);
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1cf 0 30%, #ffb86b 46%, rgba(255, 140, 70, 0.35) 58%, rgba(255, 120, 60, 0) 72%);
  will-change: transform, opacity;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  opacity: var(--stars);
}

.moon {
  position: absolute;
  top: 12%;
  right: calc(50% - 130px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f4f1e6;
  box-shadow: inset -10px -4px 0 0 #d9d4c3, 0 0 30px 6px rgba(244, 241, 230, 0.35);
  opacity: var(--stars);
}

.skyline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 24vh;
  top: calc(var(--hz) - 24vh + 1px);
}
.skyline .mtn { fill: var(--mtn); }
.skyline .bld { fill: var(--bld); }
.skyline .win { fill: #ffd27a; opacity: var(--win); }

.ground {
  position: absolute;
  inset: var(--hz) 0 0 0;
  background: linear-gradient(to bottom, var(--ground-far), var(--ground-near) 70%);
}

.road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.world {
  position: absolute;
  left: 50%;
  top: var(--hz);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.world > * {
  position: absolute;
  left: 0;
  top: 0;
  opacity: var(--fade, 1);
}

.obj img { width: 100%; height: 100%; pointer-events: none; }
.obj.dim { filter: brightness(var(--lum)); }
.obj.featured { filter: brightness(var(--lum-f)); cursor: pointer; }
.obj.lining { cursor: pointer; }
/* شب: عکس تیره‌شده‌ی آماده به جای filter، که روی گوشی سنگین است (js/main.js، nightImages) */
.obj img.night { display: none; }
.stage.is-night .obj.has-night { filter: none; }
.stage.is-night .obj.has-night > img:not(.night) { display: none; }
.stage.is-night .obj.has-night > img.night { display: block; }

/* تابلوی سر خیابان (نسخه‌ی ۱): نام و معرفی، با اسکرول از زیرش رد می‌شویم */
.gantry { width: 0; height: 0; }
.gantry > * { position: absolute; }
.gantry-steel { filter: brightness(var(--lum)); }
.gantry-post {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #171c38, #4b557c 42%, #262d55 70%, #151a34);
  box-shadow: inset 0 -16px 0 #10142a;
}
.gantry-truss {
  box-sizing: border-box;
  border-block: 6px solid #3d466e;
  background:
    repeating-linear-gradient(58deg, transparent 0 18px, #30385e 18px 22px, transparent 22px 36px),
    repeating-linear-gradient(-58deg, transparent 0 18px, #30385e 18px 22px, transparent 22px 36px);
}
.gantry-panel {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3em;
  padding: 0.8em 1.8em;
  border-radius: 0.45em;
  border: 0.16em solid #2c3590;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(166, 206, 57, 0.1), transparent 60%),
    linear-gradient(180deg, #172160 0%, #0e1544 55%, #0a0f30 100%);
  box-shadow: 0 0.5em 1.6em rgba(0, 0, 0, 0.45);
  color: #fff;
  overflow: hidden;
}
/* خط سبز داخل لبه، مثل تابلوهای راه */
.gantry-panel::before {
  content: "";
  position: absolute;
  inset: 0.32em;
  border: 0.07em solid rgba(166, 206, 57, 0.75);
  border-radius: 0.3em;
  pointer-events: none;
}
/* نور پروژکتورهای بالای تابلو در شب */
.gantry-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 228, 170, 0.22), rgba(255, 228, 170, 0) 55%);
  opacity: var(--stars, 0);
  pointer-events: none;
}
.gantry-logo {
  height: 3.3em;
  width: auto;
  padding-inline-end: 1.3em;
  border-inline-end: 0.07em solid rgba(255, 255, 255, 0.22);
}
.gantry-text { display: flex; flex-direction: column; text-align: right; }
.gantry-kicker { font-size: 1em; font-weight: 700; color: var(--accent); }
.gantry-name {
  font-size: 3.4em;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 0 0.35em rgba(255, 196, 100, 0.35);
}
.gantry-desc { margin-top: 0.15em; font-size: 1.12em; font-weight: 500; color: #d9e0ec; }
.gantry-panel.is-narrow { flex-direction: column; gap: 0; padding: 0.7em 1.1em; }
.gantry-panel.is-narrow .gantry-desc { line-height: 1.6; }
/* روی گوشی لوگو همان بالای صفحه هست */
.gantry-panel.is-narrow .gantry-logo { display: none; }
.gantry-panel.is-narrow .gantry-text { text-align: center; }
.gantry-panel.is-narrow .gantry-name { font-size: 3em; }
.gantry-light {
  width: 36px;
  height: 12px;
  border-radius: 3px 3px 6px 6px;
  background: linear-gradient(#3d466e, #1b2042);
}
.gantry-light::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 30px;
  height: 10px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff6dc, rgba(255, 214, 140, 0.5) 60%, transparent);
  opacity: var(--stars, 0);
}
/* متن اصلی همان بالا روی تابلوست؛ این‌جا فقط برای گوگل و صفحه‌خوان می‌ماند */
.stage.has-sign .intro-kicker,
.stage.has-sign .intro h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* نور چراغ‌ها */
.beam {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.beam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--g);
  height: var(--g);
  margin-left: calc(var(--g) / -2);
  margin-top: calc(var(--g) / -2);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 252, 240, 1) 0 5%,
    rgba(255, 222, 150, 0.75) 12%,
    rgba(255, 196, 100, 0.22) 34%,
    rgba(255, 180, 80, 0) 68%);
}
.beam::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--ca, 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd68c' stop-opacity='.34'/%3E%3Cstop offset='.85' stop-color='%23ffd68c' stop-opacity='.04'/%3E%3Cstop offset='1' stop-color='%23ffd68c' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='46,0 54,0 100,100 0,100' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.beam.on { opacity: var(--fade, 1); animation: flicker 0.9s ease-out; }

@keyframes flicker {
  0% { opacity: 0; }
  12% { opacity: 0.9; }
  20% { opacity: 0.15; }
  32% { opacity: 1; }
  40% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* سردر باغ انتهای کوچه */
.gate svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(var(--lum)); }
.gate-sign {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9d9b0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  filter: brightness(var(--lum));
  transition: color 0.8s, text-shadow 0.8s;
}
.gate.lit .gate-sign { filter: none; color: #fff3d6; text-shadow: 0 0 10px rgba(255, 190, 90, 0.9), 0 0 32px rgba(255, 170, 60, 0.6); }
.gate-slit {
  position: absolute;
  left: 214px;
  top: 180px;
  bottom: 0;
  width: 4px;
  background: linear-gradient(rgba(255, 212, 140, 0.4), #ffc46a);
  box-shadow: 0 0 14px 4px rgba(255, 180, 80, 0.55);
  opacity: 0;
  transition: opacity 1.2s;
}
.gate.lit .gate-slit { opacity: 1; }

/* برچسب محصولات */
.labels { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 14px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(9, 14, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  transition: background 0.2s, border-color 0.2s;
}
.tag::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.tag:hover, .tag:focus-visible { background: rgba(166, 206, 57, 0.95); color: var(--navy-950); border-color: transparent; outline: none; }
.tag-code { font-size: 0.72rem; letter-spacing: 0.05em; opacity: 0.75; direction: ltr; }
.tag-name { font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.tag-more { font-size: 0.72rem; opacity: 0.8; }

/* متن شروع و پایان */
.intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px 18vh;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.intro h1 {
  margin: 0;
  font-size: clamp(3rem, 11vw, 7.5rem);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0 24px rgba(255, 190, 90, 0.55), 0 2px 40px rgba(0, 0, 0, 0.6);
}
.intro-kicker { margin: 0 0 6px; font-weight: 700; color: var(--accent); }
.intro h1 .intro-text { display: block; line-height: 1.6; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.intro-text { margin: 10px 0 0; font-size: clamp(1rem, 2.6vw, 1.35rem); font-weight: 500; color: #d9e0ec; }
.scroll-hint {
  position: absolute;
  bottom: 9vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 12px;
  border-radius: 16px;
  background: rgba(9, 14, 28, 0.6);
  color: #fff;
  font-size: 0.9rem;
}
.mouse {
  width: 22px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.mouse span { width: 3px; height: 7px; border-radius: 2px; background: var(--accent); animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

.outro {
  position: absolute;
  inset: auto 16px 12vh 16px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s, visibility 0.6s;
}
.outro.show { opacity: 1; visibility: visible; transform: none; }
.outro h2 { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.8rem); font-weight: 900; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
.outro p { margin: 6px 0 18px; color: #d9e0ec; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.outro-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-cat {
  position: absolute;
  top: 84px;
  right: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  max-width: min(420px, calc(100% - 32px));
  padding: 10px 16px;
  border-radius: var(--radius);
  background: rgba(9, 14, 28, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s, transform 0.4s;
}
.hud-cat.show { opacity: 1; transform: none; }
.hud-num { grid-row: span 2; font-size: 1.6rem; font-weight: 900; color: var(--accent); }
.hud-title { font-weight: 800; }
.hud-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

.hud-bottom {
  position: absolute;
  bottom: 18px;
  inset-inline: 16px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(9, 14, 28, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { border-color: rgba(166, 206, 57, 0.6); }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: right; transform: scaleX(0); }

/* ---------- Content sections ---------- */
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.section { padding: 96px 0; scroll-margin-top: 70px; }
.section-alt { background: var(--navy-800); }
.section-head { margin-bottom: 32px; }
.kicker { margin: 0; color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.section h2 { margin: 4px 0 8px; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.4; }
.lead { margin: 0; color: var(--muted); max-width: 60ch; font-size: 1.05rem; }

.search { position: relative; display: flex; align-items: center; max-width: 560px; margin-bottom: 16px; }
.search-icon { position: absolute; inset-inline-start: 16px; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search-input {
  width: 100%;
  padding: 12px 48px 12px 96px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--navy-800);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.search-input::placeholder { color: var(--muted); opacity: 0.75; }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(166, 206, 57, 0.2); }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-status { position: absolute; inset-inline-end: 44px; color: var(--accent); font-size: 0.85rem; pointer-events: none; }
.search-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 40px 0; color: var(--muted); }
.search-empty-text { flex-basis: 100%; font-size: 1.05rem; }
.search-empty .filter:hover { border-color: var(--accent); color: var(--text); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--accent); color: var(--navy-950); border-color: transparent; font-weight: 700; }
.filter-count { font-size: 0.78em; opacity: 0.7; }
.filters-sub { margin-top: -12px; }
.filters-sub .filter { padding: 4px 12px; font-size: 0.88rem; }
.filters-sub .filter[aria-pressed="true"] { background: rgba(166, 206, 57, 0.18); color: var(--accent); border-color: rgba(166, 206, 57, 0.5); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 32px; }
.pager-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pager-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.pager-btn:hover:not(:disabled):not([aria-current]) { border-color: var(--accent); color: var(--text); }
.pager-btn[aria-current="page"] { background: var(--accent); color: var(--navy-950); border-color: transparent; font-weight: 700; cursor: default; }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-step { padding: 0 16px; }
.pager-gap { align-self: center; color: var(--muted); padding: 0 2px; }
.pager-info { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 560px) {
  .pager-step { order: 1; }
  .pager-pages { flex-basis: 100%; }
  .pager-info { order: 2; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card {
  display: flex;
  flex-direction: column;
  text-align: right;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-800);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s, border-color 0.25s;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); border-color: rgba(166, 206, 57, 0.55); outline: none; }
.card-media {
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 22px 18px 0;
  background: radial-gradient(120% 90% at 50% 100%, #2a3a5e 0, var(--navy-700) 45%, var(--navy-800) 100%);
}
.card-media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.card-body { padding: 14px 16px 16px; }
.card-body > span { display: block; }
.card-code { margin: 0; font-size: 0.75rem; color: var(--accent); direction: ltr; text-align: right; letter-spacing: 0.05em; }
.card-name { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; }
.card-cat { margin: 0; font-size: 0.85rem; color: var(--muted); }

.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.features li { padding: 18px; border-radius: var(--radius); background: var(--navy-900); border: 1px solid var(--line); }
.features strong { display: block; margin-bottom: 4px; }
.features span { color: var(--muted); font-size: 0.92rem; line-height: 1.7; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .features { grid-template-columns: 1fr; }
}

.factory { margin: 40px 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--navy-900); }
.factory img { width: 100%; height: auto; aspect-ratio: 1100 / 425; object-fit: cover; }
.factory figcaption { padding: 10px 16px; color: var(--muted); font-size: 0.9rem; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ارتباط با ما: خیابان در شب، با چراغی که وقتی می‌رسید روشن می‌شود ---------- */
.ci {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background: currentColor;
  -webkit-mask: var(--ci) center / contain no-repeat;
  mask: var(--ci) center / contain no-repeat;
}
.ci-phone { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.ci-mobile { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.ci-whatsapp { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21'/%3E%3Cpath d='M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1'/%3E%3C/svg%3E"); }
.ci-mail { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.ci-instagram { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }
.ci-telegram { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
.ci-pin { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ci-office { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h1M14 15h1M10 21v-3h4v3'/%3E%3C/svg%3E"); }
.ci-factory { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l5 3v-3l5 3V4h4l1 17z'/%3E%3Cpath d='M7 17h1M11 17h1M15 17h1'/%3E%3C/svg%3E"); }
.ci-clock { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.contact-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 320px);
  gap: 24px 48px;
  padding: 56px 56px 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(44, 53, 144, 0.45) 0%, transparent 60%),
    linear-gradient(180deg, #0e1433 0%, #090d24 65%, #070a1c 100%);
}
/* پیاده‌رو زیر چراغ */
.contact-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14px;
  z-index: -1;
  background: linear-gradient(180deg, #1a1f3d, #0b0f26);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-skyline { position: absolute; inset: auto 0 14px; z-index: -1; width: 100%; height: 130px; }
.contact-skyline .sk-bld { fill: #141a42; opacity: 0.85; }
.contact-skyline .sk-win { fill: var(--amber-soft); opacity: 0.5; transition: opacity 1.6s ease 0.7s; }

.contact-main { position: relative; z-index: 2; align-self: center; padding-bottom: 120px; }
.contact-main h2 { max-width: 16ch; }
.contact-hl { color: var(--amber-soft); text-shadow: 0 0 24px rgba(255, 181, 71, 0.65); transition: color 0.8s ease 0.4s, text-shadow 0.8s ease 0.4s; }

.contact-lamp { position: relative; display: flex; justify-content: center; align-self: end; height: 440px; }
.lamp-svg { position: relative; z-index: 1; height: 100%; width: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)); }
.lamp-glass-off { fill: #262c4a; }
.lamp-halo {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 232, 170, 0.8) 0, rgba(255, 190, 90, 0.34) 13%, rgba(255, 181, 71, 0.12) 32%, transparent 62%);
}
/* نوری که از فانوس روی پیاده‌رو می‌ریزد */
.lamp-cone {
  position: absolute;
  top: 25%;
  bottom: 0;
  left: 50%;
  width: 420px;
  transform: translateX(-50%);
  pointer-events: none;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 205, 120, 0.26), rgba(255, 205, 120, 0.05) 85%);
  mix-blend-mode: screen;
}
.lamp-pool {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 340px;
  height: 70px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 196, 110, 0.4), transparent 70%);
}
/* خاموش تا وقتی به این بخش برسید (فقط با جاوااسکریپت) */
.contact-stage.is-waiting .lamp-glass-on,
.contact-stage.is-waiting .lamp-halo,
.contact-stage.is-waiting .lamp-cone,
.contact-stage.is-waiting .lamp-pool { opacity: 0; }
.contact-stage.is-waiting .sk-win { opacity: 0.08; }
.contact-stage.is-waiting .contact-hl { color: inherit; text-shadow: none; }
.contact-stage.is-lit .lamp-glass-on,
.contact-stage.is-lit .lamp-cone,
.contact-stage.is-lit .lamp-pool { animation: lamp-on 1.4s ease-out both; }
.contact-stage.is-lit .lamp-halo { animation: lamp-on 1.4s ease-out both, lamp-breathe 5s ease-in-out 1.4s infinite alternate; }
@keyframes lamp-on {
  0% { opacity: 0; }
  10% { opacity: 0.8; }
  16% { opacity: 0.1; }
  26% { opacity: 0.9; }
  32% { opacity: 0.3; }
  48%, 100% { opacity: 1; }
}
@keyframes lamp-breathe { to { opacity: 0.82; } }

.contact-call {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 460px;
  margin-top: 28px;
  padding: 14px 22px 14px 18px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--navy-950);
  text-decoration: none;
  box-shadow: 0 18px 50px -18px rgba(166, 206, 57, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.contact-call:hover, .contact-call:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 60px -16px rgba(166, 206, 57, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); outline: none; }
.contact-call-icon { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy-950); color: var(--accent); }
.contact-call-icon .ci { width: 24px; height: 24px; }
.contact-call-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--navy-950); animation: call-ring 2.4s ease-out infinite; }
@keyframes call-ring {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(1.5); opacity: 0; }
}
.contact-call-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-call-label { font-size: 0.88rem; font-weight: 600; opacity: 0.75; }
.contact-call-number { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; line-height: 1.2; letter-spacing: 0.02em; unicode-bidi: plaintext; text-align: right; }
.contact-call-arrow { margin-inline-start: auto; font-size: 1.5rem; transition: transform 0.25s; }
.contact-call:hover .contact-call-arrow { transform: translateX(-6px); }

.contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.contact-link:hover { border-color: rgba(166, 206, 57, 0.6); background: rgba(166, 206, 57, 0.08); }
.contact-link .ci { width: 20px; height: 20px; color: var(--accent); }
.contact-link-label { color: var(--muted); font-size: 0.85rem; }
.contact-link-value { font-weight: 700; unicode-bidi: plaintext; }

.contact-more { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; margin-top: 24px; }
.contact-more > div { padding: 32px; border-radius: 20px; background: var(--navy-800); border: 1px solid var(--line); }
.contact-sub { margin: 0 0 22px; font-size: 1.15rem; font-weight: 800; }

.contact-steps { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.contact-steps li { position: relative; display: grid; gap: 4px; min-height: 40px; padding-inline-start: 56px; counter-increment: step; }
.contact-steps li::before {
  content: counter(step, persian);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--navy-900);
  color: var(--accent);
  font-weight: 800;
}
.contact-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 19px; top: 44px; bottom: -18px; width: 2px; background: linear-gradient(rgba(166, 206, 57, 0.5), rgba(166, 206, 57, 0.08)); }
.contact-steps strong { font-weight: 800; }
.contact-steps span { color: var(--muted); font-size: 0.95rem; line-height: 1.8; }

.contact-places { display: grid; gap: 12px; }
.contact-place { position: relative; min-height: 76px; padding: 16px 16px 16px 16px; padding-inline-start: 76px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.contact-place::before { content: ""; position: absolute; inset-inline-start: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(166, 206, 57, 0.12); }
.contact-place > .ci { position: absolute; inset-inline-start: 16px; top: 16px; width: 44px; height: 44px; color: var(--accent); -webkit-mask-size: 22px; mask-size: 22px; }
.contact-place-text { display: flex; flex-direction: column; gap: 2px; }
.contact-place-label { color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.contact-place-value { line-height: 1.9; }

@media (max-width: 760px) {
  .contact-stage { grid-template-columns: 1fr; gap: 0; padding: 24px 20px 0; border-radius: 22px; }
  .contact-lamp { order: -1; justify-self: end; height: 180px; margin-bottom: 4px; }
  .lamp-halo { width: 320px; height: 320px; }
  .lamp-cone { width: 200px; }
  .lamp-pool { width: 160px; height: 36px; }
  .contact-main { padding-bottom: 110px; }
  .contact-skyline { height: 90px; }
  .contact-call { gap: 12px; padding: 12px 14px; }
  .contact-call-icon { width: 44px; height: 44px; }
  .contact-more { grid-template-columns: 1fr; }
  .contact-more > div { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-call-icon::after, .contact-stage .lamp-halo { animation: none; }
}

.site-footer { padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.credit strong { color: var(--text); font-weight: 800; }
.credit:hover, .credit:focus-visible { border-color: rgba(166, 206, 57, 0.6); color: var(--text); outline: none; }
.credit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--accent); color: var(--navy-950); }
.btn-primary:hover { background: var(--accent-soft); }
.btn-ghost { background: rgba(9, 14, 28, 0.5); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn-ghost:hover { border-color: var(--accent); }

/* ---------- Modal ---------- */
.modal {
  width: min(920px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--navy-800);
  color: var(--text);
  overflow: auto;
}
.modal[open] { display: grid; grid-template-columns: 1fr 1.1fr; }
.modal::backdrop { background: rgba(3, 6, 14, 0.7); backdrop-filter: blur(4px); }
.modal-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
  padding: 36px 24px 0;
  background: radial-gradient(120% 90% at 50% 100%, #2f4370 0, var(--navy-700) 45%, var(--navy-900) 100%);
}
.modal-media img { max-height: 440px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); }
.modal-body { padding: 32px 28px 28px; }
.modal-code { margin: 0; color: var(--accent); direction: ltr; text-align: right; letter-spacing: 0.05em; font-size: 0.85rem; }
.modal-body h3 { margin: 2px 0 0; font-size: 1.6rem; font-weight: 900; line-height: 1.5; }
.modal-cat { margin: 0 0 12px; color: var(--muted); }
.modal-desc { margin: 0 0 16px; }
.specs { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 0.95rem; }
.specs th, .specs td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.specs th { width: 38%; color: var(--muted); font-weight: 500; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(9, 14, 28, 0.7);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 720px) {
  .modal[open] { grid-template-columns: 1fr; }
  .modal-media { min-height: 260px; }
  .modal-media img { max-height: 280px; }
  .modal-body { padding: 22px 18px 20px; }
}

.noscript { position: fixed; inset: auto 16px 16px; padding: 12px; border-radius: 10px; background: var(--accent); color: var(--navy-950); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mouse span, .beam.on { animation: none; }
}

/* جابه‌جایی بین نسخه‌های طراحی (/1 /2 /3) */
.versions {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: rgba(9, 14, 28, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.85rem;
  color: var(--muted);
}
.versions a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
}
.versions a:hover { background: rgba(255, 255, 255, 0.1); }
.versions a[aria-current="page"] { background: var(--accent); color: var(--navy-950); font-weight: 800; }

/* پیش‌نمایش از پنل ادمین */
body.is-preview::after {
  content: "پیش‌نمایش — تغییرات هنوز ذخیره نشده‌اند";
  position: fixed;
  z-index: 200;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--navy-950);
  font-size: 0.85rem;
  font-weight: 700;
  pointer-events: none;
}

/* ---------- صفحه‌های محصول، دسته و ۴۰۴ ---------- */
body.inner { background: var(--navy-900); }
.page { padding: 110px 0 80px; min-height: 70vh; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; font-size: 0.9rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text); }
.page-title { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.4; }
.inner .section-head .kicker { margin-bottom: 10px; }
.product { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.product-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 460px;
  padding: 40px 24px 0;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 100%, #2f4370 0, var(--navy-700) 45%, var(--navy-800) 100%);
}
.product-media img { max-height: 520px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); }
.product-info h1 { margin: 2px 0 4px; font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 900; line-height: 1.4; }
.product-cat a { color: var(--muted); }
.product-desc { font-size: 1.05rem; }
.specs-title { margin: 22px 0 6px; font-size: 1.1rem; }
.product-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.related { margin-top: 64px; }
.related h2, .other-cats h2 { font-size: 1.3rem; margin: 0 0 16px; }
.other-cats { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.other-cats h2 { flex-basis: 100%; }
.other-cats .filter { text-decoration: none; color: var(--text); }
.notfound { text-align: center; padding: 60px 0; }
.notfound .lead { margin: 0 auto 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; }
.footer-links:empty { display: none; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }
a.card { color: inherit; text-decoration: none; }
@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; gap: 24px; }
  .product-media { min-height: 320px; }
  .product-media img { max-height: 340px; }
}

/* گوشی: محو کردن پس‌زمینه (backdrop-filter) روی صحنه‌ای که هر فریم تکان می‌خورد برای گوشی خیلی سنگین است */
@media (pointer: coarse), (max-width: 760px) {
  .site-header, .tag, .chip, .hud-cat, .versions {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header { background: rgba(9, 14, 28, 0.9); }
  .tag { background: rgba(9, 14, 28, 0.88); }
  .chip, .hud-cat, .versions { background: rgba(9, 14, 28, 0.84); }
}