/* Hero: griglia di quadratini bianchi + 3 quadrati ornamentali */
.hero .frame.with-squares { position: relative; }
.hero .frame.with-squares > * { position: relative; z-index: 1; }

.hero .frame.with-squares::after{
  content:"";
  position:absolute; inset:-24px;
  z-index:0; pointer-events:none;
  /* griglia di quadratini bianchi molto soft */
  background:
    conic-gradient(from 90deg at 1px 1px, rgba(255,255,255,.32) 90deg, transparent 0) 0 0/26px 26px;
  mix-blend-mode: soft-light;
  opacity:.35;
  filter: blur(.2px);
}

/* 3 quadrati bianchi sottili (outline + leggero fill) */
.ornament-squares{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ornament-squares .sq{
  position:absolute; border:1px solid rgba(255,255,255,.66);
  background: rgba(255,255,255,.04); border-radius:10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 28px rgba(15,90,68,.08);
}
.ornament-squares .sq-1{ width:84px; height:84px; top:-18px; left:-14px; transform: rotate(5deg); }
.ornament-squares .sq-2{ width:56px; height:56px; top:38px; left:78px; transform: rotate(9deg); }
.ornament-squares .sq-3{ width:96px; height:96px; right:-22px; bottom:-24px; transform: rotate(-7deg); opacity:.8; }

/* opzionale: stringi la griglia su mobile */
@media (max-width: 576px){
  .hero .frame.with-squares::after{ background-size:22px 22px; opacity:.3; }
  .ornament-squares .sq-1{ width:64px; height:64px; top:-14px; left:-10px; }
  .ornament-squares .sq-2{ width:44px; height:44px; top:30px; left:66px; }
  .ornament-squares .sq-3{ width:72px; height:72px; right:-16px; bottom:-18px; }
}