/* ==========================================================================
   Card polish
   Cleaner surfaces, restrained motion, and a consistent product UI finish.
   ========================================================================== */
:root {
  --bp-surface: hsl(0,0%,100%);
  --bp-surface-strong: hsl(210,45%,97%);
  --bp-card-shadow: 0 8px 24px rgba(15,23,42,.08);
  --bp-card-shadow-hover: 0 14px 32px rgba(15,23,42,.12);
}

.payment-card,
.feature-card,
.hiw-step-card,
.install-step-card,
.security-card,
.security-check-card,
.faq-item-styled,
.wa-card,
.review-card,
.cta-quote-card,
.blog-card,
.single-content-card,
.single-side-card,
.empty-state,
.error-404-wrap {
  clip-path: none;
  border-radius: 8px;
  border-color: var(--border);
}

.payment-card,
.feature-card,
.hiw-step-card,
.security-check-card,
.faq-item-styled,
.review-card,
.cta-quote-card,
.blog-card,
.single-content-card,
.single-side-card,
.empty-state,
.error-404-wrap {
  background: linear-gradient(180deg, var(--bp-surface-strong), var(--bp-surface));
}

.payment-card,
.feature-card,
.hiw-step-card,
.install-step-card,
.security-card,
.security-check-card,
.faq-item-styled,
.review-card,
.cta-quote-card,
.blog-card,
.single-content-card,
.single-side-card,
.empty-state,
.error-404-wrap {
  box-shadow: var(--bp-card-shadow);
}

.payment-card::before,
.feature-card::before,
.hiw-step-card::before,
.security-check-card::before,
.review-card::before,
.faq-item-styled::before,
.wa-card::before,
.cta-quote-card::before {
  display: none;
}

.payment-card.holo-card::after,
.feature-card.holo-card::after,
.install-step-card.holo-card::after,
.review-card.holo-card::after {
  opacity: 0;
}

.card-hover,
.card-hover-sm {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.card-hover:hover,
.card-hover-sm:hover {
  transform: translateY(-3px);
  border-color: hsl(220,15%,75%);
  box-shadow: var(--bp-card-shadow-hover);
}

.glass-panel {
  background: hsla(210,40%,98%,.75);
  border-color: var(--border);
}

.feature-card__top-bar,
.card-top-bar,
.review-card__accent {
  opacity: .82;
}

.feature-card__icon-wrap,
.install-step-icon,
.security-check__icon {
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.feature-card__icon-wrap,
.security-check__icon,
.install-step-icon {
  background: rgba(15,23,42,.045);
}

.feature-card--primary,
.feature-card--secondary {
  background:
    linear-gradient(180deg, var(--bp-surface-strong), var(--bp-surface)),
    linear-gradient(to bottom right, color-mix(in srgb, var(--fc) 10%, transparent), transparent);
}

.feature-card__top-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--fc), transparent 65%);
}

.install-step-card {
  background: linear-gradient(180deg, var(--bp-surface-strong), var(--bp-surface));
}

.install-step-card::before {
  left: 1.5rem;
  right: auto;
  width: 3rem;
  height: 2px;
  border-radius: 999px;
  box-shadow: none;
}

.security-card {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 88, 251, .06), transparent 48%),
    linear-gradient(180deg, hsl(0,0%,100%), hsl(210,40%,98%));
}

.security-check-card {
  padding-top: 1.75rem;
}

.faq-item-styled {
  overflow: hidden;
}

.accordion-header {
  color: var(--foreground);
}

.accordion-item[open] {
  border-color: rgba(0, 88, 251, .35) !important;
  background: linear-gradient(180deg, hsl(0,0%,100%), #f3f7ff);
}

.wa-card {
  background:
    linear-gradient(180deg, hsl(0,0%,100%), #f3f7ff);
  box-shadow: 0 12px 32px rgba(15,23,42,.1);
}

.wa-msg-recv,
.wa-msg-sent {
  border-radius: 8px;
}

.review-card__accent {
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
}

.review-card__avatar,
.hiw-quote__avatar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.verified-badge,
.hero-badge,
.cta-live-pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 767px) {
  .payment-card,
  .feature-card,
  .hiw-step-card,
  .install-step-card,
  .security-card,
  .security-check-card,
  .faq-item-styled,
  .wa-card,
  .review-card,
  .cta-quote-card {
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15,23,42,.09);
  }

  .card-hover:hover,
  .card-hover-sm:hover {
    transform: none;
  }
}