/* /vizitka/: продукт «Живая визитка». Основа: /style.css сайта (шапка, кнопки, секции, форма). */

/* ---------- ПЕРВЫЙ ЭКРАН ---------- */
.vz-hero{position:relative;padding:150px 0 110px;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 80% 30%,#0b141b 0%,transparent 70%),var(--bg)}
.vz-hero::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(#0b141b08 1px,transparent 1px),linear-gradient(90deg,#0b141b08 1px,transparent 1px);background-size:64px 64px}
.vz-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:70px;align-items:center}
.vz-hero h1{max-width:16ch}

/* телефон с визиткой: пример на лендинге и предпросмотр в конструкторе */
.phone{width:100%;max-width:360px;height:700px;margin:0 auto;border:10px solid #9ab0bc40;border-radius:40px;overflow-y:auto;overflow-x:hidden;
  background:#0b141b;box-shadow:0 40px 90px #0008,0 0 0 1px #a5e1e826;scrollbar-width:none;overscroll-behavior:contain}
.phone::-webkit-scrollbar{display:none}
.phone .vc *{pointer-events:none}
.phone-caption{margin:14px 0 0;text-align:center;font-size:var(--type-small);color:var(--muted-2)}

.vz-sample{margin:0}

/* ---------- ТРИ ВОПРОСА ---------- */
.vz-faq{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- ЗАЯВКА ---------- */
.lead-form select{width:100%;font:inherit;font-size:var(--type-body);color:var(--text);background:#0b141b;border:1px solid #9ab0bc40;border-radius:4px;padding:12px 14px}
.lead-form select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px #a5e1e81f}
.lead-form .vz-count{margin:-8px 0 0}

/* ---------- КОНСТРУКТОР ---------- */
.mk-top{padding-top:150px}
.mk-title{font-size:var(--type-section);line-height:1.15;letter-spacing:0;font-weight:600;max-width:18ch}
.mk-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"form prev" "get prev";gap:20px 60px;align-items:start;margin-top:60px}
.mk-form{grid-area:form}
.mk-preview{grid-area:prev;position:sticky;top:86px}
.mk-get{grid-area:get}
.mk-form fieldset{border:1px solid var(--line-2);border-radius:8px;padding:24px 24px 26px;margin:0 0 20px;display:grid;gap:16px;background:var(--panel);min-width:0}
.mk-form fieldset:last-child{margin-bottom:0}
.mk-form legend{padding:0 8px;font-size:var(--type-small);letter-spacing:0;color:var(--accent)}
.mk-form .button,.mk-get .button{width:100%;min-width:0}
.mk-hint{margin:-8px 0 0;font-size:var(--type-small);line-height:1.5;color:var(--muted-2)}
.lead-form .mk-check{display:flex;align-items:center;gap:12px;font-size:var(--type-body);letter-spacing:0;color:var(--text)}
.lead-form .mk-check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent-2)}
.lead-form .vz-agree{align-items:flex-start;font-size:var(--type-body);line-height:1.5;color:#9ab0bc;cursor:pointer}
.lead-form .vz-agree input{margin-top:1px}
.lead-form .vz-agree a{color:#a5e1e8}
.lead-form .vz-agree.invalid span{color:var(--red)}
.lead-form .vz-agree.invalid input{outline:2px solid var(--red);outline-offset:2px}
.mk-status{margin:0;font-size:var(--type-small);color:#a5e1e8}
.mk-status:empty{display:none}
.mk-get{padding:30px;border:1px solid #9ab0bc40;border-radius:8px;background:linear-gradient(145deg,#0b141b,#0b141b);display:grid;gap:14px}
.mk-get h2{font-size:var(--type-section);line-height:1.15;letter-spacing:0;font-weight:600;max-width:none}
.mk-get p{margin:0;color:#9ab0bc}
.mk-get .consent{color:#9ab0bc}
.mk-downloads{display:grid;gap:10px;padding-top:16px;border-top:1px solid #9ab0bc40}
.mk-get .form-status textarea{width:100%;font:var(--type-body)/1.5 Manrope, system-ui, sans-serif;color:var(--text);background:#0b141b;border:1px solid #9ab0bc40;border-radius:4px;padding:10px;margin-top:8px}

/* ---------- АДАПТИВ ---------- */
@media (max-width:1100px){
  .tariffs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .vz-hero{padding:120px 0 84px}
  .vz-hero-grid{grid-template-columns:1fr;gap:50px}
  .mk-top{padding-top:120px}
  .mk-layout{grid-template-columns:1fr;grid-template-areas:"form" "prev" "get";gap:30px}
  .mk-preview{position:static}
  .vz-faq{grid-template-columns:1fr}
}
@media (max-width:600px){
  .tariffs{grid-template-columns:1fr}
  .phone{height:620px;border-width:8px;border-radius:32px}
  .mk-form fieldset{padding:18px 16px 20px}
  .mk-get{padding:22px 18px}
}

/* ---------- РОЛИКИ ---------- */
.vz-videos{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:40px;justify-content:center;margin-top:44px}
.vz-videos figure{margin:0}
.vz-videos video{display:block;width:100%;aspect-ratio:9/16;border-radius:18px;background:#0b141b;box-shadow:0 20px 60px #0008}
.vz-videos figcaption{margin:14px 0 0;text-align:center;font-size:var(--type-small);color:var(--muted-2)}
@media (max-width:760px){.vz-videos{grid-template-columns:minmax(0,340px);gap:36px}}
.vz-videos.one{grid-template-columns:minmax(0,340px)}

.vz-examples{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.vz-examples .button{min-width:0;padding:10px 12px;font-size:var(--type-body)}
.vz-examples .button[aria-pressed="false"]{background:transparent;color:var(--accent);border-color:var(--line-2)}
.vz-sample .vz-examples{justify-content:center}
.vz-examples .button{width:auto}
.vz-examples .phone{overscroll-behavior:auto}

/* ---------- АУДИТ 11.10.2026: перенос правок на основу 10.10 ---------- */
/* Главное действие залито акцентом, вторичные кнопки остаются обводкой */
.button-primary,.lead-form button[type=submit]{background:var(--accent);border-color:var(--accent);color:#0b141b;font-weight:600}
.button-primary:hover,.lead-form button[type=submit]:hover{background:#e2ecf0;border-color:#e2ecf0;box-shadow:0 10px 30px #a5e1e833}
.button-primary:focus-visible,.lead-form button[type=submit]:focus-visible{outline:3px solid var(--text);outline-offset:3px}
/* Цена заметна первой в строке доверия */
.trust-line{align-items:baseline}
.trust-line .vz-price{color:var(--text);font-weight:600;font-size:var(--type-body)}
@media (max-width:920px){.trust-line .vz-price{grid-column:1/-1}}
/* Сетка вопросов и условий: style.css ставит 2 колонки и черту у 3-й и 4-й карточки */
@media (min-width:921px){
  #faq .vz-faq.rules-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #terms .vz-faq.rules-grid article:nth-child(2n+1){padding-left:0;border-left:0}
  #terms .vz-faq.rules-grid article:nth-child(n+3){border-top:1px solid var(--ink-line);padding-top:26px}
}
.vz-faq.rules-grid article{padding-bottom:26px}
/* Двухцветный заголовок только на первом экране */
main .section h2 em{color:inherit;font-style:normal}
/* Один тихий путь к вопросу вместо второй кнопки в карточке заказа */
.vz-ask{margin:22px 0 0;padding-top:18px;border-top:1px solid #9ab0bc40;font-size:var(--type-small);color:var(--muted-2)}
.vz-ask a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-underline-offset:3px}
/* Картинка первого экрана в picture */
.vz-sample picture{display:block}
/* Касание 44 px */
.site-nav a{display:inline-flex;align-items:center;min-height:44px}
.text-link{display:inline-flex;align-items:center;min-height:44px}
.lead-form .mk-check input{width:22px;height:22px;accent-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.button-primary,.lead-form button[type=submit]{transition:none}}