.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: clip;
  background: linear-gradient(125deg, rgba(102,126,234,.2), rgba(118,75,162,.2));
}
.hero-grid { display: grid; gap: var(--space-4); align-items: center; }
.subtitle { color: #334155; max-width: 58ch; margin-top: var(--space-3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero-points { margin-top: var(--space-3); display: grid; gap: 8px; color: #334155; }
.hero-points li::before { content: '✓ '; color: #198754; font-weight: 800; }
.hero-card {
  background: #fff;
  border-radius: 24px;
  padding: var(--space-4);
  box-shadow: var(--shadow);
  border: 1px solid rgba(102,126,234,.22);
}
.mock-line {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f7ff;
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.floating-shape {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(102,126,234,.4), rgba(78,205,196,.4));
  filter: blur(1px);
  animation: drift 8s ease-in-out infinite;
}
.floating-shape.one { width: 220px; height: 220px; top: 10%; left: -80px; }
.floating-shape.two { width: 180px; height: 180px; bottom: 10%; right: 8%; animation-delay: 1.3s; }
.floating-shape.three { width: 120px; height: 120px; top: 24%; right: 18%; animation-delay: 2s; }
@keyframes drift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(6deg); }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.2fr .8fr; }
}
@media (max-width: 767px) {
  .hero { min-height: auto; padding-top: 96px; }
}