.hero {
  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.1);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,0.15), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.btn { display:inline-block; padding:.9rem 1.2rem; border-radius:9999px; background:#00e0ff; color:#001015; font-weight:600; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background: url("./assets/images/hero-fallback.jpg") center/cover no-repeat; }
}
@media (max-width: 640px) {
  .hero { min-height: 70vh; }
}
:root{
  --bg:#0a0f14; --panel:#111823; --card:#151d29; --muted:#9fb0c6;
  --text:#ecf2f8; --acc:#70e6d0; --acc2:#7aa2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#05080c 0%, #0d1520 60%, #0a0f14 100%); color:var(--text);
}
img{max-width:100%; display:block}

/* Layout */
main{display:grid; grid-template-columns:300px 1fr; gap:24px; padding:24px}
@media (max-width:980px){ main{grid-template-columns:1fr} }

/* Sidebar */
.sidebar{background:var(--panel); border:1px solid #1c2736; border-radius:16px; padding:20px; position:sticky; top:24px; height:fit-content}
.sidebar .avatar-box img{border-radius:12px; border:2px solid #223047}
.name{margin:8px 0 6px; font-size:1.25rem}
.title{color:var(--muted); font-size:.8rem}
.info_more-btn{margin-top:12px; width:100%; background:#172131; color:var(--text); border:1px solid #243246; padding:10px 12px; border-radius:10px; display:flex; align-items:center; gap:8px; cursor:pointer}
.sidebar-info_more{margin-top:16px}
.separator{height:1px; background:#223047; margin:16px 0}
.contacts-list,.social-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.icon-box{width:36px; height:36px; display:grid; place-items:center; background:#1a2435; border-radius:10px}
.contact-item{display:flex; gap:12px; align-items:center}
.contact-title{margin:0; font-size:.75rem; color:var(--muted)}
.contact-link,address{color:var(--text); text-decoration:none; font-size:.9rem}
.social-list{grid-auto-flow:column; justify-content:start; gap:14px}
.social-link{display:grid; place-items:center; width:36px;height:36px; background:#1a2435; border-radius:10px; color:var(--text)}

/* Brain hero */
#neuro-hero{position:relative; height:56vh; min-height:420px; background:
 radial-gradient(1200px 500px at 20% 120%, #15243a 0%, transparent 60%),
 radial-gradient(900px 380px at 90% -10%, #1b2d4a 0%, transparent 55%),
 linear-gradient(180deg,#0b1420 0%,#0a0f14 100%);
 border:1px solid #1b283b; border-radius:16px; overflow:hidden}
.neuro-copy{position:absolute; z-index:2; inset:auto 0 0 0; padding:28px; background:linear-gradient(180deg,transparent,rgba(6,10,16,.65))}
.neuro-copy h2{font-size:2.1rem; margin:0 0 6px; letter-spacing:.2px}
.neuro-copy p{margin:0 0 16px; color:var(--muted)}
#brain-canvas{position:absolute; inset:0; width:100%; height:100%}
.btn{display:inline-flex; gap:8px; align-items:center; padding:10px 16px; border-radius:10px; border:1px solid #1b2b42; background:#121c2a; color:var(--text); cursor:pointer}
.btn.cta{background:linear-gradient(135deg,var(--acc), var(--acc2)); color:#081018; font-weight:600; border:0}
.btn:hover{filter:brightness(1.05)}

/* Navbar */
.navbar{margin-top:22px; background:var(--panel); border:1px solid #1c2736; border-radius:12px; padding:8px}
.navbar-list{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.navbar-link{padding:10px 14px; background:#121b2a; border:1px solid #243246; color:var(--text); border-radius:10px; cursor:pointer}
.navbar-link.active,.navbar-link:hover{background:linear-gradient(180deg,#16243a,#0f1928); border-color:#33507a}

/* Articles */
.main-content article{margin-top:18px; background:var(--panel); border:1px solid #1c2736; border-radius:16px; padding:20px}
.h2.article-title{font-size:1.6rem; margin:0 0 10px; border-bottom:2px solid var(--acc); display:inline-block; padding-bottom:.25rem}
.about-text h3{color:var(--acc); margin-top:1.2rem; border-bottom:2px solid var(--acc); padding-bottom:.3rem}
.about-text ul{margin-left:1.2rem; list-style:disc}
.about-text p.highlight{color:var(--acc)}

/* Portfolio */
.filter-list{display:flex; gap:8px; list-style:none; padding:0; margin:0 0 12px}
.filter-select-box{display:none} /* simple */
.project-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:1100px){ .project-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .project-list{grid-template-columns:1fr} }
.project-item{background:var(--card); border:1px solid #1e2a3d; border-radius:14px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease}
.project-img{position:relative; overflow:hidden}
.project-img img{width:100%; height:200px; object-fit:cover; filter:saturate(1.05) contrast(1.05)}
.project-item-icon-box{position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(0,0,0,.45); backdrop-filter:blur(4px)}
.project-title{margin:10px 12px 4px}
.project-category{margin:0 12px 12px; color:var(--muted); font-size:.9rem}
.project-item:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Blog */
.blog-posts-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:900px){ .blog-posts-list{grid-template-columns:1fr} }
.blog-banner-box img{height:200px; object-fit:cover; border-radius:10px}
.blog-content{padding:10px 0}
.blog-meta{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.85rem}
.dot{width:6px; height:6px; background:#35507a; display:inline-block; border-radius:50%}

/* Contact */
.mapbox iframe{width:100%; height:300px; border:0; border-radius:12px}
.form .input-wrapper{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (max-width:700px){ .form .input-wrapper{grid-template-columns:1fr} }
.form-input, .form-btn{width:100%}
.form-input{background:#101826; color:var(--text); border:1px solid #243246; border-radius:10px; padding:12px}
.form-btn{margin-top:10px; display:inline-flex; gap:8px; align-items:center; justify-content:center; padding:12px; border-radius:10px; border:1px solid #1b2b42; background:#121c2a; color:var(--text)}
.form-btn[disabled]{opacity:.5; cursor:not-allowed}

/* Molecule widget */
#molecule-widget{position:fixed; right:24px; bottom:24px; width:min(420px,42vw); aspect-ratio:16/10; background:var(--panel); border:1px solid #1d2a3c; border-radius:14px; overflow:hidden; z-index:5}
#molecule-widget canvas{width:100%;height:100%;display:block;background:radial-gradient(120% 120% at 0% 100%, #0c1421 0%, #0a0f14 60%)}
.mw-tag{position:absolute; top:8px; left:10px; font-size:.85rem; color:var(--muted); background:#0e1624; border:1px solid #223047; padding:4px 8px; border-radius:8px; z-index:2}
.mw-ctrl{position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2}
.mw-btn{background:#0e1624; color:var(--text); border:1px solid #223047; border-radius:8px; padding:6px 10px; cursor:pointer}

/* Small helpers */
.hidden{display:none!important}