#Projects{background-color:beige}:root{--bg-1: #06070a;--bg-2: #071426;--accent-1: #5ee3c7;--accent-2: #4aa0ff;--muted: #9aa6b2;--card: rgba(255,255,255,.04);--glass: rgba(255,255,255,.06);--glass-2: rgba(255,255,255,.03);--radius: 12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial}body{background:linear-gradient(120deg,var(--bg-1),var(--bg-2));color:#e6eef7;line-height:1.5}.app-root{min-height:100vh;display:flex;flex-direction:column}.sand-canvas{display:none}.site-header,.hero,.projects,.experience,.about,.contact,.site-footer{position:relative;z-index:10}.site-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:linear-gradient(180deg,#0a0e1899,#0a0e1859);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:40}.site-header .brand{font-weight:700;font-size:1.1rem;color:var(--accent-1)}.site-header .nav button{margin-left:12px;background:transparent;border:1px solid var(--glass);color:inherit;padding:8px 12px;border-radius:8px;cursor:pointer}.site-header .nav button:hover{background:var(--glass)}.buy-coffee{margin-left:12px;text-decoration:none;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#071126;font-weight:600}.buy-coffee.large{display:inline-block;padding:12px 18px;font-size:1rem}.hero{padding:64px 20px 48px}.hero-inner{max-width:1200px;margin:0 auto;display:flex;gap:28px;align-items:center}.hero-photo{width:160px;height:160px;border-radius:18px;object-fit:cover;box-shadow:0 20px 40px #02061799;border:1px solid var(--glass)}.hero-copy h1{margin:0;font-size:2.2rem}.lead{color:var(--muted);margin-top:8px}.hero-ctas{margin-top:16px;display:flex;gap:12px}.btn{padding:10px 16px;border-radius:10px;border:0;cursor:pointer}.btn.primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#071126}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#02060ecc;display:flex;align-items:center;justify-content:center;z-index:60}.modal-card{background:linear-gradient(180deg,#0a1016fa,#080c12f2);padding:22px;border-radius:12px;max-width:720px;width:100%;box-shadow:0 30px 80px #020617e6;position:relative;transform:translateY(12px);opacity:0;animation:modalPop .36s cubic-bezier(.2,.9,.2,1) forwards}.modal-close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer}.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:inherit}@keyframes modalPop{0%{transform:translateY(18px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.socials{margin-top:12px;display:flex;gap:12px;justify-content:center}.socials a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.03)}.socials a:hover{color:var(--accent-2);border-color:#4aa0ff33}.btn.outline{background:transparent;border:1px solid var(--glass);color:inherit}.tech-badges{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}.tech-badges span{background:var(--glass-2);padding:6px 8px;border-radius:8px;font-size:.85rem;color:var(--muted)}.btn{position:relative;overflow:hidden}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:#ffffff59;animation:ripple .6s linear}@keyframes ripple{to{transform:scale(4);opacity:0}}.btn.primary{transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s}.btn.primary:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 18px 36px #2ec5991f}.nav .btn{transition:transform .3s ease,box-shadow .3s}.nav .btn:hover{transform:translateY(-4px);box-shadow:0 12px 24px #02061773}.container{max-width:1100px;margin:0 auto;padding:0 20px}.projects{padding:36px 0}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}.card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:0 8px 30px #02061799}.card{transition:transform .3s cubic-bezier(.2,.9,.2,1),box-shadow .3s}.card:hover{transform:translateY(-10px);box-shadow:0 26px 50px #020617b3}.project-card h3{margin:0 0 6px}.muted{color:var(--muted);font-size:.85rem;margin-bottom:8px}.card .card-actions{margin-top:12px}.link{color:var(--accent-2);text-decoration:underline}.experience{padding:28px 0}.exp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.mobile{padding:28px 0}.mock-phones{display:flex;gap:14px;margin-top:12px}.phone{width:200px;height:360px;border-radius:22px;background:linear-gradient(180deg,#ffffff05,#ffffff03);display:flex;align-items:center;justify-content:center;color:var(--muted)}.about{padding:36px 0}.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.about-bio p{margin-top:8px}.about-skills ul{margin:8px 0;padding-left:18px}.contact{padding:36px 0}.contact-inner{display:flex;gap:20px;align-items:flex-start}.contact-form label{display:block;margin-bottom:10px}.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--glass);background:transparent;color:inherit}.form-actions{display:flex;justify-content:flex-end;margin-top:10px}.site-footer{padding:28px;text-align:center;color:var(--muted)}@media (max-width:800px){.hero-inner{flex-direction:column;align-items:center;text-align:center}.contact-inner{flex-direction:column}.site-header{padding:14px}.about-grid{grid-template-columns:1fr}}.project-card.low-level{border-left:4px solid #f7a072}.project-card.work{border-left:4px solid #7bd389}.project-card.mobile{border-left:4px solid #6ec1ff}
