/* LUMEAU — "Morning Mist": spa-calm water wellness. Mist glass, lagoon teal, a single citrus note.
   Signature: living ripples on the hero, frosted-glass product capsule, wave-edged sections. */
:root { --fx-color: rgba(14, 59, 61, 0.28); --glass: color-mix(in srgb, #fff 58%, transparent); --glass-line: color-mix(in srgb, #fff 80%, transparent); }
body { background: linear-gradient(180deg, #EEF5F3 0%, #F1F6F5 40%); }
.announce { background: var(--ink); }
.header { background: color-mix(in srgb, #F1F6F5 70%, transparent); }
.header__logo span { font-size: 2.1rem; font-weight: 500; }
.header__logo span::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translate(2px, -14px); background: var(--accent-3); }

.hero--glass { --hero-bg: radial-gradient(90% 80% at 85% 20%, #CDE6E0 0%, transparent 60%), radial-gradient(70% 70% at 10% 90%, #E3EFEC 0%, transparent 60%), #F1F6F5; min-height: min(92svh, 960px); align-items: center; }
.hero--glass .hero__title { font-size: clamp(3.2rem, 1.6rem + 6.8vw, 8.8rem); font-weight: 500; line-height: 0.88; letter-spacing: -0.025em; }
.hero--glass .hero__title em { color: #4F8F86; font-weight: 400; }
.hero--glass .hero__content { padding-block: 6rem 4rem; }
.hero--glass .hero__text { color: var(--muted); }
.hero--glass .hero-figure { aspect-ratio: 4 / 5; max-width: 500px; margin-inline: auto; border-radius: 260px 260px 40px 40px; background: linear-gradient(180deg, var(--glass), color-mix(in srgb, #CFE6E1 50%, transparent)); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 #fff, 0 40px 80px -40px rgba(14, 59, 61, 0.45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
.hero--glass .hero-figure > svg { inset: 4% 0 0; }
.hero--glass .hero-chip { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); }
.hero--glass .hero-chip--1 { left: -10%; }
.hero--glass .hero-chip strong { color: #E9932B; }
.js .shower-rain line { stroke-dasharray: 26 140; animation: rain 1.4s linear infinite; }
.shower-rain line:nth-child(odd) { animation-delay: -0.5s !important; }
.shower-rain line:nth-child(3n) { animation-delay: -0.9s !important; }
@keyframes rain { from { stroke-dashoffset: 166; } to { stroke-dashoffset: 0; } }
.js .shower-float { animation: float-s 8s ease-in-out infinite alternate; }
@keyframes float-s { to { transform: translateY(-8px); } }

.eyebrow { color: #4F8F86; letter-spacing: 0.2em; }
.h2 em, .display em { color: #4F8F86; }
.section--surface, .section--alt { position: relative; }
.section--surface::before, .section--alt::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 38px; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 38' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-120 22-240 30-360 22S840 0 720 0 480 30 360 30 120 22 0 8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 38' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-120 22-240 30-360 22S840 0 720 0 480 30 360 30 120 22 0 8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.section--alt { background: #DDECE8; }
.ticker { background: transparent; border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.ticker__item { color: #2F6A66; }
.ticker__item::after { content: '◦'; color: var(--accent-3); opacity: 1; }
.tile { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -45px rgba(14, 59, 61, 0.5); }
.tile--dark { background: linear-gradient(160deg, #134B4D, #0A2C2E); border: 0; }
.tile--dark .tile__kicker { color: var(--accent-3); }
.tile--accent { background: var(--accent-3); color: #0E3B3D; --muted: #4A3A12; }
.tile__kicker { font-weight: 500; }
.card__media { background: linear-gradient(180deg, #E6F1EE, #D3E7E2); }
.card__badge { background: var(--accent-3); color: var(--ink); }
.story__frame { border-radius: 200px 200px 32px 32px; }
.story__num { color: #E9932B; }
.section--dark { background: linear-gradient(180deg, #0E3B3D, #0A2C2E); }
.stat__value { color: var(--accent-3); }
.compare-wrap { background: var(--glass); backdrop-filter: blur(8px); }
.compare td.is-us, .compare th.is-us { background: color-mix(in srgb, var(--accent-soft) 26%, transparent); }
.seal__center { color: var(--ink); }
.guarantee .seal svg text { fill: #2F6A66; }
.faq summary { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; }
.faq details[open] summary .plus { background: var(--accent-3); color: var(--ink); border-color: var(--accent-3); }
.footer { background: #0A2C2E; }
.footer__word { text-transform: lowercase; color: #9FCBC2; opacity: 0.4; }
.pdp__title { font-weight: 500; }
.gallery__slide { border-radius: 30px; background: linear-gradient(180deg, #E6F1EE, #D3E7E2); }
.btn--accent:hover { box-shadow: 0 0 0 6px rgba(159, 203, 194, 0.35); }
.hero--glass { --shader-a: #E4F0EC; --shader-b: #F6FAF9; --shader-c: #FFFFFF; }
.hero--glass .shader-canvas { opacity: 0; } .hero--glass .shader-canvas.is-ready { opacity: 0.9; }