*{box-sizing:border-box}body,html,#root{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:transparent}.app{min-height:100vh;background:linear-gradient(to bottom,#30302f,#000);color:#1e293b}.header{background:#111827;color:#fff;padding:16px;position:sticky;top:0;z-index:50;box-shadow:0 10px 25px -10px #00000080}.header-inner{max-width:1024px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;margin:0}.nav{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.nav-link{text-decoration:none;font-size:1rem;color:#f1f5f9;position:relative}.nav-link:hover{color:#ff0}.main-container{max-width:1024px;margin:24px auto;padding:0 12px}.section{background:#ffffffe6;padding:32px;border:1px solid #d1d5db;border-radius:10px;box-shadow:0 15px 30px -10px #00000026;margin-bottom:24px;transition:background 1.5s ease,box-shadow .3s ease;overflow:hidden}.section:hover{background-image:radial-gradient(#797979,#151515);box-shadow:0 25px 45px -10px #0006}.section-title{font-size:2rem;font-weight:700;margin:0 0 16px;text-align:center;color:#1f2937;transition:color .3s ease}.section:hover .section-title{color:#fff}.section-content{text-align:center;color:#4b5563;transition:color .3s ease}.section:hover .section-content{color:#fff}.about-wrapper{display:flex;flex-direction:column;align-items:center}.avatar{width:128px;height:128px;border-radius:50%;overflow:hidden;border:4px solid #282829;box-shadow:0 15px 30px -5px #00000059;margin-bottom:16px;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}.about-text{max-width:768px;font-size:1.125rem;line-height:1.4;margin:0}.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}@media (min-width: 640px){.skills-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 768px){.skills-grid{grid-template-columns:repeat(4,1fr)}}.skill-card{padding:16px;background:#fff;border-radius:16px;box-shadow:0 10px 25px -10px #0003;text-align:center;transition:transform .3s ease,color .3s ease;cursor:default}.skill-card:hover{transform:scale(1.05);color:#000}.skill-logo{width:64px;height:64px;display:block;margin:0 auto 8px;object-fit:contain}.skill-name{font-size:1.125rem;font-weight:500;margin:0}.projects-list{display:flex;flex-direction:column;gap:8px;font-size:1.25rem}.project-link{text-decoration:double;color:#000;word-break:break-word}.project-link:hover{text-decoration:double;color:#ff0}.contact-info{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:1.125rem}.email{margin-bottom:4px;color:#000;font-size:18px}.email-link{font-weight:600;text-decoration:none;color:#000}.email-link:hover{color:#ff0}.socials{display:flex;gap:16px}.social-link{text-decoration:none;font-size:1rem;color:#000}.social-link:hover{text-decoration:solid;color:#ff0}