/* vavada120.lol — Вавада / Vavada. Концепция «Виолончельный цех»: лакированное дерево + струнное серебро */

:root {
  --bg: #130e0d;
  --sf: #1d1615;
  --sf2: #241b19;
  --ln: #2c221f;
  --ln2: #3b2d28;
  --tx: #f0e8e4;
  --mu: #a3948e;
  --mu2: #7c6d68;
  --ac: #b5703c;
  --ac-d: #8d5227;
  --ac-l: #d99a63;
  --se: #c3c8cc;
  --se-d: #8b9297;
  --ok: #7fbf92;
  --r: 3px;
  --pad: clamp(18px, 4.2vw, 68px);
  --gap: clamp(14px, 1.8vw, 24px);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
  margin: 0;
  font: 16px/1.7 "Manrope", ui-sans-serif, -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  font-weight: 400;
  color: var(--tx);
  background:
    radial-gradient(1180px 560px at 12% -10%, rgba(181, 112, 60, .17) 0%, transparent 62%),
    radial-gradient(820px 620px at 98% 18%, rgba(195, 200, 204, .06) 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Заголовочный шрифт — только на заголовках и заголовочных классах. */
h1, h2, h3, h4,
.zinc-logo__t, .zinc-foot__name, .zinc-facts__n, .zinc-row__pct,
.zinc-card__rtp, .zinc-tour__kpi span, .zinc-final__t, .zinc-quote__st {
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.24;
}

h1 { font-size: clamp(27px, 3.5vw, 43px); margin: 0 0 20px }
h2 { font-size: clamp(22px, 2.5vw, 32px); margin: 0 0 18px }
h3 { font-size: clamp(17px, 1.5vw, 20px); margin: 0 0 10px }

p { margin: 0 0 16px }
img { max-width: 100%; display: block; height: auto }
svg { max-width: 100% }
a { color: var(--ac-l); text-decoration: none }
a:hover { text-decoration: underline }
caption { text-align: left; padding: 0 0 10px; color: var(--mu); font-size: 13px }

.zinc-mark { color: var(--ac-l); font-weight: 600 }

.zinc-skip {
  position: absolute; top: -70px; left: 12px; z-index: 100;
  padding: 10px 15px; background: var(--ac); color: #170f0a;
  font-weight: 700; border-radius: var(--r);
}
.zinc-skip:focus { top: 12px }

section { padding: clamp(46px, 6vw, 88px) var(--pad); border-bottom: 1px solid var(--ln) }
main > section:nth-child(even) { background: linear-gradient(180deg, rgba(29, 22, 21, .72), rgba(19, 14, 13, 0)) }

.zinc-over {
  margin: 0 0 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--se-d);
}
.zinc-lead { max-width: 78ch; color: var(--tx); font-size: 17px }
section > p { max-width: 82ch; color: #ded2cc }

/* ===== ШАПКА ===== */
.zinc-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 10px var(--pad);
  background: rgba(19, 14, 13, .9);
  border-bottom: 1px solid var(--ln);
  backdrop-filter: blur(11px);
}
.zinc-logo { display: flex; align-items: center; gap: 12px; color: var(--tx) }
.zinc-logo:hover { text-decoration: none }
.zinc-logo__svg { width: 33px; height: 33px; flex: none }
.zinc-logo__t { font-size: 18px; line-height: 1 }
.zinc-logo__sub {
  display: block; margin-top: 5px;
  font-family: "Manrope", sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mu2);
}
.zinc-nav { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap }
.zinc-nav a {
  padding: 7px 11px; font-size: 14px; font-weight: 500; color: var(--mu);
  border: 1px solid transparent; border-radius: var(--r);
}
.zinc-nav a:hover { color: var(--tx); border-color: var(--ln2); text-decoration: none }

/* ===== КНОПКИ ===== */
.zinc-cta {
  display: inline-block; text-align: center; font-weight: 700;
  border-radius: var(--r); border: 1px solid transparent;
  transition: transform .12s ease, background .18s ease;
}
.zinc-cta:hover { text-decoration: none; transform: translateY(-1px) }
.zinc-cta--sm { padding: 9px 15px; font-size: 14px; background: var(--ac); color: #170f0a }
.zinc-cta--sm:hover { background: var(--ac-l) }
.zinc-cta--lg { padding: 14px 26px; font-size: 15.5px }
.zinc-cta--hot {
  background: linear-gradient(135deg, var(--ac) 0%, var(--ac-d) 100%);
  color: #1a0f08; box-shadow: 0 0 0 1px rgba(217, 154, 99, .35) inset;
}
.zinc-cta--hot:hover { background: linear-gradient(135deg, var(--ac-l) 0%, var(--ac) 100%) }
.zinc-cta--ghost { background: transparent; color: var(--se); border-color: var(--se-d) }
.zinc-cta--ghost:hover { border-color: var(--se); background: rgba(195, 200, 204, .07) }

/* ===== HERO (одноколоночный) ===== */
.zinc-hero { text-align: center; padding-top: clamp(40px, 5vw, 72px) }
.zinc-hero h1, .zinc-hero__sub { margin-left: auto; margin-right: auto }
.zinc-hero h1 { max-width: 22ch }
.zinc-chip {
  display: inline-block; margin: 0 0 20px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--se); border: 1px solid var(--ln2); border-radius: 40px;
  background: rgba(195, 200, 204, .05);
}
.zinc-hero__sub { max-width: 74ch; font-size: 17px; color: #ded2cc }
.zinc-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 0 }
.zinc-hero__fig { margin: 36px auto 0; max-width: 1060px }
.zinc-hero__fig svg { width: 100%; height: auto }

.zinc-facts {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  margin: 34px 0 0; background: var(--ln); border: 1px solid var(--ln);
}
.zinc-facts__c { padding: 18px 14px; background: var(--sf); text-align: center }
.zinc-facts__n { display: block; font-size: clamp(19px, 2vw, 25px); color: var(--ac-l) }
.zinc-facts__l { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mu) }

/* ===== ПАКЕТ ===== */
.zinc-pack__rows { display: grid; gap: 12px; margin: 26px 0 24px; max-width: 900px }
.zinc-row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; background: var(--sf);
  border: 1px solid var(--ln); border-left: 3px solid var(--ac); border-radius: var(--r);
}
.zinc-row__pct { flex: none; width: 78px; font-size: 22px; color: var(--ac-l) }
.zinc-row__t { font-weight: 600; font-size: 16px }
.zinc-row__tag { margin-top: 4px; font-size: 13.5px; color: var(--mu) }

/* ===== КАТАЛОГ ===== */
.zinc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin: 26px 0 22px;
}
.zinc-card {
  position: relative; padding: 0 0 16px; background: var(--sf);
  border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden;
}
.zinc-card:hover { border-color: var(--ln2) }
.zinc-card h3 { margin: 14px 16px 6px }
.zinc-card p { margin: 0 16px; font-size: 13.5px; color: var(--mu) }
.zinc-card__rtp {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 9px; font-size: 12px; color: #1a0f08;
  background: var(--se); border-radius: 30px;
}
.zinc-card__cover { height: 104px; border-bottom: 1px solid var(--ln) }
.zinc-cv-1 { background: linear-gradient(135deg, #3a2214, #b5703c 140%) }
.zinc-cv-2 { background: linear-gradient(120deg, #26191a, #8d5227) }
.zinc-cv-3 { background: repeating-linear-gradient(58deg, #2a1d17 0 12px, #3d2a1d 12px 24px) }
.zinc-cv-4 { background: radial-gradient(circle at 28% 34%, #d99a63 0, #2a1a12 68%) }
.zinc-cv-5 { background: linear-gradient(180deg, #1f1a1c, #6c4a3a) }
.zinc-cv-6 { background: repeating-linear-gradient(0deg, #241b19 0 8px, #33251f 8px 16px) }
.zinc-cv-7 { background: linear-gradient(225deg, #4a3327, #191313) }
.zinc-cv-8 { background: radial-gradient(ellipse at 72% 70%, #c3c8cc 0, #241b19 62%) }
.zinc-cv-9 { background: linear-gradient(90deg, #3a2418, #8b9297 210%) }
.zinc-cv-10 { background: repeating-linear-gradient(132deg, #1f1715 0 9px, #4a2f1c 9px 18px) }
.zinc-cv-11 { background: linear-gradient(160deg, #2b201c, #b5703c 190%) }
.zinc-cv-12 { background: radial-gradient(circle at 78% 26%, #8d5227 0, #17110f 70%) }

.zinc-tags {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  padding: 16px 20px; margin: 0 0 22px;
  background: var(--sf2); border: 1px dashed var(--ln2); border-radius: var(--r);
}
.zinc-tags__t { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--se-d) }
.zinc-tags__l { font-size: 14px; color: #ded2cc }

/* ===== ЖИВОЙ ЗАЛ (rail) ===== */
.zinc-live__rail {
  display: flex; gap: var(--gap); margin: 26px 0 22px;
  overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory;
}
.zinc-tbl {
  flex: 0 0 296px; scroll-snap-align: start;
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden;
}
.zinc-tbl__cover { height: 88px; border-bottom: 1px solid var(--ln) }
.zinc-lv-1 { background: linear-gradient(135deg, #2d1c14, #b5703c 165%) }
.zinc-lv-2 { background: repeating-linear-gradient(45deg, #221a18 0 10px, #35251e 10px 20px) }
.zinc-lv-3 { background: radial-gradient(circle at 34% 44%, #d99a63 0, #1d1413 66%) }
.zinc-lv-4 { background: linear-gradient(200deg, #4b3524, #17100f) }
.zinc-lv-5 { background: linear-gradient(75deg, #201a1c, #8b9297 200%) }
.zinc-lv-6 { background: repeating-linear-gradient(90deg, #241b19 0 7px, #3c2b23 7px 14px) }
.zinc-tbl__b { padding: 14px 16px 16px }
.zinc-tbl__s { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--se-d) }
.zinc-tbl__m { margin-top: 9px; font-size: 13.5px; color: var(--mu) }
.zinc-tbl__p { margin-top: 11px; font-size: 14px; font-weight: 600; color: var(--tx) }
.zinc-tbl__on {
  display: inline-block; margin-left: 8px; padding: 3px 8px;
  font-size: 11px; font-weight: 600; color: var(--ok);
  border: 1px solid rgba(127, 191, 146, .4); border-radius: 30px;
}

/* ===== ТАБЛИЦЫ ===== */
.zinc-tbl-wrap { overflow-x: auto; margin: 24px 0 20px }
.zinc-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px }
.zinc-table th, .zinc-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ln) }
.zinc-table thead th {
  font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--se-d);
  border-bottom: 1px solid var(--ln2);
}
.zinc-table tbody tr:hover { background: rgba(181, 112, 60, .06) }
.zinc-table td:first-child { color: var(--ac-l); font-weight: 600 }

.zinc-cash__note {
  padding: 16px 20px; margin: 0 0 20px; max-width: 82ch;
  background: var(--sf2); border-left: 3px solid var(--se-d);
  border-radius: var(--r); font-size: 14.5px; color: #ded2cc;
}

/* ===== ТУРНИР ===== */
.zinc-tour__kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 24px 0; background: var(--ln); border: 1px solid var(--ln);
}
.zinc-tour__kpi div { padding: 18px 16px; background: var(--sf); font-size: 13px; color: var(--mu) }
.zinc-tour__kpi span { display: block; margin-bottom: 6px; font-size: clamp(18px, 1.9vw, 24px); color: var(--ac-l) }

/* ===== ОТЗЫВЫ ===== */
.zinc-rev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 26px 0 22px }
.zinc-quote {
  padding: 20px 22px; background: var(--sf);
  border: 1px solid var(--ln); border-radius: var(--r);
}
.zinc-quote__st { font-size: 15px; letter-spacing: .16em; color: var(--ac-l) }
.zinc-quote__off { color: var(--mu2) }
.zinc-quote__m { margin: 12px 0 14px; font-size: 14.5px; color: #ded2cc }
.zinc-quote__a { font-size: 13px; color: var(--mu) }

/* ===== ПРЕ-ФУТЕР ===== */
.zinc-final { text-align: center }
.zinc-final__t { max-width: 62ch; margin: 0 auto 24px; font-size: clamp(19px, 2vw, 26px) }
.zinc-final__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }

/* ===== FAQ ===== */
.zinc-faq__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin-top: 24px }
.zinc-faq details {
  padding: 14px 18px; background: var(--sf);
  border: 1px solid var(--ln); border-radius: var(--r);
}
.zinc-faq details[open] { border-color: var(--ln2) }
.zinc-faq summary {
  cursor: pointer; font-weight: 600; font-size: 15px; color: var(--tx);
  list-style: none;
}
.zinc-faq summary::-webkit-details-marker { display: none }
.zinc-faq summary::before { content: "◇ "; color: var(--ac) }
.zinc-faq details[open] summary::before { content: "◆ " }
.zinc-faq details p { margin: 12px 0 0; font-size: 14.5px; color: #ded2cc }

/* ===== AUTHOR NOTE ===== */
.zinc-author { background: var(--sf2) }
.zinc-author p { max-width: 88ch; font-size: 14.5px; color: #d3c6c0 }

/* ===== ПОДВАЛ ===== */
.zinc-foot { padding: clamp(36px, 4vw, 60px) var(--pad) 34px; background: #0f0b0a }
.zinc-foot__top { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start }
.zinc-foot__brand { display: flex; align-items: center; gap: 12px; flex: 0 0 260px }
.zinc-foot__logo svg { width: 36px; height: 36px }
.zinc-foot__name { font-size: 18px }
.zinc-foot__nsub {
  display: block; margin-top: 5px; font-family: "Manrope", sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mu2);
}
.zinc-foot__legal { flex: 1 1 420px; margin: 0; font-size: 13.5px; color: var(--mu) }
.zinc-foot__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ln);
  font-size: 13px; color: var(--mu);
}
.zinc-foot__bottom { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ln); font-size: 12.5px; color: var(--mu2) }

/* ===== АДАПТИВ ===== */
@media (max-width: 1080px) {
  .zinc-grid { grid-template-columns: repeat(2, 1fr) }
  .zinc-facts { grid-template-columns: repeat(3, 1fr) }
  .zinc-rev__grid { grid-template-columns: 1fr }
  .zinc-foot__cols { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 860px) {
  .zinc-nav { display: none }
  .zinc-tour__kpi { grid-template-columns: repeat(2, 1fr) }
  .zinc-faq__cols { grid-template-columns: 1fr }
  .zinc-hero { text-align: left }
  .zinc-hero__btns, .zinc-final__btns { justify-content: flex-start }
  .zinc-hero h1 { max-width: none }
  .zinc-final { text-align: left }
  .zinc-final__t { margin-left: 0 }
}

@media (max-width: 620px) {
  body { font-size: 15.5px }
  .zinc-grid { grid-template-columns: 1fr }
  .zinc-facts { grid-template-columns: repeat(2, 1fr) }
  .zinc-row { flex-direction: column; align-items: flex-start; gap: 8px }
  .zinc-row__pct { width: auto }
  .zinc-tbl { flex: 0 0 82vw }
  .zinc-foot__cols { grid-template-columns: 1fr }
  .zinc-cta--lg { width: 100%; padding: 14px 18px }
  .zinc-hero__btns .zinc-cta, .zinc-final__btns .zinc-cta { width: 100% }
}