/* Variant: Sketch — a hand-drawn sketch in blue pen on paper. Light. */
:root {
  --bg: #fbfbf7; --surface: #ffffff; --muted: #f2f2ea; --ink: #1d2038; --ink-2: #555970; --line: #e3e3d8;
  --accent: #2442c4; --accent-ink: #ffffff; --accent-soft: #e2e8ff; --green-soft: #ffe8e0; --amber-soft: #fff2c8;
  --night: #1d2038; --night-2: #2b2f52; --pen: #2442c4; --wob: 255px 15px 225px 15px / 15px 225px 15px 255px;
  color-scheme: light;
}
body { background-image: linear-gradient(rgba(36, 66, 196, 0.06) 1px, transparent 1px); background-size: 100% 28px; }
.sk-hero .pill { border: 2px solid var(--ink); border-radius: var(--wob); }
.sk-hero .pill--accent { background: var(--pen); border-color: var(--pen); }
.skt { position: relative; height: clamp(22rem, 36vw, 28rem); color: var(--pen); font-weight: 700; }
.sk-box { position: absolute; display: grid; place-items: center; padding: 1rem 1.25rem; border: 3px solid var(--pen); border-radius: var(--wob); background: rgba(255, 255, 255, 0.7); font-size: clamp(1rem, 1.6vw, 1.25rem); }
.sk-box--1 { left: 2%; top: 6%; rotate: -3deg; }
.sk-box--2 { right: 4%; top: 26%; rotate: 2deg; border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.sk-box--3 { left: 12%; bottom: 8%; rotate: -1.5deg; }
.sk-arrow { position: absolute; border: 0 solid var(--pen); }
.sk-arrow--1 { left: 26%; top: 18%; width: 34%; height: 18%; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 80% 100%; }
.sk-arrow--1::after { content: ""; position: absolute; right: -9px; bottom: -4px; width: 14px; height: 14px; border: solid var(--pen); border-width: 0 3px 3px 0; rotate: 45deg; }
.sk-arrow--2 { left: 36%; top: 52%; width: 28%; height: 20%; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 100% 80%; }
.sk-arrow--2::after { content: ""; position: absolute; left: -9px; top: -4px; width: 14px; height: 14px; border: solid var(--pen); border-width: 3px 0 0 3px; rotate: 45deg; }
.sk-circle { position: absolute; right: 6%; bottom: 10%; display: grid; place-items: center; width: clamp(9rem, 14vw, 11rem); aspect-ratio: 1.3; padding: 1rem; border: 3px solid #e2483f; border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; color: #e2483f; text-align: center; rotate: -6deg; font-size: 0.9375rem; line-height: 1.2; }
.sk-star { position: absolute; right: 30%; top: 4%; width: 2rem; aspect-ratio: 1; background: #f5b400; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tile, .faq details, .product__visual, .contact__card { border: 2px solid var(--ink); border-radius: var(--wob); }
.tile--dark { border-color: var(--ink); }
.tile--dark .focus strong { color: #a9baff; }
.steps li::before { border: 2px solid var(--pen); background: transparent; color: var(--pen); border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; }
.product__visual--water { background: #e2e8ff; } .product__visual--jobs { background: #ffe8e0; } .product__visual--food { background: #fff2c8; }