/* 7k797.buzz — шаблон "stained": витражная мастерская. Префикс классов stg- */

:root {
  --stg-lead: #20242b;
  --stg-lead-dark: #171a20;
  --stg-lead-light: #2b313a;
  --stg-cobalt: #2d5fa8;
  --stg-cobalt-deep: #1d3f73;
  --stg-amber: #e0a11c;
  --stg-amber-pale: #f3d288;
  --stg-glaze: #e9edf3;
  --stg-came: 5px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 6%, rgba(45, 95, 168, .30), transparent 46%),
    radial-gradient(circle at 86% 22%, rgba(224, 161, 28, .18), transparent 40%),
    var(--stg-lead);
  color: var(--stg-glaze);
  font-family: "Fira Sans Extra Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.66;
  -webkit-text-size-adjust: 100%;
}

.stg-frame {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ---------- розетка в шапке ---------- */

.stg-rose {
  position: relative;
  margin: 0 0 26px;
  padding: 34px 32px 34px;
  background: linear-gradient(135deg, var(--stg-cobalt-deep) 0%, var(--stg-lead-dark) 58%, #3a2a10 100%);
  border: var(--stg-came) solid var(--stg-lead-dark);
  box-shadow: inset 0 0 0 2px rgba(224, 161, 28, .32);
}

.stg-rose-art {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 132px;
  height: 132px;
  opacity: .82;
}

.stg-tag {
  display: inline-block;
  padding: 3px 11px;
  background: var(--stg-amber);
  color: var(--stg-lead-dark);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  font-family: "Spectral SC", Georgia, serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.2;
  margin: 16px 0 14px;
  max-width: 17em;
  color: #fff;
}

.stg-intro {
  max-width: 44em;
  margin: 0 0 24px;
  font-size: 19px;
  color: #dce4ef;
}

/* ---------- KPI: цветные сегменты ---------- */

.stg-segments {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  background: var(--stg-lead-dark);
  border: 3px solid var(--stg-lead-dark);
  margin: 0 0 24px;
}

.stg-seg {
  padding: 15px 12px 16px;
  background: var(--stg-lead-light);
}

.stg-seg:nth-child(odd) { background: rgba(45, 95, 168, .34); }
.stg-seg:nth-child(even) { background: rgba(224, 161, 28, .16); }

.stg-seg-name {
  display: block;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stg-amber-pale);
}

.stg-seg-val {
  font-family: "Spectral SC", Georgia, serif;
  font-size: 26px;
  line-height: 1.12;
  margin: 6px 0 3px;
  color: #fff;
}

.stg-seg-note { font-size: 15px; color: #c6d1e0; }

/* ---------- кнопки ---------- */

.stg-door,
.stg-door-2 {
  display: inline-block;
  text-decoration: none;
  font-family: "Spectral SC", Georgia, serif;
  font-size: 20px;
  padding: 14px 32px;
  border: 3px solid var(--stg-lead-dark);
}

.stg-door {
  background: var(--stg-amber);
  color: var(--stg-lead-dark);
}

.stg-door:hover { background: var(--stg-amber-pale); }

.stg-door-2 {
  background: var(--stg-cobalt);
  color: #fff;
}

.stg-door-2:hover { background: var(--stg-cobalt-deep); }

/* ---------- панели-стёкла ---------- */

.stg-glass {
  position: relative;
  margin: 0 0 22px;
  padding: 24px 26px 22px;
  background: linear-gradient(180deg, rgba(45, 95, 168, .10), rgba(32, 36, 43, .0));
  border: var(--stg-came) solid var(--stg-lead-dark);
  border-left-width: 11px;
  border-left-color: var(--stg-cobalt);
}

.stg-glass:nth-of-type(even) {
  border-left-color: var(--stg-amber);
  background: linear-gradient(180deg, rgba(224, 161, 28, .09), rgba(32, 36, 43, .0));
}

.stg-glass::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: -14px;
  height: 3px;
  background: linear-gradient(90deg, var(--stg-lead-dark), var(--stg-cobalt-deep), var(--stg-lead-dark));
}

h2 {
  font-family: "Spectral SC", Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.26;
  margin: 0 0 12px;
  color: var(--stg-amber-pale);
}

h3 {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 22px 0 8px;
  color: #9fc0ea;
}

p { margin: 0 0 13px; }

a { color: var(--stg-amber-pale); }

.stg-lit { color: var(--stg-amber); font-weight: 600; }

/* ---------- двухколонник ---------- */

.stg-leaded {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--stg-lead-dark);
  border: 3px solid var(--stg-lead-dark);
  margin: 16px 0 18px;
}

.stg-pane {
  padding: 15px 17px 16px;
  background: rgba(45, 95, 168, .14);
}

.stg-pane:nth-child(4n+2),
.stg-pane:nth-child(4n+3) { background: rgba(224, 161, 28, .10); }

.stg-pane h4 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--stg-amber-pale);
}

.stg-pane p { margin: 0; font-size: 16px; color: #ccd6e4; }

/* ---------- таблицы ---------- */

.stg-lightbox {
  overflow-x: auto;
  margin: 16px 0 18px;
  border: 3px solid var(--stg-lead-dark);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 580px;
  font-size: 16px;
  background: var(--stg-lead-dark);
}

caption {
  caption-side: top;
  text-align: left;
  padding: 10px 14px;
  background: var(--stg-cobalt-deep);
  color: #e6eefb;
  font-size: 15px;
}

th {
  background: var(--stg-amber);
  color: var(--stg-lead-dark);
  text-align: left;
  padding: 9px 13px;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

td {
  padding: 9px 13px;
  border-top: 2px solid var(--stg-lead);
  border-right: 2px solid var(--stg-lead);
  vertical-align: top;
}

tbody tr:nth-child(odd) td { background: rgba(45, 95, 168, .17); }
tbody tr:nth-child(even) td { background: rgba(224, 161, 28, .07); }

/* ---------- ступени купола ---------- */

.stg-dome {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 18px 0 16px;
  background: var(--stg-lead-dark);
  border: 3px solid var(--stg-lead-dark);
}

.stg-tier {
  padding: 13px 10px 14px;
  text-align: center;
  font-size: 16px;
  background: rgba(45, 95, 168, .18);
}

.stg-tier:nth-child(4) { background: rgba(224, 161, 28, .14); }
.stg-tier:nth-child(5) { background: rgba(224, 161, 28, .22); }
.stg-tier:nth-child(6) { background: rgba(224, 161, 28, .32); }

.stg-tier-pct {
  display: block;
  font-family: "Spectral SC", Georgia, serif;
  font-size: 24px;
  color: #fff;
  margin-bottom: 3px;
}

.stg-tier-sum { display: block; font-size: 14px; color: #bfcbdb; margin-top: 4px; }

/* ---------- FAQ ---------- */

.stg-chat details {
  margin: 0 0 8px;
  padding: 11px 16px;
  background: rgba(23, 26, 32, .82);
  border-left: 7px solid var(--stg-amber);
}

.stg-chat details:nth-of-type(even) { border-left-color: var(--stg-cobalt); }

.stg-chat summary {
  cursor: pointer;
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--stg-amber-pale);
}

.stg-chat details[open] summary { color: #fff; }

.stg-chat details p { margin: 9px 0 0; font-size: 16px; color: #ccd6e4; }

/* ---------- отзыв ---------- */

.stg-voice {
  margin: 18px 0;
  padding: 16px 20px;
  background: rgba(45, 95, 168, .22);
  border-top: var(--stg-came) solid var(--stg-amber);
  border-bottom: var(--stg-came) solid var(--stg-amber);
  font-size: 17px;
}

.stg-voice-sign {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stg-amber-pale);
}

/* ---------- источники и финальный CTA ---------- */

.stg-ledger {
  background: rgba(23, 26, 32, .8);
  border: 3px solid var(--stg-lead-dark);
  padding: 18px 22px;
  font-size: 16px;
}

.stg-ledger ol { margin: 10px 0 0; padding-left: 22px; }
.stg-ledger li { margin-bottom: 7px; }

.stg-arch {
  margin: 26px 0 8px;
  padding: 26px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(45, 95, 168, .3), rgba(224, 161, 28, .14));
  border: var(--stg-came) solid var(--stg-lead-dark);
}

.stg-arch p { margin: 0 0 15px; font-size: 19px; }

/* ---------- подвал ---------- */

.stg-sill {
  margin-top: 34px;
  padding: 24px 0 32px;
  background: var(--stg-lead-dark);
  border-top: 6px solid var(--stg-cobalt);
  font-size: 16px;
  color: #aab6c6;
}

.stg-sill-line { margin: 0 0 7px; }

.stg-sill-age {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 2px solid rgba(224, 161, 28, .35);
  color: var(--stg-amber-pale);
}

/* ---------- 640 ---------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .stg-frame { padding: 0 13px 44px; }
  .stg-rose { padding: 22px 16px 24px; }
  .stg-rose-art { position: static; display: block; width: 92px; height: 92px; margin-bottom: 10px; }
  h1 { font-size: 27px; max-width: none; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }
  .stg-intro { font-size: 17px; }
  .stg-segments { grid-template-columns: 1fr 1fr; }
  .stg-seg:last-child { grid-column: 1 / -1; }
  .stg-leaded { grid-template-columns: 1fr; }
  .stg-dome { grid-template-columns: 1fr 1fr; }
  .stg-glass { padding: 18px 15px 18px; border-left-width: 8px; }
  .stg-door, .stg-door-2 { display: block; text-align: center; font-size: 18px; padding: 13px 14px; }
  table { min-width: 540px; font-size: 15px; }
}