*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;line-height:1.6}body{background:#0E0B1F;color:#C0C0C0;font-family:'Inter',sans-serif}
.container{max-width:960px;margin:0 auto;padding:0 24px}
.site-header{text-align:center;padding:48px 24px}
.logo{font-family:'Space Mono',monospace;font-size:2rem;font-weight:700;color:#7B6FBF}.dot{color:#4A3F8A}
.hero{text-align:center;padding:40px 0;border-bottom:1px solid #1A1040}
.hero h2{font-size:1.6rem;color:#7B6FBF;margin-bottom:10px}
.hero p{color:#C0C0C0;max-width:540px;margin:0 auto;font-size:0.9rem}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:40px 0}
.work-card{background:#1A1040;border:1px solid #4A3F8A;border-radius:8px;padding:20px;opacity:0;transform:translateY(16px);transition:all 400ms ease-out}
.work-card.visible{opacity:1;transform:translateY(0)}
.work-card:hover{border-color:#7B6FBF;box-shadow:0 4px 20px rgba(123,111,191,0.15)}
.work-tag{font-family:'Space Mono',monospace;font-size:0.6rem;color:#4A3F8A;letter-spacing:0.12em}
.work-card h3{font-size:1rem;color:#7B6FBF;margin:8px 0 4px}
.work-card p{font-size:0.8rem;color:#C0C0C0;opacity:0.7}
.about{padding:40px 0;text-align:center;border-top:1px solid #1A1040}
.about h2{font-size:1.3rem;color:#7B6FBF;margin-bottom:10px}
.about p{color:#C0C0C0;max-width:500px;margin:0 auto;font-size:0.85rem}
.site-footer{text-align:center;padding:24px;color:#4A3F8A;font-size:0.8rem}
@media(max-width:600px){.work-grid{grid-template-columns:1fr}}