/* ─── Base ──────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ─── Hero Section ──────────────────────────────────────────────────────────── */
.hero-section { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37,99,235,.18) 0%, transparent 70%); }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  animation: blobFloat 8s ease-in-out infinite;
  pointer-events: none;
}
.blob-1 {
  width: 400px; height: 400px;
  background: #2563eb;
  top: -80px; left: 10%;
  animation-delay: 0s;
}
.blob-2 {
  width: 300px; height: 300px;
  background: #7c3aed;
  top: -60px; right: 15%;
  animation-delay: -4s;
}
@keyframes blobFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

/* Hero text animations */
.hero-title { animation: fadeInUp .6s ease both; }
.hero-sub   { animation: fadeInUp .6s ease .1s both; }
.hero-search{ animation: fadeInUp .6s ease .2s both; }
.badge-animate { animation: fadeInDown .5s ease both; }
.section-fade { animation: fadeInUp .5s ease both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Text gradient ──────────────────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Tool Cards ─────────────────────────────────────────────────────────────── */
.tool-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(37,99,235,.12), 0 4px 12px rgba(0,0,0,.3);
  border-color: rgba(37,99,235,.35) !important;
}
.tool-card.featured {
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 0 0 1px rgba(37,99,235,.1);
}
.tool-card.featured:hover {
  box-shadow: 0 16px 48px rgba(37,99,235,.18), 0 0 0 1px rgba(37,99,235,.3);
}

/* Card scroll-in animation */
.tool-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease, box-shadow .2s ease, border-color .2s ease;
}
.tool-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Logo ───────────────────────────────────────────────────────────────────── */
.logo-fallback {
  background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);
}
.logo-img { transition: opacity .3s ease; }

/* ─── Category chips ─────────────────────────────────────────────────────────── */
.cat-chip {
  transition: all .2s ease;
  cursor: pointer;
}
.cat-chip:hover { background: rgba(37,99,235,.08); }
.cat-chip.active {
  background: rgba(37,99,235,.15);
  color: #93c5fd;
  border-color: rgba(37,99,235,.4) !important;
}

/* ─── Pricing badges ─────────────────────────────────────────────────────────── */
.pricing-free     { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.2); }
.pricing-freemium { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.2); }
.pricing-paid     { background: rgba(239,68,68,.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
.pricing-contact  { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }

/* ─── Stats bar number count ─────────────────────────────────────────────────── */
.count-up { display: inline-block; }

/* ─── Navju CTA ──────────────────────────────────────────────────────────────── */
.navju-cta {
  background: linear-gradient(135deg, rgba(37,99,235,.12) 0%, rgba(30,41,59,.8) 60%);
  border: 1px solid rgba(37,99,235,.2);
}

/* ─── Ad slot ────────────────────────────────────────────────────────────────── */
.ad-slot {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px dashed #334155;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ─── Focus ring ─────────────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus { outline: none; }

/* ─── Line clamp ─────────────────────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Shimmer hover on cards ─────────────────────────────────────────────────── */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.tool-card { position: relative; }
.tool-card:hover::after { opacity: 1; }

/* ─── Alpine transition ──────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }