/* =====================================================================
   Audiofill — головна сторінка
   ===================================================================== */

/* ---------- Напрями: великий типографський перелік ---------- */
.dir { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 24px; gap: var(--sp-5); align-items: center; padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); transition: padding var(--t-base) var(--ease-out); }
.dir:first-child { border-top: 1px solid var(--line); }
.dir__num { color: var(--text-muted); font-size: var(--fs-small); }
.dir__title { display: block; font: 500 var(--fs-h2)/1.1 var(--font-display); letter-spacing: var(--track-display); transition: color var(--t-fast); }
.dir__text { display: block; margin-top: var(--sp-2); color: var(--text-secondary); max-width: 38em; }
.dir__price { text-align: right; white-space: nowrap; }
.dir__price b { display: block; font: 600 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.dir__price small { font-size: 12px; color: var(--text-muted); }
.dir > i { color: var(--text-muted); transition: transform var(--t-base) var(--ease-out), color var(--t-fast); }
.dir:hover { padding-left: var(--sp-3); }
.dir:hover .dir__title { color: var(--action); }
.dir:hover > i { transform: translateX(6px); color: var(--action); }

/* ---------- Як ми працюємо ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); }
.step::before { content: ""; position: absolute; left: 0; right: calc(var(--grid-gap) * -1); top: 0; height: 1px; background: var(--line-strong); }
.step:last-child::before { right: 0; }
.step::after { content: ""; position: absolute; left: 0; top: -3px; width: 28px; height: 7px; border-radius: var(--r-xs); background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms); }
.is-in .step::after { transform: scaleX(1); }
.step__num { font: 500 var(--fs-small)/1 var(--font-display); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-h3); font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); }
.step p { color: var(--text-secondary); font-size: var(--fs-small); }

/* ---------- Швидкий розрахунок ---------- */
.quick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--grid-gap); align-items: start; }
.quick__form { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.quick > * { min-width: 0; }
.quick__label { display: block; font-size: var(--fs-small); font-weight: 500; margin-bottom: var(--sp-2); }
.quick .tiles { grid-template-columns: repeat(2, 1fr); }
.quick .tile b { display: flex; align-items: center; gap: var(--sp-2); }
.quick__result { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-surface); border: 1px solid var(--line); display: grid; gap: var(--sp-5); }
.quick__stats { display: flex; gap: var(--sp-6); }
.quick__stats div { font-size: 13px; color: var(--text-muted); }
.quick__stats b { display: block; font: 600 22px/1.2 var(--font-display); color: var(--text-main); font-variant-numeric: tabular-nums; }
.quick__price { padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
.quick__price b { display: block; font: 600 var(--fs-price)/1.1 var(--font-display); color: var(--action); font-variant-numeric: tabular-nums; }
.quick__note { font-size: 13px; color: var(--text-muted); }

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); }
  .step:nth-child(2n)::before { right: 0; }
  .quick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dir { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) 0; }
  .dir__num, .dir > i { display: none; }
  .dir__price { align-self: start; padding-top: 4px; }
  .steps { grid-template-columns: 1fr; }
  .step::before { right: 0; }
  .quick__stats { gap: var(--sp-5); }
}

/* Назва рівня на плитці — звичайним кольором, а не дрібною підказкою */
.quick .tile b > span[data-i18n] { font-size: inherit; color: inherit; }