/* externalized from style id: viliante-process-section-visual-upgrade-v1 */
/* Stronger premium background */
.viliante-process-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 80% 22%, rgba(43,93,191,0.12) 0%, rgba(43,93,191,0) 34%),
    radial-gradient(circle at 22% 88%, rgba(220,190,145,0.24) 0%, rgba(220,190,145,0) 42%),
    linear-gradient(135deg, #fff9f0 0%, #ffffff 48%, #f5efe6 100%) !important;
}

/* Subtle luxury pattern */
.viliante-process-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.22 !important;
  background-image:
    linear-gradient(120deg, rgba(16,35,63,0.035) 1px, transparent 1px),
    linear-gradient(30deg, rgba(16,35,63,0.018) 1px, transparent 1px);
  background-size: 58px 58px !important;
  mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 76%) !important;
}

.viliante-process-grid {
  position: relative !important;
  z-index: 2 !important;
}

/* Left title more premium but still readable */
.viliante-process-copy .section-title {
  max-width: 11.8ch !important;
  font-size: clamp(3.4rem, 5.4vw, 6.1rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.065em !important;
  text-shadow: 0 18px 44px rgba(16,35,63,0.08) !important;
}

.viliante-process-copy p {
  max-width: 54ch !important;
  color: #5d6c82 !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
}

/* Cards: less basic, more premium */
.viliante-process-points {
  gap: 16px !important;
  margin-top: 34px !important;
}

.viliante-process-points div {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px 24px 22px 76px !important;
  border-radius: 26px !important;

  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.58)) !important;

  border: 1px solid rgba(43,93,191,0.16) !important;

  box-shadow:
    0 20px 54px rgba(16,35,63,0.075),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;

  backdrop-filter: blur(18px) !important;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease !important;
}

.viliante-process-points div:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(43,93,191,0.28) !important;
  box-shadow:
    0 28px 72px rgba(16,35,63,0.12),
    inset 0 1px 0 rgba(255,255,255,0.98) !important;
}

.viliante-process-points div::before {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  background: linear-gradient(135deg, #1557b7, #7fb0ff) !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;

  box-shadow:
    0 14px 30px rgba(43,93,191,0.28),
    0 0 0 9px rgba(43,93,191,0.08) !important;
}

.viliante-process-points div:nth-child(1)::before { content: "01" !important; }
.viliante-process-points div:nth-child(2)::before { content: "02" !important; }
.viliante-process-points div:nth-child(3)::before { content: "03" !important; }

.viliante-process-points div::after {
  content: "" !important;
  position: absolute !important;
  right: -90px !important;
  top: -90px !important;
  width: 190px !important;
  height: 190px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(43,93,191,0.13), transparent 68%) !important;
  pointer-events: none !important;
}

.viliante-process-points strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #0f2038 !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
}

.viliante-process-points span {
  display: block !important;
  color: #607086 !important;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
}

/* Video card slightly more premium */
.viliante-video-card {
  box-shadow:
    0 28px 78px rgba(16,35,63,0.16),
    0 8px 24px rgba(16,35,63,0.08) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
}

/* Handwritten label better placement */
.viliante-video-label-real {
  margin-bottom: 10px !important;
  color: #10233f !important;
  text-shadow: 0 8px 22px rgba(16,35,63,0.10) !important;
}

@media (max-width: 768px) {
  .viliante-process-copy .section-title {
    font-size: clamp(3rem, 12vw, 4.8rem) !important;
  }

  .viliante-process-points div {
    padding: 20px 18px 20px 68px !important;
  }
}