/* 7kjr6.casino — 7K Casino / 7К Казино. Тема «Звонница»: колокольная бронза, патина, известь. */

:root {
  --bell-ink: #171310;
  --bell-ink-2: #221c17;
  --bell-ink-3: #2f2721;
  --bell-lime: #e9e3d6;
  --bell-lime-2: #f4f0e7;
  --bell-lime-3: #ddd4c2;
  --bell-patina: #7fa08c;
  --bell-patina-d: #4f7264;
  --bell-patina-l: #a8c6b3;
  --bell-brass: #b98c4e;
  --bell-brass-l: #dcaf6b;
  --bell-rule: #cec3ad;
  --bell-rule-d: #3d332b;
  --bell-mute: #6d6154;
  --bell-r: 3px;
  --bell-r2: 10px;
}

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

body {
  margin: 0;
  background: var(--bell-lime);
  color: var(--bell-ink);
  font: 17px/1.68 "Alegreya Sans", ui-sans-serif, -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.bell-mark__t, .bell-cta, .bell-over, .bell-gauge__n, .bell-tile__num,
.bell-dep__pct, .bell-dep__ord, .bell-step__n, .bell-cover, .bell-rung__n,
.bell-race__n, .bell-table__t, .bell-rail__k, .bell-clock__k, .bell-foot__col h4 {
  font-family: "Cormorant Infant", "Alegreya Sans", Georgia, serif;
}

h1, h2, h3 { line-height: 1.14; letter-spacing: -.4px; margin: 0 0 .5em }
h1 { font-size: clamp(31px, 4.6vw, 53px); font-weight: 600 }
h2 { font-size: clamp(26px, 3.4vw, 39px); font-weight: 600 }
h3 { font-size: 21px; font-weight: 600 }

a { color: var(--bell-patina-d); text-decoration: none }
a:hover { text-decoration: underline }
p { margin: 0 0 1em }
.em { font-variant-caps: all-small-caps; letter-spacing: 1.4px }

.bell-skip {
  position: absolute; left: 10px; top: -50px; z-index: 90;
  padding: 12px 16px; background: var(--bell-ink); color: var(--bell-lime);
  border-radius: var(--bell-r);
}
.bell-skip:focus { top: 10px }

/* ---- шапка ---- */
.bell-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 11px 24px;
  background: var(--bell-ink);
  border-bottom: 2px solid var(--bell-patina-d);
}
.bell-mark { display: flex; align-items: center; gap: 12px; color: var(--bell-lime) }
.bell-mark:hover { text-decoration: none }
.bell-mark__svg { width: 34px; height: 34px; flex: none }
.bell-mark__t { font-size: 21px; font-weight: 600; line-height: 1 }
.bell-mark__sub {
  display: block; margin-top: 5px;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--bell-patina-l);
}
.bell-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto }
.bell-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 11px; color: var(--bell-lime-3); font-size: 15px;
  border-bottom: 2px solid transparent;
}
.bell-nav a:hover { color: var(--bell-patina-l); border-bottom-color: var(--bell-patina); text-decoration: none }

/* ---- кнопки ---- */
.bell-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 24px;
  border-radius: var(--bell-r); border: 2px solid transparent;
  font-size: 17px; font-weight: 600; letter-spacing: .2px;
  transition: transform .14s, box-shadow .18s, background .18s, color .18s;
}
.bell-cta:hover { text-decoration: none; transform: translateY(-1px) }
.bell-cta--cast {
  background: var(--bell-patina-d); color: var(--bell-lime-2);
  box-shadow: 0 10px 24px -12px rgba(23, 19, 16, .8);
}
.bell-cta--cast:hover { background: var(--bell-ink); color: var(--bell-patina-l) }
.bell-cta--big { min-height: 54px; padding: 15px 34px; font-size: 20px }
.bell-cta--line { background: transparent; color: var(--bell-ink); border-color: var(--bell-rule) }
.bell-cta--line:hover { border-color: var(--bell-patina-d); color: var(--bell-patina-d) }
.bell-cta--top { background: transparent; color: var(--bell-lime); border-color: var(--bell-patina-d); padding: 10px 18px; font-size: 15px }
.bell-cta--top:hover { background: var(--bell-patina-d); color: var(--bell-lime-2) }

/* ---- строка показателей ---- */
.bell-gauge {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bell-ink-2); color: var(--bell-lime);
  border-bottom: 1px solid var(--bell-rule-d);
}
.bell-gauge__c { padding: 11px 18px; border-right: 1px solid var(--bell-rule-d) }
.bell-gauge__c:last-child { border-right: 0 }
.bell-gauge__n { display: block; font-size: 23px; color: var(--bell-patina-l); font-weight: 600 }
.bell-gauge__l { display: block; font-size: 12px; letter-spacing: .7px; color: #9b8f80 }

/* ---- общий каркас секций ---- */
main { display: block }
.bell-sec { max-width: 1180px; margin: 0 auto; padding: 62px 24px }
.bell-sec--dark {
  max-width: none; background: var(--bell-ink); color: var(--bell-lime-3);
}
.bell-sec--dark > * { max-width: 1180px; margin-left: auto; margin-right: auto }
.bell-sec--dark h2, .bell-sec--dark h3 { color: var(--bell-lime-2) }
.bell-over {
  display: inline-block; margin: 0 0 14px;
  font-size: 13px; letter-spacing: 3.4px; text-transform: uppercase;
  color: var(--bell-patina-d);
  border-bottom: 2px solid var(--bell-brass); padding-bottom: 4px;
  font-family: "Alegreya Sans", sans-serif;
}
.bell-sec--dark .bell-over { color: var(--bell-patina-l) }
.bell-lead { font-size: 19px; max-width: 78ch; color: #3b332b }
.bell-sec--dark .bell-lead { color: var(--bell-lime-3) }

/* ---- герой ---- */
.bell-hero {
  display: grid; grid-template-columns: 1.28fr .72fr; gap: 44px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 58px 24px 66px;
}
.bell-hero__chip {
  display: inline-block; margin: 0 0 16px; padding: 6px 14px;
  background: var(--bell-ink); color: var(--bell-patina-l);
  border-radius: 40px; font-size: 12.5px; letter-spacing: 1.6px;
}
.bell-hero__sub { font-size: 19.5px; color: #3b332b; max-width: 62ch }
.bell-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 30px }
.bell-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--bell-rule) }
.bell-tile { background: var(--bell-lime-2); padding: 15px 16px }
.bell-tile__num { display: block; font-size: 29px; font-weight: 600; color: var(--bell-ink) }
.bell-tile__lbl { display: block; font-size: 13px; letter-spacing: 1.1px; color: var(--bell-mute); text-transform: uppercase }
.bell-belfry { margin: 0 }
.bell-belfry svg { width: 100%; height: auto; display: block }
.bell-belfry figcaption {
  margin-top: 10px; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--bell-mute); text-align: center;
}

/* ---- welcome ---- */
.bell-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 }
.bell-dep {
  background: var(--bell-lime-2); border: 1px solid var(--bell-rule);
  border-top: 4px solid var(--bell-patina-d);
  border-radius: var(--bell-r2); padding: 22px;
}
.bell-dep__ord { font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--bell-mute) }
.bell-dep__pct { display: block; font-size: 40px; font-weight: 600; color: var(--bell-brass); line-height: 1.1; margin: 4px 0 8px }
.bell-dep h3 { font-size: 20px }
.bell-dep p { margin: 0; font-size: 16px; color: #4a4137 }

/* ---- три шага ---- */
.bell-step {
  background: var(--bell-lime-2); border-left: 4px solid var(--bell-brass);
  padding: 20px 22px; border-radius: 0 var(--bell-r2) var(--bell-r2) 0;
}
.bell-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bell-ink); color: var(--bell-patina-l);
  font-size: 21px; font-weight: 600; margin-bottom: 10px;
}
.bell-step h3 { margin-bottom: .35em }
.bell-step p { margin: 0; font-size: 16px; color: #4a4137 }

/* ---- каталог ---- */
.bell-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 26px 0 }
.bell-card {
  background: var(--bell-ink-2); border: 1px solid var(--bell-rule-d);
  border-radius: var(--bell-r2); overflow: hidden; display: flex; flex-direction: column;
}
.bell-cover {
  padding: 30px 14px; text-align: center; font-size: 19px; font-weight: 600;
  color: var(--bell-lime-2); line-height: 1.2;
  border-bottom: 1px solid var(--bell-rule-d);
}
.bell-cover.a1 { background: linear-gradient(150deg, #4f7264, #171310) }
.bell-cover.a2 { background: linear-gradient(150deg, #7d5e33, #171310) }
.bell-cover.a3 { background: linear-gradient(150deg, #3f5f6b, #171310) }
.bell-cover.a4 { background: linear-gradient(150deg, #6a4a44, #171310) }
.bell-cover.a5 { background: linear-gradient(150deg, #5b6a3f, #171310) }
.bell-cover.a6 { background: linear-gradient(150deg, #7fa08c, #22201a) }
.bell-cover.a7 { background: linear-gradient(150deg, #b98c4e, #221c17) }
.bell-cover.a8 { background: linear-gradient(150deg, #4a5a72, #171310) }
.bell-cover.a9 { background: linear-gradient(150deg, #6d4f6b, #171310) }
.bell-cover.a10 { background: linear-gradient(150deg, #43705f, #221c17) }
.bell-cover.a11 { background: linear-gradient(150deg, #8a6a3a, #171310) }
.bell-cover.a12 { background: linear-gradient(150deg, #55605a, #171310) }
.bell-card h3 { font-size: 17px; margin: 14px 16px 4px; color: var(--bell-lime-2) }
.bell-card p { margin: 0 16px 14px; font-size: 14px; color: #9b8f80 }
.bell-card__go {
  margin: auto 16px 16px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bell-patina-d); border-radius: var(--bell-r);
  color: var(--bell-patina-l); font-size: 15px;
}
.bell-card__go:hover { background: var(--bell-patina-d); color: var(--bell-lime-2); text-decoration: none }
.bell-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline }
.bell-chips__t { font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--bell-patina-l) }
.bell-chips span.bell-chip {
  padding: 6px 13px; border: 1px solid var(--bell-rule-d); border-radius: 40px;
  font-size: 14.5px; color: var(--bell-lime-3);
}

/* ---- лояльность ---- */
.bell-rungs { margin: 26px 0; border-top: 1px solid var(--bell-rule) }
.bell-rung {
  display: grid; grid-template-columns: 190px 1fr 130px; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--bell-rule);
}
.bell-rung__n { font-size: 22px; font-weight: 600 }
.bell-rung__n em { display: block; font-family: "Alegreya Sans", sans-serif; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--bell-mute); font-style: normal }
.bell-rung__bar { height: 10px; background: var(--bell-lime-3); border-radius: 40px; overflow: hidden }
.bell-rung__bar i { display: block; height: 100%; width: var(--f); background: linear-gradient(90deg, var(--bell-patina), var(--bell-patina-d)) }
.bell-rung--top .bell-rung__bar i { background: linear-gradient(90deg, var(--bell-brass-l), var(--bell-brass)) }
.bell-rung__cb { text-align: right; font-size: 19px; font-weight: 600; color: var(--bell-patina-d) }
.bell-rung--top .bell-rung__cb { color: var(--bell-brass) }
.bell-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.bell-note { background: var(--bell-lime-2); border: 1px solid var(--bell-rule); border-radius: var(--bell-r2); padding: 20px }
.bell-note h3 { font-size: 19px }
.bell-note p { margin: 0; font-size: 15.5px; color: #4a4137 }

/* ---- турнир ---- */
.bell-race { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 26px 0 }
.bell-race__c { border: 1px solid var(--bell-rule-d); border-radius: var(--bell-r2); padding: 20px; background: var(--bell-ink-2) }
.bell-race__n { display: block; font-size: 34px; font-weight: 600; color: var(--bell-brass-l) }
.bell-race__c b { display: block; font-weight: 400; font-size: 15px; color: var(--bell-lime-2) }
.bell-race__c i { display: block; font-style: normal; font-size: 13.5px; color: #9b8f80; margin-top: 4px }

/* ---- live ---- */
.bell-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px }
.bell-table {
  border: 1px solid var(--bell-rule); border-radius: var(--bell-r2);
  background: var(--bell-lime-2); overflow: hidden;
}
.bell-table__cover { padding: 26px 16px; color: var(--bell-lime-2); font-size: 19px; font-weight: 600; text-align: center }
.bell-table__cover.b1 { background: #2f4a3f }
.bell-table__cover.b2 { background: #4a3b26 }
.bell-table__cover.b3 { background: #2c3c48 }
.bell-table__cover.b4 { background: #46323a }
.bell-table__cover.b5 { background: #3a4429 }
.bell-table__cover.b6 { background: #2b3330 }
.bell-table__b { padding: 16px }
.bell-table__on {
  display: inline-block; padding: 3px 10px; border-radius: 40px;
  background: var(--bell-patina-d); color: var(--bell-lime-2);
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px;
}
.bell-table__t { font-size: 21px; font-weight: 600 }
.bell-table__b p { margin: 3px 0 0; font-size: 15px; color: #4a4137 }

/* ---- бренд ---- */
.bell-brand h3 { margin-top: 1.5em; color: var(--bell-patina-d) }
.bell-brand p { max-width: 84ch }
.bell-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.bell-badge {
  padding: 9px 16px; border: 1px solid var(--bell-patina); border-radius: 40px;
  font-size: 14.5px; color: var(--bell-patina-d); background: var(--bell-lime-2);
}

/* ---- отзывы ---- */
.bell-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px }
.bell-rev { background: var(--bell-lime-2); border: 1px solid var(--bell-rule); border-radius: var(--bell-r2); padding: 22px }
.bell-rev__st { color: var(--bell-brass); letter-spacing: 3px; margin-bottom: 10px }
.bell-rev__st .off { color: var(--bell-rule) }
.bell-rev__q { font-size: 16px; color: #3b332b }
.bell-rev__m { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bell-mute); margin-top: 14px }
.bell-rev__av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bell-ink); color: var(--bell-patina-l); font-size: 17px;
}

/* ---- касса ---- */
.bell-rails { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 24px 0 }
.bell-rail { border: 1px solid var(--bell-rule); border-radius: var(--bell-r2); padding: 16px; text-align: center; background: var(--bell-lime-2) }
.bell-rail__k { display: block; font-size: 20px; font-weight: 600 }
.bell-rail em { font-style: normal; font-size: 13px; color: var(--bell-mute) }
.bell-clocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.bell-clock { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; background: var(--bell-ink); border-radius: var(--bell-r2); color: var(--bell-lime-3) }
.bell-clock__k { font-size: 22px; font-weight: 600; color: var(--bell-patina-l); flex: none }
.bell-clock span { font-size: 15px }

/* ---- финальный призыв ---- */
.bell-final {
  background: var(--bell-ink); color: var(--bell-lime-2);
  padding: 60px 24px; text-align: center;
}
.bell-final h2 { color: var(--bell-lime-2); max-width: 22ch; margin: 0 auto .4em }
.bell-final p { max-width: 60ch; margin: 0 auto 26px; color: var(--bell-lime-3); font-size: 19px }

/* ---- FAQ ---- */
.bell-faq details {
  border-bottom: 1px solid var(--bell-rule); padding: 4px 0;
}
.bell-faq summary {
  cursor: pointer; list-style: none; padding: 15px 40px 15px 0;
  font-family: "Cormorant Infant", Georgia, serif; font-size: 22px; font-weight: 600;
  position: relative; min-height: 44px;
}
.bell-faq summary::-webkit-details-marker { display: none }
.bell-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 12px;
  font-size: 27px; color: var(--bell-patina-d); line-height: 1;
}
.bell-faq details[open] summary::after { content: "–" }
.bell-faq details p { margin: 0 0 16px; font-size: 16.5px; color: #3b332b; max-width: 88ch }

/* ---- заметка автора ---- */
.bell-author { border-top: 3px double var(--bell-rule); }
.bell-author p { max-width: 88ch; font-size: 16.5px; color: #3b332b }

/* ---- подвал ---- */
.bell-foot { background: var(--bell-ink); color: #9b8f80; padding: 48px 24px 26px }
.bell-foot__top { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1.9fr; gap: 40px }
.bell-foot__legal { font-size: 14.5px; max-width: 46ch; margin-top: 14px }
.bell-foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.bell-foot__col h4 { color: var(--bell-lime-2); font-size: 19px; margin: 0 0 10px }
.bell-foot__col ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; line-height: 2 }
.bell-foot__bot {
  max-width: 1180px; margin: 34px auto 0; padding-top: 20px;
  border-top: 1px solid var(--bell-rule-d); font-size: 13.5px;
  display: grid; gap: 10px;
}

/* ---- адаптив ---- */
@media (max-width: 1080px) {
  .bell-cards { grid-template-columns: repeat(3, 1fr) }
  .bell-rails { grid-template-columns: repeat(3, 1fr) }
  .bell-gauge { grid-template-columns: repeat(3, 1fr) }
  .bell-gauge__c { border-bottom: 1px solid var(--bell-rule-d) }
}
@media (max-width: 900px) {
  .bell-hero { grid-template-columns: 1fr; gap: 32px }
  .bell-grid4 { grid-template-columns: repeat(2, 1fr) }
  .bell-race { grid-template-columns: repeat(2, 1fr) }
  .bell-tables { grid-template-columns: repeat(2, 1fr) }
  .bell-foot__top { grid-template-columns: 1fr }
}
@media (max-width: 620px) {
  body { font-size: 16.5px }
  .bell-bar { flex-wrap: wrap; padding: 10px 16px }
  .bell-nav { margin-left: 0; width: 100%; overflow-x: auto }
  .bell-sec, .bell-hero { padding-left: 16px; padding-right: 16px }
  .bell-sec { padding-top: 44px; padding-bottom: 44px }
  .bell-gauge { grid-template-columns: 1fr }
  .bell-tiles { grid-template-columns: repeat(2, 1fr) }
  .bell-grid3, .bell-grid4, .bell-cards, .bell-race, .bell-tables,
  .bell-revs, .bell-rails, .bell-clocks, .bell-foot__cols { grid-template-columns: 1fr }
  .bell-rung { grid-template-columns: 1fr auto; gap: 6px 12px }
  .bell-rung__bar { grid-column: 1 / -1 }
  .bell-cta--big { width: 100%; padding: 15px 20px }
  h1 { font-size: 30px }
  h2 { font-size: 26px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .bell-cta:hover { transform: none }
}