/* ==========================================================================
   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, 0.08);
  --bp-card-shadow-hover: 0 14px 32px rgba(15, 23, 42, 0.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,
.single-content-card,
.single-side-card,
.empty-state,
.error-404-wrap {
  clip-path: none;
  border-radius: 8px;
  border-color: var(--border);
}

.blog-card {
  clip-path: none;
  border-radius: 8px;
  border-color: var(--border);
  background: var(--bp-surface);
  box-shadow: none;
}

.payment-card,
.feature-card,
.hiw-step-card,
.security-check-card,
.faq-item-styled,
.review-card,
.cta-quote-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,
.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;
}

.card-hover,
.card-hover-sm {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.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);
}

.blog-card.card-hover-sm:hover {
  transform: none;
  border-color: hsl(220, 15%, 75%);
  box-shadow: none;
}

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

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

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

.feature-card__icon-wrap,
.security-check__icon,
.install-step-icon {
  background: rgba(15, 23, 42, 0.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, 0.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, 0.35);
  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, 0.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, 0.12);
}

.verified-badge,
.hero-badge,
.cta-live-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.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, 0.09);
  }

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