/* maljosim.com */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #fef08a; color: #000000; font-family: 'Inter', sans-serif; line-height: 1.6; }
.hero { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; }
.benday { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 8px 8px; }
.brand { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(3rem, 8vw, 5rem); color: #000000; position: relative; z-index: 1; }
.speech-bubble { background: #ffffff; border: 3px solid #000000; border-radius: 20px; padding: 1rem 1.5rem; position: relative; z-index: 1; margin-top: 1rem; }
.bubble-text { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.2rem; }
.bubble-tail { position: absolute; bottom: -18px; left: 30px; width: 0; height: 0; border: 9px solid transparent; border-top-color: #000000; }
.panels { max-width: 600px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.panel { border: 3px solid #000000; padding: 1.5rem; }
.panel.pink { background: #f472b6; }
.panel.blue { background: #60a5fa; }
.panel.green { background: #4ade80; }
.panel-title { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.3rem; margin-bottom: 0.3rem; }
.panel-text { font-size: 0.85rem; }
.sounds { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 3rem 1.5rem; position: relative; flex-wrap: wrap; }
.starburst { position: absolute; width: 120px; height: 120px; background: #ffffff; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0.3; z-index: 0; }
.sfx { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(2rem, 6vw, 3.5rem); color: #000000; -webkit-text-stroke: 2px #000000; position: relative; z-index: 1; }
.credits { padding: 2rem 1.5rem; display: flex; justify-content: center; }
.credits-box { border: 3px solid #000000; padding: 1.5rem; text-align: center; background: #ffffff; }
.credits-text { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.credits-brand { font-size: 0.65rem; color: #666666; display: block; margin-top: 0.3rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }