:root { --bg:#000; --card:#111; --text:#fff; --muted:#a8a8a8; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:70px; }
body { background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.6; }
a { color:inherit; }

/* Navigation */
.navbar { position:fixed; inset:0 0 auto 0; z-index:1000; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.1); }
.nav-container { max-width:1200px; margin:0 auto; padding:1rem 2rem; display:flex; gap:3rem; }
.nav-link { text-decoration:none; font-weight:500; transition:color .3s; }
.nav-link:hover { color:var(--muted); }
.nav-item { position:relative; }
.nav-item::after { content:''; position:absolute; top:100%; left:0; width:100%; height:20px; }
.has-dropdown::after { content:'▼'; font-size:.7em; margin-left:5px; vertical-align:middle; }
.dropdown-content { display:none; position:absolute; top:100%; left:0; min-width:160px; background:rgba(0,0,0,.9); border-radius:4px; box-shadow:0 8px 16px rgba(0,0,0,.2); }
.nav-item:hover .dropdown-content, .nav-item.active .dropdown-content { display:block; }
.dropdown-content a { display:block; padding:12px 16px; text-decoration:none; }
.dropdown-content a:hover { background:rgba(255,255,255,.1); }

/* Hero */
/* The background lives on a fixed layer; main.js blurs and shifts it while scrolling */
.hero-bg { position:fixed; inset:0; z-index:-1; will-change:transform,filter;
  background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.8)), url('https://i.imgur.com/zrP02A8.jpg') center/cover no-repeat; }
#home { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-top:80px; text-align:center; }
/* The page is transparent: the artwork stays visible behind everything, no black block */
.page { position:relative; }
.content p, .content li, .content h1, .content h2 { text-shadow:0 1px 8px rgba(0,0,0,.7); }
h1 { font-size:3.5rem; font-weight:700; margin-bottom:1rem; }
#home h1, #home p { text-shadow:2px 2px 4px rgba(0,0,0,.5); }
#home p { font-size:1.2rem; }

/* Content */
.content { max-width:1100px; margin:0 auto; padding:4rem 2rem; }
.content p, .content ul { margin-bottom:1.5rem; }
.content ul { padding-left:1.5rem; }
.content h2 { font-size:2.5rem; margin:3rem 0 1.5rem; }
.center { text-align:center; margin:3rem 0; }

/* Project cards */
.project-card { background:rgba(10,10,10,.72); border-radius:12px; overflow:hidden; margin-bottom:3rem; box-shadow:0 4px 6px rgba(0,0,0,.1); }
.project-info { padding:1.5rem; }
.project-info h3 { font-size:1.25rem; margin-bottom:.5rem; }
.content .project-info p { color:var(--muted); font-size:.9rem; margin-bottom:.25rem; }
.media { position:relative; aspect-ratio:16/9; background:#000; }
.media img, .media video, .media iframe { display:block; width:100%; height:100%; border:0; }
.media img { object-fit:cover; }
.media video { object-fit:contain; }
.placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; border:2px dashed rgba(255,255,255,.2); }

/* Slideshow */
.slide { display:none; position:absolute; inset:0; }
.slide.active { display:block; }
.prev, .next { position:absolute; top:50%; transform:translateY(-50%); z-index:2; padding:16px; border:0; cursor:pointer; color:#fff; font-size:18px; font-weight:700; background:rgba(0,0,0,.4); transition:background .3s; }
.prev { left:0; border-radius:0 3px 3px 0; }
.next { right:0; border-radius:3px 0 0 3px; }
.prev:hover, .next:hover { background:rgba(0,0,0,.8); }
.dots { position:absolute; bottom:0; width:100%; padding:10px 0; text-align:center; background:rgba(0,0,0,.5); z-index:2; pointer-events:none; }
.dot { pointer-events:auto; cursor:pointer; width:8px; height:8px; margin:0 4px; padding:0; border:0; border-radius:50%; background:#bbb; }
.dot.active, .dot:hover { background:#fff; }
.prev:focus-visible, .next:focus-visible, .dot:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Contact */
#contact { padding:4rem 2rem; text-align:center; background:rgba(10,10,10,.6); backdrop-filter:blur(8px); }
#contact h2 { font-size:2.5rem; margin-bottom:2rem; }
#contact a[href*="linkedin"] { text-decoration:underline; }
#contact a:hover { color:var(--muted); }
.contact-photo { width:150px; height:150px; margin-top:2rem; border-radius:50%; border:2px solid #fff; object-fit:cover; box-shadow:0 4px 6px rgba(0,0,0,.3); }

@media (max-width:768px) {
  h1 { font-size:2.5rem; }
  .nav-container { padding:1rem; gap:1.5rem; }
  .content h2 { font-size:2rem; }
}