/* Variant: Monogram — a huge gradient "G" with app windows emerging behind it. Light. */
:root {
  --bg: #f6f3ff; --surface: #ffffff; --muted: #ece7fb; --ink: #1a1433; --ink-2: #5e5878; --line: #e3ddf3;
  --accent: #5b2fe0; --accent-ink: #ffffff; --accent-soft: #e9e2ff; --green-soft: #ffe2ef; --amber-soft: #ffeedd;
  --night: #1a1433; --night-2: #2a2250;
  --ui-accent: #5b2fe0; --ui-img: #efe9ff;
  color-scheme: light;
}
.mg { position: relative; display: grid; place-items: center; height: clamp(22rem, 38vw, 30rem); }
.mg-g { position: relative; z-index: 2; font-size: clamp(16rem, 32vw, 28rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.06em;
  background: linear-gradient(135deg, #5b2fe0, #c24bff 45%, #ff6a9a 75%, #ffb36b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 30px 40px rgba(91, 47, 224, 0.3)); }
.mg-ui, .mg-ui2 { position: absolute; width: 38%; box-shadow: 0 30px 60px -24px rgba(26, 20, 51, 0.45); }
.mg-ui { left: -4%; top: 2%; rotate: -8deg; z-index: 1; }
.mg-ui2 { right: -4%; bottom: 0; rotate: 6deg; z-index: 3; }
@media (prefers-reduced-motion: no-preference) { .mg-ui { animation: mg-peek 7s ease-in-out infinite; } .mg-ui2 { animation: mg-peek 8s ease-in-out infinite reverse; } @keyframes mg-peek { 50% { translate: 0 -12px; } } }
.tile--dark .focus strong { color: #d5b6ff; }
.product__visual--water { background: #e9e2ff; } .product__visual--jobs { background: #ffe2ef; } .product__visual--food { background: #ffeedd; }