/* HUB.STLBEAST V578 Global Polish Layer
   CSS-only polish for Hub: richer but calmer spacing, clean cards, better mobile rhythm.
*/

:root{
  --hub578-ink:#07111f;
  --hub578-muted:#5f6f88;
  --hub578-line:#dbe6f5;
  --hub578-blue:#1769ff;
  --hub578-cyan:#16b8f5;
}

body{
  overflow-x:hidden!important;
}

.wrap{
  max-width:1180px!important;
}

/* Header/nav compact and reliable */
.hub-header{
  position:relative!important;
  z-index:5!important;
}

.logo{
  letter-spacing:.04em!important;
}

.nav a{
  min-height:34px!important;
  border-radius:999px!important;
}

/* Hero sections should feel premium, not oversized */
.visual-hero,
.hub573-hero,
.hub572-visual-hero,
.hero{
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:28px!important;
}

.visual-hero,
.hub573-hero,
.hero{
  padding:clamp(20px,4vw,48px)!important;
}

.hub573-title,
.visual-hero h1,
.hero h1{
  line-height:.9!important;
}

/* Premium images: controlled heights */
.hub573-hero-img,
.hub572-visual-card figure,
.problem-card,
.hub573-card{
  overflow:hidden!important;
}

.hub573-hero-img{
  min-height:260px!important;
  max-height:430px!important;
}

.hub573-hero-img img{
  object-fit:cover!important;
}

.hub572-visual-hero{
  min-height:min(62vh,620px)!important;
}

/* Cards: consistent visual weight */
.problem-card,
.hub573-card,
.card,
.hub572-visual-card,
.flow-step,
.comfort,
.hub573-panel{
  border-radius:22px!important;
  box-shadow:0 14px 44px rgba(10,30,70,.08)!important;
}

.problem-card{
  min-height:190px!important;
}

.problem-card .big,
.hub573-icon,
.icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Reduce empty-feeling gaps */
.section,
.hub573-section{
  margin:28px 0!important;
}

.problem-grid,
.hub573-grid,
.grid{
  gap:14px!important;
}

/* Dark panels: a little more premium */
.dark-panel,
.hub573-panel.dark{
  border-radius:26px!important;
}

/* Footer spacing */
.footer{
  margin-top:36px!important;
}

/* Mobile polish */
@media(max-width:760px){
  .wrap{
    padding:14px!important;
  }

  .hub-header .wrap{
    padding:10px 14px!important;
  }

  .logo{
    width:100%!important;
    min-height:46px!important;
  }

  .nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .nav a{
    width:100%!important;
    font-size:.70rem!important;
    min-height:34px!important;
    padding:8px 6px!important;
  }

  .visual-hero,
  .hub573-hero,
  .hero{
    border-radius:22px!important;
    padding:22px 16px!important;
    margin-top:14px!important;
  }

  .hub573-title,
  .visual-hero h1,
  .hero h1{
    font-size:clamp(2rem,11vw,3.8rem)!important;
  }

  .lead,
  .hub573-lead{
    font-size:1rem!important;
  }

  .hub573-hero{
    grid-template-columns:1fr!important;
  }

  .hub573-hero-img{
    min-height:230px!important;
    max-height:300px!important;
  }

  .problem-grid,
  .hub573-grid,
  .grid,
  .comfort-strip,
  .feature-strip,
  .flow,
  .split,
  .hub573-split{
    grid-template-columns:1fr!important;
  }

  .problem-card{
    min-height:auto!important;
  }

  .actions,
  .hub573-actions,
  .hub572-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .footer-grid{
    grid-template-columns:1fr!important;
  }
}