/* Блоки сайта «Вывеска». Всё внутри .container, сетки через minmax(0, 1fr), у текста нет фиксированной высоты.
   Фирменный приём — синяя табличка с двумя заклёпками (.plate): первый экран, форма, страница 404. */

/* Шапка: на телефоне меню прячется в кнопку */
.header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 2px solid var(--ink); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); font: 700 var(--fs-18)/1 var(--font-head); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--accent); }
.logo svg { flex-shrink: 0; }
@media (max-width: 400px) { .header-in > .btn { display: none; } }   /* на узком телефоне заявку зовёт плавающая кнопка */
.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.nav a:not(.btn):hover { background: var(--surface-2); }
.nav .btn { margin-left: var(--sp-2); }
.nav-toggle { display: none; width: var(--tap); height: var(--tap); border: 2px solid var(--ink); border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: var(--sp-2) var(--gutter) var(--sp-4); background: var(--bg); border-bottom: 2px solid var(--ink); }
  .header:not(.is-open) .nav { display: none; }
  .nav .btn { margin: var(--sp-2) 0 0; }
}

/* Табличка */
.plate {
  position: relative; padding: var(--sp-16) var(--sp-12) var(--sp-12); border-radius: var(--r-lg); background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 0 8px color-mix(in srgb, var(--accent-ink) 55%, transparent);
}
.plate::before, .plate::after { content: ''; position: absolute; top: var(--sp-6); width: 12px; height: 12px; border-radius: 50%; background: var(--accent-ink); opacity: .85; }
.plate::before { left: var(--sp-6); }
.plate::after { right: var(--sp-6); }
.plate .eyebrow { color: var(--sun); }
.plate a:not(.btn) { color: var(--accent-ink); }
.plate :focus-visible { outline-color: var(--sun); }
@media (max-width: 860px) { .plate { padding: var(--sp-12) var(--sp-5) var(--sp-8); } .plate::before, .plate::after { top: var(--sp-5); } .plate::before { left: var(--sp-5); } .plate::after { right: var(--sp-5); } }

/* Рамки для снимков: телефон и окно браузера */
.phone { border: 8px solid var(--ink); border-radius: var(--r-phone); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.browser { border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--hard); }
.browser::before { content: ''; display: block; height: 24px; background: radial-gradient(circle at 16px 12px, var(--sun) 4px, transparent 5px), radial-gradient(circle at 32px 12px, var(--bg) 4px, transparent 5px), var(--ink); }
.cap { font-size: var(--fs-14); color: var(--ink-soft); }

/* Первый экран: табличка слева, телефон с сайтом лавки справа внахлёст */
.hero { padding-block: var(--sp-6) var(--sp-12); }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 24%, 288px); column-gap: 0; row-gap: var(--sp-8); align-items: start; }
.stage .plate { grid-column: 1; margin-right: calc(-1 * var(--sp-4)); padding-right: var(--sp-16); }
.stage .plate .eyebrow { margin-bottom: var(--sp-5); }
.stage h1 { max-width: 14em; }
.under { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-10); align-items: start; padding-right: var(--sp-10); }
.shot { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 1; margin-top: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-4); transform: rotate(3deg); }
.shot .media { --ratio: 390 / 640; }
.shot .cap { transform: rotate(-3deg); text-align: center; }
/* единственное движение первого экрана: пример работы «вешается» рядом с табличкой, как вывеска на гвоздь */
@media (prefers-reduced-motion: no-preference) {
  .js .shot { animation: hang 600ms var(--ease) both; transform-origin: 50% 0; }
  @keyframes hang { from { transform: translateY(-12px) rotate(9deg); } 60% { transform: rotate(1.5deg); } to { transform: rotate(3deg); } }
}
.bedy { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-10); margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 2px solid var(--ink); font: 400 var(--fs-18)/1.3 var(--font-head); letter-spacing: -0.01em; }
.bedy li { display: flex; gap: var(--sp-2); }
.bedy li::before { content: '—'; color: var(--accent); flex-shrink: 0; }
@media (max-width: 860px) {
  .hero { padding-block: var(--sp-4) var(--sp-10); }
  .stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }
  .stage .plate { margin-right: 0; padding-right: var(--sp-5); }
  .stage .plate .eyebrow { margin-bottom: var(--sp-3); }
  .under { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-right: 0; }
  .under .btn { width: 100%; }
  .under .row { justify-content: center; }
  .shot { grid-column: 1; grid-row: auto; width: 220px; margin: var(--sp-4) auto 0; }
  .bedy { flex-direction: column; margin-top: var(--sp-10); font-size: var(--fs-16); }
}

/* Заголовок секции */
.sec-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: var(--maxw-text); margin-bottom: var(--sp-10); }

/* Что делаем: две карточки с жёсткой тенью-подложкой */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
.card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); border: 2px solid var(--ink); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--hard); }
.card-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); }
.ticks { display: flex; flex-direction: column; gap: var(--sp-2); }
.ticks li { display: flex; gap: var(--sp-3); align-items: baseline; }
.ticks li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--ink); transform: translateY(-1px); }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .card { padding: var(--sp-6); } }

/* Пример: снимки сайта лавки и что сделано */
.case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-16); align-items: center; }
.case-shots { position: relative; padding: 0 var(--sp-12) var(--sp-10) 0; }
.case-shots .media { --ratio: 16 / 10; }
.case-shots .phone { position: absolute; right: 0; bottom: 0; width: 30%; border-width: 6px; border-radius: var(--r-lg); }
.case-shots .phone .media { --ratio: 390 / 700; }
.case-text { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.note { padding-left: var(--sp-4); border-left: 4px solid var(--accent); color: var(--ink-soft); }
@media (max-width: 860px) { .case { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } .case-shots { padding: 0 var(--sp-6) var(--sp-8) 0; } }

/* Шаги */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); counter-reset: step; }
.step { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 2px solid var(--ink); counter-increment: step; }
.step::before { content: counter(step); font: 700 var(--fs-h2)/1 var(--font-head); color: var(--accent); }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* Вопросы и ответы: <details> работает без JS */
.faq { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 820px; }
.faq details { border: 2px solid var(--ink); border-radius: var(--r); background: var(--surface); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-18); font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--r); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; font: 400 var(--fs-h3)/1 var(--font-head); color: var(--accent); transition: transform var(--dur-fast) var(--ease); }
.faq summary:hover { background: var(--accent-soft); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { max-width: var(--maxw-text); padding: 0 var(--sp-6) var(--sp-5); color: var(--ink-soft); }
@media (max-width: 860px) { .faq summary { padding-inline: var(--sp-4); } .faq details > p { padding-inline: var(--sp-4); } }

/* Заявка: табличка, на ней форма с жёсткой тенью */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.cta-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.cta .lead { color: var(--accent-ink); }
.kontakty { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.kontakty a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border: 2px solid var(--ink); border-radius: var(--r); background: var(--bg); color: var(--ink); box-shadow: var(--hard); }
.form > .btn { align-self: flex-start; }  /* кнопка по ширине надписи, не во всю форму */
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-14); color: var(--ink-soft); cursor: pointer; }
.check input { flex-shrink: 0; appearance: none; display: grid; place-content: center; width: 40px; height: 40px; margin: -8px; cursor: pointer; }   /* зона нажатия 40px, сама галочка — 24px */
.check input::before { content: ''; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); }
.check input:checked::before { background: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); }
.check input:focus-visible { outline: none; }
.check input:focus-visible::before { outline: 3px solid var(--accent); outline-offset: 2px; }
.plate .check a:not(.btn) { color: var(--accent); }
.hp { position: absolute; left: -9999px; }
.form-msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.form-ok { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.form-ok h3 { color: var(--ok); }
@media (max-width: 860px) { .cta { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .form { padding: var(--sp-5); } .form > .btn { align-self: stretch; } }

/* Плавающая кнопка на телефоне: появляется, когда главная кнопка ушла с экрана, и прячется у формы */
.fab { display: none; }
@media (max-width: 860px) {
  .fab { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 2px solid var(--ink); transform: translateY(100%); visibility: hidden; transition: transform var(--dur-fast) var(--ease), visibility 0s var(--dur-fast); }
  .fab.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .fab .btn { width: 100%; }
  .footer { padding-bottom: 96px; }
}

/* Подвал */
.footer { padding-block: var(--sp-10); border-top: 2px solid var(--ink); color: var(--ink-soft); font-size: var(--fs-14); }
.footer-in { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); justify-content: space-between; align-items: center; }
.footer a { color: var(--ink); display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); }

/* Простая страница (политика) и 404 */
.page { padding-block: var(--sp-12) var(--section); }
.page .prose { display: flex; flex-direction: column; gap: var(--sp-4); }
.page h1 { font-size: var(--fs-h2); }
.lost .lead { color: var(--accent-ink); }
.page .prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-4); }
.lost { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }