/* ZeroPhantom — global overrides & enhancements */

/* Smooth scrollbar styling */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(129,140,248,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(129,140,248,.45); }

/* Selection highlight */
::selection { background: rgba(129,140,248,.25); color: #f0f4f8; }

/* Better focus rings */
:focus-visible { outline: 2px solid rgba(129,140,248,.6); outline-offset: 2px; border-radius: 4px; }

/* Typography polish */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head, 'Bricolage Grotesque', system-ui); letter-spacing: -.025em; }

/* Button & input touch targets on mobile */
@media (max-width: 768px) {
  button, input, select, textarea, a { min-height: 44px; }
  button, a.btn-primary-zp, a.btn-outline-zp { padding: 12px 20px !important; }
}

/* Announcement bar */
.announce-bar {
  background: linear-gradient(90deg, var(--primary-d), #6d28d9);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  letter-spacing: .01em;
}

/* Cards grid system */
.card-grid { display: grid; gap: 24px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
}

/* Feature pill labels */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(129,140,248,.08);
  border: 1px solid rgba(129,140,248,.18);
  color: var(--primary, #818cf8);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* Gradient text utility */
.grad { background: linear-gradient(135deg, #818cf8, #a5b4fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Glow card variant */
.card-glow:hover {
  border-color: rgba(129,140,248,.3) !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,.12), 0 16px 48px rgba(0,0,0,.5) !important;
}

/* Price cards */
.price-card-popular {
  border-color: rgba(129,140,248,.4) !important;
  background: linear-gradient(180deg, rgba(129,140,248,.06) 0%, transparent 60%) !important;
  position: relative;
}

.price-card-popular::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary, #818cf8), #6366f1);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Divider */
.hr { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 32px 0; }

/* Soft shimmer skeleton loader */
@keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.skeleton {
  background: linear-gradient(90deg, var(--surface2,#13151d) 25%, var(--surface3,#181b25) 50%, var(--surface2,#13151d) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}

/* Image lazy-load fade */
img.lazy { opacity: 0; transition: opacity .4s ease; }
img.lazy.loaded { opacity: 1; }