.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:none;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:url('paintball-hero-nate.jpg') 50% 42%/cover no-repeat;
  filter:contrast(1.15) brightness(.78);
  opacity:.53;
  transform:scale(1.025);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,#050b14 0%,#050b14f4 25%,#050b14a8 52%,#050b1473 82%,#050b14 100%),
    linear-gradient(0deg,#050b14 0%,transparent 28%,transparent 72%,#050b14d9 100%),
    linear-gradient(115deg,#1683ff2b 0 42%,transparent 54%,#ef233c20 100%);
}
.hero-copy,.hero-preview{position:relative;z-index:1}
.hero-copy{padding:26px 0;text-shadow:0 2px 18px #000}
.hero .lede{color:#e0e7f0;text-shadow:0 2px 12px #000}
.hero-video-proof{display:grid;grid-template-columns:minmax(230px,320px) minmax(120px,165px);gap:16px;align-items:stretch;justify-content:end}
.hero-video-frame{position:relative;overflow:hidden;padding:8px;background:linear-gradient(150deg,var(--blue),#f5f8ff 48%,var(--red));box-shadow:18px 18px 0 #02070d;transform:rotate(1deg)}
.hero-video-frame::after{content:"";position:absolute;inset:8px;background:linear-gradient(180deg,transparent 64%,#030811e8 100%);pointer-events:none}
.hero-video-frame video{display:block;width:100%;height:min(57vh,520px);min-height:430px;object-fit:cover;object-position:center;background:#02060c;filter:contrast(1.07) saturate(.96)}
.video-proof-label{position:absolute;z-index:2;left:22px;right:20px;bottom:20px;color:#fff;font-size:9px;font-weight:900;letter-spacing:.16em;text-align:center}
.hero-proof-rail{display:flex;flex-direction:column;gap:12px;min-width:0}
.hero-proof-brand{display:grid;gap:3px;padding:18px 14px;background:#07111fe8;border:1px solid #385878;backdrop-filter:blur(8px)}
.hero-proof-brand .mini-logo{margin-bottom:9px}
.hero-proof-brand small{color:#7dbaff;font-size:8px;font-weight:900;letter-spacing:.16em}
.hero-proof-brand strong{font:italic 18px Impact,sans-serif;line-height:1;letter-spacing:.04em}
.hero-action-list{display:grid;gap:1px;margin-top:auto;background:#284664;border:1px solid #284664}
.hero-action-list span{padding:9px 8px;background:#07111fe8;color:#a9c8ea;font-size:8px;font-weight:900;letter-spacing:.1em;text-align:center}
.second-example{max-width:1180px;margin:34px auto 70px;padding:30px 5vw;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,300px);gap:6vw;align-items:center;background:linear-gradient(110deg,#071525,#100b13);border-left:4px solid var(--blue);border-right:4px solid var(--red)}
.second-example h2{font:italic clamp(30px,4vw,52px)/.95 Impact,sans-serif;margin:12px 0 15px}.second-example p{color:var(--muted)}
.second-example figure{margin:0;padding:7px;background:linear-gradient(145deg,var(--blue),#fff 50%,var(--red));box-shadow:12px 12px #02060b}.second-example video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#02060b}.second-example figcaption{padding:10px 5px 4px;color:#06101d;font-size:8px;font-weight:900;letter-spacing:.13em;text-align:center}
@media(max-width:850px){
  .hero::before{background-position:62% 38%;opacity:.42}
  .hero::after{background:linear-gradient(180deg,#050b14e8 0%,#050b14a6 42%,#050b14e6 100%),linear-gradient(90deg,#1683ff1f,#ef233c17)}
  .hero-video-proof{grid-template-columns:minmax(210px,300px) minmax(115px,150px);justify-content:center;margin-top:10px}
  .hero-video-frame video{height:500px;min-height:0}
  .second-example{margin-left:4vw;margin-right:4vw}
}
@media(max-width:520px){
  .hero::before{background-position:66% 20%;opacity:.34}
  .hero-copy{padding-top:0}
  .hero-video-proof{grid-template-columns:minmax(0,1fr);width:min(100%,310px);margin:18px auto 0}
  .hero-video-frame{box-shadow:10px 10px 0 #02070d;transform:none}
  .hero-video-frame video{height:auto;aspect-ratio:9/16}
  .hero-proof-rail{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-proof-brand{display:none}
  .hero-action-list{grid-template-columns:1fr 1fr;margin:0}
  .second-example{grid-template-columns:1fr}.second-example figure{width:min(100%,280px);margin:auto}
}
