#bhero{position:relative;height:220vh;background:var(--void)}
#bhero .bh-stage{min-height:620px;isolation:isolate;background:var(--void)}
#bhero .bh-stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 62% 38%,#151c34 0%,#0f1427 42%,rgba(11,15,28,0) 78%);opacity:var(--glow,1)}
#bhero .bh-gl{z-index:0}
#bhero .bh-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--scrim,1);
  background:
    linear-gradient(to top,var(--void) 0%,rgba(11,15,28,.82) 22%,rgba(11,15,28,0) 50%),
    linear-gradient(98deg,rgba(11,15,28,.72) 0%,rgba(11,15,28,.3) 32%,rgba(11,15,28,0) 50%),
    linear-gradient(to bottom,rgba(11,15,28,.6) 0%,rgba(11,15,28,0) 14%)}

/* ---------- flow tags (in from the left, out to the right) ---------- */
#bhero .bh-flows{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--flows,1)}
#bhero .bh-tag{position:absolute;top:var(--y);display:flex;align-items:center;gap:9px;white-space:nowrap;transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#cfd5e4;
  padding:5px 9px 5px 8px;background:rgba(11,15,28,.5);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#bhero .bh-tag i{width:5px;height:5px;border-radius:50%;background:#dfe6ff;box-shadow:0 0 10px #aebbe6;flex:none}
#bhero .bh-in{left:var(--gut);opacity:var(--tags-in,1)}
#bhero .bh-out{right:calc(var(--gut) + 30px);color:#ffd9c9;border-color:rgba(227,91,50,.32)}
#bhero .bh-out i{border-radius:0;transform:rotate(45deg);background:var(--orange);box-shadow:0 0 10px var(--orange-hi)}

/* ---------- copy ---------- */
#bhero .bh-copy{position:absolute;left:0;right:0;bottom:calc(64px + clamp(28px,6vh,68px));z-index:3;pointer-events:none;will-change:opacity,transform}
#bhero .bh-copy>*{pointer-events:auto}
#bhero .bh-title{margin:22px 0 0;max-width:9.6ch;font-size:clamp(52px,8.2vw,132px);line-height:.92;text-shadow:0 2px 40px rgba(11,15,28,.6)}
#bhero .bh-lede{margin-top:clamp(18px,2.6vh,28px);max-width:46ch;color:#d9dbe3;opacity:1;font-size:clamp(16px,1.3vw,20px)}
#bhero .bh-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(22px,3.4vh,36px)}
#bhero .bh-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;background:var(--orange);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 10px 40px -10px rgba(227,91,50,.7);transition:background .3s,transform .3s var(--ease),box-shadow .3s}
#bhero .bh-btn span{transition:transform .3s var(--ease)}
#bhero .bh-btn:hover{background:var(--orange-hi);transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(255,122,77,.8)}
#bhero .bh-btn:hover span{transform:translateX(4px)}
#bhero .bh-link{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--paper);
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.3);transition:color .3s,border-color .3s}
#bhero .bh-link:hover{color:var(--orange-hi);border-color:var(--orange-hi)}

/* ---------- stat strip ---------- */
#bhero .bh-stats{position:absolute;left:0;right:0;bottom:0;z-index:3;height:64px;border-top:1px solid var(--line-d);
  background:rgba(11,15,28,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);will-change:opacity,transform}
#bhero .bh-stats ul{list-style:none;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d)}
#bhero .bh-stats li{display:flex;align-items:center;gap:10px;white-space:nowrap}
#bhero .bh-stats li+li:before{content:"";width:5px;height:5px;background:var(--orange);transform:rotate(45deg);margin-right:14px;flex:none}
#bhero .bh-stats b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;color:#fff;font-weight:800}

/* ---------- unrolled timeline (positioned from the 3D strip each frame) ---------- */
#bhero .bh-tl{--lf:13%;--ph:.3;position:absolute;z-index:4;left:0;top:0;width:0;height:0;margin:0;opacity:0;visibility:hidden;
  font-family:var(--mono);text-transform:uppercase;color:#e6e8ef}
#bhero .bh-tl.on{visibility:visible}
#bhero .bh-tl-head,#bhero .bh-tl-foot{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:10.5px;letter-spacing:.2em;white-space:nowrap}
#bhero .bh-tl-head{bottom:calc(100% + 14px)}
#bhero .bh-tl-foot{top:calc(100% + 14px)}
#bhero .bh-tl-id{display:flex;align-items:center;gap:10px;color:#fff}
#bhero .bh-tl-id i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange-hi)}
#bhero .bh-tl-meta{color:var(--mute-d)}
#bhero .bh-tl-foot .fine{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--mute-d);opacity:.7}
#bhero .bh-next{color:#ffd9c9;letter-spacing:.2em}
#bhero .bh-tl-body{position:absolute;inset:0;display:grid;grid-template-rows:repeat(6,1fr)}
#bhero .bh-row{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;padding-left:12px;
  border-top:1px solid rgba(255,255,255,.07)}
#bhero .bh-row:first-child{border-top:0}
#bhero .bh-row:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--lf);z-index:-1;
  background:linear-gradient(90deg,rgba(11,15,28,.92) 0%,rgba(11,15,28,.82) 70%,rgba(11,15,28,0) 100%)}
#bhero .bh-row b{font-size:11px;letter-spacing:.24em;font-weight:700;color:#fff}
#bhero .bh-row em{font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--mute-d);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--lf) - 18px)}
#bhero .bh-lane{position:absolute;top:0;bottom:0;left:var(--lf);right:0}
#bhero .bh-chip{position:absolute;top:50%;left:calc(var(--l) * 100%);transform:translateY(-50%);white-space:nowrap;
  font-size:9.5px;letter-spacing:.14em;padding:4px 8px;color:#fff;background:rgba(227,91,50,.16);border:1px solid rgba(227,91,50,.55)}
#bhero .bh-chip[style*="--w"]{width:calc(var(--w) * 100%);overflow:hidden;text-overflow:ellipsis}
#bhero .bh-chip.bh-end{left:auto;right:6px}
#bhero .bh-why{background:rgba(11,15,28,.66);border-color:rgba(255,255,255,.18);color:#ffd9c9}
#bhero .bh-qa{background:rgba(11,15,28,.66);border-color:rgba(227,91,50,.4);color:#e6e8ef}
#bhero .bh-qa:before{content:"";display:inline-block;width:5px;height:5px;background:var(--orange);transform:rotate(45deg);margin:0 8px 1px 0}
#bhero .bh-play{position:absolute;top:-6px;bottom:-6px;left:calc(var(--lf) + (100% - var(--lf)) * var(--ph));width:1px;background:var(--orange-hi);
  box-shadow:0 0 14px var(--orange)}
#bhero .bh-play span{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.14em;color:#fff;
  background:var(--orange);padding:2px 6px}

/* ---------- bleed to the devices chapter (ink ground) ---------- */
#bhero .bh-bleed{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--bleed,0);
  background:linear-gradient(to bottom,rgba(18,24,41,.55) 0%,var(--ink) 92%)}

@media (max-width:1100px){
  #bhero .bh-stats ul{gap:12px;font-size:10px;letter-spacing:.1em}
  #bhero .bh-stats li{gap:7px}
  #bhero .bh-stats li+li:before{margin-right:8px}
  #bhero .bh-stats b{font-size:15px}
}
@media (max-width:1000px) and (min-width:761px){
  #bhero .bh-stats ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;font-size:9.5px;line-height:1.3}
  #bhero .bh-stats li{display:block;white-space:normal}
  #bhero .bh-stats li+li:before{display:none}
  #bhero .bh-stats b{display:block;font-size:16px;margin-bottom:2px}
  #bhero .bh-stats{height:72px}
  #bhero .bh-copy{bottom:calc(72px + clamp(28px,6vh,68px))}
}
@media (max-width:900px){
  #bhero .bh-chip.bh-x{display:none}
}
@media (max-width:760px){
  #bhero{height:200vh}
  #bhero .bh-scrim{background:
    linear-gradient(to top,var(--void) 0%,rgba(11,15,28,.94) 44%,rgba(11,15,28,0) 64%),
    linear-gradient(to bottom,rgba(11,15,28,.7) 0%,rgba(11,15,28,0) 12%)}
  #bhero .bh-tag{font-size:8.5px;letter-spacing:.12em;padding:4px 7px 4px 6px}
  #bhero .bh-in{left:16px}
  #bhero .bh-out{right:16px}
  #bhero .bh-tag:nth-child(2),#bhero .bh-tag:nth-child(5){display:none}
  #bhero .bh-copy{bottom:calc(96px + 18px)}
  #bhero .bh-title{font-size:clamp(40px,11.6vw,60px);margin-top:14px;max-width:none}
  #bhero .bh-title .accent{display:block}
  #bhero .bh-lede{font-size:15px;line-height:1.5}
  #bhero .bh-ctas{gap:12px 24px;margin-top:20px}
  #bhero .bh-btn{padding:14px 18px;font-size:11px}
  #bhero .bh-link{font-size:11px}
  #bhero .bh-stats{height:96px}
  #bhero .bh-stats ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-content:center;font-size:8.5px;letter-spacing:.12em;line-height:1.35}
  #bhero .bh-stats li,#bhero .bh-stats li:last-child{display:block;white-space:normal}
  #bhero .bh-stats li+li:before{display:none}
  #bhero .bh-stats b{display:block;font-size:15px;margin-bottom:1px}
  #bhero .bh-stats b:after{content:"";display:inline-block;width:4px;height:4px;background:var(--orange);transform:rotate(45deg);margin:0 0 3px 7px;vertical-align:middle}
  #bhero .bh-mx{display:none}
  #bhero .bh-chip[style*="--w"]{width:auto}
  #bhero .bh-chip.bh-mid{left:31%}
  #bhero .bh-tl{--lf:26%}
  #bhero .bh-tl-head,#bhero .bh-tl-foot{font-size:9px;letter-spacing:.14em;flex-wrap:wrap;gap:6px 12px}
  #bhero .bh-tl-meta{display:none}
  #bhero .bh-row{padding-left:8px}
  #bhero .bh-row b{font-size:9.5px;letter-spacing:.18em}
  #bhero .bh-row em{display:none}
  #bhero .bh-chip{font-size:8px;letter-spacing:.06em;padding:3px 5px}
  #bhero .bh-play span{font-size:8px}
}
@media (max-height:820px) and (min-width:761px){
  #bhero .bh-title{font-size:clamp(48px,min(8.2vw,12.5vh),132px)}
  #bhero .bh-copy{bottom:calc(64px + 24px)}
}
@media (prefers-reduced-motion:reduce){
  #bhero{height:auto}
  #bhero .bh-stage{position:relative;height:100svh}
  #bhero .bh-tl{display:none}
}