/* custom.css — premium rewrite */

/* ===== Base ===== */
html { scroll-behavior: smooth; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

/* ===== Flash ===== */
.flash-msg { animation: flashIn .3s ease; }
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Text helpers ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animated gradient text */
.gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 40%, #818cf8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ===== Card hover ===== */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(99, 102, 241, .45);
  box-shadow:
    0 20px 40px -15px rgba(99, 102, 241, .3),
    0 0 0 1px rgba(99, 102, 241, .15);
}

/* ===== Hero glow section ===== */
.hero-glow {
  position: relative;
  overflow: hidden;
}
.hero-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(99,102,241,.3) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 25%, rgba(139,92,246,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 50%, rgba(79,70,229,.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Floating blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .12;
  animation: blobFloat 9s ease-in-out infinite;
  pointer-events: none;
}
.hero-blob-1 { width: 550px; height: 550px; background: #6366f1; top: -180px; left: -120px; animation-delay: 0s; }
.hero-blob-2 { width: 420px; height: 420px; background: #8b5cf6; top: -80px;  right: -100px; animation-delay: -3.5s; }
.hero-blob-3 { width: 320px; height: 320px; background: #06b6d4; bottom: -60px; left: 45%; animation-delay: -6s; }
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(18px,-22px) scale(1.06); }
  66%      { transform: translate(-14px,16px) scale(.95); }
}

/* ===== Product card ===== */
.product-card-outer {
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card-outer:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.5),
    0 20px 45px -15px rgba(99,102,241,.35),
    0 0 60px -20px rgba(139,92,246,.2);
}
.product-card-inner {
  border-radius: inherit;
  overflow: hidden;
  height: 100%;
}

/* ===== Primary glow button ===== */
.btn-glow {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transition: box-shadow .25s ease, transform .15s ease, opacity .15s ease;
}
.btn-glow:hover {
  box-shadow: 0 0 28px rgba(99,102,241,.55);
  transform: translateY(-1px);
  opacity: .95;
}

/* ===== Section label badge ===== */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .875rem;
  border-radius: 9999px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc;
  font-size: .75rem;
  font-weight: 500;
}

/* ===== Stat items in hero ===== */
.hero-stat {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.25rem;
  border-radius: .875rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  font-size: .8125rem;
  color: #94a3b8;
  backdrop-filter: blur(8px);
}
.hero-stat strong { color: #e2e8f0; font-weight: 600; }

/* ===== Category card icon ring ===== */
.cat-icon-ring {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.12));
  border: 1px solid rgba(99,102,241,.25);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-hover:hover .cat-icon-ring {
  background: linear-gradient(135deg, rgba(99,102,241,.3), rgba(139,92,246,.2));
  border-color: rgba(99,102,241,.5);
  box-shadow: 0 0 16px rgba(99,102,241,.3);
}

/* ===== Navbar glow divider ===== */
.nav-glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.5) 40%, rgba(139,92,246,.5) 60%, transparent);
}

/* ===== Footer gradient divider ===== */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.35) 30%, rgba(139,92,246,.35) 70%, transparent);
}

/* ===== prose-soft ===== */
.prose-soft p { margin-bottom: .75rem; line-height: 1.75; }
.prose-soft ul { list-style: disc; padding-left: 1.25rem; margin-bottom: .75rem; }
.prose-soft li { margin-bottom: .25rem; }