.hero { padding-top: calc(var(--spa-secao) + 64px); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: url('../assets/patterns/technical-grid.svg') 0 0 / 80px 80px; opacity: .6; mask-image: radial-gradient(70% 60% at 60% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000 30%, transparent 100%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 55fr 45fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-texto h1 { margin: 1.1rem 0 1.2rem; }
.hero-apoio { font-size: 1.2rem; color: var(--spa-muted); max-width: 520px; }
.hero-acoes { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }

.hero-visual { position: relative; perspective: 1400px; }
.laptop { position: relative; transform-style: preserve-3d; }
.laptop-tela { background: #0B1220; border-radius: 16px 16px 4px 4px; padding: 10px; box-shadow: var(--spa-shadow-soft), inset 0 0 0 1px rgba(255,255,255,.08); }
/* sobra de no máximo um gutter por lado: no mobile o laptop encosta no gutter e a base nunca sai da janela */
.laptop-base { height: 14px; margin: 0 max(-6%, calc(-1 * var(--spa-gutter))); background: linear-gradient(#DDE3EA, #C7CED8); border-radius: 0 0 14px 14px; }
/* marca visível de que os números do painel são exemplo (regra da casa: demonstração marcada como tal) */
.mock-nota { margin-top: .6rem; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em; color: var(--spa-muted); text-align: center; }
.dash { display: grid; grid-template-columns: 56px 1fr; background: var(--spa-white); border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; font-size: 10px; }
.dash-side { background: var(--spa-ink); padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.dash-logo { width: 26px; height: 26px; border-radius: 6px; background: var(--spa-cyan); margin-bottom: 8px; }
.dash-side i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.dash-side i.on { background: var(--spa-cyan); }
.dash-main { padding: 12px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.dash-topo strong { display: block; font-size: 12px; } .dash-topo span { color: var(--spa-muted); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-kpis div { border: 1px solid var(--spa-border); border-radius: 8px; padding: 8px; }
.dash-kpis small { color: var(--spa-muted); display: block; } .dash-kpis b { font-size: 12px; white-space: nowrap; }
.dash-grafico { width: 100%; height: 100%; min-height: 60px; }
.dash-area { fill: rgba(0,228,252,.14); } .dash-curva { fill: none; stroke: var(--spa-cyan); stroke-width: 2; }

.float-card { position: absolute; display: flex; align-items: center; gap: .6rem; background: var(--spa-white); border: 1px solid var(--spa-border); border-radius: 14px; padding: .7rem .9rem; font-size: .86rem; font-weight: 600; box-shadow: var(--spa-shadow-soft); }
.float-icone { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,228,252,.14); color: var(--spa-cyan-ink); }
.float-1 { right: -6%; top: 22%; } .float-2 { left: -8%; bottom: 14%; }

@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* no mobile os cards deixam de flutuar sobre o laptop e viram uma linha abaixo dele */
  .hero-visual { max-width: 620px; margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .laptop { grid-column: 1 / -1; }
  .float-card { position: static; }
  .mock-nota { grid-column: 1 / -1; }   /* linha própria na grade: senão desemparelha os dois cards */
}
@media (max-width: 767px) {
  .hero-acoes .btn { flex: 1 1 100%; }
  .float-card { font-size: .8rem; padding: .55rem .7rem; }
}
@media (max-width: 479px) {
  .hero-visual { grid-template-columns: 1fr; }
  /* dashboard estreito: duas KPIs, padding menor, e nada passa da caixa */
  .dash { grid-template-columns: 44px 1fr; font-size: 9px; }
  .dash-main { padding: 10px; gap: 8px; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dash-kpis div { padding: 6px; }
  .dash-kpis div:nth-child(3) { display: none; }
  .dash-kpis b { font-size: 11px; }
}