/*
Theme Name: Slušný web
Theme URI: https://slusnyweb.cz/
Author: IFKEES LTD
Description: Vlastní blokové téma pro slusnyweb.cz. Úvodní stránka z bloků, interaktivní části jako bloky tématu.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: slusny
License: Proprietary
*/

/* Layout: one typeface, type scale from theme.json presets, soft moving gradients behind glass cards,
   one live 3D háček travelling through the light sections, two dark pinned scenes (trades, café demo), bento modules. */
:root {
	--paper: var(--wp--preset--color--paper);
	--ink: var(--wp--preset--color--ink);
	--ink-2: var(--wp--preset--color--ink-2);
	--accent: var(--wp--preset--color--accent);
	--accent-2: var(--wp--preset--color--accent-2);
	--hair: rgba(14, 16, 15, .1);
	--glass: rgba(255, 255, 255, .55);
	--glass-line: rgba(255, 255, 255, .75);
	--night: #0e100f;
	--night-2: #9aa19c;
	--night-glass: rgba(255, 255, 255, .07);
	--blob-1: #39c48f;
	--blob-2: #bfeedd;
	--blob-3: #c9dcff;
	--blob-4: #ffd7c2;
	--cafe-ink: #2a2118;
	--cafe-text: #6a5a4a;
	--cafe-paper: #faf8f4;
	--cafe-soft: #efe7dc;

	--fs-small: var(--wp--preset--font-size--small);
	--fs-base: var(--wp--preset--font-size--base);
	--fs-medium: var(--wp--preset--font-size--medium);
	--fs-large: var(--wp--preset--font-size--large);
	--fs-x-large: var(--wp--preset--font-size--x-large);
	--fs-xx-large: var(--wp--preset--font-size--xx-large);
	--fs-huge: var(--wp--preset--font-size--huge);

	--f-sans: var(--wp--preset--font-family--geist);
	--f-old: "Helvetica Neue", Arial, sans-serif;
	--gut: clamp(16px, 2.6vw, 40px);
	--r: 24px;
	--sec: clamp(56px, 4vw + 32px, 120px); /* one vertical rhythm for all sections */
	--ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
/* anchor jumps stop below the fixed header (14 px from the top + 58 px tall) with a 24 px gap */
html { scroll-padding-top: 96px; }
html:has(> body.admin-bar:not(.has-bar-toggle)), html.pbsab-on:has(> body.admin-bar) { scroll-padding-top: 128px; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
a { color: inherit; }
/* links inside running text look the same everywhere: green, underlined. Buttons, "Více o…" links in cards,
   menu and footer have their own styles (they win by specificity) */
:where(.site-main p, .site-main li) a:not(.wp-block-button__link) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wrap { padding-inline: var(--gut); max-width: 1440px; width: 100%; margin-inline: auto; position: relative; }

.page-content > * { position: relative; z-index: 2; }
.page-content > .dark { z-index: 3; }
/* Page content is a constrained layout: theme sections are full width (alignfull),
   anything else the owner adds becomes a readable 760px column with side gutters on phones. */
.page-content > :not(.alignfull):not(.pin-spacer) { max-width: min(var(--wp--style--global--content-size), calc(100% - 2 * var(--gut))) !important; }
.page-content > :not(.alignfull):not(.pin-spacer) + :not(.alignfull):not(.pin-spacer) { margin-top: 1em; }
.page-content > .alignfull + :not(.alignfull):not(.pin-spacer) { margin-top: 2em; }
/* GSAP wraps pinned scenes in .pin-spacer, which has no alignfull class: keep it full width */
.page-content > .pin-spacer { max-width: none !important; margin-inline: 0 !important; }

/* ---------- shared pieces ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 500; padding: 6px 13px 6px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); margin-bottom: 22px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
.dark .pill { background: var(--night-glass); border-color: rgba(255, 255, 255, .1); color: var(--paper); }
h2.title { font-size: var(--fs-x-large); line-height: 1; letter-spacing: -.045em; max-width: 13em; text-wrap: balance; }
.lead { color: var(--ink-2); max-width: 36em; margin-top: 20px; }
.note { color: var(--ink-2); }
/* glass card for groups, panels and details; button wrappers with the glass button style are excluded */
.is-style-glass:not(.wp-block-button) { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border-radius: var(--r); }

/* Glass for the accents (header, prices, care status panel) and for cards with small examples inside
   (module tiles, "Pro koho"), owner's request 10.10.2026. Other cards are solid and light:
   easier to read, and the effect keeps its meaning (owner's decision 10.10.2026). */
:is(.feature, .row, .step, .wp-block-details, .included, .box, .prose, .form-box, .next-box, .cta-box, .facts).is-style-glass { background: #f8f9f6; border: 1px solid rgba(14, 16, 15, .07); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; transition: transform .3s var(--ease); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.big .wp-block-button__link { font-size: var(--fs-base); padding: 15px 24px; }
.wp-block-button.is-style-glass .wp-block-button__link { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* one arrow for every button on the site: the same icon as the text links, it moves a little on hover */
.wp-block-button__link::after { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease); }
.wp-block-button__link:hover::after { transform: translateX(3px); }
.top .wp-block-button__link::after { width: 13px; height: 13px; }

/* ---------- soft moving colour, grain, the 3D layer ---------- */
.hacek-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.site-main > .hacek-layer { position: fixed; z-index: 1; }
.aura { position: absolute; inset: 0; overflow: hidden; }
.aura i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55; will-change: transform; }
.aura i:nth-child(1) { background: radial-gradient(closest-side, var(--blob-1), transparent); left: 45%; top: -35vmax; opacity: .38; animation: drift1 26s ease-in-out infinite alternate; }
.aura i:nth-child(2) { background: radial-gradient(closest-side, var(--blob-2), transparent); left: -20vmax; top: 10%; animation: drift2 30s ease-in-out infinite alternate; }
.aura i:nth-child(3) { background: radial-gradient(closest-side, var(--blob-3), transparent); right: -25vmax; bottom: -30vmax; animation: drift3 34s ease-in-out infinite alternate; }
.aura i:nth-child(4) { background: radial-gradient(closest-side, var(--blob-4), transparent); left: 20%; bottom: -45vmax; opacity: .45; animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-12vmax, 10vmax) scale(1.1); } }
@keyframes drift2 { to { transform: translate(14vmax, -8vmax) scale(.92); } }
@keyframes drift3 { to { transform: translate(-10vmax, -12vmax) scale(1.08); } }
body::after { content: ""; position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.fallback-tick { display: none; }
.no-gl .fallback-tick { display: block; position: absolute; right: 6%; top: 16%; width: min(34vw, 420px); height: auto; transition: opacity .5s ease, transform .6s var(--ease); }
/* the static háček belongs to the first screen only: it fades out once the hero has scrolled away */
.no-gl.past-hero .fallback-tick { opacity: 0; transform: translateY(-30px); }
@media (max-width: 859px) {
	/* phones show the picture from the first paint, without waiting for front.js to add .no-gl */
	.fallback-tick, .no-gl .fallback-tick { display: block; position: absolute; right: 3%; top: 78px; width: min(38vw, 220px); height: auto; transition: opacity .5s ease, transform .6s var(--ease); }
	.past-hero .fallback-tick { opacity: 0; transform: translateY(-30px); }
}
/* very small phones (iPhone SE size): no room above the headline, the tick in the logo is enough */
@media (max-width: 859px) and (max-height: 620px), (max-width: 340px) {
	.fallback-tick, .no-gl .fallback-tick { display: none; }
}

/* ---------- floating glass header ---------- */
/* No transform or backdrop-filter on .top itself: either would trap the full-screen mobile menu inside the pill.
   The glass lives on ::before, centring is done with auto margins. */
.top { position: fixed; z-index: 20; left: 0; right: 0; margin-inline: auto; top: calc(env(safe-area-inset-top, 0px) + 14px); width: min(1180px, calc(100% - 2 * var(--gut))); display: flex; align-items: center; gap: 20px; padding: 7px 7px 7px 22px; border-radius: 999px; }
/* on desktops the header is clearly narrower than the content (80 px in from each side from 1100 px up, growing smoothly from 940 px), so it reads as a floating bar on purpose, not as a strip that did not stretch */
.top { width: min(1040px, calc(100% - 2 * var(--gut) - clamp(0px, 100vw - 940px, 160px))); }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(246, 247, 244, .62); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 30px -16px rgba(14, 16, 15, .35); }
.admin-bar .top { top: calc(32px + 14px); }
/* toolbar hidden by the toggle plugin: the header stays in its normal place until the bar is shown */
.admin-bar.has-bar-toggle .top { top: calc(env(safe-area-inset-top, 0px) + 14px); }
html.pbsab-on .admin-bar.has-bar-toggle .top { top: calc(32px + 14px); }
.top .logo { margin-right: auto; font-size: 1.625rem; line-height: 1; white-space: nowrap; }
.top .logo a { text-decoration: none; }
.top .wp-block-navigation { font-size: var(--fs-small); font-weight: 500; }
.top .wp-block-navigation .wp-block-navigation__container { gap: 26px; }
.top .wp-block-navigation a { text-decoration: none; color: var(--ink-2); }
.top .wp-block-navigation a:hover, .top .wp-block-navigation .current-menu-item > a { color: var(--ink); }
.top .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border-radius: 50%; place-items: center; background: rgba(255, 255, 255, .7); color: var(--ink); }
/* WordPress switches to the overlay menu below 600px; the button must stay hidden above that */
@media (max-width: 599px) { .top .wp-block-navigation__responsive-container-open { display: grid; } }
.top .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

/* full-screen mobile menu (core navigation overlay) */
.top .wp-block-navigation__responsive-container.is-menu-open { background: var(--paper) radial-gradient(80vmax 60vmax at 90% 0%, rgba(57, 196, 143, .28), transparent 60%) !important; color: var(--ink) !important; padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--gut) 32px !important; }
.top .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px !important; align-items: flex-start !important; }
.top .is-menu-open .wp-block-navigation__container { gap: 6px !important; align-items: flex-start !important; }
.top .is-menu-open .wp-block-navigation-item { font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.top .is-menu-open .wp-block-navigation-item a { color: var(--ink); padding: 4px 0 !important; }
.top .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .8); top: 0 !important; right: 0 !important; }
.top .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-block: 130px 36px; }
.hero h1 { align-self: center; font-size: var(--fs-huge); line-height: .88; letter-spacing: -.06em; font-weight: 500; animation: rise 1.1s var(--ease) both; }
.hero h1 em { font-style: normal; color: var(--accent); }
@keyframes rise { from { opacity: 0; transform: translateY(.25em); } }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; animation: rise 1s var(--ease) .4s both; }
.hero-foot > p { max-width: 34em; color: var(--ink-2); font-size: var(--fs-medium); line-height: 1.4; letter-spacing: -.01em; }
.hero-foot > p strong { color: var(--ink); font-weight: 500; }

/* ---------- manifest ---------- */
.manifest { padding-block: 20vh 24vh; }
.manifest-text { font-size: var(--fs-xx-large); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; max-width: 15em; text-wrap: pretty; }
.js-reveal .manifest-text .w { opacity: .14; }

/* ---------- dark scenes ---------- */
.dark { background: var(--night); color: var(--paper); overflow: hidden; }
.scene-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.scene-head .pill { margin: 0; }
.scene-head > span:last-child { font-size: var(--fs-small); color: var(--night-2); text-align: right; }

.trades .bg { position: absolute; inset: 0; }
.trades .bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; filter: grayscale(.85) contrast(1.05); transform: scale(1.02); transition: opacity 1.1s ease, transform 1.1s ease; }
/* the active photo slowly moves closer, like a camera */
.trades .bg img.on { opacity: .6; animation: trades-zoom 9s ease-out forwards; }
@keyframes trades-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.trades .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,16,15,.88) 0%, rgba(14,16,15,.55) 55%, rgba(14,16,15,.35) 100%), linear-gradient(0deg, rgba(14,16,15,.7), transparent 35%); }
.trades .wrap { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-block: 96px 32px; }
.trade-list { list-style: none; margin: 0; padding: 0; align-self: center; display: grid; }
.trade-list li { font-size: clamp(3rem, 1.4rem + 7vw, 9.5rem); font-weight: 500; letter-spacing: -.055em; line-height: .96; color: rgba(236, 238, 234, .16); transition: color .6s ease, transform .8s var(--ease); cursor: default; }
.trade-list li.on { color: var(--paper); transform: translateX(.12em); }
.trade-list li.on::before { content: ""; display: inline-block; width: .32em; height: .22em; margin-right: .18em; vertical-align: .18em; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='%2321b07a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.trades .foot2 p { color: rgba(236, 238, 234, .82); max-width: 30em; font-size: var(--fs-medium); line-height: 1.4; }

/* café demo */
.stage .wrap { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 4vw, 72px); padding-block: 96px 28px; }
.stage .scene-head { grid-column: 1 / -1; }
.titles { align-self: center; display: grid; min-width: 0; }
.titles > div { grid-area: 1 / 1; transition: opacity .5s, transform .7s var(--ease); }
.titles > div:not(.on) { opacity: 0; transform: translateY(24px); pointer-events: none; }
.titles h2 { margin-bottom: 18px; font-weight: 500; font-size: clamp(2rem, 1.2rem + 2.6vw, 4.2rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.titles p { color: var(--night-2); max-width: 26em; }
.viewport { align-self: center; position: relative; display: grid; justify-items: center; perspective: 1600px; min-width: 0; padding-block: 24px; }
.index { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.index button { all: unset; cursor: pointer; color: var(--night-2); font-size: var(--fs-small); font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--night-glass); transition: color .3s, background .3s; }
.index button:hover { color: var(--paper); }
.index button.on { color: var(--night); background: var(--paper); }
.index button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.frame { width: 100%; max-width: 900px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8); transform-origin: 50% 0; transition: max-width .45s var(--ease), border-radius .45s var(--ease); }
.chrome { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f2f2f0; border-bottom: 1px solid #e2e2df; }
.dots { display: flex; gap: 6px; flex: none; transition: opacity .3s; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #d4d4d0; }
.url { flex: 1; min-width: 0; font-size: 14px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.url b { color: #222; font-weight: 500; }
.speed { flex: none; font-size: 14px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #f6e6cf; color: #8a5414; transition: background .4s, color .4s; font-variant-numeric: tabular-nums; }
.site { position: relative; height: clamp(300px, 54svh, 500px); overflow: hidden; background: #fff; }

.score { position: absolute; right: 0; bottom: -8px; display: flex; align-items: center; gap: 12px; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 10px 18px 10px 10px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.score svg { width: 56px; height: 56px; transform: rotate(135deg); }
.score circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.score .track { stroke: rgba(14, 16, 15, .12); stroke-dasharray: 103.65 138.2; }
.score .bar { stroke: var(--accent); stroke-dasharray: 0 138.2; transition: stroke-dasharray 1.2s var(--ease); }
.score .num { font-weight: 600; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.score .num small { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-left: 2px; }
.score .cap { display: block; font-size: var(--fs-small); color: var(--ink-2); margin-top: 4px; }

.inner { --g: 28px; position: absolute; left: 0; top: 0; width: 900px; transform-origin: 0 0; container-type: inline-size; background: #fff; color: #333; font-family: var(--f-old); font-size: 16px; line-height: 1.5; overflow: hidden; transition: background .6s, transform .45s var(--ease); }
.frame.resizing .inner { transition: background .6s; }
.inner h3, .inner h4, .inner p { margin: 0; }
.o-top { display: flex; justify-content: space-between; background: #3a2a20; color: #c9b9a9; font-size: 11px; padding: 7px 24px; max-height: 40px; overflow: hidden; transition: max-height .5s var(--ease), padding .5s; }
.s-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #ececec; transition: padding .5s, border-color .5s; }
.s-logo { font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: #6b4430; white-space: nowrap; }
.s-nav { display: flex; gap: 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a8a; white-space: nowrap; }
.s-nav span { max-width: 9em; overflow: hidden; transition: max-width .5s var(--ease), opacity .4s, margin .5s; }
.s-open { font-family: var(--f-sans); font-weight: 500; font-size: 14px; color: var(--cafe-ink); background: var(--cafe-soft); border-radius: 999px; padding: 0; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease), opacity .4s, padding .5s; }
.s-open .sh { display: none; }
.s-open::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2e9a5e; margin-right: 7px; vertical-align: 1px; }

.band { position: relative; min-height: 260px; display: grid; grid-template-columns: minmax(0, 1fr); }
.band > * { grid-area: 1 / 1; transition: opacity .6s, transform .7s var(--ease); }
.band .old { position: relative; display: grid; place-content: center; text-align: center; color: #fff; padding: 24px 80px; background-color: #c9b8a4; background-size: cover; background-position: center; }
/* photos of the demo are real <img loading="lazy"> (they used to be CSS backgrounds that loaded with the page) */
.band .old .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.band .old h3, .band .old p { position: relative; }
.band .old .arr, .band .old .dots2 { z-index: 1; }
.band .new .img { overflow: hidden; }
.band .new .img img, .card .ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.card .ph { overflow: hidden; }
.card .ph img { position: absolute; inset: 0; }
.card .tag { z-index: 1; }
.band .old h3 { font-weight: 300; font-size: 24px; letter-spacing: .2em; text-transform: uppercase; }
.band .old p { margin-top: 8px; font-style: italic; font-size: 14px; color: #fff; }
.band .arr { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 16px; }
.band .arr.l { left: 18px; } .band .arr.r { right: 18px; }
.band .dots2 { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; }
.band .dots2 i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); }
.band .dots2 i:first-child { background: #fff; }
.band .new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: stretch; padding: 8px var(--g) 4px; background: var(--cafe-paper); opacity: 0; transform: translateY(10px); pointer-events: none; }
.band .new > * { min-width: 0; }
.band .new .txt { display: grid; align-content: center; gap: 14px; padding-block: 16px; }
.band .new .open { font-family: var(--f-sans); font-size: 14px; color: #2e7a4e; font-weight: 500; }
.band .new h3 { font-family: var(--f-sans); font-weight: 600; font-size: 34px; line-height: 1.04; letter-spacing: -.04em; color: var(--cafe-ink); }
.band .new .img { border-radius: 18px; background-color: var(--cafe-soft); background-size: cover; background-position: center; min-height: 236px; }
.s-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.s-btn { font-family: var(--f-sans); font-weight: 600; font-size: 14px; padding: 10px 17px; border-radius: 999px; background: var(--cafe-ink); color: #fff; white-space: nowrap; }
.s-btn.alt { background: transparent; color: var(--cafe-ink); box-shadow: inset 0 0 0 1.5px var(--cafe-ink); }

.below { display: grid; grid-template-columns: minmax(0, 1fr); }
.below > * { grid-area: 1 / 1; transition: opacity .6s, transform .7s var(--ease); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px; }
.cols h4 { margin-bottom: 8px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: #444; }
.cols p { margin-bottom: 8px; font-size: 11.5px; line-height: 1.5; color: #a3a3a3; }
.cols .more { font-size: 11px; color: #b07040; }
.vitrina { padding: 24px var(--g) 28px; opacity: 0; transform: translateY(14px); pointer-events: none; }
.vitrina .vh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; font-family: var(--f-sans); }
.vitrina .vh b { font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--cafe-ink); }
.vitrina .vh span { font-size: 14px; color: var(--cafe-text); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card { font-family: var(--f-sans); }
.card .ph { aspect-ratio: 1; border-radius: 14px; background-color: var(--cafe-soft); background-size: cover; background-position: center; position: relative; }
.card .tag { position: absolute; left: 8px; top: 8px; background: #fff; color: #8c4a2f; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.card .nm { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--cafe-ink); letter-spacing: -.01em; }
.card .nm span { font-weight: 500; color: var(--cafe-text); white-space: nowrap; }
.card .ds { font-size: 14px; color: var(--cafe-text); margin-top: 2px; line-height: 1.35; }

.s1 .inner { background: var(--cafe-paper); }
.s1 .s-head { padding-inline: var(--g); border-color: transparent; }
.s1 .s-logo { font-family: var(--f-sans); font-weight: 600; text-transform: none; letter-spacing: -.03em; color: var(--cafe-ink); font-size: 21px; }
.s1 .s-nav { font-family: var(--f-sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--cafe-text); font-weight: 500; }
.s1 .cols { padding-inline: var(--g); }
.s1 .cols h4 { font-family: var(--f-sans); font-weight: 600; font-size: 18px; letter-spacing: -.02em; text-transform: none; color: var(--cafe-ink); }
.s1 .cols p { font-family: var(--f-sans); font-size: 15px; color: var(--cafe-text); }
.s2 .o-top { max-height: 0; padding-block: 0; }
.s2 .s-nav span.x { max-width: 0; opacity: 0; margin-left: -18px; }
.s2 .s-open { max-width: 14em; opacity: 1; padding: 7px 14px; }
.s2 .band .old { opacity: 0; transform: scale(.98); }
.s2 .band .new { opacity: 1; transform: none; pointer-events: auto; }
.s3 .cols { opacity: 0; transform: translateY(-8px); }
.s3 .vitrina { opacity: 1; transform: none; pointer-events: auto; }
.frame.s4 { max-width: 330px; border-radius: 34px; }
.site { transition: height .45s var(--ease); }
.frame.s4 .site { height: clamp(300px, 64svh, 600px); }
.s4 .dots { opacity: 0; width: 0; margin-right: -10px; }
.s5 .speed { background: #d7ebdf; color: var(--accent); }

@container (max-width: 560px) {
	/* a container query styles descendants only, so the gutter is reset on the blocks themselves */
	.s-head, .band .new, .vitrina, .cols { --g: 16px; }
	.s-head { padding: 14px var(--g); gap: 8px; }
	.s-nav { display: none; }
	.s-logo, .s1 .s-logo { font-size: 18px; }
	.s-open { flex: none; font-size: 13px; }
	.s-open .lg { display: none; }
	.s-open .sh { display: inline; }
	.s2 .s-open { padding: 6px 11px; }
	.band .new { grid-template-columns: 1fr; gap: 14px; padding-top: 4px; }
	.band .new .img { order: -1; min-height: 150px; border-radius: 16px; }
	.band .new .txt { padding-block: 0 8px; }
	.band .new h3 { font-size: 26px; }
	.cols { grid-template-columns: 1fr; padding: 20px var(--g); gap: 18px; }
	.o-top { display: none; }
	.vitrina { padding-top: 18px; }
	.vitrina .vh span { display: none; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.card .ds { display: none; }
}
/* the demo site in phone mode (frame 264 to 330 px): narrow gutters, shorter photo, the cakes come into view */
@container (max-width: 360px) {
	.s-head, .band .new, .vitrina, .cols { --g: 12px; }
	.s-head { padding: 10px var(--g); gap: 6px; }
	.s-logo, .s1 .s-logo { font-size: 15px; }
	.s-open { font-size: 14px; }
	.s2 .s-open { padding: 5px 9px; }
	.s-open::before { width: 6px; height: 6px; margin-right: 5px; }
	.band { min-height: 0; }
	.band .new { gap: 10px; padding-top: 0; }
	.band .new .img { min-height: 0; height: 104px; border-radius: 12px; }
	.band .new .txt { gap: 8px; padding-block: 0 4px; }
	.band .new h3 { font-size: 23px; }
	.s-btn { padding: 8px 13px; }
	.vitrina { padding-top: 14px; }
	.vitrina .vh { margin-bottom: 10px; }
	.vitrina .vh b { font-size: 18px; }
	.cards { gap: 10px; }
	.card .nm { margin-top: 6px; }
}

/* ---------- offer ---------- */
.offer { padding-block: var(--sec); }
.offer .lead { margin-bottom: 56px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* text from the top; the "Více o…" link sits at the bottom, on one line across the three cards */
.plan { padding: 30px 30px 34px; display: flex; flex-direction: column; gap: 18px; }
.plan > .more { margin-top: auto; }
.plan.main { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan h3, .month h3 { font-size: var(--fs-medium); letter-spacing: -.03em; line-height: 1.1; }
.plan .price { font-size: var(--fs-large); font-weight: 500; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .from, .price .per { font-size: var(--fs-small); letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.plan.main .price .from, .plan.main .price .per, .plan.main p:not(.price) { color: rgba(236, 238, 234, .72); }
.plan p:not(.price) { color: var(--ink-2); }
ul.ticks { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.plan.main ul.ticks { border-color: rgba(255,255,255,.12); }
ul.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
ul.ticks li::before { content: ""; width: 16px; height: 11px; margin-top: 8px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='%230b7a52' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan.main ul.ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='%2321b07a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.monthly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
/* align-content: start keeps the text at the top when the neighbour card is taller (the grid row stretches both) */
.month { padding: 26px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; align-content: start; }
.month .price { font-size: var(--fs-medium); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.month p:not(.price) { grid-column: 1 / -1; color: var(--ink-2); max-width: 40em; }
.offer .note { margin-top: 22px; font-size: var(--fs-small); }

/* ---------- modules ---------- */
.modules { padding-block: var(--sec); }
.modules .lead { margin-bottom: 48px; }
.included { padding: 28px 30px 30px; margin-bottom: 56px; }
.included h3, .modules .subhead { margin-bottom: 20px; font-size: var(--fs-medium); letter-spacing: -.03em; }
.included ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.included li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.included li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--accent) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); margin-top: 2px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 16px; }
.tile { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: transform .4s var(--ease), background .3s; }
.tile:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .75); }
.tile h3 { font-size: var(--fs-medium); letter-spacing: -.03em; line-height: 1.12; }
.tile p { color: var(--ink-2); }
.tile .for { margin-top: auto; padding-top: 12px; font-size: var(--fs-small); font-weight: 500; color: var(--accent); }
.tile.w2 { grid-column: span 2; }
.tile.h2 { grid-row: span 2; }
.tile.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile.ink:hover { background: #1a1d1b; }
.tile.ink p { color: rgba(236,238,234,.72); }
.tile.ink .for { color: var(--accent-2); }
.mini { margin-top: 6px; display: grid; gap: 8px; }
.menu-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .7); font-size: var(--fs-small); }
.menu-row b { font-weight: 500; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.slots span { font-size: var(--fs-small); font-weight: 500; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.slots span.on { background: var(--accent-2); color: var(--ink); }
.slots span.off { opacity: .35; text-decoration: line-through; }
.langs { display: flex; gap: 8px; margin-top: 6px; }
.langs span { font-size: var(--fs-small); font-weight: 600; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .7); }
.langs span:first-child { background: var(--ink); color: var(--paper); }
.modules .note { margin-top: 26px; max-width: 46em; }

/* ---------- care ---------- */
.care { padding-block: var(--sec); }
.care .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.status { position: sticky; top: 100px; padding: 26px 26px 22px; display: grid; gap: 20px; }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-site { font-weight: 600; font-size: var(--fs-medium); letter-spacing: -.03em; }
.st-ok { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--accent); background: rgba(33, 176, 122, .14); padding: 6px 12px; border-radius: 999px; }
.st-ok i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(33, 176, 122, .5); } 70% { box-shadow: 0 0 0 9px rgba(33, 176, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(33, 176, 122, 0); } }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .7); }
.st-list li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--accent) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform .5s var(--ease), opacity .4s; }
.st-list b { font-weight: 500; }
.st-list span { color: var(--ink-2); font-size: var(--fs-small); text-align: right; }
.js-status .st-list li::before { transform: scale(0); opacity: 0; }
.js-status .st-list li.on::before { transform: none; opacity: 1; }
.st-up { padding: 16px 16px 14px; border-radius: 14px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .7); display: grid; gap: 12px; }
.st-up-head { display: flex; justify-content: space-between; gap: 12px; }
.st-up-head b { font-weight: 500; }
.st-up-head span { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 34px; align-items: end; }
.bars i { display: block; height: 100%; border-radius: 3px; background: var(--accent-2); opacity: .85; }
.bars i.dip { height: 72%; background: #e6b45a; }
.status figcaption { font-size: var(--fs-small); color: var(--ink-2); }
.rows { margin-top: 40px; display: grid; gap: 12px; }
.rows .row { padding: 22px 26px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; }
.rows h3 { font-size: var(--fs-medium); letter-spacing: -.03em; line-height: 1.15; }
.rows p { color: var(--ink-2); }

/* ---------- WordPress ---------- */
.wp { padding-block: var(--sec); }
.wp .box { padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; }
.wp .box .pill { grid-column: 1 / -1; justify-self: start; margin: 0; }
.wp .box > p:not(.pill) { color: var(--ink-2); max-width: 30em; }

/* ---------- process ---------- */
.process { padding-block: var(--sec); }
.process .lead { margin-bottom: 40px; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flow .step { padding: 28px 28px 32px; display: grid; gap: 12px; align-content: start; }
.flow h3 { font-size: var(--fs-large); letter-spacing: -.04em; line-height: 1.05; }
.flow p { color: var(--ink-2); }

/* ---------- contact ---------- */
.end { min-height: 100svh; display: grid; align-content: end; padding-block: 28vh 0; }
.end-tick { position: absolute; right: var(--gut); bottom: calc(100% + 12px); width: min(44vw, 240px); height: auto; pointer-events: none; }
.end .end-title { margin-bottom: 36px; font-size: var(--fs-huge); line-height: .86; letter-spacing: -.065em; }
.end .row { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: center; padding-bottom: 48px; }
.end .row > p { color: var(--ink-2); font-size: var(--fs-small); }
.end .row:has(+ .end-guide) { padding-bottom: 20px; }
.end .end-guide { padding-bottom: 48px; color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- logo: "slušný web", the háček of š is the green tick ---------- */
.lg a { display: inline-flex; color: var(--ink); text-decoration: none; }
.lg-word { font-weight: 600; letter-spacing: -.035em; white-space: nowrap; text-transform: none; }
.lg-web { font-weight: 400; }
/* own line-height, so the tick sits the same over the s at any size and any parent line-height */
.lg-s { position: relative; display: inline-block; line-height: 1; }
.lg-tick { position: absolute; left: 50%; top: -.1em; width: .56em; height: .38em; transform: translateX(-44%); overflow: visible; }
/* the tick is simply drawn, no animation (owner's decision 10.10.2026) */
.lg-tick path { fill: none; stroke: var(--accent); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }

/* ---------- footer ---------- */
footer.wp-block-template-part { position: relative; z-index: 2; }
.site-foot { padding-block: var(--sec) 28px; color: var(--ink-2); }
/* the front page ends with its own big "Napište mi.", so the footer call to action would repeat it */
.home .foot-cta { display: none; }
.home .foot-grid { border-top: 1px solid var(--hair); }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; padding-bottom: 56px; border-bottom: 1px solid var(--hair); }
.foot-cta-text { color: var(--ink); font-size: var(--fs-x-large); font-weight: 500; line-height: 1; letter-spacing: -.045em; max-width: 13em; text-wrap: balance; }
.site-foot .wp-block-button__link, .site-foot .wp-block-button__link:hover { color: var(--paper); text-decoration: none; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px 48px; padding-block: 56px 48px; }
.site-foot .lg a { color: var(--ink); }
.foot-logo { font-size: 1.75rem; }
.foot-logo a:hover { text-decoration: none; }
.foot-about p { margin-top: 14px; max-width: 24em; }
.foot-h { color: var(--ink); font-size: var(--fs-small); font-weight: 600; margin-bottom: 14px; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-mark { font-size: clamp(3.4rem, 16.5vw, 19rem); line-height: .82; margin-bottom: 28px; }
.foot-mark a:hover { text-decoration: none; }
.foot-mark .lg-word { letter-spacing: -.065em; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: var(--fs-small); }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------- service pages ---------- */
.svc-features { padding-block: var(--sec); }
.svc-features .lead a { color: var(--accent); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.feature { padding: 26px 26px 28px; display: grid; gap: 10px; align-content: start; }
.feature h3 { font-size: var(--fs-medium); letter-spacing: -.03em; line-height: 1.12; }
.feature p { color: var(--ink-2); }
.svc-for { padding-block: var(--sec); }
.for-box { padding: clamp(28px, 5vw, 56px); }
.for-box .title { font-size: var(--fs-large); max-width: 18em; }
ul.chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.chips li { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .7); font-weight: 500; }
.svc-price { padding-block: var(--sec); }
.price-box { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 64px; padding: clamp(28px, 5vw, 64px); border-radius: var(--r); background: var(--ink); color: var(--paper); }
.price-box .pill { background: var(--night-glass); border-color: rgba(255, 255, 255, .1); color: var(--paper); }
.price-big { font-size: var(--fs-xx-large); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin-block: 22px 16px; font-variant-numeric: tabular-nums; }
.price-big .from, .price-big .per { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: rgba(236, 238, 234, .6); }
.price-main > p:not(.pill):not(.price-big) { color: rgba(236, 238, 234, .75); max-width: 30em; margin-bottom: 28px; }
.price-box .wp-block-button:not(.is-style-glass) .wp-block-button__link { background: var(--paper); color: var(--ink); }
/* the second action in the price card is a plain text link, so it does not compete with the main button */
.price-box .wp-block-button.is-style-glass .wp-block-button__link { background: none; border: 0; padding-inline: 8px; color: var(--paper); text-decoration: underline; text-decoration-color: rgba(236, 238, 234, .35); text-underline-offset: 5px; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the arrow is an icon, not a character: the underline stays one unbroken line under the words only */
.price-box .wp-block-button.is-style-glass .wp-block-button__link::after, .plan .more a::after { content: ""; display: inline-block; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease); }
.price-box .wp-block-button.is-style-glass .wp-block-button__link:hover::after, .plan .more a:hover::after { transform: translateX(3px); }
.price-box .wp-block-button.is-style-glass .wp-block-button__link:hover { transform: none; text-decoration-color: currentColor; }
.price-list h3 { font-size: var(--fs-medium); letter-spacing: -.03em; margin-bottom: 18px; }
.price-box ul.ticks { border-color: rgba(255, 255, 255, .12); color: rgba(236, 238, 234, .88); }
.price-box ul.ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='%2321b07a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan .more a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--accent); text-decoration: none; }
.plan .more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan.main .more a { color: var(--accent-2); }

/* ---------- comparison: template, subscription, own web ---------- */
.compare { padding-block: var(--sec); }
.compare .lead { margin-bottom: 40px; }
.compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.way { padding: 28px 28px 30px; display: grid; gap: 18px; align-content: start; }
.way h3 { font-size: var(--fs-medium); letter-spacing: -.03em; }
.way-list { list-style: none; margin: 0; padding: 0; display: grid; }
.way-list li { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--hair); color: var(--ink-2); }
.way-list li strong { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.way.ours { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.way.ours .way-list li { color: rgba(236, 238, 234, .78); border-color: rgba(255, 255, 255, .12); }
.way.ours .way-list li strong { color: var(--accent-2); }

/* ---------- 404 ---------- */
/* the error page offers the main actions and the four services, each card clickable as a whole */
.nf-actions { margin-top: 32px; }
.feature-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nf-links .feature { position: relative; transition: background .3s, transform .4s var(--ease); }
.nf-links .feature:hover { background: #fff; transform: translateY(-3px); }
.nf-links .feature h3 a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.nf-links .feature h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nf-links .feature h3 a::after { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease); }
.nf-links .feature:hover h3 a::after { transform: translateX(3px); }

/* ---------- services submenu in the header ---------- */
.top .wp-block-navigation__submenu-container { border-radius: 18px !important; padding: 8px !important; min-width: 230px !important; background: rgba(246, 247, 244, .97) !important; border: 1px solid rgba(255, 255, 255, .8) !important; box-shadow: 0 20px 40px -18px rgba(14, 16, 15, .4); }
.top .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 14px !important; border-radius: 10px; }
.top .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: #fff; }
.top .is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 10px 2px !important; min-width: 0 !important; }
.top .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { font-size: 1.25rem; letter-spacing: -.02em; }
.top .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 0 !important; }

/* ---------- subpages ---------- */
.page-hero { padding-block: 170px 0; }
.page-title { font-size: var(--fs-xx-large); letter-spacing: -.05em; line-height: 1; max-width: 14em; text-wrap: balance; }
.page-hero .lead { font-size: var(--fs-medium); line-height: 1.4; max-width: 30em; }

.faq { padding-block: var(--sec); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.faq-head { position: sticky; top: 110px; }
.faq-list { display: grid; gap: 12px; }
.wp-block-details { padding: 0; overflow: hidden; }
.wp-block-details summary { cursor: pointer; list-style: none; padding: 22px 64px 22px 26px; font-size: var(--fs-medium); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; position: relative; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--ink) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E"); transition: transform .35s var(--ease); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { padding: 0 26px 22px; color: var(--ink-2); max-width: 40em; }

.care-plans { padding-block: var(--sec); }
.care-plans .title { margin-bottom: 40px; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan .plan-note { margin-top: auto; font-size: var(--fs-small); opacity: .75; }
.care-plans .plans-note { margin-top: 22px; max-width: 46em; font-size: var(--fs-small); }

.cta { padding-block: var(--sec); }
.cta-box { padding: clamp(28px, 5vw, 64px); display: grid; gap: 20px; justify-items: start; }
.cta-box > p { color: var(--ink-2); max-width: 34em; font-size: var(--fs-medium); line-height: 1.4; }

.about { padding-block: var(--sec); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 72px; align-items: start; }
.about-text { display: grid; gap: 20px; }
.about-text > p { color: var(--ink-2); max-width: 36em; }
.about-text > .big-text { color: var(--ink); font-size: var(--fs-large); line-height: 1.2; letter-spacing: -.035em; font-weight: 500; }
.about-side { display: grid; gap: 16px; }
.about-photo { margin: 0; display: flex; align-items: center; gap: 20px; }
.about-photo img { display: block; flex: none; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.about-photo figcaption { margin: 0; color: var(--ink); font-size: var(--fs-medium); font-weight: 500; letter-spacing: -.02em; text-align: left; }
.facts { padding: 28px 30px 30px; display: grid; gap: 18px; }
.facts h3 { font-size: var(--fs-medium); letter-spacing: -.03em; }

.contact-page { padding-block: var(--sec); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; align-items: start; }
.form-box, .next-box { padding: 30px; display: grid; gap: 16px; }
.form-box h3, .next-box h3 { font-size: var(--fs-medium); letter-spacing: -.03em; }
.form-box > p, .next-box > p { color: var(--ink-2); }
.next-box { position: sticky; top: 110px; }
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: next; }
.next-steps li { counter-increment: next; position: relative; padding-left: 40px; color: var(--ink-2); }
.next-steps li::before { content: counter(next); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; line-height: 1; }
.next-steps strong { color: var(--ink); font-weight: 600; }
.next-box > .contact-phone { padding-top: 16px; border-top: 1px solid rgba(14, 16, 15, .1); }
.contact-phone a { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* WhatsApp on Kontakt: the app's icon in front instead of the arrow, so people see where the button leads */
.wp-block-button.wa .wp-block-button__link::before { content: ""; flex: none; width: 20px; height: 20px; background: url("assets/icons/whatsapp.svg") center / contain no-repeat; }
.wp-block-button.wa .wp-block-button__link::after { display: none; }
.wp-block-button.wa .wp-block-button__link { background: #fff; border-color: rgba(14, 16, 15, .14); }

/* contact form: the label sits inside the field and moves up small once the field is in use */
.contact-form { display: grid; gap: 14px; margin-top: 4px; }
.cf { display: grid; gap: 12px; }
.cf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ff { position: relative; }
.ff :is(input, textarea) { display: block; width: 100%; font: inherit; font-size: var(--fs-base); color: var(--ink); padding: 26px 18px 10px; border-radius: 14px; border: 1px solid rgba(14, 16, 15, .18); background: #fff; transition: border-color .15s; }
.ff textarea { resize: vertical; min-height: 150px; line-height: 1.5; padding-top: 30px; }
.ff label { position: absolute; left: 19px; top: 18px; color: var(--ink-2); font-size: var(--fs-base); line-height: 1.3; pointer-events: none; transform-origin: left top; transition: transform .15s, color .15s; }
.ff label span { opacity: .7; }
.ff :is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill) + label { transform: translateY(-10px) scale(.75); }
.ff :is(input, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ff :is(input, textarea):focus + label { color: var(--accent); }
.ff :is(input, textarea):hover:not(:focus) { border-color: rgba(14, 16, 15, .35); }
.cf-topics { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cf-topics legend { padding: 0; margin-bottom: 10px; font-size: var(--fs-small); font-weight: 600; }
.cf-chip { position: relative; cursor: pointer; }
.cf-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cf-chip span { display: block; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(14, 16, 15, .18); background: #fff; font-size: var(--fs-small); transition: background .15s, color .15s, border-color .15s; }
.cf-chip:hover span { border-color: rgba(14, 16, 15, .35); }
.cf-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cf-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf .wp-block-button { margin-top: 6px; }
.cf .wp-block-button__link { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-base); font-weight: 500; padding: 15px 24px; background: var(--ink); color: var(--paper); border-radius: 999px; }
.contact-form > .gf-note { color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 600px) { .cf-row { grid-template-columns: minmax(0, 1fr); } }

.legal { padding-block: var(--sec); }
.prose { padding: clamp(24px, 4vw, 56px); max-width: 880px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-medium); letter-spacing: -.03em; margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; display: grid; gap: 10px; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- příručka (free guide): two chapters and the e-mail form ---------- */
.guide-offer { padding-block: var(--sec); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.guide-parts { display: grid; gap: 16px; }
.guide-no { font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
.guide-author { color: var(--ink-2); max-width: 34em; padding: 8px 4px 0; }
.guide-form { position: sticky; top: 110px; }
.gf { display: grid; gap: 14px; margin-top: 4px; }
.gf-field { display: grid; gap: 8px; font-size: var(--fs-small); font-weight: 600; }
.gf-field input { font: inherit; font-size: var(--fs-base); font-weight: 400; color: var(--ink); width: 100%; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(14, 16, 15, .18); background: #fff; }
.gf-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
/* honeypot: off screen, not display:none (some bots skip hidden fields) */
.gf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gf .wp-block-button__link { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-base); font-weight: 500; padding: 15px 24px; background: var(--ink); color: var(--paper); border-radius: 999px; }
.gf-msg { padding: 16px 18px; border-radius: 14px; font-size: var(--fs-small); }
.gf-ok { background: rgba(33, 176, 122, .14); color: var(--ink); }
.gf-err { background: rgba(214, 69, 47, .1); color: var(--ink); }
.form-box > .gf-note { font-size: var(--fs-small); }

/* invitation to the guide under articles and on service pages */
.guide-teaser { padding-block: var(--sec); }
.teaser-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; padding: clamp(28px, 5vw, 64px); border-radius: var(--r); background: var(--ink); color: var(--paper); }
.teaser-box .pill { background: var(--night-glass); border-color: rgba(255, 255, 255, .1); color: var(--paper); }
.teaser-text > p:not(.pill) { color: rgba(236, 238, 234, .75); max-width: 32em; margin-top: 16px; }
.teaser-box .wp-block-button__link { background: var(--paper); color: var(--ink); }

/* ---------- long text: the guide and articles, one readable column ---------- */
.longread { padding-block: var(--sec) 0; }
.longread-col { max-width: 760px; }
:is(.longread-col, .article-body) > * + * { margin-top: 1em; }
:is(.longread-col, .article-body) > p, :is(.longread-col, .article-body) li { color: var(--ink-2); }
:is(.longread-col, .article-body) strong { color: var(--ink); font-weight: 600; }
:is(.longread-col, .article-body) > h2 { font-size: var(--fs-large); letter-spacing: -.035em; line-height: 1.12; margin-top: 2em; text-wrap: balance; }
:is(.longread-col, .article-body) > h3 { font-size: var(--fs-medium); letter-spacing: -.025em; line-height: 1.2; margin-top: 2em; }
:is(.longread-col, .article-body) > h2 + h3 { margin-top: 1.2em; }
:is(.longread-col, .article-body) > :is(ul, ol) { padding-left: 1.2em; display: grid; gap: 10px; }
.longread-col > .pill { margin-top: var(--sec); margin-bottom: 0; }
.longread-col > .pill:first-child { margin-top: 0; }
.longread-col > .pill + h2 { margin-top: 18px; }
/* "Jak to ověřit / Na co se zeptat": a quiet box under each point */
.longread-col > .check { padding: 16px 20px; border-radius: 16px; background: #f8f9f6; border: 1px solid rgba(14, 16, 15, .07); }
.longread-col > .toc { list-style: none; padding: 0; gap: 8px; }
/* icon in front of each point: a soft green tile with a line icon from assets/icons/ */
.longread-col > h3.ic { display: flex; align-items: center; gap: 14px; }
.longread-col > h3.ic::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 14px; background-color: rgba(33, 176, 122, .14); background-repeat: no-repeat; background-position: center; background-size: 22px; }
.ic-eye::before { background-image: url("assets/icons/eye.svg"); }
.ic-phone::before { background-image: url("assets/icons/phone.svg"); }
.ic-mobile::before { background-image: url("assets/icons/mobile.svg"); }
.ic-speed::before { background-image: url("assets/icons/speed.svg"); }
.ic-lock::before { background-image: url("assets/icons/lock.svg"); }
.ic-text::before { background-image: url("assets/icons/text.svg"); }
.ic-camera::before { background-image: url("assets/icons/camera.svg"); }
.ic-search::before { background-image: url("assets/icons/search.svg"); }
.ic-shield::before { background-image: url("assets/icons/shield.svg"); }
.ic-care::before { background-image: url("assets/icons/care.svg"); }
.ic-globe::before { background-image: url("assets/icons/globe.svg"); }
.ic-key::before { background-image: url("assets/icons/key.svg"); }
.ic-tag::before { background-image: url("assets/icons/tag.svg"); }
.ic-calendar::before { background-image: url("assets/icons/calendar.svg"); }
.ic-home::before { background-image: url("assets/icons/home.svg"); }
.ic-image::before { background-image: url("assets/icons/image.svg"); }
.ic-edit::before { background-image: url("assets/icons/edit.svg"); }
.ic-backup::before { background-image: url("assets/icons/backup.svg"); }
.ic-exit::before { background-image: url("assets/icons/exit.svg"); }

/* ownership scheme (block slusny/owner-scheme): three things in your name, joined into "you"; the supplier only has access */
.longread-col > .owner-scheme { margin-block: 2em; padding: clamp(20px, 3vw, 32px); border-radius: var(--r); background: #f8f9f6; border: 1px solid rgba(14, 16, 15, .07); }
.os-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.os-item { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: 16px; background: #fff; border: 1px solid rgba(14, 16, 15, .08); }
.os-ic { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: rgba(33, 176, 122, .14); margin-bottom: 6px; }
.os-item b { color: var(--ink); font-weight: 600; }
.os-item span, .os-you span, .os-vendor span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }
/* the lines run from the middle of each card to the middle of the "you" box */
/* full width: the path points 50, 150 and 250 of 300 are the centres of the three columns */
.os-lines { display: block; width: 100%; height: 44px; overflow: visible; }
.os-lines path { fill: none; stroke: var(--accent); stroke-width: 2; }
.os-you { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 20px; border-radius: 16px; background: var(--ink); }
.os-you b { color: var(--paper); font-size: var(--fs-medium); font-weight: 500; letter-spacing: -.02em; }
.os-you span { color: rgba(236, 238, 234, .75); }
.os-vendor { display: grid; gap: 4px; margin-top: 12px; padding: 16px 20px; border-radius: 16px; border: 1.5px dashed rgba(14, 16, 15, .22); }
.os-vendor b { color: var(--ink); font-weight: 600; }
.owner-scheme figcaption { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-2); }
@media (max-width: 600px) {
	.os-items { grid-template-columns: minmax(0, 1fr); }
	.os-item { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; padding: 14px; }
	.os-ic { grid-row: span 2; margin: 0; }
	/* one short line from the stacked cards down to "you" */
	.os-lines { display: none; }
	.os-you { position: relative; margin-top: 28px; }
	.os-you::before { content: ""; position: absolute; top: -28px; left: 50%; width: 2px; height: 28px; margin-left: -1px; background: var(--accent); }
}
.longread-col > .toc a { font-weight: 500; }
.longread-col > .summary { padding: clamp(24px, 4vw, 40px); border-radius: var(--r); background: var(--ink); color: var(--paper); margin-top: var(--sec); }
.longread-col > .summary h2 { font-size: var(--fs-large); letter-spacing: -.035em; margin-bottom: 18px; }
.longread-col > .summary ul.ticks { border-color: rgba(255, 255, 255, .12); }
.longread-col > .summary ul.ticks li { color: rgba(236, 238, 234, .88); }
.longread-col > .summary ul.ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 8 L9.5 13.5 L21 2.5' fill='none' stroke='%2321b07a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* pure text pages (articles, the guide to read): one narrow column in the middle, the title above it
   in the same column, so the eye does not jump between the left edge and the centre (owner, 10.10.2026) */
.article-body { padding-top: clamp(40px, 4vw, 64px); }
.longread-col { margin-inline: auto; }
.narrow-hero .wrap { max-width: calc(760px + 2 * var(--gut)); }
.narrow-hero .page-title { font-size: var(--fs-x-large); max-width: none; }
.narrow-hero .lead { max-width: none; }
.page-hero .pill a { color: inherit; text-decoration: none; }

/* list of articles (Rady) */
.posts { padding-block: var(--sec) 0; }
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post-card { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 26px 26px 28px; border-radius: var(--r); background: #f8f9f6; border: 1px solid rgba(14, 16, 15, .07); transition: background .3s, transform .4s var(--ease); }
.post-card:hover { background: #fff; transform: translateY(-3px); }
.post-card h2 { font-size: var(--fs-medium); letter-spacing: -.03em; line-height: 1.15; }
.post-card h2 a { text-decoration: none; color: var(--ink); }
.post-card h2 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card .wp-block-post-excerpt__excerpt { color: var(--ink-2); }
.post-card .wp-block-post-excerpt__more-text { display: none; }
/* "Číst článek": the same green link with an arrow as "Více o…" in the price cards, so the card reads as clickable */
.post-card .wp-block-read-more { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-weight: 600; color: var(--accent); text-decoration: none; }
.post-card .wp-block-read-more::after { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease); }
.post-card:hover .wp-block-read-more { text-decoration: underline; text-underline-offset: 3px; }
.post-card:hover .wp-block-read-more::after { transform: translateX(3px); }
@media (max-width: 1100px) {
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.guide-grid, .post-grid { grid-template-columns: minmax(0, 1fr); }
	.guide-form, .next-box { position: static; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile.h2 { grid-row: auto; }
	.included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feature-grid, .feature-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.plans { grid-template-columns: minmax(0, 1fr); }
	.flow { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Ukázky: demo websites, screenshot on a computer with the phone version over it ---------- */
.demos { padding-block: var(--sec); }
.demos .wrap { display: grid; gap: clamp(72px, 8vw, 140px); }
.demo-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.demo-row.rev .demo-media { order: 2; }
.demo-media { position: relative; padding: 0 0 48px; }
.demo-media figure { margin: 0; }
.demo-desk img { display: block; width: 100% !important; height: auto !important; border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(14, 16, 15, .35), 0 0 0 1px var(--hair); transition: transform .6s var(--ease); }
.demo-desk a:hover img { transform: translateY(-6px); }
.demo-phone { position: absolute; right: -14px; bottom: 0; width: 22%; min-width: 96px; }
.demo-phone img { display: block; width: 100% !important; height: auto !important; border-radius: 22px; border: 5px solid var(--ink); box-shadow: 0 30px 60px -24px rgba(14, 16, 15, .45); }
.demo-text { display: grid; gap: 18px; align-content: center; }
.demo-text h2 { font-size: var(--fs-x-large); letter-spacing: -.045em; line-height: 1; }
.demo-text > p:not(.demo-pkg) { color: var(--ink-2); font-size: var(--fs-medium); line-height: 1.45; }
.demo-pkg { font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
.demo-text .wp-block-buttons { margin-top: 6px; }
.demo-note { color: var(--ink-2); max-width: 40em; }

@media (max-width: 860px) {
	.demo-row { grid-template-columns: minmax(0, 1fr); }
	.demo-row.rev .demo-media { order: 0; }
	.demo-phone { right: 8px; width: 26%; }
	.top .wp-block-navigation .wp-block-navigation__container { gap: 16px; }
	.top { padding-left: 18px; gap: 12px; }
	.faq-grid, .about-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
	.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feature-grid, .feature-grid.four, .price-box, .compare-grid { grid-template-columns: minmax(0, 1fr); }
	.foot-about, .foot-grid > :last-child { grid-column: 1 / -1; }
	.faq-head { position: static; }
	.plans.two { grid-template-columns: minmax(0, 1fr); }
	.page-hero { padding-block: 130px 0; }
	.hero { padding-block: 110px 26px; }
	.hero h1 { align-self: end; padding-bottom: 32px; font-size: clamp(3.4rem, 16.5vw, 7.5rem); }
	.trades .wrap { padding-block: 92px 22px; }
	.trade-list li { font-size: clamp(2.6rem, 13vw, 5rem); }
	.trades .bg::after { background: linear-gradient(0deg, rgba(14,16,15,.85), rgba(14,16,15,.5)); }
	.stage .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding-block: 92px 18px; }
	.scene-head > span:last-child { display: none; }
	.titles { padding-top: 18px; }
	.titles h2 { font-size: var(--fs-large); margin-bottom: 8px; }
	.titles p { font-size: 1rem; }
	.site { height: clamp(280px, 44svh, 420px); }
	.frame.s4 { max-width: 264px; border-radius: 28px; }
	.frame.s4 .site { height: clamp(280px, 46svh, 440px); }
	.index { display: none; }
	.monthly { grid-template-columns: minmax(0, 1fr); }
	.month { grid-template-columns: minmax(0, 1fr); }
	.bento { grid-template-columns: minmax(0, 1fr); }
	.tile.w2 { grid-column: auto; }
	.included { padding: 24px 20px; }
	.included ul { grid-template-columns: minmax(0, 1fr); }
	.care .grid { grid-template-columns: minmax(0, 1fr); }
	.status { position: static; padding: 20px 18px 18px; order: 2; }
	.st-list li { grid-template-columns: 26px minmax(0, 1fr); }
	.st-list span { grid-column: 2; text-align: left; }
	.rows .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.wp .box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.admin-bar .top, html.pbsab-on .admin-bar.has-bar-toggle .top { top: calc(46px + 14px); }
	.admin-bar.has-bar-toggle .top { top: calc(env(safe-area-inset-top, 0px) + 14px); }
	.top .logo { font-size: 1.375rem; }
}
/* between the hamburger (under 600 px) and 700 px the full menu with "Ukázky" leaves no room for the button; Kontakt is in the menu */
@media (min-width: 600px) and (max-width: 699px) {
	.top .top-cta { display: none; }
}
@media (max-width: 380px) {
	.top { gap: 8px; padding-left: 14px; }
	.top .logo { font-size: 1.2rem; }
	.top .top-cta .wp-block-button__link { padding: 10px 14px; }
	.top .top-cta .wp-block-button__link::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}