/* Shopigent design system — logo palette: deep purple ink, mint #00de98, violet #a04eff */

:root { --mint: #00de98; --violet: #a04eff; }

html { -webkit-font-smoothing: antialiased; }

/* ---------- Hero backgrounds ---------- */
.hero-bg {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(160, 78, 255, 0.14), transparent 70%),
    radial-gradient(40% 35% at 80% 20%, rgba(0, 222, 152, 0.10), transparent 70%);
}
.dark .hero-bg {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(160, 78, 255, 0.22), transparent 70%),
    radial-gradient(40% 35% at 80% 20%, rgba(0, 222, 152, 0.12), transparent 70%),
    linear-gradient(180deg, #1e1b30 0%, #13101f 100%);
}

.cta-bg {
  background:
    radial-gradient(70% 90% at 20% 10%, rgba(0, 222, 152, 0.25), transparent 60%),
    linear-gradient(135deg, #4e2289 0%, #2f2748 55%, #1e1b30 100%);
}
.cta-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Floating orbs ---------- */
.orb {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--mint);
  box-shadow: 0 0 12px 2px rgba(0, 222, 152, 0.55);
  opacity: 0.7;
  animation: float 7s ease-in-out infinite;
}
.orb-v {
  background: var(--violet);
  box-shadow: 0 0 12px 2px rgba(160, 78, 255, 0.55);
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-22px) scale(1.15); }
}

/* Logo hover spin */
.logo-orb svg { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
a:hover .logo-orb svg { transform: rotate(180deg); }

/* Tool explorer filter pills */
.tx-cat, .tx-type { color: #564879; background: transparent; transition: all .15s; cursor: pointer; }
.dark .tx-cat, .dark .tx-type { color: #b3a8cd; }
.tx-cat:hover, .tx-type:hover { border-color: #a04eff; }
.tx-active { background: linear-gradient(90deg, #8a3df2, #00b87e); color: #fff !important; border-color: transparent !important; }

/* Terminal cursor */
.cursor-blink { animation: blink 1.1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb, .cursor-blink { animation: none; }
}

/* ---------- Prose / markdown ---------- */
.prose pre {
  background: #16122a;
  color: #e6e2f4;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid #2f2748;
}
.prose :not(pre) > code {
  background: rgba(160, 78, 255, 0.09);
  color: #742dd4;
  padding: 0.15em 0.4em;
  border-radius: 0.375rem;
  font-size: 0.85em;
  font-weight: 500;
}
.dark .prose :not(pre) > code { color: #4defb5; background: rgba(0, 222, 152, 0.10); }
.prose code::before, .prose code::after { content: none; }

.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.9rem; }
.prose thead th { background: #f5f3fa; font-weight: 600; }
.dark .prose thead th { background: #2f2748; }
.prose th, .prose td { border: 1px solid #eae6f4; padding: 0.5rem 0.9rem; }
.dark .prose th, .dark .prose td { border-color: #453a62; }

.prose blockquote {
  border-left: 4px solid var(--mint);
  background: rgba(0, 222, 152, 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 1rem;
  font-style: normal;
  color: inherit;
}
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after { content: none; }

.prose h1, .prose h2, .prose h3 { scroll-margin-top: 5rem; letter-spacing: -0.02em; }

.prose a { color: #8a3df2; text-decoration-color: rgba(160, 78, 255, 0.4); }
.prose a:hover { text-decoration-color: #8a3df2; }
.dark .prose a { color: #4defb5; text-decoration-color: rgba(0, 222, 152, 0.4); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4cde6; border-radius: 8px; }
.dark ::-webkit-scrollbar-thumb { background: #453a62; }