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

:root {
  --bg: #0a0b0d;
  --bg-elev: #12141a;
  --bg-card: #171a21;
  --line: rgba(201, 164, 106, 0.28);
  --gold: #c9a46a;
  --gold-soft: #e8d5b0;
  --text: #f4efe6;
  --muted: #a8a197;
  --danger: #d7b07a;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Outfit", sans-serif !important;
  letter-spacing: 0.01em !important;
}

body {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(201, 164, 106, 0.14), transparent 55%),
    var(--bg) !important;
}

.wrapper {
  max-width: 980px;
  margin: 0 auto;
  background: transparent;
}

.ob-adbar {
  background: #050607 !important;
  color: var(--gold-soft) !important;
  border-bottom: 1px solid var(--line);
  font-family: "Outfit", sans-serif;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 11px 16px !important;
}

.ob-affiliate {
  background: rgba(201, 164, 106, 0.08) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.ob-affiliate a {
  color: var(--gold-soft) !important;
  font-style: normal !important;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  padding: 18px 16px 8px;
}

.brand-mark {
  width: 42px !important;
  height: 42px;
  flex: 0 0 42px;
}

.brand-name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  line-height: 1;
}

.brand-tag {
  display: block;
  margin: 0 auto 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.header-head {
  background: transparent !important;
  padding: 6px 0 0 !important;
}

.header-head .header-head--desk,
.header-head .header-head--desk .header-head-logo,
.header-head .header-head--desk .header-head-text {
  display: none !important;
}

.header-nav-wrap {
  background: transparent !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
}

.header-nav-wrap .header-nav a,
.header-nav a {
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.header-nav-wrap .header-nav a:hover {
  color: var(--gold-soft) !important;
}

.content {
  padding: 36px 0 20px !important;
}

h1 {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 600 !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  color: var(--text) !important;
  text-align: center !important;
  max-width: 820px;
  margin: 8px auto 16px !important;
}

h2 {
  font-family: "Outfit", sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto 28px !important;
}

h2 s {
  color: #7d776e;
  margin-right: 8px;
}

h2 strong {
  color: var(--gold-soft);
  font-weight: 600;
}

h3 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--gold-soft) !important;
  letter-spacing: 0.02em;
  margin: 36px 0 16px !important;
}

p,
.claim-note,
.offer-note,
.safety-note,
.image-description,
.note-text p,
.list p {
  color: var(--muted) !important;
  font-family: "Outfit", sans-serif !important;
  letter-spacing: 0.01em !important;
}

p b,
p strong {
  color: var(--text) !important;
  font-weight: 600 !important;
}

p a {
  color: var(--gold) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.information {
  background: var(--bg-card) !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 8px auto 28px;
  max-width: 760px;
  padding: 22px 0 !important;
}

.information p,
.information span {
  color: var(--text) !important;
}

.image {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin: 24px 0 !important;
}

.image img {
  background: #0e1014;
}

.image-description {
  padding: 12px 16px 16px;
  font-size: 13px !important;
  text-align: center;
  color: var(--muted) !important;
}

.list {
  margin: 8px 0 24px !important;
}

.list li {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.list-icon,
.check {
  background: transparent !important;
}

.list li .list-icon .check {
  background: var(--gold) !important;
  width: 10px !important;
  height: 10px !important;
}

.list-icon {
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-top: 2px;
}

.quiz_options .option {
  color: var(--text) !important;
  background: #101218 !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  padding: 12px 14px;
}

.quiz_options .option .option-radio .circle {
  background: #0a0b0d !important;
  border-color: var(--gold) !important;
}

.quiz_options .option .option-radio .circle::after {
  background: var(--gold) !important;
}
.note,
.note.attention,
.note.quote {
  background: var(--bg-card) !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 28px 0;
}

.note-wrap {
  padding: 8px 4px !important;
}

.quiz_wrap {
  max-width: 420px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--line);
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.quiz-header {
  background: linear-gradient(180deg, #1b1e26 0%, #14161c 100%) !important;
  border-bottom: 1px solid var(--line);
  border-radius: 0 !important;
}

.quiz-header .quiz-title,
.quiz-header .order-title {
  font-family: "Cormorant Garamond", serif !important;
  color: var(--gold-soft) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.quiz-question {
  color: var(--text) !important;
  font-weight: 500 !important;
}

.option {
  background: #101218 !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 999px;
}

.option.active,
.option:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px rgba(201, 164, 106, 0.35);
}

.option-radio .circle,
.option .circle {
  border-color: var(--gold) !important;
  background: transparent !important;
}

.quiz-nums::before {
  background: var(--line) !important;
}

.quiz-nums .num {
  background: #101218 !important;
  border-color: var(--line) !important;
}

.quiz-nums .num span {
  background: #2a241c !important;
  color: var(--gold-soft) !important;
}

.quiz-nums .num.active span {
  background: var(--gold) !important;
  color: #16120c !important;
}

.quiz-form .prices .old {
  color: #7d776e !important;
}

.quiz-form .prices .new {
  color: var(--gold-soft) !important;
  font-family: "Cormorant Garamond", serif;
}

.button,
.quiz-form .button {
  background: linear-gradient(180deg, #e8d5b0 0%, #c9a46a 100%) !important;
  color: #16120c !important;
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0.04em;
  font-weight: 600 !important;
  box-shadow: 0 10px 30px rgba(201, 164, 106, 0.22) !important;
}

.button:hover {
  filter: brightness(1.05);
}

footer.site-footer,
.site-footer,
footer {
  color: var(--muted) !important;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

footer.site-footer a,
footer a {
  color: var(--gold) !important;
  font-style: normal !important;
}

.legal {
  color: var(--muted);
  background: var(--bg);
}

.legal h1,
.legal h2 {
  color: var(--gold-soft) !important;
  font-family: "Cormorant Garamond", serif !important;
  text-align: left !important;
}

.legal a {
  color: var(--gold) !important;
}

.box {
  background: var(--bg-card);
  border-color: var(--line) !important;
  padding: 18px;
  border-radius: 14px;
}

@media screen and (max-width: 600px) {
  .information {
    background: var(--bg-card) !important;
  }

  h1 {
    font-size: 30px !important;
    text-align: left !important;
  }

  h2 {
    text-align: left !important;
    font-size: 16px !important;
  }

  .brand-name {
    font-size: 26px;
    letter-spacing: 0.2em;
  }
}