/* === MAIN.CSS === */
/* assets/css/main.css */
/* НАЗНАЧЕНИЕ: Дизайн-система - переменные, типографика, базовые элементы */
/* СВЯЗИ: index.php, sections.css, responsive.css */
/* РАЗМЕР: ~310 строк */
/* ЭСТЕТИКА: Роскошь (палитра и шрифты взяты из утвержденного КП) */

/* ============================================
   ПЕРЕМЕННЫЕ
   ============================================ */

:root {
  /* Палитра из КП */
  --navy:      #0B2027;
  --navy-2:    #102E37;
  --teal:      #173D46;
  --gold:      #C6A45B;
  --gold-soft: #D8BE86;
  --ivory:     #F5F1E8;
  --ivory-2:   #EDE7DA;
  --ink:       #1B211F;

  /* Производные через color-mix */
  --line:        color-mix(in oklab, var(--gold) 28%, transparent);
  --line-soft:   color-mix(in oklab, var(--gold) 16%, transparent);
  --ink-70:      color-mix(in oklab, var(--ink) 72%, transparent);
  --ink-55:      color-mix(in oklab, var(--ink) 58%, transparent);
  --ivory-80:    color-mix(in oklab, var(--ivory) 82%, transparent);
  --ivory-65:    color-mix(in oklab, var(--ivory) 68%, transparent);
  --gold-glow:   color-mix(in oklab, var(--gold) 25%, transparent);

  /* Типографика */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* Ритм: воздушный, как в КП */
  --section-pad:  82px;
  --wrap-max:     1080px;
  --wrap-pad:     40px;

  /* Кривые анимации */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
}

/* ============================================
   СБРОС
   ============================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============================================
   СЕТКА
   ============================================ */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

section { padding: var(--section-pad) 0; }

.light { background: var(--ivory); }
.cream { background: var(--ivory-2); }
.dark  { background: var(--navy); color: var(--ivory); }
.dark p { color: var(--ivory-80); }

/* ============================================
   ТИПОГРАФИКА
   ============================================ */

/* Надзаголовок с золотой чертой - фирменный прием из КП */
.eyebrow {
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}

.on-dark .eyebrow,
.dark .eyebrow { color: var(--gold-soft); }

.eyebrow.center { justify-content: center; }

/* Заголовки секций */
h2.head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: 22px;
  max-width: 820px;
}

.dark h2.head { color: #fff; }

h2.head em {
  font-style: italic;
  color: var(--gold);
}

.dark h2.head em { color: var(--gold-soft); }

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

.sub {
  font-size: 17px;
  max-width: 700px;
  color: var(--ink-70);
  font-weight: 300;
}

.dark .sub { color: var(--ivory-65); }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--gold);
}

/* ============================================
   КНОПКИ
   ============================================ */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 17px 42px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 15px;
  text-align: center;
  transition: transform .2s var(--ease-out-quart), box-shadow .2s var(--ease-out-quart);
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--gold-glow);
}

.btn:active:not(:disabled) { transform: translateY(0); }

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gold);
  color: var(--navy);
}

/* Фокус для клавиатуры */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================
   ЯЧЕЙКИ И РАМКИ
   ============================================ */

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 44px;
}

.cell {
  background: var(--ivory);
  padding: 30px 32px;
}

.cream .cell { background: var(--ivory-2); }
.dark  .cell { background: var(--navy); }

.cell h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.cell p {
  font-size: 14.5px;
  color: var(--ink-70);
}

.dark .cell h3 { color: #fff; }
.dark .cell p  { color: var(--ivory-65); }

/* ============================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out-quart), transform .7s var(--ease-out-quart);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================
   ДОСТУПНОСТЬ
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Скрыто визуально, доступно скринридеру */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   ПЕЧАТЬ
   ============================================ */

@media print {
  .reveal { opacity: 1; transform: none; }
  section { padding: 40px 0; break-inside: avoid; }
  body { background: #fff; color: #000; }
  .dark { background: #fff !important; color: #000 !important; }
  .dark h2.head, .dark p, .dark .sub { color: #000 !important; }
  .btn, .form-section, nav { display: none !important; }
}