.hz{position:relative;margin-top:var(--s7)}
.hz-pin{position:relative}
.hz-stage{position:relative}
.hz-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4);max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
.hz-emblem,.hz-rail{display:none}

.hz-card{position:relative;min-width:0}
.hz-face{position:relative;display:flex;flex-direction:column;height:100%;padding:28px;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(26,26,26,.94),rgba(18,18,18,.94) 55%,rgba(10,10,10,.96));
  transition:border-color .7s var(--out),box-shadow .7s var(--out)}
.hz-face::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;pointer-events:none;background:var(--bar);opacity:.2;transition:opacity .7s var(--out)}
.hz-card.on .hz-face{border-color:rgba(134,230,251,.4);box-shadow:0 30px 80px -40px rgba(0,0,0,.9),0 0 90px -34px rgba(134,230,251,.7)}
.hz-card.on .hz-face::before{opacity:1}

.hz-top{display:flex;align-items:center;gap:12px}
.hz-no{font-family:var(--fm);font-size:10px;letter-spacing:.3em;color:rgba(134,230,251,.4);font-variant-numeric:tabular-nums;transition:color .5s var(--out)}
.hz-top i{flex:1;height:1px;background:linear-gradient(90deg,rgba(134,230,251,.4),transparent);transform-origin:0 50%;transform:scaleX(.35);transition:transform .7s var(--out)}
.hz-top b{flex:none;width:16px;height:12px;background:var(--cyan);opacity:.25;transform:scale(.85);
  -webkit-mask:var(--cjm) center/contain no-repeat;mask:var(--cjm) center/contain no-repeat;transition:opacity .7s var(--out),transform .7s var(--spring)}
.hz-card.on .hz-no{color:var(--cyan)}
.hz-card.on .hz-top i{transform:none}
.hz-card.on .hz-top b{opacity:1;transform:none;filter:drop-shadow(0 0 5px rgba(134,230,251,.8))}

.hz-card h3{margin:16px 0 0;font-family:var(--fd);font-size:clamp(24px,2.1vw,31px);font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.8)}
.hz-card.on h3{background:linear-gradient(180deg,#E8FBFF,#86E6FB 62%,#4FC3F7);-webkit-background-clip:text;background-clip:text;color:transparent}
.hz-line{margin:12px 0 0;font-family:var(--fm);font-size:10.5px;line-height:1.8;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .7s var(--out)}
.hz-line b,.hz-note b{font-weight:inherit;color:var(--cyan)}
.hz-card.on .hz-line{color:rgba(255,255,255,.75)}
.hz-body{display:grid;gap:14px;margin-top:auto;padding-top:20px}
.hz-note{margin:0;font-family:var(--fm);font-size:9.5px;line-height:1.75;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hz-lbl{font-family:var(--fm);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.hz-tags{display:flex;flex-wrap:wrap;gap:6px}
.hz-tags span{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px;
  font-family:var(--fm);font-size:8.5px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.4);
  transition:border-color .5s var(--out),color .5s var(--out),box-shadow .5s var(--out)}
.hz-tags span::before{content:"";flex:none;width:9px;height:7px;background:currentColor;-webkit-mask:var(--cjm) center/contain no-repeat;mask:var(--cjm) center/contain no-repeat}
.hz-card.on .hz-tags span{border-color:rgba(134,230,251,.45);color:var(--cyan);box-shadow:0 0 12px rgba(134,230,251,.2)}
.hz-card.on .hz-tags span:nth-child(2){transition-delay:.14s}
.hz-card.on .hz-tags span:nth-child(3){transition-delay:.28s}
.hz-card.on .hz-tags span:nth-child(4){transition-delay:.42s}

.hz-big{font-family:var(--fd);font-size:30px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#FFB38A;opacity:.35;transition:opacity .7s var(--out),filter .7s var(--out)}
.hz-big small{font-size:15px;color:rgba(255,255,255,.4)}
.hz-card.on .hz-big{opacity:1;filter:drop-shadow(0 0 14px rgba(255,179,138,.35))}

.hz-split{display:grid;gap:8px}
.hz-bar{display:flex;gap:3px;height:10px}
.hz-bar i{height:100%;border-radius:2px;background:rgba(134,230,251,.35);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--out)}
.hz-bar i:first-child{background:linear-gradient(90deg,#4FC3F7,#86E6FB);box-shadow:0 0 12px rgba(134,230,251,.6)}
.hz-bar.c i:nth-child(2){background:rgba(134,230,251,.35)}
.hz-bar.c i:nth-child(3){background:rgba(134,230,251,.2)}
.hz-bar i:nth-child(2){transition-delay:.14s}
.hz-bar i:nth-child(3){transition-delay:.28s}
.hz-card.on .hz-bar i{transform:none}
.hz-kv{display:flex;justify-content:space-between;gap:12px;font-family:var(--fm);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hz-kv b{font-weight:400;color:var(--cyan);font-variant-numeric:tabular-nums}

.hz-lad{display:grid;gap:6px}
.hz-lad>div{display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;gap:12px}
.hz-lad b{font-family:var(--fd);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--cyan)}
.hz-lad span{position:relative;height:8px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.05)}
.hz-lad span i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,#4FC3F7,#86E6FB);box-shadow:0 0 10px rgba(134,230,251,.5);
  transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--out)}
.hz-lad>div:nth-child(2) span i{transition-delay:.11s}
.hz-lad>div:nth-child(3) span i{transition-delay:.22s}
.hz-lad>div:nth-child(4) span i{transition-delay:.33s}
.hz-lad>div:nth-child(5) span i{transition-delay:.44s}
.hz-card.on .hz-lad span i{transform:scaleX(var(--w))}
.hz-lad em{width:6.5rem;text-align:right;font-style:normal;font-family:var(--fm);font-size:10px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.55)}
.hz-lad em u{text-decoration:none;color:rgba(255,255,255,.35)}

.hz-lock{position:relative;height:48px;overflow:hidden;border:1px solid rgba(134,230,251,.15);border-radius:12px}
.hz-lock i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(134,230,251,.05),rgba(134,230,251,.3));transform-origin:0 50%;transform:scaleX(.08);transition:transform 1.6s var(--out)}
.hz-lock span{position:relative;display:flex;height:100%;align-items:center;justify-content:space-between;padding:0 16px;font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hz-lock b{font-weight:400;color:var(--cyan)}
.hz-card.on .hz-lock i{transform:none}

.hz-bands{display:grid;gap:6px}
.hz-bands div{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid rgba(255,255,255,.06);border-radius:8px;transition:border-color .7s var(--out),background-color .7s var(--out)}
.hz-bands span{font-family:var(--fm);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hz-bands b{font-family:var(--fd);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;color:var(--cyan)}
.hz-bands div:nth-child(2){transition-delay:.14s}
.hz-bands div:nth-child(3){transition-delay:.28s}
.hz-card.on .hz-bands div{border-color:rgba(134,230,251,.25)}
.hz-card.on .hz-bands div:first-child{background-color:rgba(134,230,251,.08)}

.hz.hz-wide{height:336vh;margin-top:var(--s5)}
.hz-wide .hz-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;overflow:hidden;padding-top:112px}
.hz-wide .hz-stage{flex:1;min-height:0;display:flex;align-items:center;padding-block:24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.hz-wide .hz-track{display:flex;align-items:stretch;gap:24px;height:min(460px,100%);max-width:none;margin:0;padding:0 calc(50% - 200px);
  perspective:1800px;transform-style:preserve-3d;will-change:transform}
.hz-wide .hz-card{flex:none;width:400px;will-change:transform,opacity}
.hz-wide .hz-emblem{display:flex;position:absolute;top:24px;bottom:24px;right:calc(50% + 224px);width:400px;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity}
.hz-emblem::before{content:"";position:absolute;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(134,230,251,.22),rgba(79,195,247,.06) 55%,transparent);animation:hzglow 3.6s ease-in-out infinite}
.hz-emblem span{position:relative;width:min(88%,360px);aspect-ratio:106.16/80;background:linear-gradient(160deg,#E8FBFF,#86E6FB 45%,#4FC3F7);
  -webkit-mask:var(--cjm) center/contain no-repeat;mask:var(--cjm) center/contain no-repeat;animation:hzbeat 3.6s ease-in-out infinite}
@keyframes hzbeat{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.03);opacity:1}}
@keyframes hzglow{0%,100%{transform:scale(.92);opacity:.6}50%{transform:scale(1.06);opacity:1}}

.hz-wide .hz-rail{position:relative;display:flex;justify-content:space-between;width:100%;max-width:56rem;margin:0 auto 56px;padding-inline:var(--gut)}
.hz-rail>span{position:absolute;left:var(--gut);right:var(--gut);top:14px;height:1px;background:rgba(134,230,251,.1)}
.hz-rail>span i{position:absolute;inset:0;background:linear-gradient(90deg,#4FC3F7,#86E6FB);box-shadow:0 0 10px rgba(134,230,251,.8);transform-origin:0 50%;transform:scaleX(0)}
.hz-rail button{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.hz-mk{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(134,230,251,.25);border-radius:8px;background:var(--bg);opacity:.25;transform:scale(.85);
  transition:border-color .5s var(--out),box-shadow .5s var(--out)}
.hz-mk::before{content:"";width:13px;height:10px;background:var(--cyan);-webkit-mask:var(--cjm) center/contain no-repeat;mask:var(--cjm) center/contain no-repeat}
.hz-rail em{font-style:normal;font-family:var(--fm);font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.4);transition:color .5s var(--out)}
.hz-rail button:hover em{color:#fff}
.hz-rail button.on em{color:var(--cyan)}
.hz-rail button.on .hz-mk{border-color:var(--cyan);box-shadow:0 0 16px -2px rgba(134,230,251,.7)}

.lite .hz-emblem::before,.lite .hz-emblem span,[data-cjoff] .hz-emblem span{animation:none}
@media(prefers-reduced-motion:reduce){
  .hz-face,.hz-face::before,.hz-top i,.hz-top b,.hz-line,.hz-tags span,.hz-big,.hz-bar i,.hz-lad span i,.hz-lock i,.hz-bands div{transition:none}
  .hz-emblem::before,.hz-emblem span{animation:none}
}