/* Главная страница: описание сервиса и вход. Палитра общая со скринером. */

.landing {
  background:
    radial-gradient(1200px 620px at 50% -150px, rgba(121, 92, 235, 0.26), transparent 70%),
    radial-gradient(800px 500px at 85% 20%, rgba(94, 234, 212, 0.07), transparent 70%),
    var(--bg);
  min-height: 100vh;
}

.brand-accent {
  color: var(--accent-bright);
  margin-left: 3px;
  text-shadow: var(--glow-text);
}

/* ───── Шапка ───── */

.landing-top {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 20px;
}

/* Логотип — ссылка на главную, но выглядит обычным текстом. */
.brand-link { text-decoration: none; display: inline-flex; align-items: center; }
.brand-link:hover .brand-mark { text-shadow: 0 0 16px rgba(167, 139, 250, 0.55); }

.landing-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.landing-nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; }
.landing-nav a:hover { color: var(--text); text-shadow: 0 0 12px rgba(167, 139, 250, 0.5); }
.landing-nav .btn { color: #fff; }

.landing-main { max-width: 1120px; margin: 0 auto; padding: 0 20px 60px; }

/* ───── Первый экран ───── */

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

/* Имя сервиса — главный элемент экрана */
.hero-brand {
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  letter-spacing: -2px;
  font-weight: 800;
}

.hero-brand-line {
  font-size: clamp(40px, 6.4vw, 82px);
  color: var(--text);
  /* Межстрочный с запасом: у «g» и «y» хвосты уходят ниже базовой линии. */
  line-height: 1.12;
}

.hero-brand-accent {
  background: linear-gradient(95deg, #c4b5fd, var(--accent) 60%, #6ff5de);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Свечение узкое: широкий ореол дотягивался до строки под логотипом. */
  filter: drop-shadow(0 0 14px rgba(121, 92, 235, 0.4));
  padding-bottom: 0.08em;
}

.hero-eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-bright);
  text-shadow: var(--glow-text);
}

.hero-lead {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 520px;
}
.hero-lead b { color: var(--text); }

.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat b {
  font-size: 22px;
  font-family: var(--mono);
  color: var(--text);
  text-shadow: 0 0 16px rgba(167, 139, 250, 0.35);
}
.hero-stat span { font-size: 11.5px; color: var(--text-faint); }

/* ───── Объёмная сцена ───── */

.hero-visual {
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.scene {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(121, 92, 235, 0.35);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(121, 92, 235, 0.12), var(--surface) 55%);
  box-shadow: 0 0 50px rgba(121, 92, 235, 0.18), 0 30px 70px rgba(0, 0, 0, 0.55);
  transform-style: preserve-3d;
  /* Наклон задаётся из скрипта; плавность — чтобы не дёргалось за курсором */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform;
}

.scene-layer {
  position: absolute;
  inset: 12px;
  transform-style: preserve-3d;
}
.scene-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Слои разнесены по глубине: сетка дальше всех, кривая ближе всех */
.scene-grid { transform: translateZ(10px); }
.scene-area { transform: translateZ(28px); }
.scene-line { transform: translateZ(52px); }
.scene-labels { transform: translateZ(68px); }

.scene-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 60% 35%, rgba(121, 92, 235, 0.3), transparent 62%);
  filter: blur(26px);
  transform: translateZ(-30px);
  pointer-events: none;
}

.scene-grid line { stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.85; }
.grid-top { stroke: #ff6b86; }
.grid-sell { stroke: #6ff5de; }
.grid-buy1 { stroke: #d4c6ff; }
.grid-buy2 { stroke: #a98cff; }
.grid-buy3 { stroke: #8b6fff; }
.grid-bottom { stroke: #2fd4bd; }

.line-up {
  fill: none;
  stroke: #2fd4bd;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 7px rgba(47, 212, 189, 0.75));
}
.line-down {
  fill: none;
  stroke: #ff6b86;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 7px rgba(255, 107, 134, 0.6));
}

.entry-dot { fill: #d4c6ff; filter: drop-shadow(0 0 8px rgba(212, 198, 255, 0.95)); }
.entry-pulse {
  fill: none;
  stroke: #d4c6ff;
  stroke-width: 1.2;
  opacity: 0.6;
  transform-origin: 240px 120px;
  animation: entry-ping 2.4s ease-out infinite;
}

@keyframes entry-ping {
  0% { transform: scale(0.6); opacity: 0.7; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Подписи уровней стоят ближе всех — за счёт этого видна глубина */
.scene-label {
  position: absolute;
  left: 2%;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(10, 10, 15, 0.9);
}
.label-top { top: 13.5%; color: #ff8fa3; }
.label-sell { top: 29%; color: #6ff5de; }
.label-buy1 { top: 41.5%; color: #d4c6ff; }
.label-buy2 { top: 54%; color: #a98cff; }
.label-buy3 { top: 65%; color: #8b6fff; }
.label-bottom { top: 86.5%; color: #2fd4bd; }

/* Кому мешает движение — сцена стоит ровно */
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; transform: none; }
  .entry-pulse { animation: none; }
}

/* ───── Секции ───── */

.section {
  padding: 46px 0;
  border-top: 1px solid var(--border);
  position: relative;
}
/* Светящаяся засечка на разделителе секций */
.section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 10px rgba(121, 92, 235, 0.7);
}

.section h2 {
  margin: 0 0 26px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.info-card:hover {
  border-color: rgba(121, 92, 235, 0.5);
  box-shadow: 0 0 26px rgba(121, 92, 235, 0.16);
  transform: translateY(-2px);
}

.info-step {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-bright);
  margin-bottom: 10px;
  text-shadow: var(--glow-text);
}
.info-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.info-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 26px; }
.feature h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; }
.feature h4::before { content: '— '; color: var(--accent); }
.feature p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* ───── Доступ ───── */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }

.plan-card {
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 55%);
  border: 1px solid rgba(121, 92, 235, 0.55);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 34px rgba(121, 92, 235, 0.2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(121, 92, 235, 0.3);
}

.plan-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.plan-price {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--mono);
}
/* Число крупное, валюта рядом мелкая — одинаково в обоих тарифах. */
.plan-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.35);
}
.plan-currency { font-size: 14px; color: var(--text-dim); font-weight: 500; }
.plan-note { margin: 0 0 16px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

.plan-card ul { margin: 0 0 20px; padding-left: 16px; display: flex; flex-direction: column; gap: 7px; }
.plan-card li { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.plan-card li b { color: var(--text); }

.plan-cta { margin-top: auto; text-align: center; text-decoration: none; padding: 9px 14px; }

.plans-demo { margin: 18px 0 0; font-size: 12.5px; color: var(--text-faint); }

/* ───── Форма входа ───── */

.section-enter { display: flex; justify-content: center; }

.auth-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid rgba(121, 92, 235, 0.3);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 0 40px rgba(121, 92, 235, 0.15), 0 24px 60px rgba(0, 0, 0, 0.5);
}

.auth-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; }
.auth-head .brand-mark { font-size: 17px; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 18px;
}

.auth-tab {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.is-active {
  background: linear-gradient(180deg, #8a6ff0, var(--accent));
  color: #fff;
  font-weight: 600;
  box-shadow: var(--glow-accent-soft);
}

.auth-form { display: flex; flex-direction: column; gap: 13px; }
/* Авторское display перебивает браузерное [hidden] — гасим вручную. */
.auth-form[hidden], .auth-tabs[hidden] { display: none; }

/* Панель вошедшего: вместо формы — кто вошёл и возврат в скринер. */
.auth-signed { display: flex; flex-direction: column; gap: 11px; }
.auth-signed[hidden] { display: none; }
.auth-signed-text { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.auth-signed-text b { color: var(--text); }
.auth-signed .auth-submit { text-align: center; text-decoration: none; }
.auth-signed-out { align-self: flex-start; }

.field { display: flex; flex-direction: column; gap: 5px; }
/* Авторское display перебивает браузерное [hidden], поэтому задаём явно. */
.field[hidden] { display: none; }

.field > span {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field > span em { text-transform: none; letter-spacing: 0; font-style: normal; opacity: 0.7; }
.field input {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 11px;
  font-size: 13px;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow-accent-soft);
}
.field small { font-size: 11px; color: var(--text-faint); line-height: 1.4; }

/* ───── Показ пароля ───── */

.field-password { position: relative; display: block; }
/* Справа оставляем место под кнопку, чтобы текст пароля под неё не заезжал. */
.field-password input { width: 100%; padding-right: 52px; }

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  /* 44 пикселя — минимальная зона, в которую уверенно попадают пальцем. */
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(121, 92, 235, 0.10);
  border: 1px solid rgba(121, 92, 235, 0.28);
  border-radius: 7px;
  color: var(--accent-bright);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.password-toggle:hover,
.password-toggle:active {
  color: #fff;
  background: rgba(121, 92, 235, 0.3);
  border-color: var(--accent);
}
.password-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Перечёркивание видно только когда пароль скрыт. */
.password-toggle .eye-slash { opacity: 1; }
.password-toggle.is-visible {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-accent-soft);
}
.password-toggle.is-visible .eye-slash { opacity: 0; }

/* На телефоне поля крупнее: шрифт от 16 пикселей, иначе Safari приближает экран. */
@media (max-width: 640px) {
  .field input { font-size: 16px; padding: 12px 11px; }
  .field-password input { padding-right: 56px; }
  .password-toggle { width: 46px; height: 42px; }
  .password-toggle svg { width: 22px; height: 22px; }
}

.auth-submit { padding: 10px; font-size: 13px; margin-top: 2px; }

.auth-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(239, 83, 80, 0.12);
  border: 1px solid rgba(239, 83, 80, 0.3);
  color: #fca5a5;
  font-size: 12px;
}

/* ───── Подвал ───── */

.landing-foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 20px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.landing-disclaimer { margin-left: auto; max-width: 440px; line-height: 1.5; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 26px 0 44px; }
  .hero-visual { order: -1; }
  .hero-brand { letter-spacing: -1px; }
  .landing-nav a:not(.btn) { display: none; }
  .landing-disclaimer { margin-left: 0; }
}

@media (max-width: 520px) {
  .scene-label { font-size: 8.5px; }
  .hero-brand { letter-spacing: -1px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.8px; }
}