/* === ТОКЕНЫ И БАЗА === */
:root {
  --cream:  #F9F8F6;
  --white:  #FFFFFF;
  --warm:   #6B5E53; 
  --blush:  #E0C7C0;
  --danger: #d9534f;
  
  --text-muted:   rgba(107, 94, 83, 0.6);
  --border-light: rgba(107, 94, 83, 0.15);
  --border-soft:  rgba(107, 94, 83, 0.08);
  --accent-soft:  rgba(107, 94, 83, 0.05);

  --shadow-sm: 0 4px 12px rgba(107, 94, 83, 0.03);
  --shadow-md: 0 12px 32px rgba(107, 94, 83, 0.06);
  --shadow-lg: 0 24px 60px rgba(107, 94, 83, 0.08);

  --font-head: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 100px;
  --container: 1040px;
  --radius-card: 20px;
  --radius-pill: 999px;
}

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

body {
  font-family: var(--font-head);
  background-color: var(--cream);
  color: var(--warm);
  -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  cursor: none; 
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

.btn-full {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.hero-badge--compact {
  margin-bottom: 16px;
}

.quiz-final__title {
  margin-bottom: 24px;
  color: var(--warm);
}

.card-service__badge--nowrap {
  white-space: nowrap;
  width: fit-content;
}

.price-item__value--small {
  font-size: 14px;
}

.ai-error-title {
  color: var(--danger);
  font-weight: 600;
  margin-bottom: 12px;
}

.ai-error-note {
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.4;
}

.ai-result-heading {
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--warm);
}

.ai-result-copy {
  opacity: 0.8;
  font-size: 0.9em;
  line-height: 1.4;
}

.hero-title .word:nth-of-type(1) { --word-index: 1; }
.hero-title .word:nth-of-type(2) { --word-index: 2; }
.hero-title .word:nth-of-type(3) { --word-index: 3; }
.hero-title .word:nth-of-type(4) { --word-index: 4; }

.guide-hero__title .word-wrap:nth-of-type(1) { --i: 1; }
.guide-hero__title .word-wrap:nth-of-type(2) { --i: 2; }
.guide-hero__title .word-wrap:nth-of-type(3) { --i: 3; }
.guide-hero__title .word-wrap:nth-of-type(4) { --i: 4; }
.guide-hero__title .word-wrap:nth-of-type(5) { --i: 5; }
.guide-hero__title .word-wrap:nth-of-type(6) { --i: 6; }
.guide-hero__title .word-wrap:nth-of-type(7) { --i: 7; }

.blueprint-node--1 { top: 25%; left: 7.5%; animation-delay: 0s; }
.blueprint-node--2 { top: 6.6%; left: 37.5%; animation-delay: 0.5s; }
.blueprint-node--3 { top: 33.3%; left: 92.5%; animation-delay: 1s; }
.blueprint-node--4 { top: 50%; left: 12.5%; animation-delay: 0.2s; }
.blueprint-node--5 { top: 50%; left: 50%; }
.blueprint-node--6 { top: 50%; left: 87.5%; animation-delay: 0.8s; }

.flag-microtext--spaced { margin-top: 40px; }
.guide-divider--spaced { margin: 80px 0; }

.art-arch--mirrored { transform: scaleX(-1); }
.art-axis--rotated { transform: rotate(90deg); }
.art-drop--circle { border-radius: 50%; }
.art-drop__core--rounded { border-radius: 20%; }

a, button {
  cursor: none;
}

/* === ГЛОБАЛЬНЫЙ КУРСОР === */
.gaze-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background-color: var(--warm);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border 0.3s var(--ease-out);
}

.gaze-cursor--hover {
  width: 48px; height: 48px;
  background-color: transparent;
  border: 1px solid var(--warm);
  backdrop-filter: blur(2px);
}

.gaze-cursor--light {
  background-color: var(--cream);
}

.gaze-cursor--light.gaze-cursor--hover {
  border-color: var(--cream);
}

@media (max-width: 768px) {
  .section-gift-hero { 
    padding-top: 100px; 
    padding-bottom: 40px; 
    min-height: auto; 
  }
  
  .section-gift-hero__inner { 
    grid-template-columns: 1fr; 
    text-align: center; 
    gap: 30px; 
  }

  /* ВКЛЮЧАЕМ ВИЗУАЛ НА МОБИЛКЕ */
  .section-gift-hero__visual { 
    display: flex !important; 
    order: 2; /* Конверт будет под текстом */
    margin-top: 20px;
  }

  /* УМЕНЬШАЕМ РАЗМЕР КОНВЕРТА ДЛЯ ЭКРАНА ТЕЛЕФОНА */
  .hero-cert-wrap { 
    width: 200px; 
    height: 280px; 
  }

  .sleeve-title { font-size: 16px; }
  .sleeve-title em { font-size: 22px; }
  .sleeve-seal { width: 34px; height: 34px; left: 18px; }
  .sleeve-ribbon { left: 24px; width: 18px; }
  .sleeve-content { margin-left: 44px; }

  .gift-hero-tags { 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
  }

  .builder-grid { grid-template-columns: 1fr; }
  .preview-sticky { position: relative; top: 0; margin-top: 40px; }
  .reason-card { padding: 30px 20px; }
}

/* === УТИЛИТЫ КНОПОК === */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--warm); color: var(--cream);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; border: none;
  transition: all 0.3s var(--ease-out);
}

.btn-primary:hover {
  background: var(--warm);
  opacity: 0.85; 
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(107, 94, 83, 0.2);
}

.btn-primary--shimmer {
  position: relative; overflow: hidden;
}

.btn-primary--shimmer::after {
  content: '';
  position: absolute; 
  top: 0; left: -150%; /* Увеличили разбег */
  width: 60%; height: 100%;
  background: linear-gradient(
    to right, 
    transparent, 
    rgba(255, 255, 255, 0.15), /* Сделали блик чуть нежнее */
    transparent
  );
  transform: skewX(-20deg);
  /* Увеличили время до 6 секунд (блик идет 1.5с + 4.5с пауза) */
  animation: shimmer 6s infinite ease-in-out; 
}

@keyframes shimmer {
  0% { left: -150%; }
  25% { left: 150%; } /* Блик пролетает за 25% времени (1.5 сек) */
  100% { left: 150%; } /* Остальное время он просто "ждет" за пределами кнопки */
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--warm);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--warm);
  transition: all 0.3s var(--ease-out);
}

.btn-ghost:hover {
  background: var(--accent-soft);
}

/* === ГЛОБАЛЬНАЯ АНИМАЦИЯ (Fade-in) === */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in.stagger-1 { transition-delay: 0.1s; }
.fade-in.stagger-2 { transition-delay: 0.2s; }
.fade-in.stagger-3 { transition-delay: 0.3s; }
.fade-in.stagger-4 { transition-delay: 0.4s; }
.fade-in.stagger-5 { transition-delay: 0.5s; }
.fade-in.stagger-6 { transition-delay: 0.6s; }


/* === БЛОК 2: HERO === */
.section-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 60px); 
  padding-bottom: 80px;
  overflow: hidden;
  background-color: transparent;
}

.section-hero::before {
  content: '';
  position: absolute;
  top: 50%; right: -5%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(224, 199, 192, 0.15) 0%, rgba(249, 248, 246, 0) 70%);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0; 
  transition: opacity 1.5s var(--ease-out), filter 0.5s var(--ease-out);
}

.section-hero__inner {
  width: 100%;
  position: relative;
  z-index: 2;
}

.section-hero__content {
  /* РАСШИРИЛИ КОНТЕЙНЕР, ЧТОБЫ ВТОРАЯ СТРОКА ВЛЕЗЛА ЦЕЛИКОМ */
  max-width: 840px; 
  transition: all 0.5s var(--ease-out);
}

body.hero-focus-active .hero-canvas {
  filter: blur(6px);
  opacity: 0.4 !important;
}
body.hero-focus-active .section-hero__content > *:not(.hero-actions) {
  opacity: 0.3;
  filter: blur(2px);
  transform: scale(0.98) translateX(-10px);
}

.hero-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--warm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  margin-bottom: 20px; 
}

.hero-title {
  font-family: var(--font-head);
  /* Сделали шрифт чуууть меньше на случай очень узких экранов */
  font-size: clamp(32px, 4.5vw, 52px); 
  font-weight: 800;
  line-height: 1.15;
  color: var(--warm);
  margin-bottom: 32px;
  display: block; 
}

.hero-title em {
  font-weight: 300;
  font-style: italic;
}

.word {
  display: inline-block;
  opacity: 0;
  /* УМЕНЬШИЛИ ПРОБЕЛ, чтобы слова стояли плотнее */
  margin-right: 0.2em; 
  transform: translateY(24px);
  animation: wordReveal 0.8s var(--ease-out) forwards;
  animation-delay: calc(var(--word-index) * 0.1s + 0.2s);
}

.hero-title em.word,
.word:last-child {
  margin-right: 0;
}

@keyframes wordReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--warm);
  margin-bottom: 48px;
  max-width: 520px;
}

.hero-subtitle__highlight {
  font-weight: 700;
  display: block;
  margin-top: 16px;
}

.hero-promises {
  list-style: none;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-promises li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--warm);
  line-height: 1.5;
}

.hero-promises li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  background-color: var(--blush);
  border-radius: 50%;
}

.hero-promises li strong {
  font-weight: 700;
}

.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.hero-cta-main {
  transition: all 0.4s var(--ease-out);
}

.hero-cta-main:hover {
  box-shadow: 0 0 20px rgba(224, 199, 192, 0.4); 
}

@media (max-width: 768px) {
  .section-hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 60px);
  }
  .section-hero::before {
    display: none;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .btn-primary, .hero-actions .btn-ghost {
    width: 100%;
  }
}
/* =================================================================
   КВИЗ-ОВЕРЛЕЙ
   ================================================================= */

   .quiz-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(107, 94, 83, 0.4); /* На базе --warm */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out);
    padding: 20px;
  }
  
  .quiz-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  
  .quiz-card {
    width: 100%;
    max-width: 540px;
    overflow: hidden;
    transform: translateY(30px);
    transition: transform 0.6s var(--ease-out);
    position: relative;
  }
  
  .quiz-overlay.is-active .quiz-card {
    transform: translateY(0);
  }
  
  .quiz-overlay__close {
    position: absolute;
    top: 40px; right: 40px;
    font-size: 40px;
    color: var(--white);
    cursor: pointer;
    line-height: 1;
    z-index: 210;
  }
  
  .quiz-progress {
    margin-bottom: 40px;
  }
  
  .quiz-progress__bar {
    width: 100%; height: 4px;
    background: var(--border-soft);
    position: relative;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
  }
  
  /* Динамическая полоса прогресса */
  .quiz-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 25%;
    background: var(--blush);
    border-radius: var(--radius-pill);
    transition: width 0.6s var(--ease-out);
  }
  
  .quiz-progress__text {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }
  
  .quiz-step {
    display: none;
  }
  
  .quiz-step.active {
    display: block;
    animation: quizStepFade 0.4s var(--ease-out) forwards;
  }
  
  @keyframes quizStepFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .quiz-step__question {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 32px;
    line-height: 1.3;
    color: var(--warm);
  }
  
  .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .quiz-option {
    width: 100%;
    padding: 20px 24px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--warm);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    display: flex;
    flex-direction: column;
  }
  
  .quiz-option small {
    font-weight: 400;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 4px;
  }
  
  .quiz-option:hover {
    border-color: var(--blush);
    background: var(--accent-soft);
    transform: translateX(8px);
  }
  
  .quiz-scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--blush);
    box-shadow: 0 0 15px var(--blush);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
  }
  
  .quiz-scan-line.animating {
    animation: quizScan 0.6s linear forwards;
  }
  
  @keyframes quizScan {
    0% { top: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
  
  .quiz-result-box {
    background: var(--accent-soft);
    padding: 24px;
    border-radius: var(--radius-card);
    margin-bottom: 24px;
    border: 1px dashed var(--blush);
  }
  
  .quiz-final__note {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 32px;
    color: var(--warm);
  }
  
  @media (max-width: 768px) {
    .quiz-overlay__close { top: 20px; right: 20px; }
    .quiz-step__question { font-size: 20px; }
    .quiz-option { padding: 16px 20px; }
  }
  /* Выделение цветом БЕЗ курсива */
.text-warm-italic {
  color: #B8867B !important; /* Наш фирменный цвет */
  font-style: normal !important; /* Убираем наклон */
  font-weight: 700 !important; /* Оставляем жирным, как весь H1 */
  display: inline; /* Возвращаем стандартное поведение для ровных пробелов */
}

/* Общие правила для слов в заголовке, чтобы не было прыжков */
.hero-title .word {
  display: inline; 
  line-height: inherit;
}


/* ================================================================= */
/* 📁 ФАЙЛ: css/style.css                                            */
/* МЕСТО ВСТАВКИ: Замени весь старый CSS Блока 3 на этот             */
/* НАЧАЛО: БЛОК 3 — ВИДЕО ПРИВЕТСТВИЕ (ФОРМАТ REELS 9:16)            */
/* ================================================================= */
.section-video {
  padding: 120px 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.section-video__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 100px;
  align-items: center;
}

/* --- Медиа и обложка (Вертикальный формат) --- */
.section-video__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 9 / 16; /* Формат Reels/TikTok */
  max-width: 360px; /* Ограничиваем ширину на десктопе, чтобы не был гигантским */
  width: 100%;
  margin: 0 auto; /* Центрируем внутри колонки */
  box-shadow: var(--shadow-md);
  transform: translateZ(0);
}

.video-cover {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: none;
}

/* Премиальная заглушка, пока нет реального фото/видео */
.video-cover__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blush) 0%, var(--cream) 100%);
  transition: transform 0.8s var(--ease-out);
}
.video-cover__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.video-cover__teaser {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.video-cover:hover .video-cover__placeholder {
  transform: scale(1.03);
}

.video-cover:hover .video-cover__teaser {
  opacity: 1;
}

/* --- Кнопка Play --- */
.btn-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: rgba(249, 248, 246, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-radius: 50%;
  color: var(--warm);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.4s var(--ease-out);
  z-index: 10;
  cursor: none;
}

.btn-play svg {
  width: 24px; height: 24px;
  margin-left: 4px;
  transition: transform 0.3s var(--ease-out);
}

.video-cover:hover .btn-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--warm);
  color: var(--cream);
  box-shadow: 0 12px 24px rgba(107, 94, 83, 0.15);
}

.btn-play__ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--warm);
  animation: ring-pulse 2s infinite var(--ease-out);
  pointer-events: none;
}

@keyframes ring-pulse {
  0% { width: 100%; height: 100%; opacity: 0.6; }
  100% { width: 160%; height: 160%; opacity: 0; }
}

/* --- Текстовая часть --- */
.section-video__content {
  display: flex;
  flex-direction: column;
}

.section-video__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--warm);
  margin-bottom: 24px;
  line-height: 1.15;
}

.section-video__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--warm);
  margin-bottom: 32px;
  font-weight: 600;
}

.section-video__text p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--warm);
  margin-bottom: 40px;
}

.section-video__signature {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--warm);
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  text-transform: uppercase;
}

.section-video__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-video__bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--warm);
}

.section-video__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  background-color: var(--blush);
  border-radius: 50%;
}

.section-video__bullets li strong {
  font-weight: 700;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
  .section-video__inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}

@media (max-width: 768px) {
  /* ... остальное не трогаем ... */

  .section-video__inner {
    display: flex; /* Меняем grid на flex для мобилки */
    flex-direction: column-reverse; /* Переворачиваем: текст сверху, видео снизу */
    gap: 48px;
  }
  .section-video__media {
    aspect-ratio: 9 / 16; /* Строго вертикально для телефона */
    max-width: 280px; /* Эффект экрана телефона */
    margin: 0 auto;
    border-radius: 24px; /* Мягкие "айфоновские" углы */
  }
}
/* ================================================================= */
/* КОНЕЦ: БЛОК 3                                                     */
/* ================================================================= */





/* ================================================================= */
/* 📁 ФАЙЛ: css/style.css                                            */
/* МЕСТО ВСТАВКИ: В самый конец файла                                */
/* НАЧАЛО: БЛОК 4 — БОЛИ И РЕШЕНИЯ (PREMIUM SPOTLIGHT & PULSE)       */
/* ================================================================= */
.section-pain {
  padding: 120px 0;
  background-color: transparent;
  position: relative;
  z-index: 2;
}

.section-pain__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px auto;
}

.section-pain__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--warm);
  margin-bottom: 24px;
  line-height: 1.15;
}

.section-pain__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

.section-pain__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
}

/* --- Обертка перспективы --- */
.card-wide {
  perspective: 1500px;
  cursor: none;
}

/* --- Сама карточка --- */
.card-wide__inner {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden; /* Важно для обрезки динамического света */
  box-shadow: var(--shadow-sm);
  
  /* Магия 3D */
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s ease;
}

/* Динамический свет (Spotlight), который следует за мышью */
.card-wide__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(224, 199, 192, 0.15), 
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.card-wide:hover .card-wide__inner {
  border-color: var(--blush);
  box-shadow: var(--shadow-lg), 0 24px 48px rgba(107, 94, 83, 0.08);
}

.card-wide:hover .card-wide__glare {
  opacity: 1; /* Включаем свет при наведении */
}

/* Обертка контента, чтобы быть выше света */
.card-wide__content {
  position: relative;
  z-index: 1;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Заголовок карточки */
.card-wide__title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--warm);
  margin-bottom: 32px;
  transform: translateZ(40px);
}

/* Разделение на 2 колонки */
.card-wide__split {
  display: grid;
  grid-template-columns: 1fr 2px 1fr; /* Лево - Линия - Право */
  gap: 48px;
  align-items: center;
}

.card-wide__half {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Блок "Было" */
.card-wide__half--pain {
  transform: translateZ(10px);
}

.card-wide__half--pain p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 400;
}

/* --- Премиальный разделитель с пульсирующей точкой --- */
.card-wide__divider {
  position: relative;
  width: 1px;
  height: 100%;
  min-height: 160px;
  /* Линия растворяется к краям */
  background: linear-gradient(to bottom, transparent, var(--border-soft) 20%, var(--border-soft) 80%, transparent);
  transform: translateZ(20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-wide__dot {
  width: 8px;
  height: 8px;
  background-color: var(--blush);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--blush);
  animation: premium-pulse 3s infinite var(--ease-out);
}

@keyframes premium-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 199, 192, 0.6); transform: scale(0.9); }
  50% { box-shadow: 0 0 0 16px rgba(224, 199, 192, 0); transform: scale(1.2); }
  100% { box-shadow: 0 0 0 0 rgba(224, 199, 192, 0); transform: scale(0.9); }
}

/* Блок "Решение" */
.card-wide__half--solution {
  transform: translateZ(30px);
}

.card-wide__half--solution p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--warm);
  font-weight: 600;
}

/* --- Бейджи --- */
.card-wide__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.card-wide__label--active {
  color: var(--warm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Адаптив */
@media (max-width: 768px) {
  .section-pain { padding: 80px 0; }
  .section-pain__header { margin-bottom: 48px; }
  
  .card-wide { perspective: none; }
  .card-wide__inner { transform-style: flat; }
  .card-wide__content { padding: 32px 24px; }
  .card-wide__glare { display: none; /* Отключаем динамический свет на мобилках */ }
  
  .card-wide__split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .card-wide__divider {
    width: 100%;
    height: 1px;
    min-height: auto;
    background: linear-gradient(to right, transparent, var(--border-soft) 20%, var(--border-soft) 80%, transparent);
    padding: 24px 0;
  }
  
  .card-wide__title, .card-wide__half, .card-wide__divider {
    transform: none;
  }
}
/* ================================================================= */
/* КОНЕЦ: БЛОК 4                                                     */
/* ================================================================= */




/* ================================================================= */
/* 📁 ФАЙЛ: css/style.css                                            */
/* ЧТО ДЕЛАТЬ: ЗАМЕНИТЬ CSS БЛОКА 5 НА ЭТОТ                          */
/* ================================================================= */
.section-story {
  padding: 160px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.story-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.story-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.story-orb--1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, var(--blush) 0%, transparent 70%);
  filter: blur(80px);
  opacity: 0.5;
  top: 10%; left: -10%;
  animation: orb-float-1 35s infinite alternate ease-in-out;
}

.story-orb--2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(224, 199, 192, 0.8) 0%, transparent 70%);
  filter: blur(100px);
  opacity: 0.4;
  bottom: 0%; right: -5%;
  animation: orb-float-2 40s infinite alternate-reverse ease-in-out;
}

.story-orb--3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--blush) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.3;
  top: 40%; left: 40%;
  animation: orb-float-3 25s infinite alternate ease-in-out;
}

@keyframes orb-float-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10vw, 10vh) scale(1.1); } }
@keyframes orb-float-2 { 0% { transform: translate(0, 0) scale(1.1); } 100% { transform: translate(-10vw, -10vh) scale(0.9); } }
@keyframes orb-float-3 { 0% { transform: translate(0, 0); } 100% { transform: translate(10vw, -15vh); } }

/* --- Сетка блока --- */
.section-story__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 100px;
  align-items: start;
}

.section-story__visual {
  height: 100%;
}

.story-visual-sticky {
  position: sticky;
  top: 50vh; 
  transform: translateY(-50%); 
}

.story-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}

.story-card__frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius-card) - 8px);
  overflow: hidden;
  position: relative;
  background: var(--white);
}

/* --- Заглушка (увеличили высоту для мощного параллакса) --- */
.story-card__placeholder {
  position: absolute;
  top: -50%; left: -20%;
  width: 140%; height: 200%; /* Огромный запас для движения вверх-вниз */
  background: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
  will-change: transform;
}

.story-card__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(107, 94, 83, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 94, 83, 0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.8;
}

.story-card__badge {
  margin-top: -16px;
  position: relative;
  z-index: 2;
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--warm);
  box-shadow: var(--shadow-sm);
}

.section-story__content {
  padding-top: 0;
}

.section-story__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--warm);
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 1.15;
}

.section-story__subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 64px;
  line-height: 1.5;
  max-width: 90%;
}

.story-chapters {
  position: relative;
  display: flex;
  flex-direction: column;
}

.story-chapters::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 0; left: 16px;
  width: 1px;
  background: linear-gradient(to bottom, var(--blush) 0%, var(--border-soft) 20%, transparent 100%);
}

.story-chapter {
  position: relative;
  padding-left: 56px;
  margin-bottom: 12vh; 
  opacity: 0.15;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.story-chapter:last-child { margin-bottom: 8vh; }

.story-chapter.is-active {
  opacity: 1;
  transform: translateY(0);
}

.story-chapter__num {
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--blush);
  border: 1px solid var(--border-light);
  border-radius: 50%;
}

.story-chapter p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--warm);
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .section-story__inner { grid-template-columns: 1fr 1fr; gap: 60px; }
}

@media (max-width: 768px) {
  .section-story { padding: 80px 0; }
  .section-story__inner { grid-template-columns: 1fr; gap: 48px; }
  .story-visual-sticky { position: relative; top: 0; transform: none; max-width: 320px; margin: 0 auto; }
  .story-chapter { margin-bottom: 48px; } 
  .story-chapters::before { left: 12px; }
  .story-chapter__num { width: 24px; height: 24px; font-size: 9px; }
  .story-chapter { padding-left: 40px; }
}
/* ================================================================= */
/* КОНЕЦ: БЛОК 5                                                     */
/* ================================================================= */






/* ================================================================= */
/* 📁 ФАЙЛ: css/style.css                                            */
/* МЕСТО ВСТАВКИ: В самый конец файла                                */
/* НАЧАЛО: БЛОК 6 — УСЛУГИ И ПРАЙС                                   */
/* ================================================================= */
.section-services {
  padding: 120px 0;
  background-color: transparent;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.services-philosophy {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  font-size: 10px; font-weight: 700; color: var(--warm);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 64px; opacity: 0.8;
}
.services-philosophy__divider { width: 60px; height: 1px; background-color: var(--border-soft); }

.section-services__header { text-align: center; max-width: 720px; margin: 0 auto 100px auto; }
.section-services__title { font-family: var(--font-head); font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--warm); margin-bottom: 24px; line-height: 1.15; }
.section-services__subtitle { font-size: 16px; line-height: 1.6; color: var(--text-muted); }

.section-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 64px; }

.card-service { perspective: 1500px; cursor: none; display: flex; height: 100%; }

.card-service__inner {
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card);
  padding: 56px 48px; width: 100%; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transform-style: preserve-3d; will-change: transform, box-shadow, border-color;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s ease;
}

.card-service__glare {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 199, 192, 0.25), transparent 40%);
}

.card-service:hover .card-service__inner { border-color: var(--blush); box-shadow: var(--shadow-lg), 0 24px 48px rgba(107, 94, 83, 0.12); }
.card-service:hover .card-service__glare { opacity: 1; }

.card-service__content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

.card-service__inner--accent { background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%); border-color: var(--border-soft); }

.card-service__badge {
  display: inline-block; background: var(--warm); color: var(--cream); font-size: 10px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}

.card-service__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--warm); margin-bottom: 20px; line-height: 1.35; transform: translateZ(30px); }
.card-service__desc { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 48px; }

/* --- Прайс --- */
.card-service__price-list { display: flex; flex-direction: column; gap: 16px; transform: translateZ(10px); }

.price-item { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }

.price-item__name {
  font-family: var(--font-main); font-size: 15px; font-weight: 500; color: var(--warm);
  white-space: nowrap; /* На десктопе в одну строку */
}

.price-item__line {
  flex-grow: 1; margin: 0 12px; border-bottom: 1px dashed rgba(107, 94, 83, 0.15); transform: translateY(-4px);
}
.price-item__line--blush { border-color: rgba(224, 199, 192, 0.4); }
.price-item__line--accent { border-color: var(--blush); border-style: dotted; }

.price-item__value { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--warm); white-space: nowrap; letter-spacing: -0.02em; }

.price-item--main { margin-bottom: 8px; }
.price-item--main .price-item__name { font-weight: 700; color: var(--warm); font-size: 16px; }
.price-item--main .price-item__value { color: var(--blush); font-size: 16px; }

.price-item--accent { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--border-soft); }
.price-item--accent .price-item__name { color: var(--blush); }

.card-service__expandable { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out), opacity 0.3s ease; opacity: 0; }
.card-service__expandable-wrapper { overflow: hidden; display: flex; flex-direction: column; gap: 16px; }

.card-service:hover .card-service__expandable { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }

.card-service__hint {
  font-size: 9px; color: rgba(224, 199, 192, 0.7); text-transform: uppercase; letter-spacing: 0.15em;
  margin-top: auto; padding-top: 32px; transition: opacity 0.3s ease;
}
.card-service:hover .card-service__hint { opacity: 0; }

/* --- Плашка Бонуса --- */
.services-bonus { perspective: 1500px; cursor: none; display: flex; margin-top: 100px; }
.services-bonus__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--white);
  border-radius: var(--radius-card); padding: 64px 48px; width: 100%; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; border: 1px solid var(--border-soft);
  transform-style: preserve-3d; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s ease;
}

.services-bonus__inner::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); padding: 1px;
  background: repeating-linear-gradient(-45deg, var(--blush) 0%, var(--blush) 10px, transparent 10px, transparent 20px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; animation: architectural-dash-scroll 20s linear infinite; pointer-events: none;
}
@keyframes architectural-dash-scroll { to { background-position: 100% 100%; } }

.services-bonus__inner::after {
  content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(224, 199, 192, 0.15) 0%, transparent 80%);
  animation: bonus-breath 8s infinite alternate ease-in-out; pointer-events: none; z-index: 0;
}
@keyframes bonus-breath { 0% { opacity: 0.5; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }

.services-bonus__glare {
  position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 199, 192, 0.3), transparent 40%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1;
}

.services-bonus:hover .services-bonus__inner { border-color: var(--blush); box-shadow: var(--shadow-lg), 0 24px 48px rgba(107, 94, 83, 0.1); }
.services-bonus:hover .services-bonus__glare { opacity: 1; }

.services-bonus__text { position: relative; z-index: 2; font-size: 11px; font-weight: 700; color: var(--blush); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 24px; }
.services-bonus__divider { position: relative; z-index: 2; width: 1px; height: 48px; background-color: var(--blush); margin-bottom: 24px; opacity: 0.6; }
.services-bonus__title { position: relative; z-index: 2; font-family: var(--font-head); font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: var(--warm); margin-bottom: 48px; line-height: 1.4; max-width: 500px; transform: translateZ(20px); }
.services-bonus #btn-quiz-open-bonus { position: relative; z-index: 3; transform: translateZ(40px); }

/* --- Адаптив (Исправлен мобильный прайс) --- */
@media (max-width: 1024px) {
  .section-services__grid { grid-template-columns: 1fr; gap: 24px; }
  .services-philosophy { gap: 16px; font-size: 8px; }
}

@media (max-width: 768px) {
  .section-services { padding: 80px 0; }
  .section-services__header { margin-bottom: 64px; }
  .card-service__inner { padding: 40px 24px; }
  .card-service__title { font-size: 18px; margin-bottom: 16px; }
  .card-service__desc { margin-bottom: 32px; }
  
  /* Разрешаем перенос текста на мобилке, чтобы названия не ломали карточку */
  .price-item__name { white-space: normal; line-height: 1.3; max-width: 70%; padding-right: 8px; }
  .price-item__line { display: none; /* Убираем пунктир на мобилке, так как с переносом он выглядит грязно */ }
  .price-item { align-items: flex-start; } /* Цена выравнивается по верху названия */
  
  /* Прайс открыт, подсказка скрыта */
  .card-service__expandable { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
  .card-service__hint { display: none; } /* Скрыли надпись! */
  
  .services-bonus { perspective: none; cursor: default; margin-top: 64px; }
  .services-bonus__inner { padding: 48px 24px; transform-style: flat; border: 1px solid var(--blush); }
  .services-bonus__inner::before { animation-duration: 10s; }
  .services-bonus__title, .services-bonus #btn-quiz-open-bonus { transform: none; }
  .services-bonus__glare { display: none; }
  .services-bonus #btn-quiz-open-bonus { width: 100%; }
}
/* ================================================================= */
/* КОНЕЦ: БЛОК 6                                                     */
/* ================================================================= */







/* ================================================================= */
/* 📁 ФАЙЛ: css/style.css                                            */
/* МЕСТО ВСТАВКИ: В самый конец файла                                */
/* НАЧАЛО: БЛОК 7 — SOCIAL PROOF                                     */
/* ================================================================= */
.section-proof {
  padding: 120px 0;
  background-color: transparent;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* --- Главные цифры (Top) --- */
.proof-main-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
  margin-bottom: 100px;
}

.proof-stats__num {
  font-family: var(--font-head);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  color: var(--blush);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.proof-stats__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--warm);
  margin-bottom: 8px;
}

.proof-stats__desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 240px;
  margin: 0 auto;
}

/* --- Заголовок и бейдж --- */
.section-proof__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px auto;
}

.section-proof__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--warm);
  margin-bottom: 24px;
}

.proof-counter {
  display: inline-block;
  font-size: 14px;
  background: var(--blush);
  color: var(--white);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  margin-left: 12px;
  box-shadow: 0 4px 15px rgba(224, 199, 192, 0.4);
  animation: badge-pulse 2s infinite ease-in-out;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* --- Лента Marquee --- */
.proof-marquee-wrapper {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 80px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.proof-marquee {
  overflow: hidden;
  width: 100%;
  padding: 40px 0;
}

.proof-marquee__track {
  display: flex;
  gap: 32px;
  width: max-content;
  align-items: center;
  animation: marquee-scroll 120s linear infinite;
}

.proof-marquee:hover .proof-marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 16px)); }
}

.proof-review-card {
  width: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all 0.4s var(--ease-out);
  cursor: zoom-in;
}

.proof-review-card:hover {
  transform: scale(1.05) translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blush);
}

.proof-review-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Рейтинги площадок --- */
.platform-ratings {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-bottom: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.platform-item { text-align: center; }

.platform-item__val {
  font-size: 24px;
  font-weight: 800;
  color: var(--warm);
  margin-bottom: 4px;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: baseline;
}

.platform-item__val span:last-child {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.platform-item__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--blush);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Кнопки CTA --- */
.proof-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  background: transparent;
  color: var(--warm);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  transition: all 0.4s var(--ease-out);
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: var(--blush);
  background: var(--blush);
  color: var(--white);
}

/* --- Модальное окно (Lightbox) --- */
.proof-modal {
  position: fixed;
  inset: 0;
  background: rgba(30, 28, 26, 0.98);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(15px);
  cursor: zoom-out;
}

.proof-modal.is-open { display: flex; }

.proof-modal__content {
  max-width: 500px;
  width: 100%;
  transform: scale(0.9);
  transition: transform 0.5s var(--ease-out);
}

.proof-modal.is-open .proof-modal__content { transform: scale(1); }

.proof-modal__content img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}

.proof-modal__close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 40px;
  color: var(--white);
  cursor: pointer;
}

/* --- Адаптив --- */
@media (max-width: 768px) {
  .proof-main-stats { grid-template-columns: 1fr; gap: 40px; }
  .platform-ratings { gap: 32px; flex-wrap: wrap; }
  .proof-ctas { flex-direction: column; width: 100%; padding: 0 20px; }
  .proof-ctas > * { width: 100%; text-align: center; }
}
/* ================================================================= */
/* КОНЕЦ: БЛОК 7                                                     */
/* ================================================================= */








/* ======================================================================== */
/* 📁 ФАЙЛ: css/style.css                                                   */
/* МЕСТО ВСТАВКИ: В самый конец файла                                       */
/* НАЧАЛО: БЛОК 8 — ЛИД-МАГНИТ (С ЖИВОЙ ОБЛОЖКОЙ)                           */
/* ======================================================================== */

.section-lead {
  padding: 140px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: transparent;
}

/* Мягкий свет за книгой */
.lead-bg-glow {
  position: absolute;
  top: 50%;
  right: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(224, 199, 192, 0.25) 0%, transparent 60%);
  transform: translateY(-50%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: glow-pulse 8s infinite alternate ease-in-out;
}

@keyframes glow-pulse {
  0% { transform: translateY(-50%) scale(0.9); opacity: 0.7; }
  100% { transform: translateY(-50%) scale(1.1); opacity: 1; }
}

.section-lead__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* --- Контентная часть --- */
.lead-fomo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}

.lead-fomo__dot {
  width: 6px;
  height: 6px;
  background-color: var(--blush);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--blush);
  /* premium-pulse прописан в Блоке 4, он подхватится автоматически */
  animation: premium-pulse 2s infinite var(--ease-out);
}

.section-lead__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  color: var(--warm);
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 520px;
}

.section-lead__subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--warm);
  margin-bottom: 40px;
}

.section-lead__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--warm);
  margin-bottom: 24px;
  max-width: 480px;
}

.section-lead__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
  max-width: 480px;
}

.section-lead__bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.section-lead__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 1px;
  background-color: var(--blush);
}

.section-lead__bullets li strong {
  font-weight: 700;
  color: var(--warm);
}

.section-lead__signature {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  max-width: 480px;
  line-height: 1.6;
}

/* --- Визуал (CSS Мокап Гайда с левитацией) --- */
.section-lead__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.guide-levitation {
  animation: float-book 6s ease-in-out infinite;
}

@keyframes float-book {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.guide-mockup {
  position: relative;
  width: 320px;
  aspect-ratio: 1 / 1.41; /* Формат А4 */
  perspective: 1500px;
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(10deg);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: none;
}

.guide-mockup:hover {
  transform: rotateY(-5deg) rotateX(5deg) scale(1.05);
}

/* Тень под книгой, которая реагирует на левитацию */
.guide-mockup__shadow {
  position: absolute;
  bottom: -40px;
  left: 5%;
  width: 90%;
  height: 20px;
  background: var(--warm);
  filter: blur(25px);
  opacity: 0.15;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  animation: shadow-breathe 6s ease-in-out infinite;
}

@keyframes shadow-breathe {
  0% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.1; transform: scale(0.9); }
  100% { opacity: 0.2; transform: scale(1); }
}

.guide-mockup:hover .guide-mockup__shadow {
  opacity: 0.25;
}

/* Общие стили слоев (страниц) */
.guide-mockup__page {
  position: absolute;
  inset: 0;
  border-radius: 4px 16px 16px 4px;
  border: 1px solid var(--border-light);
  box-shadow: -10px 10px 30px rgba(107, 94, 83, 0.05);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s var(--ease-out);
  overflow: hidden;
  transform-origin: left center; /* Раскрытие от корешка */
}

/* Страницы позади */
.guide-mockup__page--back {
  transform: translateZ(-20px);
  background: rgba(249, 248, 246, 0.95);
}

.guide-mockup__page--mid {
  transform: translateZ(-10px);
  background: rgba(255, 255, 255, 0.98);
}

/* Эффект веера (Unboxing) при ховере */
.guide-mockup:hover .guide-mockup__page--back {
  transform: translateZ(-30px) rotateY(12deg);
}

.guide-mockup:hover .guide-mockup__page--mid {
  transform: translateZ(-15px) rotateY(6deg);
}

.guide-mockup:hover .guide-mockup__page--front {
  box-shadow: -20px 20px 50px rgba(107, 94, 83, 0.12);
}

/* Дизайн обложки */
.guide-mockup__page--front {
  transform: translateZ(0);
  background: var(--white);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  border-left: 6px solid var(--blush); /* Плотный корешок */
  background-image: linear-gradient(135deg, var(--white) 0%, rgba(224, 199, 192, 0.15) 100%);
}

.guide-mockup__logo {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  margin-bottom: auto;
}

.guide-mockup__cover-title {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 800;
  color: var(--warm);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.guide-mockup__cover-title em {
  display: block;
  font-weight: 300;
  font-style: italic;
  color: var(--blush);
  text-transform: lowercase;
  font-size: 42px;
  margin-top: -4px;
}

/* --- Активная визуализация внутри обложки --- */
.guide-mockup__active-art {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: auto;
  width: 100%;
  padding-top: 10px;
}

/* Базовые линии */
.g-anim-line {
  position: relative;
  width: 85%;
  height: 1px;
  background: var(--border-soft);
  overflow: hidden;
}

.g-anim-line--short { width: 60%; }
.g-anim-line--micro { width: 35%; }

/* Бегущий импульс (сканер) */
.g-anim-line::after {
  content: '';
  position: absolute;
  top: 0; left: -20px;
  width: 40px; height: 1px;
  background: var(--warm);
  box-shadow: 0 0 8px var(--warm);
  animation: scan-pulse 3s infinite ease-in-out;
}

/* Разная скорость и направление для живости */
.g-anim-line--short::after {
  animation-duration: 4s;
  animation-delay: 1s;
  animation-direction: reverse;
}

.g-anim-line--micro::after {
  animation-duration: 2.5s;
  animation-delay: 0.5s;
}

@keyframes scan-pulse {
  0% { left: -10%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Геометрический вращающийся узел (Crosshair) */
.g-anim-node {
  position: absolute;
  right: 15%;
  top: -10px;
  width: 32px;
  height: 32px;
  border: 1px dashed rgba(224, 199, 192, 0.8);
  border-radius: 50%;
  animation: rotate-node 12s linear infinite;
  pointer-events: none;
}

/* Центральная точка узла */
.g-anim-node::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 3px;
  background: var(--warm);
  border-radius: 50%;
}

/* Пересекающая ось */
.g-anim-node::after {
  content: '';
  position: absolute;
  top: 50%; left: -6px;
  width: 44px; height: 1px;
  background: rgba(224, 199, 192, 0.5);
  transform: translateY(-50%);
}

@keyframes rotate-node {
  100% { transform: rotate(360deg); }
}

.guide-mockup__badge {
  display: inline-block;
  padding: 8px 16px;
  background: var(--warm);
  color: var(--cream);
  font-size: 9px;
  border-radius: var(--radius-pill);
  width: fit-content;
  letter-spacing: 0.1em;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
  .section-lead__inner {
    grid-template-columns: 1fr;
    gap: 80px;
  }
  .section-lead__visual {
    grid-row: 1; /* Книга уходит наверх */
  }
  .lead-bg-glow {
    top: 20%; right: 50%; transform: translateX(50%);
  }
}

@media (max-width: 768px) {
  .section-lead { padding: 100px 0; }
  .section-lead__title { font-size: 28px; }
  .lead-fomo { font-size: 9px; padding: 8px 16px; margin-bottom: 24px; }
  
  .guide-mockup { width: 260px; transform: rotateY(-5deg) rotateX(5deg); }
  .guide-mockup:hover { transform: rotateY(0deg) rotateX(0deg) scale(1); } /* На тачпадах без сильного изгиба */
  
  .section-lead__action { width: 100%; }
  .section-lead__action .btn-primary { width: 100%; }
}

/* ======================================================================== */
/* КОНЕЦ: БЛОК 8                                                            */
/* ======================================================================== */











/* ======================================================================== */
/* 📁 ФАЙЛ: css/style.css                                                   */
/* МЕСТО ВСТАВКИ: В самый конец файла                                       */
/* НАЧАЛО: БЛОК 9 — FAQ (АККОРДЕОН С ЭФФЕКТАМИ DOF И PULSE)                 */
/* ======================================================================== */

.section-faq {
  padding: 140px 0;
  background-color: transparent;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.section-faq__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 100px auto;
}

.section-faq__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  color: var(--warm);
  line-height: 1.15;
}

.faq-accordion {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--border-soft);
}

.faq-item {
  position: relative;
  border: none;
  /* Плавный переход для эффекта DOF */
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out), background-color 0.4s var(--ease-out);
}

/* Эффект DOF (Depth of Field): Расфокус остальных ТОЛЬКО когда курсор точно на элементе */
.faq-accordion[data-allow-DOF]:has(.faq-item:hover) .faq-item:not(:hover) {
  opacity: 0.4;
  filter: blur(3px);
  /* pointer-events: none УДАЛЕН — именно он блокировал клики! */
}

/* Активный элемент выделяется фоном и убирает DOF */
.faq-item:hover, .faq-item.is-active {
  background-color: var(--white);
  border-radius: var(--radius-card);
}

.faq-item.is-active {
  box-shadow: var(--shadow-md);
  margin: 16px 0; /* Создаем воздух вокруг открытого */
  border-radius: var(--radius-card);
}

/* Кнопка-вопрос */
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 32px; /* Увеличили padding для комфорта */
  background: transparent;
  border: none;
  cursor: none; /* Кастомный курсор */
  text-align: left;
  outline: none;
  transition: padding 0.4s var(--ease-out);
}

.faq-item__text {
  font-family: var(--font-head);
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 700;
  color: var(--warm);
  padding-right: 48px;
  line-height: 1.3;
  transition: color 0.3s var(--ease-out);
}

/* Иконка Плюс -> Крестик */
.faq-item__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background-color: var(--blush);
  transition: background-color 0.3s var(--ease-out);
}

.faq-item__icon::before {
  top: 50%; left: 0;
  width: 100%; height: 1px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  top: 0; left: 50%;
  width: 1px; height: 100%;
  transform: translateX(-50%);
}

/* Состояния фокуса и ховера */
.faq-item__question:focus-visible .faq-item__text {
  color: var(--blush);
}

.faq-item:hover .faq-item__icon::before,
.faq-item:hover .faq-item__icon::after {
  background-color: var(--warm);
}

/* Магия плавного кинетического открытия (CSS Grid + Micro-Parallax) */
.faq-item__answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.faq-item__answer {
  overflow: hidden;
}

.faq-item__answer-inner {
  padding: 0 32px 48px 32px;
  padding-right: 120px; /* Чтобы текст не заходил под зону иконки крестика */
  opacity: 0;
  transform: translateY(-15px);
  /* Кинетическое раскрытие (текст поднимается быстрее) */
  transition: opacity 0.5s var(--ease-out), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- АКТИВНОЕ СОСТОЯНИЕ --- */
.faq-item.is-active .faq-item__answer-wrapper {
  grid-template-rows: 1fr;
}

.faq-item.is-active .faq-item__answer-inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s; /* Микро задержка для плавности */
}

.faq-item.is-active .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item.is-active .faq-item__icon::before,
.faq-item.is-active .faq-item__icon::after {
  background-color: var(--warm);
}

/* --- Разделители и эффект Pulse --- */
.faq-item__divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: transparent;
  margin: 0;
}

/* Тонкая базовая линия по умолчанию */
.faq-item:not(.is-active) .faq-item__divider {
  background-color: var(--border-soft);
  max-width: calc(100% - 64px); /* Учитываем padding */
  margin: 0 auto;
  transition: background-color 0.4s var(--ease-out);
}

.faq-item:hover:not(.is-active) .faq-item__divider {
  background-color: rgba(107, 94, 83, 0.2);
}

/* Сама линия импульса */
.divider-pulse {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--border-soft);
  opacity: 0;
}

/* Бегущий импульс при активации блока */
.faq-item.is-active .divider-pulse {
  animation: divider-scan-pulse 1.2s var(--ease-out) 0.3s forwards;
}

@keyframes divider-scan-pulse {
  0% { left: 0; width: 0; opacity: 1; background-color: var(--border-soft); }
  50% { left: 0; width: 100%; opacity: 1; background-color: var(--warm); box-shadow: 0 0 10px var(--warm); }
  99% { left: 100%; width: 0; opacity: 0; background-color: var(--border-soft); }
  100% { left: 100%; width: 0; opacity: 0; display: none; }
}

/* Скрываем базовую линию у активного, так как он выделен картой */
.faq-item.is-active .faq-item__divider {
  background-color: transparent;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
  .faq-item.is-active { margin: 8px 0; }
}

@media (max-width: 768px) {
  .section-faq { padding: 100px 0; }
  .section-faq__header { margin-bottom: 64px; }
  .faq-item__question { padding: 24px 20px; }
  .faq-item__answer-inner { padding: 0 20px 32px 20px; font-size: 14px; }
  .faq-accordion:hover .faq-item:not(:hover) { opacity: 1; filter: blur(0); } /* Отключаем DOF на таче */
  .faq-item:not(.is-active) .faq-item__divider { max-width: calc(100% - 40px); }
}

/* ======================================================================== */
/* КОНЕЦ: БЛОК 9                                                            */
/* ======================================================================== */









/* ======================================================================== */
/* 📁 ФАЙЛ: css/style.css                                                   */
/* МЕСТО ВСТАВКИ: В самый конец файла                                       */
/* НАЧАЛО: БЛОК 10 — КОНТАКТЫ И КАРТА                                       */
/* ======================================================================== */

.section-contacts {
  padding: 140px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.section-contacts__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 100px;
  align-items: center;
}

/* --- Контент (Текст и Кнопки) --- */
.section-contacts__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--warm);
  line-height: 1.15;
  margin-bottom: 24px;
}

.section-contacts__subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--warm);
  margin-bottom: 32px;
}

.section-contacts__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 48px;
  max-width: 480px;
}

/* Кликабельный адрес */
.contacts-info {
  margin-bottom: 48px;
}

.contacts-info__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 32px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  cursor: none; /* Кастомный курсор подхватит hover */
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.contacts-info__item:hover {
  border-color: var(--blush);
  box-shadow: var(--shadow-sm);
}

.contacts-info__label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.15em;
}

.contacts-info__val {
  font-size: 16px;
  font-weight: 600;
  color: var(--warm);
  line-height: 1.4;
  transition: opacity 0.3s ease;
}

.contacts-info__copy-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 248, 246, 0.95);
  color: var(--warm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all 0.3s var(--ease-out);
}

.contacts-info__item.is-copied .contacts-info__copy-msg {
  opacity: 1;
  transform: translateY(0);
}
.contacts-info__item.is-copied .contacts-info__val {
  opacity: 0;
}

/* Финальный триггер */
.contacts-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.contacts-trigger__line {
  width: 2px;
  height: 48px;
  background: linear-gradient(to bottom, var(--border-soft), var(--blush));
  margin-left: 24px;
}

.contacts-trigger__text {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--warm);
  font-style: italic;
}

.contacts-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap; /* Позволяет кнопкам переноситься, если не влезают */
}

/* Защита от кривого переноса текста ВНУТРИ кнопок */
.contacts-actions .btn-primary,
.contacts-actions .btn-ghost {
  white-space: nowrap;
}

/* --- Визуал (Карта GAZE) --- */
.section-contacts__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.map-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.map-frame:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.map-frame__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-card) - 8px);
  overflow: hidden;
  background: var(--cream);
}

/* Магия CSS-фильтров: Сливаем карту с палитрой сайта */
.map-iframe {
  width: 100%;
  height: 100%;
  filter: grayscale(100%) sepia(30%) contrast(0.9) opacity(0.8);
  transition: filter 0.6s var(--ease-out), transform 1s var(--ease-out);
  transform: scale(1);
}

.map-frame:hover .map-iframe {
  filter: grayscale(80%) sepia(20%) contrast(1) opacity(1);
  transform: scale(1.05); /* Плавный Zoom */
}

/* Архитектурный прицел (Crosshair) поверх карты */
.map-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Пропускает клики на карту */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-crosshair__x {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 199, 192, 0.4) 40%, rgba(224, 199, 192, 0.4) 60%, transparent);
}

.map-crosshair__y {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(0deg, transparent, rgba(224, 199, 192, 0.4) 40%, rgba(224, 199, 192, 0.4) 60%, transparent);
}

.map-crosshair__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--warm);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(107, 94, 83, 0.5);
}

.map-crosshair__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid var(--blush);
  border-radius: 50%;
  animation: radar-pulse 3s infinite var(--ease-out);
}

@keyframes radar-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Уголки чертежа (рамки) */
.map-frame__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--blush);
  pointer-events: none;
  z-index: 12;
}

.map-frame__corner--tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.map-frame__corner--tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.map-frame__corner--bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.map-frame__corner--br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

/* --- Адаптив --- */
@media (max-width: 1024px) {
  .section-contacts__inner {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .section-contacts__visual {
    grid-row: 1; /* Карта наверх на планшетах */
  }
}

@media (max-width: 768px) {
  .section-contacts { padding: 100px 0; }
  .section-contacts__title { font-size: 28px; }
  .contacts-actions { flex-direction: column; width: 100%; }
  .contacts-actions .btn-primary, .contacts-actions .btn-ghost { width: 100%; }
  
  .map-frame { padding: 8px; border-radius: 24px; }
  .map-frame__inner { border-radius: 16px; }
  .map-frame__corner { display: none; } /* Убираем уголки для экономии места на мобилке */
  .section-contacts__visual { aspect-ratio: 4/3; }
  
  .contacts-trigger__line { margin-left: 16px; height: 24px; }
}

/* ======================================================================== */
/* КОНЕЦ: БЛОК 10                                                           */
/* ======================================================================== */











/* ======================================================================== */
/* ОБНОВЛЕННЫЙ ПРЕМИАЛЬНЫЙ ПОДВАЛ (FOOTER)                                   */
/* ======================================================================== */

.footer-main {
  background-color: var(--warm);
  color: var(--cream);
  padding: 100px 0 60px;
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(249, 248, 246, 0.05);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(249, 248, 246, 0.1);
  margin-bottom: 40px;
}

.footer-col { flex: 1; }

/* Левая колонка */
.footer-brand-logo {
  height: 82px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-bottom: 32px;
  transition: opacity 0.3s var(--ease-out);
}

.footer-brand-mini {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  margin-bottom: 32px;
  color: var(--white);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.6;
  transition: all 0.3s var(--ease-out);
  width: fit-content;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--blush);
  transform: translateX(5px);
}

/* Центральная колонка (Философия) */
.footer-col--viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-blueprint-wrap {
  width: 160px;
  height: 80px;
  margin-bottom: 24px;
}

.footer-svg { width: 100%; height: 100%; overflow: visible; }

.footer-philosophy span {
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.4;
  display: block;
  margin-bottom: 12px;
}

.footer-philosophy__title {
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--white);
}

/* Правая колонка (Контакты) */
.footer-col--contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.footer-phone {
  font-size: 20px;
  color: var(--white);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.footer-addr {
  font-size: 13px;
  opacity: 0.5;
  margin-bottom: 24px;
  line-height: 1.5;
  max-width: 200px;
}

.footer-tg-btn {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  border-radius: 99px;
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s;
}

.footer-tg-btn:hover {
  background: var(--white);
  color: var(--warm);
}

/* Нижняя панель */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  opacity: 0.4;
}

.footer-dot { width: 3px; height: 3px; background: var(--blush); border-radius: 50%; }

.footer-copyright { font-size: 11px; opacity: 0.4; }

.footer-disclaimer {
  font-size: 10px;
  line-height: 1.6;
  opacity: 0.2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* --- SOFT DOZHYM (Стили сохранены, но улучшены) --- */
.soft-dozhym {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 100px);
  opacity: 0;
  z-index: 999;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s var(--ease-out);
  width: auto;
}

.soft-dozhym.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.soft-dozhym__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px 8px 8px 24px;
  border-radius: 100px;
  border: 1px solid rgba(107, 94, 83, 0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.soft-dozhym__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--warm);
  white-space: nowrap;
}

.soft-dozhym__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  padding: 0 12px;
  cursor: pointer;
}

/* Адаптив */
@media (max-width: 992px) {
  .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 60px; }
  .footer-col--contacts { align-items: center; text-align: center; }
  .footer-bottom { flex-direction: column; gap: 20px; }
}

@media (max-width: 768px) {
  .soft-dozhym { width: calc(100% - 32px); bottom: 20px; }
  .soft-dozhym__inner { padding: 16px; border-radius: 24px; flex-direction: column; gap: 12px; }
  .soft-dozhym__text { white-space: normal; text-align: center; }
  .soft-dozhym__btn { width: 100%; }
}

















/* ================================================================= */
/* 📁 ФАЙЛ: css/style.css                                            */
/* МЕСТО ВСТАВКИ: В конец файла css/style.css                        */
/* НАЧАЛО: ПОЛНЫЕ СТИЛИ ГАЙДА (ВКЛЮЧАЯ ИИ-АРХИТЕКТОР)                */
/* ================================================================= */

.page-guide { background: var(--cream); color: var(--warm); overflow-x: hidden; transition: background-color 0.8s var(--ease-out); }
.guide-main { display: flex; align-items: flex-start; justify-content: space-between; padding-top: calc(var(--header-h) + 60px); padding-bottom: 120px; max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.guide-sidebar { width: 80px; position: sticky; top: calc(var(--header-h) + 40px); flex-shrink: 0; }
.guide-content { flex-grow: 1; max-width: 640px; margin: 0 40px; }
.guide-right-margin { width: 80px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .guide-sidebar, .guide-right-margin { display: none; }
  .guide-content { margin: 0 auto; width: 100%; max-width: 680px; }
}

.reading-progress { position: fixed; bottom: 40px; right: 40px; width: 48px; height: 48px; z-index: 90; transform: rotate(-90deg); }
.reading-progress__svg { width: 100%; height: 100%; display: block; }
.reading-progress__bg { fill: transparent !important; stroke: var(--border-light); stroke-width: 2; }
.reading-progress__bar { fill: transparent !important; stroke: var(--blush); stroke-width: 2; transition: stroke-dashoffset 0.1s linear; }

.guide-toc { display: flex; flex-direction: column; gap: 24px; }
.guide-toc__link { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text-muted); opacity: 0.5; transition: all 0.3s var(--ease-out); text-decoration: none; text-transform: uppercase; }
.guide-toc__link.is-active { color: var(--warm); opacity: 1; }
.guide-toc__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blush); opacity: 0; transition: 0.3s; }
.guide-toc__link.is-active .guide-toc__dot { opacity: 1; }

.guide-hero { text-align: center; margin-bottom: 80px; }
.guide-badge { display: inline-block; padding: 6px 12px; border: 1px solid var(--blush); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; margin-bottom: 32px; letter-spacing: 0.1em; color: var(--warm); text-transform: uppercase; }
.guide-hero__title { font-family: var(--font-head); font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; color: var(--warm); }
.word-wrap { display: inline-block; opacity: 0; transform: translateY(20px); animation: wordReveal 0.6s var(--ease-out) forwards; animation-delay: calc(var(--i) * 0.08s); }
.word-wrap--accent { color: var(--blush); font-style: normal; }
@keyframes wordReveal { to { opacity: 1; transform: translateY(0); } }
.guide-hero__lead { font-family: var(--font-head); font-size: clamp(16px, 2vw, 18px); color: var(--text-muted); margin-bottom: 48px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.guide-blueprint { position: relative; width: 100%; max-width: 400px; height: 120px; margin: 40px auto 60px auto; overflow: visible; }
.guide-blueprint__svg { width: 100%; height: 100%; overflow: visible; }
.blueprint-axis { stroke: var(--border-light); stroke-width: 1; stroke-dasharray: 4 4; fill: none !important; }
.blueprint-line { stroke: var(--warm); stroke-width: 1.5; fill: none !important; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2.5s ease-out forwards 0.5s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.blueprint-node { position: absolute; width: 6px; height: 6px; margin-left: -3px; margin-top: -3px; border-radius: 50%; background: var(--white); border: 1px solid var(--blush); opacity: 0; animation: fadeNode 0.5s ease forwards; z-index: 2; }
.blueprint-node--active { background: var(--blush); opacity: 1 !important; animation: pulseActiveNode 2s infinite ease-out !important; }
@keyframes fadeNode { to { opacity: 1; } }
@keyframes pulseActiveNode { 0% { box-shadow: 0 0 0 0 rgba(224, 199, 192, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(224, 199, 192, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 199, 192, 0); } }

.blueprint-scanner { position: absolute; top: -15px; bottom: -15px; width: 1px; border-left: 1px dashed var(--blush); z-index: 1; animation: scanEye 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; }
.blueprint-scanner::after { content: ''; position: absolute; top: 50%; left: -3.5px; width: 6px; height: 6px; background: var(--blush); border-radius: 50%; transform: translateY(-50%); opacity: 0.6; }
@keyframes scanEye { 0% { left: 5%; } 100% { left: 95%; } }

.guide-author { display: inline-flex; align-items: center; gap: 16px; text-align: left; background: var(--white); padding: 12px 24px; border-radius: var(--radius-pill); border: 1px solid var(--border-light); transition: all 0.3s; }
.guide-author:hover { box-shadow: var(--shadow-sm); border-color: var(--blush); transform: translateY(-2px); }
.guide-author__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; color: var(--warm); }
.guide-author__name { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--warm); }
.guide-author__role, .guide-author__time { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

.guide-intro { margin-bottom: 100px; }
.guide-greeting { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 40px; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; text-transform: uppercase;}
.guide-text-block p, .guide-chapter p { font-family: var(--font-head); font-size: 16px; line-height: 1.8; margin-bottom: 32px; color: var(--warm); }
.has-dropcap::first-letter { float: left; font-family: var(--font-head); font-size: 64px; line-height: 0.8; font-weight: 800; color: var(--blush); margin-right: 12px; margin-top: 4px; animation: dropcapScale 0.6s var(--ease-out) backwards; }
@keyframes dropcapScale { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.pull-quote { position: relative; background: var(--accent-soft); border-left: 2px solid var(--blush); padding: 32px 40px; margin: 48px 0; font-family: var(--font-head); font-size: 15px; font-style: italic; font-weight: 500; line-height: 1.7; color: var(--warm); border-radius: 0 var(--radius-card) var(--radius-card) 0; width: 100%; }
@media (min-width: 1024px) { 
  .pull-quote { transform: translateX(40px); box-shadow: var(--shadow-sm); } 
  .guide-chapter--dark .pull-quote { transform: translateX(0); background: var(--white); }
}

.guide-chapter { position: relative; padding-top: 40px; margin-bottom: 80px; }
.guide-divider { position: relative; width: 100%; height: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 60px; opacity: 1 !important; }
.guide-divider__line { position: absolute; width: 100%; height: 1px; background: var(--border-light); transform: scaleX(0); transform-origin: center; transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1); }
.guide-divider__rhombus { position: relative; width: 8px; height: 8px; background: var(--cream); border: 1px solid var(--blush); transform: rotate(45deg) scale(0); transition: transform 0.6s var(--ease-out) 0.6s; z-index: 2; }
.guide-divider.visible .guide-divider__line { transform: scaleX(1); }
.guide-divider.visible .guide-divider__rhombus { transform: rotate(45deg) scale(1); }

.guide-h2 { font-family: var(--font-head); font-size: clamp(24px, 4vw, 32px); font-weight: 800; color: var(--warm); margin-bottom: 40px; line-height: 1.3; }
.guide-lead { font-family: var(--font-head); font-size: clamp(16px, 2vw, 18px); font-weight: 500; color: var(--warm); line-height: 1.6; margin-bottom: 60px; }
.guide-h3 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--warm); margin: 60px 0 30px; position: relative; padding-left: 16px; }
.guide-h3::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--blush); border-radius: var(--radius-pill); }

.guide-blueprint-box { position: relative; width: 100%; padding: 40px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-card); margin: 40px 0; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); z-index: 1; }
.guide-blueprint-box__grid { position: absolute; inset: 0; background-size: 20px 20px; background-image: linear-gradient(to right, var(--accent-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--accent-soft) 1px, transparent 1px); opacity: 0.5; }
.blueprint-label { position: absolute; bottom: 16px; left: 20px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; z-index: 3;}
.blueprint-svg { position: relative; width: 100%; max-width: 400px; z-index: 2; overflow: visible; }
.blueprint-path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1); fill: none !important; }
.blueprint-axis-line { stroke: var(--border-light); stroke-width: 1; stroke-dasharray: 4 4; fill: none !important; }
.blueprint-eye { stroke: var(--warm); stroke-width: 1.5; fill: none !important; }
.blueprint-vector { stroke: var(--blush); stroke-width: 1.5; fill: none !important; }
.blueprint-measure { stroke: var(--blush); stroke-width: 1; stroke-dasharray: 2 4; fill: none !important; }
.blueprint-bracket { stroke: var(--warm); stroke-width: 1; fill: none !important; }
.blueprint-iris { stroke: var(--warm); stroke-width: 0.5; fill: none !important; }
.blueprint-fade { opacity: 0; transition: opacity 1s ease-out; }
.guide-blueprint-box.visible .blueprint-path { stroke-dashoffset: 0; }
.guide-blueprint-box.visible .blueprint-fade { opacity: 1; transition-delay: 1.5s; }

.guide-chapter--dark { background-color: var(--accent-soft); padding: 60px 40px; border-radius: var(--radius-card); margin-top: 80px; }
@media (max-width: 768px) { .guide-chapter--dark { padding: 40px 20px; } }

.guide-concept-box { margin: 40px 0; padding: 60px 40px; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card); display: flex; justify-content: center; align-items: center; box-shadow: var(--shadow-sm); overflow: hidden; position: relative; }
.concept-weight { display: flex; gap: 80px; width: 100%; justify-content: center; }
.concept-weight__col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.concept-line { width: 100px; background: var(--warm); border-radius: 2px; }
.concept-line--heavy { height: 6px; opacity: 0.9; animation: pressDown 2s infinite alternate ease-in-out; }
.concept-line--light { height: 1px; opacity: 0.5; animation: floatUp 3s infinite alternate ease-in-out; }
@keyframes pressDown { 0% { transform: translateY(0); } 100% { transform: translateY(6px); } }
@keyframes floatUp { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); opacity: 0.8; } }
.concept-weight__col span, .concept-stain__col span { margin-top: 24px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; display: block; text-align: center; text-transform: uppercase; }

.concept-stain { display: flex; gap: 80px; width: 100%; justify-content: center; }
.concept-stain__col { display: flex; flex-direction: column; align-items: center; }
.concept-shape { width: 140px; height: 36px; border-radius: 40px; }
.concept-shape--bad { background: var(--warm); opacity: 0.9; box-shadow: 0 4px 12px rgba(107, 94, 83, 0.3); }
.concept-shape--good { background: linear-gradient(90deg, rgba(107,94,83,0), rgba(107,94,83,0.3) 50%, rgba(107,94,83,0)); border: 1px dashed rgba(107,94,83,0.3); }

.flag-cards { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.flag-card { position: relative; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 40px; overflow: hidden; box-shadow: var(--shadow-sm); transform-style: preserve-3d; }
.flag-card__inner { position: relative; z-index: 2; transform-style: preserve-3d; }
.flag-card__watermark { position: absolute; top: -20px; right: -10px; font-size: 120px; font-weight: 800; color: var(--accent-soft); line-height: 1; z-index: -1; pointer-events: none; user-select: none; }
.flag-card__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--warm); margin-bottom: 16px; }
.flag-card__text { font-family: var(--font-head); font-size: 15px; line-height: 1.7; color: var(--warm); margin: 0 !important; }
.flag-microtext { font-family: var(--font-head); font-size: 14px; color: var(--text-muted); }

.guide-chapter--final { padding-bottom: 60px; }
.ai-consult-box { background: var(--white); padding: 40px; border-radius: var(--radius-card); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); margin-top: 40px; }
.ai-textarea { width: 100%; height: 120px; padding: 16px; border: 1px solid var(--border-light); border-radius: 12px; font-family: var(--font-head); font-size: 15px; color: var(--warm); background: var(--cream); resize: vertical; margin-bottom: 24px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.ai-textarea:focus { border-color: var(--blush); box-shadow: 0 0 0 4px rgba(224, 199, 192, 0.2); }
.ai-btn { display: inline-block; background: var(--warm); color: var(--cream); border: none; padding: 16px 32px; border-radius: var(--radius-pill); font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s; width: 100%; }
.ai-btn:hover { opacity: 0.85; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: translateY(0); box-shadow: none; }
.ai-loading { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: center; display: none; letter-spacing: 0.1em; animation: pulseText 1.5s infinite; text-transform: uppercase; }
@keyframes pulseText { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.ai-result { margin-top: 32px; padding: 24px 32px; background: var(--accent-soft); border-left: 2px solid var(--blush); border-radius: 0 var(--radius-card) var(--radius-card) 0; font-family: var(--font-head); font-size: 15px; line-height: 1.7; color: var(--warm); display: none; }
.ai-result p { margin-bottom: 16px; }
.ai-result p:last-child { margin-bottom: 0; }

.guide-cta-card { text-align: center; padding: 60px 40px; margin-top: 60px; background: var(--white); border: 1px solid var(--blush); box-shadow: var(--shadow-md); border-radius: var(--radius-card); position: relative; overflow: hidden; }
.guide-cta-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(224, 199, 192, 0.15) 0%, transparent 70%); pointer-events: none; }
.guide-cta-card__title { font-family: var(--font-head); font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: var(--warm); margin-bottom: 16px; position: relative; z-index: 2; }
.guide-cta-card__text { font-family: var(--font-head); font-size: 16px; color: var(--text-muted); margin-bottom: 32px !important; position: relative; z-index: 2; }
.guide-cta-card__btn { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 16px 32px; background: var(--warm); color: var(--cream); font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-pill); text-decoration: none; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; z-index: 2; }
.guide-cta-card__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(107, 94, 83, 0.15); }
.guide-cta-card__footer { margin-top: 24px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; position: relative; z-index: 2; text-transform: uppercase; }

@media (max-width: 768px) {
  .flag-card { padding: 32px 24px; }
  .flag-card__watermark { font-size: 80px; top: -10px; right: -5px; }
  .ai-consult-box { padding: 24px; }
  .guide-cta-card { padding: 40px 20px; }
  .guide-cta-card__btn { width: 100%; text-align: center; }
  .pull-quote { padding: 24px; }
  .concept-weight, .concept-stain { gap: 30px; }
  .concept-line { width: 70px; }
  .concept-shape { width: 90px; height: 24px; }
  .guide-concept-box { padding: 40px 20px; }
}
/* ================================================================= */
/* КОНЕЦ: СТИЛЕЙ ГАЙДА                                               */
/* ================================================================= */









/* ======================================================================== */
/* 📁 ФАЙЛ: css/style.css                                                   */
/* НАЧАЛО: ПОЛНЫЕ СТИЛИ СТРАНИЦЫ СЕРТИФИКАТОВ                               */
/* ======================================================================== */

.text-warm-italic {
  color: #B8867B !important;
  font-style: normal !important;
  font-weight: 700 !important;
  display: inline;
}

.section-gift-hero { position: relative; min-height: 70vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; overflow: hidden; }
.gift-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.5s var(--ease-out); pointer-events: none; }
.section-gift-hero__inner { width: 100%; position: relative; z-index: 2; display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; }
.section-gift-hero__content { max-width: 680px; }
.hero-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--warm); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-pill); margin-bottom: 24px; background: var(--white); }
.gift-hero-title { 
  font-family: var(--font-head); 
  /* Увеличили диапазон: от 32px на малых до 62px на больших экранах */
  font-size: clamp(34px, 5.5vw, 62px); 
  font-weight: 800; 
  /* Чуть плотнее строки, чтобы крупные буквы смотрелись единым блоком */
  line-height: 1.05; 
  color: var(--warm); 
  margin-bottom: 28px; 
  letter-spacing: -0.02em; /* Легкий отрицательный трекинг для премиальности */
}
.gift-hero-subtitle { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin-bottom: 40px; max-width: 540px; }
.gift-hero-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.gift-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--warm); text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 8px; }
.gift-tag svg { color: var(--blush); flex-shrink: 0; }
.section-gift-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1200px; }

/* Эффект распаковки (Конверт) — ПРАВКА РАЗМЕРОВ */
.hero-cert-wrap { 
  position: relative; 
  width: 270px; 
  height: 380px; 
  margin: 0 auto; 
  animation: hero-cert-float 6s ease-in-out infinite; 
  transform-style: preserve-3d;
}

.hero-gift-sleeve { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  transform-style: preserve-3d; 
  transform: rotateY(-15deg) rotateX(10deg); 
}

.sleeve-cert-peek { 
  position: absolute; 
  top: -35px; left: 10px; right: 10px; bottom: 30px; 
  background: linear-gradient(135deg, var(--white) 0%, rgba(249, 248, 246, 0.9) 100%); 
  border: 1px solid var(--border-light); 
  border-radius: 12px; 
  box-shadow: -15px 20px 40px rgba(107, 94, 83, 0.08); 
  overflow: hidden; 
  transform: translateZ(-5px); 
}

.sleeve-cert-peek::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; }
.sleeve-cert-edge { position: absolute; top: 12px; right: 16px; font-size: 6px; color: var(--text-muted); opacity: 0.6; }

.sleeve-front { 
  position: absolute; 
  inset: 0; 
  background: var(--warm); 
  border-radius: var(--radius-card); 
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15); 
  overflow: hidden; 
  display: flex; flex-direction: column; justify-content: flex-end; 
  padding: 32px 24px; 
  transform: translateZ(10px); 
}

.sleeve-texture { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; }
.sleeve-glare { position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.15) 50%, transparent 55%); animation: hero-cert-glare-anim 6s ease-in-out infinite; pointer-events: none; z-index: 4; }
.sleeve-ribbon { position: absolute; top: 0; bottom: 0; left: 32px; width: 24px; background: rgba(224, 199, 192, 0.95); box-shadow: 2px 0 8px rgba(0,0,0,0.1), -2px 0 8px rgba(0,0,0,0.1); z-index: 2; }
.sleeve-seal { position: absolute; top: 50%; left: 24px; transform: translateY(-50%) translateZ(15px); width: 44px; height: 44px; background: var(--warm); border: 2px solid var(--blush); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 5; }
.sleeve-seal span { font-size: 10px; color: var(--blush); letter-spacing: 0.1em; font-weight: 700; }

.sleeve-content { position: relative; z-index: 3; margin-left: 56px; padding-right: 15px; }
.sleeve-brand { font-size: 7px; color: var(--cream); opacity: 0.6; margin-bottom: 8px; }

/* Уменьшили заголовок, чтобы не обрезался */
.sleeve-title { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--white); text-transform: uppercase; line-height: 1.1; }
.sleeve-title em { display: block; font-weight: 300; font-style: italic; color: var(--blush); text-transform: lowercase; font-size: 28px; margin-top: -2px; }

/* ОБЩАЯ БАЗА КАРТОЧЕК СЕРТИФИКАТОВ */
.cert-card-base { position: relative; width: 100%; aspect-ratio: 1 / 1.41; background: linear-gradient(135deg, var(--white) 0%, rgba(249, 248, 246, 0.8) 50%, var(--white) 100%); border: 1px solid var(--border-light); border-radius: var(--radius-card); display: flex; flex-direction: column; overflow: hidden; box-shadow: -15px 20px 40px rgba(107, 94, 83, 0.08); }
.cert-card-base::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; }
.cert-watermark { position: absolute; top: 50%; right: -30%; transform: translateY(-50%); width: 140%; opacity: 0.04; pointer-events: none; z-index: 1; color: var(--warm); }
.cert-abstract-art { position: absolute; top: 0; right: 0; width: 100%; height: auto; pointer-events: none; z-index: 1; }
.cert-serial { position: absolute; left: 16px; bottom: 40px; transform: rotate(-90deg); transform-origin: left bottom; font-family: var(--font-mono); font-size: 7px; color: var(--text-muted); letter-spacing: 0.25em; opacity: 0.6; z-index: 2; white-space: nowrap; }
.cert-stamp { position: absolute; top: 35%; right: 16px; width: 48px; height: 48px; border: 1px dashed rgba(224, 199, 192, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; animation: stamp-rotate 20s linear infinite; opacity: 0.7;}
.cert-stamp::after { content: ''; width: 36px; height: 36px; border: 1px solid rgba(224, 199, 192, 0.4); border-radius: 50%; }
.cert-stamp::before { content: ''; position: absolute; width: 4px; height: 4px; background: var(--blush); border-radius: 50%; top: -2px; }
@keyframes stamp-rotate { 100% { transform: rotate(360deg); } }

.cert-top-row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: auto; }
.cert-descriptor { font-family: var(--font-mono); font-size: 6px; color: var(--warm); opacity: 0.8; letter-spacing: 0.1em; text-transform: uppercase; text-align: right; max-width: 90px; line-height: 1.4; }
.cert-qr-block { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); position: relative; z-index: 3; width: 100%; }
.cert-qr { width: 32px; height: 32px; background: var(--white); border: 1px solid rgba(107, 94, 83, 0.2); padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; border-radius: 4px; flex-shrink: 0; }
.cert-qr span { background: var(--warm); opacity: 0.6; border-radius: 1px; }
.cert-qr span:nth-child(1), .cert-qr span:nth-child(3), .cert-qr span:nth-child(7) { background: transparent; border: 1.5px solid var(--warm); opacity: 0.8; }
.cert-qr span:nth-child(5) { opacity: 0.2; }
.cert-qr span:nth-child(9) { background: var(--blush); opacity: 0.9; }
.cert-contact-info { display: flex; flex-direction: column; gap: 2px; }
.cert-contact-info span { font-family: var(--font-mono); font-size: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.cert-contact-info strong { font-family: var(--font-head); font-size: 9px; color: var(--warm); font-weight: 700; letter-spacing: 0.05em; }

.hero-cert-shadow { position: absolute; bottom: -30px; left: 10%; width: 80%; height: 20px; background: var(--warm); filter: blur(25px); opacity: 0.15; border-radius: 50%; animation: hero-cert-shadow-anim 6s ease-in-out infinite; }
@keyframes hero-cert-float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
@keyframes hero-cert-shadow-anim { 0% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.1; transform: scale(0.85); } 100% { opacity: 0.2; transform: scale(1); } }
@keyframes hero-cert-glare-anim { 0% { transform: translateX(-20%) translateY(-20%); } 50% { transform: translateX(20%) translateY(20%); } 100% { transform: translateX(-20%) translateY(-20%); } }

/* КОНСТРУКТОР */
.section-builder { padding: 60px 0 120px 0; position: relative; z-index: 5; }
.builder-inner { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: start; }
.builder-form { display: flex; flex-direction: column; gap: 48px; }
.builder-section__title { font-size: 14px; font-weight: 700; color: var(--warm); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em; }

.builder-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-tab { padding: 12px 24px; background: transparent; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--warm); cursor: pointer; transition: all 0.3s var(--ease-out); }
.builder-tab:hover { border-color: var(--blush); background: var(--accent-soft); }
.builder-tab.is-active { background: var(--warm); color: var(--white); border-color: var(--warm); }

.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.builder-card { position: relative; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 24px; cursor: pointer; transition: all 0.4s var(--ease-out); display: flex; flex-direction: column; gap: 8px; }
.builder-card__sum { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--warm); }
.builder-card__desc { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.builder-card:hover { border-color: var(--blush); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.builder-card.is-active { border-color: var(--blush); box-shadow: 0 0 0 1px var(--blush), var(--shadow-md); background: rgba(224, 199, 192, 0.05); }
.builder-card.is-dimmed { opacity: 0.4; filter: grayscale(80%); }

.builder-meta { display: flex; flex-direction: column; gap: 16px; margin-top: -24px; }
.builder-phrase { font-size: 13px; font-style: italic; color: #B8867B; font-weight: 500; min-height: 20px; transition: opacity 0.3s; }
.builder-popularity { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.builder-popularity__bar { flex-grow: 1; height: 2px; background: var(--border-soft); position: relative; border-radius: 2px; }
.builder-popularity__fill { position: absolute; top: 0; left: 0; height: 100%; width: 65%; background: var(--blush); border-radius: 2px; }

.builder-inputs { display: flex; flex-direction: column; gap: 24px; }
.input-group { position: relative; width: 100%; }
.input-field { width: 100%; padding: 16px 0; font-family: var(--font-head); font-size: 16px; color: var(--warm); background: transparent; border: none; border-bottom: 1px solid var(--border-light); outline: none; transition: border-color 0.3s; }
.input-field::placeholder { color: transparent; }
.input-field:focus { border-color: var(--blush); }
.input-label { position: absolute; top: 16px; left: 0; font-size: 15px; color: var(--text-muted); pointer-events: none; transition: all 0.3s var(--ease-out); }
.input-field:focus + .input-label, .input-field:not(:placeholder-shown) + .input-label { transform: translateY(-24px); font-size: 11px; color: var(--blush); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.builder-footer { background: var(--white); padding: 32px; border-radius: var(--radius-card); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 24px; }
.builder-preview-msg { font-size: 13px; line-height: 1.6; color: var(--text-muted); background: var(--cream); padding: 16px; border-radius: 12px; border-left: 2px solid var(--blush); font-style: italic; }
.builder-preview-msg strong { color: var(--warm); font-weight: 600; }
.builder-cta { width: 100%; }

/* LIVE ПРЕВЬЮ СЕРТИФИКАТА */
.preview-sticky { position: sticky; top: calc(var(--header-h) + 40px); display: flex; flex-direction: column; align-items: center; }
.live-cert { padding: 40px 40px 40px 48px; box-shadow: var(--shadow-md); perspective: 1000px; transform-style: preserve-3d; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.live-cert__glare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.8), transparent 50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 4; mix-blend-mode: overlay; }
.live-cert:hover .live-cert__glare { opacity: 1; }
.live-cert__content { position: relative; z-index: 3; display: flex; flex-direction: column; height: 100%; }
.live-cert__brand { font-size: 10px; color: var(--text-muted); margin-bottom: auto; }
.live-cert .cert-descriptor { font-size: 8px; max-width: 120px; }
.live-cert__title { font-family: var(--font-head); font-size: 32px; font-weight: 800; color: var(--warm); text-transform: uppercase; line-height: 1.1; margin-bottom: 32px; }
.live-cert__title em { display: block; font-weight: 300; font-style: italic; color: var(--blush); text-transform: lowercase; font-size: 42px; margin-top: -8px; }
.live-cert__lines { display: flex; flex-direction: column; gap: 24px; margin-bottom: auto; }
.live-cert__field { display: flex; flex-direction: column; gap: 8px; width: 100%; position: relative; }
.live-cert__label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.live-cert__value-wrap { min-height: 26px; position: relative; border-bottom: 1px solid var(--border-soft); padding-bottom: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.live-cert__val-sum { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--warm); position: absolute; bottom: 4px; left: 0; transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out); }
.live-cert__val-name { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600; font-style: italic; color: var(--warm); position: relative; z-index: 2;}
.cursor-blink { display: inline-block; width: 2px; height: 16px; background: var(--blush); margin-left: 4px; animation: blink 1s step-end infinite; opacity: 0; position: relative; z-index: 2;}
.live-cert.is-typing .cursor-blink { opacity: 1; }
@keyframes blink { 50% { opacity: 0; } }
.live-cert .cert-qr { width: 40px; height: 40px; padding: 4px; }
.live-cert .cert-contact-info span { font-size: 8px; }
.live-cert .cert-contact-info strong { font-size: 11px; }
.preview-emotion { margin-top: 24px; font-size: 13px; font-style: italic; color: var(--text-muted); text-align: center; }

/* ЗАЧЕМ ДАРИТЬ СЕРТИФИКАТ */
.section-reasons { padding: 60px 0 120px 0; position: relative; z-index: 5; }
.reasons-header { text-align: center; margin-bottom: 64px; max-width: 640px; margin-left: auto; margin-right: auto; }
.reasons-title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--warm); margin-bottom: 16px; }
.reasons-subtitle { font-size: 16px; color: var(--text-muted); line-height: 1.6;}
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reason-card-wrap { perspective: 1200px; cursor: none; }
.reason-card { position: relative; padding: 40px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s var(--ease-out), border-color 0.4s ease; height: 100%; }
.reason-card__glare { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 199, 192, 0.25), transparent 40%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; }
.reason-card-wrap:hover .reason-card { border-color: var(--blush); box-shadow: var(--shadow-lg), 0 24px 48px rgba(107, 94, 83, 0.08); }
.reason-card-wrap:hover .reason-card__glare { opacity: 1; }
.reason-card__content { position: relative; z-index: 2; display: flex; flex-direction: column; transform: translateZ(20px); }
.reason-icon { width: 56px; height: 56px; margin-bottom: 32px; overflow: visible; }
.reason-icon * { fill: none; stroke: var(--warm); stroke-width: 0.75px; stroke-dasharray: 400; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: round; }
.reason-icon .accent-node { fill: var(--blush); stroke: none; stroke-dasharray: none; }
.reason-icon .accent-stroke { stroke: var(--blush); stroke-width: 0.5px; }
.reason-card-wrap:hover .reason-icon * { animation: draw-blueprint 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes draw-blueprint { 0% { stroke-dashoffset: 400; } 100% { stroke-dashoffset: 0; } }
.reason-card__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--warm); margin-bottom: 16px; line-height: 1.3; }
.reason-card__text { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* КАК ЭТО РАБОТАЕТ + CTA */
.section-steps { padding: 60px 0 120px 0; position: relative; z-index: 5; }
.steps-header { text-align: center; margin-bottom: 80px; }
.steps-title { font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--warm); }
.steps-timeline { position: relative; max-width: 540px; margin: 0 auto; padding-left: 40px; }
.steps-line { position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: var(--border-soft); }
.steps-line-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--blush); transition: height 0.1s linear; }
.step-item { position: relative; margin-bottom: 48px; }
.step-item:last-child { margin-bottom: 0; }
.step-node { position: absolute; left: -40px; top: 0; width: 40px; display: flex; justify-content: center; background: var(--cream); padding: 8px 0; z-index: 2; }
.step-icon-check svg { width: 16px; height: 16px; stroke: var(--blush); }
.step-icon-typing { display: flex; gap: 4px; align-items: center; height: 16px; padding: 0 4px;}
.step-icon-typing span { width: 5px; height: 5px; background: var(--blush); border-radius: 50%; animation: tg-bounce 1.4s infinite ease-in-out both; }
.step-icon-typing span:nth-child(1) { animation-delay: -0.32s; }
.step-icon-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes tg-bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.4;} 40% { transform: scale(1); opacity: 1;} }
.step-content { background: var(--white); padding: 24px 32px; border-radius: 20px 20px 20px 4px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.step-content:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.step-content::before { content: ''; position: absolute; bottom: 24px; left: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--border-light); }
.step-content::after { content: ''; position: absolute; bottom: 24px; left: -7px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--white); }
.step-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.1em; display: flex; justify-content: space-between; align-items: center;}
.step-meta-status { color: var(--blush); font-style: italic; text-transform: lowercase;}
.step-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--warm); margin-bottom: 8px; }
.step-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0;}
.step-risk-free { text-align: center; font-style: italic; color: var(--text-muted); font-size: 14px; margin: 64px auto; max-width: 400px; padding: 16px; background: rgba(249,248,246, 0.5); border-radius: var(--radius-pill); border: 1px dashed var(--border-soft);}

.gift-cta-wrap { max-width: 640px; margin: 0 auto; perspective: 1200px; cursor: none; animation: float-soft 6s ease-in-out infinite; }
@keyframes float-soft { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.gift-cta-card { text-align: center; padding: 64px 48px; background: var(--white); border: 1px solid var(--border-light); box-shadow: var(--shadow-md); border-radius: var(--radius-card); position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s var(--ease-out), border-color 0.4s ease; }
.gift-cta-glare { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 199, 192, 0.25), transparent 40%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; }
.gift-cta-wrap:hover .gift-cta-card { border-color: var(--blush); box-shadow: var(--shadow-lg), 0 24px 48px rgba(107, 94, 83, 0.08); }
.gift-cta-wrap:hover .gift-cta-glare { opacity: 1; }
.gift-cta-content { position: relative; z-index: 2; transform: translateZ(20px); }
.gift-cta-title { font-family: var(--font-head); font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; color: var(--warm); margin-bottom: 40px; line-height: 1.3;}
.gift-cta-btn { width: 100%; display: flex; justify-content: center; padding: 18px 32px; font-size: 13px;}
.gift-cta-footer { margin-top: 24px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* Адаптив страницы сертификатов */
@media (max-width: 1024px) {
  .section-gift-hero__inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .hero-cert-wrap { max-width: 260px; margin: 0 auto; }
  .builder-inner { grid-template-columns: 1fr; gap: 60px; }
  .preview-sticky { position: relative; top: 0; align-items: center; }
  .live-cert { max-width: 400px; }
  .reasons-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ======================================================================== */
/* ФИНАЛЬНЫЙ ФИКС МОБИЛЬНОЙ ВЕРСИИ (БЕЗ ОШИБОК)                             */
/* ======================================================================== */

@media (max-width: 768px) {
  /* 1. HERO СЕКЦИЯ (ИСПРАВЛЕННЫЙ КОНВЕРТ И ЗАГОЛОВОК) */
  .section-gift-hero { 
    padding-top: 100px !important; 
    padding-bottom: 40px !important; 
    min-height: auto !important; 
  }
  
  .section-gift-hero__inner { 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 35px !important;
    width: 100% !important;
    padding: 0 20px !important;
  }

  .gift-hero-title {
    font-size: 36px !important; 
    line-height: 1.05 !important; 
    letter-spacing: -0.03em !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .text-warm-italic {
    font-size: 1.1em !important;
    font-style: normal !important;
    display: inline-block !important;
  }

  .gift-hero-subtitle { 
    font-size: 14px !important; 
    max-width: 100% !important; 
    margin-bottom: 24px !important; 
  }

  .gift-hero-tags { 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* ГАБАРИТЫ КОНВЕРТА: увеличили, чтобы текст влез */
  .hero-cert-wrap { 
    width: 260px !important; 
    height: 360px !important;
    margin: 0 auto !important;
  }

  /* ТЕКСТ ВНУТРИ КОНВЕРТА: точный фикс позиций */
  .sleeve-content { 
    margin-left: 55px !important; /* Отодвинули от розовой ленты */
    padding-right: 15px !important;
    text-align: left !important;
    bottom: 40px !important; /* Чуть приподняли */
  }

  .sleeve-title { 
    font-size: 18px !important; 
    line-height: 1.1 !important;
  }
  
  .sleeve-title em { 
    font-size: 24px !important; 
    display: block !important;
  }

  /* 2. КОНСТРУКТОР (СЕТКИ) */
  .builder-inner { padding: 0 20px !important; }
  .builder-grid { grid-template-columns: 1fr !important; }

  /* 3. ОБНОВЛЕННЫЙ МАКСИМАЛЬНЫЙ СЕРТИФИКАТ (ВКЛАДЫШ ВНИЗУ) */
  .live-cert { 
    width: 360px !important;      
    height: 510px !important;     
    max-width: 94vw !important;   
    margin: 40px auto !important; 
    padding: 35px 35px 40px 40px !important; 
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(107, 94, 83, 0.15) !important;
    transform: none !important; 
    background: #fff !important;
    overflow: hidden !important;
  }

  .live-cert__title { 
    font-size: 26px !important; 
    margin-bottom: 20px !important; 
    line-height: 1 !important;
    text-align: left !important;
  }
  
  .live-cert__title em { 
    font-size: 34px !important; 
    margin-top: -4px !important; 
    display: block !important;
    opacity: 0.9;
  }

  .live-cert__lines { 
    gap: 25px !important; 
    margin-bottom: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .live-cert__field { 
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; 
    align-items: flex-start !important;
  }

  .live-cert__label { 
    font-size: 10px !important; 
    letter-spacing: 0.15em !important;
  }

  .live-cert__value-wrap { 
    width: 100% !important;
    border-bottom: 1px solid rgba(107, 94, 83, 0.1) !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding-bottom: 4px !important;
  }

  .live-cert__val-name { 
    font-size: 20px !important; 
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--warm) !important;
  }

  .live-cert__val-sum { 
    font-size: 24px !important; 
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--warm) !important;
    font-family: var(--font-mono) !important;
  }

  .cert-qr-block {
    margin-top: auto !important;
    padding-top: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .cert-qr { 
    width: 48px !important; 
    height: 48px !important; 
    padding: 6px !important;
    border: 1px solid rgba(107, 94, 83, 0.1) !important;
    border-radius: 8px !important;
  }

} /* Конец медиа-запроса */


/* ======================================================================== */
/* КОНЕЦ: ПОЛНЫЕ СТИЛИ СТРАНИЦЫ СЕРТИФИКАТОВ                                */
/* ======================================================================== */








/* ================================================================= */
/* НАЧАЛО: СТРАНИЦА БЛОГА (INDEX.HTML)                               */
/* ================================================================= */

/* === БЛОК 1: HERO БЛОГА === */
.section-blog-hero { padding-top: calc(var(--header-h) + 100px); padding-bottom: 60px; position: relative; z-index: 2; }
.section-blog-hero__inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 860px; }
.hero-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--warm); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-pill); margin-bottom: 24px; background: var(--white); }
.blog-hero__title { font-family: var(--font-head); font-size: clamp(36px, 6vw, 64px); font-weight: 800; color: var(--warm); line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.02em; }
.typing-wrapper { color: var(--blush); font-style: italic; font-weight: 300; white-space: nowrap; }
.typing-cursor { display: inline-block; font-family: var(--font-mono); font-weight: 400; color: var(--warm); margin-left: 4px; animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.blog-hero__subtitle { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin-bottom: 48px; max-width: 680px; }

.blog-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.blog-tab { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--warm); text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 24px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); transition: all 0.3s var(--ease-out); box-shadow: var(--shadow-sm); }
.blog-tab:hover { border-color: var(--blush); transform: translateY(-2px); }
.blog-tab.is-active { background: var(--warm); color: var(--white); border-color: var(--warm); }

/* === БЛОК 2: СЕТКА СТАТЕЙ === */
.section-blog-grid { padding-bottom: 60px; position: relative; z-index: 2; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); opacity: 1; transform: translateY(0); margin-bottom: 64px;}
.blog-grid.is-filtering { opacity: 0; transform: translateY(10px); }

.blog-card { display: flex; flex-direction: column; text-decoration: none; outline: none; }
.blog-card.is-hidden { display: none; }
.blog-card.is-featured { grid-column: span 2; }

.blog-card__media {
  position: relative; width: 100%; aspect-ratio: 4/3; border-radius: calc(var(--radius-card) - 4px);
  overflow: hidden; margin-bottom: 24px; background: var(--white);
  transition: box-shadow 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
  border: 1px solid var(--border-light);
}
.blog-card.is-featured .blog-card__media { aspect-ratio: 16/9; }
.blog-card:hover .blog-card__media { box-shadow: var(--shadow-md); border-color: var(--blush); }

/* ПРЕМИАЛЬНЫЙ АРТ ВМЕСТО ФОТО */
.gaze-cover { position: absolute; inset: 0; background: var(--cream); display: flex; align-items: center; justify-content: center; transition: background-color 0.6s var(--ease-out); overflow: hidden; }
.gaze-cover::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--border-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; z-index: 1; transition: opacity 0.6s, transform 0.6s; }
.blog-card:hover .gaze-cover { background: var(--white); }
.blog-card:hover .gaze-cover::before { opacity: 0.2; transform: scale(1.05); }
.gaze-cover__art { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* АРТ СТИЛИ КАРТОЧЕК */
.art-blueprint { width: 160px; height: 160px; position: relative; display: flex; align-items: center; justify-content: center; }
.art-blueprint__ring1 { position: absolute; inset: 10px; border: 1px dashed var(--border-light); border-radius: 50%; transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.art-blueprint__ring2 { position: absolute; inset: 30px; border: 1px solid var(--border-soft); border-radius: 50%; transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.art-blueprint__cross { position: absolute; width: 100%; height: 1px; background: var(--border-light); transition: all 0.8s; }
.art-blueprint__cross--v { transform: rotate(90deg); }
.art-blueprint__core { width: 6px; height: 6px; background: var(--warm); border-radius: 50%; z-index: 2; transition: all 0.5s; opacity: 0.5; }
.blog-card:hover .art-blueprint__ring1 { transform: rotate(90deg) scale(1.15); border-color: var(--blush); }
.blog-card:hover .art-blueprint__ring2 { transform: rotate(-60deg) scale(0.85); border-color: var(--warm); }
.blog-card:hover .art-blueprint__cross { background: var(--blush); width: 120%; }
.blog-card:hover .art-blueprint__core { opacity: 1; box-shadow: 0 0 20px var(--blush); transform: scale(2); }

.art-orb-wrapper { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.art-orb { position: absolute; width: 100px; height: 100px; border-radius: 50%; filter: blur(20px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.art-orb--1 { background: var(--warm); opacity: 0.1; transform: translate(-15px, -15px); }
.art-orb--2 { background: var(--blush); opacity: 0.2; transform: translate(15px, 15px); }
.art-orb-glass { position: absolute; inset: 25px; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; backdrop-filter: blur(2px); transition: all 0.8s; box-shadow: inset 0 0 20px rgba(255,255,255,0.2); }
.blog-card:hover .art-orb--1 { transform: translate(20px, 20px) scale(1.3); opacity: 0.2; background: var(--blush); }
.blog-card:hover .art-orb--2 { transform: translate(-20px, -20px) scale(1.3); opacity: 0.4; }
.blog-card:hover .art-orb-glass { inset: 15px; border-color: var(--blush); box-shadow: 0 10px 30px rgba(224, 199, 192, 0.2); }

.art-axis { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center;}
.art-axis__grid { position: absolute; inset: 0; border: 1px solid var(--border-light); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.art-axis__line { position: absolute; background: var(--border-light); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.art-axis__line--x { width: 140%; height: 1px; transform: rotate(-10deg); }
.art-axis__line--y { height: 140%; width: 1px; }
.art-axis__point { position: absolute; width: 6px; height: 6px; background: var(--border-light); border-radius: 50%; transition: all 0.6s; z-index: 2; }
.art-axis__point--1 { top: 35%; left: 15%; }
.art-axis__point--2 { bottom: 25%; right: 15%; }
.blog-card:hover .art-axis__grid { transform: scale(0.8) rotate(45deg); border-color: var(--blush); border-radius: 30px; }
.blog-card:hover .art-axis__line--x { background: var(--blush); transform: rotate(15deg) scale(1.1); }
.blog-card:hover .art-axis__line--y { background: var(--warm); }
.blog-card:hover .art-axis__point { background: var(--warm); box-shadow: 0 0 12px var(--blush); }
.blog-card:hover .art-axis__point--1 { top: 20%; left: 20%; transform: scale(1.5); }
.blog-card:hover .art-axis__point--2 { bottom: 20%; right: 20%; transform: scale(1.5); }

.art-drop { position: relative; width: 100px; height: 100px; border: 1px solid var(--border-light); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; }
.art-drop::before { content: ''; position: absolute; inset: 15px; border: 1px dashed var(--border-light); border-radius: 50%; transition: all 0.8s; }
.art-drop__core { width: 30px; height: 30px; background: var(--blush); border-radius: 50%; filter: blur(6px); opacity: 0.4; transition: all 0.8s; }
.blog-card:hover .art-drop { border-radius: 50%; transform: scale(1.3); border-color: var(--blush); background: rgba(224, 199, 192, 0.05); }
.blog-card:hover .art-drop::before { inset: -12px; transform: rotate(180deg); border-color: var(--warm); }
.blog-card:hover .art-drop__core { filter: blur(0); opacity: 1; background: var(--warm); transform: scale(0.4); }

.art-pro { position: relative; font-family: var(--font-head); font-size: 64px; font-weight: 800; color: transparent; -webkit-text-stroke: 1px var(--border-light); transition: all 0.6s; letter-spacing: 0.05em;}
.art-pro::before { content: 'PRO'; position: absolute; left: 0; top: 0; color: var(--warm); -webkit-text-stroke: 0; width: 0; overflow: hidden; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); border-right: 2px solid transparent; }
.blog-card:hover .art-pro { -webkit-text-stroke: 1px rgba(224, 199, 192, 0.2); transform: scale(1.1) translateX(8px); }
.blog-card:hover .art-pro::before { width: 100%; border-color: var(--blush); }

.art-arch { position: relative; width: 120px; height: 120px; }
.art-arch__curve { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid var(--border-light); border-right: 1px solid var(--border-light); border-radius: 0 100% 0 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: bottom left; }
.art-arch__ray { position: absolute; bottom: 0; left: 0; width: 130%; height: 1px; background: var(--border-light); transform-origin: left center; transform: rotate(-25deg); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.art-arch__measure { position: absolute; bottom: 15px; left: 40px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); transition: all 0.8s; opacity: 0.5; }
.blog-card:hover .art-arch__curve { border-color: var(--warm); transform: scale(1.15); border-width: 1.5px; }
.blog-card:hover .art-arch__ray { background: var(--blush); transform: rotate(-45deg); width: 150%; }
.blog-card:hover .art-arch__measure { color: var(--warm); transform: translate(15px, -15px); opacity: 1; }

/* Текст карточки */
.blog-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.blog-card__category { color: var(--warm); font-weight: 700; background: var(--white); padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.blog-card__date { color: var(--text-muted); }
.blog-card__title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--warm); line-height: 1.35; margin-bottom: 12px; display: inline-block; position: relative; }
.blog-card.is-featured .blog-card__title { font-size: 28px; }
.blog-card__title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1.5px; background-color: var(--blush); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.blog-card:hover .blog-card__title::after { transform: scaleX(1); }
.blog-card__desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Кнопка "Смотреть еще" */
.blog-load-more { text-align: center; margin-top: 24px; transition: opacity 0.4s; }
.blog-load-more.is-hidden { display: none; }
.btn-load-more svg { width: 16px; height: 16px; margin-left: 8px; transition: transform 0.3s; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.btn-load-more:hover svg { transform: translateY(4px); }

/* === БЛОК 3: CTA ПОДПИСКА === */
.section-blog-cta { padding: 60px 0 140px; position: relative; z-index: 2; }
.blog-cta-wrapper { perspective: 1200px; max-width: 760px; margin: 0 auto; position: relative; }
.blog-cta-bg-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(224, 199, 192, 0.25) 0%, transparent 70%); filter: blur(40px); z-index: -1; animation: glow-pulse-cta 6s infinite alternate ease-in-out; pointer-events: none;}
@keyframes glow-pulse-cta { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
.blog-cta-card { position: relative; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 80px 60px; text-align: center; overflow: hidden; transform-style: preserve-3d; transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease; box-shadow: var(--shadow-sm); }
.blog-cta-glare { position: absolute; inset: 0; background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(224, 199, 192, 0.2), transparent 40%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; }
.blog-cta-wrapper:hover .blog-cta-card { border-color: var(--blush); box-shadow: var(--shadow-lg), 0 24px 60px rgba(107, 94, 83, 0.08); }
.blog-cta-wrapper:hover .blog-cta-glare { opacity: 1; }
.blog-cta-content { position: relative; z-index: 2; transform: translateZ(30px); display: flex; flex-direction: column; align-items: center; }

.tg-notification { width: 56px; height: 56px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; position: relative; animation: float-icon 4s ease-in-out infinite; box-shadow: var(--shadow-sm); }
@keyframes float-icon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.tg-notification svg { width: 24px; height: 24px; fill: none; stroke: var(--warm); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: translateX(-1px) translateY(1px); }
.tg-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: #E45E5E; color: white; font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 2px 8px rgba(228, 94, 94, 0.4); animation: pulse-badge 2s infinite; }
@keyframes pulse-badge { 0% { box-shadow: 0 0 0 0 rgba(228, 94, 94, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(228, 94, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(228, 94, 94, 0); } }

.blog-cta-title { font-family: var(--font-head); font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--warm); margin-bottom: 20px; line-height: 1.2; max-width: 500px; }
.blog-cta-desc { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin-bottom: 40px; max-width: 500px; }
.blog-cta-btn { font-size: 14px; padding: 18px 40px; }

/* === АДАПТИВ БЛОГА === */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .blog-card.is-featured { grid-column: span 2; }
}

@media (max-width: 768px) {
  .section-blog-hero { padding-top: calc(var(--header-h) + 60px); }
  .blog-hero__subtitle { font-size: 14px; }
  .blog-tabs { gap: 8px; }
  .blog-tab { padding: 10px 18px; font-size: 10px; }
  
  .blog-grid { grid-template-columns: 1fr; gap: 48px; }
  .blog-card.is-featured { grid-column: span 1; }
  .blog-card.is-featured .blog-card__media { aspect-ratio: 4/3; }
  .blog-card.is-featured .blog-card__title { font-size: 22px; }
  
  .blog-cta-card { padding: 48px 24px; transform-style: flat; }
  .blog-cta-content { transform: none; }
  .blog-cta-wrapper:hover .blog-cta-card { transform: none; box-shadow: var(--shadow-md); }
  .blog-cta-glare { display: none; }
  .blog-cta-btn, .btn-load-more { width: 100%; display: flex; justify-content: center; }
}
/* ================================================================= */
/* КОНЕЦ: СТРАНИЦА БЛОГА (INDEX.HTML)                                */
/* ================================================================= */

/* ================================================================= */
/* ЮРИДИЧЕСКИЕ СТРАНИЦЫ (OFFER/PRIVACY)                              */
/* ================================================================= */

.legal-page {
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 160px;
}

.legal-page ~ .soft-dozhym {
  display: none;
}

.legal-hero {
  margin-bottom: 28px;
}

.legal-hero__badge {
  display: inline-flex;
  padding: 7px 12px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--warm);
  background: var(--accent-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
}

.legal-hero h1 {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--warm);
}

.legal-hero p {
  max-width: 840px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
}

.legal-meta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal-content {
  display: grid;
  gap: 20px;
}

.legal-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 30px 32px;
}

.legal-card h2 {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--warm);
}

.legal-card p,
.legal-card li {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1.72;
  color: var(--warm);
}

.legal-card ul {
  margin: 0;
  padding-left: 18px;
}

.legal-card p + p,
.legal-card p + ul,
.legal-card ul + p,
.legal-card ul + ul {
  margin-top: 10px;
}

.legal-warning {
  margin-top: 14px;
  padding: 12px 14px;
  font-family: var(--font-head);
  font-size: 12px;
  line-height: 1.65;
  color: var(--warm);
  background: var(--accent-soft);
  border: 1px solid var(--border-light);
  border-radius: 12px;
}

.legal-consent-note {
  display: block;
  width: 100%;
  max-width: 740px;
  flex-basis: 100%;
  margin: 12px auto 0;
  font-family: var(--font-head);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

.legal-consent-note a {
  color: var(--warm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.offer-legal {
  padding-bottom: 240px;
}

.offer-legal__actions {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.offer-legal__back {
  min-height: 48px;
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}


/* ================================================================= */
/* НАЧАЛО: ШАБЛОН СТАТЬИ (ARTICLE.HTML)                              */
/* ================================================================= */

/* === HERO СТАТЬИ === */
.article-hero {
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

.article-hero__inner {
  display: flex;
  flex-direction: column;
  max-width: 860px;
}

/* Хлебные крошки */
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.article-breadcrumb__link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.article-breadcrumb__link:hover {
  color: var(--warm);
}

.article-breadcrumb__sep {
  color: var(--border-light);
}

.article-breadcrumb__cat {
  color: var(--warm);
}

/* Бейдж категории */
.article-category-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--warm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  background: var(--white);
  width: fit-content;
}

/* Заголовок H1 */
.article-hero__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: var(--warm);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.article-hero__title em {
  font-weight: 300;
  font-style: italic;
  color: var(--warm);
}

/* Мета (автор + дата) */
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0;
}

.article-meta__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.article-meta__avatar {
  width: 44px;
  height: 44px;
  background: var(--warm);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}

.article-meta__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.article-meta__name {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--warm);
}

.article-meta__role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-meta__details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.article-meta__divider {
  color: var(--border-light);
}

/* Декоративная обложка */
.article-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 6;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
  background: var(--cream);
}

.article-cover__inner {
  position: absolute;
  inset: 0;
}

.article-cover__inner .gaze-cover {
  border-radius: 0;
}

/* Живые анимации обложки статьи (ambient, без hover) */
.article-cover .art-axis__grid {
  animation: articleCoverGridPulse 8s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

.article-cover .art-axis__line--x {
  animation: articleCoverLineRotate 12s ease-in-out infinite alternate;
}

.article-cover .art-axis__line--y {
  animation: articleCoverLineFloat 10s ease-in-out infinite alternate;
}

.article-cover .art-axis__point {
  background: var(--warm);
  box-shadow: 0 0 12px var(--blush);
  animation: articleCoverPointPulse 3s ease-in-out infinite alternate;
}

.article-cover .art-axis__point--1 {
  animation-delay: 0s;
}

.article-cover .art-axis__point--2 {
  animation-delay: 1.5s;
}

@keyframes articleCoverGridPulse {
  0% { transform: scale(1) rotate(0deg); border-color: var(--border-light); }
  100% { transform: scale(0.85) rotate(25deg); border-color: var(--blush); border-radius: 24px; }
}

@keyframes articleCoverLineRotate {
  0% { transform: rotate(-10deg); background: var(--border-light); }
  100% { transform: rotate(20deg) scale(1.1); background: var(--blush); }
}

@keyframes articleCoverLineFloat {
  0% { transform: translateX(0); background: var(--border-light); }
  100% { transform: translateX(10px); background: var(--warm); opacity: 0.5; }
}

@keyframes articleCoverPointPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(224, 199, 192, 0); }
  100% { transform: scale(1.6); box-shadow: 0 0 16px var(--blush); }
}

/* Ambient для orb-обложки */
.article-cover .art-orb--1 {
  animation: articleOrbFloat1 8s ease-in-out infinite alternate;
}

.article-cover .art-orb--2 {
  animation: articleOrbFloat2 10s ease-in-out infinite alternate;
}

.article-cover .art-orb-glass {
  animation: articleOrbGlassPulse 6s ease-in-out infinite alternate;
}

@keyframes articleOrbFloat1 {
  0% { transform: translate(-15px, -15px) scale(1); opacity: 0.1; }
  100% { transform: translate(25px, 20px) scale(1.35); opacity: 0.25; background: var(--blush); }
}

@keyframes articleOrbFloat2 {
  0% { transform: translate(15px, 15px) scale(1); opacity: 0.2; }
  100% { transform: translate(-20px, -18px) scale(1.3); opacity: 0.4; }
}

@keyframes articleOrbGlassPulse {
  0% { inset: 25px; border-color: rgba(255, 255, 255, 0.6); }
  100% { inset: 15px; border-color: var(--blush); box-shadow: 0 10px 30px rgba(224, 199, 192, 0.2); }
}

/* Ambient для arch-обложки */
.article-cover .art-arch__curve {
  animation: articleArchCurve 10s ease-in-out infinite alternate;
}

.article-cover .art-arch__ray {
  animation: articleArchRay 8s ease-in-out infinite alternate;
}

.article-cover .art-arch__measure {
  animation: articleArchMeasure 6s ease-in-out infinite alternate;
}

@keyframes articleArchCurve {
  0% { border-color: var(--border-light); transform: scale(1); }
  100% { border-color: var(--warm); transform: scale(1.12); border-width: 1.5px; }
}

@keyframes articleArchRay {
  0% { transform: rotate(-25deg); background: var(--border-light); }
  100% { transform: rotate(-42deg); background: var(--blush); width: 145%; }
}

@keyframes articleArchMeasure {
  0% { opacity: 0.5; transform: translate(0, 0); }
  100% { opacity: 1; transform: translate(12px, -12px); color: var(--warm); }
}

/* Ambient для blueprint-обложки */
.article-cover .art-blueprint__ring1 {
  animation: articleBpRing1 12s ease-in-out infinite alternate;
}

.article-cover .art-blueprint__ring2 {
  animation: articleBpRing2 10s ease-in-out infinite alternate;
}

.article-cover .art-blueprint__cross {
  animation: articleBpCross 8s ease-in-out infinite alternate;
}

.article-cover .art-blueprint__core {
  opacity: 1;
  animation: articleBpCore 3s ease-in-out infinite alternate;
}

@keyframes articleBpRing1 {
  0% { transform: rotate(0deg) scale(1); border-color: var(--border-light); }
  100% { transform: rotate(90deg) scale(1.15); border-color: var(--blush); }
}

@keyframes articleBpRing2 {
  0% { transform: rotate(0deg) scale(1); border-color: var(--border-soft); }
  100% { transform: rotate(-60deg) scale(0.85); border-color: var(--warm); }
}

@keyframes articleBpCross {
  0% { background: var(--border-light); width: 100%; }
  100% { background: var(--blush); width: 120%; }
}

@keyframes articleBpCore {
  0% { transform: scale(1); box-shadow: none; }
  100% { transform: scale(2); box-shadow: 0 0 20px var(--blush); }
}

/* Ambient для drop-обложки */
.article-cover .art-drop {
  animation: articleDropMorph 10s ease-in-out infinite alternate;
}

.article-cover .art-drop__core {
  animation: articleDropCore 6s ease-in-out infinite alternate;
}

@keyframes articleDropMorph {
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: scale(1); border-color: var(--border-light); }
  100% { border-radius: 50%; transform: scale(1.25); border-color: var(--blush); background: rgba(224, 199, 192, 0.05); }
}

@keyframes articleDropCore {
  0% { filter: blur(6px); opacity: 0.4; }
  100% { filter: blur(0); opacity: 1; background: var(--warm); transform: scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .article-cover .art-axis__grid,
  .article-cover .art-axis__line--x,
  .article-cover .art-axis__line--y,
  .article-cover .art-axis__point,
  .article-cover .art-orb--1,
  .article-cover .art-orb--2,
  .article-cover .art-orb-glass,
  .article-cover .art-arch__curve,
  .article-cover .art-arch__ray,
  .article-cover .art-arch__measure,
  .article-cover .art-blueprint__ring1,
  .article-cover .art-blueprint__ring2,
  .article-cover .art-blueprint__cross,
  .article-cover .art-blueprint__core,
  .article-cover .art-drop,
  .article-cover .art-drop__core {
    animation: none !important;
  }
}

.article-cover__rule {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--border-soft) 50%, transparent);
}

.article-cover__rule--left {
  left: 20%;
}

.article-cover__rule--right {
  right: 20%;
}

/* === ТЕЛО СТАТЬИ (3-колоночный flex layout как в гайде) === */
.article-main {
  background: var(--cream);
}

.article-body {
  padding: 80px 0 60px;
}

.article-body__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* === САЙДБАР С ОГЛАВЛЕНИЕМ (слева) === */
.article-sidebar {
  width: 160px;
  position: sticky;
  top: calc(var(--header-h) + 40px);
  flex-shrink: 0;
}

/* Правый балансирующий отступ */
.article-right-margin {
  width: 80px;
  flex-shrink: 0;
}

.article-toc {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-toc__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.article-toc nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-toc__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.5;
  transition: all 0.3s var(--ease-out);
  line-height: 1.4;
}

.article-toc__link.is-active {
  color: var(--warm);
  opacity: 1;
}

.article-toc__link:hover {
  opacity: 0.8;
  color: var(--warm);
}

.article-toc__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blush);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.article-toc__link.is-active .article-toc__dot {
  opacity: 1;
}

/* === ОСНОВНОЙ КОНТЕНТ (центр) === */
.article-content {
  flex-grow: 1;
  max-width: 640px;
  margin: 0 40px;
}

/* Лид-абзац */
.article-lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--warm);
  font-weight: 400;
  margin-bottom: 16px;
}

/* Обычные параграфы */
.article-content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--warm);
  margin-bottom: 28px;
}

/* Секции с якорями */
.article-content section {
  margin-bottom: 16px;
}

/* Список */
.article-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
  padding: 32px 40px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
}

.article-list:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blush);
}

.article-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--warm);
}

.article-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--blush);
  border-radius: 50%;
}

.article-list li strong {
  font-weight: 700;
}

/* === КАРТОЧКА-СРАВНЕНИЕ === */
.article-compare {
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  margin: 40px 0;
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s;
}

.article-compare:hover {
  border-color: var(--blush);
  box-shadow: var(--shadow-lg);
}

.article-compare__inner {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 32px;
  align-items: stretch;
  transform-style: preserve-3d;
}

.article-compare__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.article-compare__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.article-compare__label--warn {
  color: var(--warm);
  background: rgba(107, 94, 83, 0.08);
  border: 1px solid var(--border-light);
}

.article-compare__label--good {
  color: var(--warm);
  background: rgba(224, 199, 192, 0.2);
  border: 1px solid var(--blush);
}

.article-compare__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--warm);
  margin: 0 !important;
}

.article-compare__divider {
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-light) 20%, var(--border-light) 80%, transparent);
  align-self: stretch;
}

/* === БЛОК ИТОГА === */
.article-takeaway {
  position: relative;
  padding: 44px 44px 44px 64px;
  background: var(--white);
  border: 1px solid var(--blush);
  border-radius: var(--radius-card);
  margin: 60px 0 48px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.article-takeaway:hover {
  box-shadow: var(--shadow-lg);
}

.article-takeaway__inner {
  position: relative;
  transform-style: preserve-3d;
  z-index: 1;
}

.article-takeaway::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(224, 199, 192, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.article-takeaway__line {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 28px;
  width: 4px;
  background: var(--blush);
  border-radius: var(--radius-pill);
}

.article-takeaway__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.article-takeaway__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--warm);
  font-weight: 500;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

/* === ТЕГИ === */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  margin-top: 16px;
}

.article-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  transition: all 0.3s var(--ease-out);
  background: var(--white);
}

.article-tag:hover {
  border-color: var(--blush);
  color: var(--warm);
  transform: translateY(-2px);
}

/* === CTA-БЛОК === */
.article-cta {
  padding: 60px 0;
}

.article-cta__wrapper {
  max-width: 980px;
  margin: 0 auto;
}

.article-cta__card {
  padding: 72px 56px;
}

.article-cta__content {
  gap: 0;
}

.article-cta__notification {
  margin-bottom: 28px;
}

.article-cta__badge {
  margin-bottom: 24px;
}

.article-cta__title {
  max-width: 760px;
  margin-bottom: 20px;
}

.article-cta__desc {
  max-width: 700px;
  margin-bottom: 36px;
}

.article-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.article-cta__channel,
.article-cta__booking {
  min-height: 56px;
}

.article-cta__channel {
  min-width: 240px;
  padding: 16px 28px;
  background: var(--white);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

.article-cta__channel:hover {
  border-color: var(--blush);
  box-shadow: var(--shadow-md);
}

.article-cta__booking {
  min-width: 280px;
}

.article-cta__footer {
  margin-top: 24px;
}

/* === ПОХОЖИЕ СТАТЬИ === */
.article-related {
  padding: 60px 0 120px;
}

.article-related__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.article-related__title {
  font-family: var(--font-head);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: var(--warm);
}

.article-related__all {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--warm);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.article-related__all:hover {
  opacity: 0.7;
}

.article-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}

/* === АДАПТИВ === */
@media (max-width: 1024px) {
  .article-sidebar,
  .article-right-margin {
    display: none;
  }

  .article-content {
    margin: 0 auto;
    width: 100%;
    max-width: 680px;
  }
}

@media (max-width: 768px) {
  .article-hero {
    padding-top: calc(var(--header-h) + 48px);
  }

  .article-hero__title {
    font-size: clamp(28px, 7vw, 36px);
  }

  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .legal-page {
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 112px;
  }

  .offer-legal {
    padding-bottom: 156px;
  }

  .legal-hero h1 {
    font-size: clamp(23px, 7vw, 30px);
  }

  .legal-card {
    padding: 22px 20px;
  }

  .legal-card h2 {
    font-size: 18px;
  }

  .legal-card p,
  .legal-card li,
  .legal-consent-note {
    font-size: 12px;
  }
  .article-body {
    padding: 48px 0 40px;
  }

  .article-body__inner {
    flex-direction: column;
  }

  .article-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 48px;
  }

  .article-right-margin {
    display: none;
  }

  .article-content {
    margin: 0;
    max-width: 100%;
  }

  .article-toc nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .article-toc__link {
    font-size: 12px;
    background: var(--white);
    border: 1px solid var(--border-light);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    gap: 6px;
  }

  .article-cover {
    aspect-ratio: 16 / 5;
  }

  .article-compare__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .article-compare {
    padding: 24px;
    overflow: hidden;
    transform-style: flat;
  }

  .article-compare__inner {
    transform-style: flat;
  }

  .article-compare__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-light) 20%, var(--border-light) 80%, transparent);
  }

  .article-list {
    padding: 24px;
  }

  .article-takeaway {
    padding: 28px 24px 28px 44px;
    transform-style: flat;
    overflow: hidden;
  }

  .article-takeaway__line {
    top: 20px;
    bottom: 20px;
    left: 20px;
  }

  .article-cta__card {
    padding: 48px 24px;
  }

  .article-cta__actions {
    flex-direction: column;
    gap: 12px;
  }

  .article-cta__channel,
  .article-cta__booking {
    width: 100%;
    justify-content: center;
  }

  .article-related__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .article-related__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ================================================================= */
/* КОНЕЦ: ШАБЛОН СТАТЬИ (ARTICLE.HTML)                               */
/* ================================================================= */

/* ================================================================= */
/* НАЧАЛО: КОМПОНЕНТ «МИФ / РЕАЛЬНОСТЬ» (article-myth)               */
/* ================================================================= */

.article-myth {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 40px 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.article-myth__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 32px;
  background: var(--white);
  transition: background 0.2s var(--ease-out);
}

.article-myth__row + .article-myth__row {
  border-top: 1px solid var(--border-light);
}

.article-myth__row:hover {
  background: var(--accent-soft);
}

.article-myth__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.article-myth__tag--myth {
  color: var(--warm);
  background: rgba(107, 94, 83, 0.08);
  border: 1px solid var(--border-light);
}

.article-myth__tag--reality {
  color: var(--warm);
  background: rgba(224, 199, 192, 0.25);
  border: 1px solid var(--blush);
}

.article-myth__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--warm);
  margin: 0;
}

/* нумерованный протокол */
.article-protocol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.article-protocol li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 32px;
  background: var(--white);
  font-size: 15px;
  line-height: 1.65;
  color: var(--warm);
  transition: background 0.2s var(--ease-out);
}

.article-protocol li + li {
  border-top: 1px solid var(--border-soft);
}

.article-protocol li:hover {
  background: var(--accent-soft);
}

.article-protocol__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blush);
  margin-top: 3px;
  flex-shrink: 0;
  min-width: 20px;
}

@media (max-width: 768px) {
  .article-myth__row {
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px;
  }

  .article-protocol li {
    padding: 18px 20px;
  }
}

/* ================================================================= */
/* КОНЕЦ: КОМПОНЕНТ «МИФ / РЕАЛЬНОСТЬ»                               */
/* ================================================================= */




/* ================================================================= */
/* ПОРТФОЛИО — БЛОК 1: HERO                                          */
/* ================================================================= */

.section-portfolio-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 64px;
  z-index: 2;
}

.portfolio-hero__content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portfolio-hero__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--warm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}

.portfolio-hero__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: var(--warm);
  line-height: 1.1;
  margin-bottom: 20px;
}

.portfolio-hero__title em {
  font-style: italic;
  font-weight: 300;
}

.portfolio-hero__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 48px;
}

/* --- Фильтр-табы --- */
.portfolio-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.portfolio-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out);
  white-space: nowrap;
  min-height: 44px;
}

/* Underline-индикатор активного таба */
.portfolio-tab::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background: var(--warm);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out);
}

.portfolio-tab:hover {
  color: var(--warm);
  border-color: rgba(107, 94, 83, 0.35);
  background: var(--accent-soft);
}

.portfolio-tab--active {
  color: var(--cream);
  border-color: var(--warm);
  background: var(--warm);
  box-shadow: 0 4px 12px rgba(107, 94, 83, 0.25);
}

.portfolio-tab--active::after {
  background: var(--cream);
  transform: translateX(-50%) scaleX(1);
  width: 32px;
}

@media (max-width: 768px) {
  .section-portfolio-hero {
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 40px;
  }

  .portfolio-hero__title {
    font-size: clamp(28px, 7vw, 36px);
  }

  .portfolio-hero__sub {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .portfolio-tabs {
    gap: 6px;
  }

  .portfolio-tab {
    padding: 10px 16px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .portfolio-tab {
    padding: 10px 14px;
  }
}

/* ================================================================= */
/* КОНЕЦ: ПОРТФОЛИО БЛОК 1                                           */
/* ================================================================= */


/* ================================================================= */
/* ПОРТФОЛИО — БЛОК 2: BENTO-СЕТКА                                   */
/* ================================================================= */

.section-portfolio-grid {
  padding: 0 0 120px;
  position: relative;
  z-index: 2;
}

/* ── Сетка: 3 колонки, только вертикальные и квадратные ────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

/* ── Единая аккуратная пропорция для всей сетки ─────────────────── */
.portfolio-cell[data-index] {
  aspect-ratio: 4 / 5;
}

/* ── Базовая ячейка ────────────────────────────────────────────── */
.portfolio-cell {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.45s var(--ease-out),
              transform 0.45s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}

.portfolio-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.portfolio-cell--hidden {
  display: none !important;
}

/* ── Blueprint-заглушка ────────────────────────────────────────── */
.portfolio-cell__placeholder {
  position: absolute;
  inset: 0;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
}

/* Разные оттенки для разнообразия */
.portfolio-cell[data-category="lashes"] .portfolio-cell__placeholder {
  background: linear-gradient(135deg, var(--cream) 0%, rgba(224, 199, 192, 0.45) 100%);
}
.portfolio-cell[data-category="brows"] .portfolio-cell__placeholder {
  background: linear-gradient(155deg, rgba(224, 199, 192, 0.3) 0%, var(--cream) 60%, rgba(107, 94, 83, 0.06) 100%);
}
.portfolio-cell[data-category="complex"] .portfolio-cell__placeholder {
  background: linear-gradient(115deg, rgba(107, 94, 83, 0.07) 0%, var(--cream) 50%, rgba(224, 199, 192, 0.35) 100%);
}

/* Grain-текстура поверх */
.portfolio-cell__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: 1;
  transition: opacity 0.4s;
}

/* Перекрестие чертёжника */
.portfolio-cell__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(107, 94, 83, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 94, 83, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  transition: opacity 0.4s;
}

/* Диагональный blueprint-акцент */
.portfolio-cell__blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.portfolio-cell__blueprint svg {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40%;
  max-width: 120px;
  opacity: 0.12;
  transition: opacity 0.4s, transform 0.6s var(--ease-out);
}

/* ── Hover: scale + vignette + усиление grain ───────────────────── */
.portfolio-cell:hover .portfolio-cell__placeholder {
  transform: scale(1.05);
  filter: contrast(1.04) brightness(0.97);
}
.portfolio-cell:hover .portfolio-cell__placeholder::before {
  opacity: 2;
}
.portfolio-cell:hover .portfolio-cell__placeholder::after {
  opacity: 0.6;
}
.portfolio-cell:hover .portfolio-cell__blueprint svg {
  opacity: 0.22;
  transform: scale(1.08) rotate(3deg);
}

/* Vignette через box-shadow inset */
.portfolio-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(107, 94, 83, 0.1);
  border-radius: 16px;
  z-index: 3;
  transition: box-shadow 0.4s var(--ease-out);
}

.portfolio-cell:hover::before {
  box-shadow:
    inset 0 0 0 1px rgba(107, 94, 83, 0.2),
    inset 0 -80px 60px -20px rgba(107, 94, 83, 0.18);
}

/* ── Overlay с описанием ────────────────────────────────────────── */
.portfolio-cell__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 24px;
  background: linear-gradient(
    to top,
    rgba(60, 50, 42, 0.92) 0%,
    rgba(60, 50, 42, 0.7) 35%,
    rgba(60, 50, 42, 0.3) 60%,
    transparent 85%
  );
  opacity: 1;
  transform: translateY(0);
  transition: background 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}

.portfolio-cell:hover .portfolio-cell__overlay {
  background: linear-gradient(
    to top,
    rgba(60, 50, 42, 0.96) 0%,
    rgba(60, 50, 42, 0.82) 40%,
    rgba(60, 50, 42, 0.46) 66%,
    transparent 88%
  );
}

.portfolio-cell__cat {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 8px;
}

.portfolio-cell__name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 8px;
}

.portfolio-cell__desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* ── Микро-история ─────────────────────────────────────────────── */
.portfolio-cell__micro {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 5;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  pointer-events: none;
}

.portfolio-cell--has-micro .portfolio-cell__overlay {
  padding-bottom: 88px;
}

/* ── Номер ячейки (архитектурный акцент) ── */
.portfolio-cell__num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: rgba(107, 94, 83, 0.3);
  letter-spacing: 0.1em;
  z-index: 2;
  transition: color 0.3s;
}

.portfolio-cell:hover .portfolio-cell__num {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Курсор-лупа на ячейках ─────────────────────────────────────── */
.gaze-cursor--loupe {
  width: 64px !important;
  height: 64px !important;
  background-color: transparent !important;
  border: 1.5px solid var(--warm) !important;
  backdrop-filter: none !important;
}

/* ── Адаптив ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-portfolio-grid { padding-bottom: 80px; }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* На мобильном оставляем aspect-ratio как есть — grid сам рассчитывает высоту */
  .portfolio-cell__name  { font-size: 14px; }
  .portfolio-cell__desc  { font-size: 12px; }
  .portfolio-cell__micro { font-size: 11px; }

  /* На мобильном overlay всегда виден (нет hover) */
  .portfolio-cell__overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .portfolio-cell[data-index] { aspect-ratio: 5 / 6; }
}

/* ── Лайтбокс: увеличение по клику ────────────────────────────── */
.portfolio-lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 20px;
  border: none;
  background: transparent;
  overflow: hidden;
}

.portfolio-lightbox::backdrop {
  background: rgba(42, 37, 33, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.portfolio-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-lightbox__shell {
  width: min(1020px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
}

.portfolio-lightbox__card {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 40px);
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(42, 37, 33, 0.35);
  transform: scale(0.96) translateY(16px);
  opacity: 0;
  transition: transform 0.28s var(--ease-out), opacity 0.28s var(--ease-out);
  display: grid;
  grid-template-columns: minmax(400px, 1.22fr) minmax(320px, 0.88fr);
}

.portfolio-lightbox.is-open .portfolio-lightbox__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Scale-back на main при открытии */
#portfolio-main.lightbox-active {
  filter: brightness(0.82);
  transition: filter 0.5s var(--ease-out);
}

.portfolio-lightbox__media {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
}

.portfolio-lightbox__placeholder {
  position: absolute;
  inset: 0;
}

.portfolio-lightbox__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(107, 94, 83, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 94, 83, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

.portfolio-lightbox__info {
  padding: 40px 36px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.portfolio-lightbox__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 12px;
}

.portfolio-lightbox__title {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--warm);
  line-height: 1.2;
  margin-bottom: 16px;
}

.portfolio-lightbox__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--warm);
  opacity: 0.8;
  margin-bottom: 32px;
}

.portfolio-lightbox__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warm);
  color: var(--cream);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
  position: relative;
  overflow: hidden;
}

.portfolio-lightbox__cta:hover { opacity: 0.85; transform: translateY(-2px); }

.portfolio-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(249,248,246,0.9);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  transition: all 0.2s var(--ease-out);
  backdrop-filter: blur(4px);
}

.portfolio-lightbox__close svg {
  width: 14px; height: 14px;
  stroke: var(--warm);
  stroke-width: 2;
  stroke-linecap: round;
}

.portfolio-lightbox__close:hover {
  background: var(--warm);
  border-color: var(--warm);
}
.portfolio-lightbox__close:hover svg { stroke: var(--cream); }

@media (max-width: 768px) {
  .portfolio-lightbox {
    padding: 12px;
  }

  .portfolio-lightbox__shell {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .portfolio-lightbox__card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 38vh) minmax(0, 1fr);
    max-height: calc(100dvh - 24px);
    border-radius: 20px;
  }

  .portfolio-lightbox__media {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .portfolio-lightbox__info {
    padding: 24px 20px;
    overflow-y: auto;
  }

  .portfolio-lightbox__close {
    position: absolute;
  }

  .portfolio-cell__overlay {
    padding: 16px 16px 20px;
  }

  .portfolio-cell--has-micro .portfolio-cell__overlay {
    padding-bottom: 72px;
  }

  .portfolio-cell__micro {
    right: 16px;
    bottom: 16px;
    left: 16px;
    font-size: 11px;
  }
}

/* ================================================================= */
/* КОНЕЦ: ПОРТФОЛИО БЛОК 2                                           */
/* ================================================================= */

/* ================================================================= */
/* ПОРТФОЛИО — БЛОК 3: ДО / ПОСЛЕ                                    */
/* ================================================================= */

.section-portfolio-before-after {
  padding: 120px 0;
}

.portfolio-before-after__head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.portfolio-before-after__title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.16;
  color: var(--warm);
}

.portfolio-before-after__sub {
  margin: 0;
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

.portfolio-before-after__list {
  display: grid;
  gap: 24px;
}

.portfolio-ba-card {
  padding: 28px;
}

.portfolio-ba-viewport {
  position: relative;
  width: 100%;
  height: clamp(280px, 46vw, 410px);
  margin-bottom: 22px;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  --split: 50;
}

.portfolio-ba-layer {
  position: absolute;
  inset: 0;
}

.portfolio-ba-layer--after {
  width: calc(var(--split) * 1%);
  overflow: hidden;
  border-right: 1px solid var(--blush);
}

.portfolio-ba-blueprint {
  position: absolute;
  inset: 0;
}

.portfolio-ba-blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.portfolio-ba-blueprint::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to right, transparent 49.8%, rgba(107, 94, 83, 0.18) 50%, transparent 50.2%),
    linear-gradient(to bottom, transparent 49.8%, rgba(107, 94, 83, 0.18) 50%, transparent 50.2%);
  background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
}

.portfolio-ba-blueprint--before {
  background: linear-gradient(145deg, rgba(107, 94, 83, 0.1), rgba(224, 199, 192, 0.14));
}

.portfolio-ba-blueprint--after {
  background: linear-gradient(145deg, rgba(224, 199, 192, 0.2), rgba(107, 94, 83, 0.1));
}

.portfolio-ba-label {
  position: absolute;
  top: 14px;
  padding: 7px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--warm);
  text-transform: uppercase;
  background: rgba(249, 248, 246, 0.85);
}

.portfolio-ba-layer--before .portfolio-ba-label {
  left: 14px;
}

.portfolio-ba-layer--after .portfolio-ba-label {
  right: 14px;
}

.portfolio-ba-handle {
  position: absolute;
  top: 0;
  left: calc(var(--split) * 1%);
  width: 52px;
  height: 100%;
  border: none;
  background: transparent;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 6;
}

.portfolio-ba-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--blush);
  transform: translateX(-50%);
}

.portfolio-ba-handle::after {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--blush);
  border-radius: 50%;
  background: rgba(249, 248, 246, 0.94);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--warm);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-sm);
}

.portfolio-ba-card__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--warm);
}

.portfolio-ba-card__note {
  margin: 0;
  font-family: var(--font-head);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.portfolio-ba-card__note em {
  font-style: italic;
}

@media (max-width: 768px) {
  .section-portfolio-before-after {
    padding: 88px 0;
  }

  .portfolio-before-after__head {
    margin-bottom: 32px;
  }

  .portfolio-ba-card {
    padding: 20px;
  }

  .portfolio-ba-viewport {
    height: clamp(240px, 64vw, 320px);
  }

  .portfolio-ba-handle {
    width: 56px;
  }

  .portfolio-ba-card__title {
    font-size: 18px;
  }

  .portfolio-ba-card__note {
    font-size: 13px;
  }
}

/* ================================================================= */
/* ПОРТФОЛИО — БЛОК 4: ПРИНЦИПЫ РЕЗУЛЬТАТА                           */
/* ================================================================= */

.section-portfolio-principles {
  padding: 120px 0 60px;
}

.portfolio-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.portfolio-principle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 230px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.portfolio-principle:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.portfolio-principle__eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--warm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
}

.portfolio-principle__title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--warm);
}

.portfolio-principle__text {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .section-portfolio-principles {
    padding: 88px 0 40px;
  }

  .portfolio-principles {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portfolio-principle {
    min-height: auto;
    padding: 24px;
  }

  .portfolio-principle__title {
    font-size: 18px;
  }
}

/* ================================================================= */
/* ПОРТФОЛИО — БЛОК 5: CTA                                           */
/* ================================================================= */

.section-portfolio-cta {
  padding: 80px 0 120px;
}

.portfolio-mini-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 0;
}

.portfolio-mini-carousel__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: portfolioMiniScroll 42s linear infinite;
}

.portfolio-mini-carousel:hover .portfolio-mini-carousel__track {
  animation-play-state: paused;
}

.portfolio-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  height: 94px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}

.portfolio-mini::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.55;
}

.portfolio-mini[data-kind="lashes"] {
  background: linear-gradient(150deg, rgba(224, 199, 192, 0.24), rgba(249, 248, 246, 0.92));
}

.portfolio-mini[data-kind="brows"] {
  background: linear-gradient(150deg, rgba(107, 94, 83, 0.09), rgba(249, 248, 246, 0.95));
}

.portfolio-mini[data-kind="complex"] {
  background: linear-gradient(150deg, rgba(107, 94, 83, 0.08), rgba(224, 199, 192, 0.22));
}

.portfolio-mini span {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--warm);
  text-transform: uppercase;
  text-align: center;
}

@keyframes portfolioMiniScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.portfolio-cta-quote {
  margin: 28px 0 34px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
}

.section-portfolio-cta .article-cta__wrapper {
  max-width: 980px;
}

.section-portfolio-cta .article-cta__card {
  padding: 72px 56px;
}

.section-portfolio-cta .article-cta__desc {
  margin-bottom: 36px;
}

.section-portfolio-cta .article-cta__footer {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .section-portfolio-cta {
    padding: 64px 0 90px;
  }

  .portfolio-mini {
    min-width: 154px;
    height: 86px;
  }

  .portfolio-cta-quote {
    margin: 22px 0 26px;
    font-size: 16px;
  }

  .section-portfolio-cta .article-cta__card {
    padding: 48px 24px;
  }
}