/* ── PicoStep landing — subtle animations ─────────────────── */
:root {
  --indigo: #4F46E5;
  --indigo-deep: #3730A3;
  --emerald: #10B981;
  --ink: #1E1B4B;
}

html { scroll-behavior: smooth; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Floating logo */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1.2deg); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Emerald dot pulse (halo circle inside inline SVGs) */
@keyframes dotPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.6;  transform: scale(1.18); }
}
.dot-pulse { animation: dotPulse 3s ease-in-out infinite; transform-origin: 119px 32px; }

/* Gradient wordmark */
.gradient-word {
  background: linear-gradient(120deg, #3730A3 0%, #4F46E5 50%, #6366F1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* App Store button */
.btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  border-radius: 14px;
  padding: 10px 20px 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 30px rgba(30, 27, 75, 0.25);
}
.btn-appstore:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.35);
}

/* Hero glow */
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -14px) scale(1.08); }
}
.glow { animation: glowDrift 10s ease-in-out infinite; }

/* Cards */
.card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: #C7D2FE;
  box-shadow: 0 20px 45px rgba(79, 70, 229, 0.12);
}

/* FAQ accordion */
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary { cursor: pointer; list-style: none; }
details.faq .faq-icon { transition: transform 0.3s ease; }
details.faq[open] .faq-icon { transform: rotate(45deg); }
details.faq[open] summary { color: var(--indigo); }

/* Legal documents */
.legal h2 { font-weight: 700; font-size: 1.05rem; color: #1E1B4B; margin: 2rem 0 0.6rem; }
.legal h3 { font-weight: 600; font-size: 0.95rem; color: #3730A3; margin: 1.2rem 0 0.4rem; }
.legal p, .legal li { color: #475569; font-size: 0.925rem; line-height: 1.7; margin-bottom: 0.5rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: 0.4rem 0 0.8rem; }