/* Variant: Blocks — three isometric 3D cubes in pastel. Light only. */
:root {
  --bg: #f4f6ff; --surface: #ffffff; --muted: #eaeefc; --ink: #151a33; --ink-2: #555c78; --line: #e0e4f3;
  --accent: #3b5bdb; --accent-ink: #ffffff; --accent-soft: #e3e9ff; --green-soft: #ffe4df; --amber-soft: #fff1cf;
  --night: #151a33; --night-2: #222a4d;
  --c-web: #7aa2ff; --c-crm: #ff8f80; --c-doc: #ffc75f;
  color-scheme: light;
}
.bl-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 64em) { .bl-inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.bl-title { font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.05em; }
.bl-hero .hero__lead { margin-top: 1.5rem; }
.bl-hero .hero__actions { margin-top: 2rem; }
.bl-scene { position: relative; display: grid; place-items: center; height: clamp(22rem, 38vw, 30rem); }
.bl-scene::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 6%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 50, 120, 0.22), transparent); filter: blur(12px); }
.bl-iso { --s: clamp(5.5rem, 9vw, 8rem); position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-45deg); }
.bl-cube { --c: var(--c-web); position: absolute; inset: 0; transform-style: preserve-3d; }
.bl-f { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.5rem; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.55); color: #ffffff; font-size: clamp(0.75rem, 1.1vw, 0.95rem); font-weight: 700; text-align: center; }
.bl-f--front { transform: translateZ(calc(var(--s) / 2)); }
.bl-f--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.bl-f--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(0.82); }
.bl-f--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(0.82); }
.bl-f--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(1.12); }
.bl-cube--web { --c: var(--c-web); transform: translate3d(calc(var(--s) * -1.25), 0, 0); }
.bl-cube--crm { --c: var(--c-crm); transform: translate3d(0, calc(var(--s) * -0.35), 0); }
.bl-cube--doc { --c: var(--c-doc); transform: translate3d(calc(var(--s) * 1.25), 0, 0); }
.bl-cube--doc .bl-f--front { color: #4a3300; }
.bl-cube--mini { --c: #b9a7ff; transform: translate3d(calc(var(--s) * 0.15), calc(var(--s) * -1.25), calc(var(--s) * 0.1)) scale(0.45); }
@media (prefers-reduced-motion: no-preference) {
  .bl-cube { animation: bl-bob 6s ease-in-out infinite; }
  .bl-cube--crm { animation-delay: -2s; } .bl-cube--doc { animation-delay: -4s; } .bl-cube--mini { animation-delay: -1s; }
  @keyframes bl-bob { 50% { translate: 0 -10px; } }
}
.tile:nth-child(2) { background: #ffeae6; border-color: transparent; }
.tile:nth-child(3) { background: #fff3d6; border-color: transparent; }
.product__visual--water { background: #e3e9ff; } .product__visual--jobs { background: #ffe4df; } .product__visual--food { background: #fff1cf; }