/* Subtle extras on top of Tailwind. */
.hero-gradient {
  background:
    radial-gradient(at 20% 0%, rgba(99, 102, 241, 0.12), transparent 50%),
    radial-gradient(at 80% 0%, rgba(217, 70, 239, 0.10), transparent 50%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.section-divider {
  background:
    linear-gradient(to bottom, transparent, rgba(99,102,241,0.08), transparent);
  height: 1px;
}
.feature-card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgb(199 210 254);
  box-shadow: 0 10px 30px -12px rgba(99,102,241,0.25);
}
details[data-faq] > summary { list-style: none; cursor: pointer; }
details[data-faq] > summary::-webkit-details-marker { display: none; }
details[data-faq] > summary .chev { transition: transform 200ms ease; }
details[data-faq][open] > summary .chev { transform: rotate(180deg); }
.scroll-cta {
  transform: translateY(120%);
  transition: transform 240ms ease;
}
.scroll-cta.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .feature-card, .scroll-cta, details[data-faq] > summary .chev { transition: none; }
}

/* App screenshot carousel — auto-advancing with hoverable hotspots. */
.app-carousel { position: relative; }
.carousel-viewport {
  position: relative;
  width: 100%;
  padding-bottom: calc(100% / var(--ratio, 1.6));
  background: #f8fafc;
  transition: padding-bottom 420ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}
.carousel-track {
  position: absolute; inset: 0;
  list-style: none; margin: 0; padding: 0;
}
.carousel-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms ease;
}
.carousel-slide.is-active { opacity: 1; visibility: visible; }
.carousel-slide img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top left;
}
.screenshot-missing {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  background: #f1f5f9; color: #475569;
  font-size: 13px; text-align: center; padding: 24px;
}
.screenshot-missing strong { color: #0f172a; font-weight: 600; }
.screenshot-missing code {
  background: #e2e8f0; padding: 4px 8px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
.carousel-slide.slide-missing img { display: none; }
.carousel-slide.slide-missing .screenshot-missing { display: flex; }

/* Hotspot markers */
.hotspot-wrap {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.hotspot {
  width: 100%; height: 100%;
  border-radius: 9999px; padding: 0;
  background: rgb(99 102 241);
  border: 3px solid white;
  box-shadow: 0 0 0 0 rgba(99,102,241,0.55), 0 4px 12px rgba(15,23,42,0.18);
  cursor: pointer;
  animation: hotspot-pulse 2.2s cubic-bezier(0,0,0.2,1) infinite;
}
.hotspot:hover, .hotspot:focus-visible {
  background: rgb(79 70 229);
  outline: none;
}
@keyframes hotspot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.55), 0 4px 12px rgba(15,23,42,0.18); }
  70%  { box-shadow: 0 0 0 14px rgba(99,102,241,0),   0 4px 12px rgba(15,23,42,0.18); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0),      0 4px 12px rgba(15,23,42,0.18); }
}

/* Tooltips on hover/focus */
.hotspot-tip {
  position: absolute;
  width: max-content; max-width: 240px;
  background: rgb(15 23 42); color: white;
  padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.45;
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
  z-index: 10;
  box-shadow: 0 12px 28px rgba(15,23,42,0.25);
}
.hotspot-tip strong {
  display: block; font-weight: 600; margin-bottom: 4px;
  font-size: 12px;
}
/* Invisible hover bridge so moving from dot to tooltip never breaks hover. */
.hotspot-tip::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
}
.hotspot-wrap:hover .hotspot-tip,
.hotspot-wrap:focus-within .hotspot-tip { opacity: 1; visibility: visible; }
.tip-bottom       .hotspot-tip { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.tip-bottom-left  .hotspot-tip { top: calc(100% + 10px); right: -4px; }
.tip-bottom-right .hotspot-tip { top: calc(100% + 10px); left: -4px; }
.tip-top          .hotspot-tip { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.tip-top-left     .hotspot-tip { bottom: calc(100% + 10px); right: -4px; }
.tip-top-right    .hotspot-tip { bottom: calc(100% + 10px); left: -4px; }

/* Prev/Next + dot indicators */
.carousel-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid rgb(226 232 240);
  background: white;
}
.carousel-btn {
  width: 32px; height: 32px; border-radius: 9999px;
  background: white; border: 1px solid rgb(226 232 240);
  color: rgb(71 85 105);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.carousel-btn:hover { background: rgb(241 245 249); color: rgb(15 23 42); border-color: rgb(203 213 225); }
.carousel-btn:focus-visible { outline: 2px solid rgb(99 102 241); outline-offset: 2px; }
.carousel-dots { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: rgb(203 213 225); border: 0; padding: 0;
  cursor: pointer;
  transition: width 200ms ease, background-color 200ms ease;
}
.carousel-dot:hover { background: rgb(148 163 184); }
.carousel-dot.is-active { width: 22px; background: rgb(99 102 241); }
.carousel-dot:focus-visible { outline: 2px solid rgb(99 102 241); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hotspot { animation: none; }
  .carousel-viewport, .carousel-slide { transition: none; }
}