/* Payment page */

.payment-page main {
  padding-bottom: 0;
}

/* Hero — city panorama */
.pay-hero {
  position: relative;
  overflow: hidden;
}

.pay-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 28, 46, 0.35) 0%, rgba(26, 28, 46, 0.55) 100%),
    linear-gradient(135deg, #87ceeb 0%, #4a6fa5 35%, #2d4a6f 70%, #1a2838 100%);
  z-index: 0;
}

.pay-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'%3E%3Cpath fill='rgba(255,255,255,0.08)' d='M0 320 L80 280 L160 300 L240 260 L320 290 L400 240 L480 270 L560 220 L640 250 L720 200 L800 230 L880 190 L960 210 L1040 180 L1120 200 L1200 170 L1200 400 L0 400 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
  opacity: 0.9;
}

.pay-hero-ring {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border: 2px solid rgba(96, 165, 250, 0.6);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(59, 130, 246, 0.5),
    inset 0 0 30px rgba(59, 130, 246, 0.2);
  z-index: 1;
  animation: ring-pulse 4s ease-in-out infinite;
}

.pay-hero-ring::before {
  content: "";
  position: absolute;
  inset: -24px;
  border: 1px dashed rgba(147, 197, 253, 0.4);
  border-radius: 50%;
}

@keyframes ring-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

.pay-hero-title {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 720px;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Alternating features */
.pay-features {
  padding: 72px 0;
}

.pay-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 32px;
}

.pay-feature:last-child {
  margin-bottom: 0;
}

.pay-feature--reverse .pay-feature-copy {
  order: 2;
}

.pay-feature--reverse .pay-feature-media {
  order: 1;
}

.pay-feature-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  position: relative;
  display: grid;
  place-items: center;
}

.pay-feature-media--ar {
  background: linear-gradient(145deg, #dbeafe 0%, #93c5fd 50%, #60a5fa 100%);
}

.pay-feature-media--mall {
  background: linear-gradient(145deg, #e0e7ff 0%, #a5b4fc 50%, #818cf8 100%);
}

.pay-feature-media--coast {
  background: linear-gradient(145deg, #cffafe 0%, #67e8f9 50%, #22d3ee 100%);
}

.pay-feature-media--park {
  background: linear-gradient(145deg, #fef3c7 0%, #fcd34d 40%, #86efac 100%);
}

.pay-scene-icon {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

.pay-scene-tags {
  position: absolute;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px;
}

.pay-scene-tags span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  background: var(--bg-glass-strong);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
}

.pay-feature-copy {
  display: flex;
  align-items: center;
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.75;
  color: var(--text-primary);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.pay-feature-copy:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

/* Tech network */
.pay-tech {
  padding: 80px 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.35);
}

.pay-tech .section-lead {
  margin-inline: auto;
}

.pay-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
  text-align: center;
}

.pay-tech-card {
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.pay-tech-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--glass-shadow-hover);
}

.pay-tech-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
}

.pay-tech-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
}

.pay-tech-card p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .pay-feature,
  .pay-tech-grid {
    grid-template-columns: 1fr;
  }

  .pay-feature--reverse .pay-feature-copy,
  .pay-feature--reverse .pay-feature-media {
    order: unset;
  }

}