/*
 * Сайт школы «Аксиом» (аксиом.рус) — лендинг, поддержка, удаление аккаунта,
 * ссылка на приложение. Цвета и шрифты — из приложения (mobile/design/
 * tokens.json, стиль «Тетрадь»): лист в клетку, зелёный и бежевый, подписи
 * от руки. Шрифты свои (site/fonts), без Google Fonts: сайт ничего не
 * отдаёт чужим серверам — школе с детьми так спокойнее по 152-ФЗ.
 */
@font-face { font-family: "Golos"; src: url("/fonts/golos.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

:root {
  --фон: #FAF8F2; --клетка: #E6EAE3; --поверхность: #FFFFFF; --поверхность2: #F1F3EE;
  --текст: #13241F; --текст2: #4A5C55; --текст3: #6B7C75; --линия: #DDE3DC;
  --основной: #05453A; --наОсновном: #F6F1E6; --акцент: #EDDFC3; --наАкценте: #05453A;
  --маркер: #C9B083; --ссылка: #0A6B5A;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --фон: #0C1512; --клетка: #15211D; --поверхность: #131E1A; --поверхность2: #1A2722;
    --текст: #E8EFE9; --текст2: #A9BAB1; --текст3: #86978E; --линия: #26352F;
    --основной: #8FD1BD; --наОсновном: #03281F; --акцент: #EDDFC3; --наАкценте: #05453A;
    --маркер: #D4BD8C; --ссылка: #8FD1BD;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "Golos", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.55;
  color: var(--текст); background-color: var(--фон);
  background-image: linear-gradient(var(--клетка) 1px, transparent 1px), linear-gradient(90deg, var(--клетка) 1px, transparent 1px);
  background-size: 24px 24px;
}
a { color: var(--ссылка); }
img, svg { max-width: 100%; }
.обёртка { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* шапка */
.шапка { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--фон) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--линия); }
.шапка .обёртка { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.знак { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--текст); font-weight: 700; font-size: 20px; }
.знак img { width: 36px; height: 36px; }
.шапка nav { margin-left: auto; display: flex; gap: 18px; font-size: 15px; }
.шапка nav a { color: var(--текст2); text-decoration: none; }
.шапка nav a:hover { color: var(--текст); }
@media (max-width: 640px) { .шапка nav .необяз { display: none; } }

/* первый экран */
.первый { padding-top: 56px; padding-bottom: 40px; }
.от-руки { font-family: "Caveat", cursive; font-size: 26px; color: var(--маркер); line-height: 1.1; }
h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.1; margin: 8px 0 16px; letter-spacing: -0.01em; }
.подзаголовок { font-size: clamp(17px, 2.4vw, 21px); color: var(--текст2); max-width: 640px; margin: 0 0 28px; }
.кнопки { display: flex; flex-wrap: wrap; gap: 12px; }
.кнопка { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px;
  font: 600 16px/1 "Golos", system-ui, sans-serif; text-decoration: none; border: 2px solid var(--основной); cursor: pointer; }
.кнопка.главная { background: var(--основной); color: var(--наОсновном); }
.кнопка.вторая { background: transparent; color: var(--основной); }

/* блоки */
section { padding: 36px 0; }
h2 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; margin: 4px 0 20px; }
.сетка { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.карточка { background: var(--поверхность); border: 1.5px solid var(--линия); border-radius: 18px; padding: 20px; }
.карточка h3 { margin: 0 0 6px; font-size: 19px; }
.карточка p { margin: 0; color: var(--текст2); font-size: 16px; }
.значок-блока { width: 40px; height: 40px; border-radius: 12px; background: var(--акцент); color: var(--наАкценте); display: grid; place-items: center; font-weight: 700; margin-bottom: 12px; }
.предметы { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.предметы span { background: var(--поверхность2); border: 1px solid var(--линия); border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.шаги { counter-reset: шаг; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.шаги li { counter-increment: шаг; position: relative; padding-left: 52px; }
.шаги li::before { content: counter(шаг); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--основной); color: var(--наОсновном); display: grid; place-items: center; font-weight: 700; }

/* магазины приложений */
.магазины { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.магазин { display: inline-flex; flex-direction: column; justify-content: center; min-width: 170px; min-height: 56px; padding: 8px 16px; border-radius: 14px;
  background: var(--текст); color: var(--фон); text-decoration: none; line-height: 1.15; }
.магазин small { font-size: 12px; opacity: .75; }
.магазин b { font-size: 18px; }
.магазин[aria-disabled="true"] { opacity: .55; cursor: default; }

/* текстовые страницы */
.текст { max-width: 760px; padding-top: 40px; padding-bottom: 56px; }
.текст h1 { font-size: clamp(28px, 5vw, 40px); }
.текст h2 { font-size: 22px; margin-top: 32px; }
.текст p, .текст li { color: var(--текст2); }
.выноска { background: var(--поверхность); border: 1.5px solid var(--линия); border-left: 5px solid var(--основной); border-radius: 14px; padding: 16px 18px; margin: 20px 0; }
details { background: var(--поверхность); border: 1.5px solid var(--линия); border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; }

/* подвал */
.подвал { border-top: 1px solid var(--линия); padding: 28px 0 40px; color: var(--текст3); font-size: 14px; background: var(--фон); }
.подвал .обёртка { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.подвал a { color: var(--текст2); }