.hero{
  display:grid; gap:18px; grid-template-columns: 1.4fr 1fr; align-items:center;
  padding:34px 0;
}
.hero .title{ font-size:36px; line-height:1.2; margin:0; }
.hero .subtitle{ color:var(--muted); margin:0 0 8px 0; }
.hero .cta{ display:flex; gap:10px; flex-wrap:wrap; }
.hero .illustration{ height:220px; border-radius:16px; background:linear-gradient(135deg, var(--primary-weak), #fff); border:1px solid var(--border); box-shadow: var(--shadow);}
@media(max-width:900px){ .hero{ grid-template-columns:1fr; } .hero .title{ font-size:28px; } }