/* ============================================================
   home.css — PlantCare.dotiam.com Homepage
   hm- prefix for all homepage-specific classes
   ============================================================ */

/* S1: HERO */
.hm-hero { background:linear-gradient(135deg,#14532d 0%,#16a34a 50%,#4ade80 100%); padding:64px 20px 72px; text-align:center; position:relative; overflow:hidden; }
.hm-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }
.hm-hero-inner { position:relative; max-width:800px; margin:0 auto; }
.hm-hero-tag { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:30px; padding:6px 20px; font-size:.75rem; font-weight:700; letter-spacing:.5px; margin-bottom:18px; font-family:var(--pc-font); }
.hm-hero-h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:900; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.2); line-height:1.15; margin:0 0 6px; font-family:var(--pc-font); }
.hm-hero-h1-hi { display:block; font-size:clamp(1rem,2.5vw,1.3rem); font-weight:600; opacity:.88; margin-top:8px; }
.hm-hero-sub { font-size:clamp(.9rem,2vw,1.05rem); color:rgba(255,255,255,.92); margin:16px 0 4px; line-height:1.6; }
.hm-hero-sub-hi { font-size:.84rem; color:rgba(255,255,255,.78); margin:0 0 24px; }
.hm-hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.hm-hero-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; background:#fff; color:#14532d; border-radius:50px; font-size:.95rem; font-weight:800; text-decoration:none; transition:all .2s; box-shadow:0 4px 20px rgba(0,0,0,.2); font-family:var(--pc-font); }
.hm-hero-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.25); }
.hm-hero-btn-secondary { display:inline-flex; align-items:center; gap:8px; padding:14px 24px; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.4); color:#fff; border-radius:50px; font-size:.92rem; font-weight:700; text-decoration:none; transition:all .2s; font-family:var(--pc-font); }
.hm-hero-btn-secondary:hover { background:rgba(255,255,255,.28); transform:translateY(-2px); }
.hm-hero-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.hm-hero-badges span { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:20px; padding:5px 14px; font-size:.75rem; font-weight:600; }

/* S2: STATS */
.hm-stats-bar { background:#fff; border-bottom:1px solid var(--pc-border); padding:20px 0; }
.hm-stats-grid { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; }
.hm-stat { display:flex; flex-direction:column; align-items:center; padding:8px 24px; }
.hm-stat-num { font-size:1.6rem; font-weight:900; color:var(--pc-green-dark); line-height:1; font-family:var(--pc-font); }
.hm-stat-lbl { font-size:.65rem; color:var(--pc-muted); text-transform:uppercase; letter-spacing:.6px; margin-top:3px; font-family:var(--pc-font); }
.hm-stat-div { width:1px; height:36px; background:var(--pc-border); margin:0 4px; }

/* SHARED */
.hm-section { padding:56px 0; }
.hm-featured-section,.hm-blog-section,.hm-finder-section { background:var(--pc-bg); }
.hm-tools-section,.hm-why-section { background:#fff; }
.pc-section-header h2::after { content:''; display:block; width:44px; height:3px; background:linear-gradient(90deg,#15803d,#22c55e); border-radius:3px; margin:10px auto 0; }

/* S3: FEATURED AI TOOLS */
.hm-featured-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hm-featured-card { display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--pc-border); border-radius:18px; overflow:hidden; text-decoration:none; transition:all .25s; box-shadow:0 2px 16px rgba(22,163,74,.08); }
.hm-featured-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(22,163,74,.18); border-color:#86efac; }
.hm-fc-top { background:linear-gradient(135deg,var(--fc-from,#14532d),var(--fc-to,#4ade80)); padding:24px 20px 18px; display:flex; align-items:flex-start; justify-content:space-between; }
.hm-fc-emoji { font-size:3rem; filter:drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
.hm-fc-badge { background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:20px; padding:3px 10px; font-size:.65rem; font-weight:800; }
.hm-fc-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.hm-fc-name { font-size:.95rem; font-weight:800; color:var(--pc-text); font-family:var(--pc-font); }
.hm-fc-desc { font-size:.78rem; color:var(--pc-muted); line-height:1.55; flex:1; font-family:var(--pc-font); }
.hm-fc-desc-hi { font-size:.7rem; color:#9ca3af; font-style:italic; font-family:var(--pc-font); }
.hm-fc-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--pc-border); background:var(--pc-bg); }
.hm-fc-free { font-size:.65rem; font-weight:800; background:rgba(22,163,74,.1); color:#14532d; border:1px solid rgba(22,163,74,.2); border-radius:20px; padding:2px 8px; font-family:var(--pc-font); }
.hm-fc-try { font-size:.72rem; font-weight:700; color:var(--pc-green); font-family:var(--pc-font); }
.hm-featured-card:hover .hm-fc-try { color:#14532d; }

/* S4: ALL TOOLS */
.hm-tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hm-tool-card { display:flex; align-items:center; gap:12px; padding:14px; background:#fff; border:1.5px solid var(--pc-border); border-radius:14px; text-decoration:none; transition:all .2s; box-shadow:0 1px 8px rgba(22,163,74,.06); }
.hm-tool-card:hover { border-color:#86efac; box-shadow:0 4px 20px rgba(22,163,74,.14); transform:translateY(-2px); }
.hm-tc-icon-wrap { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.hm-tc-icon { font-size:1.5rem; }
.hm-tc-body { flex:1; min-width:0; }
.hm-tc-name { font-size:.82rem; font-weight:800; color:var(--pc-text); font-family:var(--pc-font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-tc-desc { font-size:.68rem; color:var(--pc-muted); line-height:1.4; font-family:var(--pc-font); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hm-tc-arrow { color:#86efac; font-size:.9rem; flex-shrink:0; transition:all .2s; }
.hm-tool-card:hover .hm-tc-arrow { color:var(--pc-green); transform:translateX(3px); }
.hm-tools-cta { text-align:center; margin-top:24px; }
.hm-tools-cta-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; background:linear-gradient(135deg,#14532d,#16a34a); color:#fff; border-radius:50px; font-size:.88rem; font-weight:800; text-decoration:none; transition:all .2s; box-shadow:0 4px 18px rgba(22,163,74,.4); font-family:var(--pc-font); }
.hm-tools-cta-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(22,163,74,.55); }

/* S5: BLOG */
.hm-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hm-blog-card { display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--pc-border); border-radius:16px; overflow:hidden; text-decoration:none; transition:all .25s; box-shadow:0 2px 12px rgba(22,163,74,.07); }
.hm-blog-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(22,163,74,.16); border-color:#86efac; }
.hm-blog-img { width:100%; height:180px; object-fit:cover; display:block; }
.hm-blog-img-ph { width:100%; height:180px; display:flex; align-items:center; justify-content:center; font-size:3.5rem; }
.hm-blog-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:6px; }
.hm-blog-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hm-blog-cat { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:.68rem; font-weight:800; font-family:var(--pc-font); }
.hm-blog-time { font-size:.67rem; color:var(--pc-muted); margin-left:auto; font-family:var(--pc-font); }
.hm-blog-title { font-size:.95rem; font-weight:800; color:var(--pc-text); line-height:1.4; font-family:var(--pc-font); }
.hm-blog-title-hi { font-size:.76rem; color:var(--pc-muted); font-family:var(--pc-font); }
.hm-blog-desc { font-size:.78rem; color:var(--pc-muted); line-height:1.55; flex:1; font-family:var(--pc-font); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hm-blog-read { font-size:.74rem; font-weight:700; color:var(--pc-green); font-family:var(--pc-font); margin-top:4px; }
.hm-blog-cta { text-align:center; margin-top:24px; }
.hm-blog-cta-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 26px; background:#fff; border:2px solid #86efac; color:#14532d; border-radius:50px; font-size:.88rem; font-weight:800; text-decoration:none; transition:all .2s; font-family:var(--pc-font); }
.hm-blog-cta-btn:hover {
    background: var(--pc-green);
    color: #721a22;
    border-color: var(--pc-green);
    transform: translateY(-2px);
}
.hm-tools-cta-btn:hover,a.hm-hero-btn-secondary:hover,a.bs-tool-btn:hover{
	color: white;
}
/* S6: WHY */
.hm-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hm-why-card { background:var(--pc-bg); border:1.5px solid var(--pc-border); border-radius:16px; padding:22px; transition:all .2s; }
.hm-why-card:hover { border-color:#86efac; box-shadow:0 4px 20px rgba(22,163,74,.1); transform:translateY(-2px); }
.hm-why-icon { font-size:2.2rem; display:block; margin-bottom:10px; }
.hm-why-title { font-size:.95rem; font-weight:800; color:var(--pc-green-dark); font-family:var(--pc-font); margin-bottom:2px; }
.hm-why-title-hi { font-size:.75rem; color:var(--pc-muted); margin-bottom:8px; font-family:var(--pc-font); }
.hm-why-desc { font-size:.8rem; color:#374151; line-height:1.65; font-family:var(--pc-font); }

/* S7: FINDER */
.hm-finder-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hm-finder-card { display:flex; flex-direction:column; gap:6px; padding:14px 16px; background:#fff; border:1.5px solid var(--pc-border); border-radius:12px; text-decoration:none; transition:all .2s; }
.hm-finder-card:hover { border-color:var(--pc-green); background:rgba(22,163,74,.04); transform:translateX(4px); }
.hm-finder-q { font-size:.82rem; font-weight:600; color:var(--pc-text); font-family:var(--pc-font); line-height:1.4; }
.hm-finder-a { font-size:.76rem; font-weight:800; color:var(--pc-green); font-family:var(--pc-font); }
.hm-finder-card:hover .hm-finder-a { color:#14532d; }

/* RESPONSIVE */
@media(max-width:900px) {
    .hm-featured-grid { grid-template-columns:1fr 1fr; }
    .hm-tools-grid    { grid-template-columns:1fr 1fr; }
    .hm-blog-grid     { grid-template-columns:1fr 1fr; }
    .hm-why-grid      { grid-template-columns:1fr 1fr; }
    .hm-finder-grid   { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
    .hm-hero { padding:44px 16px 52px; }
    .hm-section { padding:40px 0; }
    .hm-featured-grid,.hm-blog-grid,.hm-why-grid,.hm-finder-grid { grid-template-columns:1fr; }
    .hm-tools-grid { grid-template-columns:1fr; gap:9px; }
    .hm-stat { padding:6px 14px; }
    .hm-stat-num { font-size:1.3rem; }
}