/* ── Homepage sections (components/home/*) ─────────────────────────── */

/* Hero trust badge */
.hm-hero-badge a { color: inherit; }
.hm-hero-badge strong { color: var(--green); }

/* Trust grid */
.hm-trust-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2.6rem; }
.hm-trust { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.hm-trust h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.02rem; font-weight: 800; color: var(--ink); margin: .8rem 0 .35rem; letter-spacing: -.01em; }
.hm-trust p { font-size: .85rem; line-height: 1.6; color: var(--muted); }
.hm-trust p a { color: var(--green-d); font-weight: 600; }
.hm-trust-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(29, 191, 115, .1); color: var(--green); }
.hm-trust-ico svg { width: 1.25rem; height: 1.25rem; }
.hm-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2rem; font-size: .85rem; color: var(--muted); }
.hm-profiles > span { font-weight: 700; margin-right: .3rem; }
.hm-profile { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border: 1px solid var(--border); border-radius: 99px; background: var(--white); color: var(--ink); font-weight: 600; transition: border-color .2s, transform .3s var(--ease-spring); }
.hm-profile:hover { border-color: var(--green-d); transform: translateY(-2px); }
.hm-profile svg { width: 15px; height: 15px; color: var(--green-d); }

/* Packages */
.hm-pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 2.6rem; }
.hm-pkg { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-spring), box-shadow .35s; }
.hm-pkg:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hm-pkg.popular { border: 2px solid var(--green-d); }
.hm-pkg-badge { position: absolute; top: -11px; left: 1.2rem; background: var(--green); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 99px; }
.hm-pkg-tag { font-size: .72rem; font-weight: 700; color: var(--green-d); text-transform: uppercase; letter-spacing: .05em; }
.hm-pkg h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.08rem; font-weight: 800; color: var(--ink); margin: .35rem 0 .5rem; }
.hm-pkg-price { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--ink); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.hm-pkg-price small { font-size: .75rem; font-weight: 600; color: var(--muted); }
.hm-pkg-price s { font-size: .9rem; font-weight: 500; color: var(--muted); }
.hm-pkg ul { list-style: none; margin: 1rem 0 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.hm-pkg li { display: flex; gap: .45rem; font-size: .82rem; color: var(--body); line-height: 1.45; }
.hm-pkg li svg { width: 15px; height: 15px; color: var(--green-d); flex-shrink: 0; margin-top: .15rem; }
.hm-pkg-cta { display: flex; gap: .5rem; }
.hm-pkg-cta .btn-green { flex: 1; justify-content: center; padding: .65rem 1rem; font-size: .85rem; }
.hm-pkg-wa { width: 44px; border-radius: 99px; border: 1.5px solid rgba(37, 211, 102, .5); color: #128c4b; display: flex; align-items: center; justify-content: center; }
.hm-pkg-wa svg { width: 18px; height: 18px; }

/* Free consultation */
.hm-consult { margin-top: 2.4rem; display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; background: var(--white); border: 1px solid rgba(29, 191, 115, .35); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); scroll-margin-top: 90px; }
.hm-free { display: inline-block; background: linear-gradient(135deg, #1dbf73, #7c3aed); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .12em; padding: .3rem .8rem; border-radius: 99px; }
.hm-consult h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--ink); margin: .7rem 0 .5rem; letter-spacing: -.02em; }
.hm-consult-text p { color: var(--body); line-height: 1.65; }
.hm-consult-text ul { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.hm-consult-text li { display: flex; gap: .5rem; font-size: .88rem; color: var(--body); }
.hm-consult-text li svg { width: 16px; height: 16px; color: var(--green-d); flex-shrink: 0; margin-top: .2rem; }
.hm-consult-text a { color: var(--green-d); font-weight: 700; }
.hm-consult-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.hm-consult-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--ink); min-width: 0; }
.hm-consult-form input, .hm-consult-form select, .hm-consult-form textarea { width: 100%; min-width: 0; font: inherit; font-size: .92rem; padding: .62rem .75rem; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); }
.hm-consult-form input:focus, .hm-consult-form select:focus, .hm-consult-form textarea:focus { outline: none; border-color: var(--green-d); }
.hm-consult-form .full, .hm-consult-form .ms-alert { grid-column: 1 / -1; }
.hm-consult-form .btn-green { justify-content: center; }
.ms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ms-alert { display: flex; gap: .5rem; align-items: center; padding: .7rem .9rem; border-radius: 10px; font-weight: 600; font-size: .88rem; }
.ms-alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.ms-alert.ok { background: rgba(29, 191, 115, .12); color: var(--green); }
.ms-alert.err { background: rgba(239, 68, 68, .1); color: #b91c1c; }

/* Team */
.hm-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2.6rem; }
.hm-member { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.8rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); }
.hm-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; box-shadow: 0 8px 24px rgba(0, 96, 57, .18); border: 4px solid #fff; }
.hm-initials { display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #006039, #1dbf73); }
.hm-plus { background: linear-gradient(135deg, #7c3aed, #1dbf73); font-size: 2rem; }
.hm-member h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.hm-role { font-size: .8rem; font-weight: 700; color: var(--green-d); text-transform: uppercase; letter-spacing: .05em; margin: .25rem 0 .7rem; }
.hm-member p { font-size: .87rem; color: var(--muted); line-height: 1.6; }
.hm-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 1rem; }
.hm-chips li { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; background: var(--off); border: 1px solid var(--border); padding: .3rem .65rem; border-radius: 99px; color: var(--body); }
.hm-chips svg { width: 13px; height: 13px; color: var(--green-d); }

/* AI services */
.hm-ai-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2.6rem; }
.hm-ai-card { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.4rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(124, 58, 237, .05), var(--white) 55%); transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .2s; }
.hm-ai-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(124, 58, 237, .35); }
.hm-ai-card strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.02rem; color: var(--ink); }
.hm-ai-card > span:not(.hm-trust-ico) { font-size: .85rem; color: var(--muted); line-height: 1.55; flex: 1; }
.hm-ai-card em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--green-d); display: flex; align-items: center; gap: .3rem; }
.hm-ai-card em svg { width: 14px; height: 14px; }

/* At a glance */
.hm-glance-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.hm-facts { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hm-facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--border); }
.hm-facts > div:last-child { border-bottom: 0; }
.hm-facts dt { font-size: .8rem; font-weight: 800; color: var(--ink); }
.hm-facts dd { font-size: .86rem; color: var(--body); line-height: 1.55; }
.hm-facts a { color: var(--green-d); font-weight: 600; }

/* Ask AI */
.hm-ask { max-width: 860px; margin-top: 2rem; }
.hm-ask .ms-faq { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.hm-ask .ms-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.hm-ask .ms-faq summary::-webkit-details-marker { display: none; }
.hm-ask .ms-faq summary::after { content: '+'; font-weight: 800; color: var(--green-d); font-size: 1.2rem; }
.hm-ask .ms-faq[open] summary::after { content: '−'; }
.hm-ask .ms-faq h3 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.hm-ask .ms-faq p { margin-top: .6rem; color: var(--body); line-height: 1.7; font-size: .93rem; }

@media (max-width: 1000px) {
  .hm-trust-grid, .hm-ai-grid { grid-template-columns: 1fr 1fr; }
  .hm-team-grid { grid-template-columns: 1fr 1fr; }
  .hm-consult, .hm-glance-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hm-trust-grid, .hm-ai-grid, .hm-team-grid, .hm-consult-form { grid-template-columns: 1fr; }
  .hm-facts > div { grid-template-columns: 1fr; gap: .2rem; }
}