/* ==========================================================================
   Sezione 6 — Banner demo (carpooling, Figma 684:4696)
   Banner gradiente teal: copy + box early bird + countdown + mockup clippato.
   Riusa .cta-offer-box / .btn--light-full / .cta-banner__guar (problems.css).
   ========================================================================== */

.demo { padding-block: 80px; background: var(--color-surface); }

.demo__banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 90px;
  padding: var(--space-card);
  border-radius: 40px;
  overflow: hidden;
  background: linear-gradient(to top right, #37b1d3 0%, #9cd8e8 100%);
  color: #fff;
}

.demo__body { width: 496px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-title-text); }
.demo__title { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-h2); color: #fff; }
.demo__text { font-size: var(--fs-p22); line-height: 1.4; color: #fff; }

.demo__offer { flex-shrink: 0; }

.demo__phone {
  position: absolute;
  right: 0; top: 0;
  width: 315px;
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .demo { padding-block: 56px; }
  .demo__banner { flex-direction: column; align-items: stretch; gap: 32px; }
  .demo__body { width: 100%; }
  .demo__offer { align-items: center; }
  .demo__phone { display: none; }
}

@media (max-width: 720px) {
  .demo__banner { padding: 24px; }
}