/* ============================================================================
   ATHERYX — слой «Codex» (2026-10-17)
   Общий для всех страниц, подключается ПОСЛЕДНИМ (после ax.css / ax-app.css /
   ax-auth.css). Направление: чистый чёрный фон, мягкое «живописное» свечение
   только в первом экране и финале, белые кнопки-пилюли, спокойная типографика
   Geist, тёмно-серые карточки без рамок-неона. Волны (ax-silk) и слой cine
   больше не подключаются.
   ========================================================================== */

:root {
  --bg: #000;
  --bg-rgb: 0, 0, 0;
  --surface: #0e0e10;
  --surface-2: #161618;
  --surface-3: #1f1f22;
  --field: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --fg: #f5f5f7;
  --fg-2: rgba(245, 245, 247, 0.72);
  --fg-3: rgba(245, 245, 247, 0.52);
  --fg-4: rgba(245, 245, 247, 0.34);

  /* Лавандовый акцент Atheryx остаётся, но звучит тише: точки, ссылки, теги. */
  --accent: #a9a2ff;
  --accent-rgb: 169, 162, 255;
  --accent-hi: #c2bdff;
  --accent-lo: #8b84ea;
  --accent-ink: #0b0a14;
  --accent-text: #b9b4ff;
  --accent-soft: rgba(169, 162, 255, 0.12);
  --accent-line: rgba(169, 162, 255, 0.28);

  --glass: rgba(0, 0, 0, 0.55);
  --glass-strong: rgba(10, 10, 12, 0.78);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-blur: saturate(140%) blur(20px);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --card-glass: #121214;
  --card-blur: none;
  --card-line: rgba(255, 255, 255, 0.06);
  --card-hover-line: rgba(255, 255, 255, 0.12);
  --dash: rgba(255, 255, 255, 0.08);
  --grid-line: transparent;

  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.6);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  --shadow-glow: none;

  --font-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --r-btn: 999px;
  --r-card: 22px;
  --r-lg: 26px;
  --r-md: 14px;

  --container: 1180px;
  --header-h: 64px;

  /* Палитра «живописного» свечения (hero, финал, панели скриншотов). */
  --paint-1: #2b2a6e;
  --paint-2: #6f6fd8;
  --paint-3: #b7b2ff;
  --paint-4: #e9d9ff;
  --paint-5: #10183a;
}

:root[data-theme="light"] {
  --bg: #fff;
  --bg-rgb: 255, 255, 255;
  --surface: #f6f6f7;
  --surface-2: #f0f0f2;
  --surface-3: #e7e7ea;
  --field: rgba(0, 0, 0, 0.04);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --fg: #0b0b0d;
  --fg-2: rgba(11, 11, 13, 0.7);
  --fg-3: rgba(11, 11, 13, 0.52);
  --fg-4: rgba(11, 11, 13, 0.34);
  --accent: #5b54d6;
  --accent-rgb: 91, 84, 214;
  --accent-hi: #6d66e6;
  --accent-lo: #4a43c0;
  --accent-ink: #fff;
  --accent-text: #4c45c4;
  --accent-soft: rgba(91, 84, 214, 0.1);
  --accent-line: rgba(91, 84, 214, 0.26);
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-line: rgba(0, 0, 0, 0.07);
  --glass-hover: rgba(0, 0, 0, 0.05);
  --card-glass: #f4f4f6;
  --card-line: rgba(0, 0, 0, 0.05);
  --card-hover-line: rgba(0, 0, 0, 0.12);
  --dash: rgba(0, 0, 0, 0.1);
  --shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.3);
  --paint-1: #c9c6ff;
  --paint-2: #9d97ff;
  --paint-3: #e2ddff;
  --paint-4: #fff3ea;
  --paint-5: #b9d0ff;
}

html { background: var(--bg); }
body { background: var(--bg); font: 400 16px/1.6 var(--font-body); letter-spacing: -0.006em; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.035em; }
b, strong { font-weight: 600; }
::selection { background: rgba(var(--accent-rgb), 0.4); }

/* Волны и cine-слой выключены целиком, даже если страница ещё их подгружает. */
.ax-bg-silk, .cine-orb, .cine-ring, .cine-bars, .cine-progress, .cine-rail, .hero-fx { display: none !important; }
:root:not([data-theme="light"]) :is(.ax-h2, .hero-title, .cta-title, .manifesto-text, .ax-page-head h1, .auth-title) { text-shadow: none; }
.ax-gridbox:not(.auth-visual)::before, .ax-gridbox::after { display: none !important; }

/* ── Шапка: полоса во всю ширину, прозрачная вверху, стекло при прокрутке ── */
.ax-header,
.ax-header.is-scrolled {
  --hh: 64px;
  --hbtn: 36px;
  --hlink: 36px;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  transform: none;
  height: var(--hh);
  padding: 0 clamp(16px, 3vw, 28px);
  gap: 16px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.ax-header.is-scrolled {
  background: var(--glass-strong);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
:root[data-theme="light"] .ax-header,
:root[data-theme="light"] .ax-header.is-scrolled { box-shadow: none; }
.ax-header .ax-brand { gap: 10px; padding: 0; font: 600 16px/1 var(--font-display); letter-spacing: -0.02em; }
.ax-header .ax-brand::before { display: none; }
.ax-header .ax-logo { width: 24px; height: 24px; padding: 0; }
.ax-header.is-scrolled .ax-brand { gap: 10px; }
.ax-header.is-scrolled .ax-brand > span { max-width: 140px; opacity: 1; }
.ax-header .ax-nav { margin-inline: auto; }
.ax-nav a { font: 400 14px/1 var(--font-body); color: var(--fg-2); padding: 0 12px; letter-spacing: -0.01em; }
.ax-header.is-scrolled .ax-nav a { font-size: 14px; }
.ax-nav a:hover, .ax-nav a:focus-visible, .ax-nav a.active { color: var(--fg); }
.ax-nav-glow { background: var(--field); border: 0; box-shadow: none; }
.ax-header-actions { gap: 8px; }
.ax-icon-btn { border-color: var(--line); color: var(--fg-2); }
.ax-header .ax-header-actions .ax-btn { height: var(--hbtn); padding: 0 16px; font-size: 14px; }
@media (min-width: 981px) {
  /* Ровно по центру экрана, независимо от ширины бренда/кнопок. */
  .ax-header .ax-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .ax-header .ax-header-actions { margin-left: auto; }
}
@media (max-width: 980px) {
  .ax-header, .ax-header.is-scrolled { width: 100%; --hh: 58px; }
  .ax-header .ax-nav { margin: 0; top: calc(100% + 8px); left: 12px; right: 12px; background: var(--surface-2); border-color: var(--line); }
  .ax-header.is-open { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .ax-nav a, .ax-header.is-scrolled .ax-nav a { border-radius: 14px; }
}

/* ── Кнопки: пилюли; основная — белая с тёмным текстом ─────────────────── */
.ax-btn {
  border-radius: var(--r-pill);
  font: 500 14.5px/1 var(--font-body);
  letter-spacing: -0.01em;
}
.ax-btn--primary,
.ax-btn--primary:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
  border-color: transparent;
  box-shadow: none;
}
.ax-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); }
.ax-btn--secondary {
  background: var(--field);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--line-2);
  color: var(--fg);
}
.ax-btn--secondary:hover:not(:disabled) { background: var(--glass-hover); border-color: var(--line-2); }
.ax-btn--ghost { border-color: var(--line-2); }
.ax-btn--lg { --h: 48px; padding: 0 24px; font-size: 15px; }
.ax-btn--sm { --h: 34px; padding: 0 14px; font-size: 13.5px; }
.ax-btn .ax-head-ava { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.18); }

/* Текстовая ссылка со стрелкой — «Подробнее ›». */
.cx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 500;
}
.cx-link i { transition: transform 0.3s var(--ease); }
.cx-link:hover i { transform: translateX(3px); }

/* ── Метки ─────────────────────────────────────────────────────────────── */
.ax-eyebrow {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--fg-3);
  font: 500 13px/1.2 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.ax-eyebrow i { color: var(--fg-3); }
.ax-tag { font: 500 12px/1 var(--font-body); letter-spacing: 0; }

/* ── Заголовки ─────────────────────────────────────────────────────────── */
.ax-h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.ax-h2 .ax-accent, .ax-h2 .acc-line,
:root[data-theme="light"] .ax-h2 .ax-accent,
:root[data-theme="light"] .ax-h2 .acc-line { color: var(--fg-3); }
.ax-lead { color: var(--fg-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; }

/* ── Поверхности ───────────────────────────────────────────────────────── */
.ax-card {
  background: var(--card-glass);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--card-line);
  box-shadow: none;
}
.ax-card, .feature, .pcard, .faq-item { box-shadow: none; }
.ax-glass { background: var(--glass-strong); }

/* Поля ввода — тёмно-серые, без стеклянных бликов. */
.ax-input, .ax-textarea, .ax-select {
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 14px;
}
.ax-input:focus, .ax-textarea:focus, .ax-select:focus { border-color: var(--line-2); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }

/* Модалки */
.ax-modal { background: var(--surface); border-color: var(--line); }
.ax-modal::backdrop { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── Футер: спокойные колонки, без огромного вордмарка ─────────────────── */
.ax-footer { background: var(--bg); border-top: 1px solid var(--line); }
.ax-footer h3 { color: var(--fg-3); font: 400 13px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; }
.ax-footer ul a { color: var(--fg); font-size: 14px; }
.ax-footer ul a:hover { color: var(--fg-2); }
.ax-footer-bottom { color: var(--fg-3); font-size: 13px; border-top-color: var(--line); }
.ax-wordmark { display: none; }

/* Плавающая кнопка поддержки — белая пилюля. */
.ax-support { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ── «Живописное» свечение — общий фон для hero/финала/панелей ─────────── */
.cx-paint {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Базовая заливка — чтобы между пятнами не было чёрных провалов. */
  background:
    radial-gradient(70% 80% at 50% 40%, color-mix(in srgb, var(--paint-2) 55%, var(--paint-5)) 0%, transparent 75%),
    linear-gradient(160deg, var(--paint-5) 0%, var(--paint-1) 55%, color-mix(in srgb, var(--paint-2) 70%, var(--paint-5)) 100%);
}
.cx-paint::before,
.cx-paint::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 46% at 22% 30%, var(--paint-3) 0%, transparent 70%),
    radial-gradient(34% 40% at 78% 22%, var(--paint-2) 0%, transparent 72%),
    radial-gradient(46% 50% at 60% 70%, var(--paint-1) 0%, transparent 70%),
    radial-gradient(30% 30% at 40% 58%, var(--paint-4) 0%, transparent 70%),
    radial-gradient(60% 60% at 10% 90%, var(--paint-5) 0%, transparent 70%);
  filter: blur(40px) saturate(115%);
  opacity: 0.9;
  animation: cx-drift 26s var(--ease-io) infinite alternate;
}
.cx-paint::after {
  background:
    radial-gradient(24% 30% at 66% 44%, var(--paint-4) 0%, transparent 70%),
    radial-gradient(30% 36% at 30% 72%, var(--paint-2) 0%, transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0.75;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}
/* Мазки — зернистость поверх свечения, как фактура краски. */
.cx-paint > i {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Холст шейдера внутри любого .cx-paint (ax-shader.js) — вместо CSS-пятен. */
.cx-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-paint.has-gl::before, .cx-paint.has-gl::after { display: none; }
.cx-paint > i { opacity: 0.07; }

@keyframes cx-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-paint::before, .cx-paint::after { animation: none; }
}

/* ── Появление по прокрутке: мягкий подъём без размытия ────────────────── */
[data-reveal] { transition-duration: 0.9s; }

/* Слова-акценты в заголовках — монохром, приглушённым тоном (как в референсе). */
:is(h1, h2, .ax-h2, .auth-title, .ax-page-head h1) :is(.ax-accent, .acc-line, .acc),
:root[data-theme="light"] :is(h1, h2, .ax-h2, .auth-title, .ax-page-head h1) :is(.ax-accent, .acc-line, .acc) { color: var(--fg-3); }
.auth-title { font-weight: 500; }

/* Вход/регистрация: левая панель — то же живописное свечение. */
.auth-visual { position: relative; overflow: hidden; isolation: auto; background: transparent; color: #fff; }
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual.ax-gridbox::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -3;
  inset: -20%;
  width: auto;
  transform: none;
  background:
    radial-gradient(40% 40% at 25% 28%, var(--paint-3) 0%, transparent 70%),
    radial-gradient(36% 42% at 80% 20%, var(--paint-2) 0%, transparent 72%),
    radial-gradient(30% 32% at 55% 62%, var(--paint-4) 0%, transparent 70%),
    radial-gradient(60% 60% at 15% 95%, var(--paint-5) 0%, transparent 70%),
    linear-gradient(160deg, var(--paint-5) 0%, var(--paint-1) 55%, color-mix(in srgb, var(--paint-2) 70%, var(--paint-5)) 100%);
  filter: blur(48px) saturate(115%);
  animation: cx-drift 30s var(--ease-io) infinite alternate;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
}
.auth-visual .ax-brand { color: #fff; }
:root[data-theme="light"] .auth-visual .ax-logo { filter: none; }
.auth-quote p { font-weight: 500; letter-spacing: -0.035em; color: #fff; text-shadow: none; }
.auth-quote footer { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
:root[data-theme="light"] .auth-visual,
:root[data-theme="light"] .auth-visual .ax-brand,
:root[data-theme="light"] .auth-quote p { color: #0b0b0d; }
:root[data-theme="light"] .auth-quote footer { color: rgba(11, 11, 13, 0.65); }
.auth-panel { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-left-color: var(--line); }

/* Переключатели (магазин, кабинет, админка): выбранное — белая пилюля без свечения. */
.shop-tabs, .seg, .ax-tabs { border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.shop-tabs button, .seg button, .ax-tabs button, .ax-tabs a { border-radius: 999px; font-weight: 500; }
.shop-tabs button.active, .seg button.active,
.ax-tabs [aria-selected="true"], .ax-tabs .active,
.ax-tabs [aria-selected="true"]:hover, .ax-tabs .active:hover { background: var(--fg); color: var(--bg); box-shadow: none; border-color: transparent; }

/* Внутренние страницы: заголовки и крупные цифры — средняя насыщенность, как на главной. */
.ax-page :is(h1, h2, h3), .ax-modal :is(h2, h3) { font-weight: 500; }
.ax-page :is(b, strong) { font-weight: 600; }

/* Страницы-приложения (кабинет, магазин, лот, доки, админка): шапка страницы. */
.ax-page { padding-top: calc(var(--header-h) + 40px); }
.ax-page-head h1 { font-weight: 500; letter-spacing: -0.04em; }

/* Шлейф символов за курсором (ax-trail.js): только на фоне. Слои корневого контекста:
   фон html → свечения (z -3) → шлейф (z -2) → всё содержимое страницы. Для этого body
   прозрачный, а hero/финал/панель входа не изолируют свои свечения. */
body { background: transparent; }
.ax-trail {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Без mix-blend-mode: под содержимым он бесполезен, а заставляет браузер
     перекомпоновывать всю страницу каждый кадр — шлейф от этого подвисал. */
  transform: translateZ(0);
}