/* koomimi.com */
/* Design palette: #c4b5fd, #3f3f46, #fefefe, #a78bfa, #fcd34d, #93c5fd, #fda4af, #a1a1aa */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #fefefe; color: #3f3f46; font-family: 'Lato', sans-serif; font-weight: 300; line-height: 1.9; }
.hero { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; }
.wash { position: absolute; border-radius: 50%; filter: blur(60px); }
.wash-lavender { width: 300px; height: 300px; background: rgba(196,181,253,0.3); top: 10%; left: 20%; }
.wash-pink { width: 250px; height: 250px; background: rgba(253,164,175,0.3); top: 30%; right: 15%; }
.brand { font-family: 'Cormorant', serif; font-weight: 300; font-size: clamp(2.5rem, 7vw, 4rem); color: #3f3f46; position: relative; z-index: 1; }
.whisper { font-size: 0.9rem; color: #a1a1aa; position: relative; z-index: 1; }
.sounds { max-width: 550px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.sound-block { position: relative; padding: 2rem; overflow: hidden; border-radius: 20px; }
.wash-bg { position: absolute; inset: 0; border-radius: 20px; z-index: 0; }
.wash-blue-bg { background: radial-gradient(ellipse at 30% 50%, rgba(147,197,253,0.25) 0%, transparent 70%); }
.wash-peach-bg { background: radial-gradient(ellipse at 70% 50%, rgba(252,211,77,0.15) 0%, transparent 70%); }
.sound-title { font-family: 'Cormorant', serif; font-weight: 300; font-size: 1.4rem; color: #3f3f46; position: relative; z-index: 1; margin-bottom: 0.5rem; }
.sound-text { font-size: 0.8rem; color: #71717a; position: relative; z-index: 1; margin-bottom: 1rem; }
.wave-line { display: flex; position: relative; z-index: 1; }
.wave-seg { display: inline-block; width: 40px; height: 20px; border: 2px solid #a78bfa; border-radius: 50%; }
.wave-seg.up { border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; }
.wave-seg.down { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; }
.palette-strip { display: flex; justify-content: center; gap: 0; padding: 2rem; }
.swatch { width: 80px; height: 40px; }
.swatch.lavender { background: #c4b5fd; border-radius: 20px 0 0 20px; }
.swatch.pink { background: #fda4af; }
.swatch.blue { background: #93c5fd; }
.swatch.peach { background: #fcd34d; border-radius: 0 20px 20px 0; opacity: 0.5; }
.silence { text-align: center; padding: 4rem 2rem; }
.sine-wave { display: flex; justify-content: center; margin-bottom: 1rem; }
.silence-label { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.6rem; color: #a1a1aa; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }