/* Hero: nagłówek, lead, przyciski, liczby, dwa zdjęcia. */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--sand-200)}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,66px); margin-bottom:20px}
.hero h1 em{font-style:normal; color:var(--brown-500)}
.hero .lead{font-size:19px; color:var(--brown-700); max-width:46ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

.facts{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:40px;
  padding-top:22px; border-top:1px solid var(--sand-200);
}
.facts div{min-width:96px}
.facts b{display:block; font-family:var(--mono); font-size:23px; font-weight:500; color:var(--blue-700)}
.facts span{font-size:13px; color:var(--brown-500)}

.hero-art{position:relative}
.hero-art .frame{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.hero-art .inset{
  position:absolute; right:-14px; bottom:-28px; width:39%;
  border:6px solid var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}

@media (max-width:1023px){
  .hero{padding:44px 0}
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-art .inset{width:34%; right:0; bottom:-20px}
}

@media (max-width:719px){
  .hero .lead{font-size:17px}
  .hero-actions .btn{flex:1 1 100%}
  .facts{gap:20px}
}