/* ppuzzl.bar */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1a0a2e; color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; }
.hero { text-align: center; padding: 6rem 2rem 2rem; background: linear-gradient(180deg, #ff6b9d, #a78bfa); position: relative; overflow: hidden; }
.brand { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(3rem, 7vw, 5rem); background: linear-gradient(180deg, #ff6b9d, #ffffff, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; z-index: 1; }
.subtitle { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; opacity: 0.8; position: relative; z-index: 1; }
.est { font-family: 'Space Grotesk', sans-serif; font-size: 0.55rem; letter-spacing: 0.15em; opacity: 0.5; display: block; margin-top: 0.5rem; position: relative; z-index: 1; }
.grid-floor { width: 100%; height: 80px; background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.08) 50%); background-size: 100% 4px; transform: perspective(200px) rotateX(25deg); margin-top: 2rem; opacity: 0.5; }
.browse { max-width: 440px; margin: 0 auto; padding: 3rem 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.puzzle-card { background: #2d1b4e; border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 16px; padding: 1.5rem; }
.card-icon { width: 24px; height: 24px; clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 30%, 100% 100%, 30% 100%, 30% 70%, 0 70%); background: #ff6b9d; margin-bottom: 0.8rem; }
.card-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.card-desc { font-size: 0.75rem; opacity: 0.7; }
.sunset { padding: 3rem 1.5rem; }
.sunset-strip { max-width: 440px; margin: 0 auto; background: linear-gradient(135deg, #ff6b9d, #fb923c, #a78bfa); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; }
.featured-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
.featured-desc { font-size: 0.8rem; opacity: 0.9; }
.chill { text-align: center; padding: 4rem 2rem 5rem; }
.close-text { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; background: linear-gradient(90deg, #ff6b9d, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }