.values {
  position: relative;
  width: calc(100% - 28px);
  margin: 14px;
  padding: 82px max(6vw,24px);
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(168,137,79,.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 6% 14%,rgba(200,173,114,.2),transparent 25%),
    radial-gradient(circle at 92% 86%,rgba(84,72,61,.12),transparent 24%),
    linear-gradient(145deg,#eee2cf,#e5d6be);
}
.values::before {
  content: '';
  position: absolute;
  right: -110px;
  top: -120px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(168,137,79,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(168,137,79,.055),0 0 0 76px rgba(168,137,79,.035);
  pointer-events: none;
}
.values article {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(168,137,79,.34);
  border-radius: 18px;
  background: rgba(255,250,242,.9);
  box-shadow: 0 18px 42px rgba(65,50,37,.055),inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.values article:nth-child(2) {
  color: #fffaf2;
  background: linear-gradient(150deg,#5d534a,#443d36);
}
.values article:nth-child(3) {
  background: linear-gradient(150deg,#f9f2e7,#ebddc6);
}
.values article:nth-child(4) {
  background: linear-gradient(150deg,#ead9b8,#d9c088);
}
.values article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  width: 86px;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--gold-deep),var(--gold2),transparent);
  background-size: 200% 100%;
  animation: valueGoldLine 4.8s ease-in-out infinite;
}
.values article::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -60%;
  bottom: -60%;
  left: -50%;
  width: 18%;
  opacity: 0;
  transform: rotate(16deg);
  background: linear-gradient(90deg,transparent,rgba(255,239,199,.4),transparent);
  transition: left .8s cubic-bezier(.2,.75,.25,1),opacity .3s ease;
}
.values article:hover {
  transform: translateY(-6px);
  border-color: rgba(168,137,79,.72);
  box-shadow: 0 24px 52px rgba(65,50,37,.1),inset 0 1px 0 rgba(255,255,255,.78);
}
.values article:hover::after { left: 135%; opacity: 1; }
.values article > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(168,137,79,.48);
  border-radius: 50%;
  color: var(--gold-deep);
  font: 400 15px/1 var(--display);
}
.values article:nth-child(2) > span {
  color: var(--gold2);
  border-color: rgba(224,204,157,.48);
}
.value-icon {
  width: 68px;
  height: 68px;
  margin: auto 0 38px;
  overflow: visible;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 18px rgba(168,137,79,.12));
  transition: transform .45s cubic-bezier(.2,.75,.25,1),stroke .3s ease;
}
.values article:nth-child(2) .value-icon { stroke: var(--gold2); }
.values article:hover .value-icon {
  transform: translateY(-5px) scale(1.04);
  stroke: #b18e4e;
}
.values article:nth-child(2):hover .value-icon { stroke: #ead8ad; }
.values h3 {
  margin: 0 0 16px;
  color: var(--ink);
  font: 400 clamp(1.5rem,1.8vw,1.85rem)/1.15 var(--display);
  letter-spacing: -.02em;
}
.values article:nth-child(2) h3 { color: #fffaf2; }
.values p { margin: 0; color: #6c6259; font-size: 14px; }
.values article:nth-child(2) p { color: #d7cbc0; }

@keyframes valueGoldLine {
  0%,100% { background-position: 100% 0; opacity: .45; }
  50% { background-position: 0 0; opacity: 1; }
}

@media(max-width:850px) {
  .values {
    width: calc(100% - 16px);
    margin: 8px;
    padding: 60px 16px;
    gap: 10px;
    border-radius: 19px;
  }
  .values article { min-height: 280px; padding: 26px; }
  .value-icon { width: 58px; height: 58px; margin: 42px 0 32px; }
}
@media(prefers-reduced-motion:reduce) {
  .values article::before { animation: none; }
  .values article:hover { transform: none; }
  .values article::after { display: none; }
}