


.appRoot {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100vh;
}

.appWrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.appShell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pageMain {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
}

.mainWrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mainContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}


[data-mm-header] {
  --mm-bg: #ffffff;
  --mm-text: #2e1065;
  --mm-primary: #7c3aed;
  --mm-overlay-bg: rgba(27, 9, 64, 0.62);
}

.siteHeader {
  background: var(--paper);
  border-bottom: var(--hairline) solid var(--lineSoft);
  z-index: 900;
}

.headerWrapper {
  width: 100%;
}

.headerBar {
  width: var(--wrap);
  margin: 0 auto;
  min-height: var(--headerH);
  display: flex;
  align-items: center;
  gap: var(--spaceSm);
}

.brandLink {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.brandBadge {
  height: 2.6rem;
  width: auto;
}

.brandText {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brandName {
  font-family: var(--fontDisplay);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.brandTag {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--inkMuted);
}

.navToggle {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
}

.mainNav {
  margin-left: auto;
}

.navClose {
  color: var(--ink);
}

.navList {
  display: flex;
  align-items: center;
}

.navItem {
  position: relative;
}

.navLink {
  font-size: var(--stepXs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.navLink:hover {
  color: var(--accent);
}

.megaItem {
  position: static;
}

.megaTrigger {
  font-size: var(--stepXs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  min-height: 44px;
}

.megaTrigger:hover {
  color: var(--accent);
}

.megaPanel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spaceSm);
  background: var(--paperTint);
  border-top: var(--hairline) solid var(--lineSoft);
  border-bottom: 2px solid var(--accent);
  padding: var(--spaceMd) max(1.5rem, 4vw);
  z-index: 950;
}

.megaItem:hover .megaPanel,
.megaItem:focus-within .megaPanel {
  display: grid;
}

.megaColTitle {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkMuted);
  margin-bottom: 0.6rem;
}

.megaLink {
  display: block;
  padding: 0.35rem 0;
  font-size: var(--stepSm);
  color: var(--ink);
}

.megaLink:hover {
  color: var(--accent);
}

.megaNote {
  font-size: var(--stepXs);
  color: var(--inkSoft);
}


.pageSection {
  flex: 1 1 auto;
  padding: var(--spaceXl) var(--edge);
  background: var(--paper);
}

.sectionWrapper {
  width: var(--wrap);
  margin: 0 auto;
}

.sectionInner {
  display: flex;
  flex-direction: column;
  gap: var(--spaceMd);
}

.sectionTint {
  background: var(--paperTint);
}

.sectionDeep {
  background: var(--night);
  color: var(--onDark);
}

.sectionHead {
  max-width: 62ch;
}

.sectionKicker {
  font-size: var(--stepXs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.sectionTitle {
  margin-bottom: var(--spaceXs);
}

.sectionLead {
  font-size: var(--stepMd);
  color: var(--inkSoft);
  max-width: 58ch;
}

.sectionDeep .sectionTitle {
  color: #ffffff;
}

.sectionDeep .sectionLead {
  color: var(--onDarkMuted);
}

.sectionDeep .sectionKicker {
  color: var(--inkMuted);
}


.Hero {
  position: relative;
  background-color: #1b0940;
  background-image: linear-gradient(180deg, rgba(27, 9, 64, 0.55), rgba(27, 9, 64, 0.8));
  background-size: cover;
  background-position: center;
  padding: calc(var(--spaceXl) + 1rem) var(--edge) var(--spaceXl);
  color: #ffffff;
}

.parallaxLayer {
  background-attachment: fixed;
}

.heroVeil {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 30%, rgba(124, 58, 237, 0.42), transparent 62%);
  pointer-events: none;
}

.heroWrapper {
  position: relative;
  z-index: 1;
  width: var(--wrap);
  margin: 0 auto;
}

.heroInner {
  display: flex;
  flex-direction: column;
  gap: var(--spaceSm);
  max-width: 46rem;
}

.heroKicker {
  font-size: var(--stepXs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--onDarkMuted);
}

.heroTitle {
  color: #ffffff;
  max-width: 20ch;
}

.heroLead {
  max-width: 54ch;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem);
  color: rgba(255, 255, 255, 0.88);
}

.heroPrice {
  gap: var(--spaceSm);
  align-items: baseline;
}

.heroActions {
  gap: var(--spaceXs);
  margin-top: var(--spaceXs);
}

.Hero .btnGhost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
}

.Hero .btnGhost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.badgeRow {
  gap: 0.6rem;
  margin-top: var(--spaceXs);
}


.heroFeature {
  background: var(--paper);
  padding: var(--spaceLg) var(--edge) var(--spaceMd);
}

.featureFigure {
  width: min(var(--wrap), 520px);
  margin: 0 auto;
}

.featureShot {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


.benefitList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--spaceSm);
}


.specLayout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceMd);
  align-items: flex-start;
}

.specMedia {
  flex: 1 1 min(100%, 340px);
}

.specShot {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.specBody {
  flex: 1 1 min(100%, 420px);
}

.formulaHead {
  font-family: var(--fontDisplay);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  margin: var(--spaceSm) 0 var(--spaceXs);
}


.ritualList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceMd);
}

.promiseList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceSm);
}


.OrderPanel {
  background: var(--night);
  color: var(--onDark);
  padding: var(--spaceXl) var(--edge);
}


.OrderPanel .sectionTitle {
  color: #ffffff;
}

.OrderPanel .sectionLead {
  color: var(--onDarkMuted);
}

.OrderPanel .sectionKicker {
  color: var(--onDarkMuted);
}

.orderLayout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceMd);
  align-items: flex-start;
}

.orderAside {
  flex: 1 1 min(100%, 360px);
}

.orderShot {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--spaceSm);
}

.orderForm {
  flex: 1 1 min(100%, 420px);
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.6rem);
  border-top: 4px solid var(--accent);
}

.orderFormTitle {
  font-family: var(--fontDisplay);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
  margin-bottom: var(--spaceXs);
}

.orderFormLead {
  font-size: var(--stepSm);
  color: var(--inkSoft);
  margin-bottom: var(--spaceSm);
}

.orderFacts {
  margin-bottom: var(--spaceSm);
}

.orderPhone {
  display: inline-block;
  font-family: var(--fontDisplay);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  color: #ffffff;
  margin-top: var(--spaceXs);
}

.orderPhone:hover {
  color: var(--inkMuted);
}


.faqList {
  columns: 2;
  column-gap: var(--spaceMd);
}

.faqItem {
  break-inside: avoid;
}


.siteFooter {
  background: var(--nightSoft);
  color: var(--onDarkMuted);
  padding: var(--spaceLg) var(--edge) var(--spaceSm);
}

.footerWrapper {
  width: var(--wrap);
  margin: 0 auto;
}

.footerCols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--spaceMd);
}


.footerCol {
  min-width: 0;
}

.footerBadge {
  height: 3rem;
  width: auto;
  align-self: flex-start;
  margin-bottom: var(--spaceXs);
}

.footerBlurb {
  font-size: var(--stepSm);
  line-height: 1.7;
  max-width: 40ch;
}

.footerColTitle {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.7rem;
}

.footerLink {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--stepSm);
  color: var(--onDarkMuted);
}

.footerLink:hover {
  color: #ffffff;
}

.footerContact {
  font-size: var(--stepSm);
  color: #ffffff;
}

.footerBar {
  border-top: var(--hairline) solid var(--lineDark);
  margin-top: var(--spaceMd);
  padding-top: var(--spaceSm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceXs) var(--spaceSm);
  justify-content: space-between;
  align-items: center;
}

.footerNote {
  font-size: var(--stepXs);
  color: var(--onDarkMuted);
  max-width: 72ch;
}

.footerCopy {
  font-size: var(--stepXs);
  color: var(--onDarkMuted);
}

.ccSettingsLink {
  font-size: var(--stepXs);
  color: var(--onDarkMuted);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 44px;
}

.ccSettingsLink:hover {
  color: #ffffff;
}
