/* Лендінг diakirov.com.
   Токени тем — з калькулятора дослівно (tokens.css), щоб сайти виглядали
   однією родиною. Тут лише те, чого в калькуляторі немає: сітка візитівки. */

body {
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; touch-action: manipulation; }

.wrap {
  max-width: 560px;
  margin: auto;
  width: 100%;
  padding: 40px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ── Шапка ── */
.top { display: flex; align-items: flex-start; gap: 10px; }
.top h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.top p { color: var(--sc-muted); font-size: 15px; margin-top: 7px; line-height: 1.5; }
.theme-btn {
  margin-left: auto; flex: none; background: none; border: none; cursor: pointer;
  color: var(--sc-muted); padding: 4px; display: inline-flex; border-radius: 8px;
}
.theme-btn:hover { color: var(--sc-text); }
.theme-btn svg { display: block; }

/* ── Звʼязок ──
   Вище за плитки й помітніше: соцмережі я не веду, а написати мені — те,
   заради чого сюди взагалі приходять. */
.contact { display: flex; flex-direction: column; gap: 8px; }
.contact a {
  display: flex; align-items: center; gap: 10px;
  background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: 10px;
  padding: 11px 14px; color: var(--sc-text); text-decoration: none; font-size: 15px;
}
.contact a:hover { border-color: var(--sc-muted); }
/* Розмір задається тут, а не в самій іконці: та сама telegram-іконка
   використовується ще й у плитках, де в неї інший розмір. Без цього
   svg без width/height розтягується на весь контейнер. */
.contact svg { flex: none; opacity: 0.75; width: 17px; height: 17px; }
.contact .val { font-variant-numeric: tabular-nums; }

/* ── Плитки соцмереж ──
   Навмисно дрібні квадратики, а не картки: акаунти не ведуться, і великий
   блок обіцяв би активність, якої немає. */
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials a {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--sc-panel); border: 1px solid var(--sc-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sc-muted); text-decoration: none;
}
.socials a:hover { color: var(--sc-text); border-color: var(--sc-muted); }
.socials svg { display: block; width: 19px; height: 19px; }

/* ── Проєкти ── */
.projects { display: flex; flex-direction: column; gap: 8px; }
.projects h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sc-muted); font-weight: 600; margin-bottom: 2px;
}
.card {
  display: flex; align-items: center; gap: 12px;
  background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: 10px;
  padding: 13px 15px; color: var(--sc-text); text-decoration: none;
}
a.card:hover { border-color: var(--sc-muted); }
.card .title { font-size: 15px; font-weight: 600; }
.card .note { font-size: 13px; color: var(--sc-muted); margin-top: 2px; }
.card .arrow { margin-left: auto; color: var(--sc-muted); flex: none; }
/* Заглушка: та сама форма, приглушена. Прибирати картку зовсім не варто —
   «скоро буде» це теж інформація. */
.card.soon { opacity: 0.55; cursor: default; }
.card.soon .arrow { display: none; }

.foot { margin-top: auto; padding-top: 20px; text-align: center; font-size: 12px; color: var(--sc-muted); opacity: 0.7; }

@media (max-width: 520px) {
  .wrap { padding: 28px 16px 20px; gap: 22px; }
  .top h1 { font-size: 23px; }
}

/* Плитки соцмереж — самі іконки; назва потрібна скрінрідеру, але не оку */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Банка ──
   Та сама картка, але тихіша: сторінка про інструменти, а не про збір.
   Без окремого заголовка секції — він перетворив би прохання на розділ. */
.support { margin-top: -14px; }
.card.jar { background: none; border-style: dashed; }
/* align-self, а не центрування по картці: коли підпис переносить рядок,
   відцентрована іконка зависає між рядками замість того, щоб стояти
   біля назви. 2px — оптичне вирівнювання під висоту гліфів. */
.card.jar { align-items: flex-start; }
.card.jar svg { flex: none; opacity: 0.7; align-self: flex-start; margin-top: 2px; }
.card.jar .title { font-weight: 600; }