html {
  scroll-behavior: smooth;
}

:root{--bg:#0b0d10;--panel:#121418;--muted:#15181d;--text:#f5f6f7;--sub:#b7bcc4;--border:#232730;--shadow:0 18px 50px rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:radial-gradient(900px 600px at 10% -10%, #12151b, var(--bg));color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.62}
a{color:inherit;text-decoration:none}.container{width:100%;max-width:1120px;margin:0 auto;padding:0 14px}
.nav{position:sticky;top:0;z-index:50;background:rgba(16,18,21,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.brand{font-weight:700;letter-spacing:.2px}
.section{padding:28px 0}.section h2{margin:0 0 6px;text-align:center}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}.reveal.show{opacity:1;transform:none}
.grid{display:grid;gap:14px}@media(min-width:960px){.grid{grid-template-columns:1fr 1fr}}

/* Card + hover overlay */
.card{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#2b3039}
.card .media{aspect-ratio:16/9;background:#0e1014;position:relative;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .18s ease, transform .18s ease;will-change:filter,transform}
.card:hover .media img{filter:brightness(0.55);transform:scale(1.01)}
.hover-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(40% 40% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.6));opacity:0;transition:opacity .18s ease}
.card:hover .hover-overlay{opacity:1}
.hover-title{font-weight:700;letter-spacing:.4px;text-transform:uppercase;text-align:center;line-height:1.25;font-size:clamp(14px,2.4vw,22px);color:#f5f6f7;padding:10px 14px;border-radius:6px}

/* Project page */
.title-wrap{text-align:center;margin:10px 0 6px}.title-wrap h1{font-size:clamp(26px,4.6vw,44px);margin:0}
.subtitle{color:var(--sub);margin-top:4px}.meta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:8px 0;color:var(--sub)}
.description{color:var(--sub);font-size:1.05rem;line-height:1.78;margin:10px auto 18px;max-width:85ch;text-align:center}

/* Centered media */
.figure{display:flex;justify-content:center;margin:14px 0}
.figure-inner{width:100%;max-width:900px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--muted);box-shadow:var(--shadow)}
.figure-inner img,.figure-inner video{width:100%;height:auto;display:block}

/* Embedded PDF */
.pdf-wrap{display:flex;justify-content:center;margin:14px 0}
.pdf-frame{width:100%;max-width:1000px;height:min(1400px,90vh);border:0;background:#0e1014;border-radius:10px;box-shadow:var(--shadow);border:1px solid var(--border)}

.btn-linkedin{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--border);
  border-radius:999px; color:#cfe6ff; background:#0f1a24;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  margin:6px;}
.btn-linkedin:hover{ transform:translateY(-1px); border-color:#2a66a3; background:#102133; }


.footer{margin-top:36px;border-top:1px solid var(--border)}.footer-inner{display:flex;align-items:center;justify-content:center;padding:12px 0;color:#9ea3ac}

/* Contact buttons */
.btn-contact, .btn-linkedin {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; border:1px solid var(--border);
  background:#0f1a24; color:#cfe6ff; font-weight:500;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  text-decoration:none; margin:6px;
}
.btn-contact:hover, .btn-linkedin:hover, {
  transform:translateY(-1px); border-color:#2a66a3; background:#142438;
}

:root{
  --bg:#0b0d10; --panel:#121418; --muted:#15181d;
  --text:#f5f6f7; --sub:#b7bcc4; --border:#232730;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(900px 600px at 10% -10%, #12151b, var(--bg));
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.62;
}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 14px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(16,18,21,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.brand{font-weight:700;letter-spacing:.2px}

/* Sections / reveal */
.section{padding:28px 0}
.section h2{margin:0 0 6px;text-align:center}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Grid of cards */
.grid{display:grid;gap:14px}
@media(min-width:960px){.grid{grid-template-columns:1fr 1fr}}

/* Card + hover overlay */
.card{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#2b3039}
.card .media{aspect-ratio:16/9;background:#0e1014;position:relative;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .18s ease, transform .18s ease;will-change:filter,transform}
.card:hover .media img{filter:brightness(0.55);transform:scale(1.01)}
.hover-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(40% 40% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.6));opacity:0;transition:opacity .18s ease}
.card:hover .hover-overlay{opacity:1}
.hover-title{font-weight:700;letter-spacing:.4px;text-transform:uppercase;text-align:center;line-height:1.25;font-size:clamp(14px,2.4vw,22px);color:#f5f6f7;padding:10px 14px;border-radius:6px}

/* Project page layout */
.title-wrap{text-align:center;margin:10px 0 6px}
.title-wrap h1{font-size:clamp(26px,4.6vw,44px);margin:0}
.subtitle{color:var(--sub);margin-top:4px}
.meta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:8px 0;color:var(--sub)}
.description{color:var(--sub);font-size:1.05rem;line-height:1.78;margin:10px auto 18px;max-width:85ch;text-align:center}

/* Centered media (not full width) */
.figure{display:flex;justify-content:center;margin:14px 0}
.figure-inner{width:100%;max-width:900px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--muted);box-shadow:var(--shadow)}
.figure-inner img,.figure-inner video{width:100%;height:auto;display:block}

/* Embedded PDF (RhythmRush) */
.pdf-wrap{display:flex;justify-content:center;margin:14px 0}
.pdf-frame{width:100%;max-width:1000px;height:min(1400px, 90vh);border:0;background:#0e1014;border-radius:10px;box-shadow:var(--shadow);border:1px solid var(--border)}

/* Contact buttons */
.btn-contact, .btn-linkedin{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; border:1px solid var(--border);
  background:#0f1a24; color:#cfe6ff; font-weight:500;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  text-decoration:none; margin:6px;
}
.btn-contact:hover, .btn-linkedin:hover{
  transform:translateY(-1px); border-color:#2a66a3; background:#142438;
}

/* Hero / Landing */
.hero{
  padding: 42px 0 18px;
  border-bottom:1px solid var(--border);
  background: radial-gradient(1200px 800px at 80% -10%, #151822, var(--bg));
}
.hero-grid{ display:grid; gap:18px; align-items:center; grid-template-columns: 1.2fr 0.8fr; }
@media (max-width:900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-copy h1{ font-size: clamp(28px, 5vw, 54px); margin:0 0 8px; }
.lead{ color: var(--sub); max-width: 62ch; }
.hero-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.btn-ghost{ border:1px solid var(--border); padding:10px 14px; border-radius:999px; color:#e9ecf2; background:#0f1217; transition:.12s; }
.btn-ghost:hover{ transform:translateY(-1px); border-color:#2b3039; background:#141821; }
.hero-photo{ border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#0f1217; }
.hero-photo img{ width:100%; height:auto; display:block; }
.scroll-hint{ margin-top:10px; color:var(--sub); opacity:.9; }

/* Fade-in projects */
.faded-start{ opacity:.4; transition: opacity .3s ease; }

/* Back-to-top button */
#backToTop{
  position:fixed; right:16px; bottom:16px; z-index:9999; display:none;
  padding:10px 12px; border-radius:999px; border:1px solid var(--border);
  background:#111722; color:#e9f0ff; cursor:pointer; box-shadow:var(--shadow);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
#backToTop:hover{ transform:translateY(-1px); background:#131c2b; border-color:#2a66a3; }

/* Electronics page intro */
.elx-hero{ padding:22px 0 12px; border-bottom:1px solid var(--border); background: radial-gradient(1000px 700px at 90% -10%, #171a24, var(--bg)); }
.elx-grid{ display:grid; gap:18px; align-items:center; grid-template-columns: 1.1fr 0.9fr; }
@media (max-width:880px){ .elx-grid{ grid-template-columns:1fr; } }
.elx-copy h1{ font-size:clamp(26px,4.6vw,44px); margin:0 0 6px; }
.elx-lead{ color:var(--sub); max-width:70ch; }
.elx-photo{ border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#0f1217; }
.elx-photo img{ width:100%; height:auto; display:block; }

/* Footer */
.footer{margin-top:36px;border-top:1px solid var(--border)}
.footer-inner{display:flex;align-items:center;justify-content:center;padding:12px 0;color:#9ea3ac}