/* =============================================================
   DROVOSEKI DESIGN TOKENS — канон стиля Дровосеков.
   Шрифт Geologica самохостится через @fontsource (см. layout.tsx),
   поэтому Google-импорт убран. НЕ менять значения без причины
   (см. memory: drovoseki-style-canon).
   ============================================================= */

:root {
  /* ---------- ЦВЕТА ---------- */

  /* Бренд */
  --drv-red:           #E94545;   /* основной красный */
  --drv-red-hover:     #d63d3d;   /* красный на hover (на 2-3 шага темнее) */
  --drv-red-light:     #f07878;   /* мягкий красный (для градиента) */
  --drv-gradient-red:  linear-gradient(135deg, #E94545 0%, #f07878 100%);

  /* Прозрачные красные подложки */
  --drv-red-08:        rgba(233, 69, 69, 0.08);  /* icon-фон в светлых карточках */
  --drv-red-10:        rgba(233, 69, 69, 0.10);  /* мягкая подложка result/quote */
  --drv-red-15:        rgba(233, 69, 69, 0.15);
  --drv-red-20:        rgba(233, 69, 69, 0.20);  /* step-circle */

  /* Тёмные */
  --drv-dark:          #282828;   /* фон hero/problem/cta */
  --drv-text:          #393539;   /* основной текст на светлом */
  --drv-text-muted:    #5b5b5b;   /* вторичный текст */
  --drv-text-soft:     #666666;   /* третичный текст в card-text */
  --drv-text-faint:    #888888;   /* meta */
  --drv-text-disabled: #aaaaaa;

  /* Светлые */
  --drv-white:         #ffffff;
  --drv-bg:            #f7f7f7;   /* фон всей страницы */
  --drv-bg-secondary:  #f5f6f7;   /* медиа-плейсхолдеры */

  /* Прозрачные белые (для текста и бордеров на тёмном) */
  --drv-w-90:          rgba(255, 255, 255, 0.90);
  --drv-w-85:          rgba(255, 255, 255, 0.85);
  --drv-w-75:          rgba(255, 255, 255, 0.75);
  --drv-w-60:          rgba(255, 255, 255, 0.60);
  --drv-w-50:          rgba(255, 255, 255, 0.50);
  --drv-w-45:          rgba(255, 255, 255, 0.45);
  --drv-w-35:          rgba(255, 255, 255, 0.35);
  --drv-w-25:          rgba(255, 255, 255, 0.25);   /* бордеры на тёмном */
  --drv-w-15:          rgba(255, 255, 255, 0.15);

  /* Прозрачные чёрные (для бордеров и подложек на светлом) */
  --drv-k-06:          rgba(0, 0, 0, 0.06);        /* лёгкий бордер карточек */
  --drv-k-08:          rgba(0, 0, 0, 0.085);       /* бордер плоских карточек кабинета (без теней) */
  --drv-k-12:          rgba(0, 0, 0, 0.12);        /* тень медиа */
  --drv-k-25:          rgba(0, 0, 0, 0.25);        /* marquee-фон */

  /* Статусы */
  --drv-error:         #dc3535;
  --drv-error-soft:    rgba(220, 53, 53, 0.08);
  --drv-warning:       #c89420;
  --drv-warning-soft:  rgba(234, 170, 30, 0.08);
  --drv-success:       #16a34a;
  --drv-success-soft:  rgba(34, 197, 94, 0.10);
  --drv-info:          #3b82f6;
  --drv-info-soft:     rgba(59, 130, 246, 0.08);

  /* Header glassmorphism */
  --drv-glass-bg:      rgba(237, 237, 237, 0.65);
  --drv-glass-border:  rgba(255, 255, 255, 0.80);
  --drv-glass-blur:    blur(17px);

  /* поверхность карточек (для тёмной темы переопределяется) */
  --surface:           #ffffff;

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

  --drv-font: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Веса. Дровосеки = light (300) для body, 700 только для главных h1/h2 */
  --drv-w-light:    300;
  --drv-w-regular:  400;
  --drv-w-medium:   500;
  --drv-w-semibold: 600;
  --drv-w-bold:     700;

  /* Размеры */
  --drv-fs-hero:        46px;    /* hero h1 */
  --drv-fs-section:     48px;    /* h2 секций */
  --drv-fs-card-lg:     28px;    /* product/tariff title */
  --drv-fs-card:        24px;    /* card title */
  --drv-fs-subsection:  22px;
  --drv-fs-body-lg:     18px;    /* основной body */
  --drv-fs-body:        17px;    /* problem step text */
  --drv-fs-text:        16px;    /* стандарт абзаца */
  --drv-fs-small:       14px;    /* secondary */
  --drv-fs-meta:        13px;    /* meta, marquee */
  --drv-fs-tiny:        12px;    /* бейджи, метки */

  /* Letter-spacing */
  --drv-ls-tight:    -0.02em;   /* для крупных заголовков */
  --drv-ls-normal:   0;
  --drv-ls-wide:     0.04em;    /* uppercase бейджи */
  --drv-ls-button:   0.06em;    /* кнопки секондари */
  --drv-ls-hero-btn: 0.08em;    /* hero CTA */
  --drv-ls-marquee:  0.10em;

  /* Line-height */
  --drv-lh-hero:    1.08;    /* hero title */
  --drv-lh-heading: 1.15;    /* h2 */
  --drv-lh-title:   1.25;    /* card title */
  --drv-lh-body:    1.5;
  --drv-lh-relaxed: 1.55;

  /* ---------- РАДИУСЫ ---------- */
  --drv-radius-block:    30px;   /* hero/problem/cta огромные блоки */
  --drv-radius-modal:    26px;
  --drv-radius-card:     24px;   /* основные карточки */
  --drv-radius-media:    22px;   /* видео/скрины */
  --drv-radius-md:       16px;
  --drv-radius-icon:     14px;   /* icon-обёртки 56px */
  --drv-radius-sm:       12px;   /* мелкие блоки */
  --drv-radius-btn:      10px;   /* кнопки */
  --drv-radius-tag:      8px;    /* highlight в заголовке */
  --drv-radius-pill:     999px;  /* бейджи, pills */
  --drv-radius-header:   50px;   /* header glass */

  /* ---------- ТЕНИ ---------- */
  --drv-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.08);   /* hover карточек */
  --drv-shadow-media:      0 8px 24px rgba(0, 0, 0, 0.12);    /* медиа */
  --drv-shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.04);     /* мелкая */

  /* ---------- LAYOUT ---------- */
  --drv-container-header: 1160px;
  --drv-container:        1200px;
  --drv-container-pad:    20px;          /* отступ контейнера на десктопе */
  --drv-container-pad-mob: 15px;

  --drv-section-gap:      120px;         /* padding-top между секциями */
  --drv-block-pad:        64px;          /* внутренний padding hero/problem */
  --drv-block-pad-top:    72px;          /* hero сверху чуть больше */
  --drv-card-pad:         40px;
  --drv-gap-card:         20px;          /* gap в grid карточек */
  --drv-gap-text:         28px;

  /* ---------- АНИМАЦИИ ---------- */
  --drv-transition:       0.3s ease;
  --drv-transition-fast:  0.2s ease;
  --drv-easing-bounce:    cubic-bezier(0.22, 1, 0.36, 1);
  --drv-lift-sm:          translateY(-2px);
  --drv-lift-md:          translateY(-4px);
}

/* =============================================================
   ТЁМНАЯ ТЕМА КАБИНЕТА (scope: [data-theme="dark"])
   Переопределяем только поверхности/текст/бордеры — бренд (красный) общий.
   ============================================================= */
[data-theme="dark"] {
  --drv-bg:            #161616;
  --drv-bg-secondary:  #1e1e1e;
  --surface:           #232323;
  --drv-text:          #ededed;
  --drv-text-muted:    #b6b6b6;
  --drv-text-soft:     #a8a8a8;
  --drv-text-faint:    #8a8a8a;
  --drv-text-disabled: #6a6a6a;
  --drv-k-04:          rgba(255, 255, 255, 0.05);
  --drv-k-06:          rgba(255, 255, 255, 0.10);
  --drv-k-08:          rgba(255, 255, 255, 0.13);
  --drv-k-12:          rgba(255, 255, 255, 0.16);
  --drv-glass-bg:      rgba(28, 28, 28, 0.72);
  --drv-glass-border:  rgba(255, 255, 255, 0.10);
  color-scheme: dark;
}
[data-theme="dark"] {
  background-color: var(--drv-bg);
  color: var(--drv-text);
}

/* =============================================================
   BASE
   ============================================================= */

.drv-root {
  font-family: var(--drv-font);
  font-weight: var(--drv-w-light);
  font-size: var(--drv-fs-body-lg);
  line-height: 1.4;
  color: var(--drv-text);
  background-color: var(--drv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.drv-root *,
.drv-root *::before,
.drv-root *::after {
  box-sizing: border-box;
}

/* =============================================================
   ЗАГОЛОВКИ
   ============================================================= */

.drv-h1 {
  font-size: var(--drv-fs-hero);
  font-weight: var(--drv-w-bold);
  line-height: var(--drv-lh-hero);
  letter-spacing: var(--drv-ls-tight);
  margin: 0;
}

.drv-h2 {
  font-size: var(--drv-fs-section);
  font-weight: var(--drv-w-bold);
  line-height: var(--drv-lh-heading);
  letter-spacing: var(--drv-ls-tight);
  margin: 0;
  color: var(--drv-text);
}

.drv-h3 {
  font-size: var(--drv-fs-card);
  font-weight: var(--drv-w-semibold);
  line-height: var(--drv-lh-title);
  margin: 0;
}

/* Подсветка в заголовке: «слово на красном» */
.drv-highlight {
  display: inline-block;
  padding: 0 10px 2px;
  background: var(--drv-red);
  color: #fff;
  border-radius: var(--drv-radius-tag);
  line-height: 1.05;
  white-space: nowrap;
}

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

.drv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 40px;
  background: var(--drv-red);
  color: #fff;
  font-family: var(--drv-font);
  font-size: 15px;
  font-weight: var(--drv-w-medium);
  text-transform: uppercase;
  letter-spacing: var(--drv-ls-button);
  border-radius: var(--drv-radius-btn);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--drv-transition), transform var(--drv-transition-fast);
}

.drv-btn:hover { background: var(--drv-red-hover); transform: var(--drv-lift-sm); }
.drv-btn:active { transform: translateY(0); }

/* Большой CTA — для hero */
.drv-btn--lg {
  height: 72px;
  padding: 0 56px;
  font-size: 17px;
  letter-spacing: var(--drv-ls-hero-btn);
}

/* Светлая кнопка (на тёмном фоне) */
.drv-btn--light {
  background: #fff;
  color: var(--drv-red);
}
.drv-btn--light:hover { background: var(--drv-bg); }

/* Призрачная кнопка */
.drv-btn--ghost {
  background: transparent;
  color: var(--drv-text);
  border: 1px solid var(--drv-k-06);
}
.drv-btn--ghost:hover { background: var(--drv-red-08); color: var(--drv-red); border-color: var(--drv-red); }

/* =============================================================
   БЕЙДЖИ
   ============================================================= */

/* Бейдж на тёмном (контурный, светлый) */
.drv-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--drv-w-25);
  border-radius: var(--drv-radius-pill);
  font-size: var(--drv-fs-meta);
  font-weight: var(--drv-w-regular);
  color: var(--drv-w-60);
  letter-spacing: var(--drv-ls-wide);
  text-transform: uppercase;
}

/* Красный сплошной бейдж */
.drv-badge--red {
  background: var(--drv-red);
  color: #fff;
  border: none;
  font-weight: var(--drv-w-semibold);
  font-size: var(--drv-fs-tiny);
}

/* Бейдж soft-red (на светлом фоне) */
.drv-badge--soft {
  background: var(--drv-red-08);
  color: var(--drv-red);
  border: none;
  font-size: var(--drv-fs-tiny);
  font-weight: var(--drv-w-medium);
}

/* =============================================================
   КАРТОЧКИ
   ============================================================= */

.drv-card {
  background: #fff;
  border: 1px solid var(--drv-k-06);
  border-radius: var(--drv-radius-card);
  padding: var(--drv-card-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--drv-transition), box-shadow var(--drv-transition);
}

.drv-card:hover {
  transform: var(--drv-lift-md);
  box-shadow: var(--drv-shadow-card-hover);
}

/* Красная градиентная карточка */
.drv-card--red {
  background: var(--drv-gradient-red);
  color: #fff;
  border: none;
}

/* Тёмная карточка-блок (hero/problem) */
.drv-card--dark {
  background: var(--drv-dark);
  border-radius: var(--drv-radius-block);
  padding: var(--drv-block-pad-top) var(--drv-block-pad);
  color: #fff;
  border: none;
}
.drv-card--dark:hover { transform: none; box-shadow: none; }

/* Icon-обёртка в карточке */
.drv-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--drv-radius-icon);
  background: var(--drv-red-08);
  color: var(--drv-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drv-card--red .drv-card-icon { background: var(--drv-w-15); color: #fff; }

/* =============================================================
   STEPS / NUMBERED
   ============================================================= */

.drv-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
}

.drv-step__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--drv-red-20);
  color: var(--drv-red);
  font-size: var(--drv-fs-small);
  font-weight: var(--drv-w-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* На светлом фоне используем мягкий вариант */
.drv-step--light .drv-step__num {
  background: var(--drv-red-08);
}

/* =============================================================
   ЦИТАТА / RESULT (с левой полосой)
   ============================================================= */

.drv-quote {
  padding: 24px;
  background: var(--drv-red-10);
  border-left: 3px solid var(--drv-red);
  border-radius: 0 var(--drv-radius-sm) var(--drv-radius-sm) 0;
}
.drv-quote strong { font-weight: var(--drv-w-semibold); color: var(--drv-red); }

/* =============================================================
   GLASS HEADER
   ============================================================= */

.drv-header {
  max-width: var(--drv-container-header);
  height: 62px;
  background: var(--drv-glass-bg);
  border: 1px solid var(--drv-glass-border);
  border-radius: var(--drv-radius-header);
  padding: 0 24px;
  -webkit-backdrop-filter: var(--drv-glass-blur);
  backdrop-filter: var(--drv-glass-blur);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

/* =============================================================
   СТАТУС-БЕЙДЖИ
   ============================================================= */

.drv-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--drv-radius-tag);
  font-size: var(--drv-fs-small);
  font-weight: var(--drv-w-medium);
}
.drv-status--ok    { background: var(--drv-success-soft); color: var(--drv-success); }
.drv-status--warn  { background: var(--drv-warning-soft); color: var(--drv-warning); }
.drv-status--error { background: var(--drv-error-soft);   color: var(--drv-error); }
.drv-status--info  { background: var(--drv-info-soft);    color: var(--drv-info); }

/* =============================================================
   КОНТЕЙНЕР И СЕКЦИИ
   ============================================================= */

.drv-section {
  padding: var(--drv-section-gap) 0 0;
}
.drv-section__container {
  max-width: var(--drv-container);
  margin: 0 auto;
  padding: 0 var(--drv-container-pad);
}

/* Grid карточек 2×N */
.drv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--drv-gap-card);
}

@media (max-width: 1024px) {
  .drv-section { padding: 80px 0 0; }
  .drv-card { padding: 32px; }
  .drv-card--dark { padding: 48px 40px; }
}

@media (max-width: 768px) {
  .drv-section { padding: 60px 0 0; }
  .drv-section__container { padding: 0 var(--drv-container-pad-mob); }
  .drv-grid-2 { grid-template-columns: 1fr; }
  .drv-card { padding: 28px; border-radius: 20px; }
  .drv-card--dark { padding: 36px 28px; border-radius: 24px; }
  .drv-h1 { font-size: 32px; }
  .drv-h2 { font-size: 30px; }
  .drv-btn--lg { height: 60px; padding: 0 36px; font-size: 15px; }
}

@media (max-width: 480px) {
  .drv-h1 { font-size: 28px; }
  .drv-h2 { font-size: 26px; }
  .drv-h3 { font-size: 20px; }
}

/* =============================================================
   MARQUEE (бегущая строка)
   ============================================================= */

@keyframes drv-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.drv-marquee {
  background: var(--drv-k-25);
  padding: 14px 0;
  overflow: hidden;
}
.drv-marquee__track {
  display: flex;
  white-space: nowrap;
  animation: drv-marquee 30s linear infinite;
}
.drv-marquee__text {
  font-size: var(--drv-fs-meta);
  color: var(--drv-w-45);
  text-transform: uppercase;
  letter-spacing: var(--drv-ls-marquee);
  padding: 0 30px;
  flex-shrink: 0;
}