.hero { max-width:760px; margin:3rem auto 2.5rem; text-align:center; }
.hero h1 { font-size:clamp(28px, 5vw, 44px); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:0 0 1rem; text-wrap:balance; }
.hero p { font-size:18px; color:var(--muted); line-height:1.6; margin:0 auto 1.75rem; max-width:34em; }
.hero .cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.hero .cta .button { padding:.6rem 1.3rem; font-size:15px; }
.shelf-wrap { margin:0 auto 3rem; max-width:1100px; }
.shelf-wrap h2 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:500; text-align:center; margin:0 0 1rem; }
.shelf { display:flex; gap:1.1rem; justify-content:center; align-items:flex-end; flex-wrap:wrap; padding:0 1rem 1rem; border-bottom:10px solid var(--line); }
.shelf img { display:block; height:150px; width:auto; max-width:110px; object-fit:contain; border-radius:3px; box-shadow:0 2px 8px var(--shadow); }
.shelf a { display:block; line-height:0; }
@media (max-width: 640px) { .shelf img { height:110px; } }
.why { max-width:760px; margin:0 auto 4rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.5rem 2rem; }
.why h3 { font-size:15px; font-weight:500; margin:0 0 .3rem; }
.why p { margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }