/* =========================================================================
   ТК Адвокат — лендинг-квиз «Правовая помощь военнослужащим»
   Дизайн-система: сдержанная «юридическая» эстетика.
   Токены — единый источник правды для отступов/цвета/типографики/радиусов.
   ========================================================================= */

/* ---------- Fonts -------------------------------------------------------
   Системный стек шрифтов намеренно, без внешних подключений (Google Fonts и т.п.):
   1) не отправляет IP пользователей на сторонние сервера — важно для 152-ФЗ
      и для чувствительной аудитории;
   2) не блокирует рендер и не тратит бюджет LCP/Performance (раздел 4.3 ТЗ).
   -------------------------------------------------------------------------- */

:root{
  /* --- Цвет: 1 фирменный (navy), 1 акцент (bronze), 1 нейтральная рампа, 3 семантических --- */
  --navy-900:#0A1830;
  --navy-800:#0F2340;
  --navy-700:#173A63;
  --navy-600:#2C4E7C;
  --navy-500:#3E679C;

  --accent-600:#9C7A45;
  --accent-700:#846437;
  --accent-100:#F1E7D6;

  --n-0:#FFFFFF;
  --n-50:#F7F8FA;
  --n-100:#EEF0F3;
  --n-200:#DEE2E8;
  --n-300:#C6CCD6;
  --n-400:#9AA3B2;
  --n-600:#5B6472;
  --n-800:#2A313C;
  --n-900:#161A21;

  --success:#1F8F63;
  --success-bg:#E7F4EE;
  --danger:#C1443C;
  --danger-bg:#FBEAE9;
  --warning-bg:#FBF3E4;
  --warning-text:#7A5B18;

  /* --- Отступы: единая шкала, всё кратно 4px --- */
  --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-96:96px;

  /* --- Радиусы: 3 шага --- */
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-pill:999px;

  /* --- Тень: одна, используется скупо --- */
  --shadow-sm: 0 1px 2px rgba(10,24,48,.06), 0 1px 1px rgba(10,24,48,.04);
  --shadow-md: 0 8px 24px rgba(10,24,48,.10), 0 2px 6px rgba(10,24,48,.06);
  --shadow-lg: 0 20px 48px rgba(10,24,48,.16), 0 6px 16px rgba(10,24,48,.08);

  /* --- Тайминги/кривые (emil-design-eng) --- */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --container: 1160px;
  --header-h: 72px;
  --header-h-mobile: 64px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--n-900);
  background:var(--n-0);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--sp-20); }
@media (min-width:768px){ .container{ padding:0 var(--sp-32); } }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-16); top:-60px; background:var(--navy-900); color:#fff;
  padding:var(--sp-12) var(--sp-16); border-radius:var(--r-sm); z-index:1000; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top:var(--sp-16); }

:focus-visible{ outline:2px solid var(--accent-600); outline-offset:2px; }

/* ---------- Типографика: иерархия через размер+вес, не только цвет ---------- */
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-700);
}
h1, .h1{
  font-size:clamp(30px, 5.6vw, 46px);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy-900);
}
h2, .h2{
  font-size:clamp(24px, 3.6vw, 32px);
  line-height:1.2;
  font-weight:700;
  color:var(--navy-900);
  letter-spacing:-.005em;
}
h3, .h3{
  font-size:20px;
  line-height:1.3;
  font-weight:700;
  color:var(--navy-900);
}
.lede{
  font-size:clamp(16px, 2.4vw, 19px);
  line-height:1.55;
  color:var(--n-600);
  font-weight:400;
}
.body-text{ font-size:16px; line-height:1.65; color:var(--n-800); }
.caption{ font-size:13px; line-height:1.45; color:var(--n-600); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h-mobile);
  display:flex; align-items:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--n-100);
  transition:box-shadow var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
@media (min-width:768px){ .site-header{ height:var(--header-h); } }
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-16); width:100%; }

.brand{ display:flex; align-items:center; gap:var(--sp-12); text-decoration:none; min-width:0; flex:1 1 auto; }
.brand-mark{
  flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-sm);
  background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; letter-spacing:.02em;
}
.brand-text{ display:block; min-width:0; }
.brand-name{ display:block; font-weight:700; font-size:15px; color:var(--navy-900); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub{ font-size:11px; color:var(--n-600); line-height:1.2; display:none; }
@media (min-width:480px){ .brand-sub{ display:block; } }

.header-actions{ display:flex; align-items:center; gap:var(--sp-8); flex:0 0 auto; }
.header-phone{
  display:none; align-items:center; gap:var(--sp-8); text-decoration:none; color:var(--navy-900);
  font-weight:600; font-size:14px; padding:var(--sp-8) var(--sp-12); border-radius:var(--r-pill);
  transition:background var(--dur-fast) var(--ease-out);
}
.header-phone:hover{ background:var(--n-50); }
@media (min-width:1024px){ .header-phone{ display:inline-flex; } }

.icon-btn{
  width:40px; height:40px; min-width:44px; min-height:44px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--n-50); color:var(--navy-900); border:1px solid var(--n-100);
  text-decoration:none; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{ background:var(--n-100); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:20px; height:20px; }

/* =========================================================================
   Buttons — единая система
   ========================================================================= */
.btn{
  --btn-h:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8);
  min-height:var(--btn-h); min-width:44px;
  padding:0 var(--sp-24);
  border-radius:var(--r-pill);
  font-weight:600; font-size:15px; line-height:1;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  user-select:none; white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--navy-900); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--navy-800); }
.btn-accent{ background:var(--accent-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-accent:hover{ background:var(--accent-700); }
.btn-outline{ background:transparent; color:var(--navy-900); border-color:var(--n-300); }
.btn-outline:hover{ background:var(--n-50); border-color:var(--n-400); }
.btn-ghost{ background:transparent; color:var(--navy-900); }
.btn-ghost:hover{ background:var(--n-50); }
.btn-block{ width:100%; }
.btn-lg{ --btn-h:56px; font-size:16px; padding:0 var(--sp-32); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1FB859; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--n-50) 0%, var(--n-0) 65%);
  padding:var(--sp-40) 0 var(--sp-48);
  overflow:hidden;
}
@media (min-width:768px){ .hero{ padding:var(--sp-64) 0 var(--sp-64); } }
.hero-inner{ max-width:760px; }
.hero .eyebrow{ margin-bottom:var(--sp-12); display:block; }
.hero h1{ margin-bottom:var(--sp-16); }
.hero .lede{ margin-bottom:var(--sp-24); max-width:600px; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-12); margin-bottom:var(--sp-16); }
.hero-microcopy{
  display:flex; align-items:flex-start; gap:var(--sp-8);
  font-size:13px; color:var(--n-600); max-width:520px;
}
.hero-microcopy svg{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:var(--success); }

/* =========================================================================
   Stats / USP strip
   ========================================================================= */
.stats{ background:var(--navy-900); color:#fff; padding:var(--sp-32) 0; }
.stats-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-24) var(--sp-16);
}
@media (min-width:640px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-num{ font-size:clamp(24px,4vw,32px); font-weight:700; letter-spacing:-.01em; }
.stat-num sup{ font-size:.5em; margin-left:2px; color:var(--accent-100); }
.stat-label{ font-size:13px; color:#B9C3D6; margin-top:var(--sp-4); line-height:1.35; }

/* =========================================================================
   Section shell
   ========================================================================= */
.section{ padding:var(--sp-48) 0; }
@media (min-width:768px){ .section{ padding:var(--sp-80) 0; } }
.section-alt{ background:var(--n-50); }
.section-head{ max-width:640px; margin:0 0 var(--sp-32); }
.section-head .eyebrow{ margin-bottom:var(--sp-8); display:block; }
.section-head h2{ margin-bottom:var(--sp-12); }
.section-head .lede{ margin:0; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* =========================================================================
   Segmentation cards (переиспользуемый компонент)
   ========================================================================= */
.segments-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-16);
}
@media (min-width:640px){ .segments-grid{ grid-template-columns:repeat(2,1fr); } }
.segment-card{
  background:#fff; border:1px solid var(--n-100); border-radius:var(--r-lg);
  padding:var(--sp-24); display:flex; flex-direction:column; gap:var(--sp-16);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.segment-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.segment-icon{
  width:52px; height:52px; border-radius:var(--r-md); background:var(--navy-900);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.segment-icon svg{ width:26px; height:26px; }
.segment-card h3{ margin-bottom:var(--sp-4); }
.segment-card p{ color:var(--n-600); font-size:14.5px; line-height:1.55; flex:1; }

/* =========================================================================
   Legal grounds
   ========================================================================= */
.grounds-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-16); margin-top:var(--sp-24); }
@media (min-width:640px){ .grounds-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grounds-grid{ grid-template-columns:repeat(4,1fr); } }
.ground-card{
  border:1px solid var(--n-100); border-radius:var(--r-md); padding:var(--sp-20);
  background:#fff;
}
.ground-card .num{ font-size:13px; font-weight:700; color:var(--accent-700); margin-bottom:var(--sp-8); display:block; }
.ground-card h3{ font-size:16px; margin-bottom:var(--sp-8); }
.ground-card p{ font-size:14px; color:var(--n-600); line-height:1.55; }

.callout{
  display:flex; gap:var(--sp-12); align-items:flex-start;
  background:var(--warning-bg); border:1px solid #EEDDB0; border-radius:var(--r-md);
  padding:var(--sp-16) var(--sp-20); margin-top:var(--sp-24);
}
.callout svg{ flex:0 0 auto; width:20px; height:20px; color:var(--warning-text); margin-top:1px; }
.callout p{ font-size:14px; color:var(--warning-text); line-height:1.55; margin:0; }
.callout strong{ display:block; margin-bottom:2px; }

/* =========================================================================
   How we work — steps
   ========================================================================= */
.steps-list{ display:grid; grid-template-columns:1fr; gap:var(--sp-16); margin-top:var(--sp-24); counter-reset:step; }
@media (min-width:768px){ .steps-list{ grid-template-columns:repeat(4,1fr); } }
.step-item{ position:relative; padding-top:var(--sp-8); }
.step-num{
  width:36px; height:36px; border-radius:var(--r-pill); background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
  margin-bottom:var(--sp-12);
}
.step-item h3{ font-size:16px; margin-bottom:var(--sp-6); }
.step-item p{ font-size:14px; color:var(--n-600); line-height:1.55; }

/* =========================================================================
   Trust block
   ========================================================================= */
.trust-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-16); margin-bottom:var(--sp-32); }
@media (min-width:640px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
.trust-item{
  display:flex; gap:var(--sp-12); align-items:flex-start;
  border:1px solid var(--n-100); border-radius:var(--r-md); padding:var(--sp-16) var(--sp-20); background:#fff;
}
.trust-item svg{ flex:0 0 auto; width:22px; height:22px; color:var(--success); margin-top:2px; }
.trust-item h3{ font-size:15px; margin-bottom:var(--sp-4); }
.trust-item p{ font-size:13.5px; color:var(--n-600); line-height:1.5; }

.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-16); }
@media (min-width:640px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
.team-card{ text-align:center; }
.team-avatar{
  width:88px; height:88px; border-radius:var(--r-pill); background:var(--navy-800);
  color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-12);
  font-weight:700; font-size:22px; letter-spacing:.02em;
}
.team-card h3{ font-size:15px; margin-bottom:var(--sp-4); }
.team-card p{ font-size:13px; color:var(--n-600); }

/* =========================================================================
   Testimonials
   ========================================================================= */
.testi-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-16); margin-top:var(--sp-24); }
@media (min-width:768px){ .testi-grid{ grid-template-columns:repeat(3,1fr); } }
.testi-card{
  background:#fff; border:1px solid var(--n-100); border-radius:var(--r-lg); padding:var(--sp-24);
  display:flex; flex-direction:column; gap:var(--sp-16);
}
.testi-quote{ font-size:14.5px; line-height:1.6; color:var(--n-800); flex:1; }
.testi-quote::before{ content:"\201C"; }
.testi-quote::after{ content:"\201D"; }
.testi-meta{ display:flex; align-items:center; gap:var(--sp-12); }
.testi-avatar{ width:36px; height:36px; border-radius:var(--r-pill); background:var(--n-100); color:var(--navy-900); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.testi-role{ font-size:13px; font-weight:600; color:var(--navy-900); }
.testi-tag{ font-size:12px; color:var(--n-600); }
.testi-disclaimer{ margin-top:var(--sp-16); font-size:12.5px; color:var(--n-400); }

/* =========================================================================
   FAQ accordion
   ========================================================================= */
.faq-list{ margin-top:var(--sp-24); border-top:1px solid var(--n-100); }
.faq-item{ border-bottom:1px solid var(--n-100); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-16);
  padding:var(--sp-20) 0; font-size:16px; font-weight:600; color:var(--navy-900);
  min-height:44px;
}
.faq-q .chev{ flex:0 0 auto; width:20px; height:20px; transition:transform var(--dur-base) var(--ease-in-out); color:var(--n-600); }
.faq-item[data-open="true"] .faq-q .chev{ transform:rotate(180deg); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-in-out);
}
.faq-a-inner{ padding:0 0 var(--sp-20); font-size:14.5px; color:var(--n-600); line-height:1.65; max-width:680px; }

/* =========================================================================
   Final CTA
   ========================================================================= */
.final-cta{
  background:var(--navy-900);
  border-radius:var(--r-lg);
  padding:var(--sp-40) var(--sp-24);
  text-align:center;
  color:#fff;
}
@media (min-width:768px){ .final-cta{ padding:var(--sp-64) var(--sp-48); } }
.final-cta h2{ color:#fff; margin-bottom:var(--sp-12); }
.final-cta p{ color:#B9C3D6; max-width:520px; margin:0 auto var(--sp-24); font-size:15.5px; }
.final-cta .cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-12); justify-content:center; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ background:var(--n-900); color:#C7CCD4; padding:var(--sp-48) 0 calc(var(--sp-32) + env(safe-area-inset-bottom)); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-32); }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:var(--sp-12); margin-bottom:var(--sp-12); }
.footer-brand .brand-mark{ background:#fff; color:var(--navy-900); }
.footer-brand-name{ color:#fff; font-weight:700; font-size:15px; }
.footer-col h4{ color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp-16); }
.footer-col ul{ display:flex; flex-direction:column; gap:var(--sp-10); }
.footer-col a{ color:#C7CCD4; text-decoration:none; font-size:14px; transition:color var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color:#fff; }
.footer-requisites{ font-size:13px; line-height:1.8; color:#9AA3B2; }
.footer-bottom{
  margin-top:var(--sp-40); padding-top:var(--sp-24); border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:var(--sp-8);
  font-size:12.5px; color:#7C8494;
}
.footer-disclaimer{ max-width:820px; line-height:1.6; }

/* =========================================================================
   Sticky mobile contact bar (единственный «навязчивый» элемент — не блокирует контент)
   ========================================================================= */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:flex; gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-12) calc(var(--sp-8) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--n-100); box-shadow:0 -6px 20px rgba(10,24,48,.08);
}
@media (min-width:1024px){ .mobile-bar{ display:none; } }
.mobile-bar .btn{ flex:1; }

/* =========================================================================
   Quiz modal
   ========================================================================= */
.quiz-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,20,38,.5);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out);
}
.quiz-overlay.is-open{ opacity:1; pointer-events:auto; }
@media (min-width:768px){ .quiz-overlay{ align-items:center; padding:var(--sp-24); } }

.quiz-panel{
  width:100%; max-width:100%; height:100%; max-height:100%;
  background:#fff; display:flex; flex-direction:column;
  border-radius:0;
  transform:translateY(16px); opacity:0;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.quiz-overlay.is-open .quiz-panel{ transform:translateY(0); opacity:1; }
@media (min-width:768px){
  .quiz-panel{ max-width:600px; height:auto; max-height:min(720px,90vh); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
}

.quiz-header{
  display:flex; align-items:center; gap:var(--sp-12);
  padding:var(--sp-16) var(--sp-16) var(--sp-12);
  border-bottom:1px solid var(--n-100);
  flex:0 0 auto;
}
.quiz-back{
  width:40px; height:40px; min-width:44px; min-height:44px; border-radius:var(--r-pill); border:0; background:var(--n-50);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy-900);
  transition:background var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.quiz-back:hover{ background:var(--n-100); }
.quiz-back[disabled]{ opacity:0; pointer-events:none; }
.quiz-progress-wrap{ flex:1; }
.quiz-progress-label{ font-size:12px; color:var(--n-600); margin-bottom:var(--sp-6); font-weight:600; }
.quiz-progress-track{ height:6px; border-radius:var(--r-pill); background:var(--n-100); overflow:hidden; }
.quiz-progress-fill{ height:100%; background:var(--accent-600); border-radius:var(--r-pill); transition:width var(--dur-slow) var(--ease-in-out); }
.quiz-close{
  width:40px; height:40px; min-width:44px; min-height:44px; border-radius:var(--r-pill); border:0; background:var(--n-50);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--n-600);
  transition:background var(--dur-fast) var(--ease-out);
}
.quiz-close:hover{ background:var(--n-100); }

.quiz-body{ flex:1 1 auto; overflow-y:auto; padding:var(--sp-24) var(--sp-20) var(--sp-32); -webkit-overflow-scrolling:touch; }
@media (min-width:768px){ .quiz-body{ padding:var(--sp-32) var(--sp-32) var(--sp-40); } }

.quiz-step{ animation:quizStepIn var(--dur-base) var(--ease-out); }
@keyframes quizStepIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.quiz-step-eyebrow{ font-size:12px; font-weight:700; color:var(--accent-700); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp-8); }
.quiz-step h2{ font-size:clamp(20px,4vw,24px); margin-bottom:var(--sp-20); line-height:1.28; }

.quiz-options{ display:flex; flex-direction:column; gap:var(--sp-10); }
.quiz-option{
  display:flex; align-items:center; gap:var(--sp-12);
  width:100%; text-align:left; padding:var(--sp-16); min-height:56px;
  border:1.5px solid var(--n-200); border-radius:var(--r-md); background:#fff; cursor:pointer;
  font-size:15px; font-weight:500; color:var(--n-900);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quiz-option:hover{ border-color:var(--navy-600); background:var(--n-50); }
.quiz-option:active{ transform:scale(.99); }
.quiz-option.is-selected{ border-color:var(--navy-900); background:var(--navy-900); color:#fff; }
.quiz-option .dot{
  flex:0 0 auto; width:20px; height:20px; border-radius:var(--r-pill); border:1.5px solid var(--n-300);
  display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-fast), background var(--dur-fast);
}
.quiz-option.is-selected .dot{ border-color:#fff; background:#fff; }
.quiz-option.is-selected .dot::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--navy-900); }

.quiz-form{ display:flex; flex-direction:column; gap:var(--sp-16); }
.form-field{ display:flex; flex-direction:column; gap:var(--sp-6); }
.form-field label{ font-size:13px; font-weight:600; color:var(--n-800); }
.form-field input[type="text"], .form-field input[type="tel"]{
  height:52px; border-radius:var(--r-md); border:1.5px solid var(--n-200); padding:0 var(--sp-16);
  font-size:16px; /* >=16px — не даём iOS зумить при фокусе */
  background:#fff; color:var(--n-900);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus{ border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(23,58,99,.12); outline:none; }
.form-field input.has-error{ border-color:var(--danger); }
.field-error{ font-size:12.5px; color:var(--danger); min-height:16px; }

.messenger-choice{ display:flex; gap:var(--sp-8); }
.messenger-choice button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:var(--sp-8);
  height:48px; border-radius:var(--r-md); border:1.5px solid var(--n-200); background:#fff; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--n-800);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.messenger-choice button svg{ width:18px; height:18px; }
.messenger-choice button.is-selected{ border-color:var(--navy-900); background:var(--n-50); color:var(--navy-900); }

.consent-row{ display:flex; align-items:flex-start; gap:var(--sp-10); margin-top:var(--sp-4); }
.consent-row input[type="checkbox"]{
  width:20px; height:20px; min-width:20px; margin-top:1px; accent-color:var(--navy-900); cursor:pointer;
}
.consent-row label{ font-size:12.5px; line-height:1.5; color:var(--n-600); }
.consent-row a{ color:var(--navy-800); text-decoration:underline; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.quiz-footer{ padding:var(--sp-16) var(--sp-20) calc(var(--sp-16) + env(safe-area-inset-bottom)); border-top:1px solid var(--n-100); flex:0 0 auto; }
@media (min-width:768px){ .quiz-footer{ padding:var(--sp-16) var(--sp-32) var(--sp-24); } }

.quiz-thanks{ text-align:center; padding:var(--sp-24) 0; }
.quiz-thanks-icon{
  width:72px; height:72px; border-radius:var(--r-pill); background:var(--success-bg); color:var(--success);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-20);
}
.quiz-thanks-icon svg{ width:36px; height:36px; }
.quiz-thanks h2{ margin-bottom:var(--sp-12); }
.quiz-thanks p{ color:var(--n-600); font-size:15px; line-height:1.6; margin-bottom:var(--sp-24); max-width:420px; margin-left:auto; margin-right:auto; }

.quiz-error-banner{
  display:none; align-items:center; gap:var(--sp-8); background:var(--danger-bg); color:var(--danger);
  border-radius:var(--r-sm); padding:var(--sp-12) var(--sp-16); font-size:13px; margin-bottom:var(--sp-16);
}
.quiz-error-banner.is-visible{ display:flex; }

body.quiz-open{ overflow:hidden; }

/* =========================================================================
   Legal pages (privacy/consent/disclaimer)
   ========================================================================= */
.legal-page{ padding:var(--sp-48) 0 var(--sp-80); }
.legal-page .container{ max-width:760px; }
.legal-page h1{ margin-bottom:var(--sp-8); }
.legal-page .updated{ color:var(--n-600); font-size:13px; margin-bottom:var(--sp-32); }
.legal-page h2{ font-size:19px; margin:var(--sp-32) 0 var(--sp-12); }
.legal-page p, .legal-page li{ color:var(--n-800); font-size:15px; line-height:1.75; margin-bottom:var(--sp-12); }
.legal-page ul{ padding-left:var(--sp-20); list-style:disc; }
.legal-page a{ color:var(--navy-800); }
.back-home{ display:inline-flex; align-items:center; gap:var(--sp-8); margin-bottom:var(--sp-24); font-size:14px; font-weight:600; color:var(--navy-800); text-decoration:none; }

/* =========================================================================
   Utility
   ========================================================================= */
.mt-0{ margin-top:0 !important; }
@media (max-width:1023.98px){ .desktop-only{ display:none !important; } }
@media (min-width:1024px){ .mobile-only{ display:none !important; } }