html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Segoe UI", sans-serif;
  background: #ffffff;
  color: #0f172a;
  overflow-x: hidden;
}

.wave-divider {
  height: 90px;
  background:
    radial-gradient(50% 70px at 50% 0, transparent 98%, white 100%) 0 0/160px 100% repeat-x,
    linear-gradient(to bottom, transparent 0, white 100%);
}

[class*="border-slate-100"] {
  border-color: rgb(203 213 225 / 1) !important;
}

[class*="border-slate-200"] {
  border-color: rgb(148 163 184 / 0.9) !important;
}

[class*="border-white"] {
  border-color: rgb(203 213 225 / 0.95) !important;
}

.mobile-nav {
  max-width: 100vw;
}

.tools-hero {
  background:
    radial-gradient(circle at top left, rgba(144, 252, 249, 0.38), transparent 34%),
    radial-gradient(circle at top right, rgba(148, 72, 188, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.tools-hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 9999px;
  filter: blur(24px);
  opacity: 0.8;
  pointer-events: none;
}

.tools-hero__glow--left {
  left: -4rem;
  bottom: -3rem;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(122, 216, 229, 0.42), transparent 70%);
}

.tools-hero__glow--right {
  right: -3rem;
  top: -2rem;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(148, 72, 188, 0.22), transparent 70%);
}

.tools-pill-button,
.tools-radius-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.tools-pill-button {
  border-radius: 9999px;
}

.tools-radius-button {
  border-radius: 5px;
  box-shadow: 0 10px 24px rgba(72, 3, 85, 0.08);
}

.tools-radius-button:hover,
.tools-pill-button:hover {
  transform: translateY(-1px);
}

.tools-category-section {
  position: relative;
  overflow: hidden;
}

.tools-category-section::after {
  content: "";
  position: absolute;
  inset: auto -8rem -8rem auto;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(118, 153, 212, 0.11), transparent 70%);
  pointer-events: none;
}

.tools-card {
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.tools-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #90FCF9 0%, #7699D4 48%, #9448BC 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.tools-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(72, 3, 85, 0.1);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.tools-card:hover::before {
  opacity: 1;
}

.tools-card:hover .fa-arrow-up-right-from-square {
  color: #480355;
  transform: translate(2px, -2px);
}

.tools-card .fa-arrow-up-right-from-square {
  transition: transform 180ms ease, color 180ms ease;
}

.tools-mini-stat,
.reveal-card {
  animation: toolsFadeUp 0.65s ease both;
}

.pricing-mini-stat,
.pricing-card {
  animation: toolsFadeUp 0.65s ease both;
}

.pricing-card {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pricing-hero {
  isolation: isolate;
}

.pricing-hero__mesh {
  position: absolute;
  inset: auto 2rem -4rem auto;
  width: 18rem;
  height: 18rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(144, 252, 249, 0.22), transparent 38%),
    radial-gradient(circle at 68% 40%, rgba(118, 153, 212, 0.2), transparent 34%),
    radial-gradient(circle at 55% 70%, rgba(148, 72, 188, 0.18), transparent 36%);
  filter: blur(8px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.api-hero {
  isolation: isolate;
}

.api-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 28% 32%, rgba(144, 252, 249, 0.26), transparent 36%),
    radial-gradient(circle at 64% 38%, rgba(99, 180, 209, 0.2), transparent 34%),
    radial-gradient(circle at 58% 72%, rgba(148, 72, 188, 0.18), transparent 38%);
  filter: blur(10px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.api-mini-stat,
.api-endpoint-card {
  animation: toolsFadeUp 0.65s ease both;
}

.api-mini-stat,
.api-endpoint-card,
.api-endpoint-card summary,
.api-endpoint-card pre {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.api-mini-stat:hover,
.api-endpoint-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.api-endpoint-card summary::-webkit-details-marker {
  display: none;
}

.files-hero {
  isolation: isolate;
}

.files-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 24% 34%, rgba(144, 252, 249, 0.24), transparent 36%),
    radial-gradient(circle at 64% 34%, rgba(99, 180, 209, 0.18), transparent 34%),
    radial-gradient(circle at 58% 72%, rgba(148, 72, 188, 0.2), transparent 38%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.files-mini-stat,
.files-folder-card,
.files-row,
.files-modal-panel {
  animation: toolsFadeUp 0.65s ease both;
}

.files-row {
  position: relative;
  z-index: 1;
}

.files-mini-stat,
.files-folder-card,
.files-row,
.files-modal-panel,
.files-menu {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.files-mini-stat:hover,
.files-folder-card:hover,
.files-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.files-row:hover {
  z-index: 8;
}

.files-row .relative {
  z-index: 20;
}

.files-menu {
  z-index: 60;
  transform-origin: top right;
}

.files-menu-toggle:hover {
  border-color: rgba(118, 153, 212, 0.55) !important;
  color: #480355;
}

.files-modal {
  backdrop-filter: blur(8px);
}

.dashboard-hero {
  isolation: isolate;
}

.dashboard-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 22% 32%, rgba(144, 252, 249, 0.24), transparent 36%),
    radial-gradient(circle at 64% 34%, rgba(99, 180, 209, 0.18), transparent 34%),
    radial-gradient(circle at 58% 74%, rgba(148, 72, 188, 0.18), transparent 38%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.dashboard-mini-stat,
.dashboard-stat,
.dashboard-action-card,
.dashboard-panel,
.dashboard-row {
  animation: toolsFadeUp 0.65s ease both;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.dashboard-mini-stat:hover,
.dashboard-stat:hover,
.dashboard-action-card:hover,
.dashboard-panel:hover,
.dashboard-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.dashboard-action-card {
  position: relative;
  overflow: hidden;
}

.dashboard-action-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(144, 252, 249, 0.08), rgba(148, 72, 188, 0));
  opacity: 0;
  transition: opacity 180ms ease;
}

.dashboard-action-card:hover::before {
  opacity: 1;
}

.dashboard-action-card > * {
  position: relative;
  z-index: 1;
}

.tool-hero {
  isolation: isolate;
}

.tool-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 22rem;
  height: 22rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 24% 30%, rgba(144, 252, 249, 0.24), transparent 36%),
    radial-gradient(circle at 62% 36%, rgba(118, 153, 212, 0.18), transparent 34%),
    radial-gradient(circle at 56% 72%, rgba(148, 72, 188, 0.19), transparent 38%);
  filter: blur(10px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.tool-stat,
.tool-note-card,
.tool-queue-card,
.tool-step,
.tool-related-card,
.tool-faq-card {
  animation: toolsFadeUp 0.65s ease both;
}

.tool-surface,
.tool-stat,
.tool-note-card,
.tool-queue-card,
.tool-step,
.tool-related-card,
.tool-faq-card,
.tool-dropzone-shell {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.tool-stat:hover,
.tool-note-card:hover,
.tool-queue-card:hover,
.tool-step:hover,
.tool-related-card:hover,
.tool-faq-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.tool-dropzone-shell {
  position: relative;
  overflow: hidden;
}

.tool-dropzone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(144, 252, 249, 0.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(148, 72, 188, 0.08), transparent 32%);
  opacity: 0.9;
  pointer-events: none;
}

.tool-dropzone-shell > * {
  position: relative;
  z-index: 1;
}

.tool-dropzone.dragover .tool-dropzone-shell,
.tool-dropzone-shell:hover {
  border-color: rgba(118, 153, 212, 0.8) !important;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: inset 0 0 0 1px rgba(118, 153, 212, 0.22), 0 24px 48px rgba(72, 3, 85, 0.08);
}

.tool-queue-card {
  position: relative;
  overflow: hidden;
}

.tool-queue-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #90FCF9 0%, #7699D4 48%, #9448BC 100%);
  opacity: 0.85;
}

.tool-queue-row {
  animation: toolsFadeUp 0.45s ease both;
}

.tool-queue-row + .tool-queue-row {
  border-top: 1px solid rgba(148, 163, 184, 0.32);
}

.tool-related-card:hover {
  background: rgba(255, 255, 255, 0.98);
}

.tool-related-card:hover .fa-arrow-right {
  color: #480355;
  transform: translateX(2px);
}

.tool-related-card .fa-arrow-right {
  transition: transform 180ms ease, color 180ms ease;
}

.tool-step span {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
}

.tool-surface {
  position: relative;
}

@media (max-width: 1024px) {
  .tool-hero__mesh {
    width: 16rem;
    height: 16rem;
    inset: auto 0.75rem -3.5rem auto;
  }
}

@media (max-width: 640px) {
  .tool-dropzone-shell {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.share-hero {
  isolation: isolate;
}

.share-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 22% 32%, rgba(144, 252, 249, 0.24), transparent 36%),
    radial-gradient(circle at 66% 34%, rgba(99, 180, 209, 0.18), transparent 34%),
    radial-gradient(circle at 58% 74%, rgba(148, 72, 188, 0.18), transparent 38%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.share-mini-stat,
.share-download-button {
  animation: toolsFadeUp 0.65s ease both;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.share-mini-stat:hover,
.share-download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
}

.profile-hero {
  isolation: isolate;
}

.profile-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 24% 32%, rgba(144, 252, 249, 0.22), transparent 36%),
    radial-gradient(circle at 66% 34%, rgba(99, 180, 209, 0.16), transparent 33%),
    radial-gradient(circle at 58% 74%, rgba(148, 72, 188, 0.2), transparent 38%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.profile-mini-stat,
.profile-avatar-card,
.profile-api-card {
  animation: toolsFadeUp 0.65s ease both;
}

.profile-mini-stat,
.profile-avatar-card,
.profile-api-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.profile-mini-stat:hover,
.profile-avatar-card:hover,
.profile-api-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.contact-hero {
  isolation: isolate;
}

.contact-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 24% 34%, rgba(144, 252, 249, 0.24), transparent 36%),
    radial-gradient(circle at 66% 34%, rgba(99, 180, 209, 0.16), transparent 34%),
    radial-gradient(circle at 56% 74%, rgba(148, 72, 188, 0.2), transparent 38%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.contact-mini-stat {
  animation: toolsFadeUp 0.65s ease both;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.contact-mini-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.auth-hero,
.blog-hero,
.legal-hero {
  isolation: isolate;
}

.auth-hero__mesh,
.blog-hero__mesh,
.legal-hero__mesh {
  position: absolute;
  inset: auto 1.5rem -4rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 9999px;
  filter: blur(12px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.auth-hero__mesh {
  background:
    radial-gradient(circle at 22% 32%, rgba(144, 252, 249, 0.24), transparent 36%),
    radial-gradient(circle at 64% 34%, rgba(99, 180, 209, 0.18), transparent 34%),
    radial-gradient(circle at 58% 74%, rgba(148, 72, 188, 0.18), transparent 38%);
}

.blog-hero__mesh {
  background:
    radial-gradient(circle at 24% 34%, rgba(144, 252, 249, 0.22), transparent 36%),
    radial-gradient(circle at 64% 36%, rgba(118, 153, 212, 0.18), transparent 34%),
    radial-gradient(circle at 58% 72%, rgba(148, 72, 188, 0.19), transparent 38%);
}

.legal-hero__mesh {
  background:
    radial-gradient(circle at 26% 34%, rgba(144, 252, 249, 0.22), transparent 36%),
    radial-gradient(circle at 62% 36%, rgba(99, 180, 209, 0.16), transparent 34%),
    radial-gradient(circle at 58% 74%, rgba(148, 72, 188, 0.19), transparent 38%);
}

.blog-mini-stat,
.blog-card {
  animation: toolsFadeUp 0.65s ease both;
}

.blog-mini-stat,
.blog-card,
.blog-widget-link {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.blog-mini-stat:hover,
.blog-card:hover,
.blog-widget-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.rich-copy {
  color: #334155;
  font-size: 1rem;
  line-height: 1.95;
}

.rich-copy > * + * {
  margin-top: 1.1rem;
}

.rich-copy h2,
.rich-copy h3 {
  color: #0f172a;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2rem;
}

.rich-copy h2 {
  font-size: 1.75rem;
}

.rich-copy h3 {
  font-size: 1.25rem;
}

.rich-copy ul,
.rich-copy ol {
  padding-left: 1.25rem;
}

.rich-copy li + li {
  margin-top: 0.65rem;
}

.rich-copy a {
  color: #480355;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(72, 3, 85, 0.3);
  text-underline-offset: 0.18rem;
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #90FCF9 0%, #7699D4 48%, #9448BC 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(72, 3, 85, 0.1);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.pricing-card:hover::before,
.pricing-card--featured::before {
  opacity: 1;
}

.pricing-card--featured {
  box-shadow: 0 24px 56px rgba(72, 3, 85, 0.12);
}

.pricing-cta {
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
}

.pricing-cta:hover {
  transform: translateY(-1px);
}

.pricing-mini-stat {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pricing-mini-stat:hover,
.pricing-compare-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72, 3, 85, 0.08);
  border-color: rgba(118, 153, 212, 0.55) !important;
}

.pricing-compare-row {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-mini-stat,
  .pricing-card,
  .api-mini-stat,
  .api-endpoint-card,
  .dashboard-mini-stat,
  .dashboard-stat,
  .dashboard-action-card,
  .dashboard-panel,
  .dashboard-row,
  .files-mini-stat,
  .files-folder-card,
  .files-row,
  .files-modal-panel,
  .share-mini-stat,
  .share-download-button,
  .tool-stat,
  .tool-note-card,
  .tool-queue-card,
  .tool-step,
  .tool-related-card,
  .tool-faq-card,
  .profile-mini-stat,
  .profile-avatar-card,
  .profile-api-card,
  .contact-mini-stat,
  .blog-mini-stat,
  .blog-card,
  .blog-widget-link,
  .pricing-compare-row,
  .reveal-card {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes toolsFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}