/* ═══════════════════════════════════════════════════════════════════════
   ВАРИАНТ 1 · «МЯГКИЙ ПРЕМИУМ» (выбран пользователем 2026-11-11)
   Подключается ПОСЛЕ refined.css. Поверх строгой базы: объёмные кнопки с
   внутренним бликом и цветной тенью, мягкие «парящие» карточки, метки на
   бирюзовой подложке. Без мультяшности: никаких «таблеток», клипарта и
   толстых линий. Чтобы вернуть строгий вариант — убрать этот файл из index.html.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --rf-r-card: 16px;
  --rf-r-ctl: 12px;
  --rf-r-chip: 8px;
  --sp-teal-text: #2f7f88;
  --sp-btn-grad: linear-gradient(180deg, #5cb0b9 0%, #4596a0 100%);
  --sp-btn-grad-hover: linear-gradient(180deg, #66bac3 0%, #4a9ea8 100%);
  --sp-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -8px rgba(77, 160, 169, 0.6);
  --sp-btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 28px -10px rgba(77, 160, 169, 0.7);
  --sp-soft-ring: 0 1px 2px rgba(21, 21, 21, 0.06), 0 0 0 1px rgba(21, 21, 21, 0.08);
  --sp-soft-ring-hover: 0 8px 18px -10px rgba(21, 40, 44, 0.3), 0 0 0 1px rgba(77, 160, 169, 0.45);
  --sp-card-shadow: 0 1px 2px rgba(21, 21, 21, 0.05), 0 10px 30px -14px rgba(21, 40, 44, 0.22);
  --sp-card-shadow-hover: 0 2px 4px rgba(21, 21, 21, 0.05), 0 24px 46px -18px rgba(21, 40, 44, 0.32);
  --sp-lift: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Основные кнопки: объём + блик + цветная тень ── */
html body .nf-hero--brand .nf-hero-btn--primary,
html body .nf-btn.nf-btn-primary,
html body .nf-pc__add,
html body .nf-footer-cta-btn,
html body #quickQuoteBtn {
  background: var(--sp-btn-grad) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  box-shadow: var(--sp-btn-shadow) !important;
  transition: transform 0.25s var(--sp-lift), box-shadow 0.25s var(--sp-lift), background 0.25s var(--sp-lift) !important;
}
html body .nf-hero--brand .nf-hero-btn--primary:hover,
html body .nf-btn.nf-btn-primary:not(:disabled):hover,
html body .nf-pc__add:hover,
html body .nf-footer-cta-btn:hover,
html body #quickQuoteBtn:hover {
  background: var(--sp-btn-grad-hover) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  box-shadow: var(--sp-btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
html body .nf-hero--brand .nf-hero-btn.nf-hero-btn--primary::after {
  display: inline-block !important;
  content: "→" !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin-left: 10px;
  background: none !important;
  opacity: 1 !important;
  transition: transform 0.25s var(--sp-lift);
}
html body .nf-hero--brand .nf-hero-btn.nf-hero-btn--primary:hover::after { transform: translateX(3px); }

/* ── Вторичные кнопки: белые, с мягким кольцом ── */
html body .nf-hero--brand .nf-hero-btn--secondary,
html body .nf-home-section .nf-home-link-secondary.nf-home-link-secondary.nf-home-link-secondary,
html body .nf-home-link-secondary,
html body .nf-btn.nf-btn-secondary,
html body .nf-btn.nf-btn-ghost-dark,
html body .nf-pm-card__open,
html body .nf-pc__more,
html body .nf-popular__nav-btn,
html body .nf-header--ds .nf-header-icon-btn {
  background: #fff !important;
  border: 0 !important;
  color: var(--rf-text) !important;
  box-shadow: var(--sp-soft-ring) !important;
  transition: transform 0.25s var(--sp-lift), box-shadow 0.25s var(--sp-lift), color 0.2s !important;
}
html body .nf-hero--brand .nf-hero-btn--secondary:hover,
html body .nf-home-section .nf-home-link-secondary.nf-home-link-secondary.nf-home-link-secondary:hover,
html body .nf-home-link-secondary:hover,
html body .nf-btn.nf-btn-secondary:hover,
html body .nf-btn.nf-btn-ghost-dark:hover,
html body .nf-pm-card__open:hover,
html body .nf-pc__more:hover,
html body .nf-popular__nav-btn:hover,
html body .nf-header--ds .nf-header-icon-btn:hover {
  box-shadow: var(--sp-soft-ring-hover) !important;
  color: var(--sp-teal-text) !important;
  transform: translateY(-1px) !important;
}
html body .nf-hero--brand .nf-hero-btn { height: 52px !important; }

/* ── Поиск и счётчик корзины ── */
html body .nf-header--ds .nf-search {
  border: 0 !important;
  box-shadow: var(--sp-soft-ring) !important;
}
html body .nf-header--ds .nf-search:focus-within {
  box-shadow: 0 0 0 1px rgba(77, 160, 169, 0.55), 0 0 0 4px rgba(77, 160, 169, 0.12) !important;
}
html body .nf-header--ds .nf-cart-count {
  border-radius: 999px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  background: var(--sp-btn-grad) !important;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(77, 160, 169, 0.7) !important;
}

/* ── Карточки: мягко «парят», при наведении приподнимаются ── */
html body .nf-pop-card,
html body .pfg-card,
html body .nf-pc,
html body .nf-hn-featured,
html body .news-featured-card,
html body .nf-about-audience-item,
html body .nf-about-value,
html body .nf-about-mission-note,
html body .nf-contact-card,
html body .nf-map-card,
html body .nf-prt,
html body .nf-pm-card {
  border: 1px solid rgba(21, 21, 21, 0.06) !important;
  box-shadow: var(--sp-card-shadow) !important;
  transition: transform 0.35s var(--sp-lift), box-shadow 0.35s var(--sp-lift), border-color 0.35s var(--sp-lift) !important;
}
html body .nf-pop-card:hover,
html body .pfg-card:hover,
html body .pfg-card:focus-visible,
html body .nf-pc:hover,
html body .nf-hn-featured:hover,
html body .news-featured-card:hover,
html body .nf-contact-card:hover,
html body .nf-prt:hover,
html body .nf-prt:focus-visible,
html body .nf-pm-card:hover {
  border-color: rgba(77, 160, 169, 0.3) !important;
  box-shadow: var(--sp-card-shadow-hover) !important;
  transform: translateY(-4px) !important;
}
html body .nf-contacts-hub,
html body .nf-contacts-info-extra {
  box-shadow: var(--sp-card-shadow) !important;
  border-color: rgba(21, 21, 21, 0.05) !important;
}

/* ── Метки: бирюзовая подложка, обычный регистр ── */
html body .nf-pop-card__cat,
html body .nf-pc__popular,
html body .nf-ps__tag,
html body .news-featured-chip,
html body .news-page-hero-kicker,
html body .nf-map-card-badge,
html body .nf-hn-featured [class*="chip"],
html body .nf-hn-featured [class*="tag"],
html body .nf-nr-item [class*="tag"],
html body .nf-nr-item [class*="chip"],
html body [class*="news"] [class*="__cat"],
html body .news-category-chip {
  background: rgba(77, 160, 169, 0.12) !important;
  border: 0 !important;
  color: var(--sp-teal-text) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  border-radius: var(--rf-r-chip) !important;
}
html body .nf-pop-card__cat,
html body .nf-pc__popular { background: rgba(236, 246, 247, 0.95) !important; }

/* Статус наличия — подложка в тон статуса */
html body .nf-pop-card__status,
html body .nf-pc__status,
html body .nf-pm-card__status {
  background: color-mix(in srgb, currentColor 12%, #fff) !important;
  border: 0 !important;
  border-radius: var(--rf-r-chip) !important;
  padding: 5px 10px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
html body .nf-pop-card__status-dot,
html body .nf-pm-card__status-dot { border-radius: 50% !important; }

/* «Опыт работы…» на главном экране — мягкая плашка с точкой */
html body .nf-hero--brand .nf-hero__years-pill {
  background: rgba(77, 160, 169, 0.1) !important;
  border-radius: 10px !important;
  padding: 7px 14px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sp-teal-text) !important;
  gap: 10px !important;
}
html body .nf-hero--brand .nf-hero__years-pill::before {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50%;
  background: var(--sp-btn-grad) !important;
  box-shadow: 0 0 0 4px rgba(77, 160, 169, 0.16);
}

/* ── Иконка направления — объёмная плитка ── */
html body .pfg-card__icon {
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(77, 160, 169, 0.14), rgba(77, 160, 169, 0.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(77, 160, 169, 0.16);
  color: var(--sp-teal-text) !important;
}
html body .pfg-card:hover .pfg-card__icon {
  background: var(--sp-btn-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(77, 160, 169, 0.7);
}
html body .pfg-card__index { color: rgba(77, 160, 169, 0.55) !important; }
html body .pfg-card__cta,
html body .nf-pop-card__hint,
html body .nf-prt__link { color: var(--rf-accent) !important; }

/* ── Партнёры: логотип на светлой подложке ── */
html body .nf-prt__logo {
  background: #fff !important;   /* логотипы — картинки на белом, подложка должна совпадать */
  border-right-color: rgba(21, 21, 21, 0.05) !important;
}
html body .nf-prt__meta { color: var(--sp-teal-text) !important; }

/* ── Окно партнёра и модалки ── */
html body .nf-modal-inner { border-radius: 20px !important; }
html body .nf-pm-hero__logo {
  box-shadow: var(--sp-card-shadow) !important;
  border: 0 !important;
  border-radius: 14px !important;
}
html body .nf-pm-chip {
  border: 0 !important;
  background: rgba(21, 21, 21, 0.04) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
html body .nf-pm-chip--count {
  background: rgba(77, 160, 169, 0.12) !important;
  color: var(--sp-teal-text) !important;
}
html body .nf-contact-card-icon {
  border: 0 !important;
  background: linear-gradient(180deg, rgba(77, 160, 169, 0.14), rgba(77, 160, 169, 0.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(77, 160, 169, 0.16) !important;
  color: var(--sp-teal-text) !important;
}

/* ── Футер ── */
html body .nf-footer-cta-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
}