/* Главная страница SHUFT. Только токены сайта (style.css) — тема светлая/тёмная идёт сама. */
.home { padding: calc(var(--u) * 12) 0 calc(var(--u) * 14); }
.home__eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.home__title {
  margin-top: calc(var(--u) * 3); max-width: 15ch;
  font-size: 64px; font-weight: 400; letter-spacing: -0.059em; line-height: 1;
}
.home__lead { margin-top: calc(var(--u) * 4); max-width: 620px; font-size: 20px; line-height: 1.45; color: var(--muted); }
.home__actions { margin-top: calc(var(--u) * 6); display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }

.home__grid {
  margin-top: calc(var(--u) * 12);
  display: grid; gap: calc(var(--u) * 3);
  grid-template-columns: repeat(3, 1fr);
}
.tile {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4); background: var(--surface);
  border: 1px solid var(--line-solid); border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tile:hover { border-color: var(--border-strong); box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
.tile__title { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.tile__desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.tile__go { margin-top: auto; padding-top: calc(var(--u) * 2); font-size: 14px; color: var(--fg); }
.tile__go::after { content: " →"; }
.tile > a, .tile > button.tile__hit { position: absolute; inset: 0; border-radius: 12px; z-index: 1; }
.tile > button.tile__hit { background: none; border: 0; cursor: pointer; }

/* Матрица: заметный широкий блок. fg/bg меняются местами в тёмной теме сами. */
.matrix-cta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 7) calc(var(--u) * 8);
  background: var(--fg); color: var(--bg); border-radius: 14px;
}
.matrix-cta__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .65; }
.matrix-cta__title { margin-top: calc(var(--u) * 2); font-size: 32px; font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; }
.matrix-cta__desc { margin-top: calc(var(--u) * 2); max-width: 560px; font-size: 15px; line-height: 1.5; opacity: .75; }
.matrix-cta__actions { flex: none; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.matrix-cta .btn { white-space: nowrap; }
.matrix-cta .btn--primary { background: var(--bg); color: var(--fg); }
.matrix-cta .btn--primary:hover { background: var(--fill-2); }
.matrix-cta .btn--secondary { background: transparent; color: var(--bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent); }
.matrix-cta .btn--secondary:hover { box-shadow: 0 0 0 1px var(--bg); }

@media (max-width: 960px) {
  .home__grid { grid-template-columns: repeat(2, 1fr); }
  .matrix-cta { flex-direction: column; align-items: flex-start; padding: calc(var(--u) * 5); }
}
@media (max-width: 600px) {
  .home { padding-top: calc(var(--u) * 8); }
  .home__title { font-size: 44px; }
  .home__lead { font-size: 17px; }
  .home__grid { grid-template-columns: 1fr; margin-top: calc(var(--u) * 8); }
  .matrix-cta__title { font-size: 26px; }
}