/* ==========================================================================
   Home — Modern / Simple redesign
   Replaces home-remodel.css on index.php only. Loaded after site.css and
   public-refresh.css, so it only needs to define what's new/different.
   ========================================================================== */

:root{
  --hm-paper:#FFFFFF;
  --hm-ink:#14151A;
  --hm-ink-soft:#686D78;
  --hm-line:#E6E5E1;
  --hm-card:#FAFAF8;
  --hm-violet:#6D5EF0;
  --hm-teal:#2FBFAE;
  --hm-amber:#F2A93B;
  --hm-radius:14px;
}

.hm-home{background:var(--hm-paper);}
.hm-home *{box-sizing:border-box;}
.hm-shell{max-width:1160px;margin:0 auto;padding:0 24px;}

/* ---------- Hero ---------- */
.hm-hero{
  position:relative;
  padding:64px 0 56px;
  background:
    radial-gradient(1200px 260px at 20% 0%, rgba(109,94,240,.10), transparent 60%),
    radial-gradient(1000px 260px at 75% 10%, rgba(47,191,174,.10), transparent 60%),
    radial-gradient(900px 240px at 50% 0%, rgba(242,169,59,.08), transparent 60%);
}
.hm-kicker{display:block;font-size:16px;color:var(--hm-ink-soft);margin-bottom:4px;}
.hm-hero h1{
  font-size:42px;line-height:1.08;margin:0;color:var(--hm-ink);
  font-weight:700;letter-spacing:-0.01em;
}
.hm-hero h1 .hm-accent{color:var(--hm-violet);}
@media (max-width:520px){ .hm-hero h1{ font-size:30px; } }

.hm-search{
  margin-top:28px;max-width:640px;
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--hm-line);border-radius:999px;
  padding:6px 6px 6px 22px;box-shadow:0 10px 26px -16px rgba(20,21,26,.15);
}
.hm-search input{
  flex:1;background:transparent;border:0;outline:0;font-size:15.5px;padding:13px 6px;
  color:var(--hm-ink);font-family:inherit;
}
.hm-search input::placeholder{color:#9CA0AA;}
.hm-search button{
  width:40px;height:40px;border-radius:50%;background:var(--hm-ink);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.hm-search button:hover{background:var(--hm-violet);}
.hm-search button svg{width:17px;height:17px;}

/* ---------- Recently used strip ---------- */
.hm-recent-wrap{margin-top:-30px;position:relative;z-index:2;}
.hm-recent{
  background:#fff;border:1px solid var(--hm-line);border-radius:16px;padding:18px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  box-shadow:0 14px 30px -20px rgba(20,21,26,.18);
}
.hm-recent-label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;white-space:nowrap;color:var(--hm-ink);}
.hm-recent-items{display:flex;gap:12px;flex:1;flex-wrap:wrap;}
.hm-recent-item{
  background:var(--hm-card);border:1px solid var(--hm-line);border-radius:10px;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;min-width:150px;flex:1;
  color:var(--hm-ink);
}
.hm-recent-item span{color:var(--hm-violet);}
.hm-recent-item:hover{border-color:var(--hm-violet);}

/* ---------- Sections ---------- */
.hm-section{padding:56px 0;}
.hm-section-tight{padding-top:0;}
.hm-section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:28px;flex-wrap:wrap;
}
.hm-section-head h2{font-size:22px;margin:0;color:var(--hm-ink);font-weight:700;letter-spacing:-0.01em;}
.hm-viewall{font-size:14px;color:var(--hm-ink);border-bottom:1px solid var(--hm-line);padding-bottom:2px;white-space:nowrap;}
.hm-viewall:hover{border-color:var(--hm-violet);color:var(--hm-violet);}

/* ---------- Category grid ---------- */
.hm-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media (max-width:980px){ .hm-cat-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .hm-cat-grid{grid-template-columns:repeat(2,1fr);} }

.hm-cat-card{
  background:#fff;border:1px solid var(--hm-line);border-radius:12px;padding:22px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color .15s, transform .15s;color:var(--hm-ink);
}
.hm-cat-card:hover{border-color:var(--hm-violet);transform:translateY(-2px);}
.hm-cat-icon{width:26px;height:26px;color:var(--hm-violet);display:inline-flex;}
.hm-cat-icon svg{width:100%;height:100%;}
.hm-cat-card strong{font-size:14.5px;font-weight:600;}
.hm-cat-card small{color:var(--hm-ink-soft);font-size:12px;font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* ---------- Popular tool grid ---------- */
.hm-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:860px){ .hm-tool-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .hm-tool-grid{grid-template-columns:1fr;} }

.hm-tool-card{
  background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;gap:8px;color:var(--hm-ink);transition:border-color .15s;
}
.hm-tool-card:hover{border-color:var(--hm-violet);}
.hm-tool-card small{color:var(--hm-violet);font-size:12.5px;font-weight:600;letter-spacing:.01em;}
.hm-tool-card h3{font-size:16.5px;margin:2px 0 0;font-weight:600;}
.hm-tool-card p{color:var(--hm-ink-soft);font-size:13.5px;line-height:1.5;margin:0;flex:1;}
.hm-tool-card b{color:var(--hm-ink);font-size:13.5px;font-weight:600;margin-top:6px;}
.hm-tool-card:hover b{color:var(--hm-violet);}
.hm-tool-icon{display:none;} /* icon kept in markup for reuse elsewhere but hidden for a cleaner card */

/* ---------- CTA banner ---------- */
.hm-cta{
  background:var(--hm-ink);border-radius:20px;padding:44px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;color:#fff;flex-wrap:wrap;
}
.hm-cta h2{font-size:22px;color:#fff;max-width:30ch;margin:0;font-weight:700;}
.hm-cta p{color:#B5B8C2;margin:10px 0 0;max-width:40ch;font-size:14.5px;}
.hm-cta-btn{
  background:linear-gradient(135deg,var(--hm-violet),var(--hm-teal));color:#fff;
  padding:13px 22px;border-radius:999px;font-weight:600;font-size:14.5px;white-space:nowrap;
}
.hm-cta-btn:hover{opacity:.92;}