*{box-sizing:border-box}
body{margin:0;font-family:Helvetica,Arial,sans-serif;background:#f5f5f5}
a{color:#F5C200;text-decoration:none}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:700px){.product-grid{grid-template-columns:repeat(2,1fr)}}
.featured-grid{display:flex;overflow-x:auto;gap:16px;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.featured-grid>*{flex:0 0 220px;scroll-snap-align:start}
.hero-wrap{position:relative;width:100%;aspect-ratio:1440/704;overflow:hidden;background:#111}
.hero-content{position:relative;z-index:2;max-width:520px;height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:76px}
.hero-h1{font-size:44px;font-weight:900;color:#fff;margin:0 0 16px;line-height:1.1;letter-spacing:-0.5px}
.hero-sub{font-size:17px;color:rgba(255,255,255,0.75);margin:0 0 32px;line-height:1.55}
@media(max-width:640px){
  .hero-wrap{aspect-ratio:unset;min-height:320px}
  .hero-bg-img{background-position:right center!important}
  .hero-content{max-width:100%;padding:20px 14px}
  .hero-h1{font-size:20px;margin:0 0 6px}
  .hero-sub{font-size:12px;margin:0 0 12px}
  .hero-content button{padding:8px 16px!important;font-size:12px!important}
  .site-nav{padding:10px 14px!important;gap:8px!important}
  .crauft-logo svg{width:110px!important;height:36px!important}
  .nav-links{gap:12px!important}
  .nav-links>div{font-size:12px!important}
  .nav-cta{padding:7px 14px!important;font-size:12px!important}
}
.crauft-logo{display:flex;align-items:center;gap:10px;cursor:pointer}