html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; }

.hero-gradient {
  background: linear-gradient(135deg, #0069ff 0%, #00bcd4 100%);
}
.dark-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
}

.feature-card {
  transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 105, 255, 0.12);
}

.btn-glow {
  transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 105, 255, 0.4);
}

.channel-icon {
  transition: transform 200ms ease, opacity 200ms ease;
  opacity: 0.7;
}
.channel-icon:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* Builder mock */
.mock-glass {
  background: #0f172a;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}

.node-pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease-in-out; }
.faq-answer.open { max-height: 200px; }

/* Step connector */
.step-line {
  position: absolute; top: 2rem; left: calc(50% + 2rem);
  width: calc(100% - 4rem); height: 2px;
  background: linear-gradient(90deg, #0069ff, #00bcd4); opacity: 0.3;
}

/* Ticker for channels */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}