/* ============================================================
   EasyBoxs v2 – hero.css
   ============================================================ */
.hero { background:var(--navy); color:white; padding:5.5rem 2rem 4.5rem; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-80px; right:-100px; width:520px; height:520px; background:radial-gradient(circle,rgba(0,184,156,.18) 0%,transparent 68%); border-radius:50%; }
.hero::after  { content:''; position:absolute; bottom:-60px; left:-80px; width:360px; height:360px; background:radial-gradient(circle,rgba(37,99,196,.22) 0%,transparent 68%); border-radius:50%; }
.hero-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(0,184,156,.18); border:1px solid rgba(0,184,156,.4); padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600; color:#00E8BE; margin-bottom:1.25rem; }
.hero h1 { color:#FFF; font-size:2.6rem; line-height:1.15; margin-bottom:.75rem; }
.hero h1 span { color:var(--green); }
.hero-sub  { color:rgba(255,255,255,.82); margin-bottom:1rem; }
.hero-price { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:8px 16px; border-radius:10px; font-size:.85rem; color:rgba(255,255,255,.9); margin-bottom:1.75rem; font-weight:500; }
.hero-price strong { color:var(--green); font-size:1.1rem; font-family:var(--font-head); }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-visual { display:flex; flex-direction:column; gap:12px; }
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .hero h1 { font-size:2rem; }
}