:root{--bg-color:#e0e0e0;--light-shadow:#fff;--dark-shadow:#bebebe;--text-color:#444;--muted:#777;--fb-color:#1877F2;--ig-color:#E4405F;--yt-color:#FF0000}
*{box-sizing:border-box}
body{background:var(--bg-color);font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;margin:0;color:var(--text-color);min-height:100vh;line-height:1.6}
a{color:inherit}
.wrap{width:92%;max-width:900px;margin:0 auto;padding:24px 0 50px}

/* Navigation */
.nav{display:flex;gap:14px;overflow-x:auto;padding:14px 16px 22px;margin:0 -16px}
.nav a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:500;font-size:.9rem;background:var(--bg-color);box-shadow:5px 5px 10px var(--dark-shadow),-5px -5px 10px var(--light-shadow);transition:.2s;white-space:nowrap}
.nav a:active,.nav a.active{box-shadow:inset 4px 4px 8px var(--dark-shadow),inset -4px -4px 8px var(--light-shadow)}
.nav a.active{font-weight:700}

/* Cards */
.card{background:var(--bg-color);border-radius:30px;padding:36px 30px;margin-bottom:30px;box-shadow:20px 20px 60px var(--dark-shadow),-20px -20px 60px var(--light-shadow)}
.card.center{text-align:center}
h1,h2,h3{margin:0 0 10px}
h1{font-size:2rem}
p{color:var(--muted);margin:0 0 16px}
.profile-img{width:150px;height:150px;border-radius:24px;margin:0 auto 22px;padding:6px;box-shadow:8px 8px 16px var(--dark-shadow),-8px -8px 16px var(--light-shadow);overflow:hidden}
.profile-img img{width:100%;height:100%;object-fit:cover;border-radius:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:600;color:var(--text-color);background:var(--bg-color);box-shadow:6px 6px 12px var(--dark-shadow),-6px -6px 12px var(--light-shadow);transition:.2s;margin:4px}
.btn:active{box-shadow:inset 4px 4px 8px var(--dark-shadow),inset -4px -4px 8px var(--light-shadow)}

/* Inset items & grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.tile{border-radius:20px;padding:24px;background:var(--bg-color);box-shadow:6px 6px 12px var(--dark-shadow),-6px -6px 12px var(--light-shadow)}
.tile i.big{font-size:1.6rem;margin-bottom:12px;display:block}
.inset{border-radius:15px;padding:14px 18px;background:var(--bg-color);box-shadow:inset 6px 6px 12px var(--dark-shadow),inset -6px -6px 12px var(--light-shadow);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.bar{height:12px;border-radius:10px;box-shadow:inset 3px 3px 6px var(--dark-shadow),inset -3px -3px 6px var(--light-shadow);margin:6px 0 18px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:10px;background:#8a8a8a}
.timeline .item{border-left:3px solid var(--dark-shadow);padding:0 0 22px 20px}
.timeline small{color:var(--muted)}

/* Social & contact */
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.social-box{aspect-ratio:1/1;border-radius:15px;background:var(--bg-color);box-shadow:6px 6px 12px var(--dark-shadow),-6px -6px 12px var(--light-shadow);display:flex;align-items:center;justify-content:center;font-size:1.5rem;text-decoration:none;transition:.3s}
.fb:hover{color:var(--fb-color)}.ig:hover{color:var(--ig-color)}.yt:hover{color:var(--yt-color)}
.social-box:active{box-shadow:inset 4px 4px 8px var(--dark-shadow),inset -4px -4px 8px var(--light-shadow);transform:scale(.95)}
.info-item{display:flex;align-items:center;justify-content:center;gap:15px;margin:15px 0}
footer{text-align:center;color:var(--muted);font-size:.85rem}
a:focus-visible{outline:2px solid #888;outline-offset:3px}
@media(max-width:480px){.card{padding:28px 20px}h1{font-size:1.6rem}}