/* ============================================================
   Единый типографический слой. Менять значения здесь, не в страницах.
   Подключается последним в <head> каждой страницы, поэтому перебивает
   значения из внутренних <style> при равной специфичности.
   ============================================================ */

:root {
  --text-body: #E8E8EA;   /* основной текст, не чистый белый */
  --text-muted: #9A9AA2;  /* байлайны, мета, второстепенное */
  --lh-body: 1.6;
  --lh-heading: 1.12;
  --measure: 65ch;        /* максимум ширины текстовой строки */
}

/* --- Контентные абзацы (наборный текст без своего класса) --- */
p,
.about-text p {   /* .about-text p — перебиваем составное правило страницы (0,0,1,1) */
  line-height: var(--lh-body);
  color: var(--text-body);
  font-size: 17px;
}
p + p,
.about-text p + p { margin-top: 0.9em; }

/* --- Ширина строки для длинного контента --- */
.article-content p,
.article-content li,
.about-text p { max-width: var(--measure); }

/* --- Контейнер статьи: перебиваем line-height 1.85 --- */
.article-content { line-height: var(--lh-body); font-size: 17px; }
.article-content p { line-height: var(--lh-body); }

/* --- Списки --- */
li { line-height: 1.55; }
li + li { margin-top: 0.5em; }

/* --- Текст в карточках: отзывы / тарифы / FAQ — не шире 60ch --- */
.review-card p, .review-card li { color: var(--text-body); line-height: var(--lh-body); max-width: 60ch; }
.price-features li { line-height: var(--lh-body); max-width: 60ch; }
.faq-content, .faq-content p, .faq-content li { line-height: var(--lh-body); max-width: 60ch; }

/* --- Заголовки секций (h2; hero h1, логотип и бегущая строка не затронуты) --- */
h2.title-font { line-height: var(--lh-heading); letter-spacing: -0.01em; margin: 72px 0 24px; }
h2.title-font:first-child { margin-top: 0; } /* первый заголовок в секции: верхний отступ даёт padding секции */

/* --- Единый вертикальный ритм секций --- */
.section { padding: 96px 0; }

/* --- Второстепенный текст --- */
.article-byline, .article-byline span { color: var(--text-muted); }

@media (max-width: 640px) {
  p { font-size: 16px; }
  .article-content { font-size: 16px; }
  .section { padding: 64px 0; }
}

/* ============================================================
   СЛОЙ 2: акценты и движение (Фаза 1 «дорогого» вида)
   ============================================================ */

/* --- Красный акцент в заголовках: <em> внутри .title-font --- */
.title-font em { font-style: normal; color: var(--primary); }

/* --- Нумерация секций: 01 · Подход --- */
.section-label {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.section-label span:first-child { color: var(--primary); }
.section-label::after { content: ""; flex: 0 0 42px; height: 1px; background: rgba(255,255,255,0.18); }

/* --- Манифест --- */
.manifesto-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 18px;
}
h2.manifesto-title { font-size: clamp(24px, 4vw, 40px); line-height: 1.18; max-width: 820px; margin: 0; }

/* --- Бейдж тарифа PRO: статичный пилл над названием (вместо повёрнутого стикера) --- */
.price-card .price-badge {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 7px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--primary);
  background: rgba(255,59,48,0.10);
  border: 1px solid rgba(255,59,48,0.45);
  border-radius: 999px;
}

/* --- Стрелка в кнопках --- */
.btn .btn-arrow { margin-left: 8px; display: inline-block; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.btn:hover .btn-arrow { transform: translate(3px, -3px); }

/* ============================================================
   СЛОЙ 3: цветовой ритм главной под hero-фото.
   Черный / теплый ivory / красный акцент.
   ============================================================ */
:root {
  --itri-ink: #070606;
  --itri-espresso: #111010;
  --itri-charcoal: #171313;
  --itri-warm: #F2E8DA;
  --itri-warm-2: #E6D4C0;
  --itri-red: #FF3B30;
  --itri-red-bright: #FF4A3F;
  --itri-red-soft: rgba(255,59,48,0.16);
  --itri-on-warm: #171313;
  --itri-muted-warm: #635D57;
}

#view-home .hero-bg {
  background-image:
    linear-gradient(120deg, rgba(7,6,6,0.50) 0%, rgba(255,59,48,0.12) 54%, rgba(7,6,6,0.58) 100%),
    url("assets/hero/Image_202601201654.jpeg");
}
#view-home .hero-overlay {
  background: linear-gradient(0deg, rgba(7,6,6,0.50) 5%, rgba(7,6,6,0.38) 42%, rgba(7,6,6,0.18) 100%);
}
#view-home .hero.tone-dark {
  background: transparent;
  --primary: var(--itri-red-bright);
}
#view-home .hero-tag {
  color: #FFD5D2 !important;
  background: rgba(17,16,16,0.48) !important;
  border-color: rgba(255,59,48,0.24) !important;
}
#view-home .hero-title-3d.accent {
  color: var(--itri-red-bright);
  -webkit-text-fill-color: var(--itri-red-bright);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 8px 18px rgba(0,0,0,0.34);
}

#view-home .section[id] {
  scroll-margin-top: 112px;
}

#view-home .tone-dark,
.home-footer.tone-dark {
  background:
    radial-gradient(900px 420px at 86% 0%, rgba(255,59,48,0.10), transparent 62%),
    linear-gradient(180deg, var(--itri-ink) 0%, var(--itri-espresso) 100%);
  color: #F6EFE8;
  --primary: var(--itri-red);
  --text-body: #E7DDD3;
  --text-muted: #A7A09A;
  --text-gray: #B4ADA6;
  --border-color: rgba(242,232,218,0.12);
  --bg-card: rgba(255,247,234,0.035);
}

#view-home .tone-warm {
  background:
    radial-gradient(760px 420px at 14% 0%, rgba(255,59,48,0.08), transparent 64%),
    linear-gradient(180deg, var(--itri-warm) 0%, var(--itri-warm-2) 100%);
  color: var(--itri-on-warm);
  --primary: var(--itri-red);
  --text-body: #211D19;
  --text-muted: var(--itri-muted-warm);
  --text-gray: var(--itri-muted-warm);
  --border-color: rgba(27,18,13,0.16);
  --bg-card: rgba(255,248,238,0.46);
}

#view-home .tone-dark .section-label,
#view-home .tone-dark .manifesto-kicker,
.home-footer.tone-dark .tech-font { color: rgba(242,232,218,0.68); }
#view-home .tone-dark .section-label span:first-child,
#view-home .tone-dark .title-font em { color: var(--itri-red-bright); }
#view-home .tone-dark .section-label::after { background: rgba(242,232,218,0.18); }
#view-home .tone-dark h2,
#view-home .tone-dark h3,
#view-home .tone-dark .price-title,
#view-home .tone-dark .about-text .about-lead,
#view-home .tone-dark .about-text .about-em,
#view-home .tone-dark .about-text .about-em-soft { color: #F6EFE8; }
#view-home .tone-dark p,
#view-home .tone-dark li,
#view-home .tone-dark .faq-content { color: var(--text-body); }

#view-home .tone-warm .section-label,
#view-home .tone-warm .manifesto-kicker { color: var(--itri-muted-warm); }
#view-home .tone-warm .section-label::after { background: rgba(27,18,13,0.22); }
#view-home .tone-warm .section-label span:first-child,
#view-home .tone-warm .title-font em { color: var(--itri-red); }
#view-home .tone-warm h2,
#view-home .tone-warm h3,
#view-home .tone-warm .price-title,
#view-home .tone-warm .about-text .about-lead,
#view-home .tone-warm .about-text .about-em,
#view-home .tone-warm .about-text .about-em-soft { color: var(--itri-on-warm); }
#view-home .tone-warm p,
#view-home .tone-warm li,
#view-home .tone-warm .faq-content { color: var(--text-body); }

#view-home .tone-dark .bento-card,
#view-home .tone-dark .price-card,
#view-home .tone-dark .review-card,
#view-home .tone-dark .stat-card,
#view-home .tone-dark .step-card,
#view-home .tone-dark .faq-item {
  background: linear-gradient(145deg, rgba(255,247,234,0.045), rgba(255,59,48,0.025));
  border-color: rgba(242,232,218,0.12);
}
#view-home .tone-warm .bento-card,
#view-home .tone-warm .price-card,
#view-home .tone-warm .review-card,
#view-home .tone-warm .stat-card,
#view-home .tone-warm .step-card,
#view-home .tone-warm .faq-item {
  background: rgba(255,248,238,0.52);
  border-color: rgba(27,18,13,0.14);
  box-shadow: 0 18px 50px rgba(46,35,24,0.08);
}
#view-home .tone-warm .price-card.is-featured {
  border-color: rgba(255,59,48,0.40);
  box-shadow: 0 20px 60px rgba(255,59,48,0.12);
}

#view-home .tone-dark .about-block { border-color: rgba(242,232,218,0.12); }
#view-home .tone-warm .about-block { border-color: rgba(27,18,13,0.14); }
#view-home .tone-dark .about-callout,
#view-home .tone-warm .about-callout {
  background: rgba(255,59,48,0.08);
  border-color: rgba(255,59,48,0.22);
}
#view-home .tone-dark .about-callout { color: #F0E2D4; }
#view-home .tone-warm .about-callout { color: #2B211C; }

#view-home .marquee-section.tone-dark {
  background:
    linear-gradient(90deg, var(--itri-ink) 0%, #180B0B 50%, var(--itri-ink) 100%);
  border-color: rgba(242,232,218,0.12);
  box-shadow: inset 0 1px 0 rgba(242,232,218,0.08), inset 0 -1px 0 rgba(242,232,218,0.08);
}
#view-home .tone-dark .marquee-item { color: rgba(242,232,218,0.56); }
#view-home .tone-dark .marquee-item:hover { color: #F4E9DC; }

#view-home .tone-dark .step-icon { color: rgba(242,232,218,0.42); }
#view-home .tone-warm .step-icon { color: var(--itri-on-warm); opacity: 0.52; }
#view-home .tone-dark .step-card:hover .step-icon,
#view-home .tone-warm .step-card:hover .step-icon { color: var(--primary); opacity: 1; }

#view-home .tone-dark .price-card .price-badge,
#view-home .tone-warm .price-card .price-badge,
#view-home .tone-dark [style*="rgba(255,59,48"],
#view-home .tone-warm [style*="rgba(255,59,48"] {
  background: rgba(255,59,48,0.10) !important;
  border-color: rgba(255,59,48,0.28) !important;
}
#view-home .tone-dark .stat-card[style*="rgba(255,59,48"],
#view-home .tone-warm .stat-card[style*="rgba(255,59,48"] {
  box-shadow: 0 0 30px rgba(255,59,48,0.10) !important;
}

#view-home .tone-dark .calc-promo {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,59,48,0.14), transparent 44%),
    linear-gradient(145deg, rgba(255,247,234,0.055), rgba(255,59,48,0.04));
  border-color: rgba(242,232,218,0.14);
  box-shadow: none;
}
#view-home .tone-dark .calc-promo::before {
  opacity: 0.45;
  background: radial-gradient(circle, rgba(255,59,48,0.20) 0%, transparent 70%);
}
#view-home .tone-dark .calc-promo-badge,
#view-home .tone-dark .calc-promo-chip {
  background: rgba(242,232,218,0.06);
  border-color: rgba(242,232,218,0.16);
}
#view-home .tone-dark .calc-promo-btn {
  background: #F4EADD;
  color: #110B07;
  box-shadow: 0 16px 36px rgba(7,5,4,0.24);
}
#view-home .tone-dark .calc-promo-btn:hover {
  background: #FFF0DF;
  box-shadow: 0 18px 42px rgba(7,5,4,0.30);
}

#view-home .tone-warm .btn {
  background: var(--itri-ink);
  color: #F4EADD;
  box-shadow: 0 14px 34px rgba(8,7,6,0.18);
}

#view-home .tone-dark .stats-wrapper .stat-card:first-child .tech-font,
#view-home .tone-dark .stats-wrapper .stat-card:nth-child(2) .tech-font {
  color: rgba(255,247,234,0.78) !important;
}

@media (hover: hover) {
  #view-home .tone-dark .bento-card:hover,
  #view-home .tone-dark .price-card:hover,
  #view-home .tone-dark .stat-card:hover,
  #view-home .tone-dark .step-card:hover,
  #view-home .tone-dark .featured-article:hover {
    border-color: rgba(255,59,48,0.34);
  }
  #view-home .tone-warm .bento-card:hover,
  #view-home .tone-warm .price-card:hover,
  #view-home .tone-warm .stat-card:hover,
  #view-home .tone-warm .step-card:hover,
  #view-home .tone-warm .featured-article:hover {
    border-color: rgba(255,59,48,0.32);
  }
}

.home-footer.tone-dark {
  border-top: 1px solid rgba(242,232,218,0.12);
}
.home-footer.tone-dark .btn {
  background: transparent !important;
  border-color: rgba(242,232,218,0.24) !important;
  color: #F1E0CD !important;
}
.home-footer.tone-dark .btn:hover {
  background: rgba(242,232,218,0.08) !important;
  box-shadow: 0 12px 30px rgba(8,7,6,0.18);
}

@media (max-width: 640px) {
  #view-home .tone-warm,
  #view-home .tone-dark,
  .home-footer.tone-dark { background-attachment: scroll; }
}

/* --- Мягкое появление при скролле (CSS-only, деградирует без поддержки) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento-card, .step-card, .review-card, .price-card, .faq-item,
    .blog-card, .featured-article, .calc-promo, .stat-card,
    section h2.title-font, .manifesto-kicker, .section-label,
    .article-content > h2, .article-content > h3, .article-content > p,
    .article-content > ul, .article-content > ol, .article-content > blockquote,
    .article-content > div {
      animation: itri-reveal both linear;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}
@keyframes itri-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
