/* riobet-7.buzz — одностраничник. Вёрстка повторяет исходный макет:
   тёмный фон страницы, тёмная шапка с логотипом, белая карточка контента
   по центру, картинки во всю ширину колонки текста. */

:root {
  --page:   #0e2535;   /* фон страницы */
  --header: #041623;   /* шапка */
  --card:   #ffffff;   /* карточка с текстом */
  --text:   #1a1a1a;
  --head:   #111827;
  --rule:   #c8d4dc;
  --btn:    #27ae60;
  --btn-h:  #219a54;
  --foot:   #7f8c99;
  --col:    660px;     /* ширина колонки текста внутри карточки */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 15px/1.55 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------- шапка */
.hdr {
  background: var(--header);
  padding: 14px 20px;
}
.hdr__in {
  max-width: 1120px;
  margin: 0 auto;
}
.logo { display: inline-block; }
.logo img { width: 115px; height: auto; }

/* --------------------------------------------------------- карточка */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 60px;
}
.card {
  background: var(--card);
  padding: 34px 40px 46px;
}

h1 {
  font-size: 22px;
  line-height: 1.32;
  color: var(--head);
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
}

h2 {
  font-size: 17px;
  line-height: 1.35;
  color: var(--head);
  margin: 30px 0 14px;
  font-weight: 700;
}

p { margin: 0 0 16px; }

/* колонка текста и картинок по центру карточки */
.col {
  max-width: var(--col);
  margin: 0 auto;
}

.shot { margin: 0 0 18px; }
.shot--narrow { max-width: 415px; margin: 0 auto 18px; }

/* ---------------------------------------------------------- кнопка */
.cta {
  display: block;
  width: max-content;
  margin: 18px auto 24px;
  padding: 12px 26px;
  background: var(--btn);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .15s ease;
}
.cta:hover, .cta:focus { background: var(--btn-h); }

.final { font-weight: 700; margin-top: 22px; }

/* ---------------------------------------------------------- подвал */
.ftr {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 20px 40px;
  color: var(--foot);
  font-size: 13px;
}

/* --------------------------------------------------------- мобильный */
@media (max-width: 720px) {
  .wrap { padding: 0 12px 40px; }
  .card { padding: 22px 16px 30px; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; }
  .logo img { width: 100px; }
}