*,:before,:after{box-sizing:border-box}body{margin:0;padding:0}:root{--bg-primary:#050505;--bg-secondary:#0a0a0a;--card-bg:#0f0f1499;--text-primary:#fff;--text-secondary:#a1a1aa;--accent:#cfb5ff;--accent-glow:#cfb5ff66;--border-color:#ffffff0f;--card-hover-bg:#19191ecc;--transition:all .4s cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 50% -20%,#1a1a2e 0%,#050505 80%) fixed;min-height:100vh;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}.container{z-index:1;max-width:1000px;margin:0 auto;padding:80px 20px;position:relative}.hero{align-items:center;gap:24px;margin-bottom:80px;display:flex}.avatar-wrapper{flex-shrink:0;width:100px;height:100px;position:relative}.avatar-frame{background-color:#111;border:4px solid #ffffff1a;border-radius:50%;width:100%;height:100%;transition:all .4s;overflow:hidden;box-shadow:0 0 20px #00000080,0 0 10px #ffffff0d}.avatar{background-position:50%;background-size:cover;width:100%;height:100%;transition:all .4s}.avatar-wrapper:hover .avatar-frame{border-color:#fff3;transform:scale(1.05);box-shadow:0 0 30px #0009,0 0 20px #ffffff1a}.avatar-wrapper:hover .avatar{transform:scale(1.1)}.status-dot{z-index:10;border:4px solid #141424;border-radius:50%;width:24px;height:24px;position:absolute;top:2px;right:2px;box-shadow:0 2px 4px #0003}.hero-info h1{letter-spacing:-2px;background:linear-gradient(135deg,#fff 0%,#a1a1aa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:56px;font-weight:900}.hero-info p{color:var(--text-secondary);margin:4px 0 0;font-size:18px}.bento-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(180px,auto);gap:20px;display:grid}.bento-card{background-color:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);transition:var(--transition);color:inherit;border-radius:24px;padding:24px;text-decoration:none;display:block;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d}.bento-card:hover{background-color:var(--card-hover-bg);box-shadow:inset 0 1px 0 0 #ffffff1a, 0 12px 40px #0006, 0 0 20px var(--accent-glow);border-color:#ffffff1a;transform:translateY(-4px)}.card-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;display:flex}.card-title:before{content:"";background-color:var(--accent);width:8px;height:8px;box-shadow:0 0 10px var(--accent);border-radius:50%;display:block}.card-content h3{margin:0 0 8px;font-size:24px}.card-content p{color:var(--text-secondary);margin:0;font-size:15px}.large{grid-area:span 2/span 2}.wide{grid-column:span 2}.tall{grid-row:span 2}.badge-row{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.badge{color:var(--text-secondary);background-color:#ffffff0d;border-radius:6px;padding:4px 10px;font-size:12px;display:inline-block}.slider-card{flex-direction:column;display:flex}.slider-content{flex-direction:column;justify-content:space-between;height:100%;display:flex}.project-slide h3{margin-bottom:8px}.slider-btn{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;transition:var(--transition);background:0 0;border-radius:8px;width:fit-content;margin-top:20px;padding:8px 16px;font-size:13px}.slider-btn:hover{background:#ffffff0d;border-color:#fff3}.skills-tags{flex-wrap:wrap;gap:10px;margin-top:8px;display:flex}.skill-tag{color:var(--text-secondary);transition:var(--transition);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:6px 14px;font-size:13px}.skill-tag:hover{border-color:var(--accent);color:#fff;background:#cfb5ff26;transform:translateY(-2px)}.stat-number{background:linear-gradient(135deg,#cfb5ff 0%,#fff 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:900;margin-bottom:0!important;font-size:36px!important}.footer{text-align:center;color:var(--text-secondary);margin-top:100px;padding-bottom:40px;font-size:14px}@media (width<=800px){.bento-grid{grid-template-columns:1fr}.large,.wide,.tall{grid-area:span 1/span 1}.hero{text-align:center;flex-direction:column;gap:16px}.hero-info h1{font-size:42px}}
