/* Variant: Ribbon — broad flowing ribbons sweep behind a centred headline. Light. */
:root {
  --bg: #fbf9ff; --surface: #ffffff; --muted: #f1eefb; --ink: #19153a; --ink-2: #5c587a; --line: #e4e0f3;
  --accent: #3e2bd6; --accent-ink: #ffffff; --accent-soft: #e6e2ff; --green-soft: #ffe2ea; --amber-soft: #fff0d6;
  --night: #19153a; --night-2: #28234f;
  color-scheme: light;
}
.rb-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(36rem, 82vh, 50rem); display: grid; align-items: center; }
.rb-bands { position: absolute; inset: 0; z-index: -1; }
.rb-band { position: absolute; left: -20%; width: 140%; height: clamp(5rem, 10vw, 8rem); border-radius: 999px; opacity: 0.9; filter: blur(0.5px); }
.rb-band--1 { top: 6%; background: linear-gradient(90deg, #ffb36b, #ff6a9a); rotate: -10deg; }
.rb-band--2 { top: 28%; background: linear-gradient(90deg, #8a6bff, #4fb2ff); rotate: 7deg; opacity: 0.55; }
.rb-band--3 { bottom: 20%; background: linear-gradient(90deg, #ff6a9a, #8a6bff); rotate: -6deg; opacity: 0.65; }
.rb-band--4 { bottom: 2%; background: linear-gradient(90deg, #4fb2ff, #ffd36b); rotate: 9deg; opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) { .rb-band { animation: rb-wave 14s ease-in-out infinite alternate; } .rb-band--2 { animation-delay: -4s; } .rb-band--3 { animation-delay: -8s; } .rb-band--4 { animation-delay: -2s; } @keyframes rb-wave { to { translate: 6% 0; rotate: 0deg; } } }
.rb-text { padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(25, 21, 58, 0.35); }
.rb-title { max-width: 14ch; font-size: clamp(3rem, 6.6vw, 6.25rem); }
.tile--dark .focus strong { color: #b9adff; }
.product__visual--water { background: #e6e2ff; } .product__visual--jobs { background: #ffe2ea; } .product__visual--food { background: #fff0d6; }