@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@500&display=swap');

:root{--navy:#0b1220;--navy2:#0f1830;--red:#e4002b;--red2:#ff2d4e}
*{box-sizing:border-box}
body{margin:0;background:#e9e9e9;color:#151515;font-family:'DM Sans',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:var(--navy);margin-bottom:40px;box-shadow:0 14px 50px #0002;color:#fff}
.tag{position:absolute;z-index:6;top:20px;right:22px;background:#fff;color:#151515;padding:9px 14px;border-radius:50px;font-weight:800;font-size:12px;letter-spacing:.08em;box-shadow:0 3px 15px #0002}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;line-height:1.02;letter-spacing:.03em}
.brand img{width:40px;height:40px;object-fit:contain}
.display,h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;margin:0}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--red2)}

header{position:relative;z-index:3;padding:26px 55px;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:700}
.cta{border:0;padding:14px 22px;font-weight:800;border-radius:3px;background:var(--red);color:#fff}
.cta.small{padding:13px 20px;white-space:nowrap}
.ghost{background:transparent;border:1px solid #ffffff55;color:#fff;padding:13px 20px;font-weight:700;border-radius:3px}

.hero{position:relative;height:470px}
.heroimg{position:absolute;inset:0;background:url('assets/2a38b44f9844.jpg') center 30%/cover}
.shade{position:absolute;inset:0;background:linear-gradient(100deg,var(--navy) 8%,#0b1220d9 38%,#0b122088 62%,#0b122022 100%)}
.herotxt{position:relative;z-index:2;padding:70px 65px 0;max-width:760px}
.herotxt h1{font-size:92px;margin:16px 0 18px}
.lead{font-size:18px;max-width:480px;line-height:1.45;color:#dfe3ee}
.actions{display:flex;gap:14px;margin-top:30px}

.statsband{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(180deg,#c3001f,var(--red))}
.statsband div{padding:22px 30px;border-right:1px solid #ffffff33;text-align:left}
.statsband div:last-child{border-right:0}
.statsband b{display:block;font:800 40px 'DM Mono',monospace;letter-spacing:-.02em}
.statsband span{font-size:12px;font-weight:700;letter-spacing:.1em;color:#ffe3e8}

.fixture{position:relative;z-index:2;display:flex;align-items:center;gap:26px;background:#101a33;padding:22px 55px;border-top:1px solid #ffffff18}
.fxlabel{font-size:12px;font-weight:800;letter-spacing:.14em;color:#8692b5;writing-mode:horizontal-tb;white-space:nowrap}
.fxinfo{flex:1;display:flex;flex-direction:column;gap:2px}
.fxinfo b{font-size:19px}
.fxinfo span{font-size:13px;color:#aab3cf}

.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:1040px}
  .nav span{display:none}
  header{padding:18px}
  .herotxt{padding:60px 22px 0}
  .herotxt h1{font-size:54px}
  .statsband{grid-template-columns:repeat(2,1fr)}
  .statsband div{padding:16px 18px}
  .fixture{flex-wrap:wrap;padding:18px 22px}
}
