/* ==========================================================================
   RISO-ПЕЧАТЬ — два прогона краски: тёмный контур и жёлтый сдвиг, зерно,
   растровые подложки. Тактильная «физическая» печать.
   ========================================================================== */
@import url("_skeleton.css");

:root {
  --paper: #F5F1E8;
  --surface: #FBF7EF;
  --ink: #2F4751;
  --ink-deep: #1E3038;
  --ink-soft: #45606C;
  --muted: #62707A;
  --accent: #EDFF49;
  --overlap: #C6D04E;
  --line: rgba(47, 71, 81, 0.20);
  --line-strong: rgba(47, 71, 81, 0.40);
  --radius: 8px;
  --h1: clamp(32px, 4.8vw, 54px);
  --h2: clamp(22px, 2.6vw, 30px);
  --body: 15.5px;
  --lead: 1.6;
  --section-pad: 42px;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(47, 71, 81, 0.14) 1px, transparent 1.4px);
  background-size: 6px 6px;
}

/* Зерно поверх всего */
body::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.06;
}

.site-header { background: var(--surface); border-bottom: 2px solid var(--ink); }
.logo-mark { border-radius: 6px; }

/* ---------- Первый экран ---------- */
.hero { background: var(--surface); border-bottom: 2px solid var(--ink); }
.hero-inner { gap: 32px; }

/* «Рассовмещение»: жёлтый слой под текстом заголовка */
.hero h1 {
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  box-shadow: 5px 5px 0 rgba(198, 208, 78, 0.55);
}
.hero h1 .hl { color: var(--ink-deep); background: var(--accent); }
.hero-eyebrow { color: var(--muted); letter-spacing: 0.14em; }
.hero-sub { color: var(--ink-soft); }

.hero-facts { }
.fact {
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(198, 208, 78, 0.45);
}
.fact b { font-size: 22px; }
.fact span { color: var(--muted); }

.hero-spec {
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  padding: 18px;
  box-shadow: 4px 4px 0 rgba(198, 208, 78, 0.40);
}
.spec-label { color: var(--ink); letter-spacing: 0.12em; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-val { font-weight: 700; }
.spec-note { color: var(--muted); }

/* ---------- Секции ---------- */
.section { border-bottom: 1px solid var(--line); }
.index { color: var(--ink-soft); letter-spacing: 0.12em; }
.section-title { letter-spacing: -0.01em; }
.section-sub { color: var(--muted); }

.showcase-card {
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(198, 208, 78, 0.35);
}
.showcase-card .thumb { background: var(--surface); }
.showcase-card:hover { box-shadow: 5px 5px 0 rgba(198, 208, 78, 0.55); }

.steps { gap: 14px; }
.step {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 16px;
}
.step .num { font-size: 13px; color: var(--ink-soft); }
.step h3 { font-size: 16px; }
.step p { color: var(--muted); }

.partner-logo { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.ind-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  background-image: radial-gradient(rgba(47, 71, 81, 0.12) 1px, transparent 1.4px);
  background-size: 8px 8px;
}
.ind-main b { font-size: 16px; }
.ind-main span { color: var(--muted); }
.faq-q { font-size: 15.5px; }
.faq-a { color: var(--muted); }
.cta-form input, .cta-form textarea { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }

@media (max-width: 1020px) {
  .hero-facts { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { box-shadow: 3px 3px 0 rgba(198, 208, 78, 0.5); }
}

@media (max-width: 480px) {
  body { background-size: 10px 10px; }
  .fact, .hero-spec, .showcase-card { box-shadow: 2px 2px 0 rgba(198, 208, 78, 0.45); }
  .steps { grid-template-columns: 1fr; }
}