/* Home-specific */
.hero{
  padding-top: 26px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:start;
}

.heroActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 16px;
}

.inlineProof{
  margin-top: 16px;
  color: rgba(255,255,255,.80);
  font-size: 13.5px;
  line-height: 1.6;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.inlineProof .dot{
  width:7px; height:7px; border-radius:99px;
  background: rgba(110,168,255,.95);
  box-shadow: 0 0 0 3px rgba(110,168,255,.14);
  display:inline-block;
  transform: translateY(-1px);
}
.inlineProof .item{
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(255,255,255,.78);
  white-space:nowrap;
}
.inlineProof .item i{color: rgba(159,209,255,.95); margin-right: 4px;}

.heroVisual{
  margin-top: 10px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.heroVisual img{display:block; width:100%; height:auto}

/* Floating CTA (optional, wenn du’s auf Home weiter nutzt) */
.floatCta{
  position:fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.floatCta .mini{
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(7,11,20,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.floatCta .mini:hover{transform: translateY(-2px)}
.floatCta .mini.primary{
  border-color: rgba(110,168,255,.55);
  background: linear-gradient(180deg, rgba(110,168,255,.28), rgba(110,168,255,.10));
}

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; gap:16px}
  .inlineProof .item{white-space:normal}
  .floatCta{right: 14px; bottom: 14px;}
}