:root{
      --bg: #000;
      --text: #eaf2ff;
      --muted: #b9c7d6;
      --accent: #57c7ff;
      --accent-2:#ffd166;
      --card: rgba(12,16,24,.55);
      --glass: rgba(12,16,24,.35);
      --border: rgba(255,255,255,.15);
      --shadow: 0 10px 30px rgba(0,0,0,.5);
      --radius: 16px;
      --pad: clamp(14px, 2.5vw, 28px);
      --max: 1100px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
       background: url("/assets/galaxies.jpg")  center 0% / cover no-repeat fixed;
    }

    /* Hero with full-bleed background */
    .hero{
      position:relative;
      min-height:100vh;
      display:grid;
      place-items:center;
      overflow:hidden;
      isolation:isolate;
      background:#000 center/cover no-repeat fixed url("/assets/background1.jpg"); /* ← your image */
    }
    /* dark vignette + color wash for legibility */
    .hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  /* darken center a bit, edges a bit more */
  background:
    radial-gradient(80% 60% at 50% 40%,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.70) 100%);
  pointer-events:none;
    }

    /* Title block */
    .hero-inner{
      max-width:var(--max);
      padding:calc(var(--pad) * 2) var(--pad);
      text-align:center;
      animation:fadeIn 2s ease-out both;
    }


    /* make the hero taller so you scroll over the background longer */
    .hero{ min-height: 100vh;  background: transparent !important;}   /* try 140–200vh */

    h1{
      margin:0 0 .4em;
      font-weight:900;
      letter-spacing:.5px;
      font-size:clamp(28px, 5vw, 54px);
      line-height:1.1;
      text-shadow:0 6px 30px rgb(0, 0, 0);
      
    }
    .sub{
      margin:0 auto 1.2em;
      max-width:800px;
      color:var(--text);
      font-size:clamp(14px, 2.1vw, 18px);
    }

    /* Buttons */
    .actions{
      display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
      margin-top:10px;
    }
    .btn{
      --bd: rgba(255,255,255,.18);
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 16px;
      border-radius:999px;
      color: #cfcfcf;
      text-decoration:none; font-weight:700;
      border:1px solid var(--bd);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow:var(--shadow);
      transition:transform .12s ease, border-color .12s ease, background .12s ease;
      will-change:transform;
      backdrop-filter: blur(6px);
    }
    .btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.35); text-shadow: 0 0 8px #000;}
    .btn.primary{ color:#d3d3d3; background:linear-gradient(180deg, var(--accent), #6be1ff); border:none; text-shadow: 0 0 8px #000;}
    .btn.sun{ color:#e6e6e6; background:linear-gradient(180deg, var(--accent-2), #ffc14d); border:none; text-shadow: 0 0 8px #000;}

    /* Sections */
    .section{
      background:var(--glass);
      backdrop-filter: blur(10px);
      border:1px solid var(--border);
      border-radius:var(--radius);
      margin:0 auto;
      max-width:var(--max);
      padding:var(--pad);
      box-shadow:var(--shadow);
    }
    .section + .section{ margin-top:18px; }

    h2{
      margin:.1em 0 .5em;
      font-size:clamp(20px, 3vw, 28px);
      letter-spacing:.3px;
    }
    p{ margin:.6em 0; }
    ul{ margin:.6em 0 .2em 1.1em; padding:0; }
    li{ margin:.35em 0; }

    .grid{
      display:grid;
      gap:14px;
      grid-template-columns:repeat(12,1fr);
    }
    .parallax-band{
  height: 20vh;                     /* how much extra scroll you want */
  background: #000 center/cover no-repeat fixed url("/assets/disk.jpg");
  /* optional dark overlay */
  position: relative;
}

.icon{ width:1em; height:1em; vertical-align:-0.2em; margin-right:.4em; }


.parallax-band::before{
  content:""; position:absolute; inset:0;
}

    .col-6{ grid-column:span 6; }
    .col-12{ grid-column:span 12; }
    @media (max-width: 900px){
      .col-6{ grid-column:span 12; }
    }

    footer{
      text-align:center;
      color:var(--muted);
      padding:24px var(--pad) 40px;
      font-size:14px;
    }

    /* subtle enter animation */
    @keyframes fadeIn{
      from{ opacity:0; transform:translateY(6px); }
      to  { opacity:1; transform:translateY(0); }
    }

    html, body { height: 100%; }




/* Lift the first panel up and let it overlap the parallax band under it */
#about-project{
  margin-bottom: 3vh;         /* pull the bottom edge over the band below */
}