/* BLNC — стили сайта. Базовая часть перенесена из макета Claude Design. */


  html { scroll-behavior: smooth; }
  
  .blnc-modal-scroll { scrollbar-width: thin; scrollbar-color: rgba(239,217,180,0.4) transparent; }
  .blnc-modal-scroll::-webkit-scrollbar { width: 8px; }
  .blnc-modal-scroll::-webkit-scrollbar-track { background: transparent; }
  .blnc-modal-scroll::-webkit-scrollbar-thumb { background: rgba(239,217,180,0.35); border-radius: 8px; }
  .blnc-modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(239,217,180,0.55); }
  html { --head-font: 'Bricolage Grotesque'; }

  body { margin: 0; background: #023341; color: #efd9b4; font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #efd9b4; text-decoration: none; }
  a:hover { color: #ffffff; }
  ::selection { background: #efd9b4; color: #023341; }
  [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.2,0.8,0.2,1), transform 0.8s cubic-bezier(0.2,0.8,0.2,1); }
  [data-reveal="in"] { opacity: 1; transform: none; }
  [data-seq] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  [data-reveal="in"] [data-seq="1"] { opacity: 1; transform: none; transition-delay: 0s; }
  [data-reveal="in"] [data-seq="2"] { opacity: 1; transform: none; transition-delay: 0.5s; }
  [data-reveal="in"] [data-seq="3"] { opacity: 1; transform: none; transition-delay: 0s; }
  [data-reveal="in"] [data-seq="4"] { opacity: 1; transform: none; transition-delay: 0.15s; }
  [data-reveal="in"] [data-seq="5"] { opacity: 1; transform: none; transition-delay: 0.3s; }
  [data-reveal="in"] [data-seq="6"] { opacity: 1; transform: none; transition-delay: 0.45s; }
  [data-reveal="in"] [data-seq="7"] { opacity: 1; transform: none; transition-delay: 0.6s; }
  [data-reveal="in"] [data-seq="8"] { opacity: 1; transform: none; transition-delay: 0.75s; }
  [data-reveal="in"] [data-seq="9"] { opacity: 1; transform: none; transition-delay: 2.9s; }
  [data-reveal="in"] [data-seq="10"] { opacity: 1; transform: none; transition-delay: 2.96s; }
  [data-reveal="in"] [data-seq="11"] { opacity: 1; transform: none; transition-delay: 3.02s; }
  [data-reveal="in"] [data-seq="12"] { opacity: 1; transform: none; transition-delay: 3.08s; }
  [data-reveal="in"] [data-seq="13"] { opacity: 1; transform: none; transition-delay: 3.14s; }
  [data-reveal="in"] [data-seq="14"] { opacity: 1; transform: none; transition-delay: 3.2s; }
  @keyframes blnc-letter-dim { 0% { color:#efd9b4; } 100% { color:rgba(239,217,180,0.35); } }
  @keyframes blnc-letter-in { 0% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:none; } }
  @keyframes blnc-letter-active { 0% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:none; } }
  @keyframes blnc-strike-anim { 0% { transform:scaleX(0); } 100% { transform:scaleX(1); } }
  [data-ml] { color:#efd9b4; opacity:0; animation-name:blnc-letter-in, blnc-letter-dim; animation-duration:0.35s, 0.3s; animation-timing-function:ease, ease; animation-fill-mode:forwards, forwards; animation-play-state:paused, paused; }
  [data-reveal="in"] [data-ml] { animation-play-state:running, running; }
  [data-sl] { opacity:0; animation-name:blnc-letter-active; animation-duration:0.5s; animation-timing-function:ease; animation-fill-mode:forwards; animation-play-state:paused; }
  [data-reveal="in"] [data-sl] { animation-play-state:running; }
  [data-strike] { animation-name:blnc-strike-anim; animation-duration:0.45s; animation-timing-function:ease; animation-fill-mode:forwards; animation-play-state:paused; }
  [data-reveal="in"] [data-strike] { animation-play-state:running; }
  @keyframes blnc-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
  @keyframes blnc-down { 0% { transform: translateY(0); opacity: 0.2 } 40% { opacity: 1 } 100% { transform: translateY(12px); opacity: 0.2 } }
  @keyframes blnc-photo-fade { 0% { opacity:0; transform:scale(0.94); } 100% { opacity:1; transform:scale(1); } }
  @keyframes blnc-dust-float { 0% { transform:translate(0,0); opacity:0.15; } 50% { opacity:0.9; } 100% { transform:translate(var(--dx,10px),var(--dy,-16px)); opacity:0.15; } }
  @keyframes blnc-photo-exit { 0% { transform: translate(0,0) rotate(var(--rotS,0deg)) scale(1); z-index:45; } 35% { transform: translate(-20px,-420px) rotate(calc(var(--rotS,0deg) + 8deg)) scale(1.1); z-index:45; } 85% { z-index:2; } 100% { transform: translate(30px,39px) rotate(var(--rotE,0deg)) scale(0.85); z-index:2; } }

/* --- Наведение. В макете это были атрибуты style-hover. --- */
.scp0:hover { color: #efd9b4; }
.scp1:hover { background: #efd9b4; color: #023341; border-color: #efd9b4; }
.scp2:hover { background: #ffffff; }
.scp3:hover { box-shadow: 0 0 0 1px #efd9b4; color: #efd9b4; }
.scp4:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.3); }
.scp5:hover { background: rgba(239,217,180,0.55); }
.scp6:hover { background: rgba(239,217,180,0.04); }

/* --- Экраны. На десктопе секция равна экрану, на телефоне тянется по содержимому. --- */
.panel { min-height: 100vh; overflow: hidden; }
.two-col--app    { grid-template-columns: minmax(300px,1.1fr) minmax(260px,0.9fr); }
.two-col--voices { grid-template-columns: minmax(0,0.62fr) minmax(220px,0.38fr); }
.two-col--faq    { grid-template-columns: minmax(160px,0.28fr) minmax(0,0.72fr); }

/* Модалки тарифов */
.modal { display: flex; }
.modal[hidden] { display: none; }
body.is-locked { overflow: hidden; }

@keyframes blnc-oval-0 {
0% { transform: translate(-50%,-50%) translate(190.0px,0.0px); }
4% { transform: translate(-50%,-50%) translate(183.5px,23.3px); }
8% { transform: translate(-50%,-50%) translate(164.5px,45.0px); }
13% { transform: translate(-50%,-50%) translate(134.4px,63.6px); }
17% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
21% { transform: translate(-50%,-50%) translate(49.2px,86.9px); }
25% { transform: translate(-50%,-50%) translate(0.0px,90.0px); }
29% { transform: translate(-50%,-50%) translate(-49.2px,86.9px); }
33% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
38% { transform: translate(-50%,-50%) translate(-134.4px,63.6px); }
42% { transform: translate(-50%,-50%) translate(-164.5px,45.0px); }
46% { transform: translate(-50%,-50%) translate(-183.5px,23.3px); }
50% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
54% { transform: translate(-50%,-50%) translate(-183.5px,-23.3px); }
58% { transform: translate(-50%,-50%) translate(-164.5px,-45.0px); }
63% { transform: translate(-50%,-50%) translate(-134.4px,-63.6px); }
67% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
71% { transform: translate(-50%,-50%) translate(-49.2px,-86.9px); }
75% { transform: translate(-50%,-50%) translate(-0.0px,-90.0px); }
79% { transform: translate(-50%,-50%) translate(49.2px,-86.9px); }
83% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
88% { transform: translate(-50%,-50%) translate(134.4px,-63.6px); }
92% { transform: translate(-50%,-50%) translate(164.5px,-45.0px); }
96% { transform: translate(-50%,-50%) translate(183.5px,-23.3px); }
100% { transform: translate(-50%,-50%) translate(190.0px,-0.0px); }
}
@keyframes blnc-oval-1 {
0% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
4% { transform: translate(-50%,-50%) translate(49.2px,86.9px); }
8% { transform: translate(-50%,-50%) translate(0.0px,90.0px); }
13% { transform: translate(-50%,-50%) translate(-49.2px,86.9px); }
17% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
21% { transform: translate(-50%,-50%) translate(-134.4px,63.6px); }
25% { transform: translate(-50%,-50%) translate(-164.5px,45.0px); }
29% { transform: translate(-50%,-50%) translate(-183.5px,23.3px); }
33% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
38% { transform: translate(-50%,-50%) translate(-183.5px,-23.3px); }
42% { transform: translate(-50%,-50%) translate(-164.5px,-45.0px); }
46% { transform: translate(-50%,-50%) translate(-134.4px,-63.6px); }
50% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
54% { transform: translate(-50%,-50%) translate(-49.2px,-86.9px); }
58% { transform: translate(-50%,-50%) translate(-0.0px,-90.0px); }
63% { transform: translate(-50%,-50%) translate(49.2px,-86.9px); }
67% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
71% { transform: translate(-50%,-50%) translate(134.4px,-63.6px); }
75% { transform: translate(-50%,-50%) translate(164.5px,-45.0px); }
79% { transform: translate(-50%,-50%) translate(183.5px,-23.3px); }
83% { transform: translate(-50%,-50%) translate(190.0px,-0.0px); }
88% { transform: translate(-50%,-50%) translate(183.5px,23.3px); }
92% { transform: translate(-50%,-50%) translate(164.5px,45.0px); }
96% { transform: translate(-50%,-50%) translate(134.4px,63.6px); }
100% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
}
@keyframes blnc-oval-2 {
0% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
4% { transform: translate(-50%,-50%) translate(-134.4px,63.6px); }
8% { transform: translate(-50%,-50%) translate(-164.5px,45.0px); }
13% { transform: translate(-50%,-50%) translate(-183.5px,23.3px); }
17% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
21% { transform: translate(-50%,-50%) translate(-183.5px,-23.3px); }
25% { transform: translate(-50%,-50%) translate(-164.5px,-45.0px); }
29% { transform: translate(-50%,-50%) translate(-134.4px,-63.6px); }
33% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
38% { transform: translate(-50%,-50%) translate(-49.2px,-86.9px); }
42% { transform: translate(-50%,-50%) translate(-0.0px,-90.0px); }
46% { transform: translate(-50%,-50%) translate(49.2px,-86.9px); }
50% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
54% { transform: translate(-50%,-50%) translate(134.4px,-63.6px); }
58% { transform: translate(-50%,-50%) translate(164.5px,-45.0px); }
63% { transform: translate(-50%,-50%) translate(183.5px,-23.3px); }
67% { transform: translate(-50%,-50%) translate(190.0px,-0.0px); }
71% { transform: translate(-50%,-50%) translate(183.5px,23.3px); }
75% { transform: translate(-50%,-50%) translate(164.5px,45.0px); }
79% { transform: translate(-50%,-50%) translate(134.4px,63.6px); }
83% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
88% { transform: translate(-50%,-50%) translate(49.2px,86.9px); }
92% { transform: translate(-50%,-50%) translate(0.0px,90.0px); }
96% { transform: translate(-50%,-50%) translate(-49.2px,86.9px); }
100% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
}
@keyframes blnc-oval-3 {
0% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
4% { transform: translate(-50%,-50%) translate(-183.5px,-23.3px); }
8% { transform: translate(-50%,-50%) translate(-164.5px,-45.0px); }
13% { transform: translate(-50%,-50%) translate(-134.4px,-63.6px); }
17% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
21% { transform: translate(-50%,-50%) translate(-49.2px,-86.9px); }
25% { transform: translate(-50%,-50%) translate(-0.0px,-90.0px); }
29% { transform: translate(-50%,-50%) translate(49.2px,-86.9px); }
33% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
38% { transform: translate(-50%,-50%) translate(134.4px,-63.6px); }
42% { transform: translate(-50%,-50%) translate(164.5px,-45.0px); }
46% { transform: translate(-50%,-50%) translate(183.5px,-23.3px); }
50% { transform: translate(-50%,-50%) translate(190.0px,-0.0px); }
54% { transform: translate(-50%,-50%) translate(183.5px,23.3px); }
58% { transform: translate(-50%,-50%) translate(164.5px,45.0px); }
63% { transform: translate(-50%,-50%) translate(134.4px,63.6px); }
67% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
71% { transform: translate(-50%,-50%) translate(49.2px,86.9px); }
75% { transform: translate(-50%,-50%) translate(0.0px,90.0px); }
79% { transform: translate(-50%,-50%) translate(-49.2px,86.9px); }
83% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
88% { transform: translate(-50%,-50%) translate(-134.4px,63.6px); }
92% { transform: translate(-50%,-50%) translate(-164.5px,45.0px); }
96% { transform: translate(-50%,-50%) translate(-183.5px,23.3px); }
100% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
}
@keyframes blnc-oval-4 {
0% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
4% { transform: translate(-50%,-50%) translate(-49.2px,-86.9px); }
8% { transform: translate(-50%,-50%) translate(-0.0px,-90.0px); }
13% { transform: translate(-50%,-50%) translate(49.2px,-86.9px); }
17% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
21% { transform: translate(-50%,-50%) translate(134.4px,-63.6px); }
25% { transform: translate(-50%,-50%) translate(164.5px,-45.0px); }
29% { transform: translate(-50%,-50%) translate(183.5px,-23.3px); }
33% { transform: translate(-50%,-50%) translate(190.0px,-0.0px); }
38% { transform: translate(-50%,-50%) translate(183.5px,23.3px); }
42% { transform: translate(-50%,-50%) translate(164.5px,45.0px); }
46% { transform: translate(-50%,-50%) translate(134.4px,63.6px); }
50% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
54% { transform: translate(-50%,-50%) translate(49.2px,86.9px); }
58% { transform: translate(-50%,-50%) translate(0.0px,90.0px); }
63% { transform: translate(-50%,-50%) translate(-49.2px,86.9px); }
67% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
71% { transform: translate(-50%,-50%) translate(-134.4px,63.6px); }
75% { transform: translate(-50%,-50%) translate(-164.5px,45.0px); }
79% { transform: translate(-50%,-50%) translate(-183.5px,23.3px); }
83% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
88% { transform: translate(-50%,-50%) translate(-183.5px,-23.3px); }
92% { transform: translate(-50%,-50%) translate(-164.5px,-45.0px); }
96% { transform: translate(-50%,-50%) translate(-134.4px,-63.6px); }
100% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
}
@keyframes blnc-oval-5 {
0% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
4% { transform: translate(-50%,-50%) translate(134.4px,-63.6px); }
8% { transform: translate(-50%,-50%) translate(164.5px,-45.0px); }
13% { transform: translate(-50%,-50%) translate(183.5px,-23.3px); }
17% { transform: translate(-50%,-50%) translate(190.0px,-0.0px); }
21% { transform: translate(-50%,-50%) translate(183.5px,23.3px); }
25% { transform: translate(-50%,-50%) translate(164.5px,45.0px); }
29% { transform: translate(-50%,-50%) translate(134.4px,63.6px); }
33% { transform: translate(-50%,-50%) translate(95.0px,77.9px); }
38% { transform: translate(-50%,-50%) translate(49.2px,86.9px); }
42% { transform: translate(-50%,-50%) translate(0.0px,90.0px); }
46% { transform: translate(-50%,-50%) translate(-49.2px,86.9px); }
50% { transform: translate(-50%,-50%) translate(-95.0px,77.9px); }
54% { transform: translate(-50%,-50%) translate(-134.4px,63.6px); }
58% { transform: translate(-50%,-50%) translate(-164.5px,45.0px); }
63% { transform: translate(-50%,-50%) translate(-183.5px,23.3px); }
67% { transform: translate(-50%,-50%) translate(-190.0px,0.0px); }
71% { transform: translate(-50%,-50%) translate(-183.5px,-23.3px); }
75% { transform: translate(-50%,-50%) translate(-164.5px,-45.0px); }
79% { transform: translate(-50%,-50%) translate(-134.4px,-63.6px); }
83% { transform: translate(-50%,-50%) translate(-95.0px,-77.9px); }
88% { transform: translate(-50%,-50%) translate(-49.2px,-86.9px); }
92% { transform: translate(-50%,-50%) translate(-0.0px,-90.0px); }
96% { transform: translate(-50%,-50%) translate(49.2px,-86.9px); }
100% { transform: translate(-50%,-50%) translate(95.0px,-77.9px); }
}

/* ==========================================================================
   Телефоны и планшеты. В макете этого не было совсем: секции были прибиты
   к высоте экрана и резали содержимое, а колонки не схлопывались.
   ========================================================================== */
@media (max-width: 1024px) {
  #page .two-col { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 820px) {
  /* секция больше не равна экрану — тянется по содержимому */
  #page .panel {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
    padding: 92px 20px 64px;
  }
  #page#page #hero {
    display: flex;
    min-height: 100svh;
    padding: 108px 20px 72px;
  }

  /* стопка фотографий встаёт над текстом, а не висит справа */
  #page .photo-stack {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(280px, 74vw);
    height: min(350px, 96vw);
    margin: 0 auto 32px;
  }

  /* шапка: оставляем логотип и кнопку, пункты меню не влезают */
  #site-header { padding: 14px 20px; }
  #page ~ #site-header .site-nav, .site-nav { display: none; }

  /* 3D-знак на телефоне не грузится — прячем пустые холсты */
  #mark-canvas, #dust-canvas { display: none; }

  /* подтяжки вверх из макета: они рассчитаны на экран в 100vh */
  #page [class*="nudge-"], #page .about-title {
    top: auto; margin-top: 0; margin-left: 0; left: auto;
  }
  #page .about-title { margin-top: 16px; }

  /* тарифы встают друг под друга */
  #page .tariffs { flex-wrap: wrap; justify-content: flex-start; }
  /* !important — карточки тарифов несут инлайновые flex/max-width из макета */
  #page .tariffs > * { flex: 1 1 100% !important; max-width: none !important; }

  img { max-width: 100%; }
}

@media (max-width: 560px) {
  #page .panel { padding: 88px 18px 56px; }
  #page#page #hero { padding: 96px 18px 64px; }
}

/* ==========================================================================
   Отзывы из 2ГИС. В макете цитаты были курсивом заголовочным шрифтом —
   для живого отзыва в 200 символов это нечитаемо.
   ========================================================================== */
#reviews { gap: 12px; }

.review {
  border: 1px solid rgba(239,217,180,0.16);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: #f7ecd8;
}
.review__rule { height: 1px; background: rgba(239,217,180,0.16); }
.review__who  { display: flex; flex-direction: column; gap: 2px; }
.review__name { font-size: 14px; font-weight: 500; color: #f7ecd8; }
.review__meta { font-size: 12px; color: rgba(239,217,180,0.55); }

.reviews__link {
  margin: 0;
  font-size: 13px;
  color: rgba(239,217,180,0.55);
  font-family: ui-monospace, monospace;
}
.reviews__link:hover { color: #efd9b4; }

@media (max-width: 820px) {
  .review { padding: 16px 18px; gap: 12px; }
}

/* ==========================================================================
   Тарифы. В макете обе карточки были одинаково тёмными и различались только
   кнопкой — непонятно, чем они отличаются и какая из них основная.
   ========================================================================== */
#join .tariffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto;   /* карточки в первой строке — значит, равной высоты */
  gap: 14px 24px;
  align-items: stretch;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
}

.tariff {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 22px;
}
.tariff--base { background: rgba(239,217,180,0.04); border: 1px solid rgba(239,217,180,0.18); }
.tariff--prem {
  background: rgba(239,217,180,0.08);
  border: 1px solid #efd9b4;
  box-shadow: 0 0 0 4px rgba(239,217,180,0.07), 0 18px 40px rgba(0,0,0,0.35);
}
.tariff__ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #efd9b4; color: #023341;
  font: 600 11px ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.tariff__head { display: flex; flex-direction: column; gap: 5px; padding-bottom: 16px; }
.tariff__tier {
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(239,217,180,0.72);
}
.tariff__price { font-family: var(--head-font), serif; font-size: clamp(26px,2.4vw,32px); line-height: 1; color: #f7ecd8; }
.tariff--prem .tariff__price { color: #efd9b4; }
.tariff__price span { font-size: 14px; font-family: Manrope, sans-serif; color: rgba(239,217,180,0.6); }
.tariff__lbl {
  font: 500 12px ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(239,217,180,0.45); padding-bottom: 14px;
}
.tariff__list {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(239,217,180,0.12);
}
.tariff__list li {
  position: relative; box-sizing: border-box;
  min-height: 48px; padding: 8px 0 8px 28px;
  display: flex; align-items: center;
  font-size: 15px; line-height: 1.42; color: #f7ecd8;
  border-bottom: 1px solid rgba(239,217,180,0.12);
}
.tariff__list li::before {           /* галочка вместо тусклой точки */
  content: ''; position: absolute; left: 2px; top: 50%; margin-top: -6px;
  width: 13px; height: 7px;
  border-left: 2px solid #efd9b4; border-bottom: 2px solid #efd9b4;
  transform: rotate(-45deg);
}
.tariff__btn {
  margin-top: auto; display: block; text-align: center;
  padding: 13px 20px; border-radius: 999px;
  font-size: 15px; text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.tariff__btn--ghost { border: 1px solid rgba(239,217,180,0.5); color: #efd9b4; margin-top: 18px; }
.tariff__btn--ghost:hover { background: rgba(239,217,180,0.1); color: #efd9b4; }
.tariff__btn--solid { background: #efd9b4; color: #023341; font-weight: 500; margin-top: 18px; }
.tariff__btn--solid:hover { background: #ffffff; color: #023341; }
.tariff__more {
  margin: 10px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: rgba(239,217,180,0.6); text-align: center;
}
.tariff__more:hover { color: #efd9b4; }
.tariff__cap {
  margin: 0; padding: 0 18px; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: rgba(239,217,180,0.6);
}

@media (max-width: 820px) {
  #join .tariffs { grid-template-columns: 1fr; grid-template-rows: none; max-width: none; gap: 10px; }
  /* на телефоне подпись должна идти сразу за своей карточкой */
  #join .tariff--base { order: 1; }
  #join .tariff__cap:nth-of-type(1) { order: 2; margin-bottom: 18px; }
  #join .tariff--prem { order: 3; margin-top: 12px; }
  #join .tariff__cap:nth-of-type(2) { order: 4; }
}

/* ==========================================================================
   Форматы. В макете было 13 одинаковых плиток с рваной высотой и случайной
   чересполосицей фона; метка и номер лежали в данных, но не выводились.
   ========================================================================== */
.format-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}

.format {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(239,217,180,0.18);
  border-radius: 16px;
  background: rgba(239,217,180,0.05);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.format:hover {
  background: rgba(239,217,180,0.1);
  border-color: rgba(239,217,180,0.45);
  transform: translateY(-3px);
}
.format__num {
  position: absolute; right: 13px; top: 12px;
  font: 500 12px ui-monospace, monospace; color: rgba(239,217,180,0.3);
}
.format__tag {
  align-self: start;
  font: 500 11px ui-monospace, monospace; letter-spacing: 0.07em; text-transform: uppercase;
  color: #efd9b4; border: 1px solid rgba(239,217,180,0.4);
  border-radius: 999px; padding: 3px 9px;
}
.format__title { font-size: 16.5px; font-weight: 500; line-height: 1.2; color: #f7ecd8; }
.format__text  { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(239,217,180,0.68); }

/* остаток сетки занимает призыв — иначе тринадцатая карточка болтается */
.format-cta {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(239,217,180,0.16), rgba(239,217,180,0.05));
  border: 1px solid rgba(239,217,180,0.35);
}
.format-cta__title { font-family: var(--head-font), sans-serif; font-size: 19px; color: #efd9b4; }
.format-cta__text  { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(239,217,180,0.72); }
.format-cta__btn {
  margin-top: auto; align-self: start;
  background: #efd9b4; color: #023341; font-weight: 500; font-size: 14px;
  text-decoration: none; padding: 10px 20px; border-radius: 999px;
  transition: background 0.25s;
}
.format-cta__btn:hover { background: #ffffff; color: #023341; }

@media (max-width: 1180px) { .format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .format-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .format-cta { grid-column: span 1; }
}

/* --- Форматы: появление волной и оживление под курсором ------------------- */
.format, .format-cta {
  /* карточки выезжают не разом, а волной по диагонали сетки */
  transition-delay: calc(var(--d, 0) * 55ms);
  transform: translateY(22px);
}
.format[data-reveal="in"], .format-cta[data-reveal="in"] { transform: none; }

/* подъём под курсором не должен ждать очереди волны */
.format:hover { transition-delay: 0s; }

.format__tag,
.format__num { transition: background 0.3s, color 0.3s, border-color 0.3s; }
.format:hover .format__tag { background: #efd9b4; color: #023341; border-color: #efd9b4; }
.format:hover .format__num { color: rgba(239,217,180,0.75); }

/* метка и номер въезжают чуть позже самой карточки */
.format .format__tag, .format .format__title, .format .format__text {
  opacity: 0;
  transition: opacity 0.5s ease calc(var(--d, 0) * 55ms + 160ms), background 0.3s, color 0.3s, border-color 0.3s;
}
.format[data-reveal="in"] .format__tag,
.format[data-reveal="in"] .format__title,
.format[data-reveal="in"] .format__text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .format, .format-cta,
  .format .format__tag, .format .format__title, .format .format__text {
    transition-delay: 0s !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Телефон: лента, а не слайды. Секции идут подряд, содержимое подогнано
   под узкий экран, десктопные подпорки сняты.
   ========================================================================== */
@media (max-width: 820px) {

  /* Принудительные переносы из десктопной вёрстки рвут строку не там */
  #hero p br, #about p br, #app p br { display: none; }

  /* Первый экран: заголовок и подзаголовок ближе друг к другу */
  #hero { gap: 4px; }
  #hero p { max-width: none; }

  /* Форматы: тринадцать карточек подряд — делаем их компактнее и читаемее */
  .format { padding: 14px 16px; gap: 6px; }
  .format__title { font-size: 17px; }
  .format__text  { font-size: 13.5px; line-height: 1.5; }
  .format__num   { top: 14px; right: 14px; }
  .format-cta { padding: 18px 18px 20px; }
  .format-cta__text { font-size: 13.5px; }

  /* Приложение: макет телефона внутри телефона не должен занимать пол-экрана */
  #app [style*="aspect-ratio: 390/844"],
  #app [style*="aspect-ratio: 390 / 844"] { max-height: 46vh; width: min(220px, 62vw); }

  /* Отзывы: портрет основателя ниже, чтобы не выдавливать текст */
  #voices .image-slot, #ilyas-photo { object-position: center 18%; }
  #voices [style*="aspect-ratio: 3 / 4"],
  #voices [style*="aspect-ratio: 3/4"] { height: min(340px, 78vw) !important; }

  /* Пальцем: до кнопок и строк FAQ нужно попадать без прицеливания */
  .tariff__more, .format-cta__btn, .reviews__link { min-height: 44px; display: flex;
    align-items: center; justify-content: center; }
  [data-i] { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 560px) {
  .format__text { font-size: 13px; }
}

/* На телефоне листают быстро: драматические паузы по 2–3,7 секунды,
   рассчитанные на слайд во весь экран, здесь превращаются в пустой экран. */
@media (max-width: 820px) {
  #page [data-reveal],
  #page [data-reveal="in"] [data-seq] { transition-delay: 0s !important; }
  #page [data-ml], #page [data-sl], #page [data-strike] { animation-delay: 0s !important; }

  /* волна у форматов остаётся, но вдвое короче */
  #page .format, #page .format-cta { transition-delay: calc(var(--d, 0) * 30ms) !important; }
  #page .format .format__tag,
  #page .format .format__title,
  #page .format .format__text {
    transition-delay: calc(var(--d, 0) * 30ms + 100ms) !important;
  }
}

/* Лента на телефоне: меньше воздуха между секциями и живой размер заглушки. */
@media (max-width: 820px) {
  #page .panel { padding-top: 72px; padding-bottom: 52px; }
  #page#page #hero { padding-top: 104px; padding-bottom: 60px; }

  /* рамка под скриншот приложения — пока она пустая, целого экрана ей много */
  .app-shot {
    width: min(190px, 52vw) !important;
    max-height: 42vh !important;
    margin: 4px auto 0;
  }
}
@media (max-width: 560px) {
  #page .panel { padding-top: 68px; padding-bottom: 48px; }
}

/* Скрытая секция: раздел приложения ждёт скриншотов и логики.
   !important — раскладку секций задаёт panels.css селектором по id. */
#page > section[hidden] { display: none !important; }