/* Дизайн-система Эфира (см. ether-client/lib/theme.dart) — тёмная тема,
   холодный градиент уровней (зелёный → фиолетовый). Общий CSS для лендинга и
   юридических страниц. Без сборки — один файл, подключается по /styles.css. */

:root {
  --bg: #0a0e13;
  --heading: #f0f3f8;
  --body: #b2bac4;
  --muted: #7a828c;
  --faint: #5e6772;
  --primary: #4f8cff;
  --planet: #9a6bff;
  --quarter: #3ee08a;
  --line: rgba(255, 255, 255, 0.08);
  --surface: rgba(255, 255, 255, 0.04);
  --maxw: 720px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  /* подвал прижат к низу окна: на коротких страницах (лендинг) иначе его
     линия повисает посреди экрана, а под ней остаётся пустота */
  min-height: 100vh;
  min-height: 100dvh; /* учитывает адресную строку мобильных браузеров */
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

/* короткая главная — центрируем по вертикали; юр. страницы (.doc) длинные и
   должны начинаться сверху, поэтому их исключаем */
body > main:not(.doc) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body > footer {
  margin-top: auto;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── эмблема (градиентный круг с ядром, как EtherEmblem) ── */
.emblem {
  /* Знак Эфира 1:1 из макета ether-client/flutter-handoff/efir-logo.html:
     обод с коническим градиентом, белое ядро со свечением и две расходящиеся
     радар-волны. Свечение обода вешаем на сам контейнер: у .ring стоит маска,
     а она обрезает и box-shadow элемента. */
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(79, 140, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* обод: конический градиент, серединa вырезана маской — под ним видно фон */
.emblem .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--primary),
    var(--planet),
    var(--primary)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 8px),
    #000 calc(100% - 8px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 8px),
    #000 calc(100% - 8px)
  );
}

/* ядро: белая точка с двойным свечением — белым вблизи и синим шире */
.emblem .core {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(79, 140, 255, 0.6);
}

/* расходящиеся волны: вторая со сдвигом в половину цикла */
.emblem .wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(79, 140, 255, 0.5);
  animation: radar 3s ease-out infinite;
}

.emblem .wave-2 {
  animation-delay: 1.5s;
}

@keyframes radar {
  0% {
    transform: scale(0.45);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .emblem .wave {
    animation: none;
    opacity: 0;
  }
}

/* ── hero лендинга ── */
.hero {
  text-align: center;
  padding: 40px 0;
}

.hero h1 {
  color: var(--heading);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 28px 0 10px;
}

.hero .tagline {
  color: var(--muted);
  font-size: 18px;
  margin: 0;
}

.lead {
  font-size: 17px;
  color: var(--body);
}

/* ── схема вложенных каналов ── */
.levels {
  list-style: none;
  padding: 0;
  margin: 40px auto;
  max-width: 360px;
}

.levels li {
  padding: 12px 16px;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: 10px;
}

.levels li .lvl {
  font-size: 12.5px;
  color: var(--faint);
  margin-left: auto;
}

/* цветовая семантика уровней (1:1 с приложением) */
.lvl-quarter {
  border-left: 3px solid #3ee08a;
}
.lvl-district {
  border-left: 3px solid #2fd9d0;
}
.lvl-city {
  border-left: 3px solid #38bdf2;
}
.lvl-region {
  border-left: 3px solid #4f8cff;
}
.lvl-country {
  border-left: 3px solid #7b78ff;
}

.badges {
  text-align: center;
  color: var(--faint);
  font-size: 14px;
  margin: 48px 0;
}

/* ── юридические страницы ── */
/* padding-block, а не shorthand: .doc висит на том же элементе, что и .wrap,
   и `padding: 56px 0 80px` затирал её боковые 20px — на мобильном текст
   упирался в края экрана */
.doc {
  padding-block: 56px 80px;
}

.doc h1 {
  color: var(--heading);
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 4px;
}

.doc .updated {
  color: var(--faint);
  font-size: 14px;
  margin-top: 0;
}

.doc h2 {
  color: var(--heading);
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 8px;
}

.doc ul {
  padding-left: 22px;
}

.back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--muted);
}

/* ── подвал ── */
footer {
  border-top: 1px solid var(--line);
  padding: 20px 0 28px;
  color: var(--faint);
  font-size: 14px;
  text-align: center;
}

footer a {
  color: var(--muted);
  margin: 0 10px;
}