/* Variant: Halftone — pop-art dots, a starburst and tilted labels. Light. */
:root {
  --bg: #fffdf2; --surface: #ffffff; --muted: #fff6d6; --ink: #161214; --ink-2: #4f474c; --line: #ece4c6;
  --accent: #e8188c; --accent-ink: #ffffff; --accent-soft: #ffe0f0; --green-soft: #dff4ff; --amber-soft: #fff1b8;
  --night: #161214; --night-2: #262024; --mag: #e8188c; --cyan: #10aee8; --yel: #ffd400;
  color-scheme: light;
}
.ht-title { font-weight: 800; letter-spacing: -0.045em; text-shadow: 4px 4px 0 var(--yel); }
.ht-hero .pill { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ht { position: relative; height: clamp(22rem, 38vw, 30rem); }
.ht-dots { position: absolute; border-radius: 50%; }
.ht-dots--a { left: 6%; top: 4%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, var(--mag) 34%, transparent 36%) 0 0 / 18px 18px; -webkit-mask: radial-gradient(circle at 35% 35%, #000 20%, transparent 70%); mask: radial-gradient(circle at 35% 35%, #000 20%, transparent 70%); }
.ht-dots--b { right: 0; bottom: 0; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, var(--cyan) 34%, transparent 36%) 0 0 / 14px 14px; -webkit-mask: radial-gradient(circle at 60% 60%, #000 25%, transparent 70%); mask: radial-gradient(circle at 60% 60%, #000 25%, transparent 70%); }
.ht-burst { position: absolute; left: 34%; top: 26%; display: grid; place-items: center; width: clamp(9rem, 15vw, 12rem); aspect-ratio: 1; background: var(--yel); color: var(--ink); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.05em;
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 85% 52%, 98% 70%, 76% 72%, 72% 94%, 54% 82%, 36% 98%, 30% 76%, 8% 80%, 16% 58%, 0 42%, 20% 32%, 14% 10%, 38% 16%); filter: drop-shadow(5px 5px 0 var(--ink)); }
@media (prefers-reduced-motion: no-preference) { .ht-burst { animation: ht-pop 3s ease-in-out infinite; } @keyframes ht-pop { 50% { scale: 1.06; rotate: 6deg; } } }
.ht-tag { position: absolute; padding: 0.4rem 0.9rem; border: 2px solid var(--ink); background: #ffffff; box-shadow: 4px 4px 0 var(--ink); font-weight: 800; font-size: clamp(0.875rem, 1.3vw, 1.0625rem); }
.ht-tag--1 { left: 2%; top: 10%; rotate: -6deg; background: var(--cyan); color: #ffffff; }
.ht-tag--2 { right: 4%; top: 18%; rotate: 5deg; background: var(--mag); color: #ffffff; }
.ht-tag--3 { left: 14%; bottom: 10%; rotate: 3deg; }
.tile, .faq details, .product__visual, .contact__card { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.tile--dark .focus strong { color: var(--yel); }
.steps li::before { border: 2px solid var(--ink); background: var(--yel); color: var(--ink); }
.product__visual--water { background: #dff4ff; } .product__visual--jobs { background: #ffe0f0; } .product__visual--food { background: #fff1b8; }