:root { --red:#ff3131; --blue:#004aad; --white:#fff; --black:#000; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { background:var(--white); color:var(--black); font-family:'Poppins',Arial,sans-serif; line-height:1.6; font-size:16px; }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.label { font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:13px; }

header { border-bottom:3px solid var(--black); position:sticky; top:0; z-index:100; background:var(--white); }
header .wrap { display:flex; justify-content:space-between; align-items:center; padding-top:16px; padding-bottom:16px; flex-wrap:wrap; gap:12px; }
.logo { font-size:30px; font-weight:700; text-decoration:none; color:var(--red); }
.logo small { color:var(--black); font-size:14px; margin-left:8px; font-weight:400; }
nav { display:flex; gap:20px; flex-wrap:wrap; }
nav a { text-decoration:none; }
nav a:hover { color:var(--red); }
.strip { background:var(--blue); color:var(--white); text-align:center; padding:8px 20px; border-bottom:3px solid var(--black); }

.hero { padding:72px 0 64px; border-bottom:3px solid var(--black); }
.hero h1 { font-size:clamp(34px,5.5vw,58px); line-height:1.15; margin:8px 0 0; }
.hero h1 span { color:var(--red); }
.hero p.intro { margin:24px 0 32px; font-size:18px; }

.btn { display:inline-block; padding:12px 22px; border:3px solid var(--black); background:var(--red); color:var(--white); text-decoration:none; font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:14px; box-shadow:5px 5px 0 var(--black); margin-right:12px; margin-bottom:12px; }
.btn:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--black); }
.btn.alt { background:var(--white); color:var(--black); }

section { padding:64px 0; border-bottom:3px solid var(--black); }
h2 { font-size:clamp(26px,4vw,38px); margin:8px 0 28px; line-height:1.25; }
.lead { max-width:62ch; margin:-12px 0 32px; }

.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.faq { grid-template-columns:1fr; max-width:760px; }
.split { display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:center; }
.split p { margin-bottom:14px; }
.card { border:3px solid var(--black); padding:22px; background:var(--white); box-shadow:6px 6px 0 var(--black); }
.card h3 { font-size:19px; margin-bottom:8px; line-height:1.3; }
.card .n { color:var(--red); display:block; margin-bottom:6px; }
.card.blue { border-color:var(--blue); box-shadow:6px 6px 0 var(--blue); }

.photo { border:3px solid var(--black); box-shadow:6px 6px 0 var(--black); background:var(--white); }
.photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.photo .ph { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; background:#f2f2f2; font-size:13px; }
.photo figcaption { border-top:3px solid var(--black); padding:8px 12px; font-size:12px; }
.stack { display:grid; gap:24px; }

.tools { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.tools li { border:2px solid var(--blue); color:var(--blue); padding:4px 12px; font-weight:500; font-size:14px; }

.band { background:var(--blue); color:var(--white); }
.band ul { margin:0 0 28px 20px; max-width:60ch; }
.band li { margin-bottom:6px; }
.band .btn { border-color:var(--white); }
.band .btn.alt { color:var(--black); }
.band .photo { border-color:var(--white); color:var(--black); }

.shop { text-align:center; }
.shop p { max-width:50ch; margin:0 auto; }

footer { background:var(--black); color:var(--white); padding:40px 0; }
footer .wrap { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
footer h4 { color:var(--red); margin-bottom:8px; }

#to-top { position:fixed; right:20px; bottom:20px; width:48px; height:48px; border:3px solid var(--black); background:var(--red); color:var(--white); font-size:22px; font-family:inherit; cursor:pointer; box-shadow:4px 4px 0 var(--black); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:100; }
#to-top.show { opacity:1; visibility:visible; }
#to-top:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--black); }