@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  /* Глубокая вода: тёмная база без чёрного, чтобы утиный жёлтый
     не выглядел кислотным. */
  --ink: #e8f1ee;          /* текст */
  --paper: #0e1a20;        /* фон страницы */
  --surface: #152a32;      /* карточки, поля */
  --accent: #2a9d8f;       /* петролевый — основные действия */
  --accent-dark: #35b3a3;
  --on-accent: #07141a;
  --duck: #f2c14e;         /* утиный жёлтый — второй акцент */
  --muted: #8ca3ad;
  --line: #21373f;
  --alert: #ef7f63;
  --alert-bg: #2b1a16;
  --ok-bg: #12302b;
  --focus: rgba(42, 157, 143, 0.3);
}

/* Тёмная — по умолчанию. Тем, у кого в системе светлая,
   отдаём светлую, пока они не выбрали вручную. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #16202b;
    --paper: #fbfaf8;
    --surface: #ffffff;
    --accent: #0f6e63;
    --accent-dark: #0b544b;
    --on-accent: #ffffff;
    --duck: #b9820a;
    --muted: #6b7a85;
    --line: #e3e1dc;
    --alert: #b4432a;
    --alert-bg: #fdf1ee;
    --ok-bg: #eef5f3;
    --focus: rgba(15, 110, 99, 0.12);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* --- шапка --- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
}

.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.top nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.top nav a:hover { color: var(--ink); }

/* --- типографика --- */

h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 40px 0 12px;
}

/* На лендинге заголовки разделов крупнее — там они несут вес,
   а не просто разделяют формы */
.wrap.wide h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 44px 0 10px;
}

.lede {
  color: var(--muted);
  margin: 0 0 28px;
}

.small { font-size: 14px; color: var(--muted); }

/* --- строки данных --- */

.rows { border-top: 1px solid var(--line); margin-top: 8px; }

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.row .k { color: var(--muted); font-size: 15px; }
.row .v { font-weight: 500; text-align: right; }

/* --- ключ подписки --- */

.key {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
  font-size: 13px;
  word-break: break-all;
  color: var(--muted);
}

/* --- кнопки --- */

.btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin-top: 16px;
}

.btn:hover { background: var(--accent-dark); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn.quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn.quiet:hover { background: var(--surface); border-color: var(--muted); }

.btn.inline { display: inline-block; width: auto; padding: 9px 16px; font-size: 14px; }

/* --- формы --- */

label { display: block; font-size: 14px; color: var(--muted); margin: 18px 0 6px; }

input[type=text], input[type=email], input[type=password], input[type=number] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}

input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

/* --- сообщения --- */

.msg {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 20px;
}

.msg.error { background: var(--alert-bg); color: var(--alert); }
.msg.ok { background: var(--ok-bg); color: var(--accent-dark); }

.notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  background: var(--surface);
}

.notice form { margin: 0; }

.notice button {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

/* --- выбор тарифа и сумм --- */

.plans { border-top: 1px solid var(--line); }

.plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.plan > span { display: flex; flex-direction: column; }
.plan:hover .plan-name { color: var(--accent); }
.plan-name { font-weight: 500; }
.plan-note { font-size: 13px; color: var(--muted); margin-top: 2px; }
.plan-price { font-weight: 600; white-space: nowrap; }

.amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.amounts button {
  flex: 1 0 auto;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  cursor: pointer;
}

.amounts button:hover { border-color: var(--accent); color: var(--accent); }

/* --- подвал --- */

.foot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.foot a { color: var(--muted); margin-right: 14px; }

.link { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- админка --- */
.admin-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.admin-head h1 { margin: 0; }
.admin-period { display: flex; gap: 4px; flex-shrink: 0; }
.admin-period a {
  padding: 4px 10px; font-size: 13px; color: var(--muted);
  text-decoration: none; border: 1px solid var(--line); border-radius: 6px;
}
.admin-period a.on { color: var(--paper); background: var(--accent); border-color: var(--accent); }

.cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 32px;
}
.card {
  padding: 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.card-v { font-size: 24px; font-weight: 600; line-height: 1.2; }
.card-k { font-size: 13px; color: var(--muted); margin-top: 4px; }

.admin-foot { margin-top: 32px; font-size: 13px; }
.muted.small { font-size: 13px; margin: -4px 0 12px; }



/* --- ручной выбор темы ---
   Системная тема — по умолчанию, но человек может переключить сам.
   Атрибут на <html> перекрывает media-запрос. */

html[data-theme="dark"] {
  --ink: #e8f1ee;
  --paper: #0e1a20;
  --surface: #152a32;
  --accent: #2a9d8f;
  --accent-dark: #35b3a3;
  --on-accent: #0b1419;
  --duck: #f2c14e;
  --muted: #8ca3ad;
  --line: #21373f;
  --alert: #ef7f63;
  --alert-bg: #2b1a16;
  --ok-bg: #12302b;
  --focus: rgba(42, 157, 143, 0.3);
}

html[data-theme="light"] {
  --ink: #16202b;
  --paper: #fbfaf8;
  --surface: #ffffff;
  --accent: #0f6e63;
  --accent-dark: #0b544b;
  --on-accent: #ffffff;
  --duck: #c78f10;
  --muted: #6b7a85;
  --line: #e3e1dc;
  --alert: #b4432a;
  --alert-bg: #fdf1ee;
  --ok-bg: #eef5f3;
  --focus: rgba(15, 110, 99, 0.12);
}

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.theme-toggle:hover { border-color: var(--muted); }

/* --- блоки преимуществ на главной --- */

.feature {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 10px;
}

.feature-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.feature p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* --- утиные эмодзи --- */

i.e {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}

i.e svg { display: block; width: 100%; height: 100%; }



/* =========================================================
   Лендинг
   Шире кабинета: тексту нужен воздух, формам — компактность.
   ========================================================= */

.wrap.wide { max-width: 760px; }

@media (min-width: 1040px) {
  .wrap.wide {
    max-width: 940px;
    padding-top: 40px;
  }
  .wrap.wide .hero { gap: 48px; padding-bottom: 56px; }
  .wrap.wide .grid { grid-template-columns: repeat(3, 1fr); }
  .wrap.wide .grid .feature:first-child { grid-column: auto; }
  i.e.hero-duck { width: 230px; height: 230px; }
}

/* --- герой --- */
/* На широком экране утка стоит сбоку от заголовка и держит правый
   край; на узком уезжает наверх и уменьшается. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 16px 0 44px;
}

i.e.hero-duck {
  width: 190px;
  height: 190px;
  vertical-align: baseline;
  justify-self: end;
}

.hero h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 14ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--duck);
}

.hero-lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 28px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.hero-cta .btn { width: auto; margin: 0; padding: 14px 26px; }

.hero-price {
  font-size: 14px;
  color: var(--muted);
}

.hero-price b { color: var(--ink); font-weight: 600; }

/* --- сетка возможностей --- */

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin: 18px 0 0;
}

.grid .feature:first-child { grid-column: 1 / -1; }

.feature {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px;
  margin: 0;
}

i.e.feature-duck { width: 52px; height: 52px; margin-bottom: 12px; vertical-align: baseline; }

.feature-title {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* --- прайс --- */

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.price-row:last-child { border-bottom: 0; }
.price-row:hover .price-name { color: var(--accent-dark); }
.price-name { font-weight: 500; }
.price-note { font-size: 13px; color: var(--muted); margin-left: 8px; }
.price-value { font-weight: 600; white-space: nowrap; }
.price-value.trial { color: var(--duck); }

/* --- шаги --- */

.steps { counter-reset: step; margin-top: 8px; }

.step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.step:last-child { border-bottom: 0; }

.step::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--duck);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-text { font-size: 15px; line-height: 1.5; }
.step-text b { font-weight: 600; }
.step-text span { color: var(--muted); }

/* --- подвал --- */

.foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.foot a { color: var(--accent-dark); }

@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 4px;
  }
  /* Утка над заголовком, но меньше — иначе съедает первый экран */
  .hero > i.e.hero-duck {
    order: -1;
    justify-self: start;
    width: 108px;
    height: 108px;
    margin-bottom: 18px;
  }
  .hero h1 { max-width: none; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .grid .feature:first-child { grid-column: auto; }
  i.e.hero-duck { width: 96px; height: 96px; }
  .panel { padding: 4px 16px; }
  .hero-lede { font-size: 17px; }
}


/* --- блоки-окна: цены и состав тарифа --- */

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 20px;
  margin-top: 12px;
}

.panel .price-row:last-child,
.panel .row:last-child,
.panel .step:last-child { border-bottom: 0; }

.panel .rows { border-top: 1px solid var(--line); margin-top: 0; }
.panel .steps { border-top: 1px solid var(--line); }
.panel .price-row:first-of-type { border-top: 1px solid var(--line); }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}

i.e.panel-duck { width: 34px; height: 34px; vertical-align: baseline; }

.panel-head span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- экран «письмо отправлено» --- */

.sent { padding-top: 8px; }
i.e.sent-duck { width: 96px; height: 96px; vertical-align: baseline; margin-bottom: 18px; }
.sent .lede { margin-bottom: 8px; }
.sent .countdown { color: var(--muted); text-align: center; margin-top: 12px; }

/* =========================================================
   Кабинет
   ========================================================= */

.cabinet-hero { padding-bottom: 28px; }

.status-days {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.status-days .count {
  font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 9vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--duck);
}

.status-days .unit {
  font-size: 19px;
  color: var(--muted);
}

.cabinet-hero h1 { font-size: clamp(28px, 4.4vw, 38px); }
.cabinet-hero .hero-lede { font-size: 17px; margin-bottom: 22px; }
.btn.narrow { padding: 14px 22px; }

.cab-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.big-value {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  padding: 6px 0 4px;
  border-top: 1px solid var(--line);
}

.panel-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0 6px;
}

.panel-actions .btn { width: auto; margin: 0; padding: 11px 20px; }
.panel-actions .promo-form { margin: 0; flex: 1; }
.panel-actions .promo-form input { padding: 11px 44px 11px 12px; }
.panel-actions /* --- что даёт подписка прямо сейчас --- */

.state {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.state-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.state .dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.state.on .dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--focus);
}

.state.off { border-color: var(--alert); }
.state.off .dot { background: var(--alert); }
.state.off .state-item { color: var(--muted); }

.notice.warn { border-color: var(--duck); }

.status-days .count.ending { color: var(--alert); }

@media (min-width: 760px) {
  .state { grid-template-columns: repeat(3, 1fr); }
}


/* --- промокод: кнопка внутри поля --- */

.promo-form {
  position: relative;
  display: block;
  margin: 0;
}

.promo-form input {
  width: 100%;
  margin: 0;
  padding-right: 46px;
  text-transform: uppercase;
}

.promo-form input::placeholder { text-transform: none; }

.promo-form button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-form button:hover { background: var(--focus); color: var(--accent-dark); }

.promo-form button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}

/* --- пульсация статуса --- */

.state.on .dot {
  animation: pulse-on 2.4s ease-in-out infinite;
}

.state.off .dot {
  animation: pulse-off 2.4s ease-in-out infinite;
}

@keyframes pulse-on {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(42, 157, 143, 0); }
}

@keyframes pulse-off {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 127, 99, 0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(239, 127, 99, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .state .dot { animation: none; }
}

/* Новичку, у которого подписки ещё не было, красный «не работает»
   читается как поломка — показываем нейтральный список обещаний. */
.state.waiting { border-color: var(--line); }
.state.waiting .dot { background: var(--muted); animation: none; opacity: 0.6; }
.state.waiting .state-item { color: var(--muted); }
.state-note { margin: 8px 0 12px; color: var(--muted); }

/* --- блок с ключом: копирование по клику --- */

.key {
  position: relative;
  padding-right: 104px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.key:hover { border-color: var(--muted); }

.copy-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  word-break: normal;
}

.key:hover .copy-badge { color: var(--ink); border-color: var(--muted); }

.key.copied {
  border-color: var(--accent);
  color: var(--ink);
}

.key.copied .copy-badge {
  border-color: var(--accent);
  background: var(--ok-bg);
  color: var(--accent-dark);
}

.key-label {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 420px) {
  .key { padding-right: 14px; padding-bottom: 42px; }
  .copy-badge {
    top: auto;
    bottom: 8px;
    right: 8px;
    transform: none;
  }
}


/* =========================================================
   Zenta 2026 — тот же облик, что у приложения:
   глубокий тёмно-синий фон, градиент циан → синий, карточки
   со скруглением 20 px. Тема одна, тёмная (как в приложении).
   ========================================================= */

html[data-theme="zenta"] {
  --ink: #EAF2FA;
  --paper: #070D16;
  --surface: #0F1B2A;
  --surface-hi: #15243A;
  --accent: #039FD6;
  --accent-dark: #03F3E6;
  --on-accent: #ffffff;
  --duck: #FFB547;
  --muted: #7E92A8;
  --faint: #4A5C70;
  --line: #1B2B3F;
  --alert: #FF5C7A;
  --alert-bg: rgba(255, 92, 122, 0.10);
  --ok-bg: rgba(46, 229, 157, 0.10);
  --good: #2EE59D;
  --focus: rgba(3, 159, 214, 0.30);
  --grad: linear-gradient(120deg, #03F3E6 0%, #039FD6 45%, #0047CD 100%);
  color-scheme: dark;
  background: #070D16;
}

html[data-theme="zenta"] body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #0B1A2A 0%, rgba(11, 26, 42, 0) 70%),
    #070D16;
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme="zenta"] ::selection { background: rgba(3, 243, 230, 0.25); }

/* --- шапка с меню --- */

.zbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7, 13, 22, 0.72);
  border-bottom: 1px solid rgba(27, 43, 63, 0.7);
}

.zbar-in {
  max-width: 940px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.zlogo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 17px;
  margin-right: auto;
}

.zlogo svg { width: 26px; height: 30px; display: block; }

.znav { display: flex; align-items: center; gap: 4px; }

.znav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 10px;
  transition: color .15s, background .15s;
}

.znav a:hover, .znav a.on { color: var(--ink); background: rgba(255, 255, 255, 0.04); }

.znav a.zcta {
  color: #fff;
  background: var(--grad);
  font-weight: 600;
  margin-left: 6px;
  box-shadow: 0 6px 20px -8px rgba(3, 159, 214, 0.7);
}

.znav a.zcta:hover { filter: brightness(1.08); }

.zburger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.zburger span, .zburger span::before, .zburger span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: transform .2s, background .2s;
}

.zburger span::before, .zburger span::after { content: ""; position: absolute; left: 0; }
.zburger span::before { top: -6px; }
.zburger span::after { top: 6px; }
.zbar.open .zburger span { background: transparent; }
.zbar.open .zburger span::before { transform: translateY(6px) rotate(45deg); }
.zbar.open .zburger span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .zburger { display: inline-flex; }
  .znav {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #0F1B2A;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity .16s, transform .16s;
  }
  .zbar.open .znav { opacity: 1; transform: none; pointer-events: auto; }
  .znav a { padding: 13px 14px; font-size: 16px; }
  .znav a.zcta { margin: 6px 0 0; text-align: center; }
}

/* Старая шапка больше не нужна */
html[data-theme="zenta"] .wrap > .top { display: none; }
html[data-theme="zenta"] .wrap { padding-top: 28px; }

/* --- типографика --- */

html[data-theme="zenta"] h1 { letter-spacing: -0.025em; }
html[data-theme="zenta"] .hero h1 em,
html[data-theme="zenta"] h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="zenta"] .wrap p a,
html[data-theme="zenta"] .wrap .small a,
html[data-theme="zenta"] .wrap .foot a { color: var(--accent-dark); }
html[data-theme="zenta"] a.price-row,
html[data-theme="zenta"] a.plan { color: var(--ink); }
html[data-theme="zenta"] .link { color: var(--accent-dark); }

/* --- кнопки --- */

html[data-theme="zenta"] .btn {
  background: var(--grad);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 600;
  box-shadow: 0 10px 28px -12px rgba(3, 159, 214, 0.8);
  transition: transform .12s, filter .15s, box-shadow .15s;
}

html[data-theme="zenta"] .btn:hover { background: var(--grad); filter: brightness(1.08); }
html[data-theme="zenta"] .btn:active { transform: translateY(1px) scale(0.99); }

html[data-theme="zenta"] .btn.quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}

html[data-theme="zenta"] .btn.quiet:hover { border-color: var(--faint); filter: none; }

/* --- поля --- */

html[data-theme="zenta"] input[type=text],
html[data-theme="zenta"] input[type=email],
html[data-theme="zenta"] input[type=password],
html[data-theme="zenta"] input[type=number] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
}

html[data-theme="zenta"] input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }

/* --- карточки --- */

html[data-theme="zenta"] .panel,
html[data-theme="zenta"] .feature,
html[data-theme="zenta"] .card,
html[data-theme="zenta"] .notice,
html[data-theme="zenta"] .state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}

html[data-theme="zenta"] .feature { padding: 22px; }
html[data-theme="zenta"] .panel { padding: 10px 22px; }
html[data-theme="zenta"] .notice.warn { border-color: rgba(255, 181, 71, 0.6); background: rgba(255, 181, 71, 0.07); }
html[data-theme="zenta"] .msg { border-radius: 14px; }
html[data-theme="zenta"] .price-value.trial { color: var(--accent-dark); }
html[data-theme="zenta"] .price-row:hover .price-name,
html[data-theme="zenta"] .plan:hover .plan-name { color: var(--accent-dark); }

html[data-theme="zenta"] .key {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 14px;
}

html[data-theme="zenta"] .amounts button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-radius: 12px;
}

html[data-theme="zenta"] .amounts button:hover { border-color: var(--accent); color: var(--accent-dark); }

html[data-theme="zenta"] .state.on .dot { background: var(--good); }
html[data-theme="zenta"] .step::before { background: var(--grad); color: #fff; border: 0; }

/* --- анимированные утки (Lottie) — как раньше, только без фона-заглушки --- */

html[data-theme="zenta"] i.e.hero-duck {
  filter: drop-shadow(0 24px 50px rgba(3, 159, 214, 0.35));
}

/* --- блок «Приложение для Android» --- */

.zapp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(3, 159, 214, 0.35);
  background:
    radial-gradient(400px 160px at 0% 0%, rgba(3, 243, 230, 0.14), transparent 70%),
    var(--surface);
}

.zapp .zapp-ico {
  width: 54px; height: 62px;
}

.zapp b { display: block; font-size: 17px; margin-bottom: 2px; }
.zapp span { color: var(--muted); font-size: 14px; }
.zapp .btn { width: auto; margin: 0; padding: 12px 20px; white-space: nowrap; }

@media (max-width: 560px) {
  .zapp { grid-template-columns: auto minmax(0, 1fr); }
  .zapp .btn { grid-column: 1 / -1; width: 100%; }
}

/* --- подвал --- */

.zfoot {
  max-width: 940px;
  margin: 56px auto 0;
  padding: 26px 20px 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  color: var(--faint);
  font-size: 14px;
}

.zfoot a { color: var(--muted); text-decoration: none; }
.zfoot a:hover { color: var(--ink); }
.zfoot .zfoot-brand { margin-right: auto; color: var(--muted); }

html[data-theme="zenta"] .wrap > .foot.legacy { display: none; }

/* --- страница приглашения --- */

.zinvite { text-align: center; padding-top: 12px; }
.zinvite .zcode {
  display: inline-block;
  margin: 18px 0 8px;
  padding: 14px 26px;
  border-radius: 18px;
  border: 1px dashed rgba(3, 243, 230, 0.55);
  background: rgba(3, 243, 230, 0.06);
  font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  color: var(--ink);
  cursor: pointer;
}
.zinvite .steps-mini { text-align: left; margin: 28px auto 0; max-width: 420px; }
.zinvite .steps-mini div { display: flex; gap: 12px; padding: 10px 0; color: var(--muted); }
.zinvite .steps-mini b { color: var(--ink); font-weight: 600; }
.zinvite .steps-mini i {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--grad); color: #fff; font: 600 14px/28px inherit; font-style: normal; text-align: center;
}
html[data-theme="zenta"] .status-days .count {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="zenta"] .status-days .count.ending { background: none; color: var(--alert); }
html[data-theme="zenta"] .state { padding: 14px 18px; gap: 8px; }

/* =========================================================
   Движение: живой логотип, сияние фона, появление при прокрутке,
   блики на кнопках, подсветка карточек за курсором, счётчики.
   Всё отключается, если в системе включено «уменьшить движение».
   ========================================================= */

/* --- логотип --- */

.zl { display: block; overflow: visible; }
.zl-t { transform-box: fill-box; transform-origin: center; }

.zlogo .zlogo-svg { width: 56px; height: 60px; margin: -9px 0; }
.zapp .zapp-ico { width: 56px; height: 60px; }

.zl-anim .zl-h { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: zl-draw 1s .1s cubic-bezier(.4, 0, .2, 1) forwards; }
.zl-anim .zl-w { opacity: 0; animation: zl-on .01s 1.12s forwards; }
.zl-anim .zl-t { opacity: 0; animation: zl-rise .5s .7s cubic-bezier(.2, .8, .2, 1) forwards; }

@keyframes zl-draw { to { stroke-dashoffset: 0; } }
@keyframes zl-on { to { opacity: 1; } }
@keyframes zl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.zlogo:hover .zl-w { filter: drop-shadow(0 0 6px rgba(3, 243, 230, 0.6)); }

/* --- большой логотип на первом экране --- */

.zhero-logo {
  position: relative;
  width: 230px;
  height: 230px;
  justify-self: end;
  display: grid;
  place-items: center;
}

.zhero-svg {
  position: relative;
  width: 72%;
  height: auto;
  animation: zh-float 6s ease-in-out 1.3s infinite;
  filter: drop-shadow(0 18px 40px rgba(3, 159, 214, 0.45));
}

.zhero-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3, 243, 230, 0.32) 0%, rgba(0, 71, 205, 0.16) 45%, transparent 70%);
  opacity: 0;
  animation: zh-glow-in 1s .2s forwards, zh-breathe 2.6s ease-in-out 1.3s infinite alternate;
}

.zhero-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(3, 243, 230, 0.25);
  opacity: 0;
  animation: zh-ring 3.2s ease-out 1.2s infinite;
}

@keyframes zh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes zh-glow-in { to { opacity: 1; } }
@keyframes zh-breathe { from { transform: scale(0.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
@keyframes zh-ring { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }

@media (min-width: 1040px) { .zhero-logo { width: 280px; height: 280px; } }
@media (max-width: 720px) {
  .hero > .zhero-logo { width: 140px; height: 140px; justify-self: start; grid-row: 1; }
}

/* --- сияние фона: три размытых пятна медленно плывут --- */

.zaurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.zaurora i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .22;
  will-change: transform;
}
.zaurora i:nth-child(1) { background: #03F3E6; top: -18vmax; left: -12vmax; animation: za1 22s ease-in-out infinite alternate; opacity: .14; }
.zaurora i:nth-child(2) { background: #0047CD; top: 10vmax; right: -16vmax; animation: za2 26s ease-in-out infinite alternate; }
.zaurora i:nth-child(3) { background: #039FD6; bottom: -24vmax; left: 20vmax; animation: za3 30s ease-in-out infinite alternate; opacity: .12; }
@keyframes za1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes za2 { to { transform: translate(-14vmax, 16vmax) scale(.9); } }
@keyframes za3 { to { transform: translate(-10vmax, -14vmax) scale(1.2); } }
html[data-theme="zenta"] body { position: relative; z-index: 0; background: transparent; }

/* --- переливающийся акцент в заголовке --- */

html[data-theme="zenta"] .hero h1 em,
html[data-theme="zenta"] h1 em {
  background: linear-gradient(90deg, #03F3E6, #039FD6, #0047CD, #039FD6, #03F3E6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: z-flow 8s linear infinite;
}
@keyframes z-flow { to { background-position: 300% 0; } }

/* --- кнопки: блик пробегает раз в несколько секунд --- */

html[data-theme="zenta"] .btn:not(.quiet) { position: relative; overflow: hidden; isolation: isolate; }
html[data-theme="zenta"] .btn:not(.quiet)::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: z-shine 4.5s ease-in-out 1.5s infinite;
  z-index: -1;
}
@keyframes z-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
html[data-theme="zenta"] .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(3, 159, 214, 0.95); }

/* --- карточки: подъём и подсветка за курсором --- */

html[data-theme="zenta"] .feature,
html[data-theme="zenta"] .zapp,
html[data-theme="zenta"] .panel { position: relative; transition: transform .25s, border-color .25s, box-shadow .25s; }
html[data-theme="zenta"] .feature::before,
html[data-theme="zenta"] .zapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(3, 243, 230, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity .25s;
}
html[data-theme="zenta"] .feature:hover,
html[data-theme="zenta"] .zapp:hover { transform: translateY(-4px); border-color: rgba(3, 159, 214, 0.5); box-shadow: 0 24px 50px -28px rgba(3, 159, 214, 0.6); }
html[data-theme="zenta"] .feature:hover::before,
html[data-theme="zenta"] .zapp:hover::before { opacity: 1; }

html[data-theme="zenta"] .price-row { transition: background .2s, padding .2s; border-radius: 12px; }
html[data-theme="zenta"] .price-row:hover { background: rgba(3, 159, 214, 0.06); padding-left: 10px; padding-right: 10px; }

/* --- появление при прокрутке --- */

.zr { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.zr.in { opacity: 1; transform: none; }

/* первый экран выезжает сам */
.hero > div:first-child > * { animation: z-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero > div:first-child > *:nth-child(2) { animation-delay: .08s; }
.hero > div:first-child > *:nth-child(3) { animation-delay: .16s; }
.hero > div:first-child > *:nth-child(4) { animation-delay: .24s; }
.hero > div:first-child > *:nth-child(5) { animation-delay: .32s; }
@keyframes z-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* живая точка «работает» */
html[data-theme="zenta"] .state.on .dot { box-shadow: 0 0 0 0 rgba(46, 229, 157, .6); animation: z-ping 2s infinite; }
@keyframes z-ping { 0% { box-shadow: 0 0 0 0 rgba(46, 229, 157, .55); } 100% { box-shadow: 0 0 0 9px rgba(46, 229, 157, 0); } }

@media (prefers-reduced-motion: reduce) {
  .zl-anim .zl-h, .zl-anim .zl-w, .zl-anim .zl-t, .zhero-svg, .zhero-glow, .zhero-ring,
  .zaurora i, .btn::after, .hero > div:first-child > *, h1 em { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
  .zr { opacity: 1; transform: none; transition: none; }
}

/* --- первый экран: кнопка подключения, орбиты и живые плашки --- */

.zorb { position: relative; width: 320px; height: 320px; justify-self: end; }
.zorb > * { position: absolute; }

/* тонкие орбиты с бегущими огоньками */
.zorb-orbit {
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(3, 243, 230, 0.10);
  opacity: 0;
  animation: zo-fade .8s .5s ease-out forwards, zo-spin linear infinite;
}
.zo1 { width: 210px; height: 210px; margin: -105px 0 0 -105px; animation-duration: .8s, 9s; }
.zo2 { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-duration: .8s, 16s; animation-direction: normal, reverse; border-color: rgba(3, 159, 214, 0.08); }
.zorb-orbit i {
  position: absolute; top: -3px; left: 50%;
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #03F3E6;
  box-shadow: 0 0 10px 3px rgba(3, 243, 230, .55);
}
.zo2 i { background: #4DA3FF; box-shadow: 0 0 10px 3px rgba(0, 71, 205, .6); }
@keyframes zo-spin { to { rotate: 360deg; } }
@keyframes zo-fade { to { opacity: 1; } }

/* кнопка: заливка расходится из центра — быстро и мягко */
.zorb-btn {
  left: 50%; top: 50%;
  width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #0F1B2A;
  color: #7E92A8;
  box-shadow: inset 0 0 0 2px #1B2B3F;
  overflow: hidden;
  animation: zo-glow .6s .35s ease-out forwards, zo-breathe 4s 1s ease-in-out infinite;
}
.zorb-fill {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.28), transparent 46%),
    linear-gradient(140deg, #03F3E6 0%, #039FD6 45%, #0047CD 100%);
  clip-path: circle(0% at 50% 50%);
  animation: zo-fill .55s .35s cubic-bezier(.3, .7, .2, 1) forwards;
}
.zorb-btn svg { position: relative; width: 46px; height: 46px; transition: color .3s; animation: zo-icon .3s .5s forwards; }
@keyframes zo-fill { to { clip-path: circle(75% at 50% 50%); } }
@keyframes zo-icon { to { color: #fff; } }
@keyframes zo-glow { to { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 60px -6px rgba(3, 159, 214, .65); } }
@keyframes zo-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 60px -6px rgba(3, 159, 214, .6); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 80px 0 rgba(3, 243, 230, .45); }
}

/* плашки: спокойно проявляются и чуть покачиваются */
.zchip {
  z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--ink);
  background: rgba(13, 24, 38, .82);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  animation: zo-in .5s cubic-bezier(.2, .8, .2, 1) forwards, zo-float 6s ease-in-out infinite;
}
.zchip em { font-style: normal; color: var(--faint); margin: 0 -2px; }
.zchip b { font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.zchip svg { width: 14px; height: 14px; color: var(--accent-dark); }
.zc1 { top: 40px; left: 0; animation-delay: .9s, 1.4s; }
.zc2 { bottom: 40px; right: -28px; animation-delay: 1.05s, 2.2s; }
.zc3 { bottom: 98px; left: -18px; animation-delay: 1.2s, 3s; }
@keyframes zo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

.zdot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: z-ping 2s infinite; }
.zflag { width: 18px; height: 12px; border-radius: 2px; background: linear-gradient(#fff 50%, #DC143C 50%); box-shadow: 0 0 0 1px rgba(255,255,255,.15); }

@media (min-width: 1040px) { .zorb { width: 340px; height: 340px; } }
@media (max-width: 720px) {
  .hero > .zorb { width: 300px; height: 270px; justify-self: center; grid-row: 1; margin: -6px auto 0; }
  .zo1 { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
  .zo2 { width: 256px; height: 256px; margin: -128px 0 0 -128px; }
  .zorb-btn { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  .zorb-btn svg { width: 40px; height: 40px; }
  .zc1 { top: 10px; left: 0; } .zc2 { bottom: 10px; right: -2px; } .zc3 { bottom: auto; top: 150px; left: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .zorb-btn, .zorb-fill, .zorb-btn svg, .zchip, .zorb-orbit { animation: none !important; opacity: 1; clip-path: none; color: #fff; }
}