/*
 * No-Code Builder page — page-unique CSS only.
 * These rules are NOT part of the shared solutions.css design system;
 * they power the purple CTA band and the automation HUD visuals.
 * The shared system (hero, bento, modules, FAQ, grids) lives in solutions.css.
 */

.apb-page .bg-cream { background: var(--gutsy-cream); }
.apb-page .gutsy-purple-bg { background-color: var(--gutsy-purple); }

/* Benefits list */
.apb-page .benefit-card {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  text-align: left;
}
.apb-page .icon-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gutsy-purple);
  color: #ffffff;
  font-weight: 900;
}
.apb-page .benefit-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gutsy-green);
}
.apb-page .benefit-card p { color: #64748b; }

/* UI card + HUD */
.apb-page .ui-card {
  background: #ffffff;
  border-radius: var(--radius-l);
  border: 1px solid rgba(155, 95, 250, 0.1);
  box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.05));
  overflow: hidden;
}
.apb-page .ui-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.apb-page .floating-ui { animation: float 4s ease-in-out infinite; }
.apb-page .pulse-ui { animation: pulse-soft 3s ease-in-out infinite; }

.apb-page .glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--gutsy-purple);
  border-radius: 100px;
  background: rgba(252, 250, 237, 0.8);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .apb-page .order-first-mobile { order: -1; }
}