/* Токены стиля услуги "ИИ-боты под ключ" */
/* Образец: HubSpot (styles.refero.design/style/3e100552-a8ad-4179-b89a-6aa5113b92e1) */
/* Шрифт свой: Inter (OFL), файлы лежат рядом в папке shrift */

@font-face {
  font-family: 'Sluzhebnyy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('shrift/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sluzhebnyy';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('shrift/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Sluzhebnyy';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('shrift/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sluzhebnyy';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('shrift/inter-700.woff2') format('woff2');
}

:root {
  /* Цвета: роль -> hex */
  --cvet-fon: #fcfcfa;              /* фон страницы, светлый тёплый */
  --cvet-fon-sekcii: #f8f5ee;       /* фон чередующихся секций */
  --cvet-tekst: #1f1f1f;            /* основной текст */
  --cvet-tekst-vtorichnyy: #60605f; /* подписи, вторичный текст */
  --cvet-granica: #cacac8;          /* границы, разделители, неактивное */
  --cvet-akcent: #ff4800;           /* главный акцент, кнопки, ссылки */
  --cvet-akcent-tyomnyy: #cc3900;   /* акцент при наведении */
  --cvet-akcent-svetlyy: #fcded2;   /* мягкая плашка, фон бейджа */
  --cvet-tyomnyy-fon: #042729;      /* контрастная секция, подвал */
  --cvet-belyy: #ffffff;

  /* Шрифты */
  --shrift-osnovnoy: 'Sluzhebnyy', 'Inter', -apple-system, Arial, sans-serif;

  /* Размеры заголовков */
  --razmer-h1: 56px;   /* на мобильном 32px */
  --razmer-h2: 40px;
  --razmer-h3: 28px;
  --razmer-h4: 22px;
  --razmer-h5: 18px;
  --razmer-tekst: 16px;
  --razmer-melkiy: 14px;

  --vysota-stroki-zagolovok: 1.15;
  --vysota-stroki-tekst: 1.55;

  /* Насыщенность шрифта */
  --ves-zagolovok: 600;
  --ves-tekst: 400;
  --ves-knopka: 500;

  /* Отступы, база 4px */
  --otstup-1: 4px;
  --otstup-2: 8px;
  --otstup-3: 16px;
  --otstup-4: 24px;
  --otstup-5: 32px;
  --otstup-6: 48px;
  --otstup-7: 64px;
  --otstup-8: 80px;

  /* Сетка */
  --shirina-kontenta: 1200px;
  --pole-storony: 24px;

  /* Радиусы */
  --radius-knopka: 8px;
  --radius-kartochka: 16px;
  --radius-beydzh: 4px;
  --radius-izobrazhenie: 16px;

  /* Тени (используются экономно, система в основном на границах) */
  --ten-legkaya: 0 1px 2px rgba(31, 31, 31, 0.06);
  --ten-kartochka: 0 4px 16px rgba(31, 31, 31, 0.08);
  --ten-vsplyvashka: 0 12px 32px rgba(31, 31, 31, 0.14);
}

/* Тёмная секция (подвал, контрастный блок) переопределяет роли текста и фона */
.tyomnaya-sekciya {
  --cvet-fon: var(--cvet-tyomnyy-fon);
  --cvet-tekst: var(--cvet-belyy);
  --cvet-tekst-vtorichnyy: #a9c2c2;
  background: var(--cvet-fon);
  color: var(--cvet-tekst);
}

/* Базовые стили кнопок как пример применения токенов */
.knopka {
  font-family: var(--shrift-osnovnoy);
  font-size: var(--razmer-tekst);
  font-weight: var(--ves-knopka);
  border-radius: var(--radius-knopka);
  padding: 12px var(--otstup-4);
  border: none;
  cursor: pointer;
}

.knopka-osnovnaya {
  background: var(--cvet-akcent);
  color: var(--cvet-belyy);
}
.knopka-osnovnaya:hover {
  background: var(--cvet-akcent-tyomnyy);
}

.knopka-vtorichnaya {
  background: transparent;
  color: var(--cvet-akcent);
  border: 1.5px solid var(--cvet-akcent);
}
.knopka-vtorichnaya:hover {
  background: var(--cvet-akcent-svetlyy);
}

/* ===== Разметка сайта услуги "ИИ-боты под ключ" ===== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cvet-fon);
  color: var(--cvet-tekst);
  font-family: var(--shrift-osnovnoy);
  font-size: var(--razmer-tekst);
  font-weight: var(--ves-tekst);
  line-height: var(--vysota-stroki-tekst);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: var(--ves-zagolovok); line-height: var(--vysota-stroki-zagolovok); margin: 0 0 var(--otstup-3); }
h1 { font-size: var(--razmer-h1); }
h2 { font-size: var(--razmer-h2); }
h3 { font-size: var(--razmer-h3); }
h4 { font-size: var(--razmer-h4); }
h5 { font-size: var(--razmer-h5); }
p { margin: 0 0 var(--otstup-3); }
ul { margin: 0; padding: 0; }

.konteyner { max-width: var(--shirina-kontenta); margin: 0 auto; padding: 0 var(--pole-storony); }

/* Шапка */
.shapka { position: sticky; top: 0; z-index: 20; background: var(--cvet-fon); border-bottom: 1px solid var(--cvet-granica); }
.shapka-v { display: flex; align-items: center; gap: var(--otstup-5); height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; margin-right: auto; }
.menyu { display: flex; gap: var(--otstup-5); }
.menyu a { color: var(--cvet-tekst-vtorichnyy); font-weight: 500; }
.menyu a:hover, .menyu a.akt { color: var(--cvet-tekst); }
.shapka-knopki { display: flex; align-items: center; gap: var(--otstup-3); }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { width: 22px; height: 2px; background: var(--cvet-tekst); display: block; }

/* Кнопки (основа выше, тут только размер) */
.knopka { display: inline-block; text-align: center; }
.knopka-bolshaya { padding: 14px 28px; font-size: 16px; }

/* Хлебные крошки */
.kroshki { color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); padding: var(--otstup-4) 0 0; }
.kroshki a { color: var(--cvet-tekst-vtorichnyy); }
.kroshki a:hover { color: var(--cvet-akcent); }

/* Первый экран */
.geroy { padding: var(--otstup-6) 0 var(--otstup-7); }
.geroy-setka { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--otstup-7); align-items: center; }
.geroy h1 { margin-bottom: var(--otstup-3); }
.pod { color: var(--cvet-tekst-vtorichnyy); font-size: 18px; max-width: 46ch; }
.stroka-bez-karty { color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); margin: var(--otstup-3) 0 var(--otstup-4); }
.galochki { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: var(--otstup-4); }
.galochki li { display: flex; gap: 10px; align-items: flex-start; }
.galochki li::before { content: "✓"; color: var(--cvet-akcent); font-weight: 700; flex: none; }
.geroy-kartinka { background: var(--cvet-fon-sekcii); border: 1px solid var(--cvet-granica); border-radius: var(--radius-izobrazhenie); padding: var(--otstup-5); min-height: 320px; }

/* Экран переписки (мок Telegram) */
.mok-chat { display: flex; flex-direction: column; gap: 10px; }
.mok-stroka { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 15px; }
.mok-stroka.klient { align-self: flex-end; background: var(--cvet-akcent-svetlyy); border-bottom-right-radius: 4px; }
.mok-stroka.bot { align-self: flex-start; background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-bottom-left-radius: 4px; }

/* Мок схема (страница возможностей) */
.mok-shema { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mok-shema .uzel { background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-radius: var(--radius-kartochka); padding: var(--otstup-3); text-align: center; font-size: var(--razmer-melkiy); font-weight: 500; flex: 1; min-width: 120px; }
.mok-shema .strelka { color: var(--cvet-akcent); font-size: 22px; }

/* Мок карточки пакетов (страница цен) */
.mok-pakety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mok-pakety .kart { background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-radius: var(--radius-kartochka); padding: var(--otstup-3); }
.mok-pakety .kart b { display: block; font-size: var(--razmer-melkiy); margin-bottom: 6px; }
.mok-pakety .kart span { display: block; font-size: 13px; color: var(--cvet-tekst-vtorichnyy); }

/* Мок квиза (страница заявки) */
.mok-kviz { background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-radius: var(--radius-kartochka); padding: var(--otstup-4); }
.mok-kviz .variant { border: 1px solid var(--cvet-granica); border-radius: var(--radius-knopka); padding: 10px 14px; margin-top: 10px; font-size: 15px; }
.mok-kviz .variant.akt { border-color: var(--cvet-akcent); background: var(--cvet-akcent-svetlyy); }

/* Мок связи (страница контактов) */
.mok-kontakt { display: flex; flex-direction: column; align-items: center; gap: var(--otstup-3); text-align: center; }
.mok-kontakt .krug { width: 64px; height: 64px; border-radius: 50%; background: var(--cvet-akcent-svetlyy); display: flex; align-items: center; justify-content: center; font-size: 28px; }

/* Шаги "как это работает" */
.shagi { padding: var(--otstup-7) 0; }
.shagi-setka { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--otstup-4); }
.shag { display: flex; flex-direction: column; gap: var(--otstup-2); }
.shag b { width: 36px; height: 36px; border-radius: 50%; background: var(--cvet-akcent); color: var(--cvet-belyy); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.shag span { color: var(--cvet-tekst-vtorichnyy); }

/* Секции */
.blok { padding: var(--otstup-7) 0; }
.blok.seryy { background: var(--cvet-fon-sekcii); }
.centr { text-align: center; max-width: 760px; margin: 0 auto; }
.lead { color: var(--cvet-tekst-vtorichnyy); font-size: 18px; }

/* Три колонки возможностей */
.tri-kolonki { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--otstup-5); margin-top: var(--otstup-6); }
.kolonka { background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-radius: var(--radius-kartochka); padding: var(--otstup-5); }
.kolonka .znak { width: 44px; height: 44px; border-radius: var(--radius-beydzh); background: var(--cvet-akcent-svetlyy); color: var(--cvet-akcent); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: var(--otstup-3); }
.kolonka p { color: var(--cvet-tekst-vtorichnyy); margin: 0; }

/* Список с галочками внутри блока */
.spisok-galok { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: var(--otstup-4) 0; }
.spisok-galok li { display: flex; gap: 10px; align-items: flex-start; }
.spisok-galok li::before { content: "✓"; color: var(--cvet-akcent); font-weight: 700; flex: none; }

/* Пакеты цен */
.pakety { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--otstup-4); margin-top: var(--otstup-6); align-items: stretch; }
.paket { background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-radius: var(--radius-kartochka); padding: var(--otstup-5); display: flex; flex-direction: column; position: relative; }
.paket.reko { border-color: var(--cvet-akcent); }
.paket .beydzh { position: absolute; top: -12px; left: var(--otstup-4); background: var(--cvet-akcent); color: var(--cvet-belyy); font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-beydzh); }
.paket h3 { font-size: 22px; }
.paket .cena { font-size: 32px; font-weight: 600; margin: var(--otstup-2) 0; }
.paket .cena small { font-size: 15px; font-weight: 400; color: var(--cvet-tekst-vtorichnyy); }
.paket .vedenie { color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); margin-bottom: var(--otstup-3); }
.paket ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--otstup-4); flex: 1; }
.paket ul li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.paket ul li::before { content: "✓"; color: var(--cvet-akcent); font-weight: 700; flex: none; }
.paket .srok { font-size: var(--razmer-melkiy); color: var(--cvet-tekst-vtorichnyy); margin-bottom: var(--otstup-3); }

/* FAQ аккордеон */
.faq { max-width: 800px; margin: var(--otstup-6) auto 0; }
.vopros { border-bottom: 1px solid var(--cvet-granica); }
.vopros summary { padding: var(--otstup-4) 0; font-weight: 500; font-size: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--otstup-3); }
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary::after { content: "+"; color: var(--cvet-akcent); font-size: 22px; flex: none; }
.vopros[open] summary::after { content: "\2212"; }
.vopros .otvet { padding: 0 0 var(--otstup-4); color: var(--cvet-tekst-vtorichnyy); }

/* Финальный призыв */
.final { padding: var(--otstup-7) 0; text-align: center; }
.final h2 { max-width: 640px; margin: 0 auto var(--otstup-4); }

/* Формы */
.forma { max-width: 560px; margin: var(--otstup-5) auto 0; display: flex; flex-direction: column; gap: var(--otstup-3); }
.forma label { font-size: var(--razmer-melkiy); font-weight: 500; display: block; margin-bottom: 6px; }
.forma input, .forma textarea, .forma select { width: 100%; padding: 12px 14px; border: 1px solid var(--cvet-granica); border-radius: var(--radius-knopka); font-family: var(--shrift-osnovnoy); font-size: 15px; background: var(--cvet-belyy); color: var(--cvet-tekst); }
.forma textarea { resize: vertical; min-height: 90px; }
.forma .soglasie { display: flex; gap: 8px; align-items: flex-start; font-size: var(--razmer-melkiy); color: var(--cvet-tekst-vtorichnyy); }
.forma .soglasie input { width: auto; margin-top: 3px; }
.forma .soglasie a { color: var(--cvet-akcent); }
.forma-podpis { color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); text-align: center; margin-top: var(--otstup-3); }

/* Квиз */
.kviz { max-width: 640px; margin: var(--otstup-5) auto 0; background: var(--cvet-belyy); border: 1px solid var(--cvet-granica); border-radius: var(--radius-kartochka); padding: var(--otstup-5); }
.kviz-shag { color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); margin-bottom: var(--otstup-2); }
.kviz-vopros { font-size: 22px; font-weight: 600; margin-bottom: var(--otstup-4); }
.kviz-variant { display: block; width: 100%; text-align: left; border: 1px solid var(--cvet-granica); border-radius: var(--radius-knopka); padding: 14px 16px; margin-bottom: 10px; background: var(--cvet-fon); font-family: var(--shrift-osnovnoy); font-size: 15px; cursor: pointer; }
.kviz-variant:hover { border-color: var(--cvet-akcent); background: var(--cvet-akcent-svetlyy); }
.kviz-nazad { color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); cursor: pointer; border: none; background: none; padding: 0; margin-top: var(--otstup-3); }
.kviz-progress { height: 4px; background: var(--cvet-granica); border-radius: 2px; margin-bottom: var(--otstup-4); overflow: hidden; }
.kviz-progress i { display: block; height: 100%; background: var(--cvet-akcent); width: 0%; transition: width .2s; }

/* Текст статьи (юридические страницы) */
.stat { max-width: 800px; margin: 0 auto; }
.stat h2 { font-size: var(--razmer-h4); margin-top: var(--otstup-6); }
.stat p { color: var(--cvet-tekst-vtorichnyy); }

/* Подвал */
.podval { padding: var(--otstup-7) 0 var(--otstup-4); }
.podval-setka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--otstup-5); padding-bottom: var(--otstup-6); }
.podval-setka b { display: block; margin-bottom: var(--otstup-2); font-weight: 500; }
.podval-setka a, .podval-setka span { display: block; color: var(--cvet-tekst-vtorichnyy); padding: 5px 0; }
.podval-setka a:hover { color: var(--cvet-belyy); }
.logo-podval { color: var(--cvet-belyy); margin-bottom: var(--otstup-3); }
.podval-setka p { color: var(--cvet-tekst-vtorichnyy); }
.podval-niz { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--otstup-4); color: var(--cvet-tekst-vtorichnyy); font-size: var(--razmer-melkiy); }

/* 404 */
.stranica-404 { padding: var(--otstup-8) 0; text-align: center; }
.stranica-404 h1 { font-size: 96px; color: var(--cvet-granica); }

/* Телефон */
@media (max-width: 900px) {
  .konteyner { padding: 0 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .geroy-setka { grid-template-columns: 1fr; gap: var(--otstup-5); }
  .shagi-setka { grid-template-columns: 1fr 1fr; }
  .tri-kolonki { grid-template-columns: 1fr; }
  .pakety { grid-template-columns: 1fr; }
  .podval-setka { grid-template-columns: 1fr 1fr; }
  .menyu { position: fixed; inset: 72px 0 0 0; background: var(--cvet-fon); flex-direction: column; padding: var(--otstup-4); gap: var(--otstup-3); transform: translateX(100%); transition: transform .2s; }
  body.menyu-otkryto .menyu { transform: translateX(0); }
  .burger { display: flex; }
  .shapka-knopki .knopka-osnovnaya { display: none; }
  .mok-pakety, .mok-shema { display: none; }
}

/* Виджет демо-бота в цвет сайта */
:root { --bot-cvet: #ff4800; --bot-fon: #ffffff; }