/* ═══════════════════════════════════════════════════════════════
   CloudTechWEB — тема «Ночной район»
   Палитра снята с фона: ночное небо, тёплый свет окон, красный неон.
   Подключается ПОСЛЕ app.css и переопределяет её точечно.
   ═══════════════════════════════════════════════════════════════ */

/* ── Шрифты (положить файлы в /static/assets/fonts/) ────────────
   Пока файлов нет — сработает запасной стек, вёрстка не поедет. */
@font-face {
  font-family: "Lozung";
  src: url("/static/assets/fonts/lozung.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Kosmos129";
  src: url("/static/assets/fonts/kosmos129.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Ночное небо с фона */
  --bg:        #060d18;
  --bg-2:      #0b1526;
  --bg-3:      #132135;
  /* Луна и облака */
  --ink:       #e8eef7;
  --ink-soft:  #8098b4;
  --ink-dim:   #56698a;
  /* Свет в окнах — рабочий акцент */
  --accent:    #f2b441;
  --accent-2:  #e09a2b;
  --accent-glow: rgba(242, 180, 65, 0.22);
  /* Красный неон вывески — только для подписи-акцента */
  --neon:      #ff2e28;
  --neon-glow: rgba(255, 46, 40, 0.55);
  --signal:    #6fd68a;
  --ok:        #6fd68a;
  --danger:    #ff5c72;

  --glass-bg:  rgba(232, 238, 247, 0.035);
  --glass-brd: rgba(232, 238, 247, 0.09);
  --glass-hi:  rgba(232, 238, 247, 0.06);

  --radius:    4px;      /* плакатная графика — почти без скруглений */
  --radius-sm: 3px;

  --font-display: "Lozung", "Oswald", "Arial Narrow", var(--font);
  --font-script:  "Kosmos129", "Georgia", serif;
}

/* Светлая тема выключена — район всегда ночной */
body { background: var(--bg); }

/* Плавающие пятна из старой темы больше не нужны */
.bg-aurora { display: none !important; }

/* ── Шапка ─────────────────────────────────────────────────── */
.nav {
  background: linear-gradient(180deg, rgba(6, 13, 24, .92), rgba(6, 13, 24, 0));
  border-bottom: none;
  backdrop-filter: blur(6px);
}
.brand span {
  font-size: 1.05rem;
  letter-spacing: -.01em;
  font-weight: 700;
}
.brand span b { color: var(--accent); }
/* В шапке НЕ капсим и не разряжаем: «ЛИЧНЫЙ КАБИНЕТ» так шире экрана */
.nav .btn-primary, .nav .btn-ghost {
  text-transform: none;
  letter-spacing: -.01em;
  font-weight: 700;
  padding: 9px 16px;
}
@media (max-width: 620px) {
  .nav { padding: 10px 14px; gap: 8px; }
  .nav-actions { gap: 6px; flex-shrink: 0; }
  .brand span { font-size: .95rem; }
  .brand-mark { width: 26px; height: 26px; }
  .nav .btn-primary { padding: 8px 12px; font-size: 13px; }
  .nav .btn-ghost { padding: 8px 10px; font-size: 13px; }
}

/* ── Герой: вид на район ───────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(72px, 11vh, 120px);
  padding-bottom: clamp(52px, 9vh, 90px);
}
/* Фон-картинка — ТОЛЬКО запасной путь: если канвас не завёлся
   или отключён JS. В обычном случае она не скачивается вовсе. */
.hero::before {
  content: "";
  position: absolute;
  inset: -80px 0 0;
  z-index: -2;
  background: var(--bg) url("/static/assets/city-night-mobile.webp") center 34% / cover no-repeat;
}
@media (min-width: 900px) {
  .hero::before { background-image: url("/static/assets/city-night.webp"); }
}
/* Процедурная сцена: канвас поверх картинки-фолбэка.
   JS добавляет .has-city — тогда картинка не нужна вовсе. */
.city-canvas {
  position: absolute;
  inset: -80px 0 0;
  width: 100%;
  height: calc(100% + 80px);
  z-index: -2;
  display: block;
  pointer-events: none;
}
/* Затемнение, чтобы текст читался поверх картинки */
.hero::after {
  content: "";
  position: absolute;
  inset: -80px 0 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,13,24,.72) 0%, rgba(6,13,24,.38) 42%, var(--bg) 96%),
    radial-gradient(80% 55% at 50% 34%, rgba(6,13,24,0) 0%, rgba(6,13,24,.55) 100%);
}

/* ── Подпись на крыше: единственный красный акцент на сайте ── */
.hero-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.85rem, 5.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: .01em;
  color: #f3f6fb;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
  max-width: 15ch;
  margin-inline: auto;
}
/* Вторая строка — вывеска. Свечение сдержанное: раньше было три слоя
   до 90px, из-за чего текст выглядел как размытое красное пятно. */
.hero-title .grad {
  -webkit-text-fill-color: currentColor;
  background: none;
  color: #ff5b52;
  text-shadow:
    0 0 1px rgba(255, 160, 155, .9),
    0 0 10px rgba(255, 46, 40, .45),
    0 0 26px rgba(255, 46, 40, .22);
}
/* Лёгкое мерцание живой вывески */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .grad { animation: neon-flicker 7s infinite steps(1, end); }
}
@keyframes neon-flicker {
  0%, 92%, 96%, 100% { opacity: 1; }
  93%, 95%           { opacity: .62; }
}

.hero-badge {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(242, 180, 65, .85);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.hero-sub { color: #c3d2e6; max-width: 46ch; }

/* ── Кнопки: свет из окна ───────────────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: #1a1206;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(242, 180, 65, .28);
}
.btn-primary:hover { background: #ffc75a; }
.btn-ghost {
  border: 1px solid rgba(232, 238, 247, .22);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--ink);
  background: rgba(232, 238, 247, .04);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Метрики ───────────────────────────────────────────────── */
.hero-metric-num {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}
.hero-metric-num.cyan { color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; }
.hero-metric-lbl {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .66rem;
  color: var(--ink-dim);
}

/* ── Заголовки секций ──────────────────────────────────────── */
.section-h {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  color: var(--ink);
}
.section-h::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 14px auto 0;
  background: var(--accent);
}

/* ── Карточки: панельный дом, окна горят ───────────────────── */
.glass, .card {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19,33,53,.72), rgba(11,21,38,.72));
  border: 1px solid var(--glass-brd);
}
.card { position: relative; overflow: hidden; }
/* Ряд горящих окон по верхней кромке карточки */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 7px,
    rgba(242,180,65,.16) 7px 15px
  );
  opacity: .55;
  transition: opacity .25s ease;
}
.card:hover::before { opacity: 1; }
.card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: 1.15rem;
}
.card-ic { filter: saturate(.85); }

/* ── Шаги ──────────────────────────────────────────────────── */
.step-n {
  font-family: var(--font-display);
  background: var(--accent);
  color: #1a1206;
  border-radius: 2px;
}

/* ── Формы ─────────────────────────────────────────────────── */
.field input {
  border-radius: var(--radius-sm);
  background: rgba(6, 13, 24, .55);
  border: 1px solid var(--glass-brd);
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field span {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .66rem;
  color: var(--ink-dim);
}
.auth-h {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ── Кабинет ───────────────────────────────────────────────── */
.dash-eyebrow {
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  font-size: 1.05rem;
}
.dash-tab.active { color: var(--accent); border-color: var(--accent); }

/* ── Подвал ────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--glass-brd);
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
}

/* ── Доступность ───────────────────────────────────────────── */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}