*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px;line-height:1.6;scroll-behavior:smooth}
body{background-color:#E8F5F0;color:#2D3142;font-family:'DM Sans',sans-serif;font-weight:400;overflow-x:hidden}

.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px}
.inflated-gate{width:200px;height:120px;border-radius:60px 60px 20px 20px;background:linear-gradient(135deg,#5CD4A0 0%,#5B9CF5 50%,#9B7FE6 100%);box-shadow:0 20px 60px rgba(0,0,0,0.1),inset 0 -10px 20px rgba(0,0,0,0.05),inset 0 10px 20px rgba(255,255,255,0.15);opacity:0;transform:scale(0.9);transition:opacity 600ms ease-out,transform 600ms ease-out}
.inflated-gate.visible{opacity:1;transform:scale(1)}
.hero-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:3.7rem;color:#2D3142;letter-spacing:-0.01em;opacity:0;transition:opacity 400ms ease-out}
.hero-title.visible{opacity:1}
.hero-tagline{font-family:'DM Sans',sans-serif;font-weight:400;font-size:1rem;color:#4A4E69;opacity:0;transition:opacity 400ms ease-out}
.hero-tagline.visible{opacity:1}

.puzzle-section{max-width:980px;margin:0 auto;padding:0 24px 80px}
.masonry{columns:3;column-gap:20px}
.puzzle-card{break-inside:avoid;background:#FFFFFF;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.08);margin-bottom:20px;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity 400ms ease-out,transform 400ms ease-out}
.puzzle-card.visible{opacity:1;transform:translateY(0)}
.card-strip{height:40px;border-radius:16px 16px 0 0}
[data-category="pink"] .card-strip{background:#FF6B8A}
[data-category="blue"] .card-strip{background:#5B9CF5}
[data-category="yellow"] .card-strip{background:#FFCB47}
[data-category="green"] .card-strip{background:#5CD4A0}
[data-category="purple"] .card-strip{background:#9B7FE6}
.card-title{font-family:'Nunito',sans-serif;font-weight:700;font-size:1.3rem;color:#2D3142;letter-spacing:-0.01em;padding:20px 20px 8px}
.card-text{font-family:'DM Sans',sans-serif;font-weight:400;font-size:0.95rem;color:#4A4E69;line-height:1.6;padding:0 20px 8px}
.difficulty{display:flex;gap:4px;padding:12px 20px 20px}
.dot{width:8px;height:8px;border-radius:50%}
[data-category="pink"] .dot{background:#FF6B8A}
[data-category="blue"] .dot{background:#5B9CF5}
[data-category="yellow"] .dot{background:#FFCB47}
[data-category="green"] .dot{background:#5CD4A0}
[data-category="purple"] .dot{background:#9B7FE6}

.site-footer{padding:40px 24px;text-align:center}
.footer-text{font-family:'DM Sans',sans-serif;font-size:0.75rem;color:#4A4E69;letter-spacing:0.04em}

@media(max-width:768px){
    .masonry{columns:1}
    .hero-title{font-size:2.4rem}
}