/**
 * BALEON — global UI polish: contrast, CTA rhythm, empty surfaces, demo phones.
 */

/* —— Readable text on light bands —— */
.hub-band--alt {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(242, 230, 221, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, var(--fog) 0%, rgba(248, 246, 243, 0.92) 100%);
}

.hub-band--alt .bh-card {
  background: linear-gradient(165deg, #fff 0%, rgba(255, 255, 255, 0.94) 100%);
  border-color: rgba(45, 75, 50, 0.1);
}

.hub-band--alt .bh-card p,
.bh-band-cta .bh-lead {
  color: var(--ink-muted);
}

.hub-band:not(.hub-band--dark) .bh-lead {
  color: rgba(33, 41, 38, 0.72);
}

/* —— Dark demo band — brighter copy —— */
.hub-band--dark .section-head h2,
.hub-band--dark #docs-demo-title {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.14);
}

.hub-band--dark .section-lead,
.hub-band--dark .section-lead--light {
  color: rgba(255, 255, 255, 0.9);
}

.hub-band--dark .section-eyebrow,
.hub-band--dark .section-eyebrow--light {
  color: rgba(255, 255, 255, 0.78);
}

/* —— CTA spacing —— */
.bh-hero .bh-lead + .bh-cta-row,
.bh-hero .bh-cta-row {
  margin-top: clamp(1.35rem, 2.8vw, 1.85rem);
  gap: clamp(0.65rem, 1.5vw, 0.85rem);
}

.bh-band-cta {
  gap: clamp(0.75rem, 1.8vw, 1rem);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(242, 230, 221, 0.35) 0%, transparent 62%),
    linear-gradient(165deg, #fff 0%, rgba(248, 246, 243, 0.96) 100%);
  border-color: rgba(45, 75, 50, 0.11);
  box-shadow: 0 16px 40px rgba(33, 41, 38, 0.07);
}

.bh-band-cta .section-eyebrow {
  color: var(--moss);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(45, 75, 50, 0.07);
  border: 1px solid rgba(45, 75, 50, 0.1);
}

.bh-band-cta h2 {
  margin-top: 0.15rem;
}

.bh-band-cta .bh-lead a {
  color: var(--forest);
}

/* —— Download / footer CTA bands —— */
.hub-band--download,
.home-download--finale {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(242, 230, 221, 0.4) 0%, transparent 58%),
    var(--white);
}

.hub-download .download-lead,
.home-download--finale .section-lead {
  color: var(--ink-muted);
}

/* —— Phone mockup surfaces —— */
.iphone__ui {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 255, 255, 0.92) 0%, transparent 70%),
    linear-gradient(180deg, #faf8f5 0%, #f0ece7 100%);
}

.ui-screen--documents-hub .ui-screen__main,
.ui-screen--documents .ui-screen__main {
  background: transparent;
}

.app-doc-hub__head {
  padding: 0 16px 10px;
}

.app-doc-hub__add {
  margin-right: 2px;
  padding: 6px 12px;
  font-size: 11px;
}

.app-doc-hub__picker {
  margin-inline: 16px;
}

/* —— Demo panel on dark band —— */
.hub-band--dark .docs-demo__panel,
.hub-band--dark .demo-playground__panel {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-card, 16px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}