/* ═══════════════════════════════════════════════
   FONT — self-hosted Inter (§7 R3/O6)
   One variable woff2, wght 400–800, opsz pinned to 14, subset to
   Latin-1 + Russian Cyrillic (+ ₸ № and the Kazakh extras). Replaces
   three cross-origin files from fonts.gstatic.com: the Google `latin`
   and `cyrillic` subsets plus `latin-ext`, which the two ₸ glyphs
   pulled in on their own. Same-origin + preloaded, so the face is in
   place before first paint and `swap` never visibly fires — that FOUT
   reflow on .hero__content was the whole 0.01 → 0.04 CLS regression.
   Filename carries a content hash, so it can take the immutable
   one-year cache the rest of /assets/ gets.
════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/public/assets/inter-cyrlat-042500e3.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0400-045F, U+0490-0491,
                 U+04B0-04B1, U+2013-2014, U+2018-201D, U+2026, U+2116,
                 U+20AC, U+20B8, U+2190-2193, U+2212, U+2215, U+2122,
                 U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════
   BASE & RESET
════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:         #0d0d0f;
  --bg-2:       #111114;
  --bg-3:       #16161a;
  --bg-card:    #1a1a1f;
  --bg-card-2:  #1f1f25;
  --border:     rgba(255,255,255,0.10);
  --border-2:   rgba(168,85,247,0.25);

  --purple:     #a855f7;
  --purple-2:   #c084fc;
  --purple-dim: rgba(168,85,247,0.12);
  --purple-glow:rgba(168,85,247,0.35);

  --white:      #ffffff;
  --white-80:   rgba(255,255,255,0.80);
  --white-50:   rgba(255,255,255,0.50);
  --white-20:   rgba(255,255,255,0.38);
  --white-08:   rgba(255,255,255,0.08);

  --green-wa:   #25d366;

  --text:       #e8e8ee;
  --text-muted: #a0a0b0;

  --radius-sm:  8px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* Type scale — 7 steps, ~1.28 ratio. Collapses the old 16-discrete-size set. */
  --fs-xs:  12px;   /* labels, captions */
  --fs-sm:  14px;   /* body small */
  --fs-md:  16px;   /* body */
  --fs-lg:  20px;   /* card titles */
  --fs-xl:  26px;   /* sub-heads */
  --fs-2xl: 34px;   /* section titles, mobile */
  --fs-3xl: clamp(38px, 5vw, 56px);  /* hero */

  /* Elevation — neutral shadows for structure, coloured glow reserved for emphasis */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.4);

  /* Spacing — 4px base scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --topbar-h: 64px;
  --sticky-h: 72px;
}

html {
  font-size: var(--fs-md);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--topbar-h);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

main { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════
   UTILITIES
════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.gradient-text {
  background: linear-gradient(170deg, var(--purple) 0%, var(--purple-2) 60%, #e879f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header--light .section-title,
.section-header--light .section-sub {
  color: var(--white);
}

.section-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-2);
  background: var(--purple-dim);
  border: 1px solid var(--border-2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -0.02em;
}

.section-sub {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-xl);
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.btn--primary {
  background: linear-gradient(135deg, var(--purple) 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: var(--shadow-sm), 0 6px 20px rgba(168,85,247,0.22);
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--purple-2) 0%, var(--purple) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm), 0 10px 28px rgba(168,85,247,0.30); }
.btn--primary:active { transform: translateY(0); }
.btn--primary svg { position: relative; z-index: 1; }
.btn--primary span { position: relative; z-index: 1; }

.btn--whatsapp {
  background: #1a2e22;
  color: var(--green-wa);
  border: 1px solid rgba(37,211,102,0.3);
}
.btn--whatsapp:hover {
  background: #1e3828;
  border-color: var(--green-wa);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(37,211,102,0.2);
}

.btn--ghost {
  background: var(--white-08);
  color: var(--white);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: var(--white-20);
  border-color: var(--white-20);
  transform: translateY(-2px);
}

.btn--large { font-size: var(--fs-md); padding: 16px 32px; }
.btn--full { width: 100%; }

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.7);
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled::before,
.btn[disabled]::before { opacity: 0 !important; }

/* ═══════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 100;
  background: rgba(13,13,15,0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
}
.topbar__logo strong { font-weight: 800; color: var(--purple); }

.topbar__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  padding: 8px 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-2);
  background: var(--purple-dim);
  transition: all var(--transition);
}
.topbar__phone:hover {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* ═══════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,15,0.72) 0%, rgba(13,13,15,0.55) 40%, rgba(13,13,15,0.88) 80%, var(--bg) 100%),
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(168,85,247,0.12) 0%, transparent 70%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 60px 20px 80px;
  max-width: 780px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--white-80);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.badge--pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.5);
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}

.hero__title {
  font-size: clamp(42px, 8vw, 80px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-bottom: 22px;
}

.hero__sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--white-80);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 560px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px;
}

.hero__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: 18px 28px;
  width: fit-content;
  gap: 0;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}
.hero__stat:first-child { padding-left: 0; }
.hero__stat:last-child  { padding-right: 0; }

.hero__stat strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.hero__stat span {
  font-size: var(--fs-xs);
  color: var(--white-50);
  margin-top: 2px;
  white-space: nowrap;
}

.hero__stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white-50);
  z-index: 1;
  animation: bounce 2.4s ease-in-out infinite;
  transition: color var(--transition);
}
.hero__scroll:hover { color: var(--white); }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ═══════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════ */
.how {
  padding: 100px 0;
  background: var(--bg-2);
}

.how__grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.how__step {
  flex: 1;
  min-width: 220px;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.how__step:hover {
  border-color: var(--border-2);
  transform: translateY(-4px);
}

.how__step-num {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--purple-2);
  background: var(--purple-dim);
  border: 1px solid var(--border-2);
  padding: 3px 10px;
  border-radius: 100px;
  width: fit-content;
  margin-bottom: 14px;
}

.how__step-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-dim);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--purple);
  margin-bottom: 14px;
}

.how__step-icon svg { width: 22px; height: 22px; }

.how__step-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.how__step-text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
}

.how__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  align-self: center;
  flex-shrink: 0;
}

.how__image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 400px;
}

.how__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.how__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13,13,15,0.7) 100%);
  z-index: 1;
}

.how__image-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13,13,15,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-2);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-xl);
  color: var(--purple-2);
}

/* ═══════════════════════════════════════════════
   BENEFITS
════════════════════════════════════════════════ */
.benefits {
  padding: 100px 0;
  background: var(--bg);
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 28px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple) 0%, var(--purple-2) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.benefit-card:hover {
  border-color: var(--border-2);
  transform: translateY(-4px);
  background: var(--bg-card-2);
}
.benefit-card:hover::before { opacity: 1; }

.benefit-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-dim);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--purple);
  margin-bottom: 18px;
  transition: all var(--transition);
}
.benefit-card:hover .benefit-card__icon {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.benefit-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.benefit-card__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════
   DRIVERS
════════════════════════════════════════════════ */
.drivers {
  padding: 100px 0;
  background: var(--bg-2);
}

.drivers__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.drivers__image-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.drivers__image {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.drivers__image-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(13,13,15,0.5) 100%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(168,85,247,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.drivers__content .section-title {
  margin-bottom: 32px;
  text-align: left;
}
.drivers__content .section-label { text-align: left; }

.drivers__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.drivers__list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}

.drivers__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-dim);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--purple);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════ */
.faq {
  padding: 100px 0;
  background: var(--bg-2);
}

.faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 4px 24px;
}

.faq__question {
  display: block;
  padding: 18px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
/* The question text is an <h3> inside the <summary> (§7 O11) purely for the
   outline; it must not carry heading typography or break the summary onto its
   own line, hence inline + inherited font. */
.faq__question h3 { display: inline; font: inherit; color: inherit; }
.faq__question::after {
  content: '+';
  float: right;
  color: var(--purple-2);
  font-weight: 400;
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }

.faq__answer {
  padding: 0 0 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════
   TRUST
════════════════════════════════════════════════ */
.trust {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.trust__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.trust__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.trust__overlay {
  position: absolute;
  inset: 0;
  background:
    rgba(13,13,15,0.80),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(168,85,247,0.15) 0%, transparent 60%);
}

.trust__content {
  position: relative;
  z-index: 1;
}

.trust__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 48px;
}

.trust__stat {
  background: rgba(13,13,15,0.7);
  backdrop-filter: blur(8px);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.trust__stat-figure {
  display: flex;
  align-items: flex-start;
}

.trust__stat-num {
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--white) 0%, var(--purple-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.trust__stat-plus {
  font-size: 32px;
  font-weight: 800;
  color: var(--purple);
  line-height: 1;
  margin-left: 2px;
  display: inline-block;
}

.trust__stat-label {
  font-size: var(--fs-xs);
  color: var(--white-50);
  margin-top: 10px;
  line-height: 1.4;
}

.trust__stat-label--special {
  color: var(--purple);
}

/* ═══════════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════════════ */
.cta-section {
  padding: 100px 0;
  background: var(--bg-2);
}

.cta-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.cta-section__image {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-xl);
  display: block;
}

.cta-section__content .section-title {
  text-align: left;
  margin-bottom: 36px;
}
.cta-section__content .section-label { text-align: left; }

/* ═══════════════════════════════════════════════
   FORM
════════════════════════════════════════════════ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--white-80);
}

.contact-form__required { color: var(--purple); }
.contact-form__optional { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }

.contact-form__input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-md);
  padding: 14px 18px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}
.contact-form__input::placeholder { color: var(--text-muted); }
.contact-form__input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
}
.contact-form__input.error { border-color: #f87171; }

.contact-form__error {
  display: block;
  font-size: var(--fs-xs);
  color: #f87171;
  min-height: 18px;
}

.contact-form__submit-error {
  font-size: var(--fs-xs);
  color: #f87171;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius);
  padding: 12px 16px;
  line-height: 1.5;
}

.contact-form__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

.contact-form__success {
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
}
.contact-form__success h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--white);
  margin: 16px 0 8px;
}
.contact-form__success p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.contact-form__success svg { margin: 0 auto; }

.contact-form__alternatives {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.contact-form__alternatives > span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.contact-alt-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white-80);
  padding: 7px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: all var(--transition);
}
.contact-alt-link:hover {
  border-color: var(--purple);
  color: var(--white);
  background: var(--purple-dim);
}
.contact-alt-link--wa { color: var(--green-wa); border-color: rgba(37,211,102,0.2); }
.contact-alt-link--wa:hover { border-color: var(--green-wa); background: rgba(37,211,102,0.08); color: var(--green-wa); }

/* ═══════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--white);
}
.footer__logo strong { font-weight: 800; color: var(--purple); }

.footer__copy {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}
.footer__copy a {
  color: var(--purple);
  font-weight: 600;
}
.footer__copy a:hover { color: var(--purple-2); }

.footer__rights {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
}

/* ═══════════════════════════════════════════════
   STICKY BOTTOM CTA
════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 99;
  display: flex;
  gap: 1px;
  background: var(--border);
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  box-shadow: var(--shadow-lg);
}

/* Mobile-only pattern — a full-width fixed action bar reads as a template
   leak-through on desktop, where the hero CTAs already cover this. */
@media (min-width: 641px) {
  .sticky-cta { display: none; }
}

.sticky-cta.visible { transform: translateY(0); }

.sticky-cta__call,
.sticky-cta__wa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  transition: filter var(--transition);
}

.sticky-cta__call {
  flex: 1.4;
  background: linear-gradient(135deg, var(--purple) 0%, #7c3aed 100%);
  color: #fff;
}
.sticky-cta__call:hover { filter: brightness(1.1); }

.sticky-cta__wa {
  background: #1a2e22;
  color: var(--green-wa);
}
.sticky-cta__wa:hover { filter: brightness(1.15); }

/* ═══════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET
════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .drivers__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .drivers__image {
    height: 380px;
  }

  .cta-section__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cta-section__image {
    height: 320px;
    order: -1;
  }

  .trust__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE
════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --topbar-h: 58px;
    --sticky-h: 64px;
  }

  .container { padding: 0 16px; }

  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); }

  .topbar__phone { min-height: 48px; padding: 12px 16px; }

  /* ── Hero: 844px -> ~800px (§2.1) ── */
  .hero { min-height: 88svh; align-items: flex-end; }
  .hero__content { padding: 24px 16px 28px; }
  .hero__title { font-size: clamp(32px, 9vw, 42px); line-height: 1.08; }
  .hero__sub { font-size: var(--fs-sm); max-width: 34ch; }

  .hero__ctas {
    flex-direction: column;
  }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .hero__stats {
    flex-direction: row;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
  }
  .hero__stat { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; }
  .hero__stat strong { font-size: var(--fs-sm); }
  .hero__stat span { font-size: 10px; line-height: 1.25; }
  .hero__stat-divider { width: 1px; height: 28px; align-self: center; }
  .hero__scroll { display: none; }

  .section-header { margin-bottom: 28px; }

  /* ── How it works: 1,474px -> ~420px (§2.2) ── */
  .how { padding: var(--sp-12) 0; }
  .how__grid {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
  }
  .how__connector { display: none; }
  .how__step {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "num title" "num text";
    align-items: start;
    gap: 2px 14px;
    padding: 16px 18px;
  }
  .how__step-icon { display: none; }
  .how__step-num { grid-area: num; font-size: var(--fs-lg); background: none; border: 0; padding: 0; margin-bottom: 0; }
  .how__step-title { grid-area: title; font-size: var(--fs-md); margin: 0; }
  .how__step-text { grid-area: text; font-size: var(--fs-xs); line-height: 1.45; }
  .how__image-wrap { display: none; }

  /* ── Benefits: 1,599px -> ~430px (§2.3), 2-col tiles, no carousel ── */
  .benefits { padding: var(--sp-12) 0; }
  .benefits__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .benefit-card {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .benefit-card__icon { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 0; }
  .benefit-card__icon svg { width: 18px; height: 18px; }
  .benefit-card__title { font-size: var(--fs-sm); line-height: 1.25; margin-bottom: 0; }
  .benefit-card__text {
    font-size: var(--fs-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Drivers: 1,010px -> ~430px (§2.4) ── */
  .drivers { padding: var(--sp-12) 0; }
  .drivers__image { height: 140px; }
  .drivers__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 24px; }
  .drivers__list-item { font-size: 12.5px; line-height: 1.3; align-items: flex-start; gap: 8px; }
  .drivers__check { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
  .drivers .btn--primary { width: 100%; justify-content: center; }

  /* ── FAQ: 87 px per collapsed row was two wrapped lines of question plus
     18 px of padding above and below (§7 O10). Tighter padding and a tighter
     line-height take it to ~64 px without touching the question text, which
     has to keep matching the FAQPage JSON-LD. The summary still clears a
     48 px tap target. ── */
  .faq { padding: var(--sp-12) 0; }
  .faq__item { padding: 0 16px; }
  .faq__list { gap: 8px; }
  .faq__question { padding: 12px 0; line-height: 1.35; }
  .faq__answer { padding-bottom: 16px; }

  /* ── Trust: rendered, not display:none (§7 R5). Hiding it outright is the
     one thing mobile-first indexing discounts, and "10+ лет опыта" appears
     nowhere else on the page. What §2 objected to was repeating the hero's
     own numbers, so the two figures the hero already gives are what goes,
     not the section. The photo goes too — a flat panel costs no request and
     no scroll. ── */
  .trust { padding: var(--sp-12) 0; background: var(--bg-2); }
  .trust__bg { display: none; }
  .trust__stat--echoes-hero { display: none; }
  .trust .section-header { margin-bottom: var(--sp-6); }
  .trust__stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust__stat { padding: 16px 12px; }
  .trust__stat-num { font-size: 30px; }
  .trust__stat-plus { font-size: 18px; }

  /* ── Contact form: 1,175px -> ~620px (§2.6), decorative photo dropped ── */
  .cta-section { padding: var(--sp-12) 0; }
  .cta-section__image-col { display: none; }
  .cta-section__inner { gap: 0; }

  .contact-form__alternatives {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ── Tap targets below 48px (§4.4) ── */
  .contact-alt-link { min-height: 48px; padding: 12px 14px; }
  .footer__copy a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 17px;
    font-weight: 600;
  }
  .footer__copy br { display: none; }

  .sticky-cta__call,
  .sticky-cta__wa { font-size: var(--fs-sm); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — VERY NARROW (<~330px)
   Below this width the topbar has no room for logo + phone number
   + call icon together, so drop the number and keep a tappable
   call icon (the aria-label on the link still names the action).
════════════════════════════════════════════════ */
@media (max-width: 330px) {
  .topbar__phone span { display: none; }
  .topbar__phone { padding: 12px; gap: 0; }
}

/* ═══════════════════════════════════════════════
   FOCUS VISIBLE (accessibility)
════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a35; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }