/* switchboard — телефонный коммутатор: панель гнёзд, патч-шнуры дугами между секциями,
   таблички абонентов, тумблеры линий.

   ПАРАДИГМА: страница = панель ручного коммутатора начала века. Верхняя рейка .swrig —
   корпус с тумблерами линий (.swtab). Первый экран .swhero заканчивается панелью гнёзд
   .swboard[.swjacks > .swjack × 8]: каждое гнездо коммутирует читателя на свою секцию
   (href на #id секции, состояния .is-live / .is-x подсвечивают гнездо первым и вторым
   акцентом). Контентная секция .swline — «линия»: слева штекер .swplug (крупный номер
   .swnum, латунная табличка абонента .swtag, тумблер .swtoggle с положением --off),
   справа панель .swpane с левой акцентной кромкой. Между линиями лежит патч-шнур
   .swcords — inline-SVG с тремя дугами (.c1 первый акцент, .c2 второй, .c3 нейтральная)
   и штекерами .pin; viewBox 0 0 1200 78, preserveAspectRatio="none",
   у path обязателен vector-effect="non-scaling-stroke", иначе шнур раздувается по ширине.

   ПОРЯДОК БЛОКОВ:
   swrig(.swlines) -> swhero(.swkpi × 4 + .swboard) -> [swcords -> swline] × N
                   -> swnote (заметка автора) -> swfoot(.swage 18+)
   Секция со вторым акцентом = <section class="swline swline--x">.
   Внутренности .swpane: .swlead -> .swscroll>.swtable | .swgrid[.swcard] |
   .swdeck[.swseg × 6] (ступени лояльности) | .swvoice[.swquote × 4] | .swq (FAQ).

   ПЕРЕКРАСКА ПОД САЙТ: --a1 (accent_hue из набора), --a2 (второй акцент по схеме набора),
   --a3 — янтарный сигнальный, его не трогать. Табличка абонента --plate/--plate2 всегда
   светлая (латунь/слоновая кость) — на ней держится контраст тёмной панели.
   Шрифт-пара задаётся в --disp и --body, ОБА со стеком фолбэков: голое имя роняет
   страницу в Times New Roman при незагруженном вебшрифте.

   ЛОВУШКИ: все грид-колонки через minmax(0,1fr) + min-width:0 у детей, иначе таблица
   внутри .swpane растягивает страницу. Широкие таблицы — только внутрь .swscroll.

   МОБИЛЬНЫЙ (<=760px): .swline и .swjacks схлопываются в одну колонку, .swplug ложится
   строкой (номер + табличка + тумблер), шнуры .swcords скрываются, тумблеры рейки
   .swlines прячутся, CTA hero растягивается на всю ширину (кнопки от 44px по высоте).
   Горизонтального скролла у страницы нет.

   namespace .sw*  ·  контент, числа и подписи на каждом сайте свои. */

:root{
  --a1:hsl(210 58% 50%);      /* первый акцент — перекрасить под accent_hue сайта */
  --a1b:hsl(210 66% 62%);
  --a1s:hsl(210 58% 50% / .16);
  --a2:hsl(30 58% 58%);       /* второй акцент — по схеме из набора */
  --a2s:hsl(30 58% 58% / .15);
  --a3:hsl(44 76% 62%);       /* сигнальный янтарь — не трогать */
  --bg:hsl(215 12% 8%);
  --bg2:hsl(215 11% 11%);
  --panel:hsl(215 10% 14%);
  --panel2:hsl(215 9% 18%);
  --plate:hsl(40 16% 82%);
  --plate2:hsl(40 14% 70%);
  --line:hsl(215 8% 24%);
  --line2:hsl(215 8% 33%);
  --tx:hsl(210 10% 93%);
  --tx2:hsl(212 7% 74%);
  --tx3:hsl(214 6% 55%);
  --rad:4px;
  --disp:"{{FONT_DISPLAY}}",ui-monospace,"Segoe UI",Arial,sans-serif;
  --body:"{{FONT_BODY}}",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% -8%, hsl(210 40% 18% / .40), transparent 46%),
    radial-gradient(circle at 92% 4%, hsl(30 38% 20% / .28), transparent 40%),
    var(--bg);
  color:var(--tx);
  font-family:var(--body);
  font-size:17px;
  line-height:1.66;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--a1b);text-decoration:none}
p{margin:0 0 .85em}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(26px,4.1vw,42px)}
h2{font-size:clamp(21px,2.7vw,29px)}
h3{font-size:16px;letter-spacing:.02em}
.sw-disp{font-family:var(--disp)}
.sw-wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.sw-a1{color:var(--a1b)}
.sw-a2{color:var(--a2)}
.sw-em{color:var(--tx);background:linear-gradient(transparent 62%,var(--a1s) 62%);padding:0 .12em}

/* ── рейка корпуса ───────────────────────────────────────────── */
.swrig{
  position:sticky;top:0;z-index:40;
  background:
    repeating-linear-gradient(90deg,hsl(215 10% 17%) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,var(--panel2),var(--panel));
  border-bottom:2px solid var(--line);
  box-shadow:0 6px 22px hsl(215 30% 3% / .55);
}
.swrig__in{
  max-width:1180px;margin:0 auto;padding:9px 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.swlogo{display:flex;align-items:center;gap:9px;color:var(--tx);font-weight:700;letter-spacing:.06em;font-size:18px}
.swlogo i{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 50%,hsl(215 30% 5%) 0 28%,var(--a1) 30% 46%,hsl(215 12% 22%) 48% 100%);
  box-shadow:0 0 0 2px hsl(215 10% 26%),0 0 12px var(--a1s);
}
.swlines{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;min-width:0}
.swtab{
  font-family:var(--disp);font-size:11.5px;letter-spacing:.06em;color:var(--tx3);
  border:1px solid var(--line);border-radius:var(--rad);padding:5px 9px;
  background:hsl(215 12% 10%);display:inline-flex;align-items:center;gap:6px;
}
.swtab s{width:6px;height:6px;border-radius:50%;background:var(--line2);text-decoration:none}
.swtab.is-on{color:var(--tx);border-color:var(--a1)}
.swtab.is-on s{background:var(--a1b);box-shadow:0 0 8px var(--a1b)}

/* ── кнопки ──────────────────────────────────────────────────── */
.swbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:12px 22px;border-radius:var(--rad);
  font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:.03em;
  background:linear-gradient(180deg,var(--a1b),var(--a1));
  color:hsl(215 40% 6%);border:1px solid hsl(210 60% 32%);
  box-shadow:0 4px 0 hsl(210 55% 28%),0 10px 26px var(--a1s);
}
.swbtn--sm{min-height:44px;padding:9px 15px;font-size:13px}
.swbtn--ghost{
  background:transparent;color:var(--tx);border:1px solid var(--line2);box-shadow:none;
}
.swbtn--x{
  background:linear-gradient(180deg,var(--a2),hsl(30 52% 48%));
  border-color:hsl(30 50% 40%);box-shadow:0 4px 0 hsl(30 46% 36%),0 10px 26px var(--a2s);
  color:hsl(30 60% 10%);
}

/* ── первый экран ────────────────────────────────────────────── */
.swhero{padding:34px 0 8px;position:relative}
.swhero__tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--a1b);border:1px solid var(--line);border-radius:var(--rad);
  padding:5px 11px;background:hsl(215 12% 10%);margin-bottom:14px;
}
.swhero__tag s{width:7px;height:7px;border-radius:50%;background:var(--a1b);text-decoration:none;box-shadow:0 0 9px var(--a1b)}
.swhero h1{max-width:26ch}
.swhero__lede{max-width:66ch;color:var(--tx2);font-size:18.5px;margin-bottom:18px}
.swhero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.swhero__fine{font-family:var(--disp);font-size:12px;color:var(--tx3);margin:12px 0 0;letter-spacing:.02em}

.swkpi{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 0;
}
.swkpi>div{
  min-width:0;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-top:2px solid var(--a1);
  border-radius:var(--rad);padding:13px 14px;
}
.swkpi b,.swkpi em{
  display:block;font-family:var(--disp);font-style:normal;font-weight:700;
  font-size:23px;color:var(--tx);letter-spacing:-.02em;
}
.swkpi span{display:block;font-size:13.5px;color:var(--tx3);line-height:1.35;margin-top:3px}

/* ── панель гнёзд ────────────────────────────────────────────── */
.swboard{
  margin:26px 0 8px;padding:16px 16px 18px;
  background:
    repeating-linear-gradient(90deg,hsl(215 10% 15%) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,var(--panel),hsl(215 12% 11%));
  border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:inset 0 1px 0 hsl(215 10% 26%);
}
.swboard__cap{
  font-family:var(--disp);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 13px;
}
.swjacks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.swjack{
  min-width:0;display:flex;align-items:center;gap:11px;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--rad);
  background:hsl(215 13% 10%);color:var(--tx2);
}
.swjack o{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,hsl(215 34% 4%) 0 34%,hsl(215 10% 20%) 36% 62%,hsl(215 9% 28%) 64% 100%);
  box-shadow:inset 0 1px 2px hsl(0 0% 0% / .8),0 1px 0 hsl(215 10% 30%);
}
.swjack.is-live o{background:radial-gradient(circle at 50% 45%,hsl(215 34% 4%) 0 30%,var(--a1) 32% 58%,hsl(215 9% 28%) 60% 100%);box-shadow:inset 0 1px 2px hsl(0 0% 0% / .8),0 0 12px var(--a1s)}
.swjack.is-x o{background:radial-gradient(circle at 50% 45%,hsl(30 34% 6%) 0 30%,var(--a2) 32% 58%,hsl(215 9% 28%) 60% 100%);box-shadow:inset 0 1px 2px hsl(0 0% 0% / .8),0 0 12px var(--a2s)}
.swjack em{display:block;font-family:var(--disp);font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--tx3)}
.swjack span{display:block;font-size:14.5px;line-height:1.25;color:var(--tx)}

/* ── патч-шнуры ──────────────────────────────────────────────── */
.swcords{display:block;width:100%;height:78px;margin:6px 0 -12px;overflow:hidden}
.swcords svg{display:block;width:100%;height:78px}
.swcords .c1{stroke:var(--a1);stroke-width:3;fill:none;opacity:.62;stroke-linecap:round}
.swcords .c2{stroke:var(--a2);stroke-width:3;fill:none;opacity:.5;stroke-linecap:round}
.swcords .c3{stroke:var(--line2);stroke-width:2.5;fill:none;opacity:.7;stroke-linecap:round}
.swcords .pin{fill:var(--panel2);stroke:var(--line2);stroke-width:1.5}

/* ── линия = секция ──────────────────────────────────────────── */
.swline{
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:22px;
  padding:26px 0 6px;scroll-margin-top:78px;
}
.swplug{min-width:0}
.swnum{
  font-family:var(--disp);font-size:34px;font-weight:700;color:var(--line2);
  letter-spacing:-.04em;line-height:1;display:block;
}
.swtag{
  margin:11px 0 0;padding:9px 11px 10px;border-radius:3px;
  background:linear-gradient(180deg,var(--plate),var(--plate2));
  color:hsl(215 30% 12%);box-shadow:0 2px 0 hsl(40 12% 52%),0 8px 18px hsl(0 0% 0% / .35);
  position:relative;
}
.swtag:before{
  content:"";position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;
  background:hsl(40 10% 55%);box-shadow:inset 0 1px 1px hsl(0 0% 0% / .5);
}
.swtag em{display:block;font-family:var(--disp);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:hsl(215 16% 34%)}
.swtag span{display:block;font-family:var(--disp);font-size:13.5px;font-weight:700;line-height:1.3;margin-top:2px}
.swtoggle{
  display:flex;align-items:center;gap:9px;margin-top:12px;
  font-family:var(--disp);font-size:11px;letter-spacing:.09em;color:var(--tx3);text-transform:uppercase;
}
.swtoggle i{
  flex:none;width:42px;height:21px;border-radius:11px;position:relative;
  background:hsl(215 12% 10%);border:1px solid var(--line2);
}
.swtoggle i:after{
  content:"";position:absolute;top:2px;left:22px;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,var(--a1b),var(--a1));box-shadow:0 0 10px var(--a1s);
}
.swtoggle--off i:after{left:2px;background:linear-gradient(180deg,hsl(215 8% 40%),hsl(215 8% 30%));box-shadow:none}
.swpane{
  min-width:0;background:linear-gradient(180deg,var(--bg2),hsl(215 12% 9%));
  border:1px solid var(--line);border-left:3px solid var(--a1);
  border-radius:var(--rad);padding:20px 22px 18px;
}
.swline--x .swpane{border-left-color:var(--a2)}
.swline--x .swtoggle i:after{background:linear-gradient(180deg,var(--a2),hsl(30 52% 48%));box-shadow:0 0 10px var(--a2s)}
.swpane>p:last-child{margin-bottom:0}
.swlead{color:var(--tx2);font-size:17.5px}

/* ── карточки ────────────────────────────────────────────────── */
.swgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.swgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.swcard{
  min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:13px 14px;
}
.swcard h3{color:var(--a1b);margin-bottom:5px}
.swline--x .swcard h3{color:var(--a2)}
.swcard p{font-size:15px;color:var(--tx2);margin:0}
.swcard u{
  display:block;text-decoration:none;font-family:var(--disp);font-size:11.5px;
  letter-spacing:.07em;color:var(--tx3);margin-top:7px;
}

/* ── таблица ─────────────────────────────────────────────────── */
.swscroll{overflow-x:auto;margin:15px 0;border:1px solid var(--line);border-radius:var(--rad)}
.swtable{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.swtable th,.swtable td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.swtable th{
  font-family:var(--disp);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx3);background:var(--panel);white-space:nowrap;
}
.swtable td:first-child{color:var(--tx);font-family:var(--disp);font-size:13.5px}
.swtable tr:last-child td{border-bottom:0}
.swtable .num{font-family:var(--disp);color:var(--a1b);white-space:nowrap}

/* ── ступени лояльности ──────────────────────────────────────── */
.swdeck{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0}
.swseg{
  min-width:0;padding:11px 10px;border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(180deg,var(--panel),var(--bg2));
}
.swseg em{display:block;font-family:var(--disp);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--tx3)}
.swseg span{display:block;font-family:var(--disp);font-size:15px;font-weight:700;color:var(--tx);margin:3px 0 4px}
.swseg u{display:block;text-decoration:none;font-size:13px;color:var(--a1b);font-family:var(--disp)}
.swseg:nth-child(6){border-color:var(--a2);box-shadow:0 0 0 1px var(--a2s)}
.swseg:nth-child(6) u{color:var(--a2)}

/* ── отклики ─────────────────────────────────────────────────── */
.swvoice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.swquote{
  min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:14px 15px;position:relative;
}
.swquote p{font-size:15.5px;color:var(--tx2);margin:0 0 9px}
.swquote cite{
  font-style:normal;font-family:var(--disp);font-size:11.5px;letter-spacing:.06em;color:var(--tx3);
  display:flex;align-items:center;gap:8px;
}
.swquote cite s{width:5px;height:5px;border-radius:50%;background:var(--a1);text-decoration:none;flex:none}

/* ── FAQ ─────────────────────────────────────────────────────── */
.swq{border-top:1px solid var(--line);padding:13px 0 4px}
.swq h3{color:var(--tx);font-size:15.5px;margin-bottom:4px}
.swq p{font-size:15.5px;color:var(--tx2);margin:0}

/* ── заметка автора ──────────────────────────────────────────── */
.swnote{
  margin:34px 0 30px;padding:20px 22px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-top:2px solid var(--a2);border-radius:var(--rad);
}
.swnote h3{font-size:19px;color:var(--tx)}
.swnote__sig{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  font-family:var(--disp);font-size:12px;letter-spacing:.05em;color:var(--tx3);
}
.swnote__sig i{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 45%,hsl(215 34% 5%) 0 32%,var(--a2) 34% 56%,hsl(215 9% 26%) 58% 100%);
}

/* ── подвал ──────────────────────────────────────────────────── */
.swfoot{
  border-top:2px solid var(--line);
  background:linear-gradient(180deg,hsl(215 12% 10%),var(--bg));
  padding:24px 0 34px;margin-top:12px;
}
.swfoot__in{max-width:1180px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.swfoot p{font-size:14px;color:var(--tx3);margin:0 0 .6em}
.swfoot h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.swage{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  border:2px solid var(--a2);border-radius:50%;color:var(--a2);
  font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:8px;
}

/* ── мобильный ───────────────────────────────────────────────── */
@media(max-width:960px){
  .swkpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swjacks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swdeck{grid-template-columns:repeat(3,minmax(0,1fr))}
  .swline{grid-template-columns:150px minmax(0,1fr);gap:16px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .swrig__in{padding:8px 14px;gap:10px}
  .swlines{display:none}
  .sw-wrap{padding:0 14px}
  .swhero{padding:22px 0 4px}
  .swhero__lede{font-size:17px}
  .swhero__cta .swbtn{flex:1 1 100%}
  .swcords{display:none}
  .swline{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0 4px}
  .swplug{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .swnum{font-size:26px}
  .swtag{margin:0;flex:1 1 190px}
  .swtoggle{margin:0}
  .swpane{padding:16px 15px 14px}
  .swgrid,.swgrid--2{grid-template-columns:minmax(0,1fr)}
  .swvoice{grid-template-columns:minmax(0,1fr)}
  .swdeck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swfoot__in{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:420px){
  .swkpi{grid-template-columns:minmax(0,1fr)}
  .swjacks{grid-template-columns:minmax(0,1fr)}
}