/*
  global.css — подключать на ВСЕХ страницах проекта.
  Содержит: сброс, CSS-переменные, фиксированный фон, базовая типографика.
*/

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

:root {
  --primary:       #c41e3a;
  --primary-dark:  #8b0000;
  --primary-light: #e8536a;
  --text:          #ffffff;
  --muted:         rgba(255,255,255,0.55);
  --dim:           rgba(255,255,255,0.28);
  --border:        rgba(255,255,255,0.07);
  --card:          rgba(255,255,255,0.04);
  --r:             16px;
}

/* ── Фиксированный фон ──────────────────────────────────────────────────
   Градиент от верхнего левого угла к нижнему правому.
   background-attachment: fixed — фон не скроллится вместе с контентом,
   меняется только при изменении размера окна браузера.
───────────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* Фиксированный фон — псевдоэлемент прибит к вьюпорту,
   не реагирует на скролл, градиент всегда идёт строго по диагонали */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0c0c11 0%, #190b11 100%);
}

/* Слой-оверлей: едва заметное лого MemAI поверх всего контента.
   Центр экрана, отступы 8vw по бокам, пропорции 950×368, opacity 5%. */
body::after {
  content: '';
  position: fixed;
  left: 8vw;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 950 / 368;
  background: url('/memai-logo.svg') center/contain no-repeat;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.005;
}

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── Утилиты ────────────────────────────────────────────────────────────*/
.btn-ghost {
  padding: 8px 22px; border-radius: 50px; font-size: .84rem; font-weight: 500;
  color: rgba(255,255,255,.7); background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer; transition: all .2s; font-family: inherit;
  text-decoration: none; display: inline-block;
}
.btn-ghost:hover { background: rgba(255,255,255,.07); color: #fff; }

.btn-red {
  padding: 8px 22px; border-radius: 50px; font-size: .84rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; cursor: pointer; transition: all .2s; font-family: inherit;
  text-decoration: none; display: inline-block;
}
.btn-red:hover { box-shadow: 0 4px 20px rgba(196,30,58,.45); transform: translateY(-1px); }

.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 24px; border-radius: 50px; font-size: .84rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; cursor: pointer; transition: all .2s; font-family: inherit;
  text-decoration: none;
}
.btn-hero:hover { box-shadow: 0 4px 20px rgba(196,30,58,.45); transform: translateY(-1px); }
.btn-hero:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.3); cursor: not-allowed; box-shadow: none; transform: none; }