:root{
  --brand:#6c3bff;
  --text:#ffffff;
  --ink:#0f1020;
  --cta:#f8c24e;
  --cta-ink:#2b2100;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  background:linear-gradient(180deg, rgba(10,10,18,.8), rgba(10,10,18,.0));
  backdrop-filter:saturate(140%) blur(6px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:14px 20px;
}
.logo{height:44px; width:auto; display:block; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.nav-links{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.nav-links a{color:#eaeaf6; text-decoration:none; font-weight:600}
.nav-links a:hover{opacity:.9; text-decoration:underline}

.hero{
  position:relative; min-height:88vh; display:grid; place-items:center;
  background:url("../img/bg-molecules.jpg") center/cover no-repeat, radial-gradient(1000px 600px at 70% 20%, rgba(160,59,255,.25), transparent);
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(30,7,75,.55), rgba(120,24,192,.40) 50%, rgba(120,24,192,.20));
}
.hero-content{
  position:relative; z-index:1; max-width:900px; padding:120px 24px 48px; text-align:left; color:var(--text);
}
.hero h1{
  margin:0 0 16px; font-size:clamp(36px, 5vw, 64px); line-height:1.05; letter-spacing:.4px;
}
.hero p{ margin:0 0 28px; font-size:clamp(16px, 2vw, 20px); line-height:1.7; color:#f1eaff; }
.cta{
  display:inline-block; background:var(--cta); color:var(--cta-ink);
  padding:14px 22px; border-radius:999px; font-weight:800; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.cta:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.3)}

.site-footer{ text-align:center; padding:30px 16px; color:#7e7e9a; background:#0f1020; margin-top:-2px; }

/* page shells */
main{max-width:900px;margin:140px auto 80px;padding:0 20px}