/* ─── 7-R Section Background Rhythm · sandbox 2026-05-18 ──────
   После light-theme: --dark-2 (#f4f8fb) было слишком близко к
   #fff — секции сливались, карточки терялись на одинаковом фоне.
   Здесь:
     1) Усиливаю tints — заметная разница между белыми и tinted
     2) Чередование секций: hero/benefits/portfolio/contact = white,
        process/pricing/footer-divider = tinted
     3) Базовый shadow на всех карточках (был только на :hover)
     4) Footer темнеет до --ink (light-theme сделал его светлым)
   ────────────────────────────────────────────────────────────── */

:root {
  --dark-2: #eef4fb;
  --dark-3: #dfe9f5;
  --card-shadow:
    0 1px 2px rgba(10, 13, 20, 0.04),
    0 6px 18px -6px rgba(10, 13, 20, 0.10);
  --card-shadow-hover:
    0 4px 8px rgba(10, 13, 20, 0.06),
    0 18px 40px -10px rgba(10, 13, 20, 0.14);
  --card-border: rgba(10, 13, 20, 0.08);
  --card-border-hover: rgba(0, 102, 255, 0.30);
}

/* ─── Section ritm (override style.css backgrounds) ────────── */
#hero,
#benefits,
#portfolio,
#contact { background: #ffffff !important; }

#process,
#pricing-promo { background: var(--dark-2) !important; }

/* AISection уже имеет свой gradient в aisection.css — не трогать */

/* ─── Soft section dividers (вместо контрастных границ) ───── */
section { border-top: 1px solid transparent; }
#process,
#pricing-promo {
  border-top: 1px solid rgba(0, 102, 255, 0.06);
  border-bottom: 1px solid rgba(0, 102, 255, 0.06);
}

/* ─── Base card shadow & border (общие карточки) ──────────── */
.portfolio-card,
.bento-card,
.plan-card,
.service-card,
.benefit-card,
.testimonial-card {
  box-shadow: var(--card-shadow);
  border-color: var(--card-border) !important;
  background: #ffffff !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.portfolio-card:hover,
.bento-card:hover,
.plan-card:hover,
.service-card:hover,
.benefit-card:hover,
.testimonial-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover) !important;
}
.portfolio-link:hover .portfolio-card,
.bento-card:hover {
  transform: translateY(-2px);
}

/* Тёмный browser-mockup специально остаётся (эстетика «фото браузера») */
.portfolio-card { overflow: hidden; }

/* ─── Pricing promo card (на tinted фоне — белый + shadow) ── */
.pricing-promo-card {
  background: #ffffff !important;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border) !important;
}

/* ─── Footer: тёмный (откат light-theme override) ──────────── */
footer {
  background: #0a0d14 !important;
  border-top: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
footer .container,
footer p,
footer span:not([style*="color"]),
footer li,
footer ul { color: rgba(255, 255, 255, 0.65) !important; }
footer h4 {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
footer .footer-brand p { color: rgba(255, 255, 255, 0.55) !important; }
footer a {
  color: rgba(255, 255, 255, 0.72) !important;
  transition: color .15s ease;
}
footer a:hover { color: var(--brand) !important; }
footer .logo { color: #ffffff !important; }
footer .logo span { color: var(--brand) !important; }
footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.45) !important;
  padding-top: 24px;
  margin-top: 40px;
}
footer .footer-bottom a { color: rgba(255, 255, 255, 0.55) !important; }
footer .social-link img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity .15s ease;
}
footer .social-link:hover img { opacity: 1; }
/* ─── 2026-05-19 · Pricing-promo card: ВОЗВРАТ К DARK ───
   На light-theme был перебит на белый (bg-rhythm.css), отсюда «слабо читался».
   Восстанавливаем dark gradient + blue glow, как был на старом дизайне.
   ─────────────────────────────────────────────────────── */
.pricing-promo-card {
  background: linear-gradient(135deg, #0a0d14 0%, #4c85e9 100%) !important;
  border: 1px solid rgba(0, 102, 255, 0.28) !important;
  box-shadow:
    0 30px 80px -24px rgba(0, 102, 255, 0.28),
    0 10px 28px -8px rgba(10, 13, 20, 0.18) !important;
  color: #ffffff;
}
.pricing-promo-card::before {
  background: radial-gradient(circle, rgba(0, 102, 255, 0.18) 0%, transparent 70%) !important;
}

/* Заголовок */
.pricing-promo-card .section-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
.pricing-promo-card .section-title span {
  color: #4d8dff !important;
  background: none !important;
  -webkit-text-fill-color: #4d8dff !important;
}

/* Подзаголовок и текст */
.pricing-promo-card .pricing-promo-sub {
  color: rgba(255, 255, 255, 0.72) !important;
}
.pricing-promo-card .pricing-promo-list li {
  color: rgba(255, 255, 255, 0.92) !important;
}
.pricing-promo-card .pricing-promo-check {
  background: rgba(0, 102, 255, 0.20) !important;
  color: #6ea8ff !important;
}

/* Kicker (badge «Калькулятор пакетов») */
.pricing-promo-card .kicker {
  color: rgba(255, 255, 255, 0.90) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(0, 102, 255, 0.35) !important;
}
.pricing-promo-card .kicker .dot {
  background: #4d8dff !important;
}
.pricing-promo-card .kicker .text {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* Preview-таблица справа — glass-эффект на тёмном */
.pricing-promo-card .pricing-promo-preview {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.pricing-promo-card .pricing-promo-row {
  color: rgba(255, 255, 255, 0.65) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
.pricing-promo-card .pricing-promo-row span:last-child {
  color: #ffffff !important;
}
.pricing-promo-card .pricing-promo-row-total span:first-child {
  color: #ffffff !important;
}
.pricing-promo-card .pricing-promo-total {
  color: #4d8dff !important;
}

/* Кнопки на dark карточке: primary остаётся синяя, secondary — стеклянная */
.pricing-promo-card .btn-secondary {
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pricing-promo-card .btn-secondary:hover {
  background: #ffffff !important;
  color: #0a0d14 !important;
  border-color: #ffffff !important;
}

/* ─── 2026-05-19 · Pricing-promo polish: усиленный glow + dots ─── */
.pricing-promo-card {
  /* Multi-layer glow: spread (атмосфера) + halo (близкая подсветка) + ground (тень опоры) */
  box-shadow:
    0 0 80px -10px rgba(0, 102, 255, 0.32),
    0 40px 100px -20px rgba(0, 102, 255, 0.45),
    0 14px 36px -12px rgba(10, 13, 20, 0.22) !important;
}

/* Dots texture overlay — едва видимая, добавляет «премиальную ткань» */
.pricing-promo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: inherit;
  mask-image: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
  z-index: 0;
}
.pricing-promo-card > * {
  position: relative;
  z-index: 1;
}

/* ─── 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%, #4c85e9 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;
}