:root{
  --text:#0f172a;
  --muted:#64748b;
  --brand:#34c3e3;
  --accent:#2fb39a;
  --bg:#f6f7f8;
  --btn:#f8d24a;
  --btn-text:#1f2937;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
}
html,body{height:100%}
*, *::before, *::after{box-sizing:border-box}
body{
	 margin:0;background:#fff;color:var(--text);
	 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial
   }
   a{color:inherit;text-decoration:none}
   .container{max-width:1160px;margin:0 auto;padding:0 20px}
 
   /* Topbar */
   .topbar{padding:18px 0;color:#94a3b8;font-weight:500}
   .topbar .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
   .logo{display:flex;align-items:center;gap:10px;color:#334155}
   .logo-img{width:44px;height:44px;object-fit:contain;border-radius:8px}
   .logo-title{font-weight:800;color:#334155;font-size:32px;line-height:1;white-space:nowrap}
   .logo-text{display:flex;flex-direction:column}
   .logo-sub{font-size:13px;color:#64748b;margin-top:2px}
 
   .online{display:flex;align-items:center;gap:6px;font-size:13px;color:#22c55e}
   .online::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block}
 
   .offline{display:flex;align-items:center;gap:6px;font-size:13px;color:#64748b}
   .offline::before{content:"";width:8px;height:8px;border-radius:50%;background:#9ca3af;display:inline-block}
   .offline a{color:#2AABEE;text-decoration:underline}
 
   .logo__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
   .center{justify-self:center;display:flex;align-items:center;gap:10px}
   .phone{font-size:22px;font-weight:900;color:#334155}
   .right{justify-self:end;text-align:right}
   .city{font-size:18px;color:#475569}
   .addr{font-size:12px;color:#94a3b8;margin-top:4px}
 
   /* Hero */
   .hero{
	 position:relative;
	 padding:24px 0 20px;
	 overflow:visible; /* важно: не обрезаем */
	 background:linear-gradient(180deg,#eef9ff 0%,#ffffff 100%);
   }
   .hero .container{overflow:visible}
   .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
 
   h1{
	 font-size:60px;
	 line-height:1.05;
	 margin:0 0 18px;
	 font-weight:800;
	 letter-spacing:-.5px
   }
 
   .accent{color:#39c1e6}
   .lead{font-size:18px;color:#374151;margin:0 0 26px}
   .cta{display:inline-block;background:var(--btn);color:var(--btn-text);
	 font-weight:800;border:0;border-radius:999px;padding:16px 28px;box-shadow:var(--shadow)}
   .cta:active{transform:translateY(1px)}
 
   /* Features */
   .features{margin-top:34px}
   .f-item{display:flex;gap:14px;align-items:flex-start;margin:20px 0;color:#475569}
   .squiggle{width:38px;height:20px;flex:0 0 38px}
 
   /* Messengers */
   .mess{margin-top:26px;color:#6b7280}
   .mess small{display:block;margin-bottom:6px}
   .icons{display:flex;gap:12px}
   .icon{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.12)}
 
   /* Енот-скраб */
   .enot-scrub{position:relative;overflow:visible; margin-right:clamp(-160px,-8vw,-80px);}
   .scrub-svg{display:block;overflow:visible;width:clamp(440px,48vw,720px);height:auto;max-width:none;}
 
   /* Footer */
   .footer{
	 margin-top:48px;
	 border-top:1px solid #e5e7eb;
	 background:#fafafa;
	 color:#64748b;
	 font-size:14px;
   }
   .footer__row{
	 display:flex;
	 align-items:center;
	 justify-content:space-between;
	 gap:16px;
	 padding:20px 0;
   }
   .footer__copy{ color:#6b7280; }
   .footer__links{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
   .footer__links a{ color:#334155; text-decoration:underline; text-underline-offset:3px; }
   .footer__links a:hover{ color:#0f172a; }
   .footer__links .dot{ color:#cbd5e1; }
 
   /* Responsive */
   @media (max-width:1000px){
	 h1{font-size:56px}
	 .hero__grid{grid-template-columns:1fr}
	 .right{justify-self:start;text-align:left}
	 .enot-scrub{ margin:24px auto 0; }
	 .scrub-svg{ width:min(96%,560px); }
   }
   @media (max-width:520px){
	 h1{font-size:40px}
	 .topbar .row{grid-template-columns:1fr}
	 .center{justify-self:start;margin-top:6px}
   }
   @media (max-width:600px){
	 .center{justify-self:start}
	 .phone{display:inline-block;white-space:nowrap}
	 .topbar .phone + .online,
	 .topbar .phone + .offline{ display:block; margin-top:6px; }
   }
   @media (min-width:900px){
	 .hero__grid{gap:12px}
   }
   @media (max-width:720px){
	 .footer__row{ flex-direction:column; align-items:flex-start; }
   }
 
/* =========================
   Landing layout
   ========================= */
/* =========================
      QUIZ (single source of truth)
      ========================= */
   
   /* Modal base */
   #quiz.modal{
     position:fixed; inset:0;
     display:none;
     align-items:center; justify-content:center;
     background:rgba(0,0,0,.45);
     z-index:9999;
     padding:18px;
   }
   #quiz.modal.open{ display:flex; }
   
   .no-scroll{ overflow:hidden; }
   
   /* Quiz box */
   #quiz .box.quiz{
     width:min(1160px, 96vw);
     max-height:92vh;
     background:#fff;
     border-radius:16px;
     box-shadow:0 20px 60px rgba(0,0,0,.25);
     padding:20px;
     display:flex;
     flex-direction:column;
     overflow:hidden; /* важно: коробка НЕ скроллится */
   }
   
   /* Close */
   #quiz .quiz__x{
     position:absolute; right:14px; top:12px;
     border:0; background:transparent;
     font-size:28px; line-height:1;
     cursor:pointer; opacity:.65;
   }
   #quiz .quiz__x:hover{ opacity:1; }
   
   /* Top */
   #quiz .quiz__top{
     display:flex; gap:16px;
     justify-content:space-between;
     flex-wrap:wrap;
     margin-bottom:14px;
     flex:0 0 auto;
   }
   #quiz .quiz__title{ font-weight:800; font-size:18px; }
   #quiz .quiz__sub{ color:#6b7280; font-size:13px; margin-top:2px; }
   
   #quiz .quiz__progress{ min-width:260px; flex:1; max-width:360px; }
   #quiz .quiz__progressbar{ height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
   #quiz .quiz__progressbar span{ display:block; height:100%; width:0%; background:var(--primary); transition:width .25s ease; }
   #quiz .quiz__progressmeta{
     display:flex; justify-content:space-between;
     font-size:12px; color:#6b7280; margin-top:6px;
   }
   
   /* Form layout */
   #quiz .quiz__form{
     display:flex;
     flex-direction:column;
     min-height:0;
   }
   
   /* Steps сцена: высота берётся из JS (--step-h) */
   #quiz .quiz__steps{
     position:relative;
     flex:1 1 auto;
     min-height:0;
     height:var(--step-h, 520px);   /* КЛЮЧЕВО */
     overflow:hidden;
     transition:height .22s ease;
   }
   
   /* Step layers */
   #quiz .quiz__steps .qstep{
     position:absolute;
     inset:0;
     opacity:0;
     pointer-events:none;
     transform:translate3d(18px,0,0);
     transition:transform .22s ease, opacity .22s ease;
     will-change:transform, opacity;
   }
   #quiz .quiz__steps .qstep.is-active{
     opacity:1;
     pointer-events:auto;
     transform:translate3d(0,0,0);
   }
   #quiz .quiz__steps .qstep.is-in-right{ opacity:0; transform:translate3d(18px,0,0); }
   #quiz .quiz__steps .qstep.is-in-left { opacity:0; transform:translate3d(-18px,0,0); }
   #quiz .quiz__steps .qstep.is-out-left{ opacity:0; transform:translate3d(-18px,0,0); }
   #quiz .quiz__steps .qstep.is-out-right{opacity:0; transform:translate3d(18px,0,0); }
   
   /* Common step UI */
   #quiz .qstep__h{ font-size:26px; font-weight:800; margin:18px 0 12px; }
   #quiz .qgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
   @media (max-width: 560px){ #quiz .qgrid{ grid-template-columns:1fr; } }
   
   #quiz .qcard{
     display:flex; align-items:center; gap:14px;
     border:1px solid #e5e7eb; border-radius:14px;
     padding:16px; cursor:pointer; user-select:none;
     background:#fff;
     transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
   }
   #quiz .qcard--wide{ grid-column:1 / -1; }
   #quiz .qcard__emoji{ font-size:26px; width:34px; text-align:center; }
   #quiz .qcard__text{ font-weight:700; }
   
   #quiz .qcard input{ position:absolute; opacity:0; pointer-events:none; }
   #quiz .qcard:has(input:checked){
     border-color:var(--primary);
     box-shadow:0 10px 24px rgba(37,99,235,.15);
     transform:translateY(-1px);
   }
   
   #quiz .qfield{ margin-top:14px; }
   #quiz .qfield__lbl{ display:block; font-size:13px; color:#6b7280; margin-bottom:6px; }
   #quiz .qinput{
     width:100%; padding:14px 14px;
     border:1px solid #e5e7eb; border-radius:12px;
     font-size:16px; outline:none;
   }
   #quiz .qinput:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
   #quiz .qhint{ margin-top:8px; font-size:12px; color:#6b7280; }
   
   /* Nav (всегда снизу, без sticky и без скролла коробки) */
   #quiz .qnav{
     display:flex;
     gap:10px;
     justify-content:flex-end;
     margin-top:16px;
     flex:0 0 auto;
   }
   #quiz .qbtn{
     border:0; border-radius:12px;
     padding:12px 16px;
     font-weight:800; cursor:pointer;
     background:#e5e7eb;
   }
   #quiz .qbtn--primary{ background:var(--primary); color:#fff; }
   #quiz .qbtn--ghost{ background:#f3f4f6; }
   #quiz .qbtn:disabled{ opacity:.5; cursor:not-allowed; }
   
   /* ===== Step 4 layout ===== */
   #quiz .qshow{
     display:grid;
     grid-template-columns: 1.15fr 0.85fr;
     gap:16px;
     align-items:start;
   }
   
   #quiz .qshow__media{
     display:grid;
     grid-template-rows:auto auto auto;
     gap:10px;
   }
   
   /* Главная картинка: фиксируем форму, чтобы не “сплющивалось” */
   #quiz .qshow__main{
     border-radius:14px;
     overflow:hidden;
     border:1px solid #e5e7eb;
     background:#fff;
     aspect-ratio: 16 / 9;
   }
   #quiz .qshow__main img{
     width:100%;
     height:100%;
     object-fit:cover;
     display:block;
   }
   
   /* Превью: горизонтальная лента, не ломает высоту */
   #quiz .qshow__thumbs{
     display:flex;
     gap:10px;
     overflow:auto;
     padding-bottom:4px;
   }
   #quiz .qthumb{
     border:1px solid #e5e7eb;
     background:#fff;
     border-radius:12px;
     padding:0;
     cursor:pointer;
     width:92px;
     height:64px;
     overflow:hidden;
     flex:0 0 auto;
   }
   #quiz .qthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
   #quiz .qthumb.is-active{ border-color:var(--primary); box-shadow:0 6px 16px rgba(37,99,235,.14); }
   
   /* Smart card */
   #quiz .qsmart{
     border:1px solid #e5e7eb;
     border-radius:14px;
     padding:12px 14px;
     background:#fff;
   }
   #quiz .qsmart__title{ font-weight:800; font-size:13px; color:#111827; margin-bottom:6px; }
   #quiz .qsmart__line{ font-size:13px; color:#374151; margin-bottom:6px; }
   #quiz .qsmart__price{ font-weight:900; font-size:18px; color:var(--primary); margin-bottom:4px; }
   #quiz .qsmart__time{ font-size:12px; color:#6b7280; }
   
   /* Right column */
   #quiz .qlead{ margin:0 0 10px; color:#111827; font-size:14px; line-height:1.45; }
   #quiz .qlist{ margin:0; padding-left:18px; color:#374151; font-size:13px; line-height:1.5; }
   #quiz .qpromo{
     margin-top:12px;
     padding:10px 12px;
     border-radius:12px;
     background:#f8fafc;
     border:1px dashed #cbd5e1;
     font-size:13px;
     color:#0f172a;
   }
   
   /* Mobile quiz layout */
   @media (max-width: 820px){
     #quiz .box.quiz{
       width:min(720px, 96vw);
       max-height:92vh;
       padding:16px;
       overflow:hidden;
       display:flex;
       flex-direction:column;
     }

     #quiz .quiz__form{
       flex:1 1 auto;
       min-height:0;
       display:flex;
       flex-direction:column;
     }

     #quiz .quiz__steps{
       flex:1 1 auto;
       min-height:0;
       overflow:auto;
       -webkit-overflow-scrolling:touch;
       position:relative;
       height:auto;
     }

     #quiz .quiz__steps .qstep{
       position:relative;
       inset:auto;
       height:auto;
       opacity:1;
       transform:none;
       pointer-events:auto;
       transition:none;
     }

     #quiz .quiz__steps .qstep:not(.is-active){
       display:none;
     }

     #quiz .qshow{
       grid-template-columns:1fr;
     }

     #quiz .qstep__h{
       font-size:22px;
       margin:12px 0 10px;
     }

     #quiz .qthumb{
       width:78px;
       height:56px;
     }

     #quiz .qnav{
       flex:0 0 auto;
       position:sticky;
       bottom:0;
       background:#fff;
       padding-top:12px;
       border-top:1px solid rgba(15,23,42,.08);
     }
   }
   
   /* Step 5: крупнее инпуты, но без раздувания отступов */
   #quiz .qstep[data-step="5"] .qinput{
     padding:16px 14px;
     font-size:18px;
     border-radius:14px;
   }
   
   .qhint__link{
     color:var(--primary);
     font-weight:500;
     text-decoration:underline;
     text-underline-offset:3px;
     cursor:pointer;
   }
   
   .qhint__link:hover{
     text-decoration-thickness:2px;
     color:var(--primary-hover);
   }