/* Static extraction of the legacy Bakery surface. The original module CSS is
   intentionally kept intact below; this small reset replaces the old global
   app shell that Next/Tailwind supplied. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #0d081d; }
body, h1, h2, h3, p { margin: 0; }
body { min-width: 320px; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

.page {
  --bakery-violet: #6527e3;
  --bakery-bright: #a879ff;
  --bakery-ink: #0d081d;
  --bakery-ink-soft: #17102d;
  --bakery-cream: #fffaf1;
  --bakery-mist: #cfc4e5;
  min-height: 100vh;
  overflow: hidden;
  color: var(--bakery-cream);
  background: var(--bakery-ink);
  font-family: var(--font-ui), "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

.page :is(a, button) { cursor: pointer; }

.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; color: white; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand span { display: grid; gap: 1px; text-transform: uppercase; letter-spacing: .22em; }
.brand strong { font-size: .77rem; font-weight: 700; }
.brand small { font-size: .62rem; font-weight: 500; color: #cfc0f4; }

.nav nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.nav nav a { position: relative; padding: 12px 0; color: rgba(255,255,255,.72); font-size: .82rem; transition: color .25s ease; }
.nav nav a::after { content: ""; position: absolute; right: 0; bottom: 6px; left: 0; height: 1px; background: #b792ff; transform: scaleX(0); transition: transform .25s ease; }
.nav nav a:hover { color: white; }
.nav nav a:hover::after { transform: scaleX(1); }

.navCta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: white;
  background: rgba(19, 9, 41, .38);
  font-size: .76rem;
  font-weight: 650;
  backdrop-filter: blur(18px);
  transition: background .25s ease, border-color .25s ease;
}
.navCta svg { width: 14px; }
.navCta:hover { border-color: #b792ff; background: rgba(101,39,227,.3); }

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(740px, 100svh);
  isolation: isolate;
}

.heroImage { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; animation: hero-arrive 1.8s cubic-bezier(.16,1,.3,1) both; }
.heroShade { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(10,5,25,.99) 0%, rgba(11,6,28,.93) 30%, rgba(12,6,29,.5) 54%, rgba(8,3,19,.12) 77%), linear-gradient(0deg, #0d081d 0%, transparent 25%); }
.heroGlow { position: absolute; z-index: -2; left: -12vw; top: 12%; width: 55vw; height: 70%; border-radius: 50%; background: rgba(101,39,227,.18); filter: blur(100px); }

.heroContent { width: min(1440px, calc(100% - 64px)); margin: 52px auto 0; }
.eyebrow, .kicker { color: #bda1ff; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid rgba(181,146,255,.35); border-radius: 999px; background: rgba(83,35,169,.17); }
.eyebrow svg { width: 15px; height: 15px; }
.hero h1 { max-width: 870px; margin: 28px 0 0; font-family: var(--font-editorial), Georgia, serif; font-size: clamp(4rem, 7.2vw, 7.9rem); font-weight: 500; line-height: .86; letter-spacing: -.065em; text-wrap: balance; }
.hero h1 em { color: #bfa1ff; font-weight: 400; }
.heroCopy { max-width: 510px; margin-top: 34px; color: rgba(255,250,241,.7); font-size: clamp(1rem, 1.2vw, 1.17rem); font-weight: 350; line-height: 1.65; }
.heroActions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }

.primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  color: white;
  background: var(--bakery-violet);
  box-shadow: 0 12px 38px rgba(101,39,227,.36);
  font-size: .79rem;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.primaryButton svg { width: 16px; height: 16px; }
.primaryButton:hover { transform: translateY(-2px); background: #7540e7; box-shadow: 0 16px 48px rgba(101,39,227,.48); }
.textLink { padding-block: 11px; border-bottom: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.76); font-size: .8rem; }
.textLink:hover { color: white; border-color: #b792ff; }
.heroNote { position: absolute; right: 44px; bottom: 64px; padding-left: 70px; color: rgba(255,255,255,.58); font-family: var(--font-editorial), Georgia, serif; font-size: .86rem; font-style: italic; }
.heroNote::before { content: ""; position: absolute; top: 50%; left: 0; width: 54px; height: 1px; background: rgba(255,255,255,.34); }

.promiseBar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1440px, calc(100% - 64px));
  margin: -32px auto 0;
  border: 1px solid rgba(183,146,255,.23);
  border-radius: 26px;
  background: rgba(29,17,57,.82);
  box-shadow: 0 32px 70px rgba(0,0,0,.26);
  backdrop-filter: blur(24px);
}
.promiseBar article { display: flex; align-items: center; gap: 15px; min-height: 114px; padding: 24px 28px; }
.promiseBar article + article { border-left: 1px solid rgba(255,255,255,.08); }
.promiseBar article > span { display: grid; flex: 0 0 45px; height: 45px; place-items: center; border-radius: 50%; color: #c4a7ff; background: rgba(101,39,227,.2); }
.promiseBar svg { width: 20px; height: 20px; stroke-width: 1.5; }
.promiseBar strong { display: block; font-size: .78rem; }
.promiseBar p { margin-top: 5px; color: rgba(255,255,255,.47); font-size: .68rem; line-height: 1.4; }

.products { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 170px 0 160px; }
.sectionHeader { max-width: 760px; }
.sectionHeader h2, .manifesto h2, .opening h2 { margin-top: 18px; font-family: var(--font-editorial), Georgia, serif; font-weight: 500; letter-spacing: -.045em; }
.sectionHeader h2 { font-size: clamp(3.4rem, 5vw, 5.7rem); line-height: .9; }
.sectionHeader > p:last-child { max-width: 540px; margin-top: 28px; color: rgba(255,255,255,.52); font-size: .91rem; line-height: 1.7; }
.productGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 70px; }
.featuredProduct { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: #160d2c; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease; }
.featuredProduct:hover { transform: translateY(-7px); border-color: rgba(184,145,255,.44); box-shadow: 0 34px 80px rgba(0,0,0,.3); }
.productImage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #120a25; }
.productImage::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(13,8,29,.64)); }
.productImage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.featuredProduct:hover .productImage img { transform: scale(1.035); }
.productImage > span { position: absolute; z-index: 2; top: 22px; left: 22px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; background: rgba(13,8,29,.38); backdrop-filter: blur(12px); font-family: ui-monospace, monospace; font-size: .62rem; }
.productInfo { padding: 32px 34px 38px; }
.productInfo > p:first-child { margin-bottom: 10px; color: #a985ff; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.productInfo h3 { font-family: var(--font-editorial), Georgia, serif; font-size: clamp(2.7rem, 4vw, 4.6rem); font-weight: 500; letter-spacing: -.04em; }
.productBody { color: rgba(255,255,255,.49); font-size: .82rem; line-height: 1.65; }
.productInfo .productBody { max-width: 500px; margin-top: 18px; }

.manifesto { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; min-height: 760px; padding: 100px max(32px, calc((100vw - 1320px) / 2)); overflow: hidden; background: #f3ebff; color: #1a0b37; }
.manifesto::before { content: ""; position: absolute; inset: -15% 55% -30% -15%; border-radius: 50%; background: #6527e3; filter: blur(0); opacity: .98; }
.manifestoMark { position: relative; display: grid; place-items: center; min-height: 500px; }
.manifestoMark::before, .manifestoMark::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.manifestoMark::before { width: 440px; height: 440px; }
.manifestoMark::after { width: 350px; height: 350px; border-style: dashed; animation: slow-orbit 35s linear infinite; }
.manifestoMark img { width: 280px; height: 280px; object-fit: contain; opacity: .17; }
.manifestoMark span { position: absolute; display: grid; color: white; font-family: var(--font-editorial), Georgia, serif; font-size: 5.4rem; line-height: .78; letter-spacing: -.08em; text-align: center; }
.manifestoMark small { margin-top: 14px; font-family: var(--font-ui), sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.manifestoCopy { position: relative; max-width: 620px; justify-self: center; }
.manifestoCopy .kicker { color: #6527e3; }
.manifesto h2 { font-size: clamp(4rem, 6.1vw, 7rem); line-height: .88; }
.manifesto h2 em { color: #6527e3; font-weight: 400; }
.manifestoCopy > p:not(.kicker) { max-width: 550px; margin-top: 34px; color: rgba(26,11,55,.64); font-size: 1rem; line-height: 1.8; }
.ingredientLine { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; color: #4a356a; font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ingredientLine i { width: 4px; height: 4px; border-radius: 50%; background: #8f5be9; }

.opening { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 760px; padding: 110px 24px; text-align: center; overflow: hidden; }
.opening::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle, #000, transparent 70%); }
.openingOrb { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(101,39,227,.34); filter: blur(80px); animation: breathe 7s ease-in-out infinite; }
.opening > *:not(.openingOrb) { position: relative; }
.openingLogo { width: 100px; height: 100px; margin-bottom: 30px; object-fit: contain; }
.opening h2 { max-width: 900px; margin-top: 16px; font-size: clamp(4rem, 7.5vw, 8rem); line-height: .86; }
.opening > p:not(.kicker) { max-width: 540px; margin-top: 30px; color: rgba(255,255,255,.56); font-size: .94rem; line-height: 1.7; }
.opening .primaryButton { margin-top: 36px; }

.footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; width: min(1440px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0 38px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-size: .68rem; }
.footerBrand { display: flex; align-items: center; gap: 12px; }
.footerBrand img { width: 42px; height: 42px; object-fit: contain; }
.footerBrand p { display: grid; gap: 3px; }
.footerBrand strong { color: white; font-size: .71rem; }
.footerBrand span { color: rgba(255,255,255,.4); }
.footer > p { text-align: center; }
.footer > div:last-child { justify-self: end; display: flex; gap: 22px; }
.footer a { color: #bea4f3; }

@keyframes hero-arrive { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes slow-orbit { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .74; } }

@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; width: calc(100% - 36px); }
  .nav nav { display: none; }
  .heroContent, .promiseBar, .products, .footer { width: calc(100% - 36px); }
  .heroImage { object-position: 66% center; }
  .heroShade { background: linear-gradient(90deg, rgba(10,5,25,.99) 0%, rgba(11,6,28,.9) 40%, rgba(12,6,29,.35) 78%), linear-gradient(0deg, #0d081d 0%, transparent 34%); }
  .promiseBar { grid-template-columns: repeat(2, 1fr); }
  .promiseBar article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .promiseBar article:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
  .sectionHeader > p:last-child { max-width: 560px; }
  .productGrid { grid-template-columns: 1fr; }
  .manifesto { grid-template-columns: 1fr; gap: 30px; padding-block: 100px 120px; }
  .manifesto::before { inset: -10% -20% 52%; }
  .manifestoMark { min-height: 420px; }
  .manifestoCopy { justify-self: start; }
}

@media (max-width: 640px) {
  .nav { padding-top: 17px; }
  .brand img { width: 44px; height: 44px; }
  .navCta { min-height: 39px; padding-inline: 14px; }
  .navCta svg { display: none; }
  .hero { min-height: 790px; align-items: flex-end; padding-bottom: 128px; }
  .heroImage { object-position: 68% 20%; }
  .heroShade { background: linear-gradient(0deg, #0d081d 10%, rgba(11,6,28,.92) 43%, rgba(10,5,25,.2) 85%), linear-gradient(90deg, rgba(10,5,25,.78), transparent 80%); }
  .heroContent { margin-top: 0; }
  .eyebrow { font-size: .6rem; }
  .hero h1 { margin-top: 20px; font-size: clamp(3.45rem, 16vw, 5.1rem); line-height: .89; }
  .heroCopy { margin-top: 24px; font-size: .92rem; }
  .heroActions { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 28px; }
  .heroNote { display: none; }
  .promiseBar { grid-template-columns: 1fr; margin-top: -46px; }
  .promiseBar article { min-height: 94px; padding: 18px 20px; }
  .promiseBar article + article { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .products { padding-block: 120px 110px; }
  .sectionHeader h2 { font-size: 3.7rem; }
  .productGrid { margin-top: 48px; }
  .featuredProduct { border-radius: 22px; }
  .productInfo { padding: 26px 24px 30px; }
  .manifesto { padding-inline: 18px; }
  .manifestoMark { min-height: 350px; }
  .manifestoMark::before { width: 330px; height: 330px; }
  .manifestoMark::after { width: 270px; height: 270px; }
  .manifestoMark img { width: 220px; height: 220px; }
  .manifestoMark span { font-size: 4.2rem; }
  .manifesto h2 { font-size: 4rem; }
  .ingredientLine { align-items: flex-start; flex-direction: column; }
  .ingredientLine i { display: none; }
  .opening { min-height: 700px; }
  .opening h2 { font-size: clamp(3.7rem, 17vw, 5.6rem); }
  .footer { grid-template-columns: 1fr auto; }
  .footer > p { display: none; }
  .footer > div:last-child { flex-direction: column; gap: 4px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .page { scroll-behavior: auto; }
  .heroImage, .manifestoMark::after, .openingOrb { animation: none; }
}