/* Второй шанс, V2: разделы главной страницы. */

.section { padding-block: var(--section); }
.section-tight { padding-block: 56px; }
.section-alt { background: var(--paper-2); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 24px 64px; margin-bottom: 48px; }
.section-head p { color: var(--muted); font-size: var(--text-lg); max-width: 46ch; }

/* Первый экран */
.hero { padding-block: 36px 44px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr); align-items: start; gap: 40px; }
.hero-copy { padding-top: 20px; }
.hero-lead { max-width: 54ch; margin-top: 20px; font-size: var(--text-lg); color: var(--on-dark); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-portrait { width: 100%; max-width: 320px; margin: 0; justify-self: end; }
.hero-portrait-frame { overflow: hidden; border: 1px solid var(--ink-3); border-radius: var(--radius-card); background: var(--frame-dark); aspect-ratio: 4 / 5; }
.hero-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hero-portrait figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; color: var(--on-dark-muted); font-size: var(--text-sm); }
.hero-portrait-name { color: var(--on-dark); font-weight: 600; font-size: var(--text-md); }

/* Анимация загрузки: короткий подъём заголовка, текста и кнопок с шагом 60 мс, портрет мягко оседает */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero-lead, .hero-actions { animation: rise var(--motion-slow) var(--ease-out) both; }
  .hero-lead { animation-delay: 60ms; }
  .hero-actions { animation-delay: 120ms; }
  .hero-portrait-frame img { animation: settle 900ms var(--ease-out) both; }
  .hero-portrait figcaption { animation: rise var(--motion-slow) var(--ease-out) 180ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }

/* Разделы при прокрутке больше не проявляются: текст виден сразу, движение оставлено там, где оно объясняет (сцена «Дело») */

/* Тезисы */
.theses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

/* Суд или МФЦ */
.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ways-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 36px; }
.ways-footer p { max-width: 62ch; color: var(--muted); font-size: var(--text-sm); }

/* Четыре шага и сцена «Дело» */
.steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.steps-intro { margin-top: 20px; color: var(--muted); font-size: var(--text-lg); max-width: 48ch; }
.steps-list { display: grid; gap: 8px; margin-top: 36px; list-style: none; }
.step { position: relative; padding: 18px 20px 18px 28px; border-radius: 12px; cursor: default; transition: background-color var(--motion-base) var(--ease-out); }
.step::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--line-strong); transition: background-color var(--motion-base) var(--ease-out); }
.step h3 { font-size: var(--text-lg); }
.step p { margin-top: 4px; color: var(--muted); }
.step.is-active { background: var(--paper); }
.step.is-active::before { background: var(--orange); }

.case-scene { position: relative; aspect-ratio: 1 / 0.92; min-height: 360px; }
.case-folder { position: absolute; left: 18%; right: 18%; top: 22%; bottom: 10%; padding: 44px 28px 28px; border-radius: 6px 18px 18px 18px; background: var(--orange-light); box-shadow: 0 30px 50px -40px var(--shadow-ink-strong); }
.case-tab { position: absolute; left: 0; top: -34px; padding: 6px 22px 10px; border-radius: 12px 12px 0 0; background: var(--orange-light); font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; }
.case-checks { display: grid; gap: 12px; list-style: none; }
.case-check { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--paper); font-weight: 500; transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
.case-check::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 6px; transition: background-color var(--motion-base) var(--ease-out); }
.case-letter { position: absolute; z-index: 2; padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font-weight: 600; font-size: var(--text-sm); box-shadow: 4px 4px 0 var(--ink); transition: transform 900ms var(--ease-in-out), opacity 700ms var(--ease-in-out); }
.case-letter-1 { left: 2%; top: 4%; transform: rotate(-8deg); }
.case-letter-2 { right: 4%; top: 0; transform: rotate(6deg); }
.case-letter-3 { left: 0; bottom: 26%; transform: rotate(5deg); }
.case-letter-4 { right: 0; bottom: 34%; transform: rotate(-6deg); }
.case-stamp { position: absolute; right: -24px; bottom: -26px; padding: 10px 18px; border: 3px solid var(--ink); border-radius: 10px; background: var(--orange); font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; transform: rotate(-9deg) scale(1.6); opacity: 0; transition: transform 420ms var(--ease-out), opacity 240ms var(--ease-out); }

.case-check-property, .case-check-deals { opacity: 0; transform: translateY(8px); }
.case-scene[data-step="2"] .case-letter, .case-scene[data-step="3"] .case-letter, .case-scene[data-step="4"] .case-letter { opacity: 0; }
.case-scene[data-step="2"] .case-letter-1, .case-scene[data-step="3"] .case-letter-1, .case-scene[data-step="4"] .case-letter-1 { transform: translate(110%, 160%) scale(0.4) rotate(0); }
.case-scene[data-step="2"] .case-letter-2, .case-scene[data-step="3"] .case-letter-2, .case-scene[data-step="4"] .case-letter-2 { transform: translate(-120%, 180%) scale(0.4) rotate(0); }
.case-scene[data-step="2"] .case-letter-3, .case-scene[data-step="3"] .case-letter-3, .case-scene[data-step="4"] .case-letter-3 { transform: translate(110%, -120%) scale(0.4) rotate(0); }
.case-scene[data-step="2"] .case-letter-4, .case-scene[data-step="3"] .case-letter-4, .case-scene[data-step="4"] .case-letter-4 { transform: translate(-120%, -90%) scale(0.4) rotate(0); }
.case-scene:not([data-step="1"]) .case-check-creditors::before,
.case-scene[data-step="3"] .case-check-route::before, .case-scene[data-step="4"] .case-check-route::before,
.case-scene[data-step="4"] .case-check-property::before, .case-scene[data-step="4"] .case-check-deals::before { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23131615' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.case-scene[data-step="3"] .case-check-property, .case-scene[data-step="3"] .case-check-deals,
.case-scene[data-step="4"] .case-check-property, .case-scene[data-step="4"] .case-check-deals { opacity: 1; transform: none; }
.case-scene[data-step="4"] .case-stamp { opacity: 1; transform: rotate(-9deg) scale(1); }

/* Управляющие */
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 64px; }
.team-lead { margin-top: 20px; color: var(--muted); font-size: var(--text-lg); max-width: 50ch; }
.team-side { display: grid; gap: 20px; }
.person-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.person-card img { width: 120px; height: 150px; border-radius: 12px; object-fit: cover; object-position: 50% 15%; background: var(--frame-dark); }
.person-card h3 { font-size: var(--text-lg); }
.person-card p { margin-top: 2px; color: var(--muted); }
.person-phone { display: inline-block; margin-top: 12px; font-weight: 600; font-size: var(--text-lg); }
.team-note { color: var(--muted); font-size: var(--text-sm); }

/* Знать заранее */
.know-list { display: grid; border-top: 1px solid var(--line-strong); }
.know-item { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px 64px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.know-item h3 { font-size: var(--text-xl); }
.know-item p { color: var(--muted); font-size: var(--text-lg); max-width: 52ch; }
.know-source { margin-top: 36px; color: var(--muted); font-size: var(--text-sm); }

/* Офис и MAX */
.office-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 64px; }
.office-copy { display: grid; justify-items: start; gap: 20px; }
.office-copy .phone-xl { margin-top: 8px; color: var(--orange); }
.office-copy > p { color: var(--on-dark-muted); font-size: var(--text-lg); }
.office-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.max-card { display: grid; justify-items: center; gap: 16px; padding: 28px; border-radius: var(--radius-card); background: var(--paper); color: var(--ink); text-align: center; }
.max-card-head { display: flex; align-items: center; gap: 12px; }
.max-card-head h3 { font-size: var(--text-lg); }
.max-card p { color: var(--muted); font-size: var(--text-sm); }
.max-qr { display: block; padding: 8px; border-radius: 12px; transition: transform var(--motion-base) var(--ease-out); }
.max-qr:hover { transform: scale(1.04); }
.max-card .button::before { background: var(--ink); }
.max-card .button:hover { color: var(--paper); }

/* Финальный призыв и предупреждение */
.final { padding-bottom: 48px; }
.final-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; }
.final h2 { max-width: 22ch; }
.final p { margin-top: 16px; color: var(--muted); font-size: var(--text-lg); max-width: 52ch; }

@media (max-width: 64rem) {
  .steps-grid, .team-grid, .office-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 32px; }
  .case-scene { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 52rem) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { padding-top: 0; }
  .hero-portrait { max-width: 280px; justify-self: start; }
  .section-head { grid-template-columns: 1fr; }
  .theses-grid, .ways-grid { grid-template-columns: 1fr; gap: 28px; }
  .know-item { grid-template-columns: 1fr; padding-block: 22px; }
}
@media (max-width: 40rem) {
  .hero { padding-block: 28px 36px; }
  .hero-actions .button { width: 100%; }
  .case-scene { min-height: 320px; }
  .case-folder { left: 8%; right: 8%; padding: 40px 18px 20px; }
  .case-stamp { right: -8px; font-size: 1.125rem; }
  .person-card { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .person-card img { width: 88px; height: 110px; }
  .office-actions .button { width: 100%; }
}