/* NEUROFUNGI design system — токены и базовые компоненты.
   Источник значений: дизайн-система NEUROFUNGI AI (Claude Design), собранная
   из этого же репозитория + макеты мобильных экранов.
   Правило: золото (#C9A84C, #FFD700) не используется нигде.
   Оранжевый — только внутри контентных картинок, никогда в интерфейсе. */

:root {
  /* Фон и поверхности */
  --nf-bg-0: #02050a;
  --nf-bg-1: #03060c;
  --nf-bg-2: #060a12;
  --nf-surface: rgba(6, 10, 18, 0.72);
  /* Контуры холодные серо-синие, а не нейтрально-белые. */
  --nf-hairline: rgba(120, 145, 190, 0.16);
  --nf-hairline-strong: rgba(140, 165, 210, 0.28);
  --nf-rim-cyan: rgba(32, 223, 244, 0.35);

  /* Текст */
  --nf-fg-1: #ffffff;
  --nf-fg-2: #a6a8b6;
  --nf-fg-3: #9ca3b5;
  --nf-fg-4: rgba(156, 163, 181, 0.62);

  /* Акцент — один приём на весь продукт */
  --nf-cyan: #20dff4;
  --nf-blue: #238cff;
  --nf-blue-2: #4777ff;
  --nf-violet: #8b4dff;
  --nf-magenta: #b32bff;
  /* Заголовок и контуры */
  --nf-gradient: linear-gradient(90deg, #22ddf4 0%, #4c8fff 50%, #a84dff 100%);
  /* Главная кнопка — отдельный, более глубокий градиент */
  --nf-gradient-cta: linear-gradient(90deg, #0aafd0 0%, #126dae 34%, #5128a5 72%, #8b18e8 100%);

  /* Статусы. Янтарный — только текст предупреждений, не акцент. */
  --nf-danger: #f87171;
  --nf-warn: #fbbf24;
  --nf-ok: #34d399;
  --nf-info: #238cff;

  /* Оболочка мобильного экрана */
  --nf-screen-max: 430px;
  --nf-gutter: 20px;
  --nf-header-h: 56px;
  --nf-tabbar-h: 68px;
  --nf-hit: 44px;

  /* Отступы */
  --nf-1: 4px;  --nf-2: 8px;  --nf-3: 12px; --nf-4: 14px; --nf-5: 16px;
  --nf-6: 20px; --nf-7: 24px; --nf-8: 32px; --nf-9: 40px; --nf-10: 56px;

  /* Скругления */
  --nf-r-sm: 14px;
  --nf-r-md: 20px;
  --nf-r-tile: 22px;
  --nf-r-card: 24px;
  --nf-r-sheet: 28px;
  --nf-r-pill: 999px;

  /* Тени и свечения. Свечение никогда не белое. */
  --nf-shadow-card: 0 16px 48px rgba(0, 0, 0, 0.45);
  --nf-glow-cyan: 0 0 28px rgba(32, 223, 244, 0.38);
  --nf-glow-button: 0 10px 38px rgba(35, 140, 255, 0.34), 0 10px 38px rgba(139, 77, 255, 0.30);
  --nf-glow-featured: 0 0 36px rgba(139, 77, 255, 0.32);

  /* Типографика */
  /* Inter — как на макете. Кириллица полная, лицензия SIL OFL.
     Syne из старой дизайн-системы не годится: в нём нет кириллицы вообще. */
  --nf-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  --nf-font-display: var(--nf-font-ui);
  --nf-tracking-logo: 0.24em;
  --nf-tracking-hero: -0.03em;

  /* Движение */
  --nf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nf-dur: 220ms;
}

/* ── Базовая оболочка ───────────────────────────────────────────────── */

/* Без этого width:100% складывается с padding: кнопки и плитки вылезают
   за контейнер, и вся вёрстка выглядит съехавшей вправо. */
*, *::before, *::after { box-sizing: border-box; }

.nf-body {
  margin: 0;
  min-height: 100dvh;
  background: var(--nf-bg-0);
  color: var(--nf-fg-1);
  font-family: var(--nf-font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.nf-screen {
  position: relative;
  width: 100%;
  max-width: var(--nf-screen-max);
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(var(--nf-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--nf-8));
}

/* Фоновое свечение вместо текстуры мицелия — 8–14% непрозрачности. */
.nf-glowfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 82% 6%, rgba(139, 77, 255, 0.28), transparent 70%),
    radial-gradient(52% 36% at 6% 34%, rgba(32, 223, 244, 0.13), transparent 72%),
    radial-gradient(70% 40% at 50% 104%, rgba(179, 43, 255, 0.13), transparent 72%);
}

.nf-layer { position: relative; z-index: 1; }
.nf-pad { padding-left: var(--nf-gutter); padding-right: var(--nf-gutter); }

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

.nf-header {
  height: var(--nf-header-h);
  margin-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-3);
}

.nf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nf-logo__mark { width: 34px; height: 34px; flex: none; }

/* Логотип — тонкие прописные, широкий трекинг, «AI» градиентом. Никогда жирный. */
.nf-wordmark {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--nf-tracking-logo);
  color: var(--nf-fg-1);
  white-space: nowrap;
}
.nf-wordmark i {
  font-style: normal;
  background: var(--nf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf-iconbtn {
  width: var(--nf-hit);
  height: var(--nf-hit);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--nf-r-pill);
  border: 1px solid var(--nf-hairline-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--nf-fg-2);
  text-decoration: none;
  transition: border-color var(--nf-dur) var(--nf-ease), color var(--nf-dur) var(--nf-ease);
}
.nf-iconbtn:hover { border-color: var(--nf-rim-cyan); color: var(--nf-fg-1); }

/* ── Заголовки ──────────────────────────────────────────────────────── */

.nf-eyebrow {
  font-size: 15px;
  font-weight: 400;
  color: var(--nf-fg-3);
  margin-bottom: var(--nf-1);
}

/* Фирменный приём: первая строка белая, вторая — залита градиентом. */
.nf-hero-title {
  margin: 0;
  font-size: clamp(34px, 11.5vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--nf-tracking-hero);
}
.nf-hero-title b { display: block; font-weight: 700; }
.nf-hero-title u {
  display: block;
  text-decoration: none;
  background: var(--nf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf-lead {
  margin: var(--nf-4) 0 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--nf-fg-3);
}

/* ── Кнопки ─────────────────────────────────────────────────────────── */

.nf-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nf-3);
  width: 100%;
  min-height: 64px;
  padding: 0 var(--nf-6) 0 9px;
  letter-spacing: -0.01em;
  isolation: isolate;
  border: 0;
  border-radius: var(--nf-r-pill);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--nf-fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--nf-dur) var(--nf-ease), filter var(--nf-dur) var(--nf-ease);
}
.nf-btn__label { flex: 1; text-align: center; }
.nf-btn__lead {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--nf-r-pill);
}
.nf-btn__go { flex: none; opacity: 0.9; }

/* Главная кнопка — градиентная заливка со свечением. Одна на экран.
   Мягкость даёт не размытие краёв, а три слоя: плотная заливка, тонкий
   светлый блик по верхней кромке и широкое рассеянное свечение снизу. */
.nf-btn--primary {
  background: var(--nf-gradient-cta);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 10px rgba(2, 5, 10, 0.55),
    var(--nf-glow-button);
  text-shadow: 0 1px 2px rgba(2, 5, 10, 0.28);
}
/* Верхний блик — стеклянная подсветка, гаснет к середине. */
.nf-btn--primary::after {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.nf-btn--primary .nf-btn__lead {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 0 18px rgba(255, 255, 255, 0.10);
}

/* Вторичная — прозрачная, градиентная рамка в 1px через маску. */
.nf-btn--ghost {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)) ,
    linear-gradient(90deg, rgba(32, 223, 244, 0.14), rgba(71, 119, 255, 0.10) 52%, rgba(139, 77, 255, 0.16));
  background-color: rgba(3, 6, 12, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 10px rgba(2, 5, 10, 0.5);
}
.nf-btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #20dff4 0%, #4777ff 52%, #b32bff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.nf-btn--ghost .nf-btn__lead { color: var(--nf-cyan); }

/* «Дышащая» кнопка — акцент на второстепенном действии без второй заливки.
   Пульсирует свечение и рамка, сам блок почти не двигается: 2% масштаба
   хватает, чтобы взгляд зацепился, и не хватает, чтобы прыгала вёрстка. */
.nf-btn--breathe {
  animation: nf-breathe 2.85s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes nf-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 20px rgba(32, 223, 244, 0.22), 0 0 20px rgba(179, 43, 255, 0.18);
  }
  50% {
    transform: scale(1.022);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 8px 44px rgba(32, 223, 244, 0.52), 0 8px 44px rgba(179, 43, 255, 0.42);
  }
}


.nf-btn:hover { filter: brightness(1.06); }
@media (hover: hover) and (pointer: fine) {
  .nf-btn:hover { transform: translateY(-2px); }
}

/* ── Карточки и плитки ──────────────────────────────────────────────── */

.nf-card {
  border-radius: var(--nf-r-card);
  background: var(--nf-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nf-hairline);
  box-shadow: var(--nf-shadow-card);
}

.nf-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nf-3);
}
.nf-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nf-3);
  min-height: clamp(104px, 15vh, 132px);
  padding: var(--nf-4) var(--nf-2);
  border-radius: var(--nf-r-tile);
  background: var(--nf-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nf-hairline);
  color: var(--nf-fg-2);
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  transition: border-color var(--nf-dur) var(--nf-ease), color var(--nf-dur) var(--nf-ease);
}
.nf-tile:hover { border-color: var(--nf-rim-cyan); color: var(--nf-fg-1); }

/* Мягкое внутреннее свечение, у каждой карточки свой цвет. */
.nf-tile--cyan   { box-shadow: inset 0 12px 34px -18px rgba(32, 223, 244, 0.55); }
.nf-tile--violet { box-shadow: inset 0 12px 34px -18px rgba(139, 77, 255, 0.55); }
.nf-tile--blue   { box-shadow: inset 0 12px 34px -18px rgba(35, 140, 255, 0.55); }

/* ── Иконки: только контур, 24×24, обводка 1.65, круглые концы ───────── */

.nf-i {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-i--lg { width: 32px; height: 32px; }
.nf-i--grad { stroke: url(#nfGrad); }

/* ── Нижняя навигация ───────────────────────────────────────────────── */

.nf-tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nf-4));
  z-index: 20;
  width: calc(min(100vw, var(--nf-screen-max)) - var(--nf-5) * 2);
  height: var(--nf-tabbar-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  border-radius: var(--nf-r-card);
  background: rgba(10, 10, 18, 0.78);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--nf-hairline);
  box-shadow: var(--nf-shadow-card);
}
.nf-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  color: var(--nf-fg-4);
  font-size: 12px;
  text-decoration: none;
}
.nf-tab.is-active { color: var(--nf-cyan); }
/* Маленькая чёрточка-индикатор над активным пунктом. */
.nf-tab.is-active::before {
  content: '';
  position: absolute;
  top: 9px;
  width: 18px;
  height: 3px;
  border-radius: var(--nf-r-pill);
  background: var(--nf-cyan);
  box-shadow: var(--nf-glow-cyan);
}

/* В потоке, а не поверх контента: используется на экранах, которые точно
   помещаются в высоту телефона и не прокручиваются. */
.nf-tabbar--static {
  position: static;
  transform: none;
  width: 100%;
}

/* Контент у нижнего края прикрыт мягкой шторкой, а не сплошной полосой. */
.nf-scrim-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 132px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 10, 0) 0%, rgba(5, 5, 10, 0.82) 58%, var(--nf-bg-0) 100%);
}

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

/* ── Экран выбора: крупные карточки-пути ────────────────────────────── */

.nf-choices { display: flex; flex-direction: column; gap: 14px; }

.nf-choice {
  position: relative;
  display: block;
  min-height: clamp(150px, 21vh, 196px);
  padding: 22px 24px;
  border-radius: var(--nf-r-card);
  background: var(--nf-surface);
  border: 1px solid var(--nf-hairline);
  box-shadow: var(--nf-shadow-card);
  color: var(--nf-fg-1);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--nf-dur) var(--nf-ease), transform var(--nf-dur) var(--nf-ease);
}
/* Ветвистая текстура мицелия в правой части карточки — за иллюстрацией. */
.nf-choice::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/static/branding/nf-card-myc.webp') right center / auto 130% no-repeat;
  opacity: 0.8;
  pointer-events: none;
}
.nf-choice--featured::after { opacity: 0.6; }
.nf-choice:hover { border-color: var(--nf-rim-cyan); }
@media (hover: hover) and (pointer: fine) {
  .nf-choice:hover { transform: translateY(-2px); }
}

.nf-choice__label {
  position: relative;
  z-index: 2;
  /* Именно block: у строчного span max-width не действует, и длинная подпись
     из админки заезжала бы на иллюстрацию. */
  display: block;
  max-width: 70%;
  font-size: clamp(19px, 5.2vw, 25px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Стрелка под подписью — как на макете, а не сбоку. */
.nf-choice__go {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 16px;
  width: 34px;
  height: 24px;
  color: var(--nf-violet);
}
/* Крупная контурная иллюстрация справа, наполовину уходит за край. */
.nf-choice__art {
  position: absolute;
  right: 18px;
  bottom: 50%;
  transform: translateY(50%);
  width: clamp(94px, 26vw, 128px);
  height: clamp(94px, 26vw, 128px);
  z-index: 1;
  fill: none;
  stroke: url(#nfGrad);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

/* Первая карточка — залита градиентом со свечением. Одна на экран. */
.nf-choice--featured {
  background: linear-gradient(100deg, #0d4a5e 0%, #16356f 40%, #4a1f96 74%, #6d15b8 100%);
  border-color: transparent;
  box-shadow: var(--nf-shadow-card), 0 10px 42px rgba(139, 77, 255, 0.34);
}
.nf-choice--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #20dff4 0%, #4777ff 52%, #b32bff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.nf-choice--featured .nf-choice__go { color: #ffffff; }
.nf-choice--featured .nf-choice__art { stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.4; }

/* Выключенный в админке пункт — виден только в предпросмотре. */
.nf-choice--off { opacity: 0.45; }
.nf-choice__off-note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--nf-fg-3);
}