/* munju.club */
/* Colors: #0a0a0a, #ff2d78, #8b5cf6, #84ff57, #22d3ee, #ff8c38, #f5f5f5, #888888 */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.7; background: #0a0a0a; color: #f5f5f5; overflow-x: hidden; }
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; position: relative; background: #0a0a0a; }
.hero-glow { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 45, 120, 0.25) 0%, transparent 70%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); animation: glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -60%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } }
.hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 12vw, 8rem); color: #f5f5f5; letter-spacing: 0.06em; position: relative; z-index: 1; opacity: 0; animation: fadeIn 0.8s 0.3s ease forwards; }
.hero-dot { color: #ff2d78; }
.hero-sub { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: #888888; letter-spacing: 0.08em; margin-top: 12px; position: relative; z-index: 1; opacity: 0; animation: fadeIn 0.8s 0.8s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.zone { padding: 80px 40px; max-width: 900px; margin: 0 auto; }
.zone-label { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #888888; letter-spacing: 0.1em; margin-bottom: 24px; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bento-cell { border-radius: 16px; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bento-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.cell-pink { background: linear-gradient(135deg, rgba(255, 45, 120, 0.15), rgba(255, 45, 120, 0.05)); }
.cell-purple { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); }
.cell-green { background: linear-gradient(135deg, rgba(132, 255, 87, 0.12), rgba(132, 255, 87, 0.03)); }
.cell-cyan { background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.03)); }
.cell-orange { background: linear-gradient(135deg, rgba(255, 140, 56, 0.15), rgba(255, 140, 56, 0.05)); }
.cell-tall { grid-row: span 2; }
.cell-wide { grid-column: span 2; }
.cell-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em; margin-bottom: 8px; }
.cell-pink .cell-title { color: #ff2d78; }
.cell-purple .cell-title { color: #8b5cf6; }
.cell-green .cell-title { color: #84ff57; }
.cell-cyan .cell-title { color: #22d3ee; }
.cell-orange .cell-title { color: #ff8c38; }
.cell-desc { font-size: 14px; color: #888888; }
.cell-tag { display: inline-block; margin-top: 14px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #f5f5f5; opacity: 0.5; letter-spacing: 0.04em; }
.site-footer { text-align: center; padding: 60px 40px; }
.footer-pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff2d78; box-shadow: 0 0 12px rgba(255, 45, 120, 0.5); margin-bottom: 16px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255, 45, 120, 0.3); } 50% { box-shadow: 0 0 24px rgba(255, 45, 120, 0.7); } }
.site-footer p { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #888888; letter-spacing: 0.08em; }
@media (max-width: 768px) { .bento { grid-template-columns: 1fr; } .cell-tall { grid-row: span 1; } .cell-wide { grid-column: span 1; } .zone { padding: 60px 24px; } }