/* =================================================================
   SOLUZIONI E-COMMERCE — page-scoped
   ================================================================= */
.page-hero{padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,4rem)}
.page-hero h1{max-width:18ch}
.page-hero .lead{margin-top:1.3rem;max-width:56ch}
.intro-line{max-width:60ch;color:var(--text-muted)}

/* 5.2 needs */
.need{padding-top:1.1rem;border-top:2px solid var(--gold)}
.need h3{margin-bottom:.5rem}
.need p{color:var(--text-muted)}

/* 5.4 platform badges (text-only) */
.platform-badges{display:flex;flex-wrap:wrap;gap:.7rem}
.pf-badge{font-family:var(--font-body);font-weight:600;font-size:.85rem;letter-spacing:.02em;
  color:var(--text);background:var(--off-white);border:1.5px solid var(--gold);
  border-radius:999px;padding:.5rem 1.1rem}

/* 5.5 cases (gold accent grows with tier) */
.cases{display:grid;gap:1.4rem}
@media (min-width:768px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(1.5rem,2.5vw,2rem);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.case:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,10,9,.08)}
.case h3{margin-bottom:.6rem}
.case p{color:var(--text-muted)}
.case--1{border-top:3px solid var(--gold)}
.case--2{border-top:5px solid var(--gold)}
.case--3{border-top:7px solid var(--gold)}

/* 5.6 cta */
.cta-dark{text-align:center}
.cta-dark .lead{margin-inline:auto}
.cta-dark .btn-row{justify-content:center}