/* ===== HOME HERO ===== */
.hero{
  position:relative;overflow:hidden;
  text-align:center;
  padding:76px 20px 46px;
  background:linear-gradient(180deg,var(--primary-bg) 0%,var(--bg) 100%);
}
.hero-glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:640px;height:360px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb, var(--primary) 22%, transparent),transparent);
  pointer-events:none;
}
.hero-badge{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:700;color:var(--primary);
  background:var(--primary-bg);border:1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  padding:6px 16px;border-radius:50px;margin-bottom:18px;
}
.hero h1{
  position:relative;
  font-size:2.8rem;font-weight:900;letter-spacing:-.03em;
  margin-bottom:16px;
  background:linear-gradient(135deg,var(--text) 0%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{
  position:relative;
  font-size:1.05rem;color:var(--text-secondary);max-width:620px;margin:0 auto 30px;line-height:1.75;
}

/* Hero trust stats */
.hero-stats{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:8px;flex-wrap:wrap;
}
.hero-stat{display:flex;flex-direction:column;align-items:center;line-height:1.3}
.hero-stat strong{font-size:1.3rem;font-weight:900;color:var(--text)}
.hero-stat span{font-size:.72rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.hero-stat-sep{width:1px;height:26px;background:var(--border)}
@media(max-width:500px){.hero-stats{gap:14px}.hero-stat-sep{height:20px}}

/* Search */
.search-box{
  max-width:520px;margin:0 auto 36px;position:relative;
}
.search-box input{
  width:100%;padding:14px 20px 14px 48px;
  border:2px solid var(--border);border-radius:50px;
  font-size:.95rem;font-family:inherit;color:var(--text);
  background:var(--bg);outline:none;transition:border var(--transition);
}
.search-box input::placeholder{color:var(--text-dim)}
.search-box input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-bg)}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-dim);display:flex;align-items:center;pointer-events:none}

/* Sponsors */
.sponsors{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-dim);margin-bottom:10px;
}
.sponsors strong{font-weight:600}
.sponsor-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);padding:5px 12px 5px 6px;border-radius:50px;
  font-weight:600;font-size:.75rem;color:var(--text-secondary);
  transition:var(--transition);
}
.sponsor-badge:hover{background:var(--primary-bg);color:var(--primary)}
.sponsor-badge img{width:20px;height:20px;border-radius:50%;object-fit:cover}

/* Popular tools - bigger cards */
.popular-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}
.popular-card{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  background:var(--bg-card);
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  font-size:.88rem;font-weight:600;color:var(--text);
  transition:all var(--transition);
}
.popular-card:hover{
  border-color:var(--primary);background:var(--primary-bg);
  transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.popular-card .p-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--primary-bg);color:var(--primary);
  display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;
}

/* Trending badge next to "Popular Tools" heading */
.trending-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:700;color:#a8420f;
  background:rgba(225,112,85,.12);padding:5px 12px;border-radius:50px;
  flex-shrink:0;
}

/* Zebra-striped category sections for scan-ability on long homepages */
.section-alt{background:var(--bg-alt)}
.section-alt + .section,
.section + .section-alt{border-top:none}

/* Framed panel around each homepage block (Popular Tools + every category
   section) so each one reads as its own distinct block on the page. */
.section-panel{
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:36px 26px 28px;
  background:rgb(249, 249, 249);

}
@media(max-width:600px){
  .section-panel{padding:22px 18px}
}

/* ===== HOME BLOG SECTION WRAPPER (cards themselves are the shared .blog-card in common.css) ===== */
.blog-section{background:var(--bg-alt);padding:60px 0}

@media(max-width:768px){
  .hero h1{font-size:2.2rem}
  .hero p{font-size:.92rem}
  .hero-glow{width:420px;height:260px;top:-120px}
  .hero-glow-alt,.hero-glow-alt2{display:none}
}
@media(max-width:480px){
  .hero h1{font-size:1.65rem}
  .hero-stats{flex-wrap:nowrap;gap:10px}
  .hero-stat strong{font-size:1rem}
  .hero-stat span{font-size:.6rem}
  .hero-stat-sep{height:18px}
}