:root {
  color-scheme: light;
  --ink: #34133f;
  --plum: #4a1551;
  --berry: #b51561;
  --pink: #ed4d8b;
  --rose: #f9dce6;
  --cream: #fff9f6;
  --paper: #fffdfb;
  --sage: #7ea860;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", sans-serif;
  --content: 1240px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, a { font: inherit; }
a { color: inherit; }
::selection { background: #f2a8c7; color: #401448; }

.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 12px 18px; border-radius: 999px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 7px clamp(20px, 5vw, 78px); background: rgba(255, 250, 249, .88); border-bottom: 1px solid rgba(149, 75, 112, .12); backdrop-filter: blur(18px); }
.brand { width: 128px; flex: 0 0 auto; }
.brand img, .footer-brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; gap: clamp(17px, 2.5vw, 36px); }
.main-nav > a:not(.button) { color: #522747; text-decoration: none; font-size: .84rem; font-weight: 600; letter-spacing: .025em; transition: color .2s ease; }
.main-nav > a:not(.button):hover, .footer-column a:hover { color: var(--pink); }
.menu-toggle { display: none; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 18px; padding: 0 27px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: linear-gradient(115deg, #ee4388, #c31868 75%); box-shadow: 0 12px 30px rgba(181, 21, 97, .19), inset 0 1px 1px rgba(255,255,255,.65); color: white; text-decoration: none; font-size: .9rem; font-weight: 700; letter-spacing: .01em; transition: transform .25s var(--ease), box-shadow .25s ease, filter .25s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(181,21,97,.27), inset 0 1px 1px rgba(255,255,255,.7); filter: saturate(1.08); }
.button span { font-size: 1.1em; transition: transform .25s ease; }
.button:hover span { transform: translate(3px,-2px); }
.button-small { min-height: 44px; padding-inline: 21px; font-size: .82rem; }

.hero { position: relative; min-height: min(790px, calc(100svh - 82px)); min-height: clamp(660px, 53vw, 790px); overflow: hidden; isolation: isolate; background: #fbefed; }
.hero-photo { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(255,248,246,0) 27%, rgba(255,248,246,.38) 50%, rgba(255,248,246,.92) 73%, #fff9f7 100%), linear-gradient(0deg, rgba(255,249,247,.6), transparent 24%); }
.hero-content { position: relative; z-index: 2; width: min(48%, 650px); margin-left: auto; margin-right: clamp(35px, 8vw, 125px); padding-top: clamp(120px, 13vw, 205px); }
.eyebrow { margin: 0 0 16px; color: #ad3f70; font-size: .72rem; font-weight: 700; letter-spacing: .21em; line-height: 1.5; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
.hero h1 { max-width: 690px; margin: 0; color: #64143f; font-size: clamp(3rem, 5.6vw, 6.6rem); letter-spacing: -.065em; line-height: .96; }
.hero h1 em, h2 em { color: #a12b68; font-weight: 500; }
.hero-copy { max-width: 410px; margin: 25px 0 28px; color: #55394d; font-size: clamp(.96rem, 1.2vw, 1.12rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.text-link { color: #743454; font-size: .88rem; font-weight: 700; text-decoration: none; }
.text-link span { margin-left: 7px; }
.hero-proof { display: flex; align-items: center; gap: 9px; margin-top: 33px; color: #76566c; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.hero-proof b { color: #e94c87; padding-inline: 5px; }
.proof-crown { color: #c88731; font-size: 1.25rem; }
.hero-product { position: absolute; z-index: 1; bottom: -13%; left: 40%; width: min(36vw, 520px); height: auto; filter: drop-shadow(0 18px 22px rgba(67, 55, 46, .2)); pointer-events: none; }
.hero-caption { position: absolute; z-index: 1; bottom: 18%; left: clamp(22px, 4vw, 65px); color: #fff; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 2rem); font-style: italic; line-height: 1.1; text-shadow: 0 2px 16px rgba(72, 25, 44, .32); }
.hero-caption strong { color: #fff6db; font-weight: 500; }
.scroll-cue { position: absolute; z-index: 4; bottom: 24px; left: 50%; width: 28px; height: 44px; border: 1px solid rgba(100,20,63,.45); border-radius: 99px; transform: translateX(-50%); }
.scroll-cue span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; border-radius: 99px; background: var(--berry); animation: scrollHint 1.5s ease-in-out infinite; }

.section-pad { padding: clamp(74px, 9vw, 138px) clamp(22px, 6vw, 88px); }
.benefits { position: relative; min-height: 700px; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, #fbe8f0 0%, #fff8f5 40%, #f0e3f5 100%); }
.benefits::before, .benefits::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.benefits::before { inset: 0; opacity: .54; background: radial-gradient(ellipse at 14% 82%, rgba(249,167,204,.5), transparent 38%), radial-gradient(ellipse at 89% 17%, rgba(203,167,219,.48), transparent 34%); }
.benefits::after { width: 115vw; height: 260px; left: -8vw; bottom: -150px; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.52); filter: blur(3px); }
.section-intro { position: relative; z-index: 2; max-width: 700px; margin: 0 auto 38px; }
.center { text-align: center; }
.section-intro h2, .fragrance-heading h2, .how-heading h2, .faq-heading h2, .closing h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 5.25rem); letter-spacing: -.045em; line-height: 1.02; }
.section-intro > p:last-child { max-width: 530px; margin: 18px auto 0; color: #705969; }
.benefit-stage { position: relative; z-index: 1; display: flex; max-width: 1100px; align-items: center; gap: clamp(28px, 6vw, 85px); margin: 25px auto 0; }
.giant-five { display: flex; flex: 0 0 32%; align-items: center; justify-content: center; flex-direction: column; min-height: 325px; color: #c72472; font-family: var(--serif); font-size: clamp(13rem, 24vw, 22rem); letter-spacing: -.11em; line-height: .7; text-shadow: 0 12px 0 rgba(255,255,255,.72), 0 22px 45px rgba(167, 70, 128, .15); }
.giant-five span { padding-left: 50px; color: #852251; font-size: .21em; letter-spacing: .02em; line-height: 1.2; }
.benefit-list { display: grid; flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 24px); }
.benefit-item { position: relative; display: flex; align-items: center; flex-direction: column; text-align: center; }
.benefit-icon { display: grid; width: clamp(58px, 7vw, 92px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(200,103,153,.28); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(250,225,239,.72)); box-shadow: 0 12px 24px rgba(125,58,97,.1), inset 0 2px 4px #fff; }
.benefit-icon svg { width: 48%; fill: none; stroke: #c52f77; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit-item h3 { margin: 13px 0 0; color: #63264d; font-family: var(--serif); font-size: clamp(.95rem, 1.35vw, 1.2rem); font-weight: 600; line-height: 1.15; }
.section-cta { position: relative; z-index: 2; display: flex; width: fit-content; margin: 47px auto 0; }
.button-light { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.8); color: #98285d; box-shadow: 0 10px 28px rgba(103,44,88,.1); }
.benefits-orb { position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(242,180,210,.26) 52%, rgba(156,83,169,.1)); filter: blur(1px); }
.orb-one { top: 17%; left: -85px; width: 240px; aspect-ratio: 1; }
.orb-two { right: -45px; bottom: 14%; width: 190px; aspect-ratio: 1; }
.floating-pearls { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.floating-pearls i { position: absolute; width: var(--size, 20px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; background: radial-gradient(circle at 31% 25%, #fff 0 9%, rgba(255,255,255,.82) 14%, rgba(250,190,216,.58) 46%, rgba(255,255,255,.16) 72%); box-shadow: inset -4px -6px 12px rgba(170,89,145,.14), 0 6px 20px rgba(180,104,153,.14); animation: pearlDrift var(--duration, 8s) ease-in-out infinite alternate; }
.floating-pearls i:nth-child(1) { --size: 24px; --duration: 8.4s; top: 23%; left: 13%; }
.floating-pearls i:nth-child(2) { --size: 15px; --duration: 7.2s; top: 46%; left: 8%; animation-delay: -2s; }
.floating-pearls i:nth-child(3) { --size: 34px; --duration: 10s; top: 18%; left: 74%; animation-delay: -3s; }
.floating-pearls i:nth-child(4) { --size: 17px; --duration: 7.8s; top: 66%; left: 28%; animation-delay: -4s; }
.floating-pearls i:nth-child(5) { --size: 28px; --duration: 9.1s; top: 72%; left: 81%; animation-delay: -1s; }
.floating-pearls i:nth-child(6) { --size: 12px; --duration: 6.9s; top: 37%; left: 90%; animation-delay: -3s; }
.floating-pearls i:nth-child(7) { --size: 22px; --duration: 9.5s; top: 83%; left: 54%; animation-delay: -5s; }
.floating-pearls i:nth-child(8) { --size: 13px; --duration: 7.6s; top: 12%; left: 48%; animation-delay: -2s; }
.floating-pearls i:nth-child(9) { --size: 18px; --duration: 8.7s; top: 57%; left: 66%; animation-delay: -6s; }

.fragrances { position: relative; overflow: hidden; background: #fffaf6; }
.fragrances::before { position: absolute; top: 0; left: 50%; width: min(1200px, 90vw); height: 1px; background: linear-gradient(90deg, transparent, #e7bdcc, transparent); content: ""; transform: translateX(-50%); }
.fragrance-heading { position: relative; z-index: 1; display: flex; max-width: var(--content); align-items: end; justify-content: space-between; gap: 40px; margin: 0 auto 46px; }
.fragrance-heading h2 { color: #672147; }
.fragrance-heading > p { max-width: 310px; margin-bottom: 10px; color: #766173; }
.fragrance-ribbon { display: flex; justify-content: space-between; max-width: var(--content); margin: 0 auto -32px; color: #aa7c96; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: .16em; opacity: .72; }
.fragrance-grid { display: grid; max-width: 1480px; grid-template-columns: repeat(4, 1fr); margin: 0 auto; }
.scent { position: relative; display: flex; min-width: 0; min-height: 500px; align-items: center; justify-content: end; flex-direction: column; overflow: hidden; isolation: isolate; padding: 30px 5px 14px; }
.scent::before, .scent::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.scent::before { inset: 0; opacity: .8; }
.scent::after { top: 8%; right: -15%; width: 75%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.13), 0 0 0 55px rgba(255,255,255,.13); }
.scent-lirio::before { background: radial-gradient(ellipse at 45% 40%, #f7f8d9, #e5efce 53%, #d7e7cf); }
.scent-lavanda::before { background: radial-gradient(ellipse at 50% 40%, #eee2f7, #d7c4eb 55%, #d2dce7); }
.scent-floral::before { background: radial-gradient(ellipse at 50% 40%, #ffe5ed, #f8c9d7 55%, #fae5d8); }
.scent-citrica::before { background: radial-gradient(ellipse at 50% 40%, #e9f0c9, #d2e5b1 55%, #f7efc8); }
.scent-light { position: absolute; z-index: -1; top: -8%; left: 10%; width: 80%; height: 45%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(34px); }
.scent-copy { position: relative; z-index: 2; align-self: flex-start; padding-left: clamp(10px, 1.5vw, 26px); }
.scent-number { color: rgba(97,41,75,.52); font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
.scent h3 { margin: 5px 0 0; color: #63204a; font-family: var(--serif); font-size: clamp(1.8rem, 2.8vw, 2.7rem); font-weight: 500; line-height: 1; }
.scent-copy p { margin: 8px 0 0; color: #674d62; font-size: .8rem; }
.scent img { position: relative; z-index: 1; width: 112%; max-width: none; height: auto; margin: 3px -6% -8%; filter: drop-shadow(0 22px 19px rgba(54,43,45,.16)); transition: transform .75s var(--ease); }
.scent:hover img { transform: translateY(-10px) scale(1.035); }
.scent-note { align-self: flex-start; position: relative; z-index: 2; margin: -13px 0 0 clamp(10px, 1.5vw, 26px); color: rgba(81,48,69,.65); font-size: .61rem; font-weight: 700; letter-spacing: .16em; }
.fragrance-footer { display: flex; max-width: var(--content); align-items: center; gap: 22px; margin: 35px auto 0; color: #6e5267; font-size: .78rem; font-weight: 600; }
.footer-rule { height: 1px; flex: 1; background: linear-gradient(90deg, #e8c0d1, transparent); }

.how-to { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #f8e7ed, #fff6f4 48%, #eee7f4); }
.how-to::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 16% 100%, rgba(206,171,218,.26), transparent 38%), radial-gradient(ellipse at 92% 15%, rgba(255,255,255,.92), transparent 45%); content: ""; }
.how-heading { position: relative; z-index: 1; max-width: 810px; margin: 0 auto 55px; text-align: center; }
.how-heading h2 { color: #652348; }
.how-heading > p:last-child { margin: 17px 0 0; color: #705969; }
.steps { position: relative; z-index: 1; display: grid; max-width: 1200px; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 auto; }
.steps::before { position: absolute; top: 45%; left: 16%; right: 16%; height: 1px; border-top: 1px dashed rgba(172,77,130,.4); content: ""; }
.step { position: relative; padding: 0 clamp(12px, 3vw, 44px); text-align: center; }
.step-scene { position: relative; display: grid; width: min(100%, 300px); aspect-ratio: 1.1; place-items: center; margin: 0 auto 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 48% 52% 44% 56% / 52% 45% 55% 48%; background: rgba(255,255,255,.5); box-shadow: inset 0 2px 10px #fff, 0 25px 50px rgba(117,62,106,.1); }
.step-scene::after { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.65); border-radius: inherit; content: ""; }
.washer-door { position: relative; display: grid; width: 68%; aspect-ratio: 1; place-items: center; border: 10px solid #d9d8e0; border-radius: 50%; background: linear-gradient(145deg, #f5f6fb, #b2b5c3); box-shadow: inset 0 0 0 4px rgba(255,255,255,.75), 0 18px 35px rgba(56,39,68,.17); }
.washer-inner { position: absolute; inset: 11%; border: 2px solid rgba(95,103,126,.6); border-radius: 50%; background: radial-gradient(circle at 50% 32%, #fcfbff 0 28%, #d9dce8 30% 38%, #aeb4c5 40% 50%, #ececf2 52%); }
.washer-inner::before { position: absolute; inset: 20%; border: 1px dashed rgba(255,255,255,.8); border-radius: 50%; content: ""; }
.pod-mini { position: relative; z-index: 1; width: 30%; filter: drop-shadow(0 8px 7px rgba(50,49,65,.24)); transform: translate(27px, 22px) rotate(-13deg); }
.linen-stack { position: relative; width: 71%; height: 51%; }
.linen-stack i { position: absolute; left: 0; width: 100%; height: 43%; border-radius: 35% 20% 31% 25%; background: linear-gradient(135deg, #fff, #f5dce7 60%, #dbbfd5); box-shadow: 0 11px 22px rgba(103,68,108,.12); transform: rotate(-9deg); }
.linen-stack i:nth-child(2) { top: 24%; left: 8%; width: 88%; background: linear-gradient(135deg, #fff, #d8c8e6 75%); transform: rotate(7deg); }
.linen-stack i:nth-child(3) { top: 51%; left: -2%; width: 90%; background: linear-gradient(135deg, #fff, #f7c9dc 85%); transform: rotate(-4deg); }
.fabric-leaf { position: absolute; width: 27px; height: 48px; border-radius: 100% 0 100% 0; background: linear-gradient(145deg, #b7d38f, #789b6d); opacity: .65; }
.leaf-one { top: 26%; right: 13%; transform: rotate(28deg); }
.leaf-two { bottom: 22%; left: 10%; transform: rotate(214deg) scale(.65); }
.cycle-dial { display: grid; width: 47%; aspect-ratio: 1; place-items: center; border: 8px solid #dedce4; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff, #eceaf1 66%, #c9c5d3); box-shadow: inset 0 0 0 2px #fff, 0 14px 24px rgba(72,45,82,.12); }
.cycle-dial span { display: grid; width: 56%; aspect-ratio: 1; place-items: center; padding-left: 4px; border-radius: 50%; background: linear-gradient(135deg, #f16b9d, #bf226d); color: #fff; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(191,34,109,.27); }
.cycle-lines { position: absolute; top: 28%; right: 16%; display: grid; gap: 7px; }
.cycle-lines i { display: block; width: 33px; height: 3px; border-radius: 99px; background: #c8b7c8; }
.cycle-lines i:nth-child(2) { width: 24px; }
.cycle-lines i:nth-child(3) { width: 29px; }
.step-index { color: #d04483; font-family: var(--serif); font-size: 2rem; font-style: italic; }
.step h3 { margin: 4px 0 8px; color: #5c2149; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; }
.step p { max-width: 265px; margin: 0 auto; color: #745f71; font-size: .91rem; }
.dissolve-note { display: flex; max-width: 690px; align-items: center; gap: 17px; margin: 60px auto 0; padding: 20px 28px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: rgba(255,255,255,.63); box-shadow: 0 15px 35px rgba(98,50,87,.07); }
.dissolve-note p { margin: 0; color: #684c63; font-size: .88rem; }
.dissolve-note strong { color: #9d2d65; }
.drop-icon { display: grid; width: 40px; aspect-ratio: 1; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f9e3ec; color: #ca3278; font-size: 1.4rem; }
.bubble-field { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.bubble-field i, .faq-bubble { position: absolute; bottom: -90px; display: block; width: var(--bubble-size, 32px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 5%, rgba(255,255,255,.48) 12%, rgba(255,212,232,.2) 36%, rgba(150,203,228,.2) 62%, rgba(255,255,255,.25) 72%); box-shadow: inset -4px -5px 10px rgba(196,127,172,.13), 0 6px 18px rgba(150,117,172,.1); animation: rise var(--rise, 12s) linear infinite; }
.bubble-field i:nth-child(1) { --bubble-size: 21px; --rise: 12s; left: 8%; animation-delay: -3s; }
.bubble-field i:nth-child(2) { --bubble-size: 48px; --rise: 15s; left: 24%; animation-delay: -10s; }
.bubble-field i:nth-child(3) { --bubble-size: 28px; --rise: 11s; left: 41%; animation-delay: -7s; }
.bubble-field i:nth-child(4) { --bubble-size: 17px; --rise: 13s; left: 57%; animation-delay: -1s; }
.bubble-field i:nth-child(5) { --bubble-size: 62px; --rise: 17s; left: 72%; animation-delay: -12s; }
.bubble-field i:nth-child(6) { --bubble-size: 24px; --rise: 12.5s; left: 90%; animation-delay: -6s; }
.bubble-field i:nth-child(7) { --bubble-size: 12px; --rise: 10s; left: 16%; animation-delay: -8s; }
.bubble-field i:nth-child(8) { --bubble-size: 34px; --rise: 14s; left: 64%; animation-delay: -4s; }
.bubble-field i:nth-child(9) { --bubble-size: 19px; --rise: 11.5s; left: 83%; animation-delay: -2s; }
.bubble-field i:nth-child(10) { --bubble-size: 43px; --rise: 16s; left: 49%; animation-delay: -13s; }
.bubble-field i:nth-child(11) { --bubble-size: 15px; --rise: 10.5s; left: 33%; animation-delay: -9s; }
.bubble-field i:nth-child(12) { --bubble-size: 26px; --rise: 13.7s; left: 96%; animation-delay: -5s; }

.performance { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: center; gap: 20px; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, #fff8f5 0%, #f7e6ef 55%, #e7f0df 100%); }
.performance-backdrop { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 76% 40%, rgba(255,255,255,.92), transparent 36%), radial-gradient(ellipse at 3% 90%, rgba(231,180,209,.47), transparent 42%); }
.performance-copy { position: relative; z-index: 2; max-width: 720px; }
.performance-copy .eyebrow { margin-bottom: 20px; }
.motion-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .23em; max-width: 720px; margin: 0 0 22px; color: #a52363; font-family: var(--serif); font-size: clamp(3rem, 6.1vw, 6.6rem); font-weight: 500; letter-spacing: -.07em; line-height: .98; }
.motion-words span { display: inline-block; animation: wordFloat 4.8s ease-in-out infinite; }
.motion-words span:nth-child(2n) { animation-delay: -.9s; }
.motion-words span:nth-child(3n) { animation-delay: -1.8s; }
.motion-words span:nth-child(4n) { animation-delay: -2.7s; }
.motion-words span:nth-child(5n) { animation-delay: -3.6s; }
.yield-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 13px; margin: 0 0 15px; color: #4d314b; }
.yield-line span { font-size: .88rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.yield-line strong { color: #6e2a5a; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 600; line-height: 1; }
.performance-detail { max-width: 440px; margin: 0 0 25px; color: #6d5969; font-size: .9rem; }
.performance-product { position: relative; z-index: 1; min-height: 390px; }
.performance-product > img { position: absolute; top: 50%; left: 50%; width: min(125%, 700px); max-width: none; transform: translate(-50%,-50%); filter: drop-shadow(0 23px 20px rgba(54,43,45,.2)); }
.stack-mark { position: absolute; right: 2%; bottom: 2%; display: flex; width: 145px; aspect-ratio: 1; align-items: center; justify-content: center; flex-direction: column; padding: 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(59,126,94,.9); color: white; text-align: center; box-shadow: 0 12px 30px rgba(44,98,75,.19); transform: rotate(5deg); }
.stack-mark > span { font-size: 1.6rem; line-height: 1; }
.stack-mark strong { font-family: var(--serif); font-size: .92rem; line-height: 1.1; }
.stack-mark small { margin-top: 6px; font-size: .55rem; line-height: 1.2; }
.performance-stats { grid-column: 1 / -1; display: flex; gap: clamp(26px, 7vw, 100px); margin-top: 20px; padding-top: 26px; border-top: 1px solid rgba(139,77,116,.2); }
.performance-stats div { display: flex; align-items: baseline; gap: 10px; }
.performance-stats strong { color: #aa2d69; font-family: var(--serif); font-size: 1.6rem; }
.performance-stats span { color: #775e70; font-size: .73rem; line-height: 1.25; }

.faq { position: relative; display: flex; min-height: 720px; align-items: center; overflow: hidden; isolation: isolate; background: linear-gradient(125deg, #fff9f6 0 48%, #f9e5ee 100%); }
.faq-water { position: absolute; z-index: -1; right: -15%; bottom: -52%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(231,194,223,.25) 44%, rgba(235,206,230,0) 70%); }
.faq-content { position: relative; z-index: 2; width: min(100%, 780px); }
.faq-heading { margin-bottom: 30px; }
.faq-heading h2 { color: #632147; }
.faq-heading > p:last-child { margin: 14px 0 0; color: #775c70; }
.faq-list { border-top: 1px solid rgba(145,65,111,.23); }
.faq-item { border-bottom: 1px solid rgba(145,65,111,.23); }
.faq-item h3 { margin: 0; }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 4px; border: 0; background: transparent; color: #502046; text-align: left; font-family: var(--serif); font-size: clamp(1rem, 1.55vw, 1.25rem); font-weight: 600; cursor: pointer; }
.faq-question span { display: grid; width: 30px; aspect-ratio: 1; flex: 0 0 auto; place-items: center; border: 1px solid #e6bed1; border-radius: 50%; color: #c83277; font-family: var(--sans); font-size: 1.1rem; font-weight: 400; transition: transform .3s ease, background .3s ease, color .3s ease; }
.faq-question[aria-expanded="true"] span { background: #c83277; color: white; transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.faq-answer[hidden] { display: none; }
.faq-answer.is-open { grid-template-rows: 1fr; }
.faq-answer p { min-height: 0; overflow: hidden; margin: 0; padding: 0 42px 0 4px; color: #745d6e; font-size: .9rem; opacity: 0; transform: translateY(-5px); transition: padding .35s ease, opacity .35s ease, transform .35s ease; }
.faq-answer.is-open p { padding: 0 42px 19px 4px; opacity: 1; transform: translateY(0); }
.faq-pod-wrap { position: absolute; z-index: 1; top: 50%; right: clamp(-80px, 3vw, 70px); width: min(37vw, 480px); aspect-ratio: 1; transform: translateY(-42%); }
.faq-pod { position: relative; z-index: 2; width: 100%; overflow: visible; animation: podFloat 6.5s ease-in-out infinite; }
.water-ripple { position: absolute; z-index: 1; bottom: 12%; left: 50%; width: 90%; height: 18%; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.55), rgba(177,213,230,.14) 45%, transparent 70%); transform: translateX(-50%); animation: ripple 5s ease-in-out infinite; }
.ripple-two { bottom: 7%; width: 70%; animation-delay: -2.2s; }
.faq-bubble { z-index: 2; bottom: 15%; }
.faq-bubble.b1 { --bubble-size: 16px; left: 15%; animation-delay: -3s; }
.faq-bubble.b2 { --bubble-size: 25px; left: 78%; animation-delay: -8s; }
.faq-bubble.b3 { --bubble-size: 11px; left: 30%; animation-delay: -6s; }
.faq-bubble.b4 { --bubble-size: 20px; left: 65%; animation-delay: -11s; }

.closing { position: relative; display: flex; min-height: 470px; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #f4dbe8, #fff8f5 50%, #eee6f4); text-align: center; }
.closing-glow { position: absolute; z-index: -1; top: -140px; left: 50%; width: min(760px, 80vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 69%); transform: translateX(-50%); }
.closing h2 { color: #602045; font-size: clamp(2.8rem, 5.4vw, 5.4rem); }
.closing .button { margin-top: 28px; }
.closing-petals i { position: absolute; width: 46px; height: 22px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #ffd8e6, #ed85ad); opacity: .65; animation: petalSway 7s ease-in-out infinite alternate; }
.closing-petals i:nth-child(1) { top: 18%; left: 12%; transform: rotate(25deg); }
.closing-petals i:nth-child(2) { top: 68%; left: 22%; animation-delay: -2s; }
.closing-petals i:nth-child(3) { top: 24%; right: 13%; animation-delay: -4s; }
.closing-petals i:nth-child(4) { bottom: 11%; right: 21%; transform: rotate(25deg); animation-delay: -1s; }

.site-footer { position: relative; overflow: hidden; padding: 48px clamp(22px, 6vw, 88px) 20px; background: #fffaf8; }
.site-footer::before { position: absolute; inset: auto -4% -100px; height: 180px; border-radius: 50%; background: linear-gradient(90deg, rgba(249,202,220,.3), rgba(255,255,255,.25), rgba(238,217,242,.3)); content: ""; }
.footer-main { position: relative; display: grid; max-width: var(--content); grid-template-columns: 1.2fr .8fr 1fr .65fr; gap: clamp(28px, 5vw, 70px); margin: 0 auto; padding-bottom: 36px; }
.footer-brand { width: min(190px, 100%); align-self: center; }
.footer-column, .footer-social { display: flex; flex-direction: column; align-items: flex-start; }
.footer-column h2, .footer-social h2 { margin: 5px 0 12px; color: #bd3375; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.footer-column a, .footer-column p { margin: 0 0 7px; color: #6f596c; font-size: .77rem; text-decoration: none; }
.footer-social .social-icons { display: flex; gap: 10px; }
.social-link { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(181,21,97,.2); border-radius: 50%; background: rgba(255,255,255,.8); color: #ad2868; transition: transform .2s ease, background .2s ease, color .2s ease; }
.social-link[href]:hover { background: #ba2c70; color: white; transform: translateY(-3px); }
.social-link svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; }
.social-link svg rect, .social-link svg circle { fill: none; }
.social-link svg .social-dot { fill: currentColor; }
.footer-legal { position: relative; display: flex; max-width: var(--content); justify-content: space-between; gap: 18px; margin: 0 auto; padding-top: 17px; border-top: 1px solid rgba(133,68,105,.17); color: #856e80; font-size: .68rem; }
.footer-legal strong { color: #793853; font-weight: 700; }

.reveal { opacity: 1; transform: none; }
.js-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-ready .reveal:nth-child(2) { transition-delay: .08s; }
.js-ready .reveal:nth-child(3) { transition-delay: .16s; }

@keyframes scrollHint { 0%,100% { transform: translate(-50%,0); opacity: .5; } 50% { transform: translate(-50%,8px); opacity: 1; } }
@keyframes pearlDrift { from { transform: translate3d(-3px,4px,0) scale(.92); } to { transform: translate3d(8px,-13px,0) scale(1.06); } }
@keyframes rise { 0% { transform: translate3d(0,0,0) scale(.7); opacity: 0; } 12% { opacity: .75; } 85% { opacity: .55; } 100% { transform: translate3d(28px,-950px,0) scale(1.06); opacity: 0; } }
@keyframes wordFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes podFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes ripple { 0%,100% { transform: translateX(-50%) scale(.92); opacity: .45; } 50% { transform: translateX(-50%) scale(1.06); opacity: .9; } }
@keyframes petalSway { from { translate: 0 -7px; rotate: -7deg; } to { translate: 8px 9px; rotate: 9deg; } }

@media (max-width: 1000px) {
  .main-nav { gap: 16px; }
  .main-nav > a:not(.button) { font-size: .77rem; }
  .hero-content { width: 49%; margin-right: 4vw; padding-top: 145px; }
  .hero h1 { font-size: clamp(3.1rem, 6.1vw, 5.2rem); }
  .hero-product { left: 37%; width: 39vw; }
  .benefit-stage { gap: 25px; }
  .giant-five { flex-basis: 27%; }
  .fragrance-grid { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .scent { min-height: 450px; }
  .faq-pod-wrap { right: -110px; width: 40vw; opacity: .8; }
  .faq-content { width: 68%; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 72px; }
  .site-header { min-height: 72px; padding: 5px 19px; }
  .brand { width: 106px; }
  .menu-toggle { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid rgba(142,64,106,.22); border-radius: 50%; background: rgba(255,255,255,.65); cursor: pointer; }
  .menu-toggle span { width: 16px; height: 1.5px; border-radius: 5px; background: #67244c; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.7px) rotate(-45deg); }
  .main-nav { position: absolute; top: calc(100% + 8px); right: 14px; left: 14px; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 10px; border: 1px solid rgba(149,75,112,.14); border-radius: 22px; background: rgba(255,250,249,.97); box-shadow: 0 18px 50px rgba(74,21,81,.14); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
  .main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .main-nav > a:not(.button) { padding: 13px 14px; border-bottom: 1px solid rgba(149,75,112,.1); font-size: .9rem; }
  .main-nav .nav-cta { margin-top: 10px; }
  .hero { min-height: 820px; min-height: max(820px, calc(100svh - 72px)); }
  .hero-photo { height: 68%; object-position: 16% 38%; }
  .hero-shade { background: linear-gradient(180deg, rgba(255,249,247,0) 0%, rgba(255,249,247,.02) 35%, rgba(255,249,247,.72) 58%, #fff9f7 72%); }
  .hero-content { width: auto; max-width: 620px; margin: 0; padding: 438px 22px 135px; }
  .hero .eyebrow { margin-bottom: 10px; font-size: .61rem; letter-spacing: .16em; }
  .hero h1 { max-width: 500px; font-size: clamp(2.65rem, 11vw, 4.3rem); }
  .hero-copy { max-width: 400px; margin: 15px 0 20px; font-size: .9rem; }
  .hero-actions { gap: 16px; }
  .button { min-height: 48px; padding-inline: 21px; font-size: .84rem; }
  .hero-proof { margin-top: 17px; font-size: .64rem; }
  .hero-product { z-index: 3; right: -10px; bottom: -3%; left: auto; width: min(53vw, 270px); }
  .hero-caption { display: none; }
  .scroll-cue { bottom: 18px; left: 26px; transform: none; }
  .section-pad { padding: 76px 21px; }
  .benefits { min-height: 0; }
  .section-intro { margin-bottom: 25px; }
  .section-intro h2, .fragrance-heading h2, .how-heading h2, .faq-heading h2, .closing h2 { font-size: clamp(2.55rem, 11vw, 4.1rem); }
  .section-intro > p:last-child { max-width: 330px; font-size: .9rem; }
  .benefit-stage { display: block; margin-top: 5px; }
  .giant-five { min-height: 210px; font-size: clamp(10rem, 42vw, 16rem); }
  .benefit-list { grid-template-columns: repeat(3, 1fr); gap: 24px 10px; padding: 5px 0; }
  .benefit-item:nth-child(4) { grid-column: 1 / 2; margin-left: 52%; }
  .benefit-item:nth-child(5) { grid-column: 2 / 3; margin-left: 52%; }
  .benefit-icon { width: 66px; }
  .benefit-item h3 { font-size: 1rem; }
  .section-cta { margin-top: 31px; }
  .fragrance-heading { display: block; margin-bottom: 30px; }
  .fragrance-heading > p { max-width: 320px; margin: 17px 0 0; font-size: .9rem; }
  .fragrance-ribbon { margin: 0 auto -7px; overflow: hidden; font-size: .72rem; letter-spacing: .1em; white-space: nowrap; }
  .fragrance-grid { grid-template-columns: 1fr 1fr; gap: 0 6px; }
  .scent { min-height: clamp(290px, 86vw, 420px); padding: 17px 0 12px; }
  .scent-copy { padding-left: 12px; }
  .scent-number { font-size: .58rem; }
  .scent h3 { font-size: clamp(1.45rem, 6vw, 2.2rem); }
  .scent-copy p { max-width: 135px; font-size: .65rem; }
  .scent img { width: 128%; margin: 12px -14% -4%; }
  .scent-note { margin: -7px 0 0 12px; font-size: .5rem; letter-spacing: .1em; }
  .fragrance-footer { align-items: flex-start; flex-wrap: wrap; gap: 11px; margin-top: 24px; font-size: .7rem; }
  .fragrance-footer .footer-rule { display: none; }
  .fragrance-footer .button { flex: 1 1 100%; }
  .how-heading { margin-bottom: 36px; }
  .how-heading > p:last-child { max-width: 330px; margin-inline: auto; font-size: .9rem; }
  .steps { grid-template-columns: 1fr; gap: 29px; }
  .steps::before { top: 8%; bottom: 8%; left: 50%; right: auto; width: 1px; height: auto; border-top: 0; border-left: 1px dashed rgba(172,77,130,.4); }
  .step { z-index: 1; display: grid; grid-template-columns: minmax(118px, 42%) 1fr; grid-template-rows: auto auto 1fr; align-items: center; column-gap: 18px; padding: 0; text-align: left; }
  .step-scene { grid-row: 1 / 4; width: 100%; margin: 0; }
  .step-index { align-self: end; font-size: 1.7rem; }
  .step h3 { align-self: center; margin: 1px 0 4px; font-size: 1.25rem; }
  .step p { align-self: start; max-width: none; margin: 0; font-size: .79rem; }
  .dissolve-note { gap: 12px; margin-top: 37px; padding: 16px; }
  .dissolve-note p { font-size: .78rem; }
  .drop-icon { width: 35px; }
  .bubble-field i { opacity: .75; }
  .performance { display: flex; align-items: stretch; flex-direction: column; gap: 4px; }
  .performance-copy { width: 100%; }
  .motion-words { gap: 0 .18em; font-size: clamp(2.8rem, 12vw, 4.4rem); line-height: 1.02; }
  .yield-line { display: block; }
  .yield-line span { display: block; margin-bottom: 3px; font-size: .7rem; }
  .yield-line strong { font-size: 3rem; }
  .performance-detail { max-width: 360px; font-size: .8rem; }
  .performance-product { min-height: 260px; margin-top: -15px; }
  .performance-product > img { width: min(114%, 540px); }
  .stack-mark { right: 3%; bottom: 2%; width: 108px; }
  .stack-mark strong { font-size: .76rem; }
  .stack-mark small { display: none; }
  .performance-stats { gap: 10px; justify-content: space-between; margin-top: 7px; padding-top: 17px; }
  .performance-stats div { align-items: center; flex-direction: column; gap: 0; text-align: center; }
  .performance-stats strong { font-size: 1.25rem; }
  .performance-stats span { font-size: .62rem; }
  .faq { display: block; min-height: 0; padding-bottom: 380px; }
  .faq-content { width: 100%; }
  .faq-heading { margin-bottom: 19px; }
  .faq-heading > p:last-child { font-size: .85rem; }
  .faq-question { gap: 12px; padding: 16px 0; font-size: 1rem; }
  .faq-question span { width: 27px; }
  .faq-answer p { padding-right: 22px; font-size: .82rem; }
  .faq-answer.is-open p { padding-right: 22px; }
  .faq-pod-wrap { top: auto; right: 50%; bottom: -10px; width: min(74vw, 340px); transform: translateX(50%); }
  .closing { min-height: 410px; }
  .closing .eyebrow { max-width: 260px; text-align: center; }
  .closing .button { margin-top: 23px; }
  .closing-petals i { width: 30px; height: 15px; }
  .site-footer { padding: 38px 21px 18px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 27px 20px; padding-bottom: 26px; }
  .footer-brand { width: min(145px, 100%); }
  .footer-column h2, .footer-social h2 { font-size: .64rem; }
  .footer-column a, .footer-column p { font-size: .7rem; }
  .footer-social { grid-column: 1 / -1; }
  .footer-legal { align-items: flex-start; flex-direction: column; gap: 5px; font-size: .62rem; }
}

@media (max-width: 390px) {
  .hero { min-height: 850px; }
  .hero-content { padding-top: 400px; }
  .hero-product { width: 58vw; }
  .fragrance-grid { gap: 0; }
  .scent { min-height: 286px; }
  .scent h3 { font-size: 1.4rem; }
  .step { grid-template-columns: 38% 1fr; column-gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* Composição visual ajustada ao layout aprovado. */
@media (min-width: 721px) {
  .site-header { position: absolute; top: 0; left: 0; right: 0; min-height: 62px; padding-top: 4px; padding-bottom: 4px; background: rgba(255,250,249,.72); }
  .brand { width: 104px; }
  .main-nav { gap: clamp(13px, 2vw, 26px); }
  .main-nav > a:not(.button) { font-size: .74rem; }
  .hero { min-height: clamp(500px, 46vw, 700px); }
  .hero-photo { object-position: 26% 48%; }
  .hero-shade { background: linear-gradient(90deg, rgba(255,248,246,0) 24%, rgba(255,248,246,.15) 43%, rgba(255,248,246,.82) 68%, #fff9f7 100%), linear-gradient(0deg, rgba(255,249,247,.2), transparent 27%); }
  .hero-content { width: min(47%, 660px); padding-top: clamp(75px, 9vw, 140px); }
  .hero h1 { color: #b51d64; font-size: clamp(3rem, 6.3vw, 6rem); font-style: italic; }
  .hero-product { bottom: -2%; left: 38%; width: min(47vw, 670px); }
  .hero-actions > a:not(.button), .hero-proof { display: none; }
  .hero-content > .eyebrow { display: none; }
  .hero h1 { font-size: clamp(2.75rem, 5.7vw, 5.8rem); line-height: .91; }
  .hero-copy { margin: 13px 0 16px; font-size: clamp(.82rem, 1.1vw, 1rem); }
  .hero .button { min-height: 44px; padding-inline: 22px; }

  .section-pad { padding: 34px clamp(22px, 5vw, 72px); }
  .benefits { min-height: clamp(320px, 34vw, 470px); background-image: linear-gradient(135deg, rgba(255,234,242,.34), rgba(255,245,249,.48)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left top; }
  .benefits::before, .benefits::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
  .benefits::before { inset: 8% -8%; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.13), 0 0 0 57px rgba(255,255,255,.1); transform: rotate(-7deg); }
  .benefits::after { right: 4%; bottom: -35%; width: 40vw; height: 42%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.76), transparent 69%); }
  .benefits .section-intro { margin-bottom: 0; }
  .benefits .section-intro h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .benefits .section-intro > p:last-child { display: none; }
  .benefit-stage { align-items: stretch; flex-direction: column; gap: 0; margin-top: -14px; }
  .giant-five { min-height: 105px; flex-direction: row; font-size: clamp(5.5rem, 10vw, 9rem); }
  .giant-five span { padding-left: 13px; font-size: .31em; }
  .benefit-list { gap: 10px; }
  .benefit-icon { width: clamp(52px, 6vw, 78px); background: rgba(255,255,255,.75); box-shadow: 0 7px 24px rgba(177,53,111,.12), inset 0 0 0 1px rgba(255,255,255,.9); }
  .benefit-item h3 { font-size: clamp(.68rem, 1.1vw, .87rem); }
  .benefits .section-cta { margin-top: 12px; }

  .fragrances { background-image: linear-gradient(180deg, rgba(255,244,247,.38), rgba(255,245,241,.58)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, right top; }
  .fragrance-heading { align-items: center; margin-bottom: 20px; }
  .fragrance-heading > p { max-width: 260px; margin: 0; }
  .fragrance-ribbon { display: none; }
  .fragrance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scent { min-height: clamp(285px, 31vw, 420px); padding-top: 20px; }
  .scent::after { top: 20%; right: -20%; width: 100%; box-shadow: 0 0 0 18px rgba(255,255,255,.2), 0 0 0 43px rgba(255,255,255,.15); }
  .scent-lirio::before { background: radial-gradient(ellipse at 50% 60%, rgba(250,250,212,.9), #dce8bc 67%, #cedead); }
  .scent-lavanda::before { background: radial-gradient(ellipse at 50% 60%, rgba(247,228,255,.9), #cfb6e5 67%, #c9d3e4); }
  .scent-floral::before { background: radial-gradient(ellipse at 50% 60%, rgba(255,237,242,.9), #f6b6cf 67%, #efc8db); }
  .scent-citrica::before { background: radial-gradient(ellipse at 50% 60%, rgba(244,250,210,.9), #c6df9d 67%, #e7e0a9); }
  .scent-copy { align-self: center; text-align: center; padding: 0; }
  .scent h3 { color: #bd286e; font-size: clamp(1.35rem, 2.1vw, 2rem); }
  .scent img { width: 132%; margin: auto -16% -7%; }
  .scent-note { display: none; }
  .fragrance-footer { margin-top: 8px; }

  .how-to { background-image: linear-gradient(180deg, rgba(255,248,249,.46), rgba(247,250,251,.47)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left bottom; }
  .how-heading { margin-bottom: 20px; }
  .how-heading h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .how-heading > p:last-child { display: none; }
  .steps { gap: clamp(16px, 4vw, 55px); }
  .step { padding: 0 10px; }
  .step-scene { width: clamp(90px, 12vw, 155px); margin-bottom: 12px; }
  .step h3 { font-size: clamp(1.05rem, 1.8vw, 1.45rem); }
  .dissolve-note { margin-top: 18px; }

  .performance { min-height: clamp(330px, 34vw, 460px); background-image: linear-gradient(112deg, rgba(255,247,244,.56), rgba(251,235,243,.48) 53%, rgba(248,249,239,.5)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left top; }
  .performance-backdrop { background: radial-gradient(ellipse at 90% 90%, rgba(255,255,255,.82), transparent 34%), radial-gradient(ellipse at 7% 5%, rgba(255,255,255,.6), transparent 34%); }
  .performance-product > img { width: min(115%, 670px); }
  .performance-product { min-height: clamp(300px, 34vw, 390px); }
  .package-stack { position: absolute; inset: 0; }
  .package-stack img { position: absolute; left: 50%; width: min(78%, 390px); max-width: none; filter: drop-shadow(0 18px 16px rgba(54,43,45,.18)); }
  .package-stack img:nth-child(1) { top: 13%; z-index: 3; transform: translateX(-50%); }
  .package-stack img:nth-child(2) { top: 39%; z-index: 2; transform: translateX(-50%); }
  .package-stack img:nth-child(3) { top: 65%; z-index: 1; transform: translateX(-50%); }

  .faq { min-height: clamp(390px, 40vw, 540px); background-image: linear-gradient(112deg, rgba(255,247,244,.58), rgba(255,232,241,.38) 54%, rgba(251,238,246,.45)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, right bottom; }
  .faq::before { position: absolute; inset: 7% -8%; border: 1px solid rgba(255,255,255,.58); border-radius: 49%; box-shadow: 0 0 0 26px rgba(255,255,255,.13), 0 0 0 60px rgba(255,255,255,.08); content: ""; transform: rotate(5deg); }
  .faq-content { width: 68%; }
  .faq-pod-wrap { right: 2vw; width: min(34vw, 430px); }
  .closing { min-height: 310px; background-image: linear-gradient(135deg, rgba(251,223,234,.44), rgba(255,245,240,.5) 50%, rgba(238,225,242,.45)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left top; }
  .site-footer { padding-top: 30px; background-image: linear-gradient(180deg, rgba(255,249,247,.55), rgba(251,226,235,.45)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, right top; }
}

@media (max-width: 1000px) and (min-width: 721px) {
  .fragrance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scent { min-height: 310px; }
  .hero-product { width: 43vw; }
}

@media (max-width: 720px) {
  .benefits { background-image: linear-gradient(rgba(255,237,244,.44), rgba(255,244,248,.48)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left top; }
  .fragrances { background-image: linear-gradient(rgba(255,245,247,.4), rgba(255,245,241,.55)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, right top; }
  .how-to { background-image: linear-gradient(rgba(255,249,250,.5), rgba(247,250,251,.48)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left bottom; }
  .performance { background-image: linear-gradient(rgba(255,247,244,.52), rgba(251,235,243,.5)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left top; }
  .faq { background-image: linear-gradient(rgba(255,247,244,.57), rgba(255,232,241,.4)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, right bottom; }
  .closing, .site-footer { background-image: linear-gradient(rgba(255,244,247,.5), rgba(251,226,235,.48)), url("assets/atmosfera-pearl-king.png"); background-size: 100% 100%, 200% 200%; background-position: center, left top; }
  .package-stack img { width: min(80%, 360px); }
}

@media (min-width: 721px) and (max-width: 1000px) {
  .hero-photo { top: 62px; height: calc(100% - 62px); object-position: 26% 48%; }
  .hero-content { padding-top: 78px; }
  .hero h1 { font-size: clamp(2.55rem, 5.3vw, 3.8rem); }
  .hero-product { bottom: -2%; left: 38%; width: 40vw; }
  .package-stack img { width: 78%; }
  .package-stack img:nth-child(1) { top: 4%; }
  .package-stack img:nth-child(2) { top: 31%; }
  .package-stack img:nth-child(3) { top: 58%; }
}

/* Fotografia do produto e imagens reais de uso, alinhadas à peça aprovada. */
.faq-pod { display: block; height: auto; object-fit: contain; filter: drop-shadow(0 25px 30px rgba(78,39,71,.22)); }
.package-stack img { height: auto; aspect-ratio: 1700 / 1083; object-fit: contain; object-position: center; }
@media (min-width: 721px) {
  .step-scene { width: 100%; aspect-ratio: 1.55; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.86); border-radius: 22px; background-image: url("assets/passos-de-uso.png"); background-size: 200% 200%; box-shadow: 0 16px 36px rgba(82,45,73,.18); }
  .step-scene::after { inset: 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 16px; }
  .scene-drum { background-position: left top; }
  .scene-linen { background-position: right top; }
  .scene-cycle { background-position: left bottom; }
  .step-scene > * { visibility: hidden; }
}
@media (max-width: 720px) {
  .step-scene { width: 100%; aspect-ratio: 1.5; margin-bottom: 12px; border-radius: 20px; background-image: url("assets/passos-de-uso.png"); background-size: 200% 200%; box-shadow: 0 12px 28px rgba(82,45,73,.16); }
  .step-scene::after { inset: 7px; border-radius: 14px; }
  .scene-drum { background-position: left top; }
  .scene-linen { background-position: right top; }
  .scene-cycle { background-position: left bottom; }
  .step-scene > * { visibility: hidden; }
}

/* Refinos da revisão visual da landing page. */
.fragrances {
  background: linear-gradient(145deg, #fffaf7 0%, #fbf2f6 52%, #f7f3f8 100%);
}
.fragrances::before { opacity: .4; }
.scent {
  min-height: clamp(330px, 34vw, 440px);
  padding: 0;
  background: rgba(255,255,255,.18);
}
.scent::before {
  inset: 0 0 27%;
  z-index: -1;
  opacity: 1;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.12)), url("assets/fragrance-backdrops.png");
  background-size: 100% 100%, 200% 200%;
  background-repeat: no-repeat;
}
.scent-lirio::before { background-position: center, left top; }
.scent-lavanda::before { background-position: center, right top; }
.scent-floral::before { background-position: center, left bottom; }
.scent-citrica::before { background-position: center, right bottom; }
.scent::after { z-index: 0; top: 5%; right: -24%; opacity: .5; }
.scent-light { z-index: 0; top: 0; height: 35%; opacity: .48; }
.scent-copy {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 12px;
  left: 7%;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 9px 10px 10px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 28px rgba(89,45,75,.13), inset 0 1px 0 #fff;
  text-align: center;
  backdrop-filter: blur(16px);
}
.scent-number { font-size: .58rem; }
.scent h3 { margin: 1px 0 0; font-size: clamp(1.25rem, 2vw, 1.85rem); }
.scent-copy p { margin: 3px 0 0; font-size: clamp(.68rem, .9vw, .8rem); line-height: 1.25; }
.scent img {
  position: absolute;
  z-index: 2;
  bottom: 76px;
  left: 50%;
  width: 128%;
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 18px rgba(54,43,45,.2));
}
.scent:hover img { transform: translate(-50%, -8px) scale(1.025); }
.scent-note { display: none; }

.benefit-stage { gap: clamp(20px, 3vw, 50px); }
.giant-five {
  flex-basis: 36%;
  min-height: 365px;
  font-size: clamp(15rem, 27vw, 25rem);
  background: linear-gradient(135deg, #fff 4%, #f4b7d0 20%, #c21e6a 37%, #fff9fb 47%, #e94c92 57%, #fff 68%, #d72c7b 82%, #fff3f8);
  background-size: 220% 220%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.8);
  filter: drop-shadow(0 10px 14px rgba(153,40,99,.22));
  animation: glassFive 7s ease-in-out infinite alternate;
}
.giant-five span {
  padding-left: 56px;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes glassFive {
  from { background-position: 0% 45%; transform: translateY(0); }
  to { background-position: 100% 55%; transform: translateY(-5px); }
}
.benefit-icon {
  width: clamp(68px, 7.8vw, 94px);
  border: 1px solid rgba(255,255,255,.94);
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.98), rgba(255,255,255,.72) 40%, rgba(250,220,236,.62) 100%);
  box-shadow: 0 12px 28px rgba(143,67,111,.13), inset 0 2px 8px rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.benefit-item h3 {
  max-width: 115px;
  color: #7b2853;
  font-size: clamp(.75rem, 1vw, .96rem);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
}

.performance-product { isolation: isolate; }
.package-stack { z-index: 1; }
.stack-mark {
  z-index: 6;
  top: 4%;
  right: 0;
  bottom: auto;
  width: clamp(96px, 12vw, 148px);
  aspect-ratio: 1;
  box-shadow: 0 12px 32px rgba(36,91,68,.24), inset 0 2px 5px rgba(255,255,255,.6);
}
.performance-stats strong { font-size: clamp(1.7rem, 2.65vw, 2.55rem); }
.performance-stats span { font-size: clamp(.78rem, 1vw, .94rem); line-height: 1.35; }

.closing {
  min-height: clamp(440px, 66.7vw, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff8f7;
  background-image: linear-gradient(135deg, rgba(255,250,249,.32), rgba(255,247,245,.24) 50%, rgba(248,241,249,.32)), url("assets/atmosfera-pearl-king.png");
  background-size: 100% 100%, 200% auto;
  background-position: center, left top;
  background-repeat: no-repeat;
}
.site-footer {
  color: #573d54;
  background: linear-gradient(145deg, #fffaf8 0%, #f8eef4 56%, #f0edf6 100%);
}
.site-footer .footer-column a, .site-footer .footer-column p, .site-footer .footer-legal { color: #5e4b60; }
.site-footer .footer-column h2, .site-footer .footer-social h2 { color: #a52d69; }

@media (max-width: 1000px) {
  .giant-five { min-height: 300px; font-size: clamp(12rem, 25vw, 18rem); }
  .scent { min-height: 330px; }
  .performance-stats strong { font-size: clamp(1.55rem, 3vw, 2rem); }
}
@media (max-width: 720px) {
  .fragrances { background: linear-gradient(145deg, #fffaf7, #fbf2f6 55%, #f7f3f8); }
  .scent { min-height: clamp(300px, 82vw, 390px); }
  .scent::before { inset: 0 0 25%; }
  .scent-copy { right: 5%; left: 5%; min-height: 68px; padding: 7px 5px; }
  .scent-copy p { font-size: .69rem; }
  .scent img { bottom: 72px; width: 145%; }
  .benefit-stage { gap: 5px; }
  .giant-five { min-height: 180px; flex-basis: 31%; font-size: clamp(8rem, 31vw, 13rem); }
  .giant-five span { padding-left: 24px; }
  .benefit-list { gap: 5px; }
  .benefit-icon { width: clamp(48px, 13vw, 68px); }
  .benefit-item h3 { font-size: clamp(.52rem, 2.1vw, .7rem); }
  .stack-mark { top: 1%; right: 1%; width: clamp(86px, 22vw, 112px); }
  .performance-stats strong { font-size: clamp(1.35rem, 5vw, 1.8rem); }
  .performance-stats span { font-size: .7rem; }
  .closing { min-height: 490px; background-size: 100% 100%, 200% auto; background-position: center, left top; }
  .site-footer { background: linear-gradient(145deg, #fffaf8 0%, #f8eef4 56%, #f0edf6 100%); }
}

.giant-five span {
  background-image: linear-gradient(135deg, #fff 0%, #f2a8c7 24%, #bd236d 48%, #fff 61%, #df478c 78%, #fff 100%);
  background-size: 220% 220%;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glassFive 7s ease-in-out infinite alternate-reverse;
}

/* Ajustes da primeira seção a partir da revisão do navegador. */
@media (min-width: 1001px) {
  .site-header {
    justify-content: flex-start;
    padding-left: clamp(110px, 11vw, 210px);
    padding-right: clamp(48px, 5vw, 96px);
  }
  .brand { width: 112px; margin-right: auto; }
  .main-nav { gap: clamp(16px, 1.7vw, 30px); margin-left: auto; margin-right: clamp(18px, 4vw, 76px); }
  .hero { min-height: clamp(600px, 46vw, 760px); }
  .hero-content {
    z-index: 4;
    width: min(44%, 760px);
    margin-right: clamp(70px, 8vw, 150px);
    padding-top: clamp(112px, 8.5vw, 160px);
  }
  .hero h1 {
    max-width: 760px;
    font-size: clamp(3.3rem, 4.35vw, 5.15rem);
    line-height: .98;
    letter-spacing: -.055em;
  }
  .hero-copy { max-width: 470px; margin: 18px 0 20px; font-size: clamp(.96rem, 1.05vw, 1.1rem); }
  .hero-actions > a:not(.button), .hero-proof { display: none; }
  .hero .button { min-height: 48px; }
  .hero-product {
    z-index: 2;
    right: clamp(50px, 7vw, 130px);
    bottom: -5%;
    left: auto;
    width: min(30vw, 550px);
  }
}

/* Refinamento da composição da hero em telas amplas. */
@media (min-width: 1001px) {
  .hero-content {
    width: min(48%, 800px);
    padding-top: clamp(112px, 8vw, 150px);
  }
  .hero h1 {
    max-width: 800px;
    font-size: clamp(3rem, 3.8vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.05em;
  }
  .hero-copy {
    max-width: 520px;
    margin: 16px 0 18px;
    font-size: clamp(.92rem, 1vw, 1.04rem);
    line-height: 1.5;
  }
  .hero-actions { align-items: flex-start; }
  .hero-product {
    right: clamp(70px, 7vw, 130px);
    bottom: 0;
    width: min(25vw, 460px);
  }
  .hero-caption {
    color: #b51d64;
    text-shadow: 0 1px 8px rgba(255,255,255,.72);
  }
  .hero-caption strong { color: #b51d64; }
}

/* Enquadramento desktop: preserva o topo da fotografia sem limitar a largura da seção. */
@media (min-width: 1001px) {
  .hero-photo { object-position: 26% top; }
}

/* Desktop: exibe a foto da hero inteira, em proporção natural, sobre o fundo amplo da seção. */
@media (min-width: 1001px) {
  .hero { background-color: #fff9f7; }
  .hero-photo {
    inset: 0 auto 0 0;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: left top;
  }
}

/* Reserva a faixa do menu para que ele não cubra a cabeça da modelo. */
@media (min-width: 1001px) {
  .hero-photo {
    top: 62px;
    bottom: 0;
    height: calc(100% - 62px);
    object-fit: contain;
    object-position: left top;
  }
}

/* Entrada sequencial das quatro embalagens na hero. */
.hero-product.hero-package-showcase {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 4.5%;
  bottom: 0;
  left: auto;
  width: min(54vw, 1000px);
  height: clamp(260px, 17vw, 320px);
  filter: none;
  pointer-events: none;
  isolation: isolate;
}
.hero-package-showcase .hero-aroma {
  position: absolute;
  z-index: var(--package-order);
  bottom: var(--package-rise);
  left: var(--package-offset);
  width: 40%;
  max-width: none;
  height: auto;
  margin: 0;
  opacity: 0;
  filter: drop-shadow(0 15px 18px rgba(41,42,37,.18));
  animation: heroPackageEnter .95s cubic-bezier(.18,.76,.25,1) both;
  animation-delay: var(--package-delay);
}
.hero-package-showcase .hero-aroma:nth-child(1) { --package-order: 1; --package-offset: 0%; --package-rise: 9%; --package-delay: .2s; }
.hero-package-showcase .hero-aroma:nth-child(2) { --package-order: 2; --package-offset: 19%; --package-rise: 6%; --package-delay: .78s; }
.hero-package-showcase .hero-aroma:nth-child(3) { --package-order: 3; --package-offset: 38%; --package-rise: 3%; --package-delay: 1.36s; }
.hero-package-showcase .hero-aroma:nth-child(4) { --package-order: 4; --package-offset: 57%; --package-rise: 0%; --package-delay: 1.94s; }
@keyframes heroPackageEnter {
  from { opacity: 0; transform: translateX(-115px) translateY(19px) scale(.94); }
  to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .hero { min-height: clamp(630px, 68vw, 760px); }
  .hero-package-showcase.hero-product {
    right: 2%;
    bottom: 0;
    left: auto;
    width: 58%;
    height: clamp(210px, 27vw, 270px);
  }
  .hero-package-showcase .hero-aroma { width: 40%; }
}
@media (max-width: 720px) {
  .hero { min-height: max(1020px, calc(100svh - 72px)); }
  .hero-content { z-index: 4; padding-bottom: 285px; }
  .hero-package-showcase.hero-product {
    z-index: 2;
    right: 4%;
    bottom: 12px;
    left: 4%;
    width: auto;
    height: clamp(180px, 48vw, 235px);
  }
  .hero-package-showcase .hero-aroma { width: 44%; }
  .hero-package-showcase .hero-aroma:nth-child(1) { --package-offset: 0%; --package-rise: 8%; }
  .hero-package-showcase .hero-aroma:nth-child(2) { --package-offset: 18%; --package-rise: 5%; }
  .hero-package-showcase .hero-aroma:nth-child(3) { --package-offset: 36%; --package-rise: 2%; }
  .hero-package-showcase .hero-aroma:nth-child(4) { --package-offset: 54%; --package-rise: 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-package-showcase .hero-aroma { opacity: 1; animation: none; transform: none; }
}

/* Composição da seção 5 em 1 conforme a arte aprovada. */
@media (min-width: 721px) {
  .benefits {
    min-height: clamp(390px, 25vw, 470px);
    padding: 34px clamp(22px, 5vw, 72px);
    background-image: linear-gradient(135deg, rgba(255,234,242,.28), rgba(255,245,249,.3)), url("assets/atmosfera-pearl-king.png");
    background-size: 100% 100%, 200% 200%;
    background-position: center, left top;
  }
  .benefits::before { display: none; }
  .benefits::after { right: 0; bottom: -28%; width: 42vw; height: 45%; opacity: .42; }
  .benefits .section-intro {
    position: absolute;
    z-index: 3;
    top: 5%;
    left: 34%;
    width: 38%;
    max-width: none;
    margin: 0;
    text-align: center;
  }
  .benefits .section-intro .eyebrow { margin: 0; font-size: .67rem; }
  .benefits .section-intro h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .benefits .section-intro > p:last-child {
    position: absolute;
    top: clamp(88px, 7vw, 118px);
    left: 0;
    display: block;
    width: 100%;
    margin: 0;
    color: #65334f;
    font-family: var(--serif);
    font-size: clamp(.66rem, .95vw, .9rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
  }
  .benefit-stage { position: static; display: block; max-width: none; margin: 0; }
  .giant-five {
    position: absolute;
    z-index: 1;
    top: 5%;
    left: 1%;
    display: block;
    width: 56%;
    min-height: 0;
    font-size: clamp(13rem, 20vw, 24rem);
    line-height: .8;
    text-align: left;
    opacity: .9;
  }
  .giant-five span {
    position: absolute;
    top: 15%;
    left: 54%;
    padding: 0;
    font-size: .22em;
    letter-spacing: .015em;
    white-space: nowrap;
  }
  .benefit-list {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 19%;
    left: 35%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(5px, 1vw, 16px);
  }
  .benefit-icon {
    width: clamp(56px, 6.2vw, 78px);
    background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.96), rgba(255,255,255,.64) 45%, rgba(246,215,231,.62));
    box-shadow: 0 8px 22px rgba(177,53,111,.12), inset 0 1px 5px rgba(255,255,255,.95);
  }
  .benefit-item h3 {
    margin-top: 7px;
    font-size: clamp(.62rem, .88vw, .82rem);
    line-height: 1.08;
  }
  .benefits .section-cta {
    position: absolute;
    z-index: 4;
    bottom: 12px;
    left: 50%;
    min-height: 40px;
    margin: 0;
    padding-inline: 24px;
    transform: translateX(-50%);
  }
}

@media (min-width: 721px) {
  .benefit-stage {
    position: absolute;
    inset: 0;
    display: block;
    max-width: none;
    margin: 0;
  }
  .giant-five {
    background-image: linear-gradient(135deg, #b82066 2%, #fff5f9 22%, #eb6ba8 38%, #9f1c60 56%, #ffd5e7 72%, #be2e79 92%);
    background-size: 220% 220%;
    -webkit-text-stroke: 1px rgba(255,255,255,.72);
    opacity: 1;
  }
  .giant-five span {
    background-image: linear-gradient(135deg, #972158, #e64b91 55%, #922052);
    background-size: 100% 100%;
    -webkit-text-stroke: .5px rgba(255,255,255,.75);
    filter: drop-shadow(0 2px 4px rgba(122,31,78,.2));
  }
  .benefit-list { bottom: 20%; }
  .benefit-icon svg { stroke: #d3337c; }
}
@media (min-width: 721px) {
  .giant-five {
    background-image: linear-gradient(135deg, #d83a86 0%, #f9bad4 28%, #d9458f 48%, #a7195e 68%, #efa0c1 84%, #ca2877 100%);
    background-position: center;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.82);
    filter: drop-shadow(0 8px 12px rgba(173,39,105,.2));
  }
  .giant-five span {
    background-image: linear-gradient(135deg, #8f1b53 0%, #d7357e 48%, #ad1d61 100%);
    background-position: center;
    -webkit-text-stroke: .7px rgba(255,255,255,.9);
  }
}

/* Correção de estrutura da seção: numeral decorativo separado do título 5 em 1. */
@media (min-width: 721px) {
  .benefits::before {
    position: absolute;
    z-index: 1;
    top: 9%;
    left: 1.5%;
    display: block;
    width: 34%;
    height: 86%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    content: "5";
    color: transparent;
    font-family: var(--serif);
    font-size: clamp(14rem, 30vw, 25rem);
    font-style: italic;
    font-weight: 500;
    line-height: .82;
    white-space: nowrap;
    background-image: linear-gradient(130deg, #d63d87 0%, #fff6fa 18%, #f39ac1 31%, #ce337d 45%, #fff 53%, #e861a4 64%, #9e1b5b 78%, #ffd4e7 92%);
    background-size: 190% 190%;
    background-position: 42% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.9);
    filter: drop-shadow(0 5px 8px rgba(151,29,86,.25));
    opacity: .95;
    transform: scaleX(1.78);
    transform-origin: left center;
  }
  .benefits .section-intro {
    top: 5%;
    left: 31%;
    width: 40%;
  }
  .benefits .section-intro > p:last-child {
    top: 27%;
    left: 50%;
    width: 58%;
    transform: translateX(-50%);
    font-size: clamp(.62rem, .82vw, .78rem);
  }
  .benefit-stage { position: absolute; inset: 0; }
  .giant-five {
    top: 9%;
    left: 34%;
    display: flex;
    width: 34%;
    height: 84px;
    min-height: 0;
    align-items: baseline;
    justify-content: center;
    flex-direction: row;
    color: #c2266c;
    font-size: clamp(3.4rem, 5.2vw, 5.1rem);
    letter-spacing: -.07em;
    line-height: 1;
    text-align: center;
    background: none;
    -webkit-text-fill-color: #c2266c;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 3px 5px rgba(145,28,82,.17));
    animation: none;
    opacity: 1;
  }
  .giant-five span {
    position: static;
    top: auto;
    left: auto;
    padding: 0 0 0 .14em;
    color: #a4215d;
    font-size: .88em;
    font-style: italic;
    letter-spacing: -.035em;
    line-height: 1;
    background: none;
    -webkit-text-fill-color: #a4215d;
    -webkit-text-stroke: 0;
    filter: none;
    animation: none;
  }
  .benefit-list { bottom: 20%; }
  .benefit-icon { width: clamp(68px, 7vw, 92px); }
}
@media (min-width: 721px) {
  .benefits::before {
    display: block;
    z-index: 1;
    top: 50%;
    left: 1%;
    width: min(30vw, 420px);
    height: auto;
    aspect-ratio: 1 / 1;
    content: "";
    color: transparent;
    font-size: 0;
    -webkit-text-fill-color: initial;
    -webkit-text-stroke: 0;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    background-image: url("assets/benefit-five-glass.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 7px 8px rgba(151,29,86,.18));
    transform: translateY(-50%);
  }
  .benefits {
    min-height: clamp(500px, 66.667vw, 900px);
    background-size: 100% 100%, 200% 200%;
    background-position: center, left top;
  }
  .benefits .section-intro { height: 90%; }
  .benefits .section-intro .eyebrow { font-size: clamp(.9rem, 1.2vw, 1.12rem); }
  .benefits .section-intro > p:last-child {
    top: 13vw;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.05;
  }
  .benefits .section-intro > p:last-child br { display: block; }
  .giant-five {
    top: 7%;
    left: 34%;
    width: 34%;
    height: 90px;
    font-size: clamp(5.2rem, 10.8vw, 9rem);
    letter-spacing: -.06em;
    filter: none;
    text-shadow: none;
  }
  .giant-five span { padding-left: .14em; font-size: .84em; }
  .benefit-list {
    top: 43%;
    right: 26%;
    bottom: auto;
    left: 26%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(5px, 1vw, 14px);
    row-gap: clamp(14px, 2vw, 24px);
  }
  .benefit-item:nth-child(-n + 3) { grid-column: span 2; }
  .benefit-item:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
  .benefit-item:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; }
  .benefit-item h3 {
    margin-top: 8px;
    font-size: clamp(.85rem, 1.15vw, 1.05rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.1;
  }
  .benefit-icon {
    width: clamp(68px, 7vw, 92px);
    border-color: rgba(255,255,255,.96);
    background: radial-gradient(circle at 33% 24%, #fff 0 12%, rgba(255,255,255,.95) 24%, rgba(255,241,247,.78) 56%, rgba(237,164,198,.68) 100%);
    box-shadow: 0 8px 20px rgba(177,53,111,.14), inset 0 0 0 1px rgba(255,255,255,.8), inset -6px -8px 16px rgba(201,92,143,.1);
  }
  .benefit-icon svg { width: 50%; stroke-width: 2; }
  .benefits .section-cta { bottom: clamp(18px, 3vw, 42px); }
  .js-ready .benefits .section-cta { transform: translate(-50%, 0); }
}

/* Ícones em bolhas translúcidas com flutuação independente. */
.benefit-icon {
  position: relative;
  overflow: visible;
  border: 1.5px solid rgba(255,255,255,.96);
  background: radial-gradient(circle at 31% 22%, rgba(255,255,255,.98) 0 5%, rgba(255,255,255,.52) 11%, rgba(255,246,250,.18) 28%, rgba(228,119,169,.16) 63%, rgba(255,255,255,.58) 88%, rgba(252,221,235,.38) 100%);
  box-shadow: 0 5px 20px rgba(153,61,112,.14), inset 0 0 0 1px rgba(255,255,255,.66), inset -5px -7px 13px rgba(180,78,132,.14), inset 4px 4px 10px rgba(255,255,255,.82);
  backdrop-filter: blur(2px);
  animation: benefitBubbleFloat 6.4s ease-in-out infinite;
  will-change: transform;
}
.benefit-icon::before {
  position: absolute;
  top: 10%;
  left: 18%;
  width: 28%;
  height: 10%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  content: "";
  filter: blur(1px);
  transform: rotate(-42deg);
  pointer-events: none;
}
.benefit-icon svg { position: relative; z-index: 1; }
.benefit-item:nth-child(1) .benefit-icon { animation-duration: 5.8s; animation-delay: -.8s; }
.benefit-item:nth-child(2) .benefit-icon { animation-duration: 6.7s; animation-delay: -2.4s; }
.benefit-item:nth-child(3) .benefit-icon { animation-duration: 5.3s; animation-delay: -1.6s; }
.benefit-item:nth-child(4) .benefit-icon { animation-duration: 7.1s; animation-delay: -3.2s; }
.benefit-item:nth-child(5) .benefit-icon { animation-duration: 6.2s; animation-delay: -4.1s; }
@keyframes benefitBubbleFloat {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-9px) rotate(.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-icon { animation: none; will-change: auto; }
}

/* Cards de fragrância com respiro e embalagens contidas no próprio quadro. */
.fragrance-grid {
  gap: clamp(14px, 1.35vw, 26px);
}
.scent {
  --scent-radius: clamp(20px, 1.8vw, 30px);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: var(--scent-radius);
  overflow: hidden;
  contain: paint;
  box-shadow: 0 12px 30px rgba(99,54,81,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
.scent::before,
.scent::after {
  border-radius: inherit;
  clip-path: inset(0 round var(--scent-radius));
}
.scent img {
  width: 92%;
  max-width: 92%;
  bottom: 84px;
}
.scent:hover img {
  transform: translate(-50%, -8px) scale(1.035);
}
@media (max-width: 1000px) {
  .fragrance-grid { gap: 14px; }
  .scent img { width: 92%; max-width: 92%; }
}
@media (max-width: 720px) {
  .fragrance-grid { gap: 12px; }
  .scent { --scent-radius: 20px; }
  .scent img { width: 92%; max-width: 92%; bottom: 72px; }
}
@media (max-width: 390px) {
  .fragrance-grid { gap: 10px; }
  .scent img { width: 90%; max-width: 90%; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .fragrance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scent { min-height: clamp(340px, 46vw, 460px); }
}

/* Quatro aromas em uma pilha vertical, com encaixe visual e entrada de baixo para cima. */
.performance-product {
  min-height: clamp(650px, 52vw, 1020px);
  margin-top: 8px;
}
.package-stack {
  --stack-step: clamp(135px, 10.7vw, 205px);
  position: absolute;
  inset: 24px 0 0;
  z-index: 1;
}
.package-stack img {
  position: absolute;
  top: 0;
  left: 43%;
  width: clamp(290px, 24vw, 460px);
  max-width: none;
  height: auto;
  margin: 0;
  opacity: 0;
  object-fit: contain;
  filter: drop-shadow(0 17px 16px rgba(54,43,45,.2));
  transform: translate(-50%, var(--stack-enter-y, -64px)) scale(.97);
}
.package-stack img:nth-child(1) { top: calc(var(--stack-step) + var(--stack-step) + var(--stack-step)); z-index: 1; --stack-enter-y: 56px; }
.package-stack img:nth-child(2) { top: calc(var(--stack-step) + var(--stack-step)); z-index: 2; }
.package-stack img:nth-child(3) { top: var(--stack-step); z-index: 3; }
.package-stack img:nth-child(4) { top: 0; z-index: 4; }
.performance-product.is-visible .package-stack img {
  animation: stackedPackageEnter .82s cubic-bezier(.18,.76,.25,1) both;
}
.performance-product.is-visible .package-stack img:nth-child(1) { animation-delay: .27s; }
.performance-product.is-visible .package-stack img:nth-child(2) { animation-delay: .54s; }
.performance-product.is-visible .package-stack img:nth-child(3) { animation-delay: .81s; }
.performance-product.is-visible .package-stack img:nth-child(4) { animation-delay: 1.08s; }
@keyframes stackedPackageEnter {
  from { opacity: 0; transform: translate(-50%, var(--stack-enter-y, -64px)) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.stack-mark { top: calc(3% + 24px); right: 8%; }
.performance-stats {
  justify-content: center;
  gap: clamp(18px, 5vw, 64px);
}
@media (max-width: 720px) {
  .performance-product { min-height: clamp(680px, 190vw, 780px); margin-top: 0; }
  .package-stack { --stack-step: clamp(115px, 38vw, 148px); }
  .package-stack { top: 16px; }
  .package-stack img { width: min(84vw, 365px); }
  .stack-mark { top: calc(2% + 16px); right: 3%; width: clamp(78px, 21vw, 100px); }
  .performance-stats { justify-content: center; gap: 16px; }
}
@media (max-width: 390px) {
  .performance-product { min-height: clamp(680px, 190vw, 740px); }
  .package-stack { --stack-step: clamp(110px, 37vw, 144px); }
  .package-stack img { width: 84vw; }
}
@media (max-width: 720px) {
  .faq-content {
    --faq-shift: clamp(16px, 4.5vw, 30px);
    width: calc(100% - var(--faq-shift));
    margin-left: var(--faq-shift);
  }
}
@media (prefers-reduced-motion: reduce) {
  .package-stack img,
  .performance-product.is-visible .package-stack img {
    opacity: 1;
    animation: none;
    transform: translateX(-50%);
  }
}

/* Refinos exclusivos para telas pequenas: manter a arte na proporção original. */
@media (max-width: 720px) {
  .hero { min-height: max(920px, calc(100svh - 72px)); }
  .hero-content { padding-bottom: 145px; }
  .hero-package-showcase.hero-product { bottom: 3%; }

  .benefits {
    background-size: 100% 100%, auto 200%;
    background-position: center, left top;
  }
  .benefits .section-intro { margin-bottom: 8px; }
  .benefit-stage {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .giant-five {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-height: clamp(170px, 48vw, 230px);
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-basis: auto;
    margin: 0 auto 8px;
    color: transparent;
    font-size: 0;
    line-height: 1;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
    filter: none;
    animation: none;
  }
  .giant-five::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: clamp(160px, 45vw, 225px);
    aspect-ratio: 1;
    content: "";
    background: url("assets/benefit-five-glass.png") center / contain no-repeat;
    transform: translate(-50%, -50%);
  }
  .giant-five span {
    position: absolute;
    top: 56%;
    left: 51%;
    padding: 0;
    color: #a4215d;
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    font-style: italic;
    letter-spacing: -.035em;
    line-height: 1;
    white-space: nowrap;
    background: none;
    -webkit-text-fill-color: #a4215d;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 1px 3px rgba(255,255,255,.8));
    transform: translateY(-50%);
    animation: none;
  }
  .benefit-list {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 8px;
    padding: 8px 0;
  }
  .benefit-item:nth-child(-n + 3) { grid-column: span 2; }
  .benefit-item:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; margin: 0; }
  .benefit-item:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; margin: 0; }
  .benefit-icon { width: clamp(54px, 15vw, 70px); }
  .benefit-item h3 { font-size: clamp(.65rem, 2.6vw, .82rem); }
  .benefits .section-cta { position: relative; bottom: auto; left: 50%; margin: 25px 0 0; transform: translateX(-50%); }

  .how-to {
    background-size: 100% 100%, auto 200%;
    background-position: center, left bottom;
  }
  .step-scene { background-size: auto 200%; }
  .scene-drum { background-position: left top; }
  .scene-linen { background-position: right top; }
  .scene-cycle { background-position: left bottom; }

  .performance {
    background-size: 100% 100%, auto 200%;
    background-position: center, left top;
  }
  .faq {
    background-size: 100% 100%, auto 200%;
    background-position: center, 60% 100%;
  }
  .closing {
    background-size: 100% 100%, auto 200%;
    background-position: center, left top;
  }

  .scent::before { background-size: 100% 100%, auto 200%; }
  .scent-lirio::before { background-position: center, left top; }
  .scent-lavanda::before { background-position: center, 70% top; }
  .scent-floral::before { background-position: center, left bottom; }
  .scent-citrica::before { background-position: center, 70% bottom; }
}