/* ============================================================
   shawtechlab.css — homepage-specific sections (hero + canvas)
   ============================================================ */

/* HERO */
.hero { display:flex; align-items:center; min-height:calc(100vh - var(--nav-h)); overflow:hidden; position:relative; background:var(--hero-bg); }
.hero-left { flex:1 1 auto; padding:5rem 3rem 5rem 2.5rem; position:relative; z-index:2; }
.hero-kicker {
  font-family:var(--font-body); font-size:0.72rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1.5rem; display:flex; align-items:center; gap:0.6rem;
}
.hero-kicker::before { content:''; display:block; width:28px; height:2px; background:var(--accent); }
.hero h1 { font-family:var(--font-display); font-weight:900; font-size:clamp(3rem,5.5vw,4.8rem); line-height:1.04; letter-spacing:-0.01em; color:var(--text); margin-bottom:1.4rem; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero-sub { font-family:'Barlow',sans-serif; font-size:1rem; font-weight:400; color:var(--text-muted); max-width:440px; line-height:1.75; margin-bottom:2.5rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-right { flex:0 0 var(--hero-right-w); align-self:stretch; position:relative; overflow:hidden; background:var(--hero-right-bg, #0a0a0a); }
.hero-right::before { content:''; position:absolute; left:0; top:0; bottom:0; width:15%; background:linear-gradient(to right, var(--hero-bg, #000000), transparent); z-index:1; pointer-events:none; }
#particle-canvas { display:block; width:100%; height:100%; min-height:520px; }