PageSourceSearch

https://www.sitario.com/blog/

html sitario.com collected 2026-10-02 00:07:57 UTC 115,700 bytes, 360 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="no-js"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v5.18.2"><link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var-pl.woff2" crossorigin><title>Blog — pricing, tech and comparisons for small-business websites | Sitario</title><meta name="title" content="Blog — pricing, tech and comparisons for small-business websites | Sitario"><meta name="description" content="How much a business website costs, how an agency differs from an AI generator, when Wix makes sense — we write about websites for small businesses concretely and with numbers."><meta name="robots" content="index, follow"><link rel="canonical" href="https://www.sitario.com/blog/"><meta property="og:type" content="website"><meta property="og:url" content="https://www.sitario.com/blog/"><meta property="og:title" content="Blog — pricing, tech and comparisons for small-business websites | Sitario"><meta property="og:description" content="How much a business website costs, how an agency differs from an AI generator, when Wix makes sense — we write about websites for small businesses concretely and with numbers."><meta property="og:image" content="https://www.sitario.com/og-image.jpg"><meta property="og:locale" content="en_US"><meta property="og:site_name" content="Sitario"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://www.sitario.com/blog/"><meta property="twitter:title" content="Blog — pricing, tech and comparisons for small-business websites | Sitario"><meta property="twitter:description" content="How much a business website costs, how an agency differs from an AI generator, when Wix makes sense — we write about websites for small businesses concretely and with numbers."><meta property="twitter:image" content="https://www.sitario.com/og-image.jpg"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#fafaf7" media="(prefers-color-scheme: light)"><!-- Theme init — inline to prevent FOUC -->
1<script>
2      (function () {
3        const stored = localStorage.getItem("theme");
4        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
5        if (stored === "dark" || (!stored && prefersDark)) {
6          document.documentElement.classList.add("dark");
7        }
8        document.documentElement.classList.remove("no-js");
9      })();
10    </script>
10<!-- GA4 + Consent Mode v2 (renders only if siteConfig.features.ga4 is set) -->
10<script>(function(){const gaId = "G-T0CM51VHE4";
11
12        window.dataLayer = window.dataLayer || [];
13        function gtag(){dataLayer.push(arguments);}
14        window.gtag = gtag;
15
16        gtag('consent', 'default', {
17          ad_storage: 'denied',
18          ad_user_data: 'denied',
19          ad_personalization: 'denied',
20          analytics_storage: 'denied',
21          functionality_storage: 'granted',
22          personalization_storage: 'denied',
23          security_storage: 'granted',
24          wait_for_update: 500,
25        });
26
27        gtag('consent', 'default', {
28          ad_storage: 'denied',
29          ad_user_data: 'denied',
30          ad_personalization: 'denied',
31          analytics_storage: 'denied',
32          region: ['PL', 'EU'],
33        });
34
35        try {
36          // Nowy format: localStorage['sitario-consent'] = { analytics: bool, ts }.
37          // Fallback: stary klucz 'cookie-consent' ({ analytics_storage: 'granted'|'denied', ... })
38          // — CookieConsent.astro migruje go do nowego przy pierwszym odczycie.
39          var analyticsGranted = null;
40          var stored = localStorage.getItem('sitario-consent');
41          if (stored) {
42            var parsed = JSON.parse(stored);
43            if (parsed && typeof parsed.analytics === 'boolean') {
44              analyticsGranted = parsed.analytics;
45            }
46          }
47          if (analyticsGranted === null) {
48            var legacy = localStorage.getItem('cookie-consent');
49            if (legacy) {
50              var parsedLegacy = JSON.parse(legacy);
51              if (parsedLegacy && parsedLegacy.analytics_storage) {
52                analyticsGranted = parsedLegacy.analytics_storage === 'granted';
53              }
54            }
55          }
56          if (analyticsGranted !== null) {
57            gtag('consent', 'update', {
58              ad_storage: 'denied',
59              ad_user_data: 'denied',
60              ad_personalization: 'denied',
61              analytics_storage: analyticsGranted ? 'granted' : 'denied',
62            });
63          }
64        } catch (e) {}
65      })();</script>
vendor: 63 bytes, line 65
65<script async src="https://www.googletagmanager.com/gtag/js?id=
65G-T0CM51VHE4
vendor: 11 bytes, line 65
65"></script>
65<script>(function(){const gaId = "G-T0CM51VHE4";
66
67        gtag('js', new Date());
68        gtag('config', gaId, {
69          anonymize_ip: true,
70          cookie_flags: 'SameSite=Lax;Secure',
71        });
72      })();</script>
72<style>/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:""}}}@layer theme{:root,:host{--font-sans:"Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-serif:"Inter Variable", "Inter", system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-emerald-500:oklch(69.6% .17 162.48);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--text-fs-display:clamp(2.75rem, 1.5rem + 5vw, 5rem);--text-fs-h1:clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem);--text-fs-h2:clamp(1.75rem, 1.2rem + 2vw, 2.5rem);--text-fs-h3:clamp(1.375rem, 1.1rem + 1vw, 1.75rem);--text-fs-body:clamp(1rem, .95rem + .15vw, 1.0625rem);--color-bg:#f7f8fc;--color-bg-elevated:#fff;--color-bg-subtle:#eef0f7;--color-text:#101426;--color-text-muted:#5b6478;--color-text-faint:#9aa2b8;--color-border:#e2e6f0;--color-accent:#4f46e5;--color-accent-hover:#4338ca;--color-accent-secondary:#9333ea;--color-accent-fg:#fff}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}
72::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body{font-family:var(--font-sans);font-size:var(--text-fs-body);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;line-height:1.7}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);letter-spacing:-.022em;color:var(--color-text);font-weight:750;line-height:1.12}h1{font-size:var(--text-fs-h1)}h2{font-size:var(--text-fs-h2)}h3{font-size:var(--text-fs-h3)}p{max-width:65ch}a{color:var(--color-accent);text-decoration:none;transition:opacity .2s,color .2s}a:hover{color:var(--color-accent-hover)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.-top-3{top:calc(var(--spacing) * -3)}.-top-32{top:calc(var(--spacing) * -32)}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.-right-2{right:calc(var(--spacing) * -2)}.-right-32{right:calc(var(--spacing) * -32)}.-bottom-2{bottom:calc(var(--spacing) * -2)}.-bottom-32{bottom:calc(var(--spacing) * -32)}.bottom-0{bottom:0}.bottom-6{bottom:calc(var(--spacing) * 6)}.-left-32{left:calc(var(--spacing) * -32)}.left-0{left:0}.left-1\/2{left:50%}.left-6{left:calc(var(--spacing) * 6)}.left-\[38\%\]{left:38%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.order-last{order:9999}.m-auto{margin:auto}.mx-1{margin-inline:var(--spacing)}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-3\.5{margin-top:calc(var(--spacing) * 3.5)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-9{margin-top:calc(var(--spacing) * 9)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-1{margin-left:var(--spacing)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-\[16\/11\]{aspect-ratio:16/11}.aspect-\[1200\/806\]{aspect-ratio:1200/806}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-4\.5{height:calc(var(--spacing) * 4.5)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-\[52px\]{height:52px}.h-\[420px\]{height:420px}.h-\[460px\]{height:460px}.h-\[600px\]{height:600px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.max-h-\[calc\(100dvh-3\.75rem\)\]{max-height:calc(100dvh - 3.75rem)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-\[70vh\]{min-height:70vh}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-4\.5{width:calc(var(--spacing) * 4.5)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-\[38\%\]{width:38%}.w-\[62\%\]{width:62%}.w-\[65\%\]{width:65%}.w-\[88\%\]{width:88%}.w-\[420px\]{width:420px}.w-\[460px\]{width:460px}.w-\[800px\]{width:800px}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[28ch\]{max-width:28ch}.max-w-\[50ch\]{max-width:50ch}.max-w-\[52ch\]{max-width:52ch}.max-w-\[55ch\]{max-width:55ch}.max-w-\[56ch\]{max-width:56ch}.max-w-\[58ch\]{max-width:58ch}.max-w-\[60ch\]{max-width:60ch}.max-w-\[62ch\]{max-width:62ch}.max-w-\[64ch\]{max-width:64ch}.max-w-\[70ch\]{max-width:70ch}.max-w-\[72ch\]{max-width:72ch}.max-w-\[76ch\]{max-width:76ch}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-\[26rem\]{min-width:26rem}.min-w-\[560px\]{min-width:560px}.min-w-\[640px\]{min-width:640px}.min-w-\[680px\]{min-width:680px}.min-w-\[820px\]{min-width:820px}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-spin{animation:var(--animate-spin)}
72.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-24{scroll-margin-top:calc(var(--spacing) * 24)}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-8{column-gap:calc(var(--spacing) * 8)}.gap-y-1{row-gap:var(--spacing)}.gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.gap-y-8{row-gap:calc(var(--spacing) * 8)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-clip{overflow-x:clip}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}
72.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-2xl{border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#22c55e\]\/40{border-color:#22c55e66}.border-\[var\(--color-accent\)\]{border-color:var(--color-accent)}.border-\[var\(--color-accent\)\]\/25{border-color:#4f46e540}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--color-accent\)\]\/25{border-color:color-mix(in oklab,var(--color-accent) 25%,transparent)}}.border-\[var\(--color-accent\)\]\/30{border-color:#4f46e54d}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--color-accent\)\]\/30{border-color:color-mix(in oklab,var(--color-accent) 30%,transparent)}}.border-\[var\(--color-accent\)\]\/35{border-color:#4f46e559}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--color-accent\)\]\/35{border-color:color-mix(in oklab,var(--color-accent) 35%,transparent)}}.border-\[var\(--color-accent\)\]\/40{border-color:#4f46e566}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--color-accent\)\]\/40{border-color:color-mix(in oklab,var(--color-accent) 40%,transparent)}}.border-\[var\(--color-accent\)\]\/50{border-color:#4f46e580}@supports (color:color-mix(in lab,red,red)){.border-\[var\(--color-accent\)\]\/50{border-color:color-mix(in oklab,var(--color-accent) 50%,transparent)}}.border-\[var\(--color-border\)\]{border-color:var(--color-border)}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab,red,red)){.border-emerald-500\/30{border-color:color-mix(in oklab,var(--color-emerald-500) 30%,transparent)}}.border-red-500\/30{border-color:#fb2c364d}@supports (color:color-mix(in lab,red,red)){.border-red-500\/30{border-color:color-mix(in oklab,var(--color-red-500) 30%,transparent)}}.bg-\[\#0cce6b\]{background-color:#0cce6b}.bg-\[\#22c55e\]{background-color:#22c55e}.bg-\[\#22c55e\]\/10{background-color:#22c55e1a}.bg-\[\#22c55e\]\/15{background-color:#22c55e26}.bg-\[\#22c55e\]\/70{background-color:#22c55eb3}.bg-\[\#22c55e\]\/80{background-color:#22c55ecc}.bg-\[\#34d399\]{background-color:#34d399}.bg-\[\#ef4444\]\/70{background-color:#ef4444b3}.bg-\[\#f59e0b\]\/70{background-color:#f59e0bb3}.bg-\[\#f87171\]{background-color:#f87171}.bg-\[\#fbbf24\]{background-color:#fbbf24}.bg-\[\#ffa400\]{background-color:#ffa400}.bg-\[var\(--color-accent\)\]{background-color:var(--color-accent)}.bg-\[var\(--color-accent\)\]\/5{background-color:#4f46e50d}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--color-accent\)\]\/5{background-color:color-mix(in oklab,var(--color-accent) 5%,transparent)}}.bg-\[var\(--color-accent\)\]\/10{background-color:#4f46e51a}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--color-accent\)\]\/10{background-color:color-mix(in oklab,var(--color-accent) 10%,transparent)}}.bg-\[var\(--color-accent\)\]\/12{background-color:#4f46e51f}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--color-accent\)\]\/12{background-color:color-mix(in oklab,var(--color-accent) 12%,transparent)}}.bg-\[var\(--color-accent-secondary\,var\(--color-text-faint\)\)\]{background-color:var(--color-accent-secondary,var(--color-text-faint))}.bg-\[var\(--color-bg\)\]{background-color:var(--color-bg)}.bg-\[var\(--color-bg\)\]\/85{background-color:#f7f8fcd9}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--color-bg\)\]\/85{background-color:color-mix(in oklab,var(--color-bg) 85%,transparent)}}.bg-\[var\(--color-bg-elevated\)\]{background-color:var(--color-bg-elevated)}.bg-\[var\(--color-bg-subtle\)\]{background-color:var(--color-bg-subtle)}.bg-\[var\(--color-border\)\]{background-color:var(--color-border)}.bg-\[var\(--color-border\)\]\/70{background-color:#e2e6f0b3}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--color-border\)\]\/70{background-color:color-mix(in oklab,var(--color-border) 70%,transparent)}}.bg-\[var\(--color-text-faint\)\]{background-color:var(--color-text-faint)}.bg-\[var\(--color-text-faint\)\]\/50{background-color:#9aa2b880}@supports (color:color-mix(in lab,red,red)){.bg-\[var\(--color-text-faint\)\]\/50{background-color:color-mix(in oklab,var(--color-text-faint) 50%,transparent)}}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab,red,red)){.bg-emerald-500\/10{background-color:color-mix(in oklab,var(--color-emerald-500) 10%,transparent)}}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab,red,red)){.bg-red-500\/10{background-color:color-mix(in oklab,var(--color-red-500) 10%,transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[var\(--color-accent\)\]{--tw-gradient-from:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[var\(--color-accent\)\]\/15{--tw-gradient-from:#4f46e526}@supports (color:color-mix(in lab,red,red)){.from-\[var\(--color-accent\)\]\/15{--tw-gradient-from:color-mix(in oklab, var(--color-accent) 15%, transparent)}}.from-\[var\(--color-accent\)\]\/15{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[var\(--color-bg\)\]{--tw-gradient-from:var(--color-bg);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-\[var\(--color-bg-subtle\)\]{--tw-gradient-via:var(--color-bg-subtle);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-p
72osition), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-\[var\(--color-border\)\]{--tw-gradient-via:var(--color-border);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[var\(--color-accent\)\]\/5{--tw-gradient-to:#4f46e50d}@supports (color:color-mix(in lab,red,red)){.to-\[var\(--color-accent\)\]\/5{--tw-gradient-to:color-mix(in oklab, var(--color-accent) 5%, transparent)}}.to-\[var\(--color-accent\)\]\/5{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[var\(--color-accent-hover\)\]{--tw-gradient-to:var(--color-accent-hover);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[var\(--color-bg\)\]{--tw-gradient-to:var(--color-bg);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.object-right{object-position:right}.object-top{object-position:top}.p-1{padding:var(--spacing)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-7{padding:calc(var(--spacing) * 7)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-14{padding-block:calc(var(--spacing) * 14)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-3\.5{padding-top:calc(var(--spacing) * 3.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-\[-1px\]{vertical-align:-1px}.align-top{vertical-align:top}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);
72line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.95rem\]{font-size:.95rem}.text-\[0\.6875rem\]{font-size:.6875rem}.text-\[0\.8125rem\]{font-size:.8125rem}.text-\[0\.9375rem\]{font-size:.9375rem}.text-\[2rem\]{font-size:2rem}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[length\:clamp\(2\.375rem\,1\.375rem\+4vw\,4\.125rem\)\]{font-size:clamp(2.375rem,1.375rem + 4vw,4.125rem)}.text-\[length\:var\(--text-fs-display\)\]{font-size:var(--text-fs-display)}.text-\[length\:var\(--text-fs-h1\)\]{font-size:var(--text-fs-h1)}.text-\[length\:var\(--text-fs-h2\)\]{font-size:var(--text-fs-h2)}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-\[1\.06\]{--tw-leading:1.06;line-height:1.06}.leading-\[1\.12\]{--tw-leading:1.12;line-height:1.12}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-\[\#16a34a\]{color:#16a34a}.text-\[\#087a48\]{color:#087a48}.text-\[var\(--color-accent\)\]{color:var(--color-accent)}.text-\[var\(--color-accent\)\]\/25{color:#4f46e540}@supports (color:color-mix(in lab,red,red)){.text-\[var\(--color-accent\)\]\/25{color:color-mix(in oklab,var(--color-accent) 25%,transparent)}}.text-\[var\(--color-accent\)\]\/30{color:#4f46e54d}@supports (color:color-mix(in lab,red,red)){.text-\[var\(--color-accent\)\]\/30{color:color-mix(in oklab,var(--color-accent) 30%,transparent)}}.text-\[var\(--color-accent-fg\)\]{color:var(--color-accent-fg)}.text-\[var\(--color-accent-secondary\)\]{color:var(--color-accent-secondary)}.text-\[var\(--color-text\)\]{color:var(--color-text)}.text-\[var\(--color-text-faint\)\]{color:var(--color-text-faint)}.text-\[var\(--color-text-muted\)\]{color:var(--color-text-muted)}.text-emerald-500{color:var(--color-emerald-500)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){.text-white\/70{color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.text-white\/85{color:#ffffffd9}@supports (color:color-mix(in lab,red,red)){.text-white\/85{color:color-mix(in oklab,var(--color-white) 85%,transparent)}}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-\[var\(--color-accent\)\]{accent-color:var(--color-accent)}.opacity-0{opacity:0}
72.opacity-15{opacity:.15}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.mix-blend-overlay{mix-blend-mode:overlay}.shadow-\[var\(--color-accent\)\]\/10{--tw-shadow-alpha:10%;--tw-shadow:var(--color-accent);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--color-accent\)\]\/25{--tw-shadow-alpha:25%;--tw-shadow:var(--color-accent);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--color-accent\)\]\/30{--tw-shadow-alpha:30%;--tw-shadow:var(--color-accent);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[var\(--color-accent\)\]\/40{--tw-shadow-alpha:40%;--tw-shadow:var(--color-accent);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
72dow)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_8px_24px_-12px_var\(--color-accent\)\]{--tw-shadow:0 8px 24px -12px var(--tw-shadow-color,var(--color-accent));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-sha
72dow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
72dow)}.ring-4{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-\[var\(--color-accent\)\]\/10{--tw-ring-color:#4f46e51a}@supports (color:color-mix(in lab,red,red)){.ring-\[var\(--color-accent\)\]\/10{--tw-ring-color:color-mix(in oklab, var(--color-accent) 10%, transparent)}}.ring-\[var\(--color-accent\)\]\/15{--tw-ring-color:#4f46e526}@supports (color:color-mix(in lab,red,red)){.ring-\[var\(--color-accent\)\]\/15{--tw-ring-color:color-mix(in oklab, var(--color-accent) 15%, transparent)}}.ring-\[var\(--color-accent\)\]\/20{--tw-ring-color:#4f46e533}@supports (color:color-mix(in lab,red,red)){.ring-\[var\(--color-accent\)\]\/20{--tw-ring-color:color-mix(in oklab, var(--color-accent) 20%, transparent)}}.ring-\[var\(--color-border\)\]{--tw-ring-color:var(--color-border)}.ring-black\/10{--tw-ring-color:#0000001a}@supports (color:color-mix(in lab,red,red)){.ring-black\/10{--tw-ring-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.ring-white\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.ring-white\/10{--tw-ring-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-\[120px\]{--tw-blur:blur(120px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-sm{--tw-blur:blur(var(--blur-sm));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.ring-inset{--tw-ring-inset:inset}.group-open\:rotate-180:is(:where(.group):is([open],:popover-open,:open) *){rotate:180deg}@media(hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-110:is(:where(.group):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.03\]:is(:where(.group):hover *){scale:1.03}.group-hover\:text-\[var\(--color-accent\)\]:is(:where(.group):hover *){color:var(--color-accent)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.peer-checked\:bg-\[var\(--color-accent\)\]:is(:where(.peer):checked~*){background-color:var(--color-accent)}.peer-focus-visible\:outline:is(:where(.peer):focus-visible~*){outline-style:var(--tw-outline-style);outline-width:1px}.peer-focus-visible\:outline-2:is(:where(.peer):focus-visible~*){outline-style:var(--tw-outline-style);outline-width:2px}.peer-focus-visible\:outline-offset-2:is(:where(.peer):focus-visible~*){outline-offset:2px}.peer-focus-visible\:outline-\[var\(--color-accent\)\]:is(:where(.peer):focus-visible~*){outline-color:var(--color-accent)}.placeholder\:text-\[var\(--color-text-faint\)\]::placeholder{color:var(--color-text-faint)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);inset:0}.after\:top-0\.5:after{content:var(--tw-content);top:calc(var(--spacing) * .5)}.after\:left-0\.5:after{content:var(--tw-content);left:calc(var(--spacing) * .5)}.after\:h-5:after{content:var(--tw-content);height:calc(var(--spacing) * 5)}.after\:w-5:after{content:var(--tw-content);width:calc(var(--spacing) * 5)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:bg-white:after{content:var(--tw-content);background-color:var(--color-white)}.after\:shadow:after{content:var(--tw-content);
72--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.after\:ring-1:after{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.after\:ring-black\/5:after{content:var(--tw-content);--tw-ring-color:#0000000d}@supports (color:color-mix(in lab,red,red)){.after\:ring-black\/5:after{--tw-ring-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.after\:transition-transform:after{content:var(--tw-content);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.peer-checked\:after\:translate-x-5:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:calc(var(--spacing) * 5);translate:var(--tw-translate-x) var(--tw-translate-y)}@media(hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-\[1\.02\]:hover{scale:1.02}.hover\:border-\[var\(--color-accent\)\]:hover{border-color:var(--color-accent)}.hover\:border-\[var\(--color-accent\)\]\/40:hover{border-color:#4f46e566}@supports (color:color-mix(in lab,red,red)){.hover\:border-\[var\(--color-accent\)\]\/40:hover{border-color:color-mix(in oklab,var(--color-accent) 40%,transparent)}}.hover\:border-\[var\(--color-accent\)\]\/50:hover{border-color:#4f46e580}@supports (color:color-mix(in lab,red,red)){.hover\:border-\[var\(--color-accent\)\]\/50:hover{border-color:color-mix(in oklab,var(--color-accent) 50%,transparent)}}.hover\:border-\[var\(--color-accent\)\]\/60:hover{border-color:#4f46e599}@supports (color:color-mix(in lab,red,red)){.hover\:border-\[var\(--color-accent\)\]\/60:hover{border-color:color-mix(in oklab,var(--color-accent) 60%,transparent)}}.hover\:bg-\[var\(--color-accent-hover\)\]:hover{background-color:var(--color-accent-hover)}.hover\:bg-\[var\(--color-bg-subtle\)\]:hover{background-color:var(--color-bg-subtle)}.hover\:text-\[var\(--color-accent\)\]:hover{color:var(--color-accent)}.hover\:text-\[var\(--color-accent-hover\)\]:hover{color:var(--color-accent-hover)}.hover\:text-\[var\(--color-text\)\]:hover{color:var(--color-text)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-sha
72dow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:border-\[var\(--color-accent\)\]:focus{border-color:var(--color-accent)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-60:disabled{opacity:.6}@media(min-width:420px){.min-\[420px\]\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:40rem){.sm\:inset-x-auto{inset-inline:auto}.sm\:bottom-5{bottom:calc(var(--spacing) * 5)}.sm\:left-5{left:calc(var(--spacing) * 5)}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:aspect-\[16\/10\]{aspect-ratio:16/10}.sm\:h-16{height:calc(var(--spacing) * 16)}.sm\:w-16{width:calc(var(--spacing) * 16)}.sm\:max-w-md{max-width:var(--container-md)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-\[1\.25fr_1fr\]{grid-template-columns:1.25fr 1fr}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:gap-6{gap:calc(var(--spacing) * 6)}.sm\:rounded-2xl{border-radius:var(--radius-2xl)}.sm\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.sm\:p-4{padding:calc(var(--spacing) * 4)}.sm\:p-5{padding:calc(var(--spacing) * 5)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:p-9{padding:calc(var(--spacing) * 9)}.sm\:p-10{padding:calc(var(--spacing) * 10)}.sm\:p-12{padding:calc(var(--spacing) * 12)}.sm\:p-14{padding:calc(var(--spacing) * 14)}.sm\:px-5{padding-inline:calc(var(--spacing) * 5)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-20{padding-block:calc(var(--spacing) * 20)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:text-\[10px\]{font-size:10px}.sm\:text-\[11px\]{font-size:11px}}@media(min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:inline-flex{display:inline-flex}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:items-center{align-items:center}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:py-28{padding-block:calc(var(--spacing) * 28)}.md\:text-\[2\.5rem\]{font-size:2.5rem}}@media(min-width:64rem){.lg\:sticky{position:sticky}.lg\:top-24{top:calc(var(--spacing) * 24)}.lg\:order-first{order:-9999}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:-mt-3{margin-top:calc(var(--spacing) * -3)}.lg\:mt-0{margin-top:0}.lg\:mb-3{margin-bottom:calc(var(--spacing) * 3)}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:max-w-\[72ch\]{max-width:72ch}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[0\.95fr_1\.05fr\]{grid-template-columns:.95fr 1.05fr}.lg\:grid-cols-\[1\.05fr_0\.95fr\]{grid-template-columns:1.05fr .95fr}.lg\:grid-cols-\[1\.05fr_1fr\]{grid-template-columns:1.05fr 1fr}.lg\:grid-cols-\[minmax\(0\,1fr\)_300px\]{grid-template-columns:minmax(0,1fr) 300px}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\:py-14{padding-block:calc(var(--spacing) * 14)}.lg\:py-16{padding-block:calc(var(--spacing) * 16)}.lg\:py-20{padding-block:calc(var(--spacing) * 20)}.lg\:py-24{padding-block:calc(var(--spacing) * 24)}.lg\:py-28{padding-block:calc(var(--spacing) * 28)}}.dark\:text-\[\#0cce6b\]:where(.dark,.dark *){color:#0cce6b}.dark\:text-red-400:where(.dark,.dark *){color:var(--color-red-400)}.dark\:opacity-0:where(.dark,.dark *){opacity:0}
72.dark\:opacity-30:where(.dark,.dark *){opacity:.3}.dark\:opacity-40:where(.dark,.dark *){opacity:.4}.dark\:opacity-50:where(.dark,.dark *){opacity:.5}.dark\:opacity-100:where(.dark,.dark *){opacity:1}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}@font-face{font-family:Inter Variable;src:url(/fonts/inter-var-pl.woff2)format("woff2");font-weight:400 800;font-style:normal;font-display:optional}html.dark{--color-bg:#0b0f1a;--color-bg-elevated:#141a2b;--color-bg-subtle:#1a2136;--color-text:#edf0f8;--color-text-muted:#9aa5bf;--color-text-faint:#626d8a;--color-border:#242e48;--color-accent:#818cf8;--color-accent-hover:#a5b4fc;--color-accent-secondary:#c084fc;--color-accent-fg:#0b0f1a}.prose a,article a,[data-prose] a{text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px}.legal-prose{color:var(--color-text-muted);font-size:1rem;line-height:1.7}.legal-prose>*+*{margin-top:1em}.legal-prose h2{color:var(--color-text);margin-top:2.2em;font-size:1.25rem}.legal-prose h3{color:var(--color-text);margin-top:1.6em;font-size:1.0625rem}.legal-prose p,.legal-prose li{max-width:75ch}.legal-prose strong{color:var(--color-text)}.legal-prose ul,.legal-prose ol{padding-left:1.4rem}.legal-prose ul{list-style:outside}.legal-prose ol{list-style:decimal}.legal-prose li+li{margin-top:.4em}:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}.skip-link{background:var(--color-accent);color:var(--color-accent-fg);z-index:100;padding:.75rem 1.25rem;text-decoration:none;position:absolute;top:-100px;left:0}.skip-link:focus{top:0}.animate-on-scroll{opacity:0;will-change:opacity,transform;transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);transform:translateY(20px)}.animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}html.no-js .needs-js{display:none}.text-gradient-accent{background:linear-gradient(120deg,var(--color-accent) 0%,var(--color-accent-secondary) 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.bg-gradient-accent{background:linear-gradient(120deg,var(--color-accent) 0%,var(--color-accent-secondary) 100%)}.shine-divider{background:linear-gradient(90deg,transparent 0%,var(--color-accent) 50%,transparent 100%);opacity:.35;height:1px}.glow-accent{border-color:var(--color-accent)}.tech-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-size:.75rem}.card-accent-top{position:relative}.card-accent-top:before{content:"";background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));border-radius:inherit inherit 0 0;height:2px;position:absolute;inset:0 0 auto}.form-input{width:100%;color:var(--color-text);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:.5rem;padding:.625rem .875rem;font-size:.9375rem;transition:border-color .15s,box-shadow .15s;display:block}.form-input:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px #4f46e533}@supports (color:color-mix(in lab,red,red)){.form-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 20%,transparent)}}.form-label{color:var(--color-text);margin-bottom:.375rem;font-size:.8125rem;font-weight:500;display:block}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}
72@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}
73</style></head> <!-- overflow-x-clip, NIE -hidden: hidden na body robi z niego kontener scrolla i psuje position:sticky headera (2026-07-16) --> <body class="min-h-screen overflow-x-clip"> <a href="#main" class="skip-link">Przejdź do treści</a>  <header class="sticky top-0 z-40 border-b border-[var(--color-border)] bg-[var(--color-bg)]/85 backdrop-blur"> <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8"> <a href="/" class="flex items-center gap-2.5 no-underline"> <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-accent text-base font-bold text-white shadow-md shadow-[var(--color-accent)]/30">S</span> <span class="text-lg font-bold tracking-tight text-[var(--color-text)]">Sitario</span> </a> <nav aria-label="Main" class="hidden items-center gap-6 lg:flex"> <a href="/#jak-to-dziala" class="text-[0.9375rem] text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">How it works</a><a href="/#opieka" class="text-[0.9375rem] text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">After launch</a><a href="/examples/" class="text-[0.9375rem] text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Examples</a><a href="/#porownanie" class="text-[0.9375rem] text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Comparison</a><a href="/#cennik" class="text-[0.9375rem] text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Pricing</a><a href="/blog/" class="text-[0.9375rem] text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Blog</a> </nav> <div class="flex items-center gap-2.5"> <a href="/pl/" class="rounded-full border border-[var(--color-border)] px-2.5 py-1 text-xs font-semibold text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]"> PL </a> <button type="button" class="js-theme-toggle needs-js relative h-9 w-9 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-[var(--color-text)] transition-colors hover:bg-[var(--color-bg-subtle)]" aria-label="Przełącz motyw"> <svg class="absolute inset-0 m-auto h-5 w-5 transition-opacity dark:opacity-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="4"></circle> <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41
73M17.66 6.34l1.41-1.41"></path> </svg> <svg class="absolute inset-0 m-auto h-5 w-5 opacity-0 transition-opacity dark:opacity-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> </button> 
73<script>
74  // Single delegated listener — handles any number of .js-theme-toggle buttons
75  // on the page. Idempotent: re-mounting the component doesn't double-bind.
76  (function () {
77    if (window.__themeToggleBound) return;
78    window.__themeToggleBound = true;
79
80    document.addEventListener("click", function (e) {
81      var btn = e.target && e.target.closest && e.target.closest(".js-theme-toggle");
82      if (!btn) return;
83      var isDark = document.documentElement.classList.toggle("dark");
84      localStorage.setItem("theme", isDark ? "dark" : "light");
85    });
86  })();
87</script>
87 <a href="https://app.sitario.com/login" class="hidden items-center rounded-lg border border-[var(--color-border)] px-4 py-2 text-sm font-semibold text-[var(--color-text)] no-underline transition-colors hover:bg-[var(--color-bg-subtle)] md:inline-flex"> Log in </a> <a href="https://app.sitario.com/register" class="hidden items-center gap-1.5 rounded-lg bg-gradient-accent px-4 py-2 text-sm font-semibold text-white no-underline shadow-md shadow-[var(--color-accent)]/25 transition-opacity hover:opacity-90 md:inline-flex"> Sign up <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </a> <button type="button" id="mobile-menu-toggle" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] text-[var(--color-text)] transition-colors hover:bg-[var(--color-bg-subtle)] lg:hidden" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="menu-icon-open h-5 w-5" aria-hidden="true"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="menu-icon-close hidden h-5 w-5" aria-hidden="true"><path d="M6 6 18 18"/><path d="M18 6 6 18"/></svg> </button> </div> </div>  <div id="mobile-menu" class="hidden max-h-[calc(100dvh-3.75rem)] overflow-y-auto border-t border-[var(--color-border)] bg-[var(--color-bg)] lg:hidden"> <nav aria-label="Mobile menu" class="mx-auto max-w-6xl px-4 pb-6 pt-3 sm:px-6"> <ul class="flex flex-col"> <li> <a href="/#jak-to-dziala" class="block rounded-lg px-3 py-3 text-base font-medium text-[var(--color-text)] no-underline hover:bg-[var(--color-bg-subtle)]">How it works</a> </li><li> <a href="/#opieka" class="block rounded-lg px-3 py-3 text-base font-medium text-[var(--color-text)] no-underline hover:bg-[var(--color-bg-subtle)]">After launch</a> </li><li> <a href="/examples/" class="block rounded-lg px-3 py-3 text-base font-medium text-[var(--color-text)] no-underline hover:bg-[var(--color-bg-subtle)]">Examples</a> </li><li> <a href="/#porownanie" class="block rounded-lg px-3 py-3 text-base font-medium text-[var(--color-text)] no-underline hover:bg-[var(--color-bg-subtle)]">Comparison</a> </li><li> <a href="/#cennik" class="block rounded-lg px-3 py-3 text-base font-medium text-[var(--color-text)] no-underline hover:bg-[var(--color-bg-subtle)]">Pricing</a> </li><li> <a href="/blog/" class="block rounded-lg px-3 py-3 text-base font-medium text-[var(--color-text)] no-underline hover:bg-[var(--color-bg-subtle)]">Blog</a> </li> </ul> <div class="mt-4 flex flex-col gap-2.5 border-t border-[var(--color-border)] pt-4"> <a href="https://app.sitario.com/login" class="inline-flex items-center justify-center rounded-lg border border-[var(--color-border)] px-4 py-2.5 text-sm font-semibold text-[var(--color-text)] no-underline transition-colors hover:bg-[var(--color-bg-subtle)]"> Log in </a> <a href="https://app.sitario.com/register" class="inline-flex items-center justify-center gap-1.5 rounded-lg bg-gradient-accent px-4 py-2.5 text-sm font-semibold text-white no-underline shadow-md shadow-[var(--color-accent)]/25 transition-opacity hover:opacity-90"> Sign up <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </a> </div> </nav> </div> </header>  
87<script>
88  (function () {
89    var toggle = document.getElementById("mobile-menu-toggle");
90    var menu = document.getElementById("mobile-menu");
91    if (!toggle || !menu) return;
92    var iconOpen = toggle.querySelector(".menu-icon-open");
93    var iconClose = toggle.querySelector(".menu-icon-close");
94    var labelOpen = toggle.getAttribute("aria-label");
95    var labelClose = document.documentElement.lang === "pl" ? "Zamknij menu" : "Close menu";
96    var openedAtY = 0;
97
98    function setOpen(open) {
99      toggle.setAttribute("aria-expanded", open ? "true" : "false");
100      toggle.setAttribute("aria-label", open ? labelClose : labelOpen);
101      menu.classList.toggle("hidden", !open);
102      if (iconOpen) iconOpen.classList.toggle("hidden", open);
103      if (iconClose) iconClose.classList.toggle("hidden", !open);
104      // BEZ scroll-locka: overflow:hidden na html/body ZABIJA position:sticky
105      // (zmierzone 2026-07-17 — header z menu ucieka na górę dokumentu).
106      // Zamiast tego menu zamyka się samo przy przewinięciu strony.
107      if (open) openedAtY = window.scrollY;
108    }
109
110    toggle.addEventListener("click", function () {
111      setOpen(toggle.getAttribute("aria-expanded") !== "true");
112    });
113
114    // Scroll strony z otwartym menu → zamknij (próg 80px na drgnięcia iOS).
115    window.addEventListener(
116      "scroll",
117      function () {
118        if (toggle.getAttribute("aria-expanded") === "true" && Math.abs(window.scrollY - openedAtY) > 80) setOpen(false);
119      },
120      { passive: true }
121    );
122
123    menu.addEventListener("click", function (e) {
124      if (e.target && e.target.closest("a")) setOpen(false);
125    });
126
127    document.addEventListener("keydown", function (e) {
128      if (e.key === "Escape" && toggle.getAttribute("aria-expanded") === "true") {
129        setOpen(false);
130        toggle.focus();
131      }
132    });
133
134    // Wracamy do desktopu z otwartym panelem → sprzątamy scroll-lock.
135    window.matchMedia("(min-width: 64rem)").addEventListener("change", function (mq) {
136      if (mq.matches) setOpen(false);
137    });
138  })();
139</script>
139 <main id="main">  <section class="border-b border-[var(--color-border)]"> <div class="mx-auto max-w-5xl px-4 py-14 sm:px-6 lg:py-16"> <span class="inline-flex items-center gap-2.5"> <span class="inline-flex shrink-0 items-center justify-center rounded-lg h-10 w-10 bg-[var(--color-accent)]/10 text-[var(--color-accent)] ring-1 ring-inset ring-[var(--color-accent)]/20" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5" aria-hidden="true"><path d="M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19z"/><path d="M14 7l3 3"/><path d="M12 20h8"/></svg> </span> <span class="font-medium text-sm text-[var(--color-text)]">Sitario Blog</span> </span> <h1 class="mt-4 text-[length:var(--text-fs-h1)]">Straight talk about websites for small businesses</h1> <p class="mt-4 max-w-[58ch] text-lg text-[var(--color-text-muted)]">
140Price ranges, technology without the jargon, comparisons backed by numbers.
141        We write what we'd want to read ourselves before spending money on a website.
142</p> </div> </section> <section class="bg-[var(--color-bg-subtle)]"> <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:py-14"> <ul class="grid gap-5 sm:grid-cols-2"> <li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/website-for-a-removals-company.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-24"> 24 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/website-for-a-removals-company/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> A Website for a Removals and Transport Company: Quoting Before the Phone Rings </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> A website for a removals company: a quote form that asks about floors, lifts and photos, honest price ranges and free dates, so enquiries arrive with the facts. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
143Read more
144<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/logo-for-a-small-business.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-21"> 21 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/logo-for-a-small-business/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> A Logo for a Small Business: Where to Get One Without Losing a Month </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> A logo for a small business: what it costs, four routes with real price ranges, which files to demand on delivery and what the copyright paperwork has to say. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
145Read more
146<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/>
146<path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/your-website-and-hiring-staff.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-17"> 17 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span><span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">growth</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/your-website-and-hiring-staff/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> Hiring a Tradesperson? Your Website Does Half the Work </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> Hiring for a small business: what a candidate checks before they ring you back, how to write an advert with a real pay range and why you want a careers page. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
147Read more
148<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/who-has-access-to-your-website.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-14"> 14 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span><span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">technology</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/who-has-access-to-your-website/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> Who Has Access to Your Website? The List to Make Before You Need It </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> Website access and passwords: the seven accounts your business runs on, how to check who owns your domain and what to write down so nothing vanishes overnight. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
149Read more
150<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/updating-old-blog-posts.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-10"> 10 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/updating-old-blog-posts/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> Old Blog Posts: Update Them or Write New Ones? How to Decide </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> Updating old blog posts or writing a new one? How to pick refresh candidates in Search Console, what to actually change inside them and what to avoid. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
151Read more
152<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/>
152<path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/website-for-a-driving-school.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-09"> 9 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/website-for-a-driving-school/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> A Website for a Driving School: How Learners Decide Who Gets Their Money </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> A driving school website that fills groups: the course price broken down, upcoming start dates, honest pass rates, named instructors and a sign-up form. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
153Read more
154<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/website-for-an-electrician.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-08"> 8 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span><span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">branze</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/website-for-an-electrician/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> A Website for an Electrician: How to Land Jobs Bigger Than Swapping a Socket </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> An electrician&#39;s website that attracts full installations and testing, not just small repairs: qualifications, price ranges, real fuse box photos and a section for trade clients. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
155Read more
156<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/ile-kosztuje-utrzymanie-strony-internetowej-rocznie.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-07"> 7 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">pricing</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/how-much-a-website-costs-per-year/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> How Much Does a Website Cost Per Year? The Sum Almost Nobody Adds Up </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> What it really costs to keep a website running each year: domain, hosting, care plans and licences in one table, market ranges and a 30-minute audit of your own payments. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
157Read more
158<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/>
158<path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/zmiana-nazwy-firmy-a-strona.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-06"> 6 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/rebranding-your-website-and-domain/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> Changing Your Business Name: What to Do With the Site, the Domain and Your Rankings </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> Changing your business name: when to keep the old domain, how to set 301 redirects address by address and how long rankings really take to recover. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
159Read more
160<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li><li> <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] transition-all hover:-translate-y-0.5 hover:border-[var(--color-accent)]/40 hover:shadow-md"> <img src="/blog/covers/seasonality-and-your-business-website.webp?v=3" alt="" width="1200" height="675" loading="lazy" decoding="async" class="aspect-[16/9] w-full object-cover"> <div class="flex flex-1 flex-col p-6"> <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-faint)]"> <time datetime="2026-09-05"> 5 September 2026 </time> <span class="flex flex-wrap gap-1.5"> <span class="rounded-full border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-2 py-0.5 text-xs font-medium text-[var(--color-text-muted)]">guide</span> </span> </div> <h2 class="mt-2.5 text-lg leading-snug"> <a href="/blog/seasonality-and-your-business-website/" class="text-[var(--color-text)] no-underline after:absolute after:inset-0 group-hover:text-[var(--color-accent)]"> The Slow Season: What Your Website Should Be Doing Before the Rush Returns </a> </h2> <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--color-text-muted)]"> Seasonality and your business website: why content written at peak arrives a year late, how much lead time you need and what to change during the slow season. </p> <span class="mt-auto inline-flex items-center gap-1.5 pt-3 text-sm font-medium text-[var(--color-accent)]">
161Read more
162<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" aria-hidden="true"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg> </span> </div> </article> </li> </ul> <nav aria-label="Blog pagination" class="mt-10 flex items-center justify-center gap-2"> <span class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] px-3.5 py-2 text-sm text-[var(--color-text-faint)] opacity-50"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" aria-hidden="true"><path d="M20 12H5"/><path d="m11 6-6 6 6 6"/></svg>
163Newer
164</span> <span class="flex items-center gap-1.5"> <span aria-current="page" class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-accent text-sm font-semibold text-white">1</span><a href="/blog/2/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">2</a><a href="/blog/3/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">3</a><a href="/blog/4/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">4</a><a href="/blog/5/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">5</a><a href="/blog/6/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">6</a><a href="/blog/7/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">7</a><a href="/blog/8/" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">8</a> </span> <a href="/blog/2/" class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-elevated)] px-3.5 py-2 text-sm font-medium text-[var(--color-text-muted)] no-underline transition-colors hover:border-[var(--color-accent)]/40 hover:text-[var(--color-accent)]">
165Older
166<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" aria-hidden="true"><path d="M4 12h15"/>
166<path d="m13 6 6 6-6 6"/></svg> </a> </nav> </div> </section>  </main> <footer class="border-t border-[var(--color-border)] bg-[var(--color-bg-elevated)]"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-12 sm:grid-cols-3 sm:px-6 lg:px-8"> <div> <div class="flex items-center gap-2.5"> <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-accent text-sm font-bold text-white">S</span> <span class="font-bold text-[var(--color-text)]">Sitario</span> </div> <p class="mt-3 max-w-xs text-sm text-[var(--color-text-muted)]">Complete business websites written, designed and launched by AI — supervised by humans.</p>   </div> <div> <p class="text-xs font-medium uppercase tracking-[0.1em] text-[var(--color-text-faint)]">Navigation</p>  <ul class="mt-3 grid grid-cols-1 gap-x-6 gap-y-2 text-sm min-[420px]:grid-cols-2"> <li><a href="/#jak-to-dziala" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">How it works</a></li><li><a href="/#opieka" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">After launch</a></li><li><a href="/examples/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Examples</a></li><li><a href="/#porownanie" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Comparison</a></li><li><a href="/#cennik" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Pricing</a></li><li><a href="/blog/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Blog</a></li> <li><a href="/examples/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Our work</a></li><li><a href="/partners/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Partners</a></li><li><a href="/docs/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Docs</a></li><li><a href="/pricing/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Full pricing</a></li><li><a href="/blog/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Blog</a></li><li><a href="/plans/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Plan comparison</a></li><li><a href="/start/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Start plan</a></li><li><a href="/business/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Business plan</a></li><li><a href="/premium/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Premium plan</a></li> </ul> </div> <div> <p class="text-xs font-medium uppercase tracking-[0.1em] text-[var(--color-text-faint)]">Contact</p> <ul class="mt-3 space-y-2 text-sm"> <li> <a href="mailto:[email protected]" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">[email protected]</a> </li> <li> <a href="https://play.google.com/store/apps/details?id=com.sitario.app" target="_blank" rel="noopener" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]"> App on Google Play </a> </li> <li> <a href="/terms/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Terms of Service</a> </li> <li> <a href="/privacy/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Privacy Policy</a> </li> <li>  <button type="button" data-open-cookie-settings class="cursor-pointer text-[var(--color-text-muted)] hover:text-[var(--color-text)]"> Cookies </button> </li> </ul> </div> </div> <div class="border-t border-[var(--color-border)]"> <div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-1 px-4 py-4 text-xs text-[var(--color-text-faint)] sm:px-6 lg:px-8"> <span>© 2026 Sitario. All rights reserved.</span> <span> Designed &amp; developed by  <a href="https://www.karol-leszczynski.pl/" class="text-[var(--color-text-muted)] no-underline hover:text-[var(--color-text)]">Karol Leszczyński</a> </span> </div> </div> </footer>  
166<script>
167      document.addEventListener("DOMContentLoaded", () => {
168        const observer = new IntersectionObserver(
169          (entries) => {
170            entries.forEach((entry) => {
171              if (entry.isIntersecting) {
172                entry.target.classList.add("is-visible");
173                observer.unobserve(entry.target);
174              }
175            });
176          },
177          { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
178        );
179        document
180          .querySelectorAll(".animate-on-scroll")
181          .forEach((el) => observer.observe(el));
182      });
183    </script>
183 <!--
184      Theme handoff do aplikacji (app.sitario.com = inny origin, localStorage
185      się nie współdzieli). Delegowany click: każdy link do apki dostaje
186      ?theme=dark|light wg aktualnej klasy na <html>. Nie nadpisuje innych
187      query params.
188    --> 
188<script>(function(){const appHost = "app.sitario.com";
189
190      document.addEventListener("click", function (e) {
191        var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
192        if (!a) return;
193        var url;
194        try {
195          url = new URL(a.getAttribute("href"), window.location.href);
196        } catch (err) {
197          return;
198        }
199        if (url.hostname !== appHost) return;
200        url.searchParams.set(
201          "theme",
202          document.documentElement.classList.contains("dark") ? "dark" : "light"
203        );
204        a.setAttribute("href", url.toString());
205      });
206    })();</script>
206 <!--
207      Atrybucja Google Ads (#32) dla WŁASNYCH kampanii sitario.com. Wizyta
208      z reklamy niesie ?gclid= — doklejamy go do linków W MOMENCIE kliknięcia:
209      wewnętrznych (gclid przeżywa wędrówkę po landingu) oraz tych do apki
210      (app.sitario.com to inny origin, a realna konwersja — złożone zamówienie
211      — powstaje właśnie tam; ads-spend-sync wysyła ją potem do Google).
212      Zero cookies/storage, dokładnie jak dekorator na stronach klientów
213      (runner/src/migrations/037-gclid-link-decorator.mjs): crawler nie klika,
214      więc SEO i canonical nietknięte. Capture, żeby zdążyć przed handoffem
215      motywu wyżej — oba listenery dokładają swój parametr niezależnie.
216    --> 
216<script>(function(){const appHost = "app.sitario.com";
217
218      (function () {
219        var g;
220        try {
221          g = new URLSearchParams(window.location.search).get("gclid");
222        } catch (e) { return; }
223        if (!g || !/^[\w-]{10,200}$/.test(g)) return;
224        document.addEventListener("click", function (e) {
225          var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
226          if (!a) return;
227          var href = a.getAttribute("href") || "";
228          if (href.indexOf("#") === 0 || /^(mailto:|tel:|javascript:)/i.test(href)) return;
229          var url;
230          try {
231            url = new URL(a.href, window.location.href);
232          } catch (err) { return; }
233          var ours = url.origin === window.location.origin || url.hostname === appHost;
234          if (!ours || url.searchParams.has("gclid")) return;
235          url.searchParams.set("gclid", g);
236          a.setAttribute("href", url.toString());
237        }, true);
238      })();
239    })();</script>
239 <!--
240      Auto-język: polskojęzyczna przeglądarka na EN → przekieruj na /pl/
241      (tylko znane ścieżki). Wybór usera ma pierwszeństwo: kliknięcie w
242      przełącznik języka zapisuje sitarioLang i wyłącza auto-redirect.
243      Language > IP-geo (VPN-y, Polacy za granicą).
244    --> 
244<script>
245      (function () {
246        document.addEventListener("click", function (e) {
247          var a = e.target && e.target.closest ? e.target.closest("a[href]") : null;
248          if (!a) return;
249          var href = a.getAttribute("href") || "";
250          if (href === "/" || href.indexOf("/#") === 0) localStorage.setItem("sitarioLang", "en");
251          else if (href === "/pl/" || href.indexOf("/pl/#") === 0) localStorage.setItem("sitarioLang", "pl");
252        });
253        var onPl = window.location.pathname.indexOf("/pl") === 0;
254        if (onPl) return;
255        if (localStorage.getItem("sitarioLang") === "en") return;
256        var langs = navigator.languages || [navigator.language || ""];
257        var isPl = langs.some(function (l) { return String(l).toLowerCase().indexOf("pl") === 0; });
258        if (!isPl) return;
259        var map = { "/": "/pl/", "/docs/": "/pl/docs/", "/docs": "/pl/docs/" };
260        var target = map[window.location.pathname];
261        if (target) window.location.replace(target + window.location.search + window.location.hash);
262      })();
263    </script>
263 <div id="cookie-banner" class="needs-js fixed inset-x-0 bottom-0 z-50 hidden sm:inset-x-auto sm:bottom-5 sm:left-5 sm:max-w-md" role="dialog" aria-label="Cookie consent" aria-live="polite"><div class="rounded-t-2xl border border-b-0 border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-5 shadow-2xl sm:rounded-2xl sm:border-b"><div class="flex items-start gap-3"><span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--color-accent)]/15 to-[var(--color-accent)]/5 text-[var(--color-accent)] ring-1 ring-inset ring-[var(--color-accent)]/20" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5" aria-hidden="true"><path d="M20.5 12a8.5 8.5 0 1 1-8.7-8.5 3.2 3.2 0 0 0 3.6 4 3.2 3.2 0 0 0 5.1 4.5z"/><path d="M9 10h.01"/><path d="M14.5 13.5h.01"/><path d="M10 15.5h.01"/></svg></span><div class="min-w-0"><p class="text-base font-semibold text-[var(--color-text)]">Privacy &amp; cookies</p><p class="mt-1 text-sm leading-relaxed text-[var(--color-text-muted)]">Essential cookies keep the site working and secure. Anonymous Google Analytics runs only after you agree to it. <a href="/privacy/" class="font-medium text-[var(--color-accent)] no-underline hover:text-[var(--color-accent-hover)]">Privacy Policy</a>.
264</p></div></div><div id="cookie-settings" class="mt-4 hidden space-y-2.5"><div class="flex items-start justify-between gap-3 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] p-3.5"><div class="min-w-0"><p class="flex flex-wrap items-center gap-2 text-sm font-semibold text-[var(--color-text)]">Necessary<span class="rounded-full bg-[var(--color-accent)]/10 px-2 py-0.5 text-[0.6875rem] font-semibold text-[var(--color-accent)]">Always on</span></p><p class="mt-1 text-xs leading-relaxed text-[var(--color-text-muted)]">Session, security and remembering your choices — the site doesn&#39;t work without them.</p></div><label class="relative mt-0.5 inline-flex shrink-0 cursor-not-allowed items-center opacity-60"><span class="sr-only">Necessary</span><input type="checkbox" class="peer sr-only" checked disabled><span class="relative h-6 w-11 rounded-full bg-[var(--color-bg-subtle)] ring-1 ring-inset ring-[var(--color-border)] transition-colors after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:ring-1 after:ring-black/5 after:transition-transform peer-checked:bg-[var(--color-accent)] peer-checked:after:translate-x-5"></span></label></div><div class="flex items-start justify-between gap-3 rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] p-3.5"><div class="min-w-0"><p class="text-sm font-semibold text-[var(--color-text)]">Analytics</p><p class="mt-1 text-xs leading-relaxed text-[var(--color-text-muted)]">Google Analytics: anonymous visit statistics. Off until you opt in.</p></div><label class="relative mt-0.5 inline-flex shrink-0 cursor-pointer items-center"><span class="sr-only">Analytics</span><input type="checkbox" id="cookie-analytics-toggle" class="peer sr-only"><span class="relative h-6 w-11 rounded-full bg-[var(--color-bg-subtle)] ring-1 ring-inset ring-[var(--color-border)] transition-colors after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:ring-1 after:ring-black/5 after:transition-transform peer-checked:bg-[var(--color-accent)] peer-checked:after:translate-x-5 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--color-accent)]"></span></label></div></div><div class="mt-4 flex flex-wrap items-center gap-2"><button type="button" id="cookie-accept" class="inline-flex cursor-pointer items-center justify-center rounded-lg bg-gradient-accent px-4 py-2 text-sm font-semibold text-white shadow-md shadow-[var(--color-accent)]/25 transition-opacity hover:opacity-90">Accept all</button><button type="button" id="cookie-decline" class="inline-flex cursor-pointer items-center justify-center rounded-lg border border-[var(--color-border)] px-4 py-2 text-sm font-medium text-[var(--color-text)] transition-colors hover:bg-[var(--color-bg-subtle)]">Necessary only</button><button type="button" id="cookie-save" class="hidden cursor-pointer items-center justify-center rounded-lg border border-[var(--color-border)] px-4 py-2 text-sm font-medium text-[var(--color-text)] transition-colors hover:bg-[var(--color-bg-subtle)]">Save choices</button><button type="button" id="cookie-customize" class="ml-auto inline-flex cursor-pointer items-center gap-1 px-1 py-2 text-sm font-medium text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text)]" aria-expanded="false" aria-controls="cookie-sett
264ings">Customize<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button></div></div></div>
265
266  
266<script>
267    (function () {
268      // RAW JS — NIE owijać treści skryptu w JSX-owy template literal
269      // (anty-pattern opisany w Analytics.astro / CLAUDE.md).
270      var KEY = "sitario-consent";
271      var LEGACY = "cookie-consent";
272      var banner = document.getElementById("cookie-banner");
273      if (!banner) return;
274
275      var settings = document.getElementById("cookie-settings");
276      var toggle = document.getElementById("cookie-analytics-toggle");
277      var btnAccept = document.getElementById("cookie-accept");
278      var btnDecline = document.getElementById("cookie-decline");
279      var btnSave = document.getElementById("cookie-save");
280      var btnCustomize = document.getElementById("cookie-customize");
281
282      // Odczyt zgody; stary format 'cookie-consent' migrowany w locie.
283      function readConsent() {
284        var raw = null;
285        try { raw = JSON.parse(localStorage.getItem(KEY) || "null"); } catch (e) {}
286        if (raw && typeof raw.analytics === "boolean") return raw;
287        var legacy = null;
288        try { legacy = JSON.parse(localStorage.getItem(LEGACY) || "null"); } catch (e) {}
289        if (legacy && legacy.analytics_storage) {
290          var migrated = { analytics: legacy.analytics_storage === "granted", ts: legacy.ts || Date.now() };
291          try {
292            localStorage.setItem(KEY, JSON.stringify(migrated));
293            localStorage.removeItem(LEGACY);
294          } catch (e) {}
295          return migrated;
296        }
297        return null;
298      }
299
300      function setExpanded(open) {
301        settings.classList.toggle("hidden", !open);
302        btnSave.classList.toggle("hidden", !open);
303        btnSave.classList.toggle("inline-flex", open);
304        btnCustomize.classList.toggle("hidden", open);
305        btnCustomize.setAttribute("aria-expanded", open ? "true" : "false");
306      }
307
308      function applyConsent(analytics) {
309        try {
310          localStorage.setItem(KEY, JSON.stringify({ analytics: analytics, ts: Date.now() }));
311        } catch (e) {}
312        banner.classList.add("hidden");
313        setExpanded(false);
314
315        if (typeof window.gtag === "function") {
316          window.gtag("consent", "update", {
317            analytics_storage: analytics ? "granted" : "denied",
318            ad_storage: "denied", // we don't run ads — never granted
319            ad_user_data: "denied",
320            ad_personalization: "denied",
321          });
322        }
323      }
324
325      btnAccept.addEventListener("click", function () {
326        toggle.checked = true;
327        applyConsent(true);
328      });
329      btnDecline.addEventListener("click", function () {
330        toggle.checked = false;
331        applyConsent(false);
332      });
333      btnSave.addEventListener("click", function () {
334        applyConsent(toggle.checked);
335      });
336      btnCustomize.addEventListener("click", function () {
337        setExpanded(true);
338      });
339
340      // Ponowne otwarcie bannera w trybie ustawień, z aktualnym stanem zgód.
341      window.openCookieSettings = function () {
342        var state = readConsent();
343        toggle.checked = !!(state && state.analytics);
344        setExpanded(true);
345        banner.classList.remove("hidden");
346      };
347
348      // Linki "Cookies" w stopkach — dowolny element z data-open-cookie-settings.
349      document.addEventListener("click", function (e) {
350        var el = e.target && e.target.closest ? e.target.closest("[data-open-cookie-settings]") : null;
351        if (!el) return;
352        e.preventDefault();
353        window.openCookieSettings();
354      });
355
356      // Pierwsza wizyta (brak decyzji) → pokaż prosty banner.
357      var prior = readConsent();
358      if (!prior) banner.classList.remove("hidden");
359    })();
360  </script>
360  </body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.