/* The landing pages of a SaaS instance's bare domain (docker/nginx/landing/: index.html - the platform, salony.html,
   kluby.html; docker/nginx/CLAUDE.md "The landing page"). Mobile first, light and dark (prefers-color-scheme, or the
   header's switch: html[data-theme], landing.js), no inline styles anywhere - the pages' CSP has no 'unsafe-inline'.

   THE BRAND NAME ("ByteBanshee" today) - one convention, so a rename is mechanical:
   - every visible occurrence in the HTML files is <span data-brand>ByteBanshee</span>; the rest are the <title>,
     the meta description and a few aria-label / alt texts - all found by `grep -n ByteBanshee docker/nginx/landing/*.html`
     and swapped by `sed -i 's/ByteBanshee/NowaNazwa/g' docker/nginx/landing/*.html`; the header's wordmark is the one
     exception, <span data-brand class="wordmark">Byte<b>Banshee</b></span> ("Byte" 500 + "Banshee" 800, Bricolage
     Grotesque - docs/wewnetrzne/brand/bytebanshee-logo-horizontal.svg), changed by hand;
   - the logo files are brand-neutral names: logo-mark.svg (the mark next to the name) and logo-icon.png (the
     favicon) - replace their content, not their names;
   - the colours of the brand are the --brand-* tokens below;
   - landing.js and config.js keep the technical name BYTEBANSHEE_LANDING (written by 05-preconfigure.sh) - not visible.
   The checklist of every place is docs/wewnetrzne/brand/name-proposals.md, "Gdzie zmienić nazwę". */

/* Fonts are served from this folder (fonts/: Archivo and IBM Plex Sans, SIL Open Font License, variable woff2 in the
   latin + latin-ext subsets Google Fonts cuts; Bricolage Grotesque - OFL, latin, weights 500-800 - only for the
   wordmark) - never from Google, so no visitor's address goes to a third party. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/landing/fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 900; font-stretch: 62% 125%; font-display: swap; src: url("/landing/fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 900; font-stretch: 62% 125%; font-display: swap; src: url("/landing/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("/landing/fonts/plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("/landing/fonts/plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	/* ByteBanshee (docs/wewnetrzne/brand/brand.json): night violet, violet, bright mint - the mark's gradient. */
	--brand-1: #4b2e83;
	--brand-2: #7a4fc4;
	--brand-3: #3fd1c2;
	--bg: #f7f5fb;
	--bg-alt: #efebf7;
	--surface: #ffffff;
	--surface-2: #f1edf8;
	--ink: #1d1630;
	--ink-soft: #4f4766;
	--line: #ddd6ea;
	--primary: #4b2e83;
	--primary-ink: #ffffff;
	--accent: #0b7169; /* the brand mint #0c7d74 a shade deeper: AA on --bg-alt too */
	--accent-soft: rgba(122, 79, 196, .12);
	--focus: #4b2e83;
	--wordmark-accent: #4b2e83;
	--error: #a3260f;
	--error-bg: #fdecea;
	--ok: #17714a;
	--shadow: 0 24px 48px -28px rgba(29, 22, 48, .45);
	--display: "Archivo", "Arial Narrow", Arial, sans-serif;
	--body: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
	--gutter: 16px;
	--radius: 16px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #120b22;
		--bg-alt: #170e2b;
		--surface: #1c1433;
		--surface-2: #241a40;
		--ink: #f3eefc;
		--ink-soft: #b4abc9;
		--line: #2f2549;
		--primary: #b9a3ec;
		--primary-ink: #170d2e;
		--accent: #3fd1c2;
		--accent-soft: rgba(63, 209, 194, .12);
		--wordmark-accent: #3fd1c2;
		--focus: #f0c25a;
		--error: #ffb4a3;
		--error-bg: #3a1a14;
		--ok: #7fdcae;
		--shadow: 0 24px 48px -28px rgba(0, 0, 0, .8);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #120b22;
	--bg-alt: #170e2b;
	--surface: #1c1433;
	--surface-2: #241a40;
	--ink: #f3eefc;
	--ink-soft: #b4abc9;
	--line: #2f2549;
	--primary: #b9a3ec;
	--primary-ink: #170d2e;
	--accent: #3fd1c2;
	--accent-soft: rgba(63, 209, 194, .12);
	--wordmark-accent: #3fd1c2;
	--focus: #f0c25a;
	--error: #ffb4a3;
	--error-bg: #3a1a14;
	--ok: #7fdcae;
	--shadow: 0 24px 48px -28px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
a { color: var(--primary); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
figure { margin: 0; }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; text-wrap: balance; margin: 0; color: var(--ink); }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); font-variation-settings: "wdth" 85; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-variation-settings: "wdth" 95; font-weight: 700; }
p { margin: 0; max-width: 68ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

.skip { position: absolute; left: -10000px; top: 0; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 30; background: var(--surface); padding: 8px 12px; }

/* icons: inline SVG, stroked in the current colour */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--primary); background: var(--accent-soft); }

/* ---- top bar ---- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.3rem; font-variation-settings: "wdth" 110; margin-right: auto; }
.brand .wordmark { font-family: "Bricolage Grotesque", var(--display); font-weight: 500; font-variation-settings: normal; letter-spacing: -0.015em; }
.brand .wordmark b { font-weight: 800; color: var(--wordmark-accent); }
.brand-mark { width: auto; height: 30px; flex: none; }
.site-nav { display: none; gap: 4px; }
.site-nav a { padding: 6px 10px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.verticals { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.verticals a { padding: 4px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.verticals a[aria-current="page"] { background: var(--primary); color: var(--primary-ink); }
.theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.theme-toggle .ico { width: 20px; height: 20px; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
}
.top .btn-small { display: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1.02rem var(--body); padding: 13px 22px; border-radius: 12px; border: 2px solid transparent; text-decoration: none; cursor: pointer; min-height: 48px; transition: transform .15s, box-shadow .15s, background .15s; }
.btn .ico { width: 20px; height: 20px; }
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 10px 24px -14px var(--primary); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px var(--primary); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-small { padding: 7px 14px; font-size: 0.92rem; min-height: 40px; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* ---- hero ---- */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
	radial-gradient(60% 50% at 85% 10%, color-mix(in srgb, var(--brand-3) 22%, transparent), transparent 70%),
	radial-gradient(50% 40% at 0% 30%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 70%); }
.hero-grid { display: grid; gap: 40px; padding-block: 40px 56px; }
.hero h1 { font-size: clamp(2.2rem, 8.4vw, 4rem); font-variation-settings: "wdth" 76; font-weight: 900; letter-spacing: -0.02em; margin-top: 14px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--brand-1), var(--brand-2) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hero h1 em { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 em { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; } }
.hero .lead { font-size: 1.15rem; color: var(--ink-soft); margin-top: 20px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ctas .btn { flex: 1 1 100%; }
.hero .note { margin-top: 14px; color: var(--ink-soft); font-size: 0.95rem; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 0.97rem; }
.facts .ico { width: 20px; height: 20px; color: var(--ok); margin-top: 3px; }

/* ---- screenshots of the real application (img/*.webp: the demo data generator's invented records, light theme in
   both page themes - so a hairline border and a soft shadow that read on the light and the dark background) ---- */
.shot { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.shot img, .hero-shots img { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 12px; box-shadow: var(--shadow); }
.shot figcaption { font-size: 0.92rem; color: var(--ink-soft); }
.ai-band .shot figcaption { color: #d6cdea; }
.hero-shots { position: relative; margin: 0; padding: 0 9% 12% 0; align-self: center; min-width: 0; }
.hero-shots .shot-phone { position: absolute; right: 0; bottom: 0; width: 27%; border: 5px solid #1d1630; border-radius: 22px; box-shadow: 0 24px 40px -18px rgba(13, 8, 28, .6); }
.hero-shots figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gallery { display: grid; gap: 28px; margin-top: 40px; }
.gallery-row { display: grid; gap: 28px; }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 820px; justify-self: center; }
.phones img { border: 4px solid #1d1630; border-radius: 18px; }
.phones figcaption { grid-column: 1 / -1; }
.branch-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: #ffffff; }

/* ---- "Zobacz, jak to wygląda" (#zobacz): img/screens/ - cropped e2e screenshots, light and dark, WebP in two widths
   (srcset) with a JPEG fallback (scripts/internal/landing_screenshots.py). Each is a link to the big image; landing.js opens it
   in the lightbox below (a native <dialog>), without the script the browser opens the image itself. ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screens { display: grid; gap: 28px; align-items: start; }
.screens + .screens { margin-top: 28px; }
.screens-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 600px; margin-inline: auto; }
.screen { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.screen-link { display: block; border-radius: 12px; cursor: zoom-in; }
.screen img { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 12px; box-shadow: var(--shadow); transition: transform .15s; }
.screen-link:hover img { transform: translateY(-2px); }
.screen-phone img { border: 4px solid #1d1630; border-radius: 18px; }
.screen figcaption { font-size: 0.92rem; color: var(--ink-soft); }
.screens-note { margin-top: 24px; font-size: 0.88rem; color: var(--ink-soft); }
.lightbox { padding: 12px; border: 0; border-radius: 16px; background: #120b22; color: #f3eefc; max-width: min(96vw, 1460px); max-height: 96vh; overflow: auto; }
.lightbox::backdrop { background: rgba(13, 8, 28, .86); }
.lightbox figure { margin: 0; display: grid; gap: 10px; }
.lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(96vh - 150px); margin-inline: auto; border-radius: 10px; background: #ffffff; }
.lightbox figcaption { max-width: 80ch; margin-inline: auto; text-align: center; font-size: 0.95rem; color: #e6def5; }
.lightbox-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.lightbox-bar button { min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); color: #ffffff; font: 600 0.95rem var(--body); cursor: pointer; }
.lightbox-bar button:hover { background: rgba(255, 255, 255, .16); }
.lightbox :focus-visible { outline: 3px solid #f0c25a; outline-offset: 2px; }

/* ---- "Cennik" (#cennik): partials/cennik-*.html, included by nginx (SSI) only with LANDING_PRICING=draft|on - the
   section isn't in the page at all with the default "off". The draft banner (.pricing-draft) exists only in
   "draft" (docs/technical/landing-pricing.md). ---- */
.pricing-draft { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 28px; padding: 14px 18px; border-radius: 12px; border: 2px dashed #8a6500; background: #fff3c4; color: #4a3700; font-weight: 600; }
.plans { display: grid; gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.plan-featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.plan-badge { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; background: var(--primary); color: var(--primary-ink); }
.plan h3 { font-size: 1.45rem; }
.plan-for { color: var(--ink-soft); font-size: 0.97rem; }
.plan-price { font-family: var(--display); font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.plan-price small { font-family: var(--body); font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.plan ul { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; color: var(--ink-soft); font-size: 0.97rem; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .ico { width: 18px; height: 18px; margin-top: 4px; color: var(--ok); }
.plan li b { color: var(--ink); font-weight: 600; }
.plan .btn { width: 100%; }
.pricing-extra { margin-top: 28px; display: grid; gap: 12px; }
.pricing-extra p { color: var(--ink-soft); }
.price-todo { font-family: var(--mono); font-size: 0.8em; padding: 0 6px; border-radius: 4px; background: #fff3c4; color: #5a4300; }

/* ---- sections ---- */
.section { padding-block: 64px; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 760px; }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* benefits: big statements with an icon */
.benefits { display: grid; gap: 16px; }
.benefit { display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.benefit p { color: var(--ink-soft); }

/* feature grid */
.features { display: grid; gap: 14px; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, transform .15s; }
.feature:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.feature .ico-badge { grid-row: span 2; width: 44px; height: 44px; }
.feature p { color: var(--ink-soft); font-size: 0.97rem; grid-column: 2; }
.feature .tag { grid-column: 2; }
.tag { font-size: 0.74rem; font-weight: 700; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.group-title { font-size: 1.3rem; margin: 40px 0 16px; display: flex; align-items: center; gap: 10px; }
.group-title:first-child { margin-top: 0; }

/* vertical cards on the platform page */
.branch-grid { display: grid; gap: 18px; }
.branch { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; overflow: hidden; }
.branch::after { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--brand-1), var(--brand-3)); }
.branch:hover, .branch:focus-visible { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.branch h3 { font-size: 1.5rem; }
.branch ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-soft); }
.branch li { display: flex; gap: 10px; align-items: flex-start; }
.branch li .ico { width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
.branch-more { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; }
.branch-more .ico { width: 18px; height: 18px; }

/* how it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; }
.step { position: relative; padding: 24px 22px 22px 76px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); counter-increment: step; }
.step::before { content: counter(step); position: absolute; left: 20px; top: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--primary-ink); background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-soft); }

/* deployment options */
.deploy { display: grid; gap: 18px; }
.deploy-card { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.deploy-card .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-soft); }
.deploy-card .checks li { display: flex; gap: 10px; }
.deploy-card .checks .ico { width: 18px; height: 18px; color: var(--ok); margin-top: 4px; }
.deploy-head { display: flex; align-items: center; gap: 14px; }

/* security list */
.sec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sec-list li { display: flex; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.sec-list .ico { color: var(--accent); margin-top: 2px; }
.sec-list b { display: block; }
.sec-list span { color: var(--ink-soft); }

.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.plain-list li { padding-left: 28px; position: relative; color: var(--ink-soft); }
.plain-list li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); }
.plain-list b { color: var(--ink); }

/* AI: rule chips + skill cards */
.ai-band { background: linear-gradient(160deg, #170d2e, #2e1b57 55%, #0d4a48); color: #f3eefc; }
.ai-band h2, .ai-band h3 { color: #ffffff; }
.ai-band .section-head p, .ai-band .muted { color: #d6cdea; }
.ai-band .eyebrow { color: #8fe3de; }
.ai-band a { color: #9ff0e6; }
.ai-rules { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.ai-rules li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-size: 0.95rem; }
.ai-rules .ico { width: 18px; height: 18px; color: #8fe3de; }
.skills { display: grid; gap: 14px; }
.skill { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.skill p { color: #d6cdea; font-size: 0.97rem; }
.skill .tag { color: #8fe3de; }
.ai-example { margin-top: 4px; }
.ai-example summary { cursor: pointer; color: #9ff0e6; font-weight: 600; font-size: 0.93rem; }
.ai-example p { margin-top: 8px; padding: 10px 12px; border-left: 3px solid #8fe3de; background: rgba(0, 0, 0, .18); border-radius: 0 8px 8px 0; font-size: 0.93rem; color: #ece6f6; }

/* ---- the illustration made of HTML: the AI chat (an example - the model is off in the demo, so no screenshot) ---- */
.chat { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); align-self: center; overflow: hidden; }
.mock-caption { padding: 8px 16px 12px; font-size: 0.82rem; color: var(--ink-soft); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat-avatar { width: auto; height: 16px; }
.chat-title { font-weight: 700; }
.chat-ctx { margin-left: auto; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); }
.chat-body { padding: 16px; display: grid; gap: 12px; font-size: 0.94rem; }
.msg { max-width: 94%; border-radius: 16px; padding: 10px 14px; }
.msg p + p, .msg ol + p { margin-top: 8px; }
.msg-user { justify-self: end; background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 4px; }
.msg-ai { justify-self: start; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-bottom-left-radius: 4px; }
.msg-ai ol { margin: 8px 0 0 1.1rem; padding: 0; display: grid; gap: 6px; }
.chat-sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-sources span { font-size: 0.74rem; padding: 3px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }


/* ---- request form ---- */
.signup { background: linear-gradient(150deg, #3a2268, #4b2e83 50%, #0a5c56); color: #ffffff; border-radius: 24px; padding: 24px var(--gutter); display: grid; gap: 28px; box-shadow: var(--shadow); }
.signup h2 { color: #ffffff; }
.signup-head { display: grid; gap: 12px; align-content: start; }
.signup-head p { color: #e6def5; }
.signup-head .facts li { color: #e6def5; }
.signup-head .facts .ico { color: #8fe3de; }
form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
label { font-size: 0.95rem; font-weight: 600; }
input, select, textarea { font: inherit; font-size: 1rem; padding: 12px; border-radius: 10px; border: 2px solid transparent; background: #ffffff; color: #1d1630; width: 100%; min-height: 48px; }
textarea { min-height: 110px; resize: vertical; }
.subdomain { display: flex; align-items: stretch; }
.subdomain input { border-radius: 10px 0 0 10px; min-width: 0; width: auto; flex: 1 1 0; }
.subdomain input:only-child { border-radius: 10px; }
.suffix { flex: 0 1 auto; display: flex; align-items: center; padding-inline: 10px; background: #ebe6f4; color: #4f4766; border-radius: 0 10px 10px 0; font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.hint { font-size: 0.88rem; color: #dcd2f0; }
/* The NIP autofill's line takes no room until it has something to say. */
.hint:empty { display: none; }
.error { display: none; font-size: 0.9rem; font-weight: 600; color: #3b0d03; background: #ffd9cf; padding: 4px 8px; border-radius: 6px; }
.field.invalid .error { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #ffb4a3; }
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { width: 22px; height: 22px; min-height: 0; margin-top: 3px; flex: none; }
.consent label { font-weight: 400; font-size: 0.9rem; color: #e6def5; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions .btn { width: 100%; }
.signup .btn-primary { background: #ffffff; color: #4b2e83; box-shadow: none; }
.signup .btn-primary:hover { background: #f1ecfa; }
/* The bot protection's state under the button (tenant-request-challenge.js): quiet, like a hint, unless it failed. */
.challenge-status { margin: 0; min-height: 1.4em; font-size: 0.88rem; color: #dcd2f0; }
.challenge-status[data-state="failed"], .challenge-status[data-state="limited"], .challenge-status[data-state="unsupported"] { font-weight: 600; color: #3b0d03; background: #ffd9cf; padding: 4px 8px; border-radius: 6px; }
.form-message, .form-success { padding: 14px 16px; border-radius: 12px; background: #ffffff; color: #1d1630; }
.form-message { border-left: 4px solid #c2410c; }
.form-success { border-left: 4px solid #17714a; font-weight: 600; }
.form-success a { color: #4b2e83; }

/* the platform page's "Chcę demo" choice */
.cta-band { display: grid; gap: 20px; padding: 32px 24px; border-radius: 24px; background: linear-gradient(150deg, #3a2268, #4b2e83 50%, #0a5c56); color: #ffffff; box-shadow: var(--shadow); }
.cta-band h2 { color: #ffffff; }
.cta-band p { color: #e6def5; }
.cta-band .ctas { margin-top: 0; }
.cta-band .btn-primary { background: #ffffff; color: #4b2e83; box-shadow: none; }
.cta-band .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, .5); }
.cta-band .btn-ghost:hover { border-color: #ffffff; color: #ffffff; }

/* ---- faq ---- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 48px 16px 18px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 1.4rem; line-height: 1.2; color: var(--primary); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; color: var(--ink-soft); }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); background: var(--bg-alt); }
footer .wrap { padding-block: 32px 40px; color: var(--ink-soft); font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
footer .foot-brand { margin-right: auto; display: flex; align-items: center; gap: 10px; }
footer .foot-brand img { height: 22px; width: auto; }
footer .provider { flex-basis: 100%; font-size: 0.88rem; display: grid; gap: 2px; }
footer .provider b { color: var(--ink); }
footer .legal { display: flex; flex-wrap: wrap; gap: 8px 20px; flex-basis: 100%; font-size: 0.9rem; }
.todo { font-family: var(--mono); font-size: 0.85em; padding: 0 4px; border-radius: 4px; background: #fff3c4; color: #5a4300; }
/* The art. 13 GDPR information under the form's consent - always visible, never folded away. */
.gdpr-info { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; line-height: 1.55; color: #e6def5; max-width: none; }
.gdpr-info a { color: #ffffff; }
/* The legal placeholder pages (polityka-prywatnosci.html, regulamin.html). */
.doc { padding-block: 48px 72px; max-width: 820px; }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 20px; }
.doc h2 { font-size: 1.35rem; margin: 32px 0 10px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc .notice { padding: 14px 16px; border-radius: 12px; background: #fff3c4; color: #5a4300; margin-bottom: 24px; }

/* ---- breakpoints ---- */
@media (min-width: 600px) {
	:root { --gutter: 24px; }
	.top .btn-small { display: inline-flex; }
	.ctas .btn { flex: 0 0 auto; }
	.form-actions .btn { width: auto; }
	.benefits, .features, .skills, .deploy, .branch-grid { grid-template-columns: repeat(2, 1fr); }
	.screens, .plans.plans-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts { grid-template-columns: repeat(2, 1fr); }
	form { grid-template-columns: 1fr 1fr; }
	.field.full, .form-actions, .form-message, .challenge-status { grid-column: 1 / -1; }
	.signup { padding: 40px; }
	.cta-band { padding: 48px; }
}

@media (min-width: 960px) {
	body { font-size: 18px; }
	.site-nav { display: flex; }
	.hero-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding-block: 72px 88px; }
	.hero-grid.wide-visual { grid-template-columns: 1fr 1.2fr; }
	.gallery-row { grid-template-columns: 1fr 1fr; align-items: start; }
	.phones { gap: 18px; }
	.section { padding-block: 88px; }
	.benefits { grid-template-columns: repeat(3, 1fr); }
	.features { grid-template-columns: repeat(3, 1fr); }
	.skills { grid-template-columns: repeat(3, 1fr); }
	.steps { grid-template-columns: repeat(4, 1fr); }
	.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.plans.plans-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
	.steps.three { grid-template-columns: repeat(3, 1fr); }
	.step { padding: 76px 22px 24px; }
	.step::before { top: 22px; }
	.sec-list { grid-template-columns: repeat(2, 1fr); }
	.signup { grid-template-columns: 1fr 1.6fr; gap: 48px; padding: 56px; }
	.signup .form-success { grid-column: 2; }
	.cta-band { grid-template-columns: 1.4fr 1fr; align-items: center; }
	.cta-band .ctas { justify-content: flex-end; }
}

/* Phones: one column whose fields never grow past it - a select's longest option or the address suffix used to push
   the form wider than the screen. */
@media (max-width: 599.98px) {
	.signup, form { grid-template-columns: minmax(0, 1fr); }
	.signup > *, .field, .field > * { min-width: 0; }
	select { text-overflow: ellipsis; }
	.suffix { min-width: 0; }
}

@media (max-width: 420px) {
	.verticals a { padding: 4px 9px; font-size: 0.85rem; }
	.brand { font-size: 1.1rem; }
	.brand-mark { height: 24px; }
}