.Hero {
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  
  background-image:
    radial-gradient(58% 44% at 72% 12%, rgba(201, 162, 39, 0.17) 0%, rgba(201, 162, 39, 0) 68%),
    radial-gradient(40% 34% at 8% 88%, rgba(142, 110, 27, 0.13) 0%, rgba(142, 110, 27, 0) 70%),
    linear-gradient(180deg, #0D0D10 0%, #0B0B0D 100%);
}
.Hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/src/images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.Hero-kicker {
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 700;
  color: #C9A227;
  margin: 0 0 16px;
}
.Hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  max-width: 22ch;
  margin-bottom: 24px;
}
.Hero-lead {
  max-width: 55ch;
  font-size: 1.15rem;
  line-height: 1.62;
  color: #C6BCA9;
  margin-bottom: 24px;
}
.Hero-byline {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A8272;
  border-top: 1px solid #23222A;
  border-bottom: 1px solid #23222A;
  padding: 10px 0;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.Hero-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: max(32px, 3vw);
  align-items: start;
}
.Hero-figure { margin: 0; }
.Hero-frame {
  border: 1px solid #2A2318;
  padding: 16px;
  background-image: linear-gradient(160deg, #15141A 0%, #0C0C0F 100%);
}
.Hero-photo { width: 100%; height: auto; display: block; }
.Hero-caption {
  margin-top: 12px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #8A8272;
  border-left: 2px solid #8E6E1B;
  padding-left: 12px;
}


.Offer {
  background-image: linear-gradient(180deg, #1A1A20 0%, #131317 100%);
  border: 1px solid #2A2318;
  padding: 32px;
}
.Offer-head { border-bottom: 1px solid #262029; padding-bottom: 24px; margin-bottom: 24px; }
.Offer-name {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A29886;
  margin: 0 0 8px;
}
.Offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.Offer-priceNow {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #E3BE55;
  line-height: 1;
}
.Offer-priceWas { font-size: 1.1rem; color: #8A8272; text-decoration: line-through; }
.Offer-priceCut {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0B0B0D;
  background-color: #C9A227;
  padding: 4px 8px;
}
.Offer-terms { margin-top: 8px; font-size: 0.88rem; color: #8A8272; }
.Offer-steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: offerstep; }
.Offer-step {
  counter-increment: offerstep;
  position: relative;
  padding-left: 32px;
  margin-bottom: 8px;
  font-size: 0.94rem;
  color: #B8AE9B;
}
.Offer-step::before {
  content: counter(offerstep);
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border: 1px solid #8E6E1B;
  color: #C9A227;
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.Form-group { margin-bottom: 16px; }
.Form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A29886;
  margin-bottom: 8px;
}
.Form-input {
  width: 100%;
  padding: 12px 16px;
  background-color: #0C0C0F;
  border: 1px solid #33313C;
  color: #EFE7D8;
  font-size: 1rem;
  border-radius: 2px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.Form-input::placeholder { color: #857D6B; }
.Form-input:focus { border-color: #C9A227; background-color: #0F0F13; outline: none; }
.Form-check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.Form-check input { margin-top: 5px; width: 18px; height: 18px; accent-color: #C9A227; flex: none; }
.Form-checkLabel { font-size: 0.84rem; line-height: 1.55; color: #9A9182; }
.Form-note { font-size: 0.82rem; color: #8A8272; margin-top: 16px; }
.Form-errors {
  border-left: 3px solid #B4462F;
  background-color: rgba(180, 70, 47, 0.09);
  padding: 12px 16px;
  margin-bottom: 24px;
}
.Form-errors ul { margin: 0; padding-left: 18px; }
.Form-errors li { color: #E8A38F; font-size: 0.9rem; margin-bottom: 4px; }
.Form-error { display: block; color: #E8A38F; font-size: 0.82rem; margin-top: 4px; }
.Form-success {
  border: 1px solid #8E6E1B;
  background-image: linear-gradient(180deg, rgba(201, 162, 39, 0.1) 0%, rgba(201, 162, 39, 0.02) 100%);
  padding: 24px;
  margin-bottom: 24px;
}
.Form-success h3 { color: #E3BE55; margin-bottom: 8px; }


.Button {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.Button--primary {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: #C9A227;
  border: 2px solid #C9A227;
  border-radius: 2px;
  padding: 14px 32px;
  font-weight: 700;
  z-index: 0;
}
.Button--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #C9A227;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 0.68, 0.32, 1);
  z-index: -1;
}
.Button--primary:hover, .Button--primary:focus-visible { color: #0B0B0D; }
.Button--primary:hover::before, .Button--primary:focus-visible::before { transform: scaleX(1); }
.Button--ghost {
  background-color: transparent;
  color: #B8AE9B;
  border: 1px solid #33313C;
  border-radius: 2px;
  padding: 13px 24px;
  font-weight: 600;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.Button--ghost:hover { border-color: #C9A227; color: #EFE7D8; }
.Button--block { display: block; width: 100%; }


.BadgeRow { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.Badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #B8AE9B;
  border: 1px solid #262029;
  padding: 6px 12px;
  margin: 0;
  background-color: rgba(20, 19, 24, 0.6);
}
.Badge-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #C9A227; flex: none; }


.CardGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.Card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border-radius: 4px;
  background-image: linear-gradient(150deg, #17171C 0%, #101014 100%);
  border: 1px solid #23222A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.Card:hover { border-color: #4A3D1C; transform: translateY(-2px); }
.Card-media {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #2A2318;
  background-image: radial-gradient(70% 70% at 50% 40%, rgba(201, 162, 39, 0.14) 0%, rgba(201, 162, 39, 0) 72%);
}
.Card-media svg { width: 44px; height: 44px; }
.Card-body { min-width: 0; }
.Card-title { font-size: 1.15rem; margin-bottom: 8px; }
.Card-text { font-size: 0.94rem; color: #A29886; margin: 0; }


.Formula { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(32px, 3vw); align-items: start; }
.Formula-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #23222A; }
.Formula-row { margin: 0; padding: 20px 0; border-bottom: 1px solid #23222A; }
.Formula-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  color: #F4EDE0;
  display: block;
  margin-bottom: 4px;
}
.Formula-latin { font-size: 0.8rem; font-style: italic; color: #8E6E1B; letter-spacing: 0.04em; }
.Formula-role { font-size: 0.94rem; color: #A29886; margin: 8px 0 0; }
.Formula-panel {
  border: 1px solid #2A2318;
  padding: 32px;
  
  background-image:
    linear-gradient(180deg, rgba(11, 11, 13, 0.9) 0%, rgba(11, 11, 13, 0.97) 62%),
    url("/src/images/calorvis-warming-body-gel-150ml.png");
  background-size: auto, 46% auto;
  background-position: center, right -6% bottom -8%;
  background-repeat: no-repeat, no-repeat;
}
.Formula-inci { font-size: 0.86rem; line-height: 1.6; color: #8A8272; word-break: break-word; }


.Ritual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.Ritual-step { border-top: 2px solid #8E6E1B; padding-top: 20px; }
.Ritual-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #C9A227;
  display: block;
  margin-bottom: 8px;
}
.Ritual-title { font-size: 1.2rem; margin-bottom: 8px; }
.Ritual-text { font-size: 0.94rem; color: #A29886; margin: 0; }


.Pledge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.Pledge-item { margin: 0; padding: 20px 0; border-bottom: 1px solid #23222A; }
.Pledge-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  color: #F4EDE0;
  display: block;
  margin-bottom: 4px;
}
.Pledge-text { font-size: 0.92rem; color: #A29886; margin: 0; }


.Faq { border-top: 1px solid #23222A; }
.Faq-item { border-bottom: 1px solid #23222A; }
.Faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 20px 0;
  cursor: pointer;
  font-weight: 600;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.08rem;
  color: #F4EDE0;
  background: none;
  border: 0;
  text-align: left;
}
.Faq-q:hover { color: #E3BE55; }
.Faq-pm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #C9A227;
  color: #C9A227;
  display: grid;
  place-items: center;
  flex: none;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.Faq-q .Faq-pm::after { content: "+"; }
.Faq-item.is-open .Faq-pm::after { content: "\2212"; }
.Faq-item.is-open .Faq-pm { background-color: #C9A227; color: #0B0B0D; }
.Faq-a { display: none; padding: 0 0 24px; max-width: 68ch; }
.Faq-item.is-open .Faq-a { display: block; animation: calorvisBandIn 0.4s ease both; }
.Faq-a p { font-size: 0.96rem; color: #A29886; }


.PanelScrim {
  position: fixed;
  inset: 0;
  background-color: rgba(3, 3, 4, 0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
  z-index: 1300;
}
.PanelScrim.is-open { opacity: 1; visibility: visible; }
.Panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background-image: linear-gradient(180deg, #15141A 0%, #0B0B0D 72%);
  border-left: 1px solid #2A2318;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.22, 0.68, 0.32, 1);
  z-index: 1400;
  padding: 56px 32px 40px;
}
.Panel.is-open { transform: translateX(0); }
.Panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: #A29886;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.Panel-close:hover { color: #E3BE55; }
.Panel-title { font-size: 1.6rem; margin-bottom: 8px; }
.Panel-lead { font-size: 0.94rem; color: #A29886; margin-bottom: 24px; }


.StickyCta { display: none; }


.is-revealable { opacity: 0; transform: translateY(20px); }
.is-revealed { animation: calorvisPageIn 0.6s cubic-bezier(0.22, 0.68, 0.32, 1) forwards; }


.Legal { padding: 56px 0 72px; }
.Legal-meta {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8272;
  margin-bottom: 24px;
}
.Legal-body { max-width: 74ch; }
.Legal-body h2 { margin-top: 40px; font-size: 1.5rem; }
.Legal-body h3 { margin-top: 24px; font-size: 1.15rem; }
.Legal-body ul { padding-left: 20px; }
.Legal-contact {
  border: 1px solid #2A2318;
  background-image: linear-gradient(150deg, #17171C 0%, #0E0E11 100%);
  padding: 24px;
  margin-top: 32px;
}


@media (max-width: 1024px) {
  .Hero-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .Hero-figure { max-width: 460px; }
  .Formula { grid-template-columns: minmax(0, 1fr); }
  .Ritual { grid-template-columns: minmax(0, 1fr); }
  .CardGrid { grid-template-columns: minmax(0, 1fr); }
  .Pledge { grid-template-columns: minmax(0, 1fr); }
}


@media (max-width: 768px) {
  .Hero { padding: 32px 0 40px; }
  .Hero-title { font-size: 2rem; }
  .Hero-lead { font-size: 1.02rem; }
  .Hero-byline { display: none; }
  .Offer { padding: 24px 20px; }
  .Offer-priceNow { font-size: 2.1rem; }
  .Card { gap: 16px; padding: 16px; }
  .Card-media { width: 64px; height: 64px; }
  .Card-media svg { width: 30px; height: 30px; }
  .Formula-panel { padding: 24px; background-image: linear-gradient(180deg, #131317 0%, #0B0B0D 100%); }
  .Panel { width: 100vw; padding: 56px 20px 40px; }
  .Legal { padding: 32px 0 48px; }
  
  .Legal .Section-title {
    font-size: 1.9rem;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  
  .StickyCta {
    display: flex;
    align-items: center;
    gap: 16px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    padding: 12px 16px;
    background-image: linear-gradient(180deg, rgba(11, 11, 13, 0.94) 0%, #0B0B0D 100%);
    border-top: 1px solid #2A2318;
  }
  .StickyCta-price {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    color: #E3BE55;
    line-height: 1;
    flex: none;
  }
  .StickyCta-note { font-size: 0.72rem; color: #8A8272; display: block; letter-spacing: 0.08em; }
  .StickyCta .Button--primary { flex: 1; padding: 12px 16px; font-size: 0.86rem; }
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .Page-content, .is-revealed, .Faq-item.is-open .Faq-a { animation: none; }
  .is-revealable { opacity: 1; transform: none; }
  .Panel, .Button--primary::before, .Card { transition: none; }
}