/* HERO */
.hero { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.hero-title {
  margin: 8px 0 14px;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  color: #8a3700;
  letter-spacing: .2px;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .18em;
  color: #A34300; font-weight: 700; font-size: 12px;
}
.hero-text { max-width: 60ch; color: #3a2b14; }
.hero-ctas { display: flex; gap: 12px; margin: 16px 0 10px; flex-wrap: wrap; }

.hero-media { justify-self: center; }
.hero-figure { margin: 0 0 10px; text-align: center; }
.hero-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; }
.hero-icons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.icon { filter: drop-shadow(0 4px 14px rgba(255, 166, 0, .18)); border-radius: 14px; }

/* Decorative floating dots (parallax) */
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.dot {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD37A, #FFAF17 60%, #FF8C00);
  opacity: .45;
  animation: float 8s ease-in-out infinite;
  will-change: transform;
}
.d1 { top: 12%; left: 6%; animation-delay: 0s; }
.d2 { top: 72%; left: 12%; animation-delay: .9s; }
.d3 { top: 34%; right: 8%; animation-delay: 1.8s; }
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) }
  50% { transform: translateY(-10px) translateX(6px) }
}

/* Hover micro-tilt for buttons */
.btn:hover { transform: translateY(-2px) rotate(-.25deg); }

/* Responsive */
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr; }
}
/* WHY IT'S FUN */
.fun-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.fun-title {
  font-size: clamp(24px, 3.2vw, 36px);
  color: #7b3200;
  margin: 0;
}
.fun-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 8px; }
.nowrap { white-space: nowrap; }

.fun-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
.fun-card {
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  will-change: transform;
}
.fun-card:hover,
.fun-card:focus-within {
  transform: translateY(-4px) rotate(-.25deg);
  box-shadow: 0 12px 28px rgba(255, 166, 0, .25);
  border-color: rgba(255, 166, 0, .45);
}
.fun-figure { margin: 0 0 10px; text-align: center; }
.fun-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; }
.fun-card-title {
  margin: 2px 0 8px;
  color: #8a3700;
  font-size: clamp(18px, 2.2vw, 22px);
}
.fun-text { color: #3a2b14; margin: 0 0 8px; }
.fun-points {
  margin: 0; padding-left: 18px;
  color: #3a2b14;
}
.fun-points li { margin: 6px 0; }

.fun-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 6px;
}
.badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  color: #5c2a00;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 991px) {
  .fun-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .fun-grid { grid-template-columns: 1fr; }
}
/* ========== SECTION 3: HOW IT PLAYS ========== */
.how-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.how-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.how-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 4px; }
.nowrap { white-space: nowrap; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
  position: relative;
}
.step {
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  will-change: transform;
}
.step:hover,
.step:focus-within {
  transform: translateY(-4px) rotate(.25deg);
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}
.step-fig { margin: 0 0 10px; text-align: center; }
.step-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; }
.step-title { margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px,2.2vw,22px); }
.step-text { color: #3a2b14; margin: 0; }

/* Unique: egg wobble (pauses until reveal) */
@keyframes eggWobble {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0.8deg); }
  75% { transform: translateY(-2px) rotate(-1.2deg); }
}
.step-icon { will-change: transform; }
.how.is-visible .step:nth-child(1) .step-icon { animation: eggWobble 1.6s ease-in-out .0s 2 both; }
.how.is-visible .step:nth-child(2) .step-icon { animation: eggWobble 1.6s ease-in-out .15s 2 both; }
.how.is-visible .step:nth-child(3) .step-icon { animation: eggWobble 1.6s ease-in-out .30s 2 both; }

/* Unique: progress track fills on reveal */
.how-track {
  position: relative;
  height: 6px;
  margin-top: 6px;
  background: #ffe8b5;
  border-radius: 999px;
  overflow: hidden;
}
.how-track::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #FFB200, #FF8C00);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22,.95,.5,1);
  will-change: transform;
}
.how.is-visible .how-track::before { transform: scaleX(1); }

/* Dots ping sequentially */
.how-track .dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #FF8C00; transform: translateY(-50%);
}
.how-track .d1 { left: 8%; }
.how-track .d2 { left: 50%; }
.how-track .d3 { left: 92%; }

@keyframes dotPing {
  0% { box-shadow: 0 0 0 0 rgba(255,140,0,.45); }
  100% { box-shadow: 0 0 0 14px rgba(255,140,0,0); }
}
.how.is-visible .how-track .d1 { animation: dotPing 1.2s ease-out .2s 1 both; }
.how.is-visible .how-track .d2 { animation: dotPing 1.2s ease-out .5s 1 both; }
.how.is-visible .how-track .d3 { animation: dotPing 1.2s ease-out .8s 1 both; }

.how-note { color: #6b4a27; font-size: 0.9rem; margin-top: 8px; }

/* Responsive */
@media (max-width: 991px) { .how-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-track .d1 { left: 6%; } .how-track .d2 { left: 50%; } .how-track .d3 { left: 94%; }
}

/* ========== SECTION 4: ROADSIDE CHALLENGES ========== */
.chall-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.chall-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.chall-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 4px; }

.chall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
.chall-card {
  position: relative;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  overflow: hidden;
}
.chall-card:hover,
.chall-card:focus-within {
  transform: translateY(-4px) rotate(-.25deg);
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}
.chall-fig { margin: 0 0 10px; text-align: center; }
.chall-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; }
.chall-card-title { margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px,2.2vw,22px); }
.chall-text { color: #3a2b14; margin: 0; }

/* Unique: animated lane shimmer (subtle) */
.lane-shimmer::after {
  content: "";
  position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.35) 50%,
                                      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@keyframes shimmer {
  0% { left: -40%; opacity: 0; }
  10% { opacity: .6; }
  100% { left: 120%; opacity: 0; }
}
.chall.is-visible .lane-shimmer::after {
  animation: shimmer 1.2s ease-out .2s 1 both;
}
.chall-card:hover::after { animation: shimmer .9s ease-out 0s 1 both; }

/* Unique: drifting hazard bubbles */
.hazard {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD37A, #FFAF17 60%, #FF8C00);
  opacity: .55;
  right: 12px; bottom: 12px;
}
@keyframes drift {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-6px,-4px); }
  50% { transform: translate(-10px,2px); }
  75% { transform: translate(-4px,-6px); }
}
.chall.is-visible .hazard.drift { animation: drift 2.6s ease-in-out .25s infinite alternate; }

/* Responsive */
@media (max-width: 991px) { .chall-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .chall-grid { grid-template-columns: 1fr; } }
/* ========== SECTION 5: PERKS (flip cards, accessible) ========== */
.perks-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.perks-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.perks-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 4px; }

.perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}

.perk-card { perspective: 1000px; }
.perk-inner {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fffaf0;
  transition: box-shadow .25s ease, border-color .2s ease, transform .6s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.perk-inner:focus-within,
.perk-inner:hover {
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}

/* flip by class (works on mobile/desktop) */
.perk-inner.is-flipped { transform: rotateY(180deg); }

.perk-face {
  padding: clamp(14px, 2.4vw, 18px);
  min-height: 280px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid; gap: 8px; align-content: start;
}
.perk-front { background: #fffaf0; }
.perk-back  {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: #fff7e3;
  transform: rotateY(180deg);
}

/* hide non-visible face from nav and click */
.perk-face[aria-hidden="true"]  { visibility: hidden; pointer-events: none; }
.perk-face[aria-hidden="false"] { visibility: visible; pointer-events: auto; }

.perk-fig { margin: 0; text-align: center; }
.perk-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; text-align: center; }
.perk-name { margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px,2.2vw,22px); }
.perk-text { color: #3a2b14; margin: 0; }
.perk-list { margin: 0; padding-left: 18px; color: #3a2b14; }

.flip-toggle {
  justify-self: start;
  border: 2px solid #FFB200;
  background: #fffdf6;
  color: #8a4b00;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.flip-toggle:hover { transform: translateY(-2px) rotate(-.25deg); background: #fff6d9; }

/* Unique sparkle sweep when flipped on */
.perk-inner.is-flipped .perk-back::after {
  content: "";
  position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.35) 50%,
                                      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: shimmer .9s ease-out 0s 1 both;
}

/* Subtle bob on images when opened */
.perk-inner.is-flipped .perk-back .perk-fig img { animation: eggWobble 1.4s ease-in-out .15s 2 both; }

.perk-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.perk-badges .badge {
  padding: 8px 12px; border-radius: 999px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  color: #5c2a00; font-weight: 700; border: 1px solid rgba(0,0,0,.06);
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce) {
  .perk-inner { transition: none; transform: none !important; }
  .perk-back { position: relative; transform: none; }
  .perk-inner.is-flipped .perk-back::after,
  .perk-inner.is-flipped .perk-back .perk-fig img { animation: none; }
}

/* Responsive */
@media (max-width: 991px) { .perks-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .perks-grid { grid-template-columns: 1fr; } }

/* reuse from earlier sections */
@keyframes shimmer {
  0% { left: -40%; opacity: 0; }
  10% { opacity: .6; }
  100% { left: 120%; opacity: 0; }
}
@keyframes eggWobble {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(.8deg); }
  75% { transform: translateY(-2px) rotate(-1.2deg); }
}

/* ========== SECTION 6: NO PAYWALLS (counters) ========== */
.nopay-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.nopay-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.nopay-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 4px; }

.nopay-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
.stat-card {
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(16px, 2.6vw, 22px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat-label { margin: 0; color: #6b4a27; font-weight: 700; }
.stat-value {
  margin: 8px 0 0;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  color: #8a3700;
  letter-spacing: .5px;
}

/* Unique: soft glow sweep on appear */
.glow::after {
  content: "";
  position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.35) 50%,
                                      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
}
.nopay.is-visible .glow::after { animation: shimmer 1.2s ease-out .1s 1 both; }

/* Responsive */
@media (max-width: 991px) { .nopay-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .nopay-stats { grid-template-columns: 1fr; } }
/* Небольшой подсвет при неизменном числе (0 -> 0) */
.stat-value { transition: transform .2s ease, background-color .2s ease; border-radius: 12px; }
.pulse-once {
  background-color: rgba(255, 210, 120, .25);
  transform: scale(1.02);
}
/* ========== SECTION 7: LIGHTWEIGHT & OFFLINE-FRIENDLY ========== */
.light-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.light-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.light-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 8px; }

.light-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
.spec-card {
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  will-change: transform;
}
.spec-card:hover,
.spec-card:focus-within {
  transform: translateY(-4px) rotate(-.25deg);
  box-shadow: 0 12px 28px rgba(255,166,0,.25);
  border-color: rgba(255,166,0,.45);
}
.spec-fig { margin: 0 0 10px; text-align: center; }
.spec-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; }
.spec-title { margin: 2px 0 8px; color: #8a3700; font-size: clamp(18px,2.2vw,22px); }
.spec-text { color: #3a2b14; margin: 0 0 6px; }
.spec-points { margin: 0; padding-left: 18px; color: #3a2b14; }
.spec-points li { margin: 6px 0; }

/* Decorative battery meter */
.battery {
  margin-inline: auto;
  display: grid; place-items: center;
  width: min(260px, 80%);
  position: relative;
}
.battery .cells {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  width: 100%; height: 24px; padding: 4px;
  border-radius: 8px; border: 2px solid #FFB200; background: #fffdf6;
}
.battery .nub {
  position: absolute; right: -10px; width: 8px; height: 12px;
  border-radius: 2px; background: #FFB200;
}
.cell {
  border-radius: 4px;
  background: linear-gradient(180deg, #FFD37A, #FFAF17 60%, #FF8C00);
  transform: scaleX(0);
  transform-origin: left center;
  filter: drop-shadow(0 2px 8px rgba(255,166,0,.25));
}
@keyframes fillCell { to { transform: scaleX(1); } }
.light.is-visible .c1 { animation: fillCell .5s cubic-bezier(.22,.95,.5,1) .10s forwards; }
.light.is-visible .c2 { animation: fillCell .5s cubic-bezier(.22,.95,.5,1) .28s forwards; }
.light.is-visible .c3 { animation: fillCell .5s cubic-bezier(.22,.95,.5,1) .46s forwards; }
.light.is-visible .c4 { animation: fillCell .5s cubic-bezier(.22,.95,.5,1) .64s forwards; }

/* Responsive */
@media (max-width: 991px) { .light-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .light-grid { grid-template-columns: 1fr; } }

/* ========== SECTION 8: COMMUNITY NOTES ========== */
.comm-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.comm-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.comm-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 8px; }

.comm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}
.quote {
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  display: grid; gap: 8px;
  transform: translateY(14px);
  opacity: 0;
}
.comm.is-visible .quote { animation: riseIn .6s ease forwards; }
.comm.is-visible .quote:nth-child(1) { animation-delay: .05s; }
.comm.is-visible .quote:nth-child(2) { animation-delay: .15s; }
.comm.is-visible .quote:nth-child(3) { animation-delay: .25s; }
.comm.is-visible .quote:nth-child(4) { animation-delay: .35s; }

@keyframes riseIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.quote-fig { margin: 0; }
.avatar { border-radius: 12px; }
.q {
  margin: 0;
  color: #3a2b14;
  position: relative;
  padding-left: 20px;
}
.q::before {
  content: "“";
  position: absolute; left: 0; top: 0;
  font-size: 28px; line-height: 1; color: #FF8C00;
}
.q.no-avatar { padding-left: 0; }
.author {
  margin: 0; color: #6b4a27; font-weight: 700; position: relative;
}
.author .a-name { position: relative; }
.author .a-name::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.quote:hover .author .a-name::after,
.quote:focus-within .author .a-name::after { transform: scaleX(1); }

.comm-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1199px) { .comm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px)  { .comm-grid { grid-template-columns: 1fr; } }
/* ========== SECTION 9: FAQ ========== */
.faq-inner { display: grid; gap: clamp(20px, 3.5vw, 28px); }
.faq-title { font-size: clamp(24px, 3.2vw, 36px); color: #7b3200; margin: 0; }
.faq-intro { max-width: 65ch; color: #3a2b14; margin: 6px 0 8px; }

.faq-list { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fffaf0;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .2s ease;
}
.faq-item[open] {
  border-color: rgba(255,166,0,.45);
  box-shadow: 0 10px 24px rgba(255,166,0,.22);
}

.faq-q {
  list-style: none; /* hide default marker */
  cursor: pointer;
  padding: 14px 18px;
  position: relative;
  font-weight: 700;
  color: #7b3200;
}
.faq-q::-webkit-details-marker { display: none; }

/* arrow indicator */
.faq-q::after {
  content: "";
  position: absolute; right: 16px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid #A34300; border-bottom: 2px solid #A34300;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .2s ease;
}
.faq-item[open] .faq-q::after { transform: translateY(-50%) rotate(45deg); }

/* animated underline on focus/hover */
.faq-q::before {
  content: "";
  position: absolute; left: 18px; right: 42px; bottom: 8px; height: 2px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease;
}
.faq-q:hover::before, .faq-q:focus-visible::before { transform: scaleX(1); }

.faq-a {
  padding: 0 18px 14px 18px;
  color: #3a2b14;
  animation: faqRise .28s ease;
}
@keyframes faqRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== SECTION 10: DOWNLOAD CTA ========== */
.dl-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 3.5vw, 32px);
  align-items: center;
}
.dl-title { font-size: clamp(26px, 3.6vw, 40px); color: #7b3200; margin: 0 0 6px; }
.dl-text  { max-width: 60ch; color: #3a2b14; margin: 0 0 12px; }
.dl-ctas  { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-note  { color: #6b4a27; font-size: .95rem; margin: 10px 0 0; }

.dl-media { justify-self: center; }
.dl-figure { margin: 0; text-align: center; position: relative; }
.dl-cap { font-size: 12px; color: #6b4a27; margin-top: 6px; }

/* unique animation: subtle speedlines behind the image */
.speedlines::before,
.speedlines::after {
  content: ""; position: absolute; left: -20%; right: -20%; height: 2px; top: 30%;
  background: linear-gradient(90deg, rgba(255,140,0,.0), rgba(255,140,0,.35), rgba(255,140,0,0));
  transform: translateX(-10%) scaleX(0.6);
  opacity: 0; pointer-events: none;
}
.speedlines::after { top: 65%; }
.dl.is-visible .speedlines::before { animation: streak 1s ease-out .1s 1 both; }
.dl.is-visible .speedlines::after  { animation: streak 1s ease-out .25s 1 both; }
@keyframes streak {
  0% { transform: translateX(-12%) scaleX(0.6); opacity: 0; }
  40% { opacity: .85; }
  100% { transform: translateX(12%) scaleX(1); opacity: 0; }
}

/* Responsive */
@media (max-width: 991px) { .dl-inner { grid-template-columns: 1fr; } }
/* === HERO FIX (Home) — выравнивание и компактнее отступы === */
.home-hero{ 
  padding-top: clamp(12px, 2vw, 28px);          /* было слишком большое */
}
.home-hero .hero-grid{
  align-items: start;                            /* вместо center */
  grid-template-columns: 1.05fr .95fr;          /* аккуратный баланс колонок */
  grid-auto-rows: minmax(min-content, max-content);
  column-gap: clamp(20px, 3.5vw, 40px);
}
.home-hero .hero-copy{
  align-self: start; 
  min-width: 0;                                  /* не распираем сетку длинными строками */
  margin-top: 0;
}
.home-hero .hero-media{
  align-self: start;
  min-width: 0;
  margin-top: 0;
}
.home-hero .hero-title{
  margin: 4px 0 10px;                            /* поднимаем заголовок */
  line-height: 1.05;
}
.home-hero .eyebrow{ margin: 0 0 8px; }

/* порядок на мобилке: сначала текст, потом изображение */
@media (max-width: 767px){
  .home-hero .hero-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media";
    align-items: start;
    row-gap: 16px;
  }
  .home-hero .hero-copy{ grid-area: copy; }
  .home-hero .hero-media{ grid-area: media; }
}