/* Common base styles
   Generated from original split. */


:root {
  color-scheme: dark;
  --bg: #010101;
  --panel: rgba(7, 7, 6, 0.86);
  --panel-strong: rgba(13, 12, 10, 0.94);
  --gold: #d89b22;
  --gold-soft: #ffca4d;
  --bronze: #785013;
  --ivory: #f0ece4;
  --text: #d8d0c5;
  --muted: #9b9286;
  --line: rgba(218, 154, 30, 0.44);
  --line-soft: rgba(218, 154, 30, 0.18);
  --max: 1720px;
  --radius: 8px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.language-switcher {
  flex: 0 0 auto;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(216, 155, 34, .24);
  border-radius: 9px;
  background: rgba(7, 7, 6, .82);
  color: var(--gold-soft, #e9bc63);
}

.language-switcher span { font-size: 13px; }
.language-switcher select {
  appearance: none;
  min-width: 29px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: 700 10px/1 inherit;
  cursor: pointer;
}
.language-switcher option { background: #11110f; color: #f4efe5; }

@media (max-width: 820px) {
  .language-switcher { height: 34px; padding: 0 7px; margin-left: auto; }
  .language-switcher span { display: none; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #000; }
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 74% 8%, rgba(205, 133, 24, 0.18), transparent 32rem),
    radial-gradient(circle at 9% 20%, rgba(42, 112, 167, 0.10), transparent 25rem),
    radial-gradient(circle at 50% 108%, rgba(139, 70, 200, 0.08), transparent 28rem),
    #000;
}

body.modal-open { overflow: hidden; }

.delivery-network { position: relative; }
.delivery-network-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.delivery-network-grid article { min-height: 112px; display: grid; align-content: center; gap: 10px; padding: 20px; border: 1px solid rgba(216,155,34,.22); border-radius: 12px; background: linear-gradient(145deg, rgba(216,155,34,.055), rgba(255,255,255,.012)); }
.delivery-network-grid strong { color: var(--ivory); font-size: 15px; }
.delivery-network-grid span { color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 980px) { .delivery-network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .delivery-network-grid { grid-template-columns: 1fr; } }
button, input, select, textarea { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  background:
    linear-gradient(90deg, rgba(218, 154, 30, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(218, 154, 30, .028) 1px, transparent 1px);
  background-size: 86px 86px;
}

.site-shell::before,
.site-shell::after,
.ambient {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
}

.site-shell::before {
  background-image:
    radial-gradient(circle, rgba(255, 191, 58, 0.92) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 191, 58, 0.34) 0 1px, transparent 1.7px);
  background-size: 144px 144px, 228px 228px;
  opacity: .16;
  animation: particles 26s linear infinite;
}

.site-shell::after {
  background:
    radial-gradient(circle at 86% 18%, rgba(218, 154, 30, .16), transparent 26rem),
    radial-gradient(circle at 18% 78%, rgba(20, 139, 185, .08), transparent 24rem),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .34) 58%, #000 100%);
}

.ambient-left,
.ambient-right {
  width: 38rem;
  height: 38rem;
  inset: auto;
  border: 1px solid rgba(218,154,30,.16);
  border-radius: 50%;
  filter: blur(.2px) drop-shadow(0 0 22px rgba(218,154,30,.16));
  transform: rotateX(68deg);
}
.ambient-left { left: -18rem; bottom: 4rem; }
.ambient-right { right: -12rem; top: 8rem; }

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  width: min(var(--max), calc(100% - 90px));
  min-height: 92px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(218, 154, 30, .22);
  background: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.68));
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: max-content;
  color: var(--gold-soft);
}

.brand-mark {
  position: relative;
  display: inline-block;
  width: 72px;
  height: 48px;
  flex: 0 0 auto;
  color: var(--gold-soft);
  filter:
    drop-shadow(0 0 8px rgba(255, 170, 16, .78))
    drop-shadow(0 0 20px rgba(255, 141, 0, .34));
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.brand-mark::before {
  background: center / 122% auto no-repeat url("../assets/logo/compact/logo.webp");
}
.brand-mark::after {
  inset: -6px -10px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 52% 52%, rgba(255, 171, 14, .18), transparent 64%),
    radial-gradient(circle at 33% 38%, rgba(255, 226, 118, .15), transparent 28%);
  opacity: .78;
  animation: brandMoleculeGlow 3.6s ease-in-out infinite;
}
.brand-text strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 35px;
  font-weight: 500;
  line-height: .92;
}
.brand-text small {
  display: block;
  margin-top: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  color: #f2b52e;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(218, 154, 30, .16);
  border-radius: 999px;
  color: var(--ivory);
  font-size: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    rgba(0,0,0,.18);
  box-shadow: inset 0 0 22px rgba(218,154,30,.05), 0 0 22px rgba(0,0,0,.18);
}
.desktop-nav a,
.nav-link-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ivory);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.desktop-nav > a::before,
.nav-link-button::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 10px rgba(255, 202, 77, .72);
  opacity: .48;
  transition: opacity .22s ease, transform .22s ease;
}
.desktop-nav a::after,
.nav-link-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 202, 77, .16);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,202,77,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent);
  box-shadow: inset 0 0 18px rgba(255, 202, 77, .06), 0 0 18px rgba(255, 202, 77, .08);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.desktop-nav a:hover,
.nav-link-button:hover {
  color: var(--gold-soft);
  background: rgba(255, 202, 77, .055);
  transform: translateY(-1px);
}
.desktop-nav a:hover::before,
.nav-link-button:hover::before {
  opacity: 1;
  transform: scale(1.18);
}
.desktop-nav a:hover::after,
.nav-link-button:hover::after { opacity: 1; }

.nav-dropdown { position: relative; }
.nav-link-button { gap: 0; }
.nav-link-button > span[aria-hidden] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  font-size: 0;
  line-height: 0;
  transform: translateY(-1px);
}
.nav-link-button > span[aria-hidden]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.nav-link-button[aria-expanded="true"] > span[aria-hidden]::before,
.nav-dropdown:hover .nav-link-button > span[aria-hidden]::before {
  transform: translateY(2px) rotate(225deg);
}
.dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 260px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(4,4,3,.98);
  box-shadow: 0 24px 80px rgba(0,0,0,.72), 0 0 28px rgba(218,154,30,.2);
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.dropdown-panel.open,
.nav-dropdown:hover .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 6px;
  color: var(--text);
}
.dropdown-panel a:hover { background: rgba(218,154,30,.12); }
.dropdown-panel a::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.gold-button,
.ghost-button,
.outline-xl,
.video-filters button,
.quiz-options button,
.outline-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 14px;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  letter-spacing: 0;
  line-height: 1;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.gold-button {
  min-height: 58px;
  padding: 0 32px;
  border: 1px solid rgba(255, 207, 75, .86);
  color: #140c02;
  font-weight: 900;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 22% 78%, rgba(255,255,255,.18)),
    linear-gradient(180deg, #ffd45a 0%, #d89b22 48%, #8b570b 100%);
  box-shadow: 0 0 0 1px rgba(255, 218, 94, .22) inset, 0 0 28px rgba(218,154,30,.46), 0 12px 34px rgba(0,0,0,.46);
}
.gold-button::before,
.outline-xl::before,
.outline-button::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.42), transparent 58%);
  transform: translateX(-80%);
  transition: transform .7s ease;
}
.gold-button:hover,
.ghost-button:hover,
.outline-xl:hover,
.outline-button:hover { transform: translateY(-2px); }
.gold-button:hover::before,
.outline-xl:hover::before,
.outline-button:hover::before { transform: translateX(82%); }
.gold-button > span[aria-hidden],
.ghost-button > span[aria-hidden],
.outline-button > span[aria-hidden],
.outline-xl > span[aria-hidden],
.info-card a > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  font-size: 0;
  line-height: 0;
}

.gold-button > span[aria-hidden]::before,
.ghost-button > span[aria-hidden]::before,
.outline-button > span[aria-hidden]::before,
.outline-xl > span[aria-hidden]::before,
.info-card a > span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.4 15.6 12 9 18.6' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.4 15.6 12 9 18.6' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.header-cta { min-width: 300px; }
.wide { width: 100%; }

.ghost-button,
.outline-button {
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--line);
  color: var(--gold-soft);
  background: rgba(0,0,0,.44);
  text-transform: uppercase;
}
.outline-button { min-height: 48px; font-weight: 700; }
.outline-xl {
  min-height: 90px;
  padding: 0 90px;
  border: 2px solid var(--line);
  color: var(--gold-soft);
  background: rgba(0,0,0,.48);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.4vw, 60px);
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(218,154,30,.18);
}

.burger,
.round-button {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(0,0,0,.56);
  cursor: pointer;
}
.burger { gap: 4px; }
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}
.burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.round-button { display: grid; font-size: 26px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(480px, .72fr) minmax(620px, 1.28fr);
  align-items: center;
  gap: 14px;
  width: min(var(--max), calc(100% - 90px));
  min-height: calc(100vh - 92px);
  margin: 0 auto;
  padding: 58px 0 34px;
}
.hero-copy { min-width: 0; max-width: 100%; }
.hero::before {
  content: "";
  position: absolute;
  left: -4vw;
  top: 8%;
  width: 24rem;
  height: 24rem;
  background:
    radial-gradient(circle, rgba(218,154,30,.14), transparent 60%),
    repeating-radial-gradient(circle, rgba(218,154,30,.2) 0 1px, transparent 1px 18px);
  mask-image: radial-gradient(circle, #000, transparent 74%);
}
.eyebrow {
  margin: 0 0 15px;
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 780px;
  margin-bottom: 24px;
  color: var(--gold-soft);
  font-size: clamp(50px, 4.35vw, 82px);
  line-height: .92;
  text-transform: uppercase;
}
.hero h1 span,
.hero h1 em { display: block; font-style: normal; }
.hero h1 em {
  margin-top: 8px;
  color: #d8d5cf;
  text-shadow: 0 0 18px rgba(255,255,255,.14);
}
.hero-lead {
  max-width: 610px;
  margin-bottom: 26px;
  color: #d5cec4;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.48;
}
.hero-benefits {
  display: grid;
  gap: 16px;
  max-width: 560px;
  padding: 0;
  margin: 0 0 28px;
  list-style: none;
}
.hero-benefits li,
.trust-strip article,
.quality-points span,
.quiz-side li,
.benefit-list li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-showcase {
  position: relative;
  min-height: min(760px, 78vh);
  display: grid;
  align-items: end;
}
.hero-showcase::before {
  content: "";
  position: absolute;
  inset: 8% -2% 8% 7%;
  background:
    radial-gradient(circle at 55% 53%, rgba(218,154,30,.19), transparent 32%),
    linear-gradient(120deg, transparent 20%, rgba(218,154,30,.18) 20.5%, transparent 21% 46%, rgba(36,142,196,.16) 46.5%, transparent 47%),
    radial-gradient(circle at 76% 24%, rgba(255,196,58,.42) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 22%, rgba(255,196,58,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 72%, rgba(255,196,58,.24) 0 1px, transparent 3px);
  opacity: .86;
  mask-image: radial-gradient(circle at 57% 48%, #000, transparent 72%);
}
.dna-strand {
  position: absolute;
  right: 1%;
  top: 8%;
  width: 250px;
  height: 520px;
  border-left: 3px dotted rgba(255, 199, 65, .82);
  border-right: 3px dotted rgba(255, 199, 65, .7);
  border-radius: 50%;
  transform: rotate(18deg);
  filter: drop-shadow(0 0 18px rgba(255, 199, 65, .46));
  opacity: .78;
}
.athlete-shape {
  position: absolute;
  bottom: 12%;
  width: 250px;
  height: 500px;
  border-radius: 44% 44% 8px 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(216,133,42,.85), transparent 11%),
    linear-gradient(110deg, transparent 0 24%, rgba(193,111,39,.38) 25% 55%, transparent 56%),
    linear-gradient(180deg, rgba(242,162,70,.2), transparent 50%);
  filter: blur(.3px) drop-shadow(0 0 36px rgba(218,154,30,.22));
  opacity: .5;
  mask-image: linear-gradient(#000 0 72%, transparent);
}
.athlete-left { left: 3%; transform: skewX(-7deg); }
.athlete-right { right: 2%; transform: scaleX(1.14) skewX(5deg); opacity: .58; }

.product-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 560px;
  isolation: isolate;
  overflow: visible;
}
.product-stage::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 96px;
  border: 1px solid rgba(255, 196, 58, .55);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(218,154,30,.24), transparent 70%);
  box-shadow: 0 0 30px rgba(218,154,30,.34), inset 0 0 28px rgba(218,154,30,.12);
  transform: perspective(600px) rotateX(66deg);
}
.product-stage::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 1%;
  height: 84px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  filter: blur(11px);
  z-index: -1;
}
.stage-bottle {
  position: relative;
  z-index: 3;
  width: clamp(145px, 10vw, 220px);
  margin: 0 -2.6%;
  object-fit: contain;
  filter: drop-shadow(0 26px 22px rgba(0,0,0,.74)) drop-shadow(0 0 20px rgba(218,154,30,.2));
  animation: floatBottle 6.4s ease-in-out infinite;
}
.stage-bottle.main {
  z-index: 6;
  width: clamp(220px, 16vw, 350px);
}
.stage-bottle.mid {
  z-index: 5;
  width: clamp(175px, 12.7vw, 280px);
}
.stage-bottle.small {
  z-index: 4;
  width: clamp(135px, 9.7vw, 220px);
}
.stage-bottle:nth-child(2) { animation-delay: -.8s; }
.stage-bottle:nth-child(3) { animation-delay: -1.6s; }
.stage-bottle:nth-child(4) { animation-delay: -2.4s; }
.stage-bottle:nth-child(5) { animation-delay: -3.2s; }

.stage-rings {
  position: absolute;
  left: -46%;
  right: -34%;
  bottom: -6px;
  z-index: 0;
  height: 360px;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 58% 68%, transparent 0 74px, rgba(255, 190, 42, .2) 75px 76px, transparent 77px 126px),
    radial-gradient(ellipse at 58% 68%, rgba(255, 185, 36, .13), transparent 58%);
  filter: drop-shadow(0 0 12px rgba(255, 202, 77, .25));
  opacity: .78;
  mask-image:
    linear-gradient(90deg, transparent 0 4%, #000 12% 88%, transparent 96% 100%),
    linear-gradient(180deg, transparent 0 2%, #000 16% 78%, transparent 100%);
  mask-composite: intersect;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: min(var(--max), calc(100% - 90px));
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(14,13,10,.92), rgba(2,2,2,.86));
  box-shadow: 0 0 32px rgba(218,154,30,.18);
}
.trust-strip article {
  min-height: 118px;
  padding: 24px;
  border-right: 1px solid var(--line-soft);
}
.trust-strip article:last-child { border-right: 0; }
.trust-strip strong {
  display: block;
  margin-bottom: 5px;
  color: var(--gold-soft);
  font-size: 15px;
  text-transform: uppercase;
}
.trust-strip span { color: #bdb4a7; line-height: 1.32; }

.section {
  width: min(var(--max), calc(100% - 90px));
  margin: 0 auto;
  padding: clamp(72px, 7vw, 132px) 0;
  scroll-margin-top: 112px;
}
.section-head {
  position: relative;
  max-width: 980px;
  margin: 0 0 44px;
}
.section-head.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head h2 {
  margin-bottom: 16px;
  color: var(--ivory);
  font-size: clamp(44px, 5vw, 94px);
  line-height: .94;
  text-transform: uppercase;
}
.section-head h2 span { color: var(--gold-soft); }
.section-head p {
  max-width: 760px;
  color: #d5cec4;
  font-size: clamp(19px, 1.55vw, 28px);
  line-height: 1.35;
}
.with-dna::after {
  content: "";
  position: absolute;
  right: -43vw;
  top: -30px;
  width: 390px;
  height: 430px;
  border-left: 3px dotted rgba(255, 199, 65, .78);
  border-right: 3px dotted rgba(255, 199, 65, .58);
  border-radius: 50%;
  transform: rotate(19deg);
  filter: drop-shadow(0 0 18px rgba(255,199,65,.46));
}

.intro-panel {
  position: relative;
  min-height: 980px;
  display: grid;
  place-items: center;
  text-align: center;
  border-bottom: 1px solid rgba(218,154,30,.18);
  background:
    radial-gradient(circle at 72% 64%, rgba(218,154,30,.22), transparent 22rem),
    radial-gradient(circle at 42% 72%, rgba(255,202,77,.14), transparent 21rem);
}
.intro-panel::before {
  content: "";
  position: absolute;
  inset: 34% -5% 9%;
  background:
    radial-gradient(circle, rgba(255,202,77,.7) 0 8px, transparent 9px),
    linear-gradient(120deg, transparent 0 45%, rgba(218,154,30,.24) 46%, transparent 47%);
  background-size: 190px 190px, auto;
  opacity: .34;
  mask-image: radial-gradient(ellipse at 50% 68%, #000, transparent 62%);
}
.section-number {
  position: absolute;
  left: 0;
  top: 72px;
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
}
.intro-logo { display: grid; place-items: center; color: var(--gold-soft); }
.intro-logo .brand-mark { width: 92px; height: 92px; }
.intro-logo strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 76px;
  font-weight: 500;
}
.intro-logo small {
  margin-top: -8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
}
.intro-panel h2 {
  margin: 50px 0 26px;
  color: var(--ivory);
  font-size: clamp(72px, 8vw, 142px);
  line-height: .92;
  text-transform: uppercase;
}
.intro-panel p {
  max-width: 680px;
  margin-bottom: 48px;
  color: #ddd6cd;
  font-size: 32px;
  line-height: 1.35;
}

.quality-points {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
}
.quality-points span {
  min-width: 210px;
  color: #cfc8bd;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.product-card,
.info-card,
.video-card,
.quiz-card,
.consultation-panel,
.modal-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 33%),
    linear-gradient(180deg, var(--panel-strong), rgba(1,1,1,.88));
  box-shadow: 0 0 0 1px rgba(255,202,77,.04) inset, 0 22px 68px rgba(0,0,0,.42);
}
.product-card {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, .58fr);
  align-items: stretch;
  min-height: 292px;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.product-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent), transparent 70%), 0 24px 70px rgba(0,0,0,.5);
}
.product-card::before,
.video-card::before,
.info-card::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.2), transparent 58%);
  transform: translateX(-80%);
  transition: transform .7s ease;
  pointer-events: none;
}
.product-card:hover::before,
.video-card:hover::before,
.info-card:hover::before { transform: translateX(82%); }
.product-image {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 22px 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--accent), transparent 58%), transparent 35%),
    radial-gradient(circle at 50% 104%, color-mix(in srgb, var(--accent), transparent 42%), transparent 25%),
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent), transparent 74%), transparent 28%),
    linear-gradient(180deg, rgba(5,5,5,.96), rgba(0,0,0,.98));
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
}
.product-image::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 20px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--gold-soft) 34%);
  border-radius: 50%;
  transform: perspective(320px) rotateX(66deg);
  z-index: 2;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--accent), transparent 78%), transparent 58%),
    repeating-radial-gradient(ellipse at center, color-mix(in srgb, var(--accent), transparent 55%) 0 1px, transparent 2px 18px);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--accent), transparent 64%),
    inset 0 0 18px color-mix(in srgb, var(--accent), transparent 78%);
}
.product-image::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 8px;
  height: 34px;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--accent), transparent 36%), transparent 64%);
  filter: blur(10px);
  opacity: .82;
  z-index: 1;
}
.product-photo-bg,
.product-mesh,
.product-particles {
  position: absolute;
  inset: 6%;
  pointer-events: none;
}
.product-photo-bg {
  inset: -16%;
  z-index: 0;
  opacity: .2;
  background-image: var(--product-full-bg);
  background-repeat: no-repeat;
  background-position: center 36%;
  background-size: 150% auto;
  filter: blur(8px) saturate(1.35) contrast(1.12);
  transform: scale(1.08);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 0 42%, transparent 76%);
  animation: photoGlowDrift 9s ease-in-out infinite;
}
.product-mesh {
  z-index: 1;
  opacity: .84;
  background:
    radial-gradient(circle at 7% 64%, color-mix(in srgb, var(--accent), white 26%) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 38%, color-mix(in srgb, var(--accent), white 24%) 0 2px, transparent 3px),
    radial-gradient(circle at 33% 70%, color-mix(in srgb, var(--accent), white 20%) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 31%, color-mix(in srgb, var(--accent), white 18%) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 62%, color-mix(in srgb, var(--accent), white 24%) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 42%, color-mix(in srgb, var(--accent), white 26%) 0 2px, transparent 3px),
    linear-gradient(26deg, transparent 0 28%, color-mix(in srgb, var(--accent), transparent 54%) 29%, transparent 30%),
    linear-gradient(151deg, transparent 0 33%, color-mix(in srgb, var(--accent), transparent 58%) 34%, transparent 35%),
    linear-gradient(80deg, transparent 0 43%, color-mix(in srgb, var(--accent), transparent 62%) 44%, transparent 45%),
    linear-gradient(118deg, transparent 0 55%, color-mix(in srgb, var(--accent), transparent 64%) 56%, transparent 57%);
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--accent), transparent 34%));
  mask-image: radial-gradient(ellipse at center, #000 0 58%, transparent 84%);
  animation: meshPulse 4.8s ease-in-out infinite;
}
.product-mesh::before,
.product-mesh::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 58%);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-16deg);
  opacity: .62;
}
.product-mesh::after {
  inset: 18% 0;
  transform: rotate(18deg);
  opacity: .36;
}
.product-particles {
  z-index: 2;
  opacity: .88;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent), white 22%) 0 1px, transparent 2px),
    radial-gradient(circle, color-mix(in srgb, var(--accent), white 12%) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.34) 0 1px, transparent 2px);
  background-size: 58px 58px, 92px 92px, 136px 136px;
  background-position: 0 0, 18px 12px, 40px 22px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent), transparent 48%));
  mask-image: radial-gradient(ellipse at center, #000 0 56%, transparent 82%);
  animation: productParticles 10s linear infinite;
}
.product-image img {
  position: relative;
  z-index: 4;
  width: auto;
  height: 238px;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 20px rgba(0,0,0,.74))
    drop-shadow(0 0 18px color-mix(in srgb, var(--accent), transparent 60%));
  transition: transform .34s ease, filter .34s ease;
  animation: catalogBottleFloat 5.8s ease-in-out infinite;
}
.product-card:hover .product-image img {
  transform: translateY(-8px) scale(1.045);
  filter:
    drop-shadow(0 24px 24px rgba(0,0,0,.78))
    drop-shadow(0 0 28px color-mix(in srgb, var(--accent), transparent 42%));
}
.product-card:hover .product-mesh { opacity: 1; }
.product-card-body {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 30px 36px 30px 22px;
}
.product-card h3 {
  margin: 0;
  color: var(--accent);
  font-size: clamp(27px, 2.35vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}
.product-card .rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.product-card p {
  min-height: 58px;
  margin: 0;
  color: #d7d0c8;
  font-size: 18px;
  line-height: 1.42;
}
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
}
.product-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: #bfb7ad;
  font-size: 12px;
}
.product-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid color-mix(in srgb, var(--accent), var(--gold-soft) 20%);
  border-radius: 50%;
  color: var(--accent);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.info-card {
  min-height: 270px;
  padding: 30px;
  overflow: hidden;
}
.info-card h3 {
  color: var(--ivory);
  font-size: 24px;
}
.info-card p {
  color: #bcb4aa;
  line-height: 1.55;
}

.quiz-card {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(420px, .86fr);
  gap: 44px;
  padding: clamp(28px, 5vw, 76px);
  overflow: hidden;
}
.quiz-card::after,
.consultation-panel::after,
.modal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 20%, rgba(218,154,30,.16), transparent 24rem),
    radial-gradient(circle at 18% 84%, rgba(32,148,205,.08), transparent 19rem);
}
.quiz-main,
.quiz-side,
.consultation-copy,
.form,
.modal-content,
.price-copy { position: relative; z-index: 2; }
.quiz-main h2,
.consultation-copy h2,
.modal-card h2 {
  color: var(--ivory);
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 1;
  text-transform: uppercase;
}
.quiz-main h2 { max-width: 780px; }
.quiz-main > p,
.consultation-copy > p,
.price-copy > p {
  color: #d7d0c8;
  font-size: 20px;
  line-height: 1.5;
}
.quiz-progress {
  display: grid;
  grid-template-columns: 46px 1fr 46px 1fr 46px;
  align-items: center;
  gap: 0;
  margin-bottom: 48px;
}
.quiz-progress span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #bfb7ad;
}
.quiz-progress i {
  height: 1px;
  background: rgba(218,154,30,.35);
}
.quiz-progress span.active {
  color: #130b02;
  background: var(--gold-soft);
  box-shadow: 0 0 26px rgba(255,202,77,.5);
}
.quiz-step-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 18px;
  color: var(--gold-soft);
  font-size: 24px;
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quiz-options button {
  justify-content: flex-start;
  min-height: 86px;
  padding: 0 22px;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(0,0,0,.46);
  text-align: left;
}
.quiz-options button:hover,
.quiz-options button.selected {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  box-shadow: 0 0 22px rgba(218,154,30,.18);
}
.quiz-next {
  margin-top: 28px;
  min-width: 360px;
}
.quiz-side .compact-stage {
  min-height: 370px;
}
.compact-stage .stage-bottle.main { width: 210px; }
.compact-stage .stage-bottle.mid { width: 160px; }
.compact-stage .stage-bottle.small { width: 120px; }
.quiz-side ul {
  display: grid;
  gap: 20px;
  max-width: 440px;
  padding: 0;
  margin: 28px auto 0;
  list-style: none;
}
.quiz-side li span { line-height: 1.45; }
.quiz-result-inline {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.48);
}
.quiz-result-inline h3 {
  color: var(--gold-soft);
  font-size: 36px;
}
.quiz-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.video-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.video-filters button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(0,0,0,.48);
}
.video-filters button.active {
  color: #140c02;
  background: var(--gold-soft);
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.video-card {
  overflow: hidden;
  transition: transform .24s ease, border-color .24s ease;
}
.video-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.video-preview {
  position: relative;
  aspect-ratio: 1.84 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 38% 48%, color-mix(in srgb, var(--accent), transparent 70%), transparent 42%),
    linear-gradient(130deg, rgba(255,255,255,.04), transparent 46%),
    #050505;
}
.video-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 42%, rgba(255,202,77,.3), transparent 25%),
    linear-gradient(128deg, transparent 0 45%, color-mix(in srgb, var(--accent), transparent 58%) 46%, transparent 47%);
  opacity: .8;
}
.video-preview img {
  position: absolute;
  left: 8%;
  bottom: 5%;
  z-index: 2;
  height: 88%;
  width: auto;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent), transparent 64%));
}
.play-button {
  position: absolute;
  z-index: 3;
  left: 52%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 2px solid var(--gold-soft);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(0,0,0,.58);
  transform: translate(-50%, -50%);
}
.play-button::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid currentColor;
  margin-left: 4px;
}
.duration {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ivory);
  background: rgba(0,0,0,.7);
}
.video-card-body { padding: 18px 22px 22px; }
.video-card h3 {
  margin-bottom: 8px;
  color: var(--ivory);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
}
.video-card p { margin: 0; color: #bcb4aa; }
.centered-button {
  display: flex;
  width: min(720px, 100%);
  margin: 34px auto 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
}

.consultation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .62fr);
  gap: 44px;
  padding: clamp(28px, 5vw, 76px);
  overflow: hidden;
}
.consultation-bottle {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  margin-top: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 52% 48%, rgba(218,154,30,.18), transparent 42%),
    linear-gradient(130deg, rgba(218,154,30,.08), transparent 60%);
  overflow: hidden;
}
.consultation-bottle::before {
  content: "";
  position: absolute;
  width: 58%;
  height: 48px;
  bottom: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: perspective(360px) rotateX(66deg);
}
.consultation-bottle img {
  position: relative;
  z-index: 2;
  height: 290px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(218,154,30,.22));
}
.consultation-bottle span {
  position: absolute;
  right: 9%;
  bottom: 13%;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(0,0,0,.62);
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}
.form {
  display: grid;
  gap: 15px;
  align-content: start;
}
.form label {
  display: grid;
  gap: 8px;
  color: var(--gold-soft);
  font-size: 14px;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 15px 17px;
  color: var(--ivory);
  background: rgba(0,0,0,.62);
  outline: none;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.form textarea { min-height: 110px; resize: vertical; }
.form select option { color: #111; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(218,154,30,.14);
}
.error {
  min-height: 16px;
  color: #ffb27f;
  font-size: 12px;
}
.form-link {
  justify-self: center;
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.success-state {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.5);
  text-align: center;
}
.success-state h3 {
  margin-bottom: 8px;
  color: var(--gold-soft);
  font-size: 28px;
}

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr) minmax(260px, .8fr);
  gap: 36px;
  width: min(var(--max), calc(100% - 90px));
  margin: 0 auto;
  padding: 54px 0 38px;
  border-top: 1px solid var(--line);
}

.portrait-lock {
  display: none;
}

@media (orientation: landscape) and (max-width: 900px) {
  body {
    overflow: hidden;
  }

  .site-shell {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
  }

  .portrait-lock {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #f4ead6;
    text-align: center;
    background:
      radial-gradient(circle at 50% 30%, rgba(240, 180, 55, .16), transparent 34%),
      rgba(0, 0, 0, .96);
  }
}
.footer p,
.footer address,
.footer a {
  color: #aaa196;
  font-style: normal;
  line-height: 1.6;
}
.footer nav {
  display: grid;
  align-content: start;
  gap: 10px;
}

.mobile-menu,
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.mobile-menu.open,
.modal-root.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(11px);
  cursor: pointer;
}
.mobile-menu { place-items: stretch end; padding: 0; }
.mobile-menu-panel {
  position: relative;
  z-index: 2;
  width: min(410px, 92vw);
  height: 100%;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: rgba(4,4,3,.98);
  overflow: auto;
  transform: translateX(100%);
  transition: transform .28s ease;
}
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
}
.mobile-menu nav,
.mobile-products {
  display: grid;
  gap: 8px;
}
.mobile-menu nav a,
.mobile-products a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ivory);
}
.mobile-products { margin: 28px 0; }
.mobile-products p { margin-bottom: 2px; color: var(--gold-soft); }
.mobile-products a { color: var(--accent); }

.modal-card {
  z-index: 2;
  width: min(1120px, 100%);
  max-height: min(90vh, 920px);
  overflow: auto;
  animation: modalIn .24s ease both;
}
.modal-close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 5;
}
.product-modal,
.price-modal {
  display: grid;
  grid-template-columns: minmax(330px, .76fr) minmax(0, 1fr);
  gap: 34px;
  padding: clamp(26px, 5vw, 72px);
}
.modal-product-visual {
  min-height: 480px;
  --accent: var(--gold-soft);
}
.modal-product-visual .product-image {
  height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.modal-product-visual img {
  height: 420px;
  width: auto;
}
.modal-content { align-self: center; }
.benefit-list {
  display: grid;
  gap: 14px;
  padding: 14px 0 28px;
  margin: 0;
  list-style: none;
}
.price-product {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
}
.price-product::before {
  content: "";
  position: absolute;
  width: 72%;
  height: 62px;
  bottom: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: perspective(420px) rotateX(66deg);
}
.price-product img {
  position: relative;
  z-index: 2;
  height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(218,154,30,.22));
}
.quiz-result-modal {
  width: min(760px, 100%);
  padding: clamp(26px, 5vw, 60px);
}

.icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--gold-soft);
  border: 1px solid currentColor;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(255,202,77,.28));
}
/* Единые SVG-иконки (как в мобильной версии) — глиф рисуется маской внутри кружка */
.icon::after { content: none; }
.icon::before {
  content: "";
  position: absolute;
  inset: 24%;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.icon-target::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='%23000'/%3E%3C/svg%3E");
}
.icon-bolt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2 5.4 13.4h4.9L9.1 22l8.6-11.6h-5.3L13.2 2Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2 5.4 13.4h4.9L9.1 22l8.6-11.6h-5.3L13.2 2Z' fill='%23000'/%3E%3C/svg%3E");
}
.icon-flame::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7c.8 3.3-1 5-2.5 6.8C8 11.2 7 12.7 7 14.6a5 5 0 0 0 10 0c0-2-.9-3.4-2-4.9-1.3-1.6-2.5-3.6-3-7Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7c.8 3.3-1 5-2.5 6.8C8 11.2 7 12.7 7 14.6a5 5 0 0 0 10 0c0-2-.9-3.4-2-4.9-1.3-1.6-2.5-3.6-3-7Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-shield::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 20 5.1v6.9c0 5.1-3.3 8.6-8 9.8-4.7-1.2-8-4.7-8-9.8V5.1Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m8.4 11.7 2.5 2.5 4.7-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 20 5.1v6.9c0 5.1-3.3 8.6-8 9.8-4.7-1.2-8-4.7-8-9.8V5.1Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m8.4 11.7 2.5 2.5 4.7-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-molecule::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.2' cy='6.8' r='2.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='17.6' cy='5.4' r='1.9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='13.4' cy='17.2' r='2.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M8.4 6.2l7.3-.6M7.2 8.9l5 6M16.9 7.2l-2.6 7.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.2' cy='6.8' r='2.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='17.6' cy='5.4' r='1.9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='13.4' cy='17.2' r='2.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M8.4 6.2l7.3-.6M7.2 8.9l5 6M16.9 7.2l-2.6 7.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.icon-support::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 13.6v-2a7.4 7.4 0 0 1 14.8 0v2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='3' y='12.6' width='3.6' height='6' rx='1.7' fill='%23000'/%3E%3Crect x='17.4' y='12.6' width='3.6' height='6' rx='1.7' fill='%23000'/%3E%3Cpath d='M19.2 18.8c-.4 1.6-2 2.4-4.6 2.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 13.6v-2a7.4 7.4 0 0 1 14.8 0v2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='3' y='12.6' width='3.6' height='6' rx='1.7' fill='%23000'/%3E%3Crect x='17.4' y='12.6' width='3.6' height='6' rx='1.7' fill='%23000'/%3E%3Cpath d='M19.2 18.8c-.4 1.6-2 2.4-4.6 2.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon-lock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.8' y='10.4' width='14.4' height='9.6' rx='2.2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.2 10.4V7.9a3.8 3.8 0 0 1 7.6 0v2.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='15.2' r='1.5' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.8' y='10.4' width='14.4' height='9.6' rx='2.2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8.2 10.4V7.9a3.8 3.8 0 0 1 7.6 0v2.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='15.2' r='1.5' fill='%23000'/%3E%3C/svg%3E");
}
.icon-flask::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 2.8h5.4M10.4 2.8v5.6L5.5 17.1a2.3 2.3 0 0 0 2 3.3h9a2.3 2.3 0 0 0 2-3.3L13.6 8.4V2.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.6 14.6h8.8' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 2.8h5.4M10.4 2.8v5.6L5.5 17.1a2.3 2.3 0 0 0 2 3.3h9a2.3 2.3 0 0 0 2-3.3L13.6 8.4V2.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.6 14.6h8.8' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.icon-delivery::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 6.8h11.4v8.4H2.8z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M14.2 9.6h3.9l2.9 3.6v2h-2.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='17.6' r='1.9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='16.9' cy='17.6' r='1.9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 6.8h11.4v8.4H2.8z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M14.2 9.6h3.9l2.9 3.6v2h-2.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='17.6' r='1.9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='16.9' cy='17.6' r='1.9' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
}
.icon-telegram::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 3.4 2.9 10.6c-.9.35-.85 1.6.07 1.88l4.6 1.43 1.76 5.62c.27.85 1.35 1.05 1.9.35l2.5-3.2 4.63 3.4c.7.5 1.7.13 1.87-.72l2.5-14.3c.2-1.1-.9-1.98-1.93-1.6ZM8.9 13.2l9.1-6.7c.24-.18.5.14.3.35l-7.3 7.1-.3 3.2-1.8-3.95Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 3.4 2.9 10.6c-.9.35-.85 1.6.07 1.88l4.6 1.43 1.76 5.62c.27.85 1.35 1.05 1.9.35l2.5-3.2 4.63 3.4c.7.5 1.7.13 1.87-.72l2.5-14.3c.2-1.1-.9-1.98-1.93-1.6ZM8.9 13.2l9.1-6.7c.24-.18.5.14.3.35l-7.3 7.1-.3 3.2-1.8-3.95Z' fill='%23000'/%3E%3C/svg%3E");
}
.icon-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.1 3.6 9.3 8l-1.9 1.7c1 2.3 2.6 3.9 4.9 4.9l1.7-2 4.4 2.3-1 3.5c-.3 1-1.2 1.7-2.2 1.5-6-.9-10.1-5-11-11-.15-1 .5-1.9 1.5-2.2l1.4-.4Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.1 3.6 9.3 8l-1.9 1.7c1 2.3 2.6 3.9 4.9 4.9l1.7-2 4.4 2.3-1 3.5c-.3 1-1.2 1.7-2.2 1.5-6-.9-10.1-5-11-11-.15-1 .5-1.9 1.5-2.2l1.4-.4Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-person::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='3.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4.6 20.4c1.5-3.6 4.2-5.3 7.4-5.3s5.9 1.7 7.4 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='3.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M4.6 20.4c1.5-3.6 4.2-5.3 7.4-5.3s5.9 1.7 7.4 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

@keyframes floatBottle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-13px); }
}
@keyframes catalogBottleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes meshPulse {
  0%, 100% { opacity: .62; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent), transparent 56%)); }
  50% { opacity: .98; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent), transparent 38%)); }
}
@keyframes productParticles {
  from { background-position: 0 0, 18px 12px, 40px 22px; }
  to { background-position: 116px -116px, -74px 104px, 176px 158px; }
}
@keyframes modalLayerBreathe {
  0%, 100% {
    opacity: .09;
    transform: scale(1.035) translate3d(0, 0, 0);
  }
  50% {
    opacity: .14;
    transform: scale(1.045) translate3d(0, 0, 0);
  }
}
@keyframes modalMeshBreathe {
  0% {
    opacity: .6;
    transform: scale(1);
  }
  37% {
    opacity: .84;
    transform: scale(1.012);
  }
  71% {
    opacity: .7;
    transform: scale(1.006);
  }
  100% {
    opacity: .6;
    transform: scale(1);
  }
}
@keyframes modalParticleTwinkle {
  0% {
    opacity: .42;
    transform: scale(1);
  }
  23% {
    opacity: .78;
    transform: scale(1.006);
  }
  57% {
    opacity: .52;
    transform: scale(1.012);
  }
  100% {
    opacity: .42;
    transform: scale(1);
  }
}
@keyframes modalDustTwinkle {
  0% {
    opacity: .26;
    transform: scale(1);
  }
  50% {
    opacity: .58;
    transform: scale(1.01);
  }
  100% {
    opacity: .26;
    transform: scale(1);
  }
}
@keyframes consultationBottleSwap {
  0% {
    opacity: .15;
    transform: translateY(8px) scale(.975);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes consultationStagePulse {
  0%, 100% {
    opacity: .78;
    transform: perspective(360px) rotateX(66deg) scale(.98);
  }
  50% {
    opacity: 1;
    transform: perspective(360px) rotateX(66deg) scale(1.04);
  }
}
@keyframes consultationAuraFloat {
  0% {
    opacity: .76;
    background-position: 50% 50%, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    opacity: .98;
    background-position: 50% 48%, 20px -12px, -18px 10px, 12px 6px, -10px -8px;
  }
}
@keyframes consultationMeshSweep {
  0% {
    opacity: .72;
    transform: translate3d(-3px, 2px, 0) scale(1);
  }
  100% {
    opacity: .98;
    transform: translate3d(4px, -2px, 0) scale(1.012);
  }
}
@keyframes consultationParticleFlow {
  0% {
    opacity: .68;
    background-position: 0 0, 18px 12px, 42px 20px;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .68;
    background-position: 42px -42px, -42px 72px, 118px 96px;
  }
}
@keyframes consultationSparkDrift {
  0% {
    opacity: .52;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: .88;
    transform: translate3d(8px, -5px, 0) scale(1.01);
  }
  100% {
    opacity: .52;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes photoGlowDrift {
  0%, 100% { transform: scale(1.08) translate3d(0, 0, 0); opacity: .16; }
  50% { transform: scale(1.12) translate3d(0, -8px, 0); opacity: .25; }
}
@keyframes brandMoleculeGlow {
  0%,
  100% {
    opacity: .72;
    transform: scale(.985);
    filter: blur(.1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
    filter: blur(.25px);
  }
}
@keyframes particles {
  from { background-position: 0 0, 80px 34px; }
  to { background-position: 144px 144px, 308px 262px; }
}
@keyframes sealFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* Target layout pass: closer to PNG/Desktop/Main/люксовый_сайт_для_премиальных_пептидов.png */
:root { --max: 1810px; }

.header {
  min-height: 72px;
  width: min(var(--max), calc(100% - 96px));
}
.brand-mark { width: 58px; height: 40px; }
.brand-text strong { font-size: 28px; }
.brand-text small { font-size: 12px; }
.desktop-nav { gap: clamp(24px, 2.2vw, 54px); font-size: 14px; }
.header-cta { min-width: 268px; }
.header .gold-button { min-height: 46px; padding: 0 24px; font-size: 14px; }

.hero {
  grid-template-columns: minmax(420px, .52fr) minmax(760px, 1.48fr);
  gap: 10px;
  width: min(var(--max), calc(100% - 96px));
  min-height: 720px;
  padding: 32px 0 18px;
}
.hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(48px, 3.35vw, 70px);
  line-height: .94;
}
.hero-lead {
  max-width: 520px;
  margin-bottom: 22px;
  font-size: clamp(17px, 1.02vw, 21px);
}
.hero-benefits {
  gap: 12px;
  max-width: 500px;
  margin-bottom: 20px;
}
.hero-benefits .icon { width: 42px; height: 42px; }
.hero-actions .gold-button,
.hero-actions .ghost-button {
  min-height: 50px;
  padding: 0 24px;
  font-size: 14px;
}
.hero-showcase {
  min-height: 660px;
  overflow: visible;
}
  .hero-person {
    position: absolute;
    bottom: -2px;
    z-index: 3;
    width: auto;
    max-width: none;
    pointer-events: none;
    filter: drop-shadow(0 28px 32px rgba(0,0,0,.72)) drop-shadow(0 0 24px rgba(218,154,30,.14));
    -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, rgba(0,0,0,.88) 58%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.08) 74%, transparent 82%);
    mask-image: linear-gradient(to bottom, #000 0 50%, rgba(0,0,0,.88) 58%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.08) 74%, transparent 82%);
  }
.quality-seal {
  position: absolute;
  left: 45%;
  top: 7%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 2px solid rgba(230, 235, 255, .72);
  border-radius: 50%;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.05;
  text-align: center;
  background:
    conic-gradient(from 20deg, #5ad7ff, #a274ff, #fff, #44e1ff, #ff83d4, #71e7ff),
    radial-gradient(circle, #fff 0 28%, transparent 29%);
  box-shadow: 0 0 20px rgba(121, 205, 255, .42), 0 0 30px rgba(218,154,30,.2);
  opacity: .88;
  transform: rotate(-8deg);
  animation: sealFloat 5.4s ease-in-out infinite;
}
.hero-girl {
  left: -1%;
  height: 635px;
}
.hero-man {
  right: -2%;
  height: 655px;
}
.hero-stage {
  z-index: 6;
  min-height: 560px;
  padding: 0 13% 0 21%;
}
.hero-stage .stage-bottle.main { width: clamp(230px, 15.4vw, 330px); }
.hero-stage .stage-bottle.mid { width: clamp(165px, 11.2vw, 240px); }
.hero-stage .stage-bottle.small { width: clamp(138px, 9.4vw, 205px); }
.dna-strand {
  right: 0;
  top: 8%;
  width: 180px;
  height: 460px;
  z-index: 2;
}

.trust-strip {
  width: min(var(--max), calc(100% - 96px));
  margin-top: 10px;
}
.trust-strip article {
  min-height: 86px;
  padding: 16px 22px;
}
.trust-strip .icon { width: 48px; height: 48px; }
.trust-strip strong { font-size: 13px; }
.trust-strip span { font-size: 13px; }

.section {
  width: min(var(--max), calc(100% - 96px));
  padding: 34px 0;
}
.section-head {
  max-width: 100%;
  margin: 0 auto 20px;
  text-align: center;
}
.section-head::before,
.section-head::after {
  content: "";
  position: absolute;
  top: 25px;
  width: min(260px, 19vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  pointer-events: none;
}
.section-head::before {
  right: calc(50% + min(330px, 24vw));
}
.section-head::after {
  left: calc(50% + min(330px, 24vw));
}
.section-head h2 {
  display: block;
  width: 100%;
  margin: 0 auto;
  color: var(--ivory);
  font-size: clamp(31px, 2.25vw, 48px);
  line-height: 1.05;
  text-align: center;
}
.section-head p {
  max-width: none;
  margin: 8px auto 0;
  font-size: 17px;
  text-align: center;
}
.section-head .eyebrow,
.quality-points,
.with-dna::after { display: none; }

.catalog-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
}
.product-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 230px 1fr;
  min-height: 430px;
}
.product-card:last-child:nth-child(odd) { grid-column: auto; }
.product-image {
  min-height: 230px;
  padding: 10px 8px 0;
}
.product-image img {
  height: 220px;
}
.product-card-body {
  align-content: start;
  gap: 9px;
  padding: 12px 14px 16px;
  text-align: center;
}
.product-card h3 {
  font-size: clamp(17px, 1.25vw, 26px);
}
.product-card p {
  min-height: 44px;
  font-size: 13px;
  line-height: 1.35;
}
.product-tags,
.product-icon,
.product-card .rule { display: none; }
.product-card .outline-button {
  min-height: 38px;
  margin-top: auto;
  padding: 0 12px;
  font-size: 12px;
}

.compact-head h2 {
  font-size: clamp(26px, 2vw, 42px);
}
.product-info-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}
.product-info-grid .info-card {
  min-height: 150px;
  padding: 18px 14px 14px;
  border-color: color-mix(in srgb, var(--accent), #d89b22 40%);
}
.product-info-grid .info-card .icon {
  width: 34px;
  height: 34px;
  color: var(--accent);
}
.product-info-grid .info-card h3 {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 15px;
  text-transform: uppercase;
}
.product-info-grid .info-card p {
  min-height: 34px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.3;
}
.product-info-grid .info-card a {
  color: var(--gold-soft);
  font-size: 12px;
}

.quiz-card {
  grid-template-columns: minmax(0, .9fr) minmax(420px, .74fr) minmax(260px, .45fr);
  gap: 24px;
  min-height: 285px;
  padding: 28px 34px;
  align-items: center;
}
.quiz-main h2 {
  max-width: 560px;
  font-size: clamp(28px, 2.4vw, 46px);
}
.quiz-main > p { font-size: 15px; }
.quiz-progress { margin-bottom: 14px; }
.quiz-step-title { margin: 12px 0 10px; font-size: 16px; }
.quiz-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.quiz-options button {
  min-height: 58px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.08;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
}
.quiz-options .icon { width: 30px; height: 30px; }
.quiz-side {
  display: contents;
}
.compact-stage {
  grid-column: 2;
  min-height: 235px;
}
.compact-stage::before { bottom: 10px; height: 48px; }
.compact-stage .stage-bottle.main { width: 150px; }
.compact-stage .stage-bottle.mid { width: 108px; }
.compact-stage .stage-bottle.small { width: 84px; }
.quiz-side ul {
  grid-column: 3;
  gap: 18px;
  margin: 0;
}
.quiz-side li { font-size: 14px; }

.video-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.video-preview { aspect-ratio: 1.38 / 1; }
.video-preview img {
  left: 4%;
  height: 86%;
}
.play-button {
  width: 52px;
  height: 52px;
}
.video-card-body { padding: 12px 14px 14px; }
.video-card h3 { font-size: 17px; }
.video-card p { font-size: 12px; line-height: 1.35; }
.centered-button {
  width: min(430px, 100%);
  min-height: 44px;
  margin-top: 22px;
  font-size: 16px;
}

.consultation-panel {
  grid-template-columns: minmax(310px, .55fr) minmax(0, .75fr) repeat(4, minmax(130px, .25fr));
  gap: 20px;
  padding: 22px;
  align-items: center;
}
.consultation-copy h2 {
  font-size: 20px;
}
.consultation-copy > p {
  font-size: 13px;
}
.consultation-bottle {
  min-height: 180px;
  margin-top: 12px;
}
.consultation-bottle img { height: 160px; }
.consultation-bottle span { width: 78px; height: 78px; font-size: 12px; }
.consultation-panel .form {
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.consultation-panel .form label:has(textarea),
.consultation-panel .form .gold-button {
  grid-column: 1 / -1;
}
.consultation-panel .form input,
.consultation-panel .form select,
.consultation-panel .form textarea {
  min-height: 42px;
  padding: 10px 12px;
}
.consultation-panel .form textarea { min-height: 58px; }
.consultation-panel::before {
  content: "Экспертная поддержка\\A Безопасность\\A Индивидуальный подход\\A Контроль";
  white-space: pre-line;
  grid-column: 3 / -1;
  color: var(--gold-soft);
  line-height: 2.2;
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
}

.final-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  width: min(var(--max), calc(100% - 96px));
  margin: 0 auto 26px;
  padding: 24px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 84% 50%, rgba(255,202,77,.22), transparent 20rem),
    radial-gradient(circle at 0% 50%, rgba(255,202,77,.18), transparent 18rem),
    linear-gradient(180deg, rgba(26,20,10,.92), rgba(5,4,3,.9));
  box-shadow: 0 0 32px rgba(218,154,30,.18);
}
.final-cta h2 {
  margin: 0 0 4px;
  color: var(--gold-soft);
  font-size: clamp(26px, 2vw, 42px);
  text-transform: uppercase;
}
.final-cta p { margin: 0; color: var(--ivory); text-transform: uppercase; }
.footer {
  width: min(var(--max), calc(100% - 96px));
  padding-top: 32px;
}


@keyframes meshGlow {
  0%,
  100% {
    opacity: .36;
    filter: drop-shadow(0 0 14px rgba(255, 202, 77, .16));
  }

  50% {
    opacity: .62;
    filter: drop-shadow(0 0 28px rgba(255, 202, 77, .34));
  }
}

@keyframes dnaPulse {
  0%,
  100% {
    opacity: .74;
    transform: rotate(18deg) scale(1);
    filter: drop-shadow(0 0 14px rgba(255, 199, 65, .42));
  }

  50% {
    opacity: 1;
    transform: rotate(20deg) scale(1.025);
    filter: drop-shadow(0 0 30px rgba(255, 199, 65, .78));
  }
}


/* Mobile and tablet production pass */


/* Header refinement for mobile/tablet references */


/* Final art-direction pass: reference alignment across desktop, tablet and mobile */
:root {
  --panel-line: rgba(222, 157, 31, .42);
  --panel-line-soft: rgba(222, 157, 31, .22);
  --gold-glow: rgba(255, 189, 48, .55);
}

[data-reveal],
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html,
body {
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.site-shell {
  background:
    radial-gradient(circle at 14% 7%, rgba(255, 185, 36, .1), transparent 22rem),
    radial-gradient(circle at 83% 4%, rgba(255, 185, 36, .14), transparent 24rem),
    radial-gradient(circle at 55% 37%, rgba(0, 166, 255, .055), transparent 28rem),
    linear-gradient(180deg, #030302 0%, #060503 34%, #010101 100%);
}

.site-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 192, 54, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 192, 54, .03) 1px, transparent 1px),
    radial-gradient(circle at 78% 15%, rgba(255, 202, 77, .08), transparent 28rem);
  background-size: 96px 96px, 96px 96px, auto;
  opacity: .38;
}

.brand {
  gap: 12px;
}

.brand-mark {
  width: 74px;
  height: 50px;
  transform: translateZ(0);
}

.brand-mark::before {
  background-size: 128% auto;
}

.brand-text strong {
  color: #ffd772;
  text-shadow: 0 0 16px rgba(255, 173, 22, .34);
}

.brand-text small {
  color: #f0b332;
}

.gold-button,
.ghost-button,
.outline-button,
.info-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  line-height: 1;
  transform: translateZ(0);
  min-width: max-content; /* текст никогда не обрезается */
}

.gold-button span[aria-hidden],
.ghost-button span[aria-hidden],
.outline-button span[aria-hidden],
.info-card a span,
.header-cta > span[aria-hidden] {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  line-height: 0;
  transform: none;
}

.gold-button {
  border: 1px solid rgba(255, 226, 120, .78);
  background:
    linear-gradient(110deg, transparent 0 22%, rgba(255,255,255,.34) 28%, transparent 34%),
    linear-gradient(180deg, #ffe17a 0%, #d8961d 52%, #a86809 100%);
  background-size: 240% 100%, auto;
  box-shadow:
    0 0 0 1px rgba(96, 51, 0, .36) inset,
    0 0 22px rgba(255, 182, 37, .36),
    0 12px 30px rgba(0, 0, 0, .42);
  animation: ctaShine 4.8s ease-in-out infinite;
}

.gold-button:hover {
  background-position: -135% 0, 0 0;
  box-shadow:
    0 0 0 1px rgba(255, 242, 164, .7) inset,
    0 0 30px rgba(255, 198, 55, .52),
    0 16px 38px rgba(0, 0, 0, .56);
}

@keyframes ctaShine {
  0%, 68%, 100% { background-position: 135% 0, 0 0; }
  82% { background-position: -135% 0, 0 0; }
}

/* A compact press sweep: it always stays inside the control. */
.gold-button,
.ghost-button,
.outline-button,
.outline-xl,
.mini-button,
.telegram-auth-button {
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.gold-button,
.outline-button,
.outline-xl,
.ghost-button,
.mini-button,
.telegram-auth-button { animation: none; }
.gold-button::before,
.outline-xl::before,
.outline-button::before,
.ghost-button::before,
.mini-button::before,
.telegram-auth-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 22%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.08) 34%, rgba(255,255,255,.66) 50%, rgba(255,255,255,.1) 66%, transparent 82%);
  transform: translate3d(-180%, 0, 0) skewX(-16deg);
  transition: none;
}
.gold-button:hover::before,
.outline-xl:hover::before,
.outline-button:hover::before { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-16deg); }
.gold-button.button-pressed::before,
.outline-xl.button-pressed::before,
.outline-button.button-pressed::before,
.ghost-button.button-pressed::before,
.mini-button.button-pressed::before,
.telegram-auth-button.button-pressed::before {
  opacity: 1;
  animation: button-press-sweep .48s cubic-bezier(.2,.72,.3,1) both;
}
@keyframes button-press-sweep {
  from { transform: translate3d(-180%, 0, 0) skewX(-16deg); }
  to { transform: translate3d(610%, 0, 0) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gold-button.button-pressed::before,
  .outline-xl.button-pressed::before,
  .outline-button.button-pressed::before,
  .ghost-button.button-pressed::before,
  .mini-button.button-pressed::before,
  .telegram-auth-button.button-pressed::before { animation: none; opacity: 0; }
}

/* Inner pages keep the header deliberately calm: navigation lives in the menu, actions live in the page. */
body.inner-page .header .header-cta { display:none !important; }


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* Mobile-only elements: hidden everywhere, mobile.css re-enables them */
.m-only,
.product-short,
.lbl-short { display: none !important; }

/* ===== Декоративные элементы из макетов: ДНК, молекулы, частицы ===== */

.hero, .trust-strip, .section, .final-cta, .footer { position: relative; }

.fx {
  position: absolute;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  z-index: 0;
  opacity: .95;
  /* мягкое растворение краёв кропа — убирает жёсткие границы */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 54%, rgba(0, 0, 0, .72) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 54%, rgba(0, 0, 0, .72) 78%, transparent 100%);
  animation: fx-pulse 8s ease-in-out infinite alternate;
}

.fx:nth-of-type(2n) { animation-delay: 2.4s; animation-duration: 10s; }
.fx:nth-of-type(3n) { animation-delay: 4s; }

@keyframes fx-pulse {
  from { opacity: .75; filter: brightness(1.05); }
  to { opacity: 1; filter: brightness(1.32); }
}

@media (prefers-reduced-motion: reduce) {
  .fx { animation: none; }
}

/* Старая CSS-спираль в hero заменена картинкой из макета */
.hero .dna-strand { display: none; }

/* --- позиции и размеры: не крупнее исходного разрешения кропа --- */

.fx-hero-dna { right: -24px; top: 5%; width: min(13vw, 200px); }
.fx-hero-molecules { left: -30px; bottom: 8%; width: min(17vw, 260px); opacity: .38; }
.fx-hero-hex { left: 27%; top: -8px; width: min(15vw, 290px); opacity: .3; }
.fx-hero-stage-particles { right: 11%; bottom: 3%; width: min(24vw, 430px); opacity: .6; }

.fx-trust-particles { left: 5%; bottom: -30px; width: min(30vw, 450px); opacity: .55; }

.fx-catalog-molecules { left: -34px; top: -46px; width: min(14vw, 240px); opacity: .6; }
.fx-catalog-hex { right: -30px; top: -40px; width: min(15vw, 295px); opacity: .65; }

.fx-science-dna { right: -30px; top: 110px; width: min(9vw, 158px); opacity: .7; }
.fx-science-molecules { left: -26px; top: -30px; width: min(14vw, 300px); opacity: .5; }

.fx-quiz-molecules { right: -32px; top: -40px; width: min(13vw, 275px); opacity: .5; }
.fx-quiz-particles { left: 2%; bottom: -26px; width: min(28vw, 450px); opacity: .5; }

.fx-videos-molecules { left: 14px; top: -34px; width: min(14vw, 300px); opacity: .55; }
.fx-videos-dna { right: -22px; top: -30px; width: min(11vw, 200px); opacity: .65; }
.fx-videos-particles { right: 4%; bottom: -28px; width: min(28vw, 450px); opacity: .5; }

.fx-consult-molecules { right: -30px; top: -36px; width: min(13vw, 270px); transform: scaleX(-1); opacity: .45; }

.fx-cta-molecules { left: -8px; top: 50%; translate: 0 -50%; width: min(11vw, 210px); opacity: .55; }
.fx-cta-dna { right: -6px; top: 50%; translate: 0 -50%; width: min(7.5vw, 140px); opacity: .6; }

.fx-footer-hex { right: -24px; bottom: -20px; width: min(13vw, 260px); opacity: .3; }

/* декор секции «Выберите свой путь» — только для мобильного */
.fx-paths-molecules, .fx-paths-hex { display: none; }

/* содержимое секций поверх декора */
.hero > *:not(.fx),
.section > *:not(.fx),
.final-cta > *:not(.fx),
.trust-strip > *:not(.fx) { position: relative; z-index: 1; }

/* --- tablet --- */
@media (max-width: 1180px) {
  .fx { opacity: .55; }
  .fx-hero-molecules, .fx-quiz-molecules, .fx-consult-molecules,
  .fx-trust-particles, .fx-videos-molecules,
  .fx-hero-hex, .fx-hero-stage-particles,
  .quiz-fx-dna, .quiz-fx-stage-particles { display: none; }
  .fx-hero-dna { width: 150px; }
  .fx-catalog-molecules { width: 140px; top: -30px; }
  .fx-catalog-hex { width: 170px; top: -26px; }
  .fx-science-dna { width: 120px; top: 130px; }
  .fx-science-molecules { width: 190px; }
  .fx-videos-dna { width: 150px; }
  .fx-cta-molecules { width: 140px; }
  .fx-cta-dna { width: 100px; }
}

/* --- mobile: декор крупный и яркий --- */
@media (max-width: 560px) {
  .fx {
    opacity: .95;
    animation: none;
    filter: brightness(1.22) saturate(1.08);
    /* более плотная сердцевина маски — элементы читаются, края всё ещё мягкие */
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 60%, rgba(0, 0, 0, .72) 82%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 60%, rgba(0, 0, 0, .72) 82%, transparent 100%);
  }
  .fx-quiz-particles, .fx-trust-particles, .fx-videos-particles { display: none; }

  /* hero: ДНК за заголовком; соты и молекулы заполняют тёмный разрыв между текстом и людьми */
  .fx-hero-dna { right: -26px; top: 22px; width: 190px; opacity: .9; }
  .fx-hero-hex { display: block; left: -30px; top: 19%; width: 250px; opacity: .8; }
  .fx-hero-molecules { display: block; left: auto; right: -34px; bottom: auto; top: 21%; width: 200px; opacity: .75; }
  .fx-hero-stage-particles { display: block; right: -4px; top: 50%; width: 74%; opacity: 1; }

  /* «Выберите свой путь»: аминокислоты за заголовком и между карточками */
  .fx-paths-molecules { display: block; left: -34px; top: -10px; width: 200px; opacity: .8; }
  .fx-paths-hex { display: block; right: -30px; top: 34%; width: 210px; opacity: .7; }

  .fx-catalog-molecules { display: block; left: -36px; top: -20px; width: 200px; opacity: .8; }
  .fx-catalog-hex { right: -34px; top: -12px; width: 210px; opacity: .85; }

  .fx-science-dna { display: none; }
  .fx-science-molecules { left: -32px; top: -16px; width: 210px; opacity: .8; }

  .fx-quiz-molecules { display: block; right: -38px; top: -16px; width: 200px; opacity: .75; }

  .fx-videos-molecules { display: block; left: -28px; top: -12px; width: 190px; opacity: .75; }
  .fx-videos-dna { right: -28px; top: -10px; width: 170px; opacity: .8; }

  .fx-consult-molecules { display: block; right: -34px; top: -14px; width: 195px; opacity: .75; }

  .fx-cta-molecules { width: 160px; opacity: .8; }
  .fx-cta-dna { width: 120px; opacity: .85; }

  .fx-footer-hex { display: block; right: -28px; bottom: -12px; width: 180px; opacity: .5; }
}

/* ===== Полный футер по макету ПК: рамка-панель, колонки, соцсети, копирайт ===== */

@media (min-width: 561px) {
  .footer.footer-full {
    grid-template-columns: minmax(280px, 1.15fr) minmax(0, 2.55fr);
    gap: 30px 56px;
    align-items: start;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(216, 155, 34, .05), transparent 42%), var(--panel);
    padding: 46px 50px 26px;
    margin-bottom: 30px;
    overflow: hidden;
  }
  .footer-full .footer-brand p { margin: 16px 0 22px; max-width: 360px; }
  .footer-full .footer-social { display: flex; gap: 12px; }
  .footer-full .footer-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    color: var(--gold-soft);
    transition: .2s;
  }
  .footer-full .footer-social a:hover {
    border-color: var(--gold);
    background: rgba(216, 155, 34, .1);
    transform: translateY(-2px);
  }
  .footer-full .footer-social svg { width: 20px; height: 20px; }
  .footer-full .footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
  }
  .footer-full .footer-links h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 16px;
    color: var(--gold-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .footer-full .footer-links h4 .icon { width: 26px; height: 26px; border: 0; filter: none; }
  .footer-full .footer-links a,
  .footer-full .footer-links .footer-line {
    display: block;
    margin-bottom: 11px;
    color: #aaa196;
    font-size: 14px;
    line-height: 1.45;
    transition: color .2s;
  }
  .footer-full .footer-links a:hover { color: var(--gold-soft); }
  .footer-full .footer-copy {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(216, 155, 34, .14);
    text-align: center;
    color: var(--muted);
    font-size: 13px;
  }
  .footer-full .footer-copy br { display: none; }
}

@media (min-width: 561px) and (max-width: 1180px) {
  .footer.footer-full { grid-template-columns: 1fr; gap: 26px; padding: 36px 30px 22px; }
  .footer-full .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Попап продукта: декор, подиум, «Полезно знать», лента качеств ===== */

.product-modal { position: relative; }

.product-modal .modal-fx-molecules {
  left: -14px;
  top: 4%;
  width: min(15vw, 240px);
  opacity: .5;
}
.product-modal .modal-fx-dna {
  right: 2%;
  top: 2%;
  width: min(10vw, 185px);
  opacity: .55;
}

.modal-product-visual { position: relative; }

.modal-podium {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 76%;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent, #d89b22) 42%, transparent),
    color-mix(in srgb, var(--accent, #d89b22) 14%, transparent) 55%,
    transparent 74%);
  filter: blur(2px);
  pointer-events: none;
}

.modal-product-visual img.modal-seal {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 74px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(255, 202, 77, .35));
  animation: floatBottle 7s ease-in-out infinite;
  z-index: 3;
}

/* глиф преимуществ — цветом продукта */
.product-modal .benefit-list .icon {
  color: var(--accent, var(--gold-soft));
  border-color: color-mix(in srgb, var(--accent, #d89b22) 55%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #d89b22) 30%, transparent);
}

.useful-know {
  margin: 20px 0 24px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--accent, #d89b22) 34%, transparent);
  border-left-width: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #d89b22) 7%, rgba(0, 0, 0, .4));
}
.useful-know .uk-head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--accent, var(--gold-soft));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.useful-know .uk-head .icon { width: 24px; height: 24px; border: 0; filter: none; color: inherit; }
.useful-know strong { display: block; margin-bottom: 6px; color: var(--ivory); font-size: 15.5px; }
.useful-know p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.modal-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.modal-cta-row .ghost-button { min-height: 58px; }

.modal-quality-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(218, 154, 30, .16);
  position: relative;
  z-index: 2;
}
.modal-quality-strip > div { display: flex; gap: 12px; align-items: flex-start; }
.modal-quality-strip .icon { width: 36px; height: 36px; }
.modal-quality-strip strong { display: block; margin-bottom: 3px; color: var(--gold-soft); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.modal-quality-strip span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* старые фоновые анимации в попапе продукта заменены декором из макета */
@media (min-width: 1181px) {
  .product-modal .product-mesh,
  .product-modal .product-particles,
  .product-modal .modal-float-dust { display: none; }
}

@media (max-width: 1180px) {
  .product-modal .modal-fx-molecules,
  .product-modal .modal-fx-dna,
  .product-modal .modal-seal { display: none; }
  .modal-quality-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .modal-quality-strip { display: none; }
  .useful-know { margin: 14px 0 18px; }
}

/* страховка: на низких окнах попап продукта прокручивается внутри */
@media (min-width: 561px) {
  .modal-card.product-modal { max-height: calc(100vh - 36px); overflow-y: auto; scrollbar-width: thin; }
}

/* мобильный CTA в шапке: компактнее, без подрезания текста */
@media (max-width: 560px) {
  .header-cta { padding: 0 16px; gap: 7px; min-width: max-content; }
}

/* ===== Квиз: перки и приватность (десктоп/планшет; на мобильном свой блок) ===== */
.quiz-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.quiz-privacy {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.quiz-privacy .icon { width: 17px; height: 17px; border: 0; filter: none; }
@media (max-width: 560px) {
  .quiz-perks, .quiz-privacy { display: none; }
}

/* ===== Попап продукта: компактная вёрстка — всё видно без скролла ===== */
@media (min-width: 1181px) {
  .modal-card.product-modal { padding: 32px 40px 24px; gap: 30px; align-items: center; }
  .product-modal .modal-content { align-self: center; }
  .product-modal h2 { font-size: clamp(32px, 3vw, 44px); margin-bottom: 10px; }
  .product-modal .modal-content > p { font-size: 15.5px; line-height: 1.5; margin-bottom: 4px; }
  .product-modal .benefit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    padding: 12px 0 14px;
  }
  .product-modal .benefit-list li { font-size: 14.5px; }
  .product-modal .benefit-list .icon { width: 34px; height: 34px; }
  .product-modal .modal-product-visual { min-height: 0; }
  .product-modal .modal-product-visual img { height: min(52vh, 400px); }
  .product-modal .useful-know { margin: 6px 0 16px; padding: 12px 16px; }
  .product-modal .useful-know strong { font-size: 14.5px; margin-bottom: 4px; }
  .product-modal .useful-know p { font-size: 13px; }
  .product-modal .modal-cta-row .gold-button,
  .product-modal .modal-cta-row .ghost-button { min-height: 52px; padding: 0 24px; }
  .product-modal .modal-quality-strip { margin-top: 18px; padding-top: 14px; gap: 12px; }
  .product-modal .modal-quality-strip .icon { width: 30px; height: 30px; }
  .product-modal .modal-quality-strip strong { font-size: 12px; }
  .product-modal .modal-quality-strip span { font-size: 11.5px; }
}

/* Активная страница в единой навигации */
.desktop-nav a.active { color: var(--gold-soft); }
.desktop-nav > a.active::before { opacity: 1; transform: scale(1.18); }
.mobile-menu nav a.active { color: var(--gold-soft); }

/* ===== Storefront and cart ===== */
body.cart-open { overflow: hidden; }
.cart-root [hidden] { display: none !important; }

.cart-header-button {
  gap: 10px;
}
.cart-count,
.cart-inline-count {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.cart-count:not(.has-items),
.cart-inline-count:not(.has-items) { opacity: .58; }

.product-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 15px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.product-price { display: grid; gap: 4px; }
.product-price span,
.modal-product-price span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-price strong,
.modal-product-price strong {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  white-space: nowrap;
}
.product-add-button { min-height: 46px; padding: 0 18px; white-space: nowrap; }
.product-add-button > span:last-child { font-size: 20px; }
.modal-product-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 5px 0 1px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, rgba(0,0,0,.45));
}

.shopping-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: clamp(34px, 5vw, 76px);
  overflow: hidden;
  padding: clamp(34px, 5vw, 70px);
  border: 1px solid rgba(210,156,46,.28);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 10%, rgba(220,155,31,.13), transparent 34%),
    linear-gradient(135deg, rgba(20,18,12,.97), rgba(5,12,14,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 28px 70px rgba(0,0,0,.34);
}
.shopping-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 43%, rgba(40,189,245,.045), transparent 64%);
}
.shopping-copy,
.shopping-steps { position: relative; z-index: 1; }
.shopping-copy h2 { margin: 8px 0 18px; font-size: clamp(34px, 4.2vw, 62px); line-height: .98; }
.shopping-copy > p:not(.eyebrow) { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.shopping-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.shopping-actions .gold-button,
.shopping-actions .ghost-button { min-height: 56px; }
.shopping-steps { display: grid; gap: 12px; }
.shopping-steps article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.025);
}
.shopping-steps article > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(218,156,38,.5);
  border-radius: 50%;
  color: var(--gold-soft);
  font: 500 18px Georgia, serif;
  box-shadow: inset 0 0 18px rgba(218,156,38,.08);
}
.shopping-steps strong { display: block; margin-bottom: 4px; color: #f4f0e8; font-size: 15px; }
.shopping-steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.cart-root {
  position: fixed;
  inset: 0;
  z-index: 5000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .32s;
}
.cart-root.open,
.cart-root.closing { visibility: visible; }
.cart-root.open { pointer-events: auto; transition-delay: 0s; }
.cart-root.closing { pointer-events: none; }
.cart-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.72);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity .25s ease;
}
.cart-root.open .cart-backdrop { opacity: 1; }
.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(650px, 100%);
  height: 100%;
  border-left: 1px solid rgba(216,156,38,.31);
  background:
    radial-gradient(circle at 90% 2%, rgba(24,174,230,.09), transparent 26%),
    radial-gradient(circle at 8% 12%, rgba(218,156,38,.12), transparent 31%),
    #080a09;
  box-shadow: -30px 0 90px rgba(0,0,0,.55);
  transform: translateX(102%);
  transition: transform .32s cubic-bezier(.22,.75,.18,1);
}
.cart-root.open .cart-panel { transform: translateX(0); }
.cart-panel-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 112px;
  padding: 24px 30px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,10,9,.9);
  backdrop-filter: blur(18px);
}
.cart-panel-head .eyebrow { margin: 0 0 3px; }
.cart-panel-head h2 { margin: 0; color: #fff; font: 500 clamp(30px, 4vw, 42px)/1 Georgia, serif; }
.cart-panel-head h2 span { color: var(--gold-soft); font-family: Arial, sans-serif; font-size: 16px; }
.cart-panel-head .round-button { flex: 0 0 auto; }
.cart-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px 30px calc(34px + env(safe-area-inset-bottom)); scrollbar-width: thin; scrollbar-color: rgba(218,156,38,.35) transparent; }

.cart-empty { display: grid; justify-items: center; max-width: 420px; margin: 11vh auto 0; text-align: center; }
.cart-empty-icon {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin-bottom: 24px;
  border: 1px solid rgba(218,156,38,.34);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 54px;
  box-shadow: inset 0 0 30px rgba(218,156,38,.08), 0 0 42px rgba(218,156,38,.08);
}
.cart-empty h3 { margin: 0 0 10px; color: #fff; font: 500 27px Georgia, serif; }
.cart-empty p { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.cart-items { display: grid; gap: 13px; }
.cart-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 15px;
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, rgba(255,255,255,.07));
  border-radius: 19px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 5%, transparent), rgba(255,255,255,.018));
}
.cart-item-visual {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 112px;
  border-radius: 13px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%);
}
.cart-item-visual img { width: auto; height: 104px; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0,0,0,.45)); }
.cart-item-copy { display: grid; gap: 13px; min-width: 0; padding: 4px 2px; }
.cart-item-top,
.cart-item-bottom { display: flex; justify-content: space-between; gap: 12px; }
.cart-item-top h3 { margin: 0 0 5px; color: #fff; font: 500 20px Georgia, serif; }
.cart-item-top span { color: var(--muted); font-size: 12px; }
.cart-item-top > button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: transparent;
  color: #9d9691;
  cursor: pointer;
}
.cart-item-top > button:hover { border-color: rgba(235,93,93,.45); color: #ff8a8a; }
.cart-item-bottom { align-items: center; }
.quantity-control { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(0,0,0,.24); }
.quantity-control button { width: 34px; height: 32px; border: 0; background: transparent; color: var(--gold-soft); font-size: 18px; cursor: pointer; }
.quantity-control strong { min-width: 26px; color: #fff; text-align: center; font-size: 13px; }
.cart-line-total { color: #fff; font-size: 17px; white-space: nowrap; }
.cart-total-card {
  display: grid;
  gap: 10px;
  margin-top: 17px;
  padding: 20px;
  border: 1px solid rgba(218,156,38,.25);
  border-radius: 18px;
  background: rgba(218,156,38,.045);
}
.cart-total-card > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 14px; }
.cart-total-card > div strong { color: #fff; }
.cart-total-card .cart-grand-total { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); color: #f2eee5; font-size: 17px; }
.cart-total-card .cart-grand-total strong { color: var(--gold-soft); font: 500 27px Georgia, serif; }
.cart-total-card p { margin: 0; color: #7e7b74; font-size: 11px; line-height: 1.5; }

.checkout-section { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); }
.checkout-heading > span { color: #4ab9e6; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.checkout-heading h3 { margin: 7px 0 5px; color: #fff; font: 500 28px Georgia, serif; }
.checkout-heading p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.checkout-form label { display: grid; gap: 7px; min-width: 0; color: #bdb7ad; font-size: 12px; }
.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: #fff;
  font: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.checkout-form select option { background: #111; color: #fff; }
.checkout-form textarea { min-height: 82px; resize: vertical; line-height: 1.45; }
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus { border-color: rgba(218,156,38,.52); background: rgba(218,156,38,.035); }
.checkout-wide { grid-column: 1 / -1; }
.checkout-address-hint { color: #817b71; font-size: 10px; line-height: 1.45; }
.checkout-address-preview { color: #d9ae52; font-size: 10.5px; line-height: 1.45; }
.checkout-address-selected {
  padding: 13px 14px;
  border: 1px solid rgba(218,156,38,.28);
  border-radius: 12px;
  background: rgba(218,156,38,.045);
  color: #dfd5c3;
  font-size: 12px;
  line-height: 1.5;
}
.checkout-promo-field small { color: #8f887c; font-size: 10px; line-height: 1.45; }
.product-price strong del { margin-right: 7px; color: rgba(241, 234, 222, .5); font-size: .72em; font-weight: 400; text-decoration-color: #c67a35; }
.product-price em { display: inline-flex; margin-top: 5px; padding: 3px 6px; border: 1px solid rgba(111, 214, 126, .34); border-radius: 999px; color: #8ce596; font-size: 9px; font-style: normal; font-weight: 700; }
.checkout-form .error { min-height: 13px; color: #ff8b8b; font-size: 11px; }
.checkout-consent { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px !important; margin-top: 15px; color: #8f8b84 !important; line-height: 1.5; }
.checkout-consent input { flex: 0 0 auto; width: 18px; min-height: 18px; margin-top: 1px; accent-color: #d99b24; }
.checkout-consent a { color: var(--gold-soft); }
.checkout-consent-error { display: block; }
.checkout-error { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(255,92,92,.35); border-radius: 11px; background: rgba(255,70,70,.07); color: #ffaaaa; font-size: 13px; line-height: 1.45; }
.checkout-submit { justify-content: space-between; margin-top: 17px; }
.checkout-submit strong { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.3); }
.checkout-submit:disabled { opacity: .62; cursor: wait; }
.checkout-security { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; color: #77746e; font-size: 11px; line-height: 1.5; }
.checkout-security .icon { flex: 0 0 auto; width: 17px; height: 17px; }

.order-success { display: grid; justify-items: center; max-width: 460px; margin: 9vh auto 0; text-align: center; }
.order-success-mark { display: grid; place-items: center; width: 86px; height: 86px; margin-bottom: 22px; border: 1px solid rgba(93,202,66,.5); border-radius: 50%; background: rgba(93,202,66,.07); color: #72db54; font-size: 42px; box-shadow: 0 0 42px rgba(93,202,66,.1); }
.order-success h2 { margin: 7px 0 12px; color: #fff; font: 500 34px Georgia, serif; }
.order-success > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; }
.order-success-total { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 24px 0; padding: 17px 18px; border: 1px solid rgba(218,156,38,.25); border-radius: 15px; background: rgba(218,156,38,.04); color: var(--muted); }
.order-success-total strong { color: var(--gold-soft); font: 500 24px Georgia, serif; }

.floating-cart {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(218,156,38,.45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(33,27,13,.97), rgba(9,12,12,.98));
  color: #f5f0e6;
  box-shadow: 0 16px 45px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  cursor: pointer;
  backdrop-filter: blur(14px);
}
.floating-cart-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(218,156,38,.14); color: var(--gold-soft); font-size: 24px; transform: rotate(-20deg); }
.floating-cart > span:nth-child(2) { font-size: 13px; font-weight: 700; }
.floating-cart strong { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #d79a27; color: #090909; font-size: 11px; }
.cart-toast {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 5200;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
  min-width: 310px;
  padding: 12px 13px;
  border: 1px solid rgba(218,156,38,.34);
  border-radius: 15px;
  background: rgba(12,14,13,.97);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.cart-toast.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cart-toast > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(93,202,66,.11); color: #72db54; }
.cart-toast div { display: grid; }
.cart-toast small { margin-top: 2px; color: var(--muted); }
.cart-toast button { border: 0; background: transparent; color: var(--gold-soft); font-weight: 700; cursor: pointer; }

@media (max-width: 1180px) {
  .shopping-panel { grid-template-columns: 1fr; }
  .shopping-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cart-header-button { display: none; }
  .product-buy-row { align-items: stretch; }
  .product-price strong { font-size: 21px; }
  .product-add-button { min-height: 44px; padding: 0 14px; }
  .product-card .outline-button { margin-top: 0; }
  .shopping-panel { gap: 26px; padding: 28px 19px; border-radius: 23px; }
  .shopping-copy h2 { font-size: 36px; }
  .shopping-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.62; }
  .shopping-actions { display: grid; }
  .shopping-steps { grid-template-columns: 1fr; }
  .shopping-steps article { grid-template-columns: 42px 1fr; padding: 14px; }
  .shopping-steps article > span { width: 40px; height: 40px; }
  .cart-panel { width: 100%; border-left: 0; }
  .cart-panel-head { min-height: 92px; padding: max(18px, env(safe-area-inset-top)) 18px 16px; }
  .cart-scroll { padding: 18px 14px calc(90px + env(safe-area-inset-bottom)); }
  .cart-item { grid-template-columns: 74px 1fr; gap: 11px; padding: 10px; border-radius: 16px; }
  .cart-item-visual { min-height: 102px; }
  .cart-item-visual img { height: 92px; }
  .cart-item-top h3 { font-size: 18px; }
  .cart-item-top span { font-size: 10px; }
  .cart-line-total { font-size: 15px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-wide { grid-column: auto; }
  .checkout-heading h3 { font-size: 25px; }
  .floating-cart { right: 13px; bottom: calc(13px + env(safe-area-inset-bottom)); min-height: 49px; padding: 0 11px; }
  .floating-cart > span:nth-child(2) { display: none; }
  .cart-toast { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; min-width: 0; }
  .modal-product-price { padding: 10px 12px; }
  .modal-product-price strong { font-size: 21px; }
}

/* Public header actions always share one aligned row. */
.header-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 12px;
  margin-left: auto;
}

.header-tools .language-switcher {
  flex: 0 0 auto;
  margin: 0;
}

.header-tools .cart-header-button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  min-height: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}

.header-tools .cart-header-button .cta-label { display: none; }
.header-tools .cart-header-button .cart-icon { width: 21px; height: 21px; object-fit: contain; }

/* Inner public pages retain the cart; only the cabinet has its own cart control. */
body.inner-page .header > .header-cta:not(.cart-header-button) { display: none !important; }
body.inner-page .header .header-tools .cart-header-button { display: grid !important; }