body[data-page="index"] main{
  background:var(--soft);
}

main{
  display:flex;
  flex-direction:column;
  gap:3.5rem;
  padding:0 clamp(1rem,4vw,2.75rem) 3.5rem;
}

.hero{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  width:min(1400px,92vw);
  margin:clamp(1.5rem,4vw,3rem) auto 0;
  box-shadow:0 28px 60px rgba(0,0,0,.2);
  isolation:isolate;
}

.hero-media,
.hero-media img{
  display:block;
  width:100%;
  height:100%;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:-2;
}

.hero-media img{
  object-fit:cover;
  object-position:center top;
}

.hero-overlay{
  background:linear-gradient(130deg,rgba(17,17,17,.84) 0%,rgba(17,17,17,.58) 52%,rgba(17,17,17,.28) 100%);
  padding:clamp(3rem,6.5vw,5.75rem);
  min-height:clamp(440px,55vw,640px);
  display:flex;
  align-items:flex-end;
}

.hero-text{
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:1.35rem;
}

.hero-text h1{
  font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:1.05;
  margin:0;
}

.hero-text p{
  margin:0;
  font-size:clamp(1.05rem,2.2vw,1.2rem);
  color:rgba(255,255,255,.92);
}

.hero-highlights{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.5rem;
  font-size:clamp(.95rem,1.9vw,1.05rem);
  color:rgba(255,255,255,.9);
}

.hero-highlights li{
  position:relative;
  padding-left:1.15rem;
}

.hero-highlights li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--yellow);
}

.home-categories,
.cta{
  width:min(1320px,94vw);
  margin-inline:auto;
  background:#fff;
  border-radius:24px;
  padding:2.75rem clamp(1.5rem,4vw,3.25rem);
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.home-categories h2,
.cta h2{
  margin-top:0;
  font-size:1.9rem;
  color:var(--dark);
}

.home-categories .grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:1.75rem;
}

.home-categories .card{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  background:linear-gradient(145deg,#fff,var(--soft));
  border-radius:20px;
  padding:1.25rem;
  text-align:center;
  text-decoration:none;
  color:var(--dark);
  transition:transform .2s ease,box-shadow .2s ease;
}

.home-categories .card picture{
  position:relative;
  display:block;
  width:100%;
  padding-top:65%;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.home-categories .card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-categories .card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 34px rgba(0,0,0,.12);
}

.cta{
  text-align:center;
  display:grid;
  gap:1rem;
}

.cta p{
  margin:0;
  font-size:1.05rem;
  color:var(--muted);
}

.cta .hero-actions{
  justify-content:center;
}

@media (max-width:720px){
  .hero{
    border-radius:20px;
  }

  .hero-overlay{
    padding:2.25rem 1.5rem 2.75rem;
    min-height:320px;
  }

  .hero-text{
    gap:1rem;
  }

  .home-categories,
  .cta{
    width:100%;
    border-radius:18px;
    padding:2.25rem 1.5rem;
  }
}

@media (max-width:540px){
  .hero-highlights{
    gap:.35rem;
  }

  .home-categories .card picture{
    padding-top:70%;
  }
}