/* ═══════════════════════════════════════════════════════════════
   REDESIGN v2 — ЩЕ СИЛЬНІШИЙ
   Bold editorial • Luxury magazine • Maximum impact
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --rd-bg: #faf8f4;
  --rd-bg-alt: #0f0f0f;
  --rd-bg-card: #ffffff;
  --rd-bg-accent: #0f0f0f;
  --rd-text: #0f0f0f;
  --rd-text-soft: #3f3f46;
  --rd-text-muted: #71717a;
  --rd-accent: #b91c1c;
  --rd-accent-light: #dc2626;
  --rd-accent-bg: rgba(185, 28, 28, 0.08);
  --rd-gold: #b45309;
  --rd-success: #047857;
  --rd-danger: #b91c1c;
  --rd-border: rgba(15, 15, 15, 0.12);
  --rd-font-display: 'Playfair Display', Georgia, serif;
  --rd-font-body: 'Outfit', system-ui, sans-serif;
  --rd-radius: 4px;
  --rd-radius-lg: 12px;
  --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rd-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --rd-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.12);
}

/* ═══ BASE ═══ */
body, #landing {
  background: var(--rd-bg) !important;
  color: var(--rd-text) !important;
  font-family: var(--rd-font-body) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
}

#landing {
  background-image: 
    linear-gradient(90deg, rgba(185, 28, 28, 0.03) 0%, transparent 50%),
    linear-gradient(180deg, transparent 0%, rgba(15, 15, 15, 0.02) 100%) !important;
}

#landing a {
  color: var(--rd-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s var(--rd-ease) !important;
}

#landing a:hover {
  color: var(--rd-accent-light) !important;
}

/* ═══ HEADER — Bold editorial ═══ */
.site-header {
  background: var(--rd-bg-alt) !important;
  border-bottom: none !important;
}

.site-header__logo-wrapper {
  background: transparent !important;
  padding: 28px 0 !important;
}

.site-header__title {
  color: #fff !important;
  font-family: var(--rd-font-display) !important;
  font-size: clamp(2.75rem, 6vw, 5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

.site-header__subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
}

.site-header__logo path,
.site-header__logo-wrapper.d-lg-none .site-header__logo path {
  fill: #fff !important;
}

.site-header__logo-wrapper.d-lg-none .site-header__title {
  color: #fff !important;
}

.main-nav {
  background: var(--rd-bg-alt) !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.navbar-expand-lg .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  padding: 12px 20px !important;
  transition: all 0.2s var(--rd-ease) !important;
}

.nav-item:hover .nav-link {
  color: #fff !important;
}

.nav-item.current-box .nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.bg-yellow {
  background: var(--rd-accent-bg) !important;
  color: var(--rd-accent) !important;
  border: 2px solid var(--rd-accent) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ═══ MAIN CONTENT ═══ */
.section-main {
  padding: 56px 0 80px !important;
}

.container--main {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.alertt {
  margin-bottom: 32px !important;
}

.alertt p {
  color: var(--rd-text-muted) !important;
  font-size: 11px !important;
}

/* ═══ TYPOGRAPHY — Драматична ієрархія ═══ */
.h1 {
  font-family: var(--rd-font-display) !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--rd-text) !important;
  margin-bottom: 2rem !important;
  letter-spacing: -0.02em !important;
}

.h1 .text-purple {
  color: var(--rd-accent) !important;
  font-style: italic !important;
}

.h2, .h3, .h4 {
  font-family: var(--rd-font-display) !important;
  color: var(--rd-text) !important;
  font-weight: 600 !important;
}

.h2 { font-size: 2rem !important; letter-spacing: -0.01em !important; }
.h3 { font-size: 1.5rem !important; }
.h4 { font-size: 1.25rem !important; }

.section-title {
  font-family: var(--rd-font-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--rd-text) !important;
  border: none !important;
  border-left: 6px solid var(--rd-accent) !important;
  padding-left: 28px !important;
  margin: 4rem 0 1.5rem !important;
  line-height: 1.3 !important;
}

/* ═══ BOX LISTS — Картки з сильним акцентом ═══ */
.box-list {
  background: var(--rd-bg-card) !important;
  border: none !important;
  box-shadow: var(--rd-shadow-lg) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 4rem 0 !important;
  border-left: 6px solid var(--rd-accent) !important;
}

.box-list--green {
  border-left-color: var(--rd-success) !important;
}

.box-list__title {
  background: var(--rd-bg-alt) !important;
  padding: 28px 36px !important;
}

.box-list__title h2,
.box-list__title .h4 {
  color: #fff !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.box-list--green .box-list__title,
.box-list__title--green {
  background: var(--rd-success) !important;
}

.box-list .list {
  padding: 32px 36px !important;
}

.box-list .list__item {
  color: var(--rd-text-soft) !important;
  padding: 16px 0 16px 40px !important;
  font-size: 1.05rem !important;
  border-bottom: 1px solid var(--rd-border) !important;
}

.box-list .list__item:last-child {
  border-bottom: none !important;
}

.box-list .list__item:before {
  content: "✓" !important;
  left: 0 !important;
  color: var(--rd-success) !important;
  font-size: 1.25rem !important;
}

.box-list .list__item--wrong:before {
  content: "✕" !important;
  color: var(--rd-danger) !important;
}

.box-list__bottom-text {
  padding: 24px 36px !important;
  background: var(--rd-bg) !important;
  color: var(--rd-text-soft) !important;
}

/* ═══ TESTIMONIALS — Відгуки як цитати ═══ */
.testimonial-box {
  background: var(--rd-bg-card) !important;
  border: none !important;
  box-shadow: var(--rd-shadow-lg) !important;
  border-radius: 0 !important;
  padding: 48px !important;
  margin: 4rem 0 !important;
  border-left: 6px solid var(--rd-accent) !important;
  position: relative !important;
}

.testimonial-box::before {
  content: '"' !important;
  position: absolute !important;
  top: 24px !important;
  left: 36px !important;
  font-family: var(--rd-font-display) !important;
  font-size: 6rem !important;
  color: var(--rd-accent) !important;
  opacity: 0.2 !important;
  line-height: 1 !important;
}

.testimonial-box__title {
  font-family: var(--rd-font-display) !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: var(--rd-text) !important;
  margin-bottom: 1.5rem !important;
  font-style: italic !important;
}

.testimonial-box p {
  color: var(--rd-text-soft) !important;
  font-size: 1.05rem !important;
}

.testimonial-box__name {
  color: var(--rd-accent) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-top: 1.5rem !important;
}

.testimonial-box svg path {
  fill: var(--rd-accent) !important;
}

/* ═══ IMAGES — Before/After ═══ */
.image-before-after {
  gap: 24px !important;
  margin: 3rem 0 !important;
}

.image-before-after__wrapper {
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--rd-shadow) !important;
}

.image-before-after__text {
  background: var(--rd-bg-alt) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  padding: 16px 20px !important;
}

.image-before-after__text--before {
  background: var(--rd-text-muted) !important;
}

/* ═══ LISTS ═══ */
.section-main p,
.main p {
  color: var(--rd-text-soft) !important;
  margin-bottom: 1.25rem !important;
  font-size: 1.05rem !important;
}

.list__item {
  color: var(--rd-text-soft) !important;
  padding: 12px 0 12px 32px !important;
  font-size: 1.05rem !important;
}

.list__item:before {
  content: "—" !important;
  color: var(--rd-accent) !important;
  font-weight: 700 !important;
  margin-left: -32px !important;
  margin-right: 12px !important;
}

.list__item--circle {
  background: var(--rd-bg-card) !important;
  border: 2px solid var(--rd-border) !important;
  border-radius: 0 !important;
  padding: 24px 28px 24px 56px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--rd-shadow) !important;
}

.list__item--circle:before {
  content: "" !important;
}

.list__item--circle h3 {
  color: var(--rd-accent) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
}

/* ═══ FORM — Драматичний CTA ═══ */
.wrapper-form {
  margin: 4rem 0 !important;
}

.countdown-block {
  background: var(--rd-bg-alt) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 36px !important;
  margin-bottom: 0 !important;
}

.countdown-block h3,
.countdown-container h3 {
  color: #fff !important;
}

.countdown-container {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}

.countdown {
  color: #fff !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
}

.countdown-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

.best-form {
  background: var(--rd-bg-card) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 48px !important;
  box-shadow: var(--rd-shadow-lg) !important;
  margin-top: -24px !important;
  position: relative !important;
  z-index: 1 !important;
}

.product .price-old span {
  color: var(--rd-text-muted) !important;
}

.product .price {
  color: var(--rd-accent) !important;
  font-size: 2.5rem !important;
}

.name-input,
.phone-input {
  background: var(--rd-bg) !important;
  border: 2px solid var(--rd-border) !important;
  border-radius: 0 !important;
  margin-bottom: 20px !important;
}

.name-input input,
.phone-input input {
  color: var(--rd-text) !important;
  font-size: 1.1rem !important;
}

input::placeholder {
  color: var(--rd-text-muted) !important;
}

.button-submit {
  background: var(--rd-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  border-radius: 0 !important;
  padding: 22px 32px !important;
  border: none !important;
  transition: all 0.3s var(--rd-ease) !important;
  text-transform: uppercase !important;
}

.button-submit:hover {
  background: var(--rd-accent-light) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 48px rgba(185, 28, 28, 0.4) !important;
}

/* ═══ COMMENTS ═══ */
.comments {
  padding: 64px 0 !important;
}

.title-with-bg {
  background: var(--rd-bg-alt) !important;
  color: #fff !important;
  padding: 20px 28px !important;
  border-radius: 0 !important;
}

.comments__title,
.comments__count {
  color: #fff !important;
}

.section-main ul:not(.list),
.main ul:not(.list) {
  margin: 1rem 0 !important;
}

.section-main ul:not(.list) li,
.main ul:not(.list) li {
  color: var(--rd-text-soft) !important;
  margin-bottom: 8px !important;
}

.comment {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--rd-border) !important;
}

.comment__author {
  color: var(--rd-text) !important;
}

.comment__content {
  color: var(--rd-text-soft) !important;
}

.comment__mentioned,
.link-big {
  color: var(--rd-accent) !important;
}

/* ═══ MISC ═══ */
.footer {
  background: var(--rd-bg-alt) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 40px 24px !important;
}

.footer * {
  color: inherit !important;
}

.col-6 img[src*="doctor"] {
  border-radius: 0 !important;
  box-shadow: var(--rd-shadow) !important;
}

.charts, .logos {
  background: var(--rd-bg-card) !important;
  padding: 32px !important;
  box-shadow: var(--rd-shadow) !important;
}

hr {
  border: none !important;
  height: 2px !important;
  background: var(--rd-border) !important;
  margin: 4rem 0 !important;
}

b, strong {
  color: var(--rd-text) !important;
}

.text-red {
  color: var(--rd-danger) !important;
}

.advantages__text {
  color: var(--rd-text-soft) !important;
}

.advantages__arrow path {
  fill: var(--rd-accent) !important;
}

.print {
  color: var(--rd-text-soft) !important;
}

.print:hover {
  color: var(--rd-accent) !important;
}