.hero-section {
  background: linear-gradient(135deg, #fff8e1, #fffaee);
  padding: clamp(48px, 6vw, 96px) 0;
}
.hero-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.hero-text .lead {
  margin: 10px 0 22px;
  color: #444;
  max-width: 56ch;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  justify-items: center;
}
.card-img {
  background: #ffffff;
  border: 1px solid #f1e5b2;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(255, 179, 0, .12);
}
.float-a { transform: rotate(-2deg); }
.float-b { transform: rotate(2deg); }

@media (max-width: 992px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .hero-media { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .hero-media { grid-template-columns: 1fr; }
}
/* ===== Section: WHY ===== */
.why-section {
  background: #fffdf3;
  padding: clamp(44px, 6vw, 88px) 0;
  border-top: 1px solid #eee3b8;
  border-bottom: 1px solid #eee3b8;
}

.why-head {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.why-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #222;
}
.why-sub {
  margin: 0 auto;
  max-width: 62ch;
  color: #4a4a4a;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}

.why-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #f1e5b2;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 10px 28px rgba(255, 179, 0, 0.10);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.why-card:hover,
.why-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(255, 179, 0, 0.16);
}

.why-media img {
  width: 100%;
  border-radius: 14px;
}

.why-body .why-title {
  margin: 4px 0 8px;
  font-size: 1.15rem;
  color: #1f1f1f;
}
.why-body p {
  margin: 0 0 10px;
  color: #454545;
}
.why-points {
  margin: 0;
  padding-left: 18px;
  color: #333;
}
.why-points li { margin: 6px 0; }

/* Responsive */
@media (max-width: 992px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .why-grid { grid-template-columns: 1fr; }
}
/* ===== Section: HOW IT PLAYS ===== */
.how-section {
  background: #fff8e6;
  padding: clamp(44px, 6vw, 88px) 0;
  border-top: 1px solid #f0e2ac;
}
.how-head {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.how-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.how-sub {
  margin: 0 auto;
  max-width: 62ch;
  color: #494949;
}

.how-wrap { position: relative; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}
.how-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #efdca0;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 10px 28px rgba(255, 179, 0, 0.10);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.how-card:hover,
.how-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(255, 179, 0, 0.16);
}

.how-media img {
  width: 100%;
  border-radius: 14px;
}

.how-title {
  margin: 4px 0 8px;
  font-size: 1.12rem;
  color: #1f1f1f;
}
.how-points {
  margin: 0;
  padding-left: 18px;
  color: #353535;
}
.how-points li { margin: 6px 0; }

.how-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}

/* Responsive */
@media (max-width: 992px) {
  .how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .how-grid { grid-template-columns: 1fr; }
}
/* ===== Section: ROADSIDE CHALLENGES ===== */
.challenges-section {
  background: #fffdf3;
  padding: clamp(44px, 6vw, 92px) 0;
  border-top: 1px solid #eee3b8;
  border-bottom: 1px solid #eee3b8;
}
.ch-head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); }
.ch-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.ch-sub {
  margin: 0 auto;
  max-width: 62ch;
  color: #474747;
}

.ch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .ch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ch-grid { grid-template-columns: 1fr; }
}

.ch-item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #f1e5b2;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 10px 28px rgba(255, 179, 0, 0.10);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.ch-item:hover,
.ch-item:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(255, 179, 0, 0.16);
}
.ch-media img {
  width: 100%;
  border-radius: 14px;
}

.ch-title { margin: 4px 0 8px; font-size: 1.12rem; color: #1f1f1f; }
.ch-points { margin: 0; padding-left: 18px; color: #333; }
.ch-points li { margin: 6px 0; }

.ch-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}

/* ===== Unique micro-animations for hazards ===== */
/* 1) Sway: плавное покачивание (для конусов) */
@keyframes ch-sway-kf {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-2px); }
}
.ch-sway .ch-media img {
  animation: ch-sway-kf 2.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}

/* 2) Hop: лёгкий подпрыг (для луж) */
@keyframes ch-hop-kf {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  60% { transform: translateY(-2px); }
}
.ch-hop .ch-media img {
  animation: ch-hop-kf 2.4s cubic-bezier(.25,.8,.25,1) infinite;
}

/* 3) Jitter X: микродрожь по оси X (для знаков) */
@keyframes ch-jitter-kf {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1.5px); }
  40% { transform: translateX(1.5px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}
.ch-jitter .ch-media img {
  animation: ch-jitter-kf 900ms steps(6) infinite;
  will-change: transform;
}

/* 4) Breathe: «дыхание» тени (для перьев) */
@keyframes ch-breathe-shadow-kf {
  0%, 100% { box-shadow: 0 12px 28px rgba(255,179,0,.12); }
  50% { box-shadow: 0 18px 36px rgba(255,179,0,.20); }
}
.ch-breathe .ch-item,
.ch-breathe {
  /* используем вложенность: эффект на карточке */
}
.ch-breathe {
  position: relative;
}
.ch-breathe { /* безопасная группировка */ }
.ch-breathe .ch-media img {
  border-radius: 14px;
}
.ch-breathe {
  animation: ch-breathe-shadow-kf 3.2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ch-sway .ch-media img,
  .ch-hop .ch-media img,
  .ch-jitter .ch-media img,
  .ch-breathe {
    animation: none !important;
  }
}
/* ===== Section: POWER-UPS & PERKS ===== */
.perks-section {
  background: #fff8e6;
  padding: clamp(44px, 6vw, 92px) 0;
  border-top: 1px solid #f0e2ac;
}
.perks-head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); }
.perks-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.perks-sub {
  margin: 0 auto;
  max-width: 62ch;
  color: #474747;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}
@media (max-width: 992px) {
  .perks-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .perks-grid { grid-template-columns: 1fr; }
}

.perk-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #efdca0;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 10px 28px rgba(255, 179, 0, 0.10);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform, box-shadow, filter;
}
.perk-card:hover,
.perk-card:focus-within {
  box-shadow: 0 16px 36px rgba(255, 179, 0, 0.18);
}

/* Media */
.perk-media img {
  width: 100%;
  border-radius: 14px;
  /* лёгкое паряние у иконок */
  animation: perk-float-kf 5s ease-in-out infinite;
}

/* Body */
.perk-title { margin: 4px 0 8px; font-size: 1.12rem; color: #1f1f1f; }
.perk-points { margin: 0; padding-left: 18px; color: #333; }
.perk-points li { margin: 6px 0; }

/* ===== Unique animations ===== */
/* 1) 3D-наклон при наведении */
.perk-tilt:hover,
.perk-tilt:focus-within {
  transform: perspective(800px) rotateX(3deg) rotateY(-3deg) translateY(-4px);
}

/* 2) Вспышка контура для hot-перка (пульсирующий обвод) */
@keyframes perk-outline-flash-kf {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.0), 0 0 0 0 rgba(255, 179, 0, 0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.25), 0 10px 24px rgba(255, 179, 0, 0.15); }
}
.perk-hot {
  animation: perk-outline-flash-kf 2.6s ease-in-out infinite;
}

/* 3) Парение и лёгкий наклон у изображений */
@keyframes perk-float-kf {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%      { transform: translateY(-5px) rotate(-0.5deg); }
  70%      { transform: translateY(-2px) rotate(0.4deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .perk-hot,
  .perk-media img { animation: none !important; }
  .perk-tilt:hover,
  .perk-tilt:focus-within { transform: none; }
}

.perks-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}
/* ===== Section: LIGHTWEIGHT & OFFLINE ===== */
.lw-section {
  background: #fffdf3;
  padding: clamp(44px, 6vw, 92px) 0;
  border-top: 1px solid #eee3b8;
}
.lw-head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); }
.lw-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.lw-sub { margin: 0 auto; max-width: 62ch; color: #4a4a4a; }

.lw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}
@media (max-width: 992px) { .lw-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .lw-grid { grid-template-columns: 1fr; } }

.lw-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #f1e5b2;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 10px 28px rgba(255, 179, 0, 0.10);
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform, box-shadow;
}
.lw-card:hover,
.lw-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(255, 179, 0, 0.16);
}
.lw-media img { width: 100%; border-radius: 14px; }

.lw-title { margin: 4px 0 8px; font-size: 1.12rem; color: #1f1f1f; }
.lw-points { margin: 0; padding-left: 18px; color: #333; }
.lw-points li { margin: 6px 0; }

.lw-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}

/* ===== Unique animations for this section ===== */

/* 1) Объёмное мерцание (скелетон/шеймер) на карточке Small install */
@keyframes lw-shimmer-kf {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.lw-shimmer .lw-meter {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #fff3c8;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid #efdca0;
}
.lw-shimmer .lw-fill {
  display: block;
  height: 100%;
  width: 58%;
  border-radius: 999px;
  background-image: linear-gradient(90deg,
    rgba(255, 179, 0, .2) 0%,
    rgba(255, 179, 0, .55) 50%,
    rgba(255, 179, 0, .2) 100%
  );
  background-size: 200% 100%;
  animation: lw-shimmer-kf 2.1s linear infinite;
}
.lw-shimmer .lw-fill::after {
  content: attr(data-label);
  display: inline-block;
  margin-left: 8px;
  font-size: .85rem;
  color: #6b5f2e;
  vertical-align: middle;
}

/* 2) Пульс батареи */
@keyframes battery-pulse-kf {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.0); }
  50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.12); }
}
.battery-pulse {
  animation: battery-pulse-kf 2.8s ease-in-out infinite;
}

/* 3) Дрейф облаков (горизонтальный параллакс) */
@keyframes cloud-drift-kf {
  0% { transform: translateX(-2px); }
  50% { transform: translateX(4px); }
  100% { transform: translateX(-2px); }
}
.cloud-drift .lw-media img {
  animation: cloud-drift-kf 5.5s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lw-shimmer .lw-fill,
  .battery-pulse,
  .cloud-drift .lw-media img {
    animation: none !important;
  }
}
/* ===== Small install — fixed progress bar ===== */
.lw-meter {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #fff3c8;               /* трек */
  border: 1px solid #efdca0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* Заполнение — ширина через CSS-переменную, задаём классом-модификатором */
.lw-fill {
  --val: .58;                         /* дефолт, на всякий случай */
  display: block;
  height: 100%;
  width: calc(var(--val) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd98a 0%, #ffcc6a 55%, #ffe7ad 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 120, .55),
    0 1px 0 rgba(255,255,255,.5);
  transition: width .6s ease;
  position: relative;
}

/* Глянцевый блик (аккуратный, без «полосатости») */
.lw-fill::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Плавное "объёмное мерцание" фона — лёгкое и ненавязчивое */
@keyframes lw-sheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.lw-shimmer .lw-fill {
  background-image:
    linear-gradient(90deg, rgba(255, 217, 138, .0), rgba(255, 217, 138, .18), rgba(255, 217, 138, .0)),
    linear-gradient(90deg, #ffd98a 0%, #ffcc6a 55%, #ffe7ad 100%);
  background-size: 200% 100%, 100% 100%;
  animation: lw-sheen 3.2s linear infinite;
}

/* Подпись под полосой — вместо текста внутри */
.lw-meter-note {
  margin: 6px 0 0;
  font-size: .88rem;
  color: #6b5f2e;
}

/* Модификаторы значений (можешь добавить свои при необходимости) */
.val-50 { --val: .50; }
.val-58 { --val: .58; }
.val-62 { --val: .62; }
.val-70 { --val: .70; }
.val-80 { --val: .80; }

/* Уважение reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lw-shimmer .lw-fill { animation: none !important; }
}
/* ===== Section: COMMUNITY NOTES ===== */
.community-section {
  background: #fff8e6;
  padding: clamp(44px, 6vw, 92px) 0;
  border-top: 1px solid #f0e2ac;
}
.com-head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); }
.com-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.com-sub { margin: 0 auto; max-width: 62ch; color: #474747; }

.com-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}
@media (max-width: 992px) { .com-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .com-grid { grid-template-columns: 1fr; } }

.paper {
  background: #ffffff;
  border: 1px solid #efdca0;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow:
    0 10px 28px rgba(255, 179, 0, 0.10),
    inset 0 1px 0 rgba(255,255,255,.6);
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform, box-shadow;
}
.paper:hover,
.paper:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(255, 179, 0, 0.18);
}

.com-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.com-ava {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffecb3;
}
.com-author { margin: 0 0 2px; font-size: 1.02rem; color: #1f1f1f; }
.com-meta { margin: 0; font-size: .9rem; color: #6b5f2e; }

.com-text { margin: 12px 0; color: #363636; }
.com-proof { margin: 10px 0 0; }
.stamp {
  width: 112px; max-width: 70%;
  opacity: 0; transform: scale(.85) rotate(-6deg);
  filter: drop-shadow(0 6px 14px rgba(255,179,0,.18));
  animation: stamp-pop .9s ease forwards .25s;
  user-select: none; pointer-events: none;
}
.stamp.liked     { mix-blend-mode: multiply; }
.stamp.approved  { mix-blend-mode: multiply; }
.stamp.feathered { mix-blend-mode: multiply; }

.com-signature {
  margin: 10px 0 0;
  font-family: "Inter", sans-serif;
  font-style: italic;
  color: #6b5f2e;
  position: relative;
}
.com-signature::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ffd98a, #ffcc6a);
  transform-origin: left center;
  transform: scaleX(0);
  animation: signature-draw .8s ease forwards .5s;
}

/* Небольшой рандом в расположении карточек */
.note-a { transform: rotate(-.6deg); }
.note-b { transform: rotate(.4deg);  }
.note-c { transform: rotate(-.3deg); }

/* ===== Unique animations ===== */
@keyframes stamp-pop {
  0%   { opacity: 0; transform: scale(.85) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1.00) rotate(-4deg); }
}

@keyframes signature-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* плавное появление карточек */
.paper.reveal, .paper { /* базовое состояние наследуется из .reveal */ }
/* ===== Section: NO PAYWALLS ===== */
.fairplay-section {
  background: #fffdf3;
  padding: clamp(44px, 6vw, 92px) 0;
  border-top: 1px solid #eee3b8;
  border-bottom: 1px solid #eee3b8;
}
.fp-head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); }
.fp-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.fp-sub { margin: 0 auto; max-width: 62ch; color: #484848; }

.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: stretch;
}
@media (max-width: 992px) { .fp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .fp-grid { grid-template-columns: 1fr; } }

.fp-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #f1e5b2;
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 10px 28px rgba(255, 179, 0, 0.10);
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform, box-shadow;
}
.fp-card:hover,
.fp-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(255, 179, 0, 0.18);
}
.fp-media img { width: 100%; border-radius: 14px; }
.fp-title { margin: 4px 0 8px; font-size: 1.12rem; color: #1f1f1f; }
.fp-points { margin: 0; padding-left: 18px; color: #333; }
.fp-points li { margin: 6px 0; }

.fp-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}

/* ===== Unique animations ===== */
/* 1) marker-sweep: подчёркивание маркером под заголовком карточки */
@keyframes marker-sweep-kf {
  from { transform: scaleX(0); opacity: .6; }
  to   { transform: scaleX(1); opacity: 1; }
}
.fp-marker .fp-title {
  position: relative;
  display: inline-block;
}
.fp-marker .fp-title::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, #ffe08a, #ffcb5e);
  transform-origin: left center; transform: scaleX(0);
  animation: marker-sweep-kf .7s ease forwards .15s;
}

/* 2) coin-cross: мягкое появление перечёркивания монетки */
@keyframes coin-cross-kf {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0);   opacity: 1; }
}
.fp-coinx .fp-media {
  position: relative;
}
.fp-coinx .fp-media::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(closest-side, transparent 58%, rgba(255, 99, 71, .18) 60%) ,
              linear-gradient(transparent calc(50% - 2px), rgba(255, 99, 71, .75) calc(50% - 2px), rgba(255, 99, 71, .75) calc(50% + 2px), transparent calc(50% + 2px));
  border-radius: 14px;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  animation: coin-cross-kf .8s ease forwards .2s;
  pointer-events: none;
}

/* 3) scale-tick: покачивание «весов» как сигнал честности */
@keyframes scale-tick-kf {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-1.4deg); }
  60% { transform: rotate(1.2deg); }
}
.fp-scale .fp-media img {
  animation: scale-tick-kf 2.6s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fp-marker .fp-title::after,
  .fp-coinx .fp-media::after,
  .fp-scale .fp-media img { animation: none !important; }
}
/* ===== Section: FAQ ===== */
.faq-section {
  background: #fff8e6;
  padding: clamp(44px, 6vw, 92px) 0;
  border-top: 1px solid #f0e2ac;
}
.faq-head { text-align: center; margin-bottom: clamp(22px, 3vw, 36px); }
.faq-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
  color: #1f1f1f;
}
.faq-sub { margin: 0 auto; max-width: 62ch; color: #474747; }

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}

/* Item */
.faq-item {
  border: 1px solid #f1e5b2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(255, 179, 0, .10);
  overflow: clip;
  transition: box-shadow .22s ease, transform .22s ease;
}
.faq-item:hover,
.faq-item:focus-within { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 179, 0, .16); }

/* Summary line */
.faq-item > summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  list-style: none; /* hide default triangle */
  cursor: pointer;
  padding: 14px 16px;
  position: relative;
  font-weight: 600;
}
.faq-item > summary::-webkit-details-marker { display: none; }

.faq-marker {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: #fff8d0;
  border: 1px solid #efdca0;
  transition: transform .25s ease;
}
.faq-marker img { width: 16px; height: 16px; border-radius: 2px; }

/* Focus underline sweep on question text */
.faq-item > summary:focus-visible {
  outline: none;
}
.faq-item > summary:focus-visible::after {
  content: "";
  position: absolute; left: 54px; right: 16px; bottom: 6px;
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #ffe08a, #ffcb5e);
  transform-origin: left center; transform: scaleX(0);
  animation: underline-sweep .45s ease forwards;
}

/* Body */
.faq-body {
  display: grid;
  gap: 10px;
  padding: 0 16px 14px 56px;
  color: #333;
  opacity: 0;
  max-height: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease, max-height .3s ease;
}

/* Open state with unique animations */
.faq-item[open] .faq-body {
  opacity: 1;
  transform: translateY(0);
  max-height: 300px; /* enough for single paragraph */
}

/* Feather twist on marker when open */
@keyframes feather-twist {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-10deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}
.faq-item[open] .faq-marker {
  animation: feather-twist .6s ease;
}

/* Fold-fade keyframes for body (progressive appearance) */
@keyframes fold-fade {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.faq-item[open] .faq-body { animation: fold-fade .32s ease; }

/* underline-sweep for focus */
@keyframes underline-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Responsive padding */
@media (max-width: 520px) {
  .faq-body { padding-left: 50px; }
}
/* Отступ снизу у списка, чтобы CTA ушёл ниже текста */
.faq-list {
  display: grid;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
  margin-bottom: clamp(24px, 4vw, 48px); /* 👈 добавили */
}

/* Контейнер кнопок — всегда ниже контента */
.faq-cta {
  clear: both;                         /* 👈 на всякий случай, если где-то всплывёт float */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0;                       /* не нужен, т.к. есть отступ у .faq-list */
  padding-top: 4px;                    /* маленький «воздух» */
}

/* Комфортная ширина кнопок */
.faq-cta .btn { min-width: 220px; }

/* На узких экранах делаем вертикальную колонку */
@media (max-width: 560px) {
  .faq-cta { flex-direction: column; align-items: stretch; }
  .faq-cta .btn { width: 100%; }
}
/* ===== Section: DOWNLOAD CTA ===== */
.download-section {
  position: relative;
  overflow: clip;
  padding: clamp(56px, 7vw, 112px) 0;
  background: linear-gradient(180deg, #fff8e6 0%, #fff3d6 100%);
  border-top: 1px solid #f0e2ac;
}

/* лёгкий «конфетти»-дрифт на фоне */
.download-section::before {
  content: "";
  position: absolute; inset: -10% -5% auto -5%;
  height: 60%;
  background:
    radial-gradient(6px 6px at 10% 40%, rgba(255,179,0,.18) 30%, transparent 31%) repeat,
    radial-gradient(5px 5px at 70% 20%, rgba(255,204,90,.16) 30%, transparent 31%) repeat,
    radial-gradient(4px 4px at 40% 70%, rgba(255,221,140,.14) 30%, transparent 31%) repeat;
  background-size: 160px 140px, 180px 170px, 200px 160px;
  animation: confetti-drift 28s linear infinite;
  pointer-events: none;
}
@keyframes confetti-drift {
  0%   { transform: translateY(-8px); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(-8px); }
}

.dl-wrap { display: grid; gap: clamp(18px, 3vw, 28px); }

.dl-head { text-align: center; }
.dl-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  color: #1f1f1f;
}
.dl-sub {
  margin: 0 auto;
  max-width: 62ch;
  color: #4a4a4a;
}

.dl-cta {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.dl-note {
  margin: 4px 0 0;
  font-size: .95rem;
  color: #6b5f2e;
}

/* свечение кнопки */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,179,0,.0), 0 14px 32px rgba(255,179,0,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255,179,0,.18), 0 16px 36px rgba(255,179,0,.24); }
}
.btn-glow {
  animation: glow-pulse 2.8s ease-in-out infinite;
}

/* Safety panel */
.dl-safe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin: clamp(14px, 2.5vw, 22px) auto 0;
  max-width: 820px;
  background: #fff;
  border: 1px solid #f1e5b2;
  border-radius: 16px;
  padding: clamp(12px, 2vw, 18px);
  box-shadow: 0 10px 28px rgba(255,179,0,.10);
}
.safe-icon img {
  width: 48px; height: 48px; border-radius: 10px;
  transform: scale(.9);
  opacity: 0;
  animation: shield-pop .7s ease forwards .2s;
  filter: drop-shadow(0 6px 14px rgba(255,179,0,.18));
}
@keyframes shield-pop {
  0%   { opacity: 0; transform: scale(.85) rotate(-6deg); }
  70%  { opacity: 1; transform: scale(1.05) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.safe-title { margin: 0 0 4px; font-size: 1.06rem; color: #1f1f1f; }
.safe-text  { margin: 0; color: #3a3a3a; }
.safe-links { margin: 6px 0 0; }
.safe-links a { color: #1b73e8; }

@media (max-width: 640px) {
  .dl-safe { grid-template-columns: 1fr; text-align: center; }
  .safe-icon { justify-self: center; }
}