:root{
  --bg-1:#0b0016;         /* deep violet */
  --bg-2:#16002a;         /* deeper violet */
  --node:#ba55d3;         /* medium orchid */
  --node-alpha:0.9;
}


/* HERO: remove the big gap under it */
.HeroSection{
  position: relative;
  min-height: 92vh;     /* keep it tall; adjust if you want */
  overflow: hidden;
  padding-bottom: 48px; /* was big — now small */
  isolation: isolate;
}



*{ box-sizing:border-box }

html,body{
  height:100%;
}

body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 20%, var(--bg-2), transparent 60%),
              radial-gradient(1000px 700px at 80% 70%, #240047, transparent 55%),
              linear-gradient(180deg, var(--bg-1), #120022 60%, #0a0015 100%);
  color:#eee;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  overflow-x:hidden;
}

/* Content just to show layering */
.content{
  position:relative;
  max-width: 960px;
  margin: 12vh auto 20vh;
  padding: 24px 28px;
  backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

h1{ margin:0 0 12px; font-weight:700; letter-spacing:.2px }
p { margin:0; opacity:.9 }

/* Canvas pinned behind everything */
#moleculeCanvas{
  position: absolute;     /* stays inside the hero only */
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  #moleculeCanvas{ display:none }
  body{ background-attachment: fixed }
}


/* … keep your existing CSS … */

.morph-btn{
  margin-top:16px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:#eee;
  font-weight:600;
  cursor:pointer;
  backdrop-filter:saturate(120%) blur(4px);
}
.morph-btn:hover{ background: rgba(255,255,255,.12) }
.morph-btn[aria-pressed="true"]{ outline:2px solid rgba(186,85,211,.6) }
.brand{ color:#c08ae6 }