/* Homepage only. The image is an intact scene; text is a separate HTML layer. */
.hero.hero--pixel{display:block;width:100%;margin:0;padding:0;overflow:hidden;background:#031416;isolation:isolate}
.hero--pixel .hero__art{position:absolute;inset:0 0 0 160px;z-index:-2;pointer-events:none}
.hero--pixel .hero-scene{width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;object-position:right center;border-radius:0;image-rendering:auto}
.hero--pixel .hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,20,22,.97) 0%,rgba(3,20,22,.93) 28%,rgba(3,20,22,.90) 37%,rgba(3,20,22,.25) 43%,rgba(3,20,22,.06) 55%,rgba(3,20,22,0) 76%)}
.hero--pixel .hero__layout{display:flex;align-items:center;min-height:clamp(680px,78svh,760px);padding-block:36px}
.hero--pixel .hero__content{width:min(520px,33vw);max-width:100%;position:relative;color:var(--ice)}
.hero--pixel .eyebrow{margin-bottom:14px;color:var(--light-teal);font-size:.8125rem;letter-spacing:.045em}
.hero--pixel h1{font-size:clamp(2.6rem,3.6vw,3.75rem);line-height:1.05;margin-bottom:16px;text-wrap:balance}
.hero--pixel .hero-tagline{font-size:1.25rem;line-height:1.4;font-weight:650;color:var(--ice);margin-bottom:16px}
.hero--pixel .hero-lead{font-size:1rem;line-height:1.65;color:#d4e2dc;margin-bottom:18px}
.hero-pillars{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0 0 22px}
.hero-pillars li{font-size:.75rem;line-height:1.5;color:var(--ice);padding:5px 9px;border:1px solid #476566;border-radius:5px;background:#031416cc}
.hero--pixel .actions{gap:10px;margin:0 0 18px;align-items:stretch}
.hero--pixel .button{font-size:.875rem;padding:12px 16px;gap:10px}
.hero--pixel .button.secondary{background:#031416e6}
.hero--pixel .hero-price{font-size:.8125rem;color:#d4e2dc;line-height:1.7;margin:0}
.hero--pixel .hero-price a{display:inline-block}
.hero--pixel .hero-founder{margin-top:18px;color:#d4e2dc;font-size:.8125rem;gap:12px}
.hero--pixel .hero-founder img{width:44px;height:54px}
@media(min-width:1700px){.hero--pixel .hero__art{left:0}}
/* A full-width scene above the copy keeps both sides of the duel on small screens. */
@media(max-width:1199px){
  .hero--pixel .hero__art{inset:0 0 auto;height:50vw}
  .hero--pixel .hero-scene{object-position:center top}
  .hero--pixel .hero__shade{bottom:auto;height:calc(50vw + 32px);background:linear-gradient(180deg,rgba(3,20,22,0) 0%,rgba(3,20,22,0) 62%,rgba(3,20,22,.24) 70%,rgba(3,20,22,.96) 82%,#031416 90%)}
  .hero--pixel .hero__layout{min-height:0;padding-block:calc(50vw - 8px) 32px}
  .hero--pixel .hero__content{width:620px;margin-inline:auto}
  .hero--pixel h1{font-size:clamp(2.25rem,5vw,3.4rem)}
  .hero--pixel .hero-tagline{font-size:1.125rem}
}
@media(max-width:650px){
  .hero--pixel .hero__content{width:100%}
  .hero--pixel .eyebrow{font-size:.75rem;margin-bottom:12px}
  .hero--pixel h1{font-size:clamp(2.1rem,8.7vw,2.7rem);margin-bottom:12px}
  .hero--pixel .hero-lead{font-size:.9375rem}
  .hero--pixel .hero-tagline{font-size:1.0625rem;margin-bottom:12px}
  .hero--pixel .actions{flex-direction:column}
  .hero--pixel .hero-price{font-size:.8125rem}
  .hero-pillars{gap:6px;margin-bottom:18px}
  .hero-pillars li{font-size:.75rem;padding:4px 8px}
}
