* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #15120f; }
::selection { background: #3f72e3; color: #f4f7ff; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #15120f; }
::-webkit-scrollbar-thumb { background: #3a2f25; border-radius: 6px; border: 3px solid #15120f; }

.langbar { position: fixed; top: 16px; right: 24px; z-index: 200; display: flex; gap: 4px; padding: 5px; background: rgba(18,14,11,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(239,232,222,0.14); border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.langbar a { text-decoration: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: none; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; transition: all .2s ease; background: transparent; color: rgba(239,232,222,0.55); }
.langbar a.active { background: #3f72e3; color: #f4f7ff; }

.contact-link { text-decoration: none; color: #efe8de; border-bottom: 2px solid #3f72e3; padding-bottom: 4px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(18px, 2.4vw, 28px); transition: color .2s; }
.contact-link:hover { color: #3f72e3; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 44px; }

.hero { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 50px; align-items: end; padding: 40px 0 70px; border-bottom: 1px solid rgba(239,232,222,0.12); animation: fadeUp .5s ease both; }
.hero-photo { border-radius: 6px; overflow: hidden; border: 1px solid rgba(239,232,222,0.12); }
.hero-photo img { display: block; width: 100%; height: auto; }

.skills-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; }
.project-row { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 30px; align-items: center; padding: 34px 0; border-top: 1px solid rgba(239,232,222,0.12); }

@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  .hero { grid-template-columns: 1fr; gap: 32px; align-items: start; padding: 28px 0 48px; }
  .hero-photo { max-width: 300px; }
  .skills-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .project-shot { order: 3; }
}