/* ============================================================
   INTERLOCK — component: hero (headline + 3D cobot canvas)
   ============================================================ */
header.hero{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:64px;
  overflow:hidden;
}
#cobot-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;
}
.hero-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,13,12,.92) 0%,rgba(10,13,12,.75) 42%,rgba(10,13,12,.15) 75%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;padding:110px 32px 170px;width:100%;
}
h1{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,4.3rem);
  line-height:1.06;letter-spacing:-.02em;
}
h1 .line{display:block;overflow:hidden}
h1 .line>span{display:inline-block}
h1 em{font-style:normal;color:var(--green)}
/* empty slot where the robot plucked the "un" out of "unsafe" */
.un-slot{
  display:inline-block;width:1.55ch;height:.82em;
  border:1.5px dashed var(--line-bright);
  vertical-align:baseline;transform:translateY(.08em);
  margin-right:.06em;
}
.hero-sub{
  margin-top:28px;max-width:54ch;
  color:var(--text-dim);font-size:clamp(1rem,1.4vw,1.15rem);
}
.hero-cta{margin-top:40px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-note{font-family:var(--mono);font-size:11px;color:var(--text-faint);letter-spacing:.06em}

@media (max-width:768px){
  .hero-content{padding:104px 22px 36px}
  .hero-shade{background:linear-gradient(180deg,rgba(10,13,12,.9) 0%,rgba(10,13,12,.72) 55%,rgba(10,13,12,.3) 100%)}
}
@media (max-width:480px){
  .hero-cta .hero-note{display:none}
}