/* Homepage hero (pages/index.html only): split layout with the live mascot
   stage. Every rule is scoped under .hero-v-hybrid. Loaded from index.html's
   hero_css block, not from base.html, because no other page needs it. */
/* ---- hero variant: hybrid (scoreboard split + live mascot stage). Everything scoped under .hero-v-hybrid ---- */
.hero-v-hybrid {
  /* hero tokens: dark values = the site's dark theme; [data-theme="light"] block below swaps them */
  --hb-bg: #060907; --hb-panel: #0c130f; --hb-olive-a: #1c2416; --hb-olive-b: #121a12; --hb-cut: 12px;
  --hb-ink: #fff; --hb-hair: rgba(255,255,255,.08); --hb-shell: rgba(255,255,255,.14); --hb-row: rgba(255,255,255,.03); --hb-tile: rgba(255,255,255,.04); --hb-tile-ring: transparent;
  --hb-scan: rgba(255,255,255,.035); --hb-gridline: rgba(255,255,255,.04);
  --hb-hl: #34f55b; --hb-green-fill: #34f55b; --hb-on-green: #06130a; --hb-green-rgb: 52, 245, 91;
  --hb-hex-a: #34f55b; --hb-hex-b: #0e8f2c; --hb-hex-o: .8; --hb-hex-in: #aee37a; --hb-hex-in-o: .35; --hb-dots: rgba(52,245,91,.42); --hb-sweep: rgba(52,245,91,.22); --hb-sweep-0: rgba(52,245,91,0);
  --hb-mascot-shadow: drop-shadow(0 28px 40px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(52,245,91,.12));
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hb-bg); color: var(--text);
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column;
}
[data-theme="light"] .hero-v-hybrid {
  --hb-bg: #f8f6f1; --hb-panel: #fff; --hb-olive-a: #e5ebd9; --hb-olive-b: #d5ddc4;
  --hb-ink: #15120e; --hb-hair: rgba(45,28,12,.1); --hb-shell: rgba(40,45,20,.2); --hb-row: rgba(45,28,12,.045); --hb-tile: #fff; --hb-tile-ring: rgba(45,28,12,.12);
  --hb-scan: rgba(45,28,12,.02); --hb-gridline: rgba(50,70,25,.08);
  --hb-hl: #15803d; --hb-green-fill: #15803d; --hb-on-green: #fff; --hb-green-rgb: 21, 128, 61;
  --hb-hex-a: #1fa34a; --hb-hex-b: #0b5e26; --hb-hex-o: .85; --hb-hex-in: #2f6b1f; --hb-hex-in-o: .5; --hb-dots: rgba(21,100,45,.55); --hb-sweep: rgba(21,110,50,.16); --hb-sweep-0: rgba(21,110,50,0);
  --hb-mascot-shadow: drop-shadow(0 24px 30px rgba(50,45,20,.28));
}
/* hard diagonal split: olive-dark panel on the right, orange slash edge */
.hero-v-hybrid .hb-split { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--hb-olive-a) 0%, var(--hb-olive-b) 100%); clip-path: polygon(60% 0, 100% 0, 100% 100%, 48% 100%); }
.hero-v-hybrid .hb-split-edge { position: absolute; inset: 0; z-index: -1; background: var(--orange-fill); clip-path: polygon(60% 0, calc(60% + 3px) 0, calc(48% + 3px) 100%, 48% 100%); }
.hero-v-hybrid .hb-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--hb-scan) 3px 4px); clip-path: polygon(0 0, 60% 0, 48% 100%, 0 100%); }
/* faint grid on the stage side only */
.hero-v-hybrid .hb-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--hb-gridline) 1px, transparent 1px), linear-gradient(90deg, var(--hb-gridline) 1px, transparent 1px); background-size: 48px 48px; clip-path: polygon(60% 0, 100% 0, 100% 100%, 48% 100%); mask-image: radial-gradient(ellipse 60% 70% at 72% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 50%, #000 20%, transparent 75%); }

.hero-v-hybrid .hb-wrap { flex: 1 1 auto; display: flex; align-items: center; padding-top: clamp(2rem, 1rem + 2vw, 2.75rem); padding-bottom: clamp(2rem, 1rem + 2vw, 2.75rem); }
.hero-v-hybrid .hb-grid-2 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.5rem, .5rem + 3vw, 3.5rem); align-items: center; width: 100%; }

/* ---- copy (lifted from the scoreboard variant) ---- */
.hero-v-hybrid h1 {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.4rem, 1.1rem + 3.3vw, 4rem); line-height: .96; letter-spacing: -.035em;
  margin: 0 0 1.3rem; color: var(--hb-ink); text-wrap: balance; max-width: 12.5em;
}
.hero-v-hybrid h1 .hb-amp { color: var(--muted); font-weight: 400; }
.hero-v-hybrid h1 .hb-hl { color: var(--hb-hl); }
.hero-v-hybrid .hb-lead { max-width: 33rem; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.55; color: var(--text-2); margin: 0 0 1.8rem; }
.hero-v-hybrid .hb-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-v-hybrid .hb-btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; padding: .9rem 1.4rem; }
.hero-v-hybrid .hb-btn.btn-ctf { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); border-radius: 0; }
.hero-v-hybrid .hb-proof { list-style: none; padding: 0; margin: 1.9rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; max-width: 38rem; }
.hero-v-hybrid .hb-proof li { background: var(--hb-tile); box-shadow: inset 0 0 0 1px var(--hb-tile-ring); border-top: 2px solid var(--line-2); padding: .8rem .9rem .85rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.hero-v-hybrid .hb-proof li:first-child { border-top-color: var(--orange-fill); }
.hero-v-hybrid .hb-proof li b { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1; color: var(--hb-ink); letter-spacing: -.02em; }
.hero-v-hybrid .hb-proof li span { font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* ---- mascot stage ---- */
.hero-v-hybrid .hb-stage-col { min-width: 0; }
.hero-v-hybrid .hb-stage { position: relative; height: clamp(520px, 62vh, 640px); }
.hero-v-hybrid [data-depth] { will-change: transform; }
/* reticle: two spinning hexes + one dotted circle the tokens orbit on */
.hero-v-hybrid .hb-reticle { position: absolute; left: 50%; top: 50%; width: min(540px, 104%); aspect-ratio: 1; margin-left: calc(min(540px, 104%) / -2); margin-top: calc(min(540px, 104%) / -1.92); z-index: 0; pointer-events: none; container-type: inline-size; }
.hero-v-hybrid .hb-reticle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-v-hybrid .hb-st-a { stop-color: var(--hb-hex-a); }
.hero-v-hybrid .hb-st-b { stop-color: var(--hb-hex-b); }
.hero-v-hybrid .hb-dots { stroke: var(--hb-dots); }
/* radar sweep: inside the dotted circle, painted before the svg so it sits behind both hexes */
.hero-v-hybrid .hb-sweep { position: absolute; inset: 9.5%; border-radius: 50%; background: conic-gradient(from 0deg, var(--hb-sweep-0) 0deg, var(--hb-sweep-0) 300deg, var(--hb-sweep) 360deg); animation: hbSpin 7s linear infinite; mask-image: radial-gradient(circle, transparent 38%, #000 40%, #000 100%); -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 40%, #000 100%); }
.hero-v-hybrid .hb-hex-outer { transform-origin: 50% 50%; animation: hbSpin 60s linear infinite; opacity: var(--hb-hex-o); }
.hero-v-hybrid .hb-hex-inner { transform-origin: 50% 50%; animation: hbSpin 90s linear infinite reverse; stroke: var(--hb-hex-in); opacity: var(--hb-hex-in-o); }
/* orbiting mono tokens: centred in the reticle, radius = the dotted circle (r 196 of 400 = 49cqw) */
/* one registered angle drives every token: rotate out by (a + spin), back by the same, so tokens stay upright and in phase */
@property --hb-spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.hero-v-hybrid .hb-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: hbOrbit 46s linear infinite; }
.hero-v-hybrid .hb-token-pos { position: absolute; left: 0; top: 0; transform: rotate(calc(var(--a) + var(--hb-spin))) translateX(49cqw) rotate(calc(-1 * (var(--a) + var(--hb-spin)))); }
.hero-v-hybrid .hb-token { display: block; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; font-weight: 700; color: var(--green); background: var(--hb-panel); border: 1px solid rgba(var(--hb-green-rgb),.4); padding: .28rem .55rem; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.hero-v-hybrid .hb-token.o { color: var(--orange); border-color: rgba(253,154,51,.55); }
.hero-v-hybrid .hb-token.w { color: var(--hb-ink); border-color: var(--line-2); }
/* floor: sharp ellipse platform instead of a blurred glow */
.hero-v-hybrid .hb-floor { position: absolute; left: 50%; bottom: 3.5%; width: 64%; height: 13%; transform: translateX(-50%); z-index: 1; pointer-events: none; }
.hero-v-hybrid .hb-floor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(var(--hb-green-rgb),.18), rgba(var(--hb-green-rgb),.04) 55%, transparent 72%); border: 1px solid rgba(var(--hb-green-rgb),.35); }
.hero-v-hybrid .hb-floor::after { content: ""; position: absolute; inset: 22% 14%; border-radius: 50%; border: 1px dashed rgba(var(--hb-green-rgb),.3); }
/* mascot: parallax wrapper -> breathing wrapper -> poke wrapper -> img */
.hero-v-hybrid .hb-mascot-par { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 7%; z-index: 2; pointer-events: none; }
.hero-v-hybrid .hb-breathe { width: min(400px, 66%); transform-origin: 50% 100%; animation: hbBreathe 5.6s ease-in-out infinite; pointer-events: auto; cursor: pointer; position: relative; }
.hero-v-hybrid .hb-poke { transform-origin: 50% 90%; display: block; }
.hero-v-hybrid .hb-breathe.is-poked .hb-poke { animation: hbPoke .7s cubic-bezier(.2,.8,.2,1); }
.hero-v-hybrid .hb-mascot { display: block; width: 100%; height: auto; filter: var(--hb-mascot-shadow); user-select: none; -webkit-user-drag: none; }
/* capture burst: four chips fired from the flag tip */
.hero-v-hybrid .hb-burst { position: absolute; right: 8%; top: 6%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.hero-v-hybrid .hb-burst i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; background: var(--hb-green-fill); opacity: 0; transform: translate(-50%, -50%); clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px)); }
.hero-v-hybrid .hb-burst i:nth-child(2n) { background: var(--orange-fill); }
.hero-v-hybrid .hb-burst i:nth-child(3) { width: 6px; height: 6px; }
.hero-v-hybrid .hb-burst.go i { animation: hbBurst .75s cubic-bezier(.1,.7,.3,1) forwards; }
.hero-v-hybrid .hb-burst b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--hb-on-green); background: var(--hb-green-fill); padding: .25rem .5rem; white-space: nowrap; opacity: 0; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.hero-v-hybrid .hb-burst.go b { animation: hbTag .9s ease-out forwards; }

/* ---- cards: opaque, chamfered, hairline border drawn through a 1px padded shell ---- */
.hero-v-hybrid .hb-card { position: absolute; z-index: 4; font-size: .84rem; }
.hero-v-hybrid .hb-card-in { background: var(--hb-shell); padding: 1px; clip-path: polygon(0 0, calc(100% - var(--hb-cut)) 0, 100% var(--hb-cut), 100% 100%, var(--hb-cut) 100%, 0 calc(100% - var(--hb-cut))); animation: hbBob 7s ease-in-out infinite; }
.hero-v-hybrid .hb-card-body { background: var(--hb-panel); clip-path: polygon(0 0, calc(100% - var(--hb-cut) + 1px) 0, 100% calc(var(--hb-cut) - 1px), 100% 100%, calc(var(--hb-cut) - 1px) 100%, 0 calc(100% - var(--hb-cut) + 1px)); padding: .7rem .85rem .75rem; border-top: 2px solid var(--hb-green-fill); position: relative; overflow: hidden; }
.hero-v-hybrid .hb-card.c-orange .hb-card-body { border-top-color: var(--orange-fill); }
.hero-v-hybrid .hb-card.c-red .hb-card-body { border-top-color: var(--red); }
.hero-v-hybrid .hb-card-title { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; display: flex; align-items: center; gap: .45rem; }
.hero-v-hybrid .hb-card-title .live { width: 6px; height: 6px; background: var(--red); animation: hbBlink 1.2s steps(1) infinite; }
.hero-v-hybrid .hb-card-title .n { margin-left: auto; color: var(--text-2); letter-spacing: .04em; }

/* mini scoreboard */
.hero-v-hybrid .hb-lb { top: 3%; left: -3%; width: 236px; }
.hero-v-hybrid .hb-lb .hb-card-in { animation-delay: -1s; }
.hero-v-hybrid .hb-lb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hero-v-hybrid .hb-lb li { position: relative; display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .3rem .45rem; background: var(--hb-row); font-size: .78rem; color: var(--hb-ink); font-weight: 600; will-change: transform; }
.hero-v-hybrid .hb-lb li .rk { font-family: var(--font-display); color: var(--muted); font-size: .72rem; text-align: center; line-height: 1.3rem; }
.hero-v-hybrid .hb-lb li:first-child .rk { background: var(--orange-fill); color: #0b0f0c; }
.hero-v-hybrid .hb-lb li:nth-child(2) .rk { background: #d9dfdb; color: #0b0f0c; }
.hero-v-hybrid .hb-lb li:nth-child(3) .rk { background: #b0743a; color: #fff; }
.hero-v-hybrid .hb-lb li .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-v-hybrid .hb-lb li .pts { font-family: var(--font-mono); color: var(--green); font-size: .74rem; font-variant-numeric: tabular-nums; }
.hero-v-hybrid .hb-lb li.hit { animation: hbHit 1s ease-out; }
.hero-v-hybrid .hb-lb li .dl { position: absolute; right: .45rem; top: -2px; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: var(--green); opacity: 0; pointer-events: none; }
.hero-v-hybrid .hb-lb li .dl.show { animation: hbDelta 1s ease-out forwards; }

/* raw ops report */
.hero-v-hybrid .hb-rep { top: 40%; right: -3%; width: 228px; }
.hero-v-hybrid .hb-rep .hb-card-in { animation-delay: -4.5s; }
.hero-v-hybrid .hb-rep .desc { color: var(--hb-ink); font-size: .82rem; line-height: 1.35; min-height: 2.7em; }
.hero-v-hybrid .hb-rep .desc .mono { color: var(--green); font-size: .76rem; }
.hero-v-hybrid .hb-rep .sev { display: flex; align-items: center; justify-content: space-between; margin-top: .45rem; }
.hero-v-hybrid .hb-rep .sev .tag { border-radius: 0; font-size: .7rem; padding: .18rem .5rem; }
.hero-v-hybrid .hb-rep .cvss { font-family: var(--font-mono); font-weight: 700; color: var(--red); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1; }
.hero-v-hybrid .hb-rep .bar { height: 5px; background: var(--hb-hair); margin-top: .5rem; overflow: hidden; }
.hero-v-hybrid .hb-rep .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange-fill), var(--red)); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.hero-v-hybrid .hb-rep .rep-body { transition: opacity .25s ease, transform .25s ease; }
.hero-v-hybrid .hb-rep .rep-body.is-out { opacity: 0; transform: translateY(6px); }

/* flag toast + koth: icon-row cards */
.hero-v-hybrid .hb-row-card .hb-card-body { display: flex; align-items: center; gap: .7rem; padding-right: 1.1rem; }
.hero-v-hybrid .hb-row-card .ic { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.05rem; background: rgba(var(--hb-green-rgb),.14); color: var(--green); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.hero-v-hybrid .hb-row-card b { color: var(--hb-ink); display: block; font-size: .86rem; line-height: 1.25; white-space: nowrap; }
.hero-v-hybrid .hb-row-card small { color: var(--muted); font-family: var(--font-mono); font-size: .7rem; display: block; white-space: nowrap; }
.hero-v-hybrid .hb-flag { bottom: 15%; left: -4%; }
.hero-v-hybrid .hb-flag .hb-card-in { animation-delay: -2.5s; }
.hero-v-hybrid .hb-flag .tx { transition: opacity .28s ease, transform .28s ease; min-width: 0; }
.hero-v-hybrid .hb-flag .tx.is-out { opacity: 0; transform: translateX(-14px); }
.hero-v-hybrid .hb-flag .tx.is-in { opacity: 0; transform: translateX(14px); transition: none; }
.hero-v-hybrid .hb-flag .ic.pop { animation: hbPop .5s cubic-bezier(.2,.8,.2,1); }
.hero-v-hybrid .hb-koth { bottom: 3%; right: 6%; }
.hero-v-hybrid .hb-koth .hb-card-in { animation-delay: -5.5s; }
.hero-v-hybrid .hb-koth .ic { background: rgba(253,154,51,.15); color: var(--orange); }
.hero-v-hybrid .hb-koth .hb-card-body.flash { animation: hbFlash .9s ease-out; }
.hero-v-hybrid .hb-koth .tm { color: var(--orange); font-variant-numeric: tabular-nums; }

/* ---- event ticker chip: the original hero-ticker, re-cut to match the panel language ---- */
.hero-v-hybrid .hb-ticker.hero-ticker { border-radius: 0; border: 1px solid var(--line-2); background: var(--hb-panel); padding: .4rem .7rem .4rem .45rem; margin: 0 0 1.4rem; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.hero-v-hybrid .hb-ticker .ticker-item { font-size: .9rem; }
.hero-v-hybrid .hb-ticker .t-status { border-radius: 0; }
.hero-v-hybrid .hb-ticker .ticker-dots button, .hero-v-hybrid .hb-ticker .ticker-dots button[aria-selected="true"] { border-radius: 0; }

@keyframes hbSpin { to { transform: rotate(360deg); } }
@keyframes hbOrbit { to { --hb-spin: 360deg; } }
@keyframes hbBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.012); } }
@keyframes hbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hbPoke { 0% { transform: rotate(0); } 22% { transform: rotate(-4deg) translateY(-6px); } 55% { transform: rotate(2.5deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes hbBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(90deg); } }
@keyframes hbTag { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -70%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -110%); } 100% { opacity: 0; transform: translate(-50%, -150%); } }
@keyframes hbBlink { 50% { opacity: .15; } }
@keyframes hbHit { 0% { background: rgba(var(--hb-green-rgb),.3); } 100% { background: var(--hb-row); } }
@keyframes hbDelta { 0% { opacity: 0; transform: translateY(2px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes hbPop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes hbFlash { 0% { background: rgba(253,154,51,.28); } 100% { background: var(--hb-panel); } }

/* pause every CSS loop while the tab is hidden */
.hero-v-hybrid.hb-paused *, .hero-v-hybrid.hb-paused *::before, .hero-v-hybrid.hb-paused *::after { animation-play-state: paused !important; }

/* ---- responsive ---- */
@media (max-width: 1399.98px) {
  .hero-v-hybrid .hb-stage { height: clamp(500px, 60vh, 600px); }
  .hero-v-hybrid .hb-lb { width: 220px; }
  .hero-v-hybrid .hb-rep { width: 214px; }
}
@media (max-width: 1199.98px) {
  .hero-v-hybrid .hb-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .hero-v-hybrid .hb-stage { height: 540px; }
  .hero-v-hybrid .hb-breathe { width: min(360px, 66%); }
  .hero-v-hybrid .hb-lb { left: -4%; }
  .hero-v-hybrid .hb-koth { right: 0; }
}
@media (max-width: 991.98px) {
  .hero-v-hybrid { min-height: 0; }
  .hero-v-hybrid .hb-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-v-hybrid .hb-split, .hero-v-hybrid .hb-split-edge, .hero-v-hybrid .hb-grid { display: none; }
  .hero-v-hybrid .hb-scan { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 52%); }
  .hero-v-hybrid .hb-stage-col { position: relative; isolation: isolate; padding-top: 2.6rem; }
  .hero-v-hybrid .hb-stage-col::before, .hero-v-hybrid .hb-stage-col::after { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); top: 0; bottom: -40rem; z-index: -1; pointer-events: none; }
  .hero-v-hybrid .hb-stage-col::before { background: linear-gradient(180deg, var(--hb-olive-a) 0%, var(--hb-olive-b) 100%); clip-path: polygon(0 2.2rem, 100% 0, 100% 100%, 0 100%); }
  .hero-v-hybrid .hb-stage-col::after { background: var(--orange-fill); clip-path: polygon(0 2.2rem, 100% 0, 100% 3px, 0 calc(2.2rem + 3px)); }
  .hero-v-hybrid .hb-stage { height: 520px; }
  .hero-v-hybrid .hb-breathe { width: min(380px, 60%); }
  .hero-v-hybrid .hb-lb { left: 0; top: 2%; }
  .hero-v-hybrid .hb-rep { right: 0; top: 4%; }
  .hero-v-hybrid .hb-flag { left: 0; bottom: 8%; }
  .hero-v-hybrid .hb-koth { right: 0; bottom: 30%; }
}
@media (max-width: 575.98px) {
  .hero-v-hybrid .hb-wrap { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .hero-v-hybrid h1 { font-size: clamp(2.3rem, 1rem + 7.5vw, 3.2rem); }
  .hero-v-hybrid .hb-ctas .hb-btn { width: 100%; }
  .hero-v-hybrid .hb-proof { grid-template-columns: 1fr; gap: 2px; }
  .hero-v-hybrid .hb-proof li { flex-direction: row; align-items: baseline; gap: .7rem; padding: .6rem .8rem; border-top: 0; border-left: 2px solid var(--line-2); }
  .hero-v-hybrid .hb-proof li:first-child { border-left-color: var(--orange-fill); }
  .hero-v-hybrid .hb-proof li b { font-size: 1.2rem; min-width: 2.6rem; }
  .hero-v-hybrid .hb-stage { height: 460px; }
  .hero-v-hybrid .hb-breathe { width: 62%; }
  .hero-v-hybrid .hb-reticle { width: 92%; margin-left: -46%; margin-top: -48%; }
  .hero-v-hybrid .hb-card-title { white-space: nowrap; }
  .hero-v-hybrid .hb-card-title .lg, .hero-v-hybrid .hb-lb .hb-card-title .n { display: none; }
  .hero-v-hybrid .hb-lb { width: 196px; font-size: .74rem; }
  .hero-v-hybrid .hb-lb li { padding: .25rem .4rem; gap: .4rem; }
  .hero-v-hybrid .hb-lb li:nth-child(n+4) { display: none; }
  .hero-v-hybrid .hb-rep { width: 150px; top: 6%; }
  .hero-v-hybrid .hb-rep .desc { display: none; }
  .hero-v-hybrid .hb-rep .sev { margin-top: 0; }
  .hero-v-hybrid .hb-flag { bottom: 4%; left: 0; }
  .hero-v-hybrid .hb-flag b { font-size: .8rem; }
  .hero-v-hybrid .hb-koth { display: none; }
  .hero-v-hybrid .hb-token-pos:nth-child(3) { display: none; }
  .hero-v-hybrid .hb-floor { bottom: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v-hybrid *, .hero-v-hybrid *::before, .hero-v-hybrid *::after { animation: none !important; transition: none !important; }
  .hero-v-hybrid .hb-sweep { display: none; }
  .hero-v-hybrid .hb-rep .bar span { width: 86%; }
  .hero-v-hybrid .hb-breathe { cursor: default; }
}