/* ===== vaultroom - банковское хранилище (шаблон сети, namespace .vt*) ========
   ПАРАДИГМА. Страница читается как депозитарный зал банка: массивная дверь со
   штурвалом на первом экране, таймлок-табло с цифрами под ней и ряд запертых
   ячеек-депозитариев, где КАЖДАЯ ячейка = один смысловой раздел. У ячейки слева
   стальной фасад с номером 01...NN, скважиной замка и подписью зоны, справа -
   содержимое. Сталь, скважина, штурвал и заклёпки нарисованы градиентами и
   inline-SVG: ни одной растровой картинки, внешних ассетов ноль.

   ПОРЯДОК БЛОКОВ (на нём держится метафора, менять не нужно):
     vtbar -> vthero[.vtdoor(SVG-штурвал) + .vthero-txt(.vth1 .vtlead .vtacts .vtkpi)]
           -> vtboard(таймлок, 4 окна) -> vtcells[.vtcell x N] -> vtnote -> vtfoot
   Внутри .vtcell: .vtface(.vtnum .vtkeyhole .vtface-tag) + .vtbody(h2 -> контент).
   Наборные блоки контента: .vtgrid/.vtbox, .vttable-wrap/.vttable,
   .vtladder/.vtstep (лестница лояльности), .vtquotes/.vtquote (отзывы), .vtqa (FAQ).

   NAMESPACE. Все классы начинаются на .vt - пересечений с другими шаблонами банка
   нет. Классы .hero/.card/.grid не заводить даже во вложенных блоках.

   ЛОВУШКИ ПЕРЕКРАСКИ:
   1. Палитра целиком выведена из --vt-h и --vt-h2. Не вписывать hex в правила:
      стальные плашки собраны из hsl(var(--vt-h) ...) и потеряют общий оттенок.
   2. Насыщенность акцентов в банковой версии занижена намеренно (8-9 %). Меняя
      hue, поднимите S у --vt-acc / --vt-acc-d / --vt-acc2, иначе сайт останется
      серым, а цветным будет только текст.
   3. Штурвал - inline-SVG в разметке; его stop-color и заливка центра CSS-переменных
      НЕ читают. Перекрашивать руками в самом <svg> (места помечены в sample).
   4. .vtcell - грид `126px minmax(0,1fr)`. Вторая колонка обязана быть minmax(0,1fr),
      а .vtbody / .vttable-wrap держать min-width:0, иначе широкая таблица растянет
      трек и на 390 px вылезет горизонтальный скролл.
   5. На <=900 px .vthero-txt переключается в flex с order: H1 -> кнопки -> лид -> KPI.
      Порядок держит CTA на первом экране мобильного гейта.
   6. У каждого font-family обязателен фолбэк-стек: голое имя вебшрифта роняет
      страницу в Times New Roman и вся стальная сетка расползается.
   ============================================================================ */

:root{
  --vt-h:31;    /* базовый hue — перекраска сайта = правка этих двух чисел */
  --vt-h2:211;    /* второй акцент, схема берётся из набора сайта */
  --vt-bg:      hsl(var(--vt-h) 9% 8%);
  --vt-bg2:     hsl(var(--vt-h) 8% 11%);
  --vt-steel:   hsl(var(--vt-h) 6% 17%);
  --vt-steel2:  hsl(var(--vt-h) 6% 24%);
  --vt-edge:    hsl(var(--vt-h) 7% 31%);
  --vt-ink:     hsl(var(--vt-h) 12% 92%);
  --vt-dim:     hsl(var(--vt-h) 8% 64%);
  --vt-acc:     hsl(var(--vt-h) 9% 63%);   /* нейтраль банка: поднять S под свой сайт */
  --vt-acc-d:   hsl(var(--vt-h) 9% 43%);
  --vt-acc2:    hsl(var(--vt-h2) 8% 56%);
  --vt-rad: 4px;
  --vt-plate: linear-gradient(180deg, hsl(var(--vt-h) 6% 26%), hsl(var(--vt-h) 6% 15%));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 78% -8%, hsl(var(--vt-h) 10% 16%), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    var(--vt-bg);
  color:var(--vt-ink);
  font-family:"Commissioner",Georgia,"Times New Roman",serif;
  font-size:16.5px; line-height:1.68;
  overflow-x:hidden;
}
a{color:var(--vt-acc)}
p{margin:0 0 .85em}

.vt-wrap{max-width:1130px;margin:0 auto;padding:0 18px}

/* ─── стальная фактура и заклёпки — общие миксины ─────────────────── */
.vt-steel{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 3px),
    var(--vt-plate);
  border:1px solid var(--vt-edge);
  border-radius:var(--vt-rad);
}
.vt-rivets::before,.vt-rivets::after{
  content:"";position:absolute;top:9px;bottom:9px;width:7px;
  background:
    radial-gradient(circle at 50% 12px, hsl(var(--vt-h) 6% 52%) 0 2.6px, transparent 3px),
    radial-gradient(circle at 50% calc(100% - 12px), hsl(var(--vt-h) 6% 52%) 0 2.6px, transparent 3px);
  opacity:.85;pointer-events:none;
}
.vt-rivets::before{left:7px}
.vt-rivets::after{right:7px}

/* ─── 1. vtbar — верхняя балка хранилища ──────────────────────────── */
.vtbar{
  position:relative;
  background:linear-gradient(180deg, hsl(var(--vt-h) 7% 19%), hsl(var(--vt-h) 7% 12%));
  border-bottom:2px solid var(--vt-edge);
  box-shadow:0 2px 0 rgba(0,0,0,.5);
}
.vtbar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:11px 18px;max-width:1130px;margin:0 auto}
.vtbrand{display:flex;align-items:center;gap:10px;font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:.06em;font-size:19px}
.vtbrand-mark{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 20deg, var(--vt-acc) 0 25%, hsl(var(--vt-h) 6% 30%) 25% 50%, var(--vt-acc-d) 50% 75%, hsl(var(--vt-h) 6% 30%) 75% 100%);
  border:2px solid hsl(var(--vt-h) 6% 46%);
  box-shadow:inset 0 0 0 4px hsl(var(--vt-h) 9% 10%);
}
.vtbar-meta{
  margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--vt-dim);letter-spacing:.03em;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;
}
.vtbar-meta i{font-style:normal;color:var(--vt-acc2)}

/* ─── 2. vthero — дверь со штурвалом + первый экран ────────────────── */
.vthero{padding:26px 0 6px}
.vthero-in{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:center;
}
.vtdoor{
  position:relative;min-width:0;aspect-ratio:1/1;border-radius:10px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.06) 2px 6px),
    radial-gradient(circle at 38% 30%, hsl(var(--vt-h) 6% 33%), hsl(var(--vt-h) 7% 14%) 78%);
  border:1px solid var(--vt-edge);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
}
.vtdoor svg{width:86%;height:86%;display:block}
.vtdoor-tag{
  position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.18em;
  color:var(--vt-dim);font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;
}
.vthero-txt{min-width:0}
.vth1{
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;
  font-size:clamp(27px,4.1vw,44px);line-height:1.11;margin:0 0 12px;letter-spacing:-.01em;
}
.vth1 span{color:var(--vt-acc)}
.vtlead{font-size:17px;color:hsl(var(--vt-h) 10% 84%);margin:0 0 16px;max-width:62ch}
.vtacts{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.vtbtn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;
  border-radius:var(--vt-rad);text-decoration:none;font-weight:700;font-size:15.5px;letter-spacing:.02em;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;border:1px solid transparent;
}
.vtbtn--main{
  background:linear-gradient(180deg, var(--vt-acc), var(--vt-acc-d));
  color:hsl(var(--vt-h) 12% 9%);border-color:hsl(var(--vt-h) 9% 72%);
  box-shadow:0 6px 0 hsl(var(--vt-h) 9% 28%), 0 10px 22px rgba(0,0,0,.45);
}
.vtbtn--ghost{background:var(--vt-plate);color:var(--vt-ink);border-color:var(--vt-edge)}
.vtkpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vtkpi-i{position:relative;padding:11px 12px 11px 14px;min-width:0;
  background:linear-gradient(180deg, hsl(var(--vt-h) 7% 16%), hsl(var(--vt-h) 8% 12%));
  border:1px solid var(--vt-edge);border-left:3px solid var(--vt-acc2);border-radius:var(--vt-rad)}
.vtkpi-n{display:block;font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;font-size:22px;font-weight:700;line-height:1.1}
.vtkpi-l{display:block;font-size:12px;color:var(--vt-dim);line-height:1.35;margin-top:3px}

/* ─── 3. vtboard — таймлок-табло ───────────────────────────────────── */
.vtboard{
  position:relative;margin:22px 0 4px;padding:14px 26px;display:grid;gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.05) 1px 3px),
    var(--vt-plate);
  border:1px solid var(--vt-edge);border-radius:var(--vt-rad);
}
.vttime{min-width:0;text-align:center}
.vttime-d{
  display:block;padding:7px 4px;border-radius:3px;
  background:hsl(var(--vt-h) 14% 6%);border:1px solid hsl(var(--vt-h) 12% 22%);
  color:var(--vt-acc);font-family:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  font-size:20px;letter-spacing:.08em;text-shadow:0 0 12px hsl(var(--vt-h) 10% 60% / .55);
}
.vttime-l{display:block;font-size:11.5px;color:var(--vt-dim);margin-top:5px;letter-spacing:.05em;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif}

/* ─── 4. vtcells — ряд ячеек-депозитариев ─────────────────────────── */
.vtcells{display:flex;flex-direction:column;gap:16px;margin:26px 0 0}
.vtcell{
  position:relative;display:grid;grid-template-columns:126px minmax(0,1fr);
  background:linear-gradient(180deg, var(--vt-bg2), hsl(var(--vt-h) 8% 9%));
  border:1px solid var(--vt-edge);border-radius:6px;overflow:hidden;
}
.vtface{
  position:relative;min-width:0;padding:18px 10px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.05) 1px 3px),
    var(--vt-plate);
  border-right:2px solid hsl(var(--vt-h) 7% 9%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.vtnum{
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;font-size:30px;font-weight:700;
  color:hsl(var(--vt-h) 10% 78%);letter-spacing:.04em;line-height:1;
  padding:5px 11px;border:1px solid hsl(var(--vt-h) 7% 40%);border-radius:3px;
  background:hsl(var(--vt-h) 8% 13%);
}
.vtkeyhole{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, hsl(var(--vt-h) 8% 6%) 0 8px, hsl(var(--vt-h) 6% 38%) 9px 100%);
  border:2px solid hsl(var(--vt-h) 6% 46%);position:relative;
}
.vtkeyhole::after{content:"";position:absolute;left:50%;top:52%;width:5px;height:13px;margin-left:-2.5px;
  background:hsl(var(--vt-h) 8% 6%);border-radius:0 0 2px 2px}
.vtface-tag{font-size:10.5px;letter-spacing:.14em;color:var(--vt-dim);text-align:center;
  max-width:100%;overflow-wrap:anywhere;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif}
.vtbody{min-width:0;padding:20px 24px 22px}
.vth2{
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;
  font-size:clamp(20px,2.5vw,27px);line-height:1.2;margin:0 0 12px;letter-spacing:-.005em;
}
.vth2 em{font-style:normal;color:var(--vt-acc)}
.vth3{
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;
  font-size:17.5px;margin:18px 0 7px;color:hsl(var(--vt-h) 12% 88%);
}
.vtmark{color:var(--vt-acc);font-weight:600}
.vtmark2{color:var(--vt-acc2);font-weight:600}

/* сетки внутри ячейки */
.vtgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0}
.vtbox{min-width:0;padding:13px 15px;background:hsl(var(--vt-h) 8% 13%);
  border:1px solid hsl(var(--vt-h) 7% 26%);border-left:3px solid var(--vt-acc-d);border-radius:var(--vt-rad)}
.vtbox h4{margin:0 0 5px;font-size:15px;font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;
  color:hsl(var(--vt-h) 12% 90%);font-weight:700}
.vtbox p{margin:0;font-size:14.5px;color:hsl(var(--vt-h) 8% 76%)}

/* таблица — всегда внутри скролл-контейнера (ловушка грид/таблица) */
.vttable-wrap{min-width:0;overflow-x:auto;margin:14px 0;border:1px solid hsl(var(--vt-h) 7% 26%);border-radius:var(--vt-rad)}
.vttable{border-collapse:collapse;width:100%;min-width:430px;font-size:14.5px}
.vttable th,.vttable td{padding:9px 12px;text-align:left;border-bottom:1px solid hsl(var(--vt-h) 7% 22%)}
.vttable th{background:hsl(var(--vt-h) 7% 17%);color:hsl(var(--vt-h) 10% 86%);font-weight:700;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;font-size:13.5px;letter-spacing:.03em}
.vttable tr:last-child td{border-bottom:0}
.vttable td:first-child{color:hsl(var(--vt-h) 10% 88%)}

/* лестница VIP — заклёпочный ряд */
.vtladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.vtstep{position:relative;min-width:0;padding:12px 12px 12px 14px;border-radius:var(--vt-rad);
  background:linear-gradient(180deg, hsl(var(--vt-h) 7% 16%), hsl(var(--vt-h) 8% 11%));
  border:1px solid hsl(var(--vt-h) 7% 28%)}
.vtstep::after{content:"";position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%, hsl(var(--vt-h) 6% 70%), hsl(var(--vt-h) 6% 34%));
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.6)}
.vtstep b,.vtstep span.n{display:block}
.vtstep .n{font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;font-weight:700;font-size:16px;
  color:var(--vt-acc)}
.vtstep .v{font-size:13.5px;color:var(--vt-dim);display:block;margin-top:2px}

/* отзывы — бирки на ячейках */
.vtquotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.vtquote{min-width:0;padding:14px 16px;border-radius:var(--vt-rad);
  background:hsl(var(--vt-h) 8% 13%);border:1px solid hsl(var(--vt-h) 7% 26%);
  border-top:3px solid var(--vt-acc2)}
.vtquote p{font-size:14.5px;margin:0 0 8px;color:hsl(var(--vt-h) 8% 82%)}
.vtquote cite{font-style:normal;font-size:12.5px;color:var(--vt-dim);letter-spacing:.04em;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif}

/* FAQ */
.vtqa{margin:0 0 14px;padding:0 0 12px;border-bottom:1px dashed hsl(var(--vt-h) 7% 26%)}
.vtqa:last-child{border-bottom:0;padding-bottom:0}
.vtqa p{margin:0;font-size:15px;color:hsl(var(--vt-h) 8% 80%)}

/* ─── 5. vtnote — заметка автора ───────────────────────────────────── */
.vtnote{position:relative;margin:26px 0 0;padding:20px 26px;border-radius:6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 3px, transparent 3px 8px),
    linear-gradient(180deg, hsl(var(--vt-h) 8% 14%), hsl(var(--vt-h) 9% 10%));
  border:1px solid var(--vt-edge);border-left:4px solid var(--vt-acc)}
.vtnote h2{font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;font-size:22px;margin:0 0 10px}
.vtnote p{font-size:15.5px;color:hsl(var(--vt-h) 8% 80%)}

/* ─── 6. vtfoot — цоколь ───────────────────────────────────────────── */
.vtfoot{margin:28px 0 0;padding:22px 0 34px;border-top:2px solid var(--vt-edge);
  background:linear-gradient(180deg, hsl(var(--vt-h) 8% 11%), hsl(var(--vt-h) 9% 7%))}
.vtfoot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  font-size:13.5px;color:var(--vt-dim)}
.vtfoot-in h5{margin:0 0 6px;font-size:13px;letter-spacing:.1em;color:hsl(var(--vt-h) 10% 82%);
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif;text-transform:uppercase}
.vtage{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  border:2px solid var(--vt-acc);color:var(--vt-acc);font-weight:700;font-size:15px;margin-bottom:8px;
  font-family:"PT Serif",system-ui,"Segoe UI",Arial,sans-serif}

/* ─── адаптив: ряд ячеек схлопывается в колонку, без гориз. скролла ── */
@media (max-width:900px){
  .vthero-in{grid-template-columns:minmax(0,1fr);gap:16px}
  .vtdoor{max-width:196px;margin:0 auto}
  /* мобильный порядок: заголовок → кнопки → лид → KPI, чтобы CTA попадала на первый экран */
  .vthero-txt{display:flex;flex-direction:column}
  .vth1{order:1;margin-bottom:10px}
  .vtacts{order:2;margin-bottom:14px}
  .vtlead{order:3}
  .vtkpi{order:4}
  .vtboard{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 18px}
  .vtcell{grid-template-columns:minmax(0,1fr)}
  .vtface{flex-direction:row;justify-content:flex-start;gap:14px;padding:10px 14px;
    border-right:0;border-bottom:2px solid hsl(var(--vt-h) 7% 9%)}
  .vtnum{font-size:22px;padding:3px 9px}
  .vtkeyhole{width:26px;height:26px}
  .vtkeyhole::after{height:10px;width:4px;margin-left:-2px}
  .vtface-tag{text-align:left}
  .vtbody{padding:16px 16px 18px}
}
@media (max-width:560px){
  body{font-size:16px}
  .vtkpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vtbar-meta{margin-left:0;font-size:11.5px;gap:9px}
  .vtbtn{width:100%}
  .vttable{min-width:380px}
}