/* Variant: Floppy — three colourful 3.5-inch floppy disks. Light. */
:root {
  --bg: #f4f1fa; --surface: #ffffff; --muted: #eae6f4; --ink: #1d1a2e; --ink-2: #5c5873; --line: #e0dcec;
  --accent: #3b4cca; --accent-ink: #ffffff; --accent-soft: #e2e5ff; --green-soft: #ffe2ec; --amber-soft: #fff1c4;
  --night: #1d1a2e; --night-2: #2b2745;
  color-scheme: light;
}
.fd-stack { position: relative; height: clamp(20rem, 34vw, 28rem); }
.fd { position: absolute; width: clamp(11rem, 18vw, 15rem); aspect-ratio: 1; border-radius: 10px 10px 10px 10px; box-shadow: 0 30px 40px -24px rgba(29, 26, 46, 0.5); }
.fd::before { content: ""; position: absolute; right: 0; top: 0; width: 9%; height: 9%; background: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.fd--1 { left: 4%; top: 18%; background: #3b4cca; rotate: -12deg; }
.fd--2 { left: 30%; top: 4%; background: #ff5c8a; rotate: 4deg; z-index: 1; }
.fd--3 { left: 52%; top: 26%; background: #ffc233; rotate: 14deg; z-index: 2; }
.fd-shutter { position: absolute; left: 22%; top: 0; width: 56%; height: 34%; border-radius: 0 0 6px 6px; background: linear-gradient(#d9dde3, #b8bec7); }
.fd-shutter::after { content: ""; position: absolute; left: 58%; top: 14%; width: 22%; height: 66%; border-radius: 3px; background: #2a2d33; }
.fd-label { position: absolute; left: 10%; right: 10%; bottom: 0; height: 52%; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 6px 6px 0 0; background: #fffdf6; }
.fd-label b { font-size: clamp(0.9375rem, 1.4vw, 1.125rem); letter-spacing: -0.01em; color: #1d1a2e; }
.fd-label i { height: 2px; background: #e3dccc; }
.fd-notch { position: absolute; left: 4%; bottom: 4%; width: 6%; aspect-ratio: 1; border-radius: 2px; background: rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: no-preference) { .fd { transition: transform 0.3s; } .fd:hover { transform: translateY(-14px); } }
.tile--dark .focus strong { color: #ffc233; }
.steps li:nth-child(1)::before { background: #3b4cca; } .steps li:nth-child(2)::before { background: #ff5c8a; } .steps li:nth-child(3)::before { background: #ffc233; color: #1d1a2e; } .steps li:nth-child(4)::before { background: #1d1a2e; }
.product__visual--water { background: #e2e5ff; } .product__visual--jobs { background: #ffe2ec; } .product__visual--food { background: #fff1c4; }