@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Rubik:wght@400;500;600;700;800&display=swap');

:root{--red:#EE1C24;--red2:#ff4147}
*{box-sizing:border-box}
body{margin:0;background:#e9e9e9;color:#fff;font-family:'Rubik',Arial,sans-serif}
button{font:inherit;cursor:default}
.deck{max-width:1440px;margin:0 auto}
.intro{background:#151515;color:#fff;padding:18px 48px;display:flex;justify-content:space-between;align-items:center}
.intro strong{font-size:17px}.intro span{font-size:13px;color:#b7b7b7}
.frame{height:900px;position:relative;overflow:hidden;background:#000;margin-bottom:40px;box-shadow:0 14px 50px #0002}
.tag{position:absolute;z-index:6;top:20px;right:22px;background:var(--red);color:#fff;padding:9px 14px;border-radius:50px;font-weight:700;font-size:12px;letter-spacing:.08em}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.brand img{width:42px;height:42px;object-fit:contain}
h1,.display{font-family:'Fjalla One',Impact,sans-serif;text-transform:uppercase;line-height:.92;margin:0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}

header{position:relative;z-index:3;padding:26px 50px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff22}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600;color:#ddd}
.cta{border:0;padding:14px 22px;font-weight:700;border-radius:3px;background:var(--red);color:#fff}
.ghost{background:transparent;border:1px solid #ffffff55;color:#fff;padding:13px 20px;font-weight:700;border-radius:3px}

.hero{position:relative;height:490px}
.heroimg{position:absolute;inset:0;background:url('assets/action-bw.jpg') center 30%/cover;filter:grayscale(1) contrast(1.15)}
.shade{position:absolute;inset:0;background:linear-gradient(100deg,#000 12%,#000000e6 40%,#00000066 68%,transparent 100%);mix-blend-mode:normal}
.shade::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#ee1c2433 100%)}
.herotxt{position:relative;z-index:2;padding:80px 60px 0;max-width:740px}
.herotxt h1{font-size:96px}
.herotxt h1 .hi{color:var(--red)}
.lead{font-size:18px;max-width:480px;line-height:1.5;color:#ddd;margin-top:18px}
.actions{display:flex;gap:14px;margin-top:30px}

.gallery{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#1a1a1a;height:215px}
.card{position:relative;background:#111;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background-size:cover;background-position:center}
.card b,.card span{position:relative;z-index:1}
.card b{font:800 24px 'Fjalla One',sans-serif}
.card span{font-size:12.5px;color:#bbb}
.card.big::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000d,transparent 55%)}
.card.big span{position:relative;z-index:1;font:800 20px 'Fjalla One',sans-serif;text-transform:uppercase;color:#fff}
.card.red{background:var(--red)}
.card.red b{color:#fff;font-size:30px}
.card.red span{color:#ffe0e1}

.note{max-width:1440px;margin:-15px auto 55px;background:#fff;padding:18px 25px;font-size:14px;line-height:1.5;color:#333}

@media(max-width:700px){
  .frame{height:1150px}
  .nav span{display:none}
  header{padding:16px}
  .herotxt{padding:50px 22px 0}
  .herotxt h1{font-size:52px}
  .gallery{grid-template-columns:repeat(2,1fr);height:auto}
  .card{height:150px}
}