/* Адаптивная вёрстка страниц программы привилегий «Три цены».
   Раскладка переключается по доступной ширине И высоте окна; без transform: scale()/zoom;
   без глобального overflow: hidden; основной текст и поля — не меньше 16px. */

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-cyrillic-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #2e2e2f;
  --green: #5ccb2b;
  --btn: #52b236;
  --btn-hover: #469a2d;
  --text-dark: #262628;
  --pad-x: clamp(16px, 4vw, 56px);
  --pad-y: clamp(12px, 3.2vh, 40px);
  --gap: clamp(10px, 2.2vh, 28px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: 96px; /* активное поле и кнопка не прячутся под клавиатурой/краем */
}
body {
  margin: 0;
  color: #fff;
  background: var(--bg);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem; /* 16px */
  line-height: 1.35;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { overflow-wrap: normal; hyphens: manual; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- экран: шапка по содержимому, основной блок занимает остаток ---------- */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding:
    max(var(--pad-y), env(safe-area-inset-top))
    max(var(--pad-x), env(safe-area-inset-right))
    max(var(--pad-y), env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
}
.screen > header, .screen > footer { flex: none; }
.screen > main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
}
.container { width: 100%; max-width: 1200px; margin-inline: auto; min-width: 0; }
.narrow { max-width: 820px; }

.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { width: auto; max-width: 60vw; height: clamp(28px, 5.5vh, 50px); }
.center { text-align: center; }
.center .logo { margin-inline: auto; }
.accent { color: var(--green); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.55em 1.1em;
  border: 0;
  border-radius: 8px;
  background: var(--btn);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.75rem);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  touch-action: manipulation;
}
.btn:hover { background: var(--btn-hover); }
.btn:focus-visible, .option:focus-within, input:focus-visible, a:focus-visible {
  outline: 3px solid #a6f07f; outline-offset: 2px;
}
.btn:disabled { opacity: .7; cursor: progress; }
.btn--block { display: flex; width: 100%; max-width: 516px; margin-inline: auto; }

/* =================== ЛЕНДИНГ =================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--gap) clamp(16px, 3vw, 48px);
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2.6vh, 32px); min-width: 0; }
.hero h1 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, min(1rem + 3.6vw, 9vh), 4.5rem);
}
.hero h1 span { display: block; }
.lead { font-size: clamp(1rem, min(0.75rem + 1vw, 3.4vh), 1.75rem); font-weight: 400; max-width: 34ch; }
.hero__art {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: min(460px, 52vh);
  container-type: inline-size;
}
.hero__art .basket { width: 100%; }
.badge {
  position: absolute;
  top: -4%;
  right: -6%;
  width: max(118px, 44%);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
  color: #fff;
  font-weight: 500;
  line-height: 1.05;
  font-size: max(16px, 8cqi);
  padding: 6%;
}
.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/starburst.png") center / contain no-repeat;
}
.badge > * { white-space: nowrap; }
.badge b { font-weight: 800; font-size: 1.12em; }

.benefits { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 24px); min-width: 0; }
.benefits h2 { font-weight: 800; line-height: 1.1; font-size: clamp(1.5rem, min(1rem + 2vw, 6.5vh), 3.25rem); }
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.6vh, 16px);
}
.card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px clamp(10px, 1.6vw, 20px);
  min-width: 0;
  padding: clamp(10px, 2vh, 22px) clamp(12px, 1.6vw, 24px);
  border-radius: 10px;
  border-bottom: 7px solid var(--c);
  background: var(--bgc);
  color: var(--text-dark);
}
.card:nth-child(-n+2) { grid-column: span 3; }
.card img { width: clamp(56px, min(9vw, 15vh), 140px); grid-row: span 2; align-self: center; }
.card h3 { overflow-wrap: break-word; hyphens: auto; color: var(--c); font-weight: 700; line-height: 1.05; font-size: clamp(1.125rem, min(0.8rem + 1.1vw, 4.4vh), 2rem); }
.card p { font-size: clamp(1rem, min(0.8rem + 0.55vw, 3.3vh), 1.5rem); line-height: 1.2; }
.card--blue   { --c: #1a8bd6; --bgc: #e6f0ff; }
.card--pink   { --c: #e0177f; --bgc: #ffeaf3; }
.card--green  { --c: #4caf2f; --bgc: #ebffe6; }
.card--purple { --c: #8a32e0; --bgc: #f2e7ff; }
.card--yellow { --c: #f5a400; --bgc: #fffde3; }
.cta-repeat { display: none; }

/* Широкое окно обычной высоты (ноутбук, ПК, планшет в альбомной): 5 преимуществ в один ряд,
   иконка над заголовком, компактнее hero — лендинг помещается в один экран. */
@media (min-width: 1000px) and (max-height: 999px) {
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .card, .card:nth-child(-n+2) { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 6px; }
  .card { padding: clamp(10px, 1.8vh, 20px) clamp(12px, 1.2vw, 20px); }
  .card img { grid-row: auto; width: clamp(36px, 6vh, 64px); }
  .card h3 { font-size: clamp(1.125rem, 0.6rem + 0.6vw, 1.5rem); hyphens: auto; overflow-wrap: break-word; }
  .card p { font-size: clamp(1rem, 0.7rem + 0.35vw, 1.2rem); }
  .landing .logo img { height: clamp(26px, 4.6vh, 44px); }
  .landing .hero h1 { font-size: clamp(2rem, min(1rem + 3.2vw, 7.6vh), 4.25rem); }
  .landing .lead { font-size: clamp(1rem, min(0.75rem + 0.9vw, 3vh), 1.6rem); }
  .landing .hero__art { max-width: min(400px, 40vh); }
  .landing .hero__text { gap: clamp(10px, 2.2vh, 28px); }
  .landing .container { max-width: 1320px; }
}
/* Особенно низкое широкое окно (например, 1280×600): минимальные отступы между блоками. */
@media (min-width: 1000px) and (max-height: 640px) {
  .landing { --gap: 10px; --pad-y: 12px; }
  .landing .hero__text { gap: 10px; }
  .landing .benefits { gap: 8px; }
}
/* Средняя ширина (планшет в портрете, узкое окно): 2 колонки. */
@media (max-width: 899px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card, .card:nth-child(-n+2) { grid-column: auto; }
  .card:last-child { grid-column: 1 / -1; }
}
/* Телефон: одна колонка, действие выше иллюстрации, естественная прокрутка. */
@media (max-width: 639px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: min(300px, 80vw); margin-top: 8px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card:last-child { grid-column: auto; }
  .card img { width: 64px; }
  .cta-repeat { display: flex; }
  .landing main { justify-content: flex-start; }
}
/* Альбомная ориентация телефона / очень низкое окно: две колонки в hero, иллюстрация ограничена по высоте. */
@media (max-height: 480px) and (min-width: 560px) {
  .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .hero__art { max-width: min(260px, 60vh); }
  .landing main { justify-content: flex-start; }
}

/* =================== СТРАНИЦА БЛАГОДАРНОСТИ =================== */
.thanks main { align-items: center; text-align: center; gap: clamp(8px, 2.2vh, 26px); }
.thanks .megaphone { height: clamp(72px, 20vh, 300px); width: auto; margin-inline: auto; }
.thanks h1 { font-weight: 800; line-height: 1.02; font-size: clamp(2rem, min(1rem + 3.6vw, 8vh), 4.6rem); }
.thanks h1 span { display: block; }
.thanks .text { display: flex; flex-direction: column; gap: 0.8em; font-size: clamp(1rem, min(0.8rem + 0.8vw, 3.2vh), 1.75rem); max-width: 40ch; margin-inline: auto; }
.thanks .btn { width: 100%; max-width: 516px; margin-top: clamp(4px, 1.5vh, 24px); }

/* =================== ОПРОС =================== */
.survey .head { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4vh, 16px); text-align: center; }
.survey h1 { font-weight: 800; line-height: 1.05; font-size: clamp(1.75rem, min(1rem + 2.6vw, 6.5vh), 3.25rem); }
.survey .lead { max-width: 46ch; margin-inline: auto; }
.survey-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.8vh, 18px); align-items: start; }
.panel {
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 2vh, 22px) clamp(14px, 1.6vw, 22px);
  border: 0;
  border-bottom: 6px solid var(--btn);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-dark);
}
.panel legend, .panel h2 { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.panel legend + *, .panel h2 + * { clear: both; }
.panel .hint { color: #555; font-size: 1rem; margin-bottom: 10px; }
.panel.invalid { border-bottom-color: #e5484d; }
.panel.invalid legend { color: #c62828; }
.options { display: grid; gap: 8px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1.5px solid #dfe2e8;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.25;
}
.option:has(input:checked) { border-color: var(--btn); background: #effaea; }
.option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--btn); }
.option.check { border: 0; padding: 6px 0; min-height: 44px; }
.field {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #c9ced8;
  border-radius: 12px;
  font: inherit;
  font-size: 1rem; /* не меньше 16px — iOS не масштабирует страницу при фокусе */
  color: var(--text-dark);
  background: #fff;
}
.policy { display: inline-flex; align-items: center; min-height: 44px; color: #2b7a1a; font-size: 1rem; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(20px, 3.5vh, 32px); padding-bottom: 8px; }
.form-error { width: 100%; max-width: 760px; background: #fde8e8; color: #9b1c1c; padding: 12px 14px; border-radius: 10px; font-size: 1rem; text-align: left; }
.form-error a { color: inherit; }
.muted { color: #c9c9c9; text-align: center; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset:disabled .option { cursor: default; opacity: .75; }
.done { align-items: center; text-align: center; }
.done .btn { width: 100%; max-width: 516px; }

/* Опрос — прежний вид: одна колонка, заголовок в две строки, логотип по центру; длинная страница прокручивается. */
.survey > main { justify-content: flex-start; max-width: 760px; }
.survey .head { gap: clamp(10px, 2vh, 20px); margin-bottom: clamp(8px, 2vh, 16px); }
.survey .logo img { height: clamp(32px, 6vh, 40px); }
.survey h1 { font-size: clamp(1.875rem, 1rem + 3.4vw, 3.25rem); }
.survey h1 .accent { display: block; }
.survey .lead { font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem); max-width: 60ch; }
.survey .panel { padding: clamp(16px, 2.6vw, 22px) clamp(16px, 2.6vw, 22px) clamp(10px, 1.6vw, 14px); }
.survey .panel legend, .survey .panel h2 { font-size: 1.1875rem; }
/* Телефон и низкие окна: прокрутка с верха, без вертикального центрирования. */
@media (max-width: 699px), (max-height: 560px) {
  .survey main, .thanks main { justify-content: flex-start; }
}

/* =================== ЭФФЕКТЫ =================== */
/* Анимируются только transform и opacity: вёрстка не сдвигается, кнопки доступны сразу.
   При системной настройке «уменьшить движение» всё отключается (см. конец блока). */

/* 1. Появление первого экрана */
@keyframes fx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fx-fade-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.landing .hero h1 > span { animation: fx-rise .55s cubic-bezier(.2,.7,.3,1) both; }
.landing .hero h1 > span + span { animation-delay: .1s; }
.landing .hero .lead { animation: fx-rise .55s .2s cubic-bezier(.2,.7,.3,1) both; }
.landing .hero .btn { animation: fx-rise .55s .3s cubic-bezier(.2,.7,.3,1) backwards; } /* backwards: не мешает hover-эффекту */
.landing .hero__art .basket { animation: fx-fade-in .7s .25s ease-out both; }

/* 3. Бейдж: «впрыгивает», затем звезда медленно вращается, текст неподвижен */
@keyframes fx-pop { 0% { opacity: 0; transform: scale(.5) rotate(-20deg); } 70% { opacity: 1; transform: scale(1.08) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.landing .badge { animation: fx-pop .6s .65s cubic-bezier(.3,1.4,.5,1) both; }
.landing .badge::before { animation: fx-spin 24s 1.3s linear infinite; }
/* вращающиеся лучи звезды не должны создавать горизонтальную прокрутку на узких экранах */
.landing .hero { overflow-x: clip; overflow-clip-margin: 16px; }

/* 4. Кнопки: блик по CTA, подъём при наведении, «вдавливание» при нажатии */
.btn { position: relative; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(82, 178, 54, .35); }
}
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn:disabled { transform: none; box-shadow: none; }
a.btn[data-fd-cta] { overflow: hidden; isolation: isolate; }
a.btn[data-fd-cta]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  z-index: -1;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-20deg);
  animation: fx-shine 6s 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fx-shine { 0% { transform: translateX(-120%) skewX(-20deg); } 18%, 100% { transform: translateX(330%) skewX(-20deg); } }

/* 5. Карточки преимуществ: появление по очереди (класс .fx-wait / .is-in ставит assets/effects.js) */
@keyframes fx-card { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cards .card.fx-wait { opacity: 0; }
.cards .card.is-in { animation: fx-card .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* 8. Мегафон «вздрагивает» при появлении (волны — часть изображения и двигаются вместе с ним) */
@keyframes fx-shout {
  0% { opacity: 0; transform: scale(.85) rotate(-6deg); }
  35% { opacity: 1; transform: scale(1) rotate(0); }
  45% { transform: rotate(-7deg) scale(1.04); } 55% { transform: rotate(5deg) scale(1.04); }
  65% { transform: rotate(-5deg) scale(1.02); } 75% { transform: rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
.thanks .megaphone { transform-origin: 60% 70%; animation: fx-shout 1.3s .15s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cards .card.fx-wait { opacity: 1; }
}