:root { --mist: rgba(28,45,27,.62); --mist-line: rgba(224,211,166,.16); }
body {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 10%, rgba(107,143,94,.22), transparent 30%),
    radial-gradient(circle at 88% 26%, rgba(196,169,106,.12), transparent 25%), var(--bg);
}
.hero { position: relative; min-height: 720px; display: grid; align-items: center; overflow: hidden; padding-block: 92px; }
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 620px; }
.hero h1 { font-size: clamp(3.6rem, 5.4vw, 5.8rem); line-height: .91; letter-spacing: -.045em; text-wrap: balance; }
.hero::before {
  content: ""; position: absolute; z-index: 0; width: min(39vw, 560px); aspect-ratio: .82;
  right: max(4vw, calc((100vw - 1180px)/2)); top: 50%; transform: translateY(-50%) rotate(3deg);
  border-radius: 48% 48% 42% 42% / 35% 35% 60% 60%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(circle at 50% 20%, rgba(225,205,148,.34), transparent 28%),
    linear-gradient(145deg, rgba(107,143,94,.42), rgba(13,28,13,.86));
  border: 1px solid rgba(224,211,166,.2);
  box-shadow: 0 45px 100px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.12);
}
.hero::after {
  width: min(29vw, 410px); height: min(29vw, 410px); right: max(8vw, calc((100vw - 1030px)/2)); top: 50%;
  transform: translateY(-50%); filter: none; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 93%, rgba(196,169,106,.5) 0 2%, transparent 2.5%),
    linear-gradient(64deg, transparent 48%, rgba(197,187,139,.55) 49% 50%, transparent 51%) 47% 50%/50% 76% no-repeat,
    radial-gradient(ellipse at 35% 40%, rgba(130,167,110,.8) 0 8%, transparent 9%),
    radial-gradient(ellipse at 62% 28%, rgba(151,181,126,.7) 0 7%, transparent 8%),
    radial-gradient(ellipse at 68% 54%, rgba(95,137,80,.75) 0 9%, transparent 10%);
  opacity: .88;
}
body::before, body::after {
  content: ""; position: fixed; border-radius: 50%; z-index: -1; pointer-events: none; filter: blur(6px);
}
body::before { width: 34rem; height: 34rem; left: -18rem; top: 32%; background: rgba(107,143,94,.09); }
body::after { width: 28rem; height: 28rem; right: -14rem; top: 58%; background: rgba(196,169,106,.07); }
header { background: rgba(15,26,15,.68); box-shadow: 0 12px 40px rgba(0,0,0,.16); }
.card, .product-card, .form-card, .faq-section details, .session-card,
.review-card, .policy-card {
  background: linear-gradient(145deg, rgba(255,245,210,.065), transparent 34%), var(--mist);
  border-color: var(--mist-line);
  box-shadow: 0 22px 60px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
.product-card, .card, .session-card, .review-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.product-card, .card, .session-card, .review-card, .faq-section details { border-radius: 22px; }
.product-card { overflow: clip; }
.product-image { height: 250px; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s; }
.product-card:hover .product-image { transform: scale(1.035); filter: saturate(1.08) contrast(1.03); }
.product-body { padding: 24px; }
.product-card:hover, .card:hover, .session-card:hover, .review-card:hover {
  transform: translateY(-6px); border-color: rgba(196,169,106,.3);
  box-shadow: 0 30px 72px rgba(0,0,0,.3), 0 0 42px rgba(107,143,94,.07), inset 0 1px rgba(255,255,255,.1);
}
.hero-eyebrow, .section-label { color: #a9c99d; }
.btn.primary, .cart-trigger, .floating-cart { box-shadow: 0 14px 34px rgba(74,107,62,.28), inset 0 1px rgba(255,255,255,.13); }
.bundle-section, .guide-section { background: rgba(8,20,8,.54); backdrop-filter: blur(12px); }
section { padding-block: clamp(72px, 7vw, 108px); }
.section-head h2 { letter-spacing: -.025em; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 900px) {
  .hero { min-height: 680px; align-items: start; padding-top: 88px; }
  .hero-inner { max-width: 680px; }
  .hero::before { width: 360px; right: -90px; top: auto; bottom: -210px; transform: rotate(9deg); opacity: .72; }
  .hero::after { width: 260px; height: 260px; right: -25px; top: auto; bottom: -110px; transform: none; opacity: .55; }
}
@media (max-width: 600px) {
  .hero { min-height: 660px; }
  .hero h1 { font-size: clamp(3.1rem, 14vw, 4.6rem); }
  .product-card, .card, .faq-section details { border-radius: 18px; }
}