/* Variant: Puzzle — interlocking pieces; "your project" completes it. Light. */
:root {
  --bg: #fff7f0; --surface: #ffffff; --muted: #fcebde; --ink: #2a1c2e; --ink-2: #6b5a6e; --line: #f2dfd2;
  --accent: #6a3fd1; --accent-ink: #ffffff; --accent-soft: #ece4ff; --green-soft: #ffe1e6; --amber-soft: #fff0cc;
  --night: #2a1c2e; --night-2: #3a2840;
  color-scheme: light;
}
.pz { --s: clamp(7.5rem, 12vw, 10.5rem); display: grid; grid-template-columns: repeat(2, var(--s)); gap: 0; justify-content: center; padding: 1.5rem; }
.pz-p { position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); padding: 1.4rem 1.1rem; font-weight: 700; font-size: clamp(0.8125rem, 1.15vw, 1rem); hyphens: auto; text-align: center; color: #ffffff; filter: drop-shadow(0 10px 14px rgba(42, 28, 46, 0.25)); }
.pz-p::before, .pz-p::after { content: ""; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: inherit; }
.pz-p span { position: relative; z-index: 1; }
.pz-p--1 { background: #ff7a6b; border-radius: 16px 0 0 0; z-index: 2; }
.pz-p--1::before { right: -15%; top: 35%; }
.pz-p--1::after { left: 35%; bottom: -15%; }
.pz-p--2 { background: #6a3fd1; border-radius: 0 16px 0 0; z-index: 1; }
.pz-p--2::before { display: none; } .pz-p--2::after { left: 35%; bottom: -15%; }
.pz-p--3 { background: #ffb03a; border-radius: 0 0 0 16px; color: #3a2400; z-index: 1; }
.pz-p--3::before { right: -15%; top: 35%; } .pz-p--3::after { display: none; }
.pz-p--4 { background: #ffffff; border: 3px dashed #c9b6e6; border-radius: 0 0 16px 0; color: var(--accent); translate: 18px 18px; rotate: 6deg; }
.pz-p--4::before, .pz-p--4::after { display: none; }
@media (prefers-reduced-motion: no-preference) { .pz-p--4 { animation: pz-snap 4s ease-in-out infinite; } @keyframes pz-snap { 0%, 15% { translate: 18px 18px; rotate: 6deg; } 45%, 75% { translate: 0 0; rotate: 0deg; } 100% { translate: 18px 18px; rotate: 6deg; } } }
.tile--dark .focus strong { color: #ffb2a8; }
.steps li:nth-child(1)::before { background: #ff7a6b; } .steps li:nth-child(2)::before { background: #6a3fd1; } .steps li:nth-child(3)::before { background: #ffb03a; color: #3a2400; } .steps li:nth-child(4)::before { background: var(--ink); }
.product__visual--water { background: #ece4ff; } .product__visual--jobs { background: #ffe1e6; } .product__visual--food { background: #fff0cc; }