/* ============ home.css — homepage-only styles ============ */
.eb-hero{ background:linear-gradient(180deg, var(--eb-forest-800), var(--eb-forest-900)); color:#fff; padding:56px 0 90px; position:relative; overflow:hidden; }
.eb-hero::after{ content:""; position:absolute; right:-10%; top:-20%; width:520px; height:520px; border:2px solid rgba(217,142,4,.25); border-radius:50%; }
.eb-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; position:relative; z-index:1; }
.eb-hero h1{ color:#fff; }
.eb-hero .eb-lede{ color:rgba(255,255,255,.85); margin:0 0 1.6rem; }
.eb-hero-stats{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
.eb-hero-stat b{ display:block; font-family:var(--eb-font-head); font-size:1.45rem; color:var(--eb-mustard-500); }
.eb-hero-stat span{ font-size:.8rem; color:rgba(255,255,255,.7); }
.eb-hero-media{ text-align:center; position:relative; }
.eb-hero-media img{ max-height:420px; margin:0 auto; filter:drop-shadow(0 24px 30px rgba(0,0,0,.4)); }
.eb-hero-badge{ position:absolute; bottom:4%; left:0; background:#fff; color:var(--eb-forest-900); padding:11px 16px; border-radius:12px; box-shadow:var(--eb-shadow-md); font-weight:800; font-size:.82rem; display:flex; align-items:center; gap:10px; }

/* How to Use — timeline/clock style, visually distinct from the numbered "How It Works" steps */
.eb-usage-track{ position:relative; padding-left:2px; }
.eb-usage-item{ display:flex; gap:20px; padding:22px 0; border-bottom:1px dashed var(--eb-line); }
.eb-usage-item:last-child{ border-bottom:0; }
.eb-usage-time{ flex:none; width:96px; font-family:var(--eb-font-head); font-weight:700; color:var(--eb-mustard-700); font-size:1.05rem; }
.eb-usage-item h3{ font-size:1.05rem; margin-bottom:4px; }
.eb-usage-item p{ margin-bottom:0; }

@media (max-width: 991px){
  .eb-hero-grid{ grid-template-columns:1fr; text-align:center; gap:34px; }
  .eb-hero .eb-lede{ margin-left:auto; margin-right:auto; }
  .eb-hero-stats{ justify-content:center; }
  .eb-hero-media img{ max-height:300px; }
  .eb-usage-item{ flex-direction:column; gap:4px; text-align:center; }
  .eb-usage-time{ width:auto; }
}