*{margin:0;padding:0;box-sizing:border-box}
:root{
  --graphite:#16181b;      /* корпус колонки */
  --ink:#1c1e22;
  --paper:#f4f1ec;         /* бумажный конус */
  --cone:#c8a06a;          /* акцент: бумага/латунь */
  --cone-dark:#856638;
  --line:#d9d3c9;
  --muted:#6e6a64;
  --card:#ffffff;
  --w:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8e4dd; --paper:#121316; --line:#2b2e33; --muted:#9a948c;
    --card:#191b1f; --cone:#d8b682; --cone-dark:#e4c99e;
  }
}
:root[data-theme="dark"]{
  --ink:#e8e4dd; --paper:#121316; --line:#2b2e33; --muted:#9a948c;
  --card:#191b1f; --cone:#d8b682; --cone-dark:#e4c99e;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font:400 17px/1.7 "Source Sans 3",-apple-system,Segoe UI,sans-serif}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
a{color:var(--cone-dark)}

/* ---- шапка: тёмная, как корпус ------------------------------------- */
.top{background:var(--graphite);color:#e9e5de}
.top__row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:17px 0}
.brand{font-family:"Oswald",Impact,sans-serif;font-size:21px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:#f2eee7;text-decoration:none;
  white-space:nowrap}
.brand b{font-weight:500;color:var(--cone)}
.nav{display:flex;gap:21px;flex-wrap:wrap;margin-left:auto}
.nav a{color:#b8b2a8;text-decoration:none;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;padding:7px 0 5px;border-bottom:2px solid transparent;
  min-height:24px;display:inline-flex;align-items:center}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--cone)}

/* ---- подпись: кривая отклика --------------------------------------- */
/* Ломаная повторяет типичную АЧХ: ровная середина, спад по краям. */
.curve{display:block;width:100%;height:26px;background:var(--graphite)}
.curve path{fill:none;stroke:var(--cone);stroke-width:1.4;opacity:.75}

/* ---- заголовок страницы -------------------------------------------- */
.head{background:var(--card);border-bottom:1px solid var(--line)}
.head__in{padding:50px 0 44px;max-width:44rem}
.head h1{font-family:"Oswald",Impact,sans-serif;font-weight:500;
  font-size:clamp(28px,4.2vw,42px);line-height:1.15;letter-spacing:.005em}
.head p{margin-top:15px;font-size:clamp(16.5px,1.8vw,19px);color:var(--muted)}
/* метаданные страницы: страна бренда, группа компонента. Стоят ПОД
   заголовком — это сведение, а не этикетка сверху. */
.meta{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  display:inline-block;
  font-family:"Oswald",sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cone-dark)}

/* ---- секции --------------------------------------------------------- */
.sec{padding:44px 0}
.sec--card{background:var(--card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.sec h2{font-family:"Oswald",sans-serif;font-weight:500;
  font-size:clamp(20px,2.5vw,27px);letter-spacing:.01em;margin-bottom:12px}
.sec h3{font-family:"Oswald",sans-serif;font-size:16px;font-weight:500;
  letter-spacing:.02em;margin-bottom:6px}
.lead{color:var(--muted);max-width:64ch;margin-bottom:26px}
.sec p+p{margin-top:14px}
.prose{max-width:36rem}
.prose p+p{margin-top:15px}

/* текст и галерея рядом на широком экране */
.duo{display:grid;gap:32px}
@media (min-width:1000px){
  .duo{grid-template-columns:minmax(0,36rem) minmax(0,1fr);align-items:start}
  .duo .gal{grid-template-columns:repeat(2,1fr)}
}

/* ---- карточки ------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);display:flex;
  flex-direction:column;overflow:hidden}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
  background:var(--paper);padding:10px}
.card__b{padding:15px 17px 18px;display:flex;flex-direction:column;flex:1}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--cone-dark)}
.card p{font-size:15px;color:var(--muted);line-height:1.6}
.card__f{margin-top:auto;padding-top:12px;font-family:"Oswald",sans-serif;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--cone-dark)}

/* ---- галерея -------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px}
/* галерея на главной: ровно один ряд, без одинокой картинки во втором */
.xrow{display:grid;gap:11px;grid-template-columns:repeat(2,1fr)}
@media (min-width:620px){.xrow{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.xrow{grid-template-columns:repeat(5,1fr)}}
.gal figure{margin:0;border:1px solid var(--line);background:var(--card);padding:8px}
.gal img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain}

/* ---- список --------------------------------------------------------- */
.list{border-top:1px solid var(--line);max-width:46rem}
.list a{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.list a:hover{background:rgba(200,160,106,.09)}
.list span:first-child{color:var(--ink);font-size:16.5px}
.list span:last-child{font-family:"Oswald",sans-serif;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---- таблица параметров --------------------------------------------- */
.spec{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.spec th,.spec td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.spec th{font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.04em;
  color:var(--muted);width:46%}

/* ---- подвал --------------------------------------------------------- */
.foot{background:var(--graphite);color:#a9a398;padding:30px 0 36px;margin-top:10px}
.foot__row{display:flex;gap:22px;flex-wrap:wrap}
.foot a{color:#c3bdb2;text-decoration:none;font-size:14px;
  padding:5px 0;min-height:26px;display:inline-flex;align-items:center}
.foot a:hover{color:#fff}
.foot__note{font-size:13.5px;margin-top:16px;max-width:72ch;color:#8d877d}

:focus-visible{outline:2px solid var(--cone);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:640px){
  .sec{padding:32px 0}
  .head__in{padding:34px 0 30px}
  .nav{gap:14px}
  .grid{grid-template-columns:1fr;gap:18px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
}


/* ---- герой главной --------------------------------------------------- */
/* Мир предмета: корпус колонки тёмный, конус бумажный. Фон героя —
   частотная сетка 20 Гц - 20 кГц, на которой лежит кривая отклика.
   Это ось измерений, а не орнамент: именно измерением заканчивается
   каждый гайд на сайте. */
.hero{position:relative;background:var(--graphite);color:#ece8e1;
  overflow:hidden;isolation:isolate}
.hero__grid{position:absolute;inset:0;z-index:0}
.hero__grid svg{width:100%;height:100%}
.hero__grid .oct{stroke:rgba(200,160,106,.14);stroke-width:1;
  vector-effect:non-scaling-stroke}
.hero__grid .db{stroke:rgba(255,255,255,.045);stroke-width:1;
  vector-effect:non-scaling-stroke}
.hero__curve{position:absolute;left:0;bottom:0;width:100%;height:62%}
.hero__curve path{fill:none;stroke:var(--cone);stroke-width:2;
  vector-effect:non-scaling-stroke;opacity:.85;
  filter:drop-shadow(0 2px 14px rgba(200,160,106,.35))}
.hero__in{position:relative;z-index:1;display:grid;gap:34px;
  grid-template-columns:1fr;align-items:center;padding:60px 0 56px}
@media (min-width:900px){
  .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;
    padding:76px 0 72px}
}
.hero__h1{font-family:"Oswald",sans-serif;font-weight:500;line-height:1.06;
  letter-spacing:-.012em;font-size:clamp(34px,5.6vw,60px);color:#fff;
  text-wrap:balance}
.hero__sub{margin-top:18px;max-width:44ch;font-size:clamp(16.5px,1.7vw,19px);
  line-height:1.62;color:#b4ada3}
.hero__act{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:2px;
  font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;
  background:var(--cone);color:#14161a;border:1px solid var(--cone);
  transition:background .18s cubic-bezier(.22,1,.36,1),
             border-color .18s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:#dcb37c;border-color:#dcb37c}
.btn--ghost{background:transparent;color:#ddd6cc;border-color:#4a4e55}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:#6b7079}
.hero__fig{margin:0;position:relative}
.hero__pic{display:block;width:100%;max-width:470px;height:auto;
  margin-left:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.6))}
.hero__scale{display:flex;justify-content:space-between;
  max-width:470px;margin:14px 0 0 auto;padding-top:9px;
  border-top:1px solid rgba(200,160,106,.3);
  font-family:"Oswald",sans-serif;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#8e877d}
@media (max-width:899px){
  .hero__pic{max-width:330px;margin:0 auto}
  .hero__scale{margin:14px auto 0;max-width:330px}
}
@media (prefers-reduced-motion:no-preference){
  .hero__curve path{stroke-dasharray:2400;stroke-dashoffset:2400;
    animation:trace 1.5s cubic-bezier(.16,1,.3,1) .15s forwards}
  @keyframes trace{to{stroke-dashoffset:0}}
}

/* широкая справочная таблица: 4 колонки, со скроллом на узком экране */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec--wide{min-width:560px}
.spec--wide th{width:auto;color:var(--ink);font-weight:600}
.spec--wide td{color:var(--muted);font-size:15px}
.spec--wide tr:nth-child(odd) td,.spec--wide tr:nth-child(odd) th{
  background:rgba(200,160,106,.045)}

/* ---- главная: вступление + порядок работы ---------------------------- */
.intro{display:grid;gap:34px}
@media (min-width:920px){
  .intro{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:54px;
    align-items:start}
}
.intro__txt p{max-width:none}
.intro__txt p+p{margin-top:14px}
.steps__h{font-family:"Oswald",sans-serif;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cone-dark);margin-bottom:16px}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;
  border-top:1px solid var(--line)}
.steps li{counter-increment:s;position:relative;padding:14px 0 14px 38px;
  border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-family:"Oswald",sans-serif;font-size:13px;color:var(--cone-dark);
  font-variant-numeric:tabular-nums}
.steps h3{margin:0 0 3px;font-size:15.5px;text-align:left}
.steps p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55;
  text-align:left;max-width:52ch}

/* ---- три фактора ----------------------------------------------------- */
.facts{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr);gap:30px}}
.fact{border-top:2px solid var(--cone);padding-top:14px}
.fact h3{margin-bottom:7px}
.fact p{color:var(--muted);font-size:15.5px;line-height:1.6}

/* ---- разделы сайта --------------------------------------------------- */
.xgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:30px}
@media (min-width:760px){.xgrid{grid-template-columns:repeat(3,1fr)}}
.xcard{display:block;position:relative;background:var(--paper);
  border:1px solid var(--line);padding:20px 20px 42px;text-decoration:none;
  transition:border-color .18s cubic-bezier(.22,1,.36,1)}
.xcard:hover{border-color:var(--cone)}
.xcard h3{color:var(--ink);margin-bottom:7px}
.xcard p{color:var(--muted);font-size:15px;line-height:1.6}
.xcard__go{position:absolute;left:20px;bottom:16px;color:var(--cone-dark);
  font-size:17px}

.lang{margin-left:14px;padding-left:14px;border-left:1px solid #3a3d42;
  color:var(--cone)!important}
.lang:hover{color:#fff!important}