/**
 * assets/css/home.css
 * Главная страница: первый экран с чертежом и ценой, три шага, портфолио,
 * «соберём за вас».
 *
 * Заголовки главной — Unbounded: в Syne нет кириллицы, и русские
 * заголовки им не набирались (браузер брал системный шрифт). Логотип
 * FORMA латиницей остаётся в Syne.
 */
.hero h1, .home-h2, #portfolio .section-head h2, .step h3, .band h3{ font-family:'Unbounded', var(--font-display); }

.hero{ padding:64px 0 72px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center; }
.hero h1{ font-size:clamp(30px,4.1vw,50px); line-height:1.1; margin:16px 0 20px; }
.hero h1 span{ color:var(--accent); }
.hero p.lead{ font-size:17px; color:var(--text-dim); max-width:36em; margin:0 0 28px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.stat{ padding:16px 12px 0 0; }
.stat b{ display:block; font-family:var(--font-mono); font-size:22px; font-weight:500; color:var(--text); }
.stat span{ font-size:12.5px; line-height:1.4; color:var(--text-dim); font-family:var(--font-mono); }

/* Чертёж с ценой */
.board{ background:var(--panel); border:1px solid var(--line-bright); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); }
.board-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.board-top b{ color:var(--accent); font-weight:500; white-space:nowrap; }
.board-svg{ padding:10px 12px 0; min-height:200px; }
.board-svg svg{ display:block; width:100%; height:auto; }
.board-ctl{ padding:14px; border-top:1px solid var(--line); }
.board-ctl label{ display:flex; justify-content:space-between; gap:10px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.board-ctl output{ color:var(--text); }
.board-ctl input[type=range]{ width:100%; margin:10px 0 14px; accent-color:var(--accent); }
.board-price{ display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap; padding-top:12px; border-top:1px dashed var(--line-bright); }
.board-price b{ font-family:var(--font-mono); font-size:26px; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.board-price span{ font-size:12.5px; line-height:1.5; color:var(--text-faint); max-width:34em; }

/* Три шага */
#how, #portfolio, #help{ padding:64px 0; border-top:1px solid var(--line); }
.home-h2{ font-size:clamp(24px,2.8vw,34px); line-height:1.15; margin:12px 0 32px; }
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.step{ border:1px solid var(--line); background:var(--panel); padding:22px; border-radius:6px; }
.step-n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); }
.step h3{ font-size:17px; margin:14px 0 8px; line-height:1.3; }
.step p{ color:var(--text-dim); font-size:14.5px; line-height:1.55; }

/* Портфолио: только работы с фото, остальное — пустые места */
.grid-portfolio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pf-card{ background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; text-decoration:none; color:inherit; display:block; transition:border-color .2s; }
a.pf-card:hover{ border-color:var(--line-bright); }
.pf-photo{ aspect-ratio:16/10; position:relative; background:var(--panel-2); }
.pf-photo.has-cover{ background-size:cover; background-position:center; }
.pf-photo.has-cover::after{ content:attr(data-tag); position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; background:rgba(18,21,26,0.85); color:var(--text); padding:4px 8px; border-radius:2px; text-transform:uppercase; }
.pf-body{ padding:14px 16px 16px; }
.pf-body h3{ font-size:16px; font-weight:600; font-family:var(--font-display); }
.pf-body p{ margin:6px 0 0; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); }
.pf-empty{ border-style:dashed; background:transparent; }
.pf-empty .pf-photo{ background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.025) 14px 28px); }
.pf-empty h3{ font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--text-faint); }
.pf-empty p{ color:var(--text-faint); }

/* «Соберём за вас» */
.band{ display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:32px; border:1px solid var(--accent); border-radius:8px; background:linear-gradient(120deg,#22170f,var(--panel) 60%); }
.band > div:first-child{ min-width:0; flex:1 1 380px; }
.band h3{ font-size:22px; line-height:1.25; margin:0 0 8px; }
.band p{ color:var(--text-dim); line-height:1.55; max-width:36em; }
.band-act{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.band-mail, .band-tel{ font-family:var(--font-mono); font-size:14px; color:var(--text); text-decoration:none; }
.band-tel{ user-select:all; color:var(--text-dim); }

@media (max-width:960px){
  .hero{ padding:32px 0 56px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .grid-portfolio{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .grid-portfolio{ grid-template-columns:1fr; }
  .stat b{ font-size:15px; white-space:nowrap; }
  .stat span{ font-size:11.5px; }
  .band{ padding:22px; }
  .board-price b{ font-size:22px; }
}