/* ═══════════════════════════════════════════════════════════
   n1k.pro — SITE CHROME (shared CSS)
   Единый источник правды для хрома: tokens, container, nav, footer,
   базовая типографика, кнопки. Подключается site-wide через
   nginx sub_filter в </head>.

   Специфика страниц (hero, cards, terminal, marquee и т.д.) —
   остаётся в inline <style> каждой страницы.
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── TOKENS ── */
:root {
  /* Background levels (4 tiers) */
  --bg:         #08080a;
  --surface:    #111114;
  --elevated:   #16161a;
  --elevated-2: #1c1c22;

  /* Text */
  --text:           #e8e6e3;
  --text-secondary: #9a9aa0;

  /* Accent */
  --accent:      #c8ff00;
  --accent-dim:  rgba(200, 255, 0, 0.08);
  --accent-glow: rgba(200, 255, 0, 0.15);

  /* Semantic */
  --red:    #ff5f57;
  --yellow: #febc2e;
  --green:  #28c840;

  /* Typography */
  --font-display: 'Unbounded', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'Instrument Serif', serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-10: 128px;

  /* Border radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card:     0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.2);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.3);
  --shadow-accent:   0 0 24px rgba(200,255,0,0.06), 0 0 64px rgba(200,255,0,0.03);
}

/* ── HTML/BODY ── */
html { font-size: 16px; overflow-x: hidden; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-display); font-weight: 300;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Link reset */
a, a:link, a:visited { color: inherit; }

/* ── LAYOUT ── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-4) 0;
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.3s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; position: relative; }
.nav-logo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; color: var(--accent);
  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo-mark { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.nav-logo-text { color: var(--text); }
.nav-logo-text .dot-accent { color: var(--accent); }

.nav-links {
  display: flex; gap: var(--sp-5); list-style: none;
}
.nav-links a {
  font-family: var(--font-mono); font-size: 0.875rem;
  color: var(--text-secondary); text-decoration: none;
  letter-spacing: 0.03em; transition: color 0.2s ease;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width 0.2s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { width: 100%; }

.nav-cta, .nav-cta:link, .nav-cta:visited {
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500;
  color: var(--bg) !important; background: var(--accent);
  text-decoration: none;
  padding: 10px 18px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(200,255,0,0.1);
}

.nav-burger {
  display: none; background: none; border: none;
  color: var(--accent); cursor: pointer;
  padding: var(--sp-1) var(--sp-2); line-height: 1;
}

@media (max-width: 768px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; gap: var(--sp-3);
    background: rgba(8,8,10,0.95);
    backdrop-filter: blur(12px);
    padding: var(--sp-5);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links.open { display: flex; }
  .nav-cta { display: none; }
}

/* ── FOOTER ── */
footer {
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
}
.footer-copy {
  font-family: var(--font-mono); font-size: 0.875rem;
  color: var(--text-secondary);
}
.footer-copy a { color: var(--accent); text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }
.footer-links {
  display: flex; gap: var(--sp-5); list-style: none;
  flex-wrap: wrap;
}
.footer-links a {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-secondary); text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--accent); }

/* ── BUTTONS (canonical) ── */
.btn-primary, .btn-primary:link, .btn-primary:visited {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent); color: var(--bg) !important;
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 600;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm);
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 2px 12px rgba(200,255,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.2s ease;
}
.btn-ghost, .btn-ghost:link, .btn-ghost:visited {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 400;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover {
  color: var(--text); border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.02);
}
.cta-btn, .cta-btn:link, .cta-btn:visited {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent); color: var(--bg) !important;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  padding: var(--sp-4) 40px;
  border-radius: var(--r-md);
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 2px 12px rgba(200,255,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.2s ease;
}
.btn-tg, .btn-tg:link, .btn-tg:visited {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent); color: var(--bg) !important;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  padding: var(--sp-4) 40px;
  border-radius: var(--r-md);
  text-decoration: none; border: none; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.2s ease;
}

/* SVG в зелёных кнопках — тёмная обводка */
.btn-primary svg, .cta-btn svg, .btn-tg svg, .nav-cta svg {
  stroke: currentColor;
}

/* Unified hover на всех акцентных (зелёных) кнопках */
.btn-primary:hover, .cta-btn:hover, .btn-tg:hover, .nav-cta:hover {
  transform: translateY(-2px);
  background: #d4ff33;
  box-shadow: 0 8px 28px rgba(200,255,0,0.22);
}

/* ── UTILITIES ── */
.accent { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.dim { color: var(--text-secondary); }

/* ── АУДИО-ФИДБЕК 2026-04-24: системные правила B/C/D/F/G ──
   B. Акцент в заголовках = тот же display-face, только цвет.
      Instrument Serif ОСТАЁТСЯ только в больших блоковых цитатах,
      где смена шрифта — осознанный художественный приём.
      В h1/h2/h3 и inline-контексте — Unbounded italic с accent.

   C. Переносы по смыслам, не по словам (site-wide).
      Заголовки: text-wrap: balance — браузер балансирует строки
        так, чтобы ни одна не была «хвостом» из 1-2 слов.
      Параграфы: text-wrap: pretty — устраняет вдов (orphan-слов
        в последней строке), улучшает ритм чтения.
      Никаких ручных <br> и &nbsp; — браузер считывает смысл сам. */

h1, h2, h3, h4, h5, h6,
.hero h1, .hero-sub,
.section-title, .hook-line,
.mid-cta-title, .mid-cta-desc,
.final-cta h2, .cta-section .section-title,
.product-card h3, .tech-card-title, .approach-card h3,
.contrast-col h3, .about-name, .about-role,
.hero-badge, .hero-eyebrow,
.section-desc {
  text-wrap: balance;
  -webkit-text-wrap: balance;
}

p, li, .hook-body p, .contrast-col p, .approach-card p,
.product-card p, .contrast-bottom, .format-desc,
.product-metric, .card-text {
  text-wrap: pretty;
  -webkit-text-wrap: pretty;
  hyphens: manual;
  -webkit-hyphens: manual;
}

h1 em, h2 em, h3 em, h4 em,
.hero h1 em, .hero-sub em,
.section-title em, .hook-line em,
.final-cta h2 em,
h1 .serif, h2 .serif, h3 .serif, h4 .serif,
.section-title .serif, .mid-cta-title .serif,
.final-cta h2 .serif {
  font-family: inherit !important;
  font-style: italic;
  font-weight: inherit;
  color: var(--accent) !important;
}

/* .serif как отдельный класс остаётся для блоковых цитат
   (.about-quote-block и подобные крупные выносные фрагменты) */
.about-quote-block, .proof-text, .pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
}

/* F. Минимальные размеры: тело-текст ≥ 16px, вспомогательный ≥ 14.4px */
body, p, li, dd, dt { font-size: 1rem; }
.section-desc, .hero-sub, .hook-body p, .contrast-col p,
.approach-card p, .product-card p { font-size: 1rem; line-height: 1.65; }

/* D. Лимит зелёного.
   Акцент остаётся для: em-акцентов в заголовках, значений метрик,
   кнопок, пульс-точки hero-badge, ссылок в body.
   Мелкие mono-метки секций/карточек/шагов — text-secondary.
   Это убирает «зелёный везде» ощущение без потери главных акцентов. */
.section-num,
.card-label, .tech-card-num,
.product-tag, .format-tier-label,
.approach-num, .step-num,
.contrast-col.them .contrast-label {
  color: var(--text-secondary) !important;
  opacity: 0.85;
}

/* Тонкие зелёные бордеры на карточках и аналогах — убираем интенсивность
   до едва видимых акцентов на hover */
.hero-eyebrow { border-color: rgba(255,255,255,0.08); }
.product-card, .tech-card, .approach-card, .lab-card {
  border-color: rgba(255,255,255,0.06);
}

/* G. Визуальные разделители между секциями.
   Снимаем дублирующие border-top на каждой .section (шум),
   ставим один декоративный gradient-дивайдер сверху каждой следующей секции.
   Плюс alternating background: каждая 2-я секция +2% brightness → визуальный ритм. */

.section { border-top: none !important; }

.section + .section,
.section + .mid-cta,
.mid-cta + .section,
.section + .final-cta,
.section + .cta-section,
.section + .case-section {
  position: relative;
}
.section + .section::before,
.section + .mid-cta::before,
.mid-cta + .section::before,
.section + .final-cta::before,
.section + .cta-section::before,
.section + .case-section::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 22vw, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,255,0,0.32), transparent);
  pointer-events: none;
}

/* Чередование фона секций — заметный ритм (приём Кота #2).
   Чётные секции получают --surface подложку — видимая пауза между блоками. */
body > .section:nth-of-type(even),
main > .section:nth-of-type(even) {
  background-color: rgba(255,255,255,0.022);
  border-radius: 0;
}

/* Eyebrow — вопрос читателя над H2 секции (приём #7) */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  opacity: 0.75;
}
.section-eyebrow::before {
  content: '? ';
  color: var(--accent);
  font-weight: 500;
}

/* Scroll-reveal */
.section, .mid-cta, .proof-section {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.section.visible, .mid-cta.visible, .proof-section.visible {
  opacity: 1; transform: none;
}

/* Cursor glow */
.cursor-glow {
  position: fixed;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,255,0,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: left 0.3s ease, top 0.3s ease;
  left: -1000px; top: -1000px;
}
@media (hover: none) { .cursor-glow { display: none; } }