/* Pinky — тёмный тёплый минимализм: мягкий чёрный, приглушённые терракота,
   шалфей и крем. Спокойно, без неона. Тема всегда тёмная, независимо от
   клиента Telegram. Типографика: Unbounded (заголовки) + Onest (текст). */

@font-face {
  font-family: "Unbounded";
  src: url(/assets/fonts/unbounded-cyr.woff2) format("woff2");
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  src: url(/assets/fonts/unbounded-lat.woff2) format("woff2");
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url(/assets/fonts/onest-cyr.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url(/assets/fonts/onest-lat.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #141414;
  --card: #211f1c;
  --ink: #efe9dd;
  --ink-soft: #a89f92;
  --accent: #d98d6f;
  --sage: #9dbbae;
  --btn-text: #241812;
  --ok: #9dbbae;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* display: flex на секциях перебивал бы атрибут hidden — возвращаем ему силу */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% -12%, rgb(217 141 111 / 0.06), transparent 62%), var(--bg);
  color: var(--ink);
  font: 400 16.5px/1.45 "Onest", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

h1 {
  font-family: "Unbounded", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 6vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

#app, #onboarding, #home, #success {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Онбординг ─────────────────────────────────────────────── */

#slides { position: relative; flex: 1; overflow: hidden; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 24px 8px;
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.slide.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.slide.left { transform: translateX(-64px); }

/* Иллюстрации сами тёмные — тонкая кромка вместо тени, лёгкое свечение снизу */
.slide .art {
  width: min(100%, 320px);
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  background: var(--card);
  border: 1px solid rgb(255 255 255 / 0.06);
  margin: 3vh 0 3vh;
  box-shadow: 0 16px 44px rgb(0 0 0 / 0.5);
}

.slide h1 { max-width: 340px; }

.slide p, .lead {
  margin-top: 14px;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
  max-width: 330px;
}

.tag {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "Unbounded", sans-serif;
  font-weight: 400;
  color: var(--accent);
  background: rgb(217 141 111 / 0.13);
  padding: 7px 14px;
  border-radius: 99px;
}

#dots { display: flex; justify-content: center; gap: 7px; padding: 10px 0 14px; }
#dots i {
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--ink);
  opacity: 0.16;
  transition: opacity 0.3s, width 0.3s;
}
#dots i.on { opacity: 1; width: 22px; background: var(--accent); }

/* ── Кнопки ────────────────────────────────────────────────── */

.bar {
  display: flex;
  gap: 10px;
  padding: 0 20px calc(16px + env(safe-area-inset-bottom));
}

.btn-main {
  flex: 1;
  height: 60px;
  border: 0;
  border-radius: 19px;
  background: var(--accent);
  color: var(--btn-text);
  font: 700 19px/1 "Onest", sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
  transition: transform 0.12s ease, opacity 0.2s;
}
.btn-main:active { transform: scale(0.97); }
.btn-main:disabled { opacity: 0.7; }

.btn-back {
  width: 60px;
  height: 60px;
  flex: none;
  border: 0;
  border-radius: 19px;
  background: var(--card);
  color: var(--ink);
  font: 500 22px/1 "Onest", sans-serif;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.btn-back:active { transform: scale(0.94); }

.btn-ghost {
  margin-top: 20px;
  margin-bottom: 8px;
  flex: none;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 16px/1 "Onest", sans-serif;
  cursor: pointer;
  padding: 10px 14px;
}

/* ── Success и Дом ─────────────────────────────────────────── */

.center-body, .home-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 24px 12px;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* safe center: при переполнении контент не обрезается сверху, а скроллится */
.center-body { justify-content: safe center; }

.hero {
  width: min(76%, 280px);
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
  background: var(--card);
  border: 1px solid rgb(255 255 255 / 0.06);
  margin-bottom: 3vh;
  box-shadow: 0 16px 44px rgb(0 0 0 / 0.5);
}
.hero-s { width: min(44%, 160px); margin-bottom: 2vh; flex: none; }

.sect {
  margin: 3.2vh 0 9px;
  font-family: "Unbounded", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sect + .guide { margin-top: 0; }

.pill {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.dot-ok { width: 8px; height: 8px; border-radius: 99px; background: var(--ok); display: inline-block; }

.guide {
  margin-top: 3vh;
  width: min(100%, 340px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide .row {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: 18px;
  padding: 13px 16px;
}
.guide .num {
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--accent);
  flex: none;
  width: 32px;         /* цифры Unbounded разной ширины — фиксируем колонку */
  text-align: center;
}
.guide .pin {
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(217 141 111 / 0.18);
  flex: none;
  margin: 0 4px;
}
.guide b { display: block; font-weight: 600; font-size: 15.5px; }
.guide span:not(.num) { display: block; color: var(--ink-soft); font-size: 13.5px; line-height: 1.35; margin-top: 1px; }

/* Плавное появление приложения после решения, какой экран показывать */
#app { animation: appear 0.35s ease; }
@keyframes appear { from { opacity: 0; } }