:root {
    --wine-950: #3c1022;
    --wine-900: #50142c;
    --wine-800: #6e1f3d;
    --wine-700: #8d2d50;
    --rose-600: #bd4770;
    --rose-300: #e9a5b8;
    --rose-100: #fbe7eb;
    --blush: #fff5f4;
    --cream: #fffaf2;
    --gold-700: #a87520;
    --gold-500: #d4a84c;
    --gold-300: #f0d58d;
    --ink: #2a1720;
    --muted: #715e67;
    --white: #fff;
    --line: rgba(91, 32, 57, .13);
    --shadow: 0 28px 80px rgba(77, 22, 46, .14);
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 112px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-150%); padding: 10px 16px; color: #fff; background: var(--wine-900); border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 82px; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: .3s ease; }
.site-header.scrolled { height: 70px; background: rgba(255, 250, 242, .92); border-color: var(--line); box-shadow: 0 10px 35px rgba(67, 20, 38, .07); backdrop-filter: blur(16px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 52px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(184, 138, 50, .35); border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(90, 29, 54, .12); }
.brand-mark img { width: 112%; max-width: none; transform: translateY(-2%); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { color: var(--wine-900); font-family: var(--serif); font-size: 16px; letter-spacing: .08em; }
.brand-copy small { margin-top: 4px; color: var(--gold-700); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { position: relative; color: #4b3941; font-size: 14px; font-weight: 650; text-decoration: none; }
.main-nav a:not(.nav-cta)::after { content: ''; position: absolute; inset: auto 50% -7px; height: 2px; background: var(--rose-600); transform: translateX(-50%) scaleX(0); transition: transform .2s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.main-nav .nav-cta { padding: 11px 19px; color: var(--wine-900); border: 1px solid var(--gold-500); border-radius: 999px; background: rgba(255,255,255,.45); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: var(--wine-900); }
.menu-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 4px auto; background: #fff; transition: .25s ease; }

.hero { position: relative; min-height: 870px; display: grid; align-items: center; padding: 145px 0 100px; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 74% 42%, rgba(255,255,255,.85) 0 14%, transparent 41%), linear-gradient(120deg, #fff8f3 0%, #fde9e7 58%, #f6cdd6 100%); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; opacity: .28; background-image: linear-gradient(rgba(143,45,80,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(143,45,80,.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #000, transparent 82%); }
.hero-grid { display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 56px; }
.hero-copy { position: relative; z-index: 2; padding-top: 20px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--gold-700); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border: 1px solid rgba(168,117,32,.28); border-radius: 999px; background: rgba(255,255,255,.55); }
.eyebrow span { color: var(--rose-600); }
.hero h1, .section h2, .closing h2 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }
.hero h1 { max-width: 670px; font-size: clamp(54px, 6.3vw, 88px); }
h1 em, h2 em { color: var(--wine-700); font-weight: 400; }
.hero-tagline { margin: 24px 0 10px; color: var(--wine-800); font-family: var(--serif); font-size: clamp(23px, 2.2vw, 31px); font-style: italic; }
.hero-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; transition: .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, var(--wine-900), var(--rose-600), #d86b91, var(--wine-800), var(--gold-500));
    background-size: 260% 260%;
    box-shadow: 0 17px 35px rgba(110,31,61,.22);
    animation: gradient-dance 7s ease-in-out infinite;
}
.button-primary::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 34%, rgba(255,255,255,.12));
    transform: translateX(-120%);
    animation: button-shine 4.8s ease-in-out infinite;
}
.hero-facts { display: flex; gap: 0; margin-top: 43px; }
.hero-facts div { min-width: 132px; padding: 0 21px; border-left: 1px solid rgba(80,20,44,.19); }
.hero-facts div:first-child { padding-left: 0; border-left: 0; }
.hero-facts strong, .hero-facts span { display: block; }
.hero-facts strong { color: var(--wine-900); font-family: var(--serif); font-size: 24px; }
.hero-facts span { color: var(--muted); font-size: 11px; }
.hero-art { position: relative; min-height: 600px; display: grid; place-items: center; }
.art-card { position: relative; z-index: 2; width: min(100%, 540px); aspect-ratio: 1; display: grid; place-items: center; padding: 38px; overflow: hidden; border: 1px solid rgba(212,168,76,.38); border-radius: 50% 50% 46% 46%; background: rgba(255,255,255,.78); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.art-card::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(212,168,76,.28); border-radius: inherit; pointer-events: none; }
.art-card img { position: relative; z-index: 1; width: 108%; max-width: none; transform: translateY(-4%); filter: drop-shadow(0 25px 24px rgba(90,25,50,.15)); }
#hero-logo-showcase { scroll-margin-top: 92px; }
.art-label { position: absolute; z-index: 3; top: 35px; color: var(--gold-700); font-family: var(--serif); font-size: 12px; font-style: italic; letter-spacing: .14em; text-transform: uppercase; }
.art-orbit { position: absolute; border: 1px solid rgba(166,71,107,.22); border-radius: 50%; will-change: transform; }
.orbit-one { width: 600px; height: 600px; animation: orbit 22s linear infinite; }
.orbit-two { width: 680px; height: 680px; border-style: dashed; animation: orbit 30s linear infinite reverse; }
.orbit-one::before, .orbit-two::before,
.orbit-one::after, .orbit-two::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 0 8px rgba(212,168,76,.13), 0 0 22px rgba(212,168,76,.36);
}
.orbit-one::after, .orbit-two::after { width: 12px; height: 12px; top: 12%; left: 12%; }
.orbit-one::before { width: 8px; height: 8px; right: 16%; bottom: 18%; background: var(--rose-600); }
.orbit-two::before { width: 10px; height: 10px; right: 12%; top: 20%; }
.ingredient-chip { position: absolute; z-index: 4; padding: 9px 15px; color: var(--wine-900); border: 1px solid rgba(185,71,111,.19); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 11px 25px rgba(90,25,50,.11); font-family: var(--serif); font-size: 13px; font-style: italic; }
.chip-one { top: 19%; left: 0; }.chip-two { right: -1%; top: 33%; }.chip-three { left: 6%; bottom: 13%; }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(8px); will-change: transform, opacity; }
.hero-glow-one { width: 380px; height: 380px; right: -160px; top: -70px; background: rgba(177,58,101,.15); animation: glow-drift-one 13s ease-in-out infinite alternate; }
.hero-glow-two { width: 260px; height: 260px; left: 38%; bottom: -130px; background: rgba(212,168,76,.18); animation: glow-drift-two 15s ease-in-out infinite alternate; }
.floating-bubble {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    opacity: 0;
    filter: blur(18px);
    pointer-events: none;
    will-change: transform, opacity;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), transparent 35%),
        radial-gradient(circle, rgba(233,165,184,.35), rgba(212,168,76,.16) 58%, transparent 72%);
}
.bubble-one { width: 190px; height: 190px; right: 5%; bottom: -220px; animation: bubble-rise-right 17s linear infinite; }
.bubble-two { width: 145px; height: 145px; left: 4%; bottom: -190px; animation: bubble-rise-left 20s linear 4s infinite; }
.bubble-three { width: 250px; height: 250px; right: 28%; bottom: -290px; animation: bubble-rise-center 24s linear 8s infinite; }
.bubble-four { width: 110px; height: 110px; left: 42%; bottom: -160px; animation: bubble-rise-left 18s linear 12s infinite; }
.hero-wave { position: absolute; right: 0; bottom: -1px; left: 0; height: 55px; background: var(--cream); clip-path: ellipse(58% 50% at 50% 100%); }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes gradient-dance {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes button-shine {
    0%, 48% { transform: translateX(-120%); opacity: 0; }
    58% { opacity: .9; }
    76%, 100% { transform: translateX(120%); opacity: 0; }
}
@keyframes glow-drift-one {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(-46px,42px,0) scale(1.12); }
}
@keyframes glow-drift-two {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(60px,-35px,0) scale(.92); }
}
@keyframes bubble-rise-right {
    0% { opacity: 0; transform: translate3d(0,0,0) scale(.78); }
    13% { opacity: .72; }
    74% { opacity: .55; }
    100% { opacity: 0; transform: translate3d(-120px,-118vh,0) scale(1.28); }
}
@keyframes bubble-rise-left {
    0% { opacity: 0; transform: translate3d(0,0,0) scale(.72); }
    15% { opacity: .58; }
    72% { opacity: .48; }
    100% { opacity: 0; transform: translate3d(125px,-116vh,0) scale(1.22); }
}
@keyframes bubble-rise-center {
    0% { opacity: 0; transform: translate3d(0,0,0) scale(.7); }
    12% { opacity: .42; }
    68% { opacity: .36; }
    100% { opacity: 0; transform: translate3d(55px,-122vh,0) scale(1.18); }
}
@keyframes hero-art-float {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-16px,0); }
}
@keyframes art-card-breathe {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-7px,0) scale(1.018); }
}
@keyframes chip-float-one {
    0%, 100% { transform: translate3d(0,0,0) rotate(-1deg); }
    50% { transform: translate3d(10px,-14px,0) rotate(2deg); }
}
@keyframes chip-float-two {
    0%, 100% { transform: translate3d(0,0,0) rotate(1deg); }
    50% { transform: translate3d(-12px,12px,0) rotate(-2deg); }
}
@keyframes chip-float-three {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(8px,15px,0) rotate(2deg); }
}

.intro-strip { background: var(--cream); border-bottom: 1px solid var(--line); }
.intro-items { min-height: 150px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.intro-items > div { display: flex; align-items: center; gap: 18px; padding: 18px 38px; border-left: 1px solid var(--line); }
.intro-items > div:first-child { border-left: 0; padding-left: 0; }
.intro-items span { color: var(--gold-500); font-family: var(--serif); font-size: 25px; font-style: italic; }
.intro-items p, .intro-items strong { display: block; margin: 0; }
.intro-items strong { color: var(--wine-900); font-family: var(--serif); font-size: 17px; }
.intro-items p { color: var(--muted); font-size: 12px; line-height: 1.45; }

.story { background: #fffdf9; }
.story-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 100px; }
.story-visual { position: relative; max-width: 500px; padding: 17px; border: 1px solid var(--gold-300); }
.poster-frame { position: relative; overflow: hidden; aspect-ratio: 2 / 3; background: var(--wine-950); }
.poster-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.story-stamp { position: absolute; right: -46px; bottom: 48px; width: 114px; height: 114px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; border: 8px solid #fffdf9; border-radius: 50%; background: var(--wine-800); box-shadow: 0 16px 35px rgba(80,20,44,.25); transform: rotate(-8deg); }
.story-stamp span { font-family: var(--serif); font-size: 25px; }
.story-stamp small { font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; }
.section h2 { max-width: 760px; font-size: clamp(43px, 5vw, 68px); }
.story-copy > p:not(.section-kicker) { max-width: 640px; color: var(--muted); }
.story-copy h2 { margin-bottom: 30px; }
.feature-list { display: grid; gap: 13px; padding: 0; margin: 28px 0; list-style: none; }
.feature-list li { display: flex; gap: 11px; color: #4e3b44; font-weight: 650; }
.feature-list span { color: var(--gold-700); }
.text-link { display: inline-flex; gap: 10px; color: var(--wine-800); font-size: 13px; font-weight: 800; text-underline-offset: 5px; }

.ingredients { position: relative; background: linear-gradient(180deg, var(--blush), #fff8f2); }
.section-heading { max-width: 820px; margin: 0 auto 58px; text-align: center; }
.section-heading h2 { margin-inline: auto; }
.section-heading > p:last-child { max-width: 640px; margin: 22px auto 0; color: var(--muted); }
.ingredient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.ingredient-card { position: relative; min-height: 330px; padding: 35px 28px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 110px 110px 22px 22px; background: rgba(255,255,255,.68); transition: .3s ease; }
.ingredient-card:hover { transform: translateY(-9px); border-color: rgba(212,168,76,.5); box-shadow: 0 22px 50px rgba(80,20,44,.1); }
.ingredient-card.featured { color: #fff; border-color: transparent; background: linear-gradient(155deg, var(--wine-700), var(--wine-950)); }
.ingredient-icon { width: 88px; height: 88px; display: grid; place-items: center; margin: 33px 0 35px; color: var(--gold-700); border: 1px solid var(--gold-300); border-radius: 50%; background: var(--cream); font-family: var(--serif); font-size: 34px; }
.ingredient-card.featured .ingredient-icon { color: var(--gold-300); border-color: rgba(240,213,141,.35); background: rgba(255,255,255,.08); }
.ingredient-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 23px; }
.ingredient-card p { margin: 0; color: var(--muted); font-size: 13px; }
.ingredient-card.featured p { color: #eedce3; }

.product { padding-top: 90px; background: #fffdf9; }
.product-shell { position: relative; min-height: 630px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; padding: 68px 78px; overflow: hidden; border-radius: 38px; color: #fff; background: radial-gradient(circle at 18% 42%, #a54465 0, #6e1f3d 31%, transparent 52%), linear-gradient(135deg, var(--wine-900), var(--wine-950)); box-shadow: var(--shadow); }
.product-pattern { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 2px 2px, #f0d58d 1px, transparent 0); background-size: 28px 28px; mask-image: linear-gradient(90deg,#000,transparent 55%); }
.product-image-wrap { position: relative; z-index: 1; padding: 18px; border: 1px solid rgba(240,213,141,.4); border-radius: 50%; background: rgba(255,255,255,.93); box-shadow: 0 28px 60px rgba(33,7,19,.3); }
.product-image-wrap img { border-radius: 50%; transform: translateY(-3%); }
.product-copy { position: relative; z-index: 1; }
.section-kicker.light { color: var(--gold-300); }
.product-copy h2 { color: #fff; }
.product-copy h2 em { color: var(--gold-300); }
.product-desc { max-width: 560px; color: #f1dfe6; }
.product-meta { display: flex; gap: 50px; margin: 28px 0; padding: 22px 0; border-block: 1px solid rgba(255,255,255,.16); }
.product-meta span, .product-meta small, .product-meta strong { display: block; }
.product-meta small { color: #d9bdc8; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.product-meta strong { margin-top: 3px; color: #fff; font-family: var(--serif); font-size: 22px; }
.launch-note { display: flex; gap: 14px; max-width: 570px; margin-bottom: 26px; }
.launch-note p { margin: 0; color: #e8d5dd; font-size: 12px; line-height: 1.55; }
.launch-note strong { color: #fff; }
.pulse-dot { flex: 0 0 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #f3c65e; box-shadow: 0 0 0 0 rgba(243,198,94,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(243,198,94,0); } 100% { box-shadow: 0 0 0 0 rgba(243,198,94,0); } }
.button-gold { color: var(--wine-950); background: linear-gradient(135deg, #f4d680, var(--gold-500)); box-shadow: 0 16px 33px rgba(20,2,9,.2); }

.values { background: #fffdf9; }
.section-heading.compact { margin-bottom: 48px; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.value-grid article { min-height: 270px; padding: 40px 26px; border-left: 1px solid var(--line); }
.value-grid article:first-child { border-left: 0; }
.value-grid span { color: var(--rose-300); font-family: var(--serif); font-size: 20px; font-style: italic; }
.value-grid h3 { margin: 48px 0 12px; color: var(--wine-900); font-family: var(--serif); font-size: 21px; }
.value-grid p { margin: 0; color: var(--muted); font-size: 13px; }

.quote-section { position: relative; padding: 115px 0; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(rgba(51,10,28,.82), rgba(80,20,44,.92)), url('../images/mahkota-dewi-poster.jpeg') center 55% / cover; background-attachment: fixed; }
.quote-section::after { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(240,213,141,.36); pointer-events: none; }
.quote-section .container { position: relative; z-index: 1; }
.quote-lotus { color: var(--gold-300); font-size: 38px; }
.quote-section blockquote { max-width: 930px; margin: 16px auto; font-family: var(--serif); font-size: clamp(39px, 5vw, 69px); font-style: italic; line-height: 1.18; }
.quote-section p { margin: 0; color: var(--gold-300); font-size: 11px; font-weight: 800; letter-spacing: .28em; }

.faq { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 105px; }
.faq-heading { position: sticky; top: 120px; align-self: start; }
.faq-heading > p:not(.section-kicker) { color: var(--muted); }
.faq-note { margin-top: 30px; padding: 20px; border-left: 3px solid var(--gold-500); background: #fff3d9; }
.faq-note strong { color: var(--wine-900); font-family: var(--serif); }
.faq-note p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; color: var(--wine-900); cursor: pointer; font-family: var(--serif); font-size: 19px; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border: 1px solid var(--gold-500); border-radius: 50%; color: var(--gold-700); font-family: var(--sans); font-size: 17px; transition: transform .25s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 700px; margin: -4px 45px 22px 0; color: var(--muted); font-size: 14px; }

.closing { padding: 90px 0; color: #fff; background: linear-gradient(125deg, var(--wine-950), var(--wine-800) 65%, #9b3b5f); }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.closing h2 { font-size: clamp(42px, 5vw, 67px); }
.button-light { color: var(--wine-900); background: #fff; }

.site-footer { padding: 76px 0 25px; color: #d9c4cd; background: #2a0917; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .6fr .8fr; gap: 70px; padding-bottom: 55px; }
.brand-footer .brand-mark { width: 66px; }
.brand-footer .brand-copy strong { color: #fff; font-size: 19px; }
.brand-footer .brand-copy small { color: var(--gold-300); text-transform: none; letter-spacing: .03em; }
.footer-brand > p { max-width: 430px; margin: 25px 0 0; }
.footer-grid h3 { margin: 0 0 19px; color: var(--gold-300); font-family: var(--serif); font-size: 16px; }
.footer-grid p, .footer-grid a { display: block; margin: 0 0 8px; color: #bda8b1; font-size: 13px; text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-grid strong { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p { margin: 0; color: #8e747f; font-size: 11px; }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay, 0ms); }
[data-reveal].revealed { opacity: 1; transform: none; }
.hero [data-reveal] { transform: translateY(42px); transition-duration: 1.25s; }
.hero [data-reveal].revealed { transform: none; }
.section-animate > .container,
.section-animate > .hero-grid,
.section-animate > .closing-inner {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .72s ease, transform .72s cubic-bezier(.22,1,.36,1);
}
.section-animate.section-visible > .container,
.section-animate.section-visible > .hero-grid,
.section-animate.section-visible > .closing-inner {
    opacity: 1;
    transform: none;
}
.hero.section-animate > .container {
    transition-duration: 1.35s;
}
.section-animate.section-leaving > .container,
.section-animate.section-leaving > .hero-grid,
.section-animate.section-leaving > .closing-inner {
    opacity: 0;
    transform: translateY(-18px);
}

@media (min-width: 821px) {
    .hero-art { animation: hero-art-float 8s ease-in-out infinite; will-change: transform; }
    .art-card { animation: art-card-breathe 6.5s ease-in-out infinite; will-change: transform; }
    .art-orbit { animation-play-state: running !important; }
    .orbit-one { animation-duration: 16s; border-color: rgba(166,71,107,.34); }
    .orbit-two { animation-duration: 23s; border-color: rgba(166,71,107,.28); }
    .ingredient-chip { will-change: transform; }
    .chip-one { animation: chip-float-one 6.8s ease-in-out infinite; }
    .chip-two { animation: chip-float-two 7.4s ease-in-out infinite; }
    .chip-three { animation: chip-float-three 8s ease-in-out infinite; }
    .floating-bubble { filter: blur(16px); }
    .bubble-one { animation-duration: 14s; }
    .bubble-two { animation-duration: 17s; }
    .bubble-three { animation-duration: 20s; }
    .bubble-four { animation-duration: 15s; }
}

@media (max-width: 1020px) {
    .hero { min-height: auto; }
    .hero-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
    .hero h1 { font-size: clamp(51px, 7vw, 72px); }
    .hero-art { min-height: 520px; }
    .orbit-one { width: 500px; height: 500px; }.orbit-two { width: 560px; height: 560px; }
    .main-nav { gap: 20px; }
    .story-grid { gap: 70px; }
    .ingredient-grid { grid-template-columns: repeat(2, 1fr); }
    .ingredient-card { border-radius: 90px 90px 22px 22px; }
    .product-shell { padding: 55px; gap: 45px; }
    .faq-grid { gap: 65px; }
}

@media (max-width: 820px) {
    .section { padding: 82px 0; }
    .site-header { height: 70px; }
    .site-header.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .brand-copy small { display: none; }
    .menu-toggle { display: block; position: relative; z-index: 102; }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }
    .main-nav { position: fixed; inset: 0; z-index: 101; width: 100vw; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 28px; visibility: hidden; opacity: 0; overflow-y: auto; overscroll-behavior: contain; background: rgba(60,16,34,.98); transition: .25s ease; }
    .main-nav.open { visibility: visible; opacity: 1; }
    .main-nav a { color: #fff; font-family: var(--serif); font-size: 28px; }
    .main-nav .nav-cta { color: var(--gold-300); border-color: var(--gold-500); background: transparent; }
    .hero { padding: 125px 0 100px; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-copy { padding-top: 0; }
    .hero h1, .hero-lead { margin-inline: auto; }
    .hero-actions, .hero-facts { justify-content: center; }
    .hero-art { min-height: 560px; margin-top: 20px; }
    .art-card { width: min(78vw, 500px); }
    .intro-items { grid-template-columns: 1fr; padding: 20px 0; }
    .intro-items > div, .intro-items > div:first-child { padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); }
    .intro-items > div:last-child { border-bottom: 0; }
    .story-grid, .faq-grid { grid-template-columns: 1fr; }
    .story-grid { gap: 80px; }
    .story-visual { margin-inline: auto; }
    .faq-grid { gap: 45px; }
    .faq-heading { position: static; }
    .product-shell { grid-template-columns: 1fr; text-align: center; padding: 50px; }
    .product-image-wrap { width: min(80%, 420px); margin-inline: auto; }
    .product-desc, .launch-note { margin-inline: auto; }
    .product-meta { justify-content: center; }
    .launch-note { text-align: left; }
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
    .value-grid article:nth-child(4) { border-top: 1px solid var(--line); }
    .closing-inner { align-items: flex-start; flex-direction: column; }
    .footer-grid { grid-template-columns: 1.3fr .7fr; }
    .footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .section { padding: 70px 0; }
    .brand-mark { width: 45px; }
    .brand-copy strong { font-size: 13px; }
    .hero { padding-top: 110px; }
    .hero h1 { font-size: clamp(45px, 13vw, 60px); }
    .hero-lead { font-size: 15px; }
    .eyebrow { font-size: 9px; }
    .hero-actions { flex-direction: column; }
    .button { width: 100%; }
    .hero-facts { gap: 0; }
    .hero-facts div { min-width: 0; flex: 1; padding: 0 9px; }
    .hero-facts strong { font-size: 20px; }
    .hero-facts span { font-size: 9px; }
    .hero-art { min-height: 420px; }
    .art-card { width: 88vw; padding: 23px; }
    .art-card::before { inset: 11px; }
    .art-label { top: 23px; font-size: 8px; }
    .orbit-one { width: 400px; height: 400px; }.orbit-two { width: 450px; height: 450px; }
    .ingredient-chip { padding: 7px 11px; font-size: 10px; }
    .chip-one { left: -4px; }.chip-two { right: -5px; }.chip-three { left: 0; }
    .section h2 { font-size: clamp(39px, 11vw, 54px); }
    .story-visual { margin-right: 26px; }
    .story-stamp { right: -38px; width: 92px; height: 92px; }
    .ingredient-grid { grid-template-columns: 1fr; }
    .ingredient-card { min-height: 275px; border-radius: 100px 100px 20px 20px; }
    .ingredient-icon { margin: 20px 0 24px; }
    .product { padding-top: 60px; }
    .product-shell { width: 100%; padding: 48px 22px; border-radius: 0; }
    .product-image-wrap { width: 92%; }
    .product-meta { gap: 30px; }
    .value-grid { grid-template-columns: 1fr; }
    .value-grid article, .value-grid article:nth-child(n) { min-height: 220px; border-left: 0; border-top: 1px solid var(--line); }
    .value-grid article:first-child { border-top: 0; }
    .value-grid h3 { margin-top: 28px; }
    .quote-section { padding: 90px 0; background-attachment: scroll; }
    .faq-list summary { font-size: 17px; }
    .closing { padding: 70px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 38px; }
    .footer-grid > div:last-child { grid-column: auto; }
    .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal],
    .section-animate > .container,
    .section-animate > .hero-grid,
    .section-animate > .closing-inner {
        opacity: 1;
        transform: none;
        transition-duration: .01ms !important;
    }
}