/* Page base */
.hero { position: relative; text-align: center; }
.hero img { width: 100%; height: 360px; object-fit: cover; filter: brightness(68%); display:block; }
.hero .hero-text{
  position:absolute; inset:0; display:grid; place-content:center; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.hero h1{ font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.hero p{ margin-top: 6px; opacity:.95; }

/* search */
.search-section{ padding: 18px 12px; display:grid; place-items:center; }
#searchInput{
  width:min(780px,90%); padding:12px 14px; border-radius:10px; border:1px solid #cfe0ff;
  outline:none; font-size:1rem; background:#fff;
}

/* categories */
.category-section{ padding: 24px 16px; text-align:center; background:#f8f8f8; }
.category-section h2{ color:#004aad; margin-bottom:14px; }
.category-grid{
  max-width:1100px; margin:0 auto;
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
}
.category-card{
  background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:16px; opacity:0; transform:translateY(40px); transition:all .7s ease-out;
}
.category-card.visible{ opacity:1; transform:translateY(0); }
.category-card img{ width:100%; height:150px; object-fit:cover; border-radius:8px; display:block; margin-bottom:10px; }
.category-card h3{ color:#004aad; margin-bottom:8px; }
.category-card ul{ list-style:disc inside; text-align:left; }

/* websites */
.websites-section{ padding: 24px 16px; text-align:center; }
.websites-section h2{ color:#004aad; margin-bottom:14px; }
.website-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.website-card{
  display:flex; flex-direction:column; align-items:center; background:#fff;
  padding:14px; border-radius:10px; width:150px; box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .25s ease;
}
.website-card:hover{ transform:translateY(-5px); }
.website-card img{ width:80px; height:80px; margin-bottom:10px; }

/* contribute */
.contribute-section{ text-align:center; background:#f0faff; padding:26px 16px; margin-top:20px; }
.contribute-section h2{ color:#004aad; margin-bottom:8px; }

/* small screens */
@media (max-width: 640px){
  .hero img{ height: 300px; }
}