/* ─── 7-R Light Theme Override · sandbox 2026-05-18 ───────────
   Подключается ПОСЛЕ css/style.css. Переопределяет тёмные
   переменные на светлые, чтобы body + все dark-секции стали
   светлыми без правки каждого селектора. Кнопки/тексты на
   mint-фоне используют --ink (зафиксирован отдельно).
   ─────────────────────────────────────────────────────────── */

:root {
  /* контрастный текст для использования на цветных кнопках */
  --ink: #0a0d14;

  /* переопределение тёмной палитры → светлая */
  --dark:   #ffffff;
  --dark-2: #f4f8fb;
  --dark-3: #e8eef5;
  --light:  #0a0d14;       /* был белый текст → теперь тёмный */
  --gray:   #6b7280;       /* secondary text */

  /* ─── g2-blue палитра (вместо mint, sandbox 2026-05-18) ─── */
  --brand:       #0066ff;
  --brand-dark:  #0052cc;
  --brand-light: #dbeafe;
}

/* ─── Hero H1: тёмный текст на светлом фоне ────────────────── */
.hero-title { color: var(--ink) !important; }
.hero-title .gradient-text,
.hero-h1 .accent {
  background: linear-gradient(135deg, #0066ff 0%, #6366f1 50%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── Navbar: полупрозрачный белый со скрол-блюром ─────────── */
#navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10, 13, 20, 0.06);
}
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 20px rgba(10, 13, 20, 0.06);
}
.burger span,
#navbar.scrolled .burger span { background: var(--ink); }
.mobile-menu { background: rgba(255, 255, 255, 0.98) !important; }
.mobile-menu a { color: var(--ink) !important; }

/* ─── Logo: «7-» тёмный на светлом navbar, «R» mint ────────── */
.logo { color: var(--ink) !important; }
.logo span { color: var(--brand) !important; }

/* ─── Nav links: capsule hover + underline indicator ──────── */
.nav-links a,
#navbar.scrolled .nav-links a {
  position: relative;
  color: var(--l-mid) !important;
  padding: 8px 14px;
  border-radius: 9999px;
  transition: color .25s ease, background .25s ease;
}
.nav-links a::after,
#navbar.scrolled .nav-links a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.nav-links li:not(.has-dropdown) a:hover,
#navbar.scrolled .nav-links li:not(.has-dropdown) a:hover {
  color: var(--ink) !important;
  background: rgba(0,102,255,0.08);
}
.nav-links li:not(.has-dropdown) a:hover::after {
  transform: scaleX(1);
}
/* dropdown trigger: no underline (имеет ▾ маркер) */
.nav-links .has-dropdown > a:hover,
#navbar.scrolled .nav-links .has-dropdown > a:hover {
  color: var(--ink) !important;
  background: rgba(0,102,255,0.08);
}
.nav-links .has-dropdown > a::after { display: none; }
.nav-links .has-dropdown > a {
  /* re-add ▾ marker via separate pseudo */
}

/* Dropdown panel: чище и плотнее ─────────────────────────── */
.dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(10, 13, 20, 0.08);
  box-shadow: 0 14px 40px rgba(10, 13, 20, 0.10), 0 4px 12px rgba(10, 13, 20, 0.04);
  border-radius: 14px !important;
}
.dropdown a {
  color: var(--l-mid) !important;
  padding: 10px 14px !important;
  border-radius: 8px;
  margin: 2px 4px;
}
.dropdown a:hover {
  color: var(--ink) !important;
  background: rgba(0,102,255,0.10) !important;
}
.dropdown-label {
  color: var(--l-muted) !important;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px 4px;
}

/* nav-cta button: outlined dark, не mint flood */
.nav-cta {
  color: var(--ink) !important;
}

/* ─── btn-dark инвертируется: тёмный фон, mint текст ───────── */
.btn-dark {
  background: var(--ink) !important;
  color: var(--brand) !important;
}
.btn-dark:hover {
  background: #1a2640 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* ─── Карточки / контейнеры: тонкий бордер взамен dark-bg ──── */
.service-card,
.content-card,
.content-section.alt .content-card,
.step,
.plan-card,
.calc-card,
.quiz-card,
.contact-info,
.contact-form {
  border: 1px solid rgba(10, 13, 20, 0.08);
  box-shadow: 0 1px 3px rgba(10, 13, 20, 0.04);
}
.service-card:hover,
.plan-card:hover {
  border-color: rgba(0,102,255,0.4);
  box-shadow: 0 12px 36px rgba(10, 13, 20, 0.08);
}

/* ─── Featured AI card: gradient на mint, не на dark ──────── */
.featured-card,
.service-card.featured {
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(0,102,255,.18) 0%, transparent 65%),
    var(--dark-2) !important;
  border: 1px solid rgba(0,102,255,0.25) !important;
}

/* ─── Form inputs: светлый фон + тонкий бордер ─────────────── */
input, textarea, select {
  background: #ffffff !important;
  border: 1px solid rgba(10, 13, 20, 0.12) !important;
  color: var(--ink) !important;
}
input::placeholder,
textarea::placeholder { color: var(--l-muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.15);
}
#contact select option {
  background: #ffffff !important;
  color: var(--ink) !important;
}

/* ─── Step-num кружок: светло-серый фон, mint hover ────────── */
.step-num {
  background: var(--dark-2) !important;
  border: 1px solid rgba(10, 13, 20, 0.08);
  color: var(--ink);
}

/* ─── Service-time pill ────────────────────────────────────── */
.service-time {
  background: var(--dark-3) !important;
  color: var(--ink) !important;
}

/* ─── Section заголовки светлой темы ───────────────────────── */
#process .section-title,
#social .section-title,
.contact-info-title { color: var(--ink) !important; }

/* ─── Тонкий border между секциями (вместо контраста цветов) ─ */
section { border-top: 1px solid transparent; }

/* ─── Footer: светлый, не тёмный ───────────────────────────── */
footer {
  background: var(--dark-2) !important;
  border-top: 1px solid rgba(10, 13, 20, 0.08);
}
footer a { color: var(--l-mid); }
footer a:hover { color: var(--brand); }

/* ─── Cookie-banner: убираем mint-border (mint палитра уйти),
   тонкая shadow вместо border, не пересекает секции линией ──── */
#cookie-banner {
  border-top: none !important;
  box-shadow: 0 -8px 24px rgba(10, 13, 20, 0.10);
}

/* ═══ 2026-05-18 · mock-6 merge ══════════════════════════════════
   1) Системный шрифт-стек (как на beta.scrum360test.ru).
      Mac/iOS — SF Pro Display, Windows 11 — Segoe UI Variable.
      Снимает Inter, ускоряет first paint.
   2) Фикс кнопок .btn-primary / .btn-secondary под светлую тему
      (боевой style.css ставит color: var(--ink) на синем + shimmer
      + pulse — не читается). */
html, body,
h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
}

.btn-primary {
  color: #ffffff !important;
  animation: none !important;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.25);
}
.btn-primary::after { display: none !important; }
.btn-primary:hover {
  background: var(--brand-dark) !important;
  box-shadow: 0 12px 28px rgba(0, 102, 255, 0.35);
}
.btn-secondary {
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.12);
}
.btn-secondary:hover {
  border-color: var(--brand) !important;
  color: #ffffff !important;
  background: var(--brand) !important;
  box-shadow: 0 8px 22px rgba(0, 102, 255, 0.28);
  transform: translateY(-1px);
}

/* ─── 2026-05-18 · Outline-кнопки на тёмных wave-секциях ──────
   #portfolio, #benefits, #process — bg идёт через mask-wave (transparent
   на section, рисуется absolute pseudo). brand-blue outline на тёмно-синем
   wave сливается. На этих секциях — белая обводка + белый текст. */
#portfolio .portfolio-more,
#benefits .btn-secondary,
#process .btn-secondary {
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: all 0.2s ease;
}
#portfolio .portfolio-more:hover,
#benefits .btn-secondary:hover,
#process .btn-secondary:hover {
  background: #ffffff !important;
  color: var(--brand) !important;
  border-color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-1px);
}

/* ─── 2026-05-18 · .bento-cta: белый текст на синем (был ink на brand) ── */
.bento-cta {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.bento-card--cta:hover .bento-cta,
.bento-card:hover .bento-cta {
  color: #ffffff !important;
}

/* ─── 2026-05-18 · .social-link: убрать плашку, показать сам логотип
   tg.webp и max.webp это уже самостоятельные брендовые app-icons
   (круглый/squircle с цветным градиентом). Обрамлять их плашкой
   бессмысленно — она их перекрывает или не контрастна. Показываем
   иконку как есть, увеличиваем до 32px, hover — лёгкий scale. */
.social-link {
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  transition: transform 0.2s ease !important;
}
.social-link img {
  width: 32px !important;
  height: 32px !important;
  display: block;
  /* Отменяем bg-rhythm.css:114 brightness(0)+invert — он делал
     иконки белыми силуэтами под тёмную плашку. У нас плашки нет
     → нужны полноцветные брендовые логотипы. */
  filter: none !important;
  opacity: 1 !important;
}
.social-link:hover {
  background: transparent !important;
  border: none !important;
  transform: translateY(-2px) scale(1.08) !important;
}

/* ─── 2026-05-18 · .bento-cta: высокая специфичность чтобы перебить
   bg-cyber.css:130 `#benefits .bento-card * { color: var(--ink) !important }`
   которое затирает обычный .bento-cta selector. */
#benefits .bento-card .bento-cta,
#benefits .bento-card--cta .bento-cta {
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* ─── 2026-05-19 · Калькулятор /uslugi/: dark cards для контраста на cyan gradient ─── */
.content-section.alt .calc-option-inner {
  background: linear-gradient(135deg, #0f1320 0%, #181d2b 100%) !important;
  border: 1px solid rgba(0, 102, 255, 0.20) !important;
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
  color: #ffffff !important;
}

.content-section.alt .calc-option:hover .calc-option-inner {
  border-color: rgba(0, 102, 255, 0.55) !important;
  box-shadow:
    0 18px 44px -10px rgba(0, 102, 255, 0.30),
    0 0 0 1px rgba(0, 102, 255, 0.15) inset !important;
  transform: translateY(-2px);
}

.content-section.alt .calc-option > input[type="checkbox"]:checked ~ .calc-option-inner {
  background: linear-gradient(135deg, #0f1320 0%, #1a2138 100%) !important;
  border-color: var(--brand) !important;
  box-shadow:
    0 0 0 2px rgba(0, 102, 255, 0.45),
    0 18px 44px -10px rgba(0, 102, 255, 0.40) !important;
}

/* Текст внутри карточки на тёмном */
.content-section.alt .calc-option-name { color: #ffffff !important; }
.content-section.alt .calc-option-desc { color: rgba(255, 255, 255, 0.62) !important; }
.content-section.alt .calc-option-price { color: #6ea8ff !important; }
.content-section.alt .calc-option-icon { color: #6ea8ff !important; }

/* Expandable site-options (lending/корп/магазин) */
.content-section.alt .calc-site-options {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.content-section.alt .calc-radio {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.content-section.alt .calc-radio:hover { background: rgba(0, 102, 255, 0.08) !important; }
.content-section.alt .calc-radio-name { color: #ffffff !important; }
.content-section.alt .calc-radio-meta { color: rgba(255, 255, 255, 0.55) !important; }
.content-section.alt .calc-radio input[type="radio"]:checked ~ .calc-radio-name { color: #6ea8ff !important; }

/* Правая колонка — calc-result */
.content-section.alt .calc-result-inner {
  background: linear-gradient(135deg, #0a0d14 0%, #14181f 100%) !important;
  border: 1px solid rgba(0, 102, 255, 0.30) !important;
  box-shadow: 0 18px 44px -8px rgba(0, 102, 255, 0.22) !important;
}
.content-section.alt .calc-result .calc-label { color: rgba(255, 255, 255, 0.75) !important; }
.content-section.alt .calc-result .calc-value { color: #ffffff !important; }
.content-section.alt .calc-result .calc-total .calc-value { color: #6ea8ff !important; }
.content-section.alt .calc-result .calc-note { color: rgba(255, 255, 255, 0.60) !important; }

/* AI-опция: highlighted с фиолетовым accent (отличить от обычных) */
.content-section.alt .calc-option--ai .calc-option-inner {
  border: 1px solid rgba(124, 58, 237, 0.40) !important;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.15) inset,
    0 12px 32px -8px rgba(124, 58, 237, 0.22) !important;
}
.content-section.alt .calc-option--ai .calc-option-icon { color: #a78bfa !important; }
.content-section.alt .calc-option--ai .calc-option-price { color: #a78bfa !important; }
.content-section.alt .calc-option--ai:hover .calc-option-inner {
  border-color: rgba(124, 58, 237, 0.70) !important;
  box-shadow:
    0 18px 44px -10px rgba(124, 58, 237, 0.40),
    0 0 0 1px rgba(124, 58, 237, 0.25) inset !important;
}
.content-section.alt .calc-option--ai > input[type="checkbox"]:checked ~ .calc-option-inner {
  border-color: #7c3aed !important;
  box-shadow:
    0 0 0 2px rgba(124, 58, 237, 0.50),
    0 18px 44px -10px rgba(124, 58, 237, 0.45) !important;
}
.calc-option--ai .calc-ai-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.40);
  border-radius: 999px;
  vertical-align: middle;
}