/* ITUpX — premium dark tech background (perf-tuned) */
:root {
  --bg-deep: #020617;
  --glow-emerald: rgba(16, 185, 129, 0.22);
  --glow-cyan: rgba(34, 211, 238, 0.14);
  --glow-violet: rgba(139, 92, 246, 0.12);
  --glow-orange: rgba(249, 115, 22, 0.08);
}

html {
  min-height: 100%;
  background: var(--bg-deep);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100vh;
  color: #e2e8f0;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 90% 60% at 10% -10%, var(--glow-emerald), transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 5%, var(--glow-cyan), transparent 50%),
    radial-gradient(ellipse 60% 45% at 80% 90%, var(--glow-violet), transparent 55%),
    radial-gradient(ellipse 50% 40% at 5% 85%, var(--glow-orange), transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(15, 23, 42, 0.35), transparent 70%),
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    48px 48px,
    48px 48px,
    auto;
  /* fixed bg is expensive on mobile scroll */
  background-attachment: scroll;
  position: relative;
}

@media (min-width: 1024px) {
  body {
    background-attachment: fixed;
  }
}

/* Ambient orbs — desktop only */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 280px at 18% 28%, rgba(16, 185, 129, 0.12), transparent 70%),
    radial-gradient(circle 220px at 78% 62%, rgba(56, 189, 248, 0.1), transparent 70%),
    radial-gradient(circle 180px at 55% 88%, rgba(167, 139, 250, 0.09), transparent 70%);
  will-change: transform, opacity;
  animation: ambientDrift 22s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(2, 6, 23, 0.55) 100%);
  opacity: 0.85;
}

@keyframes ambientDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-1%, 1.2%, 0) scale(1.03);
    opacity: 0.95;
  }
}

body > * {
  position: relative;
  z-index: 1;
}

/* Glass surfaces — lighter blur for scroll perf */
.bg-surface,
nav.bg-slate-900,
footer.bg-slate-900 {
  background-color: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tool-card,
.benefit-card {
  background-color: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(51, 65, 85, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.04), 0 12px 28px -20px rgba(0, 0, 0, 0.5);
  /* no backdrop-filter on every card — big win with 24 cards */
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

.tool-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: auto;
}

.tool-card:hover {
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.1),
    0 18px 36px -14px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    transform: translateY(-4px);
  }
}

.benefit-card {
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover {
    transform: translateY(-3px);
  }
}

section.bg-slate-900 {
  background-color: rgba(15, 23, 42, 0.62) !important;
}

/* Section-level containment for smoother scroll */
section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

section#demo,
section:first-of-type {
  content-visibility: visible;
}

.auth-shell {
  min-height: 100vh;
}

/* Skeleton pulse */
@keyframes skeletonPulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.85;
  }
}
.skeleton-card {
  animation: skeletonPulse 1.2s ease-in-out infinite;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 1.5rem;
  min-height: 180px;
}

/* Mobile: kill ambient animation + extra layers + UI denser */
@media (max-width: 767px) {
  body::before {
    animation: none;
    opacity: 0.55;
  }
  body::after {
    opacity: 0.65;
  }
  .bg-surface,
  nav.bg-slate-900,
  footer.bg-slate-900 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(15, 23, 42, 0.96) !important;
  }

  /* Safe area + touch */
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  nav.bg-slate-900 {
    padding-top: env(safe-area-inset-top, 0);
  }

  /* Hero / type scale */
  .font-display {
    letter-spacing: -0.02em;
  }
  h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.35rem) !important;
    line-height: 1.15 !important;
  }

  /* Tools toolbar */
  #tool-search {
    font-size: 16px !important; /* avoid iOS zoom */
    min-height: 48px;
  }
  #btn-sync-tools {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  #auto-sync-badges {
    gap: 0.35rem;
  }
  #auto-sync-badges > span {
    font-size: 10px;
    padding: 0.35rem 0.55rem;
  }

  /* Tool cards denser */
  #tools-grid {
    gap: 0.75rem !important;
  }
  #tools-grid .tool-card,
  a.tool-card {
    padding: 1rem !important;
    border-radius: 1.25rem !important;
  }
  #tools-grid .tool-card .text-3xl,
  #tools-grid .tool-card .text-xl {
    font-size: 1.1rem !important;
  }

  /* Category chips scroll row */
  #category-filters {
    max-height: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.4rem !important;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #category-filters::-webkit-scrollbar {
    display: none;
  }
  #category-filters .cat-chip,
  #category-filters button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 36px;
  }

  /* Pagination full width */
  #tools-pagination {
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
  }
  #tools-pagination button {
    min-height: 40px;
    min-width: 40px;
  }

  /* Mobile menu larger taps */
  #mobile-menu a,
  #mobile-menu button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Lang switcher: always top (topbar); legacy float pin under topbar */
  .itupx-lang-float {
    right: max(12px, env(safe-area-inset-right)) !important;
    top: 52px !important;
    bottom: auto !important;
  }
  .itupx-lang-btn {
    min-height: 36px;
    padding: 0.45rem 0.75rem !important;
  }
  .itupx-lang-topbar {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
  }

  /* Demo tabs scrollable */
  .flex.bg-slate-950.border.border-slate-700.rounded-3xl {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Tool detail mobile */
@media (max-width: 767px) {
  #tool-main {
    padding-top: 1.25rem !important;
    padding-bottom: 5.5rem !important; /* room for sticky CTA */
  }
  .section-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #tool-name {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  aside.lg\:sticky {
    position: static !important;
  }
  /* Sticky bottom action bar on mobile */
  .tool-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0));
    background: rgba(2, 6, 23, 0.94);
    border-top: 1px solid rgba(51, 65, 85, 0.85);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  }
  .tool-mobile-cta a,
  .tool-mobile-cta button {
    flex: 1;
    min-height: 46px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .toc-panel {
    max-height: none !important;
  }
  .toc-scroll {
    max-height: 12rem !important;
  }
}
@media (min-width: 768px) {
  .tool-mobile-cta {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
  .tool-card,
  .benefit-card,
  .skeleton-card {
    transition: none !important;
    animation: none !important;
  }
  .tool-card:hover,
  .benefit-card:hover {
    transform: none;
  }
}