@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--red:#f0442e;--ink:#0b0d0e;--muted:#8a9296;--panel:#171b1d;--white:#f3f4f2;--line:#2a3033;--metal:#c6c9c8}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--white);font:15px/1.65 Inter,Arial,sans-serif;background-image:radial-gradient(ellipse at 80% 0%,#202629 0%,transparent 42%)}
.shell{display:flex;min-height:100vh}.sidebar{width:270px;flex-shrink:0;background:#101314;border-right:1px solid #2a3033;padding:25px 20px;display:flex;flex-direction:column;position:relative}
.sidebar:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--red)}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 38px;padding:4px 0 25px;border-bottom:1px solid var(--line)}
.brand img{width:100%;max-width:210px;height:auto;object-fit:contain}.brand-caption{font-size:8px;letter-spacing:1.5px;color:#8b9498;text-align:center;font-weight:700}
.side-label,.eyebrow{font-size:10px;letter-spacing:2px;color:#8b9298;font-weight:800}.side-label{margin-bottom:13px}
nav{display:grid;gap:6px}nav button{background:transparent;border:1px solid transparent;color:#aeb5b9;text-align:left;padding:13px 12px;border-radius:2px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;position:relative}
nav button:hover{background:#1b2022;color:#fff;border-color:#30383b}nav button.active{background:linear-gradient(90deg,#2b1b18,#191c1e);color:#fff;border-color:#3d2a25}nav button.active:before{content:"";position:absolute;left:-1px;top:0;height:100%;width:3px;background:var(--red)}
.side-foot{margin-top:auto;color:#d2d5d5;font-size:12px;border-top:1px solid var(--line);padding-top:18px}.side-foot small{padding-left:16px;color:#7e878c}.dot{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:7px;box-shadow:0 0 10px #f0442e66}
main{flex:1;min-width:0;padding:38px clamp(22px,5vw,76px) 20px}header{max-width:1200px;margin:0 auto 30px}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow-mark{width:22px;height:3px;background:var(--red);display:inline-block}
.headrow{display:flex;justify-content:space-between;align-items:center;gap:20px}.headrow h1{font:800 clamp(32px,4.5vw,60px)/.98 'Barlow Condensed',Impact,sans-serif;letter-spacing:.3px;margin:17px 0 24px;text-transform:uppercase;max-width:850px}
.cta{display:inline-block;background:var(--red);color:white;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:1.4px;padding:13px 20px;white-space:nowrap;clip-path:polygon(0 0,100% 0,100% 75%,88% 100%,0 100%);transition:.2s}.cta:hover{background:#ff5b44;transform:translateY(-2px)}
.rule{height:1px;background:var(--line);position:relative}.rule span{display:block;width:100px;height:3px;background:var(--red);position:absolute;top:-1px}
#content{max-width:1200px;margin:auto;min-height:50vh}
.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}.hero-copy{padding:10px 0}.hero-copy h2{font:800 clamp(36px,4vw,58px)/.98 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;margin:12px 0 20px;text-transform:uppercase}.hero-copy h2 em{color:var(--red);font-style:normal}.hero-copy p{color:#b5bdc1;max-width:510px;font-size:14px}
.hero-image{position:relative;min-height:360px;overflow:hidden;border:1px solid #353b3f;background:#181c1e;box-shadow:14px 14px 0 #171b1d}.hero-image img{width:100%;height:100%;min-height:360px;object-fit:cover;filter:contrast(1.08) saturate(.82)}.hero-image:after{content:"4×4 / BUILT FOR THE TERRAIN";position:absolute;bottom:0;left:0;background:var(--red);padding:9px 15px;font-size:10px;letter-spacing:2px;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.stat{border-top:2px solid #343a3e;padding-top:12px}.stat strong{font:700 30px 'Barlow Condensed',Impact,sans-serif;color:white;display:block}.stat small{font-size:9px;color:#8b9298;letter-spacing:1px;font-weight:700}
.section-title{font:700 34px 'Barlow Condensed',Impact,sans-serif;margin:0 0 22px;text-transform:uppercase;letter-spacing:.5px}.section-title span{color:var(--red)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{background:linear-gradient(145deg,#1a1f21,#121516);border:1px solid #303639;overflow:hidden;transition:.22s}.card:hover{transform:translateY(-4px);border-color:#674036;box-shadow:0 10px 28px #0005}.card img{width:100%;height:200px;object-fit:contain;background:#e9e9e6;padding:8px}.card .cardtext{padding:16px 17px 19px;border-top:2px solid var(--red)}.card h3{font:700 20px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px}.card p{font-size:12px;color:#aab2b6;margin:0}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:25px}.feature img{width:100%;height:340px;object-fit:cover;border:1px solid #343a3d}.feature p,.copy p{color:#b5bdc1}.copy{max-width:900px}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contactbox{background:#181d1f;border:1px solid #30363a;padding:23px;position:relative}.contactbox:before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;background:var(--red)}.contactbox strong{color:var(--red);display:block;font-size:10px;letter-spacing:1.5px;margin-bottom:10px}
footer{max-width:1200px;margin:50px auto 0;border-top:1px solid #30363a;padding:18px 0;display:flex;justify-content:space-between;gap:15px;color:#788187;font-size:10px;letter-spacing:1px}footer b{color:white}
@media(max-width:850px){.sidebar{width:215px;padding:20px 12px}.hero,.feature{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.shell{display:block}.sidebar{width:100%;padding:15px}.brand{margin-bottom:18px;padding-bottom:15px}.brand img{max-width:145px}nav{grid-template-columns:repeat(2,1fr)}.side-label,.side-foot{display:none}main{padding:24px 16px}.headrow h1{font-size:32px}.headrow{align-items:flex-start}.cards,.contactgrid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.hero-image{min-height:250px}.hero-image img{min-height:250px}footer{flex-wrap:wrap}}