/* NeuroBios Visual White Paper Styles */
:root{
  --bg:#070b14;
  --bg2:#0b1324;
  --panel:rgba(18,28,44,.55);
  --border:rgba(76,195,255,.2);
  --text:#e7f1ff;
  --muted:#a9b9d6;
  --accent:#4cc3ff;
  --glow:0 0 24px rgba(76,195,255,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% 10%, #0e1a2b 0%, #070b14 60%), radial-gradient(1000px 600px at 80% 10%, #0b152b 0%, #070b14 70%), var(--bg);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
}

.site-header{
  /*
    Use fixed positioning rather than sticky:
    - avoids Safari/embedding edge cases where sticky can fail
    - guarantees the glass "pill" stays with the viewport while scrolling
  */
  position:fixed;
  top:calc(14px + env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%) translateY(var(--driftY, 0px));
  will-change: transform;
  z-index:1000;

  width:min(1100px, 92vw);
  margin:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(7,11,20,.32), rgba(7,11,20,.14));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand{display:flex; gap:14px; align-items:center}
.brand-home{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.4px; color:var(--text); text-decoration:none}
.brand-title{white-space:nowrap}
.brand-parent{color:var(--muted); text-decoration:none; font-weight:700; font-size:12px; padding-left:12px; border-left:1px solid var(--border); white-space:nowrap}
.brand-parent:hover{color:var(--text)}
.logo-pip{width:18px; height:18px; border-radius:50%; display:inline-block; flex:0 0 auto; object-fit:cover; background:transparent; box-shadow:var(--glow)}
.site-nav{display:flex; align-items:center; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
.site-nav a{color:var(--muted); text-decoration:none; margin-left:14px; font-weight:700; flex:0 0 auto}
.site-nav a:hover{color:var(--text)}

.hero{position:relative; display:grid; place-items:center; min-height:60vh; padding:80px 20px}
.hero-content{text-align:center; max-width:900px}
h1{font-size: clamp(36px, 6vw, 68px); margin:.2em 0 .1em; text-shadow: 0 0 36px rgba(76,195,255,.35)}
.eyebrow{color:var(--muted); margin:0 auto 18px; max-width:720px}
.cta-row{display:flex; gap:12px; justify-content:center}
.btn{border:1px solid var(--border); border-radius:999px; padding:10px 16px; background:transparent; color:var(--text); cursor:pointer; font-weight:700}
.btn.primary{background:linear-gradient(180deg, rgba(76,195,255,.18), rgba(76,195,255,.05)); box-shadow:var(--glow)}
.btn.ghost:hover{background:rgba(255,255,255,.04)}

/* Make room for the fixed header so content never hides underneath it */
main{width:min(1100px, 92vw); margin: 0 auto 80px; padding-top: 86px}

.section{margin:40px 0; scroll-margin-top: 132px}
.card{
  background:linear-gradient(180deg, rgba(18,28,44,.65), rgba(18,28,44,.4));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px}
.split .art img{width:100%; height:auto; border-radius:14px; display:block}
.glow{box-shadow: var(--glow)}

.gallery{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px}

h2{font-size: clamp(24px, 3.2vw, 36px); margin:0 0 10px}
h3{margin:16px 0 6px}

.refs li{margin:6px 0; color:var(--muted)}

.site-footer{border-top:1px solid var(--border); color:var(--muted); text-align:center; padding:30px 20px; margin-top:40px}

/* Scroll in animations */
.section, .card, .art{opacity:0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease}
.inview{opacity:1 !important; transform: translateY(0) !important}

/* Hero canvas fills viewport */
#heroCanvas{
  position:fixed; inset:0; z-index:-1;
}

/* Responsive */
@media (max-width: 900px){
  .split{grid-template-columns:1fr; }
  .gallery{grid-template-columns:1fr}
}