/* DM Serif Display italic – na webu je zatím jen řez 400 normal (Bricks custom font) */
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/dm-serif-display-latin-ext-400-italic.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/dm-serif-display-latin-400-italic.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; }

/* =========================================================================
   Lehkost — návrh homepage
   Písmo: DM Serif Display (nadpisy) + DM Sans (text) — stejné jako na webu
   Barvy: paleta z Bricks, neutrální tóny posunuté od šalvějové k modré z loga
   ========================================================================= */

:root {
  /* Modrá z loga + tmavé tóny z palety webu */
  --blue: #00A5E4;        /* logo */
  --blue-600: #0089BF;
  --blue-700: #006A94;
  --petrol: #004F6D;      /* primární tlačítka */
  --petrol-600: #003D54;
  --ink: #083040;         /* nejtmavší modrá */
  --ink-deep: #052331;

  /* Světlé modré tóny (nahrazují šalvějové #F5F8F5 / #EDF2ED) */
  --sky-200: #BFE6F8;
  --sky-100: #D7F0FB;
  --sky-50: #EBF8FE;
  --paper: #F4F9FC;
  --white: #FFFFFF;

  /* Text – posunutý do modro-černé */
  --text: #0C2531;
  --text-soft: #475C66;
  --text-mute: #5E727C;
  --inverse: #EAF6FC;
  --inverse-soft: #C9D6DC;
  --line: rgba(8, 48, 64, .12);
  --line-strong: rgba(8, 48, 64, .22);

  --serif: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;

  --gutter: clamp(20px, 4.2vw, 64px);
  --maxw: 1320px;
  --sec-pad: clamp(96px, 11vw, 176px);
  --header-h: 92px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* ikony jako CSS masky (v Bricks stačí prázdný Div / pseudo-prvek, žádné SVG v obsahu) */
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='193 31.5 35 35'%3E%3Cpath d='M212.17,39.14C212.17,39.73,212.15,40.31,212.18,40.89C212.21,41.28,211.77,41.49,211.87,41.93C211.95,42.35,211.88,42.80,211.88,43.23L211.88,44.40C211.88,44.78,211.84,45.18,211.90,45.56C211.95,45.90,211.53,46.00,211.59,46.31C211.67,46.71,211.41,47.18,211.83,47.53C211.84,47.53,211.65,47.72,211.63,47.82C211.60,48.11,211.60,48.40,211.60,48.68C211.59,51.44,211.59,60.65,211.60,63.41C211.61,63.78,211.51,64.06,211.22,64.27C210.97,64.44,211.03,64.68,211.01,64.91C211.00,65.09,211.06,65.27,210.92,65.46C210.60,65.88,209.75,65.93,209.43,65.50C209.36,65.39,209.29,65.26,209.28,65.13C209.26,64.79,209.27,64.45,209.28,64.11C209.28,63.83,209.32,63.54,209.03,63.34C208.98,63.31,208.95,63.12,208.99,63.08C209.50,62.55,209.19,65.21,209.28,64.62C208.80,64.26,209.02,63.74,208.99,63.28C208.96,62.80,208.99,62.32,208.98,61.83C208.98,61.54,209.36,51.67,209.29,51.32C209.23,50.99,209.28,50.64,209.28,50.30C209.28,50.01,209.27,49.72,209.28,49.43C209.28,49.19,209.26,48.99,209.07,48.78C208.91,48.62,209.30,48.55,209.27,48.36C209.21,47.91,209.45,47.42,209.04,47.00C208.94,46.91,208.99,46.64,208.99,46.45C208.99,45.05,208.99,43.65,208.98,42.24C208.98,41.95,208.96,41.66,209.25,41.48C209.26,41.00,209.31,40.52,209.26,40.04C209.24,39.84,208.94,39.73,208.97,39.43C208.99,39.29,208.81,39.29,208.68,39.44C208.28,39.88,208.18,40.50,207.83,40.97C207.75,41.08,207.68,41.31,207.65,41.30C207.32,41.21,207.21,41.68,206.90,41.60C206.82,41.58,206.68,41.50,206.68,41.47C206.74,41.03,206.47,41.01,206.15,41.02C206.03,41.02,205.81,40.88,205.81,40.87C206.01,40.35,205.40,40.03,205.50,39.53C205.54,39.29,205.51,39.06,205.74,38.90C205.99,38.73,206.02,38.42,206.17,38.22C206.40,37.92,206.37,37.48,206.76,37.29C206.96,37.19,206.98,36.99,206.96,36.79C206.95,36.70,206.93,36.55,206.98,36.51C207.68,35.93,207.83,35.02,208.30,34.30C208.45,34.07,208.45,33.79,208.70,33.59C209.04,33.32,209.34,33.00,209.63,32.67C209.87,32.40,210.13,32.30,210.49,32.29C210.74,32.28,210.92,31.91,211.24,32.02C211.37,32.06,211.58,32.13,211.58,32.19C211.57,32.49,211.68,32.64,211.99,32.60C212.19,32.93,212.81,32.80,212.83,33.37C212.83,33.52,213.06,33.69,213.22,33.78C213.65,34.00,213.57,34.54,213.91,34.81C213.99,34.88,213.95,35.13,214.04,35.18C214.48,35.44,214.46,36.02,214.85,36.30C215.47,36.76,215.74,37.46,216.10,38.11C216.22,38.34,216.25,38.62,216.47,38.84C216.58,38.94,216.46,39.27,216.45,39.50C216.01,39.74,215.99,40.30,215.63,40.61C215.42,40.80,215.15,40.79,215.09,40.53C215.04,40.33,214.98,40.17,214.83,40.06C214.37,39.71,214.14,39.20,213.91,38.69C213.85,38.57,213.79,38.44,213.70,38.35C213.26,37.90,212.82,37.45,212.37,37.01C212.35,36.99,212.30,36.99,212.27,37.01C212.23,37.03,212.18,37.08,212.18,37.11C212.17,37.79,212.17,38.47,212.17,39.14'/%3E%3Cpath d='M219.74,50.86C218.08,50.82,199.57,50.72,198.51,50.75C198.11,50.76,197.64,50.56,197.32,51.01C196.84,51.01,196.36,51.02,195.88,51.03C195.71,50.79,195.39,50.80,195.18,50.63C194.91,50.43,194.70,50.16,194.45,49.93C194.31,49.79,193.95,49.97,193.96,49.57C193.96,49.33,194.25,49.28,194.24,49.11C194.23,48.63,194.68,48.52,194.90,48.22C194.96,48.14,195.15,48.13,195.28,48.13C196.78,48.12,210.21,48.15,211.70,48.10C212.16,48.09,217.98,48.50,218.45,48.43C218.87,48.36,219.32,48.36,219.73,48.47C219.93,48.52,220.05,48.73,220.26,48.47C220.31,48.41,220.57,48.41,220.63,48.48C220.81,48.69,221.03,48.68,221.27,48.72C221.48,48.75,221.66,48.93,221.87,48.99C222.17,49.06,222.45,48.99,222.62,48.70C222.65,48.64,222.70,48.51,222.69,48.50C222.27,48.20,222.10,47.60,221.49,47.54C221.19,47.17,220.76,46.99,220.37,46.75C220.13,46.61,220.21,46.32,220.06,46.15C219.94,46.01,219.79,45.88,219.66,45.74C219.50,45.57,219.60,45.28,219.36,45.13C219.29,45.09,219.27,44.80,219.32,44.76C219.60,44.55,219.53,44.26,219.58,43.99C219.64,43.61,219.79,43.88,219.93,43.97C220.14,44.10,220.11,43.91,220.15,43.79C220.23,43.53,220.23,43.54,220.44,43.62C220.56,43.67,220.68,43.73,220.81,43.76C221.08,43.82,221.36,43.67,221.62,43.92C221.85,44.13,222.19,44.16,222.42,44.43C222.87,44.94,223.35,45.42,223.85,45.86C224.15,46.12,224.19,46.51,224.45,46.79C224.70,47.05,225.13,47.21,225.08,47.68C225.35,47.96,225.60,48.25,225.90,48.50C226.17,48.73,226.53,48.84,226.85,48.99C227.23,49.17,227.46,49.42,227.40,49.87C227.38,50.01,227.38,50.16,227.40,50.30C227.42,50.51,227.35,50.66,227.19,50.80C226.91,51.06,226.64,51.34,226.37,51.62C225.79,52.20,225.21,52.78,224.63,53.36C224.38,54.12,223.69,54.53,223.20,55.09C223.04,55.27,222.88,55.48,222.68,55.59C222.45,55.72,222.20,55.89,221.96,55.94C221.61,56.02,221.21,55.95,220.83,55.91C220.79,55.91,220.74,55.76,220.73,55.68C220.70,55.43,220.85,55.12,220.48,55.00C220.40,54.52,220.38,54.09,220.79,53.70C221.12,53.39,221.29,52.94,221.60,52.58C221.90,52.23,222.43,52.28,222.62,51.88C222.78,51.54,222.94,51.22,223.24,50.98C223.28,50.95,223.30,50.91,223.33,50.87C223.25,50.83,223.17,50.74,223.09,50.74L219.74,50.86Z'/%3E%3C/svg%3E");
  --i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.9 6.9 4.2 10.4 12 12-7.8 1.6-11.1 5.1-12 12-.9-6.9-4.2-10.4-12-12C7.8 10.4 11.1 6.9 12 0z'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E");
  --i-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E");
  --i-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5V5M6.5 10.5 12 5l5.5 5.5'/%3E%3C/svg%3E");
  --i-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 38 C 10 22, 22 12, 40 10 M 31 3 L 41 10 L 33 18'/%3E%3C/svg%3E");
}
/* Bricks: kořenové písmo 62.5 % (1rem = 10 px) – všechny rem hodnoty jsou ×1.6 */
html { font-size: 62.5%; }


/* ---------- Ilustrace (masky – barvu určuje background, takže jde přebarvit čímkoli) ---------- */
.i-hero { aspect-ratio: 752 / 900; }
.i-opora { aspect-ratio: 760 / 721; }
.i-misto { aspect-ratio: 1; }
.i-overena { aspect-ratio: 476 / 520; }
.i-uleva { aspect-ratio: 560 / 539; }
.i-clovek { aspect-ratio: 560 / 549; }
.i-duvera { aspect-ratio: 640 / 624; }
.i-krok { aspect-ratio: 820 / 731; }

.mask, .spark, .ring__plus, .mq-plus, .mnav__plus, .orb__arrow {
  display: block; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ill {
  display: block;
  background: var(--ill-c, var(--ink));
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
}

/* ---------- Základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* Bricks: výchozí styly Bricks jsou ve vrstvě (@layer bricks) → stačí :where() s nulovou specificitou;
   theme styles z bety nejsou ve vrstvě (body, h1–h6, odkazy v text-basic) → přebíjí je „html …“ (0,0,2),
   ale pořád prohrávají s třídami návrhu (0,1,0). */
:where([class*=brxe-]) { max-width: none; }
:where(#brx-header, #brx-content, #brx-footer) { position: static; }
:where(.brxe-text-link) { display: revert; gap: revert; align-items: revert; }
:where(button) { padding: revert; text-align: revert; border: revert; cursor: revert; line-height: inherit; }
:where(blockquote) { border: revert; font: inherit; margin: revert; padding: revert; position: revert; }
:where(figcaption) { color: inherit; font-size: inherit; margin: revert; text-align: revert; }
html :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-size: revert; font-weight: 400; line-height: inherit; color: inherit; margin: 0; }
html a { color: inherit; }

html body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* jemné zrno přes celou stránku – dodá „papírový“ luxusní dojem */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.03 0 0 0 0 0.19 0 0 0 0 0.25 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; left: 16px; top: 16px; z-index: 10000;
  padding: 12px 18px; border-radius: 99px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
  transform: translateY(-160%); transition: transform .3s var(--ease-out);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--sec-pad) 0; position: relative; }

/* ---------- Typografie ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font: 700 1.3rem/1 var(--sans);
  letter-spacing: .02em;
  color: var(--petrol);
}
.kicker__num {
  display: inline-grid; place-items: center;
  min-width: 2.35em; height: 2.35em; padding: 0 .55em;
  border-radius: 99px;
  border: 1px solid rgba(0, 79, 109, .28);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.kicker__sep { opacity: .45; margin: 0 -.1em; }
.kicker--inv { color: var(--sky-200); }
.kicker--inv .kicker__num { border-color: rgba(191, 230, 248, .32); }
.hero__kicker::before { content: ""; flex: none; width: 1.25em; height: 1.25em; background: var(--blue); -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }

.h2 {
  font: 400 clamp(3.76rem, 1.76rem + 3.7vw, 7.2rem) / 1.03 var(--serif);
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}
.h2--inv { color: #fff; }
.h2--xl { font-size: clamp(4.32rem, 1.6rem + 5.4vw, 10.24rem); line-height: .98; }
.h2__soft { color: var(--blue-700); font-style: italic; }
.h3 { font: 400 clamp(2.4rem, 1.68rem + 1.3vw, 3.68rem) / 1.12 var(--serif); letter-spacing: -.012em; }
.display {
  font: 400 clamp(4.48rem, 1.68rem + 5.2vw, 10.56rem) / .98 var(--serif);
  letter-spacing: -.028em;
  text-wrap: balance;
}
.perex { font-size: clamp(1.696rem, 1.568rem + .3vw, 2rem); line-height: 1.6; color: var(--text-soft); max-width: 36em; }
.perex--inv { color: var(--inverse-soft); }

/* rozdělené nadpisy (JS) */
/* rezerva kolem slova, aby maska neořízla háčky, čárky ani přesah kurzívy */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .16em .1em 0; margin: -.16em -.16em -.1em 0; }
.wi { display: inline-block; will-change: transform; }
.hw { transition: none; }
.js [data-split] .wi { transform: translateY(108%); }
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.no-anim [data-split] .wi, .no-anim [data-reveal] { transform: none !important; opacity: 1 !important; }

/* ---------- Tlačítka ---------- */
.btn {
  --bg: var(--petrol); --fg: #fff; --fill: var(--blue-700);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.05em 1.55em;
  border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 600 1.5rem/1.1 var(--sans); letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: color .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--fill);
  transform: translateY(102%); transition: transform .6s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn--arrow::after {
  content: ""; flex: none; width: 2.1em; height: 2.1em; margin: -.5em -.8em -.5em 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14) var(--i-arrow-white) center / 1.05em no-repeat;
  transition: transform .6s var(--ease-out), background-color .4s;
}
.btn--arrow:hover::after { transform: translateX(4px); background-color: rgba(255, 255, 255, .22); }
.btn--lg { font-size: 1.6rem; padding: 1.15em 1.7em; }
.btn--sm { font-size: 1.4rem; padding: .85em 1.25em; }
.btn--primary { box-shadow: 0 14px 30px -14px rgba(0, 79, 109, .6); }
.btn--primary:hover { box-shadow: 0 18px 36px -14px rgba(0, 106, 148, .7); }
.btn--ghost { --bg: transparent; --fg: var(--text); --fill: var(--sky-100); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px transparent; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: 1.5rem; color: var(--petrol);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .5s var(--ease-out);
  padding-bottom: 2px;
}
.link-arrow::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .5s var(--ease-out); }
.link-arrow:hover { background-size: 100% 1.5px; }
.link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================================
   PRELOADER
   ========================================================================= */
html.lk-preload body::before { content: ""; position: fixed; inset: 0; z-index: 9995; background: radial-gradient(60% 60% at 50% 50%, #0b3f55 0%, var(--ink) 70%); }
.preloader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 9995;
  background: radial-gradient(60% 60% at 50% 50%, #0b3f55 0%, var(--ink) 70%);
}
.preloader__plus { width: clamp(84px, 11vw, 132px); height: auto; overflow: visible; }
.preloader__plus path { fill: var(--blue); }
.no-anim .preloader { display: none; }

/* =========================================================================
   HEADER
   ========================================================================= */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 14px var(--gutter) 0;
  pointer-events: none;
  transition: transform .7s var(--ease-out);
}
/* skleněný box hlavičky je vidět hned po načtení; při scrollu se mění jen šířka (1360 → 1180 px) */
.hdr__bar {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 20px;
  max-width: 1360px; height: 66px; margin: 0 auto;
  padding: 0 16px 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
          backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(8, 48, 64, .07), 0 18px 44px -18px rgba(8, 48, 64, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: background .5s, box-shadow .5s, max-width .8s var(--ease-out), backdrop-filter .5s;
}
.hdr.is-scrolled .hdr__bar { max-width: 1180px; }
/* logo má plus nahoře → opticky vyrovnané posunem, ne podle výšky boxu */
.hdr__logo { display: block; flex: none; color: var(--ink); margin-top: -10px; margin-left: 5px; }
.hdr__logo svg { height: 38px; width: auto; }
.logo-svg path { fill: var(--logo-plus, var(--blue)); }
.logo-svg path:nth-of-type(3) { fill: currentColor; }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hdr__nav a {
  display: block; padding: 10px 13px; border-radius: 99px;
  font: 500 1.5rem/1.2 var(--sans); color: var(--text); text-decoration: none;
  transition: background .35s, color .35s;
}
.hdr__nav a:hover { background: rgba(0, 165, 228, .1); color: var(--petrol); }
.hdr__actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }

.burger {
  display: none; position: relative;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--ink); cursor: pointer;
}
.burger span {
  position: absolute; left: 15px; right: 15px; height: 1.8px; border-radius: 2px; background: #fff;
  transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.burger span:first-child { top: 19px; }
.burger span:last-child { top: 27px; }
.menu-open .burger span:first-child { top: 23px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 23px; transform: rotate(-45deg); }
.menu-open .burger { background: var(--blue); }
.menu-open .burger span { background: var(--ink); }
.menu-open .hdr__bar { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.menu-open .hdr__logo { color: #fff; }
.menu-open .hdr__actions .btn { opacity: 0; pointer-events: none; }

/* Mobilní menu */
.mnav {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 118px var(--gutter) 36px;
  background: radial-gradient(90% 60% at 100% 0%, #0d4760 0%, var(--ink) 55%, var(--ink-deep) 100%);
  color: #fff;
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 48px) 46px);
  overflow-y: auto;
}
.mnav__plus { --m: var(--i-plus); position: absolute; right: -8vw; bottom: 10vh; width: 60vw; max-width: 380px; aspect-ratio: 1; color: rgba(0, 165, 228, .12); pointer-events: none; }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__list li { overflow: hidden; border-bottom: 1px solid rgba(201, 214, 220, .12); }
.mnav__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 0;
  font: 400 clamp(3.04rem, 7.2vw, 4.8rem)/1.12 var(--serif); letter-spacing: -.01em;
  color: #fff; text-decoration: none;
}
.mnav__list small { font: 600 1.2rem/1 var(--sans); color: var(--blue); letter-spacing: .06em; }
.mnav__foot { position: relative; display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 28px; }
.mnav__foot a { color: var(--inverse-soft); text-decoration: none; font-weight: 500; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 36px) 0 96px;
  background: linear-gradient(180deg, #fff 0%, var(--paper) 55%, #eef7fc 100%);
  overflow: hidden;
}
.hero__aura { position: absolute; inset: 0; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 92%); }
.hero__grid, .hero__scroll { z-index: 2; }
.hero__aura i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0, 165, 228, .20), rgba(0, 165, 228, 0) 66%);
  animation: drift 18s ease-in-out infinite alternate;
}
.hero__aura i:nth-child(1) { width: 64vw; height: 64vw; right: -18vw; top: -14vw; }
.hero__aura i:nth-child(2) { width: 42vw; height: 42vw; left: -14vw; bottom: -20vw; animation-duration: 23s; background: radial-gradient(circle, rgba(0, 106, 148, .12), rgba(0, 106, 148, 0) 66%); }
.hero__aura i:nth-child(3) { width: 28vw; height: 28vw; left: 38vw; top: 8vh; animation-duration: 27s; background: radial-gradient(circle, rgba(191, 230, 248, .9), rgba(191, 230, 248, 0) 66%); }
@keyframes drift { to { transform: translate3d(-4vw, 3vw, 0) scale(1.08); } }

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
}
.hero__kicker { font-size: 1.4rem; }
.hero__title {
  margin: .45em 0 .42em;
  font: 400 clamp(4.16rem, 1.76rem + 4.15vw, 8.8rem) / .99 var(--serif);
  letter-spacing: -.026em;
  color: var(--text);
  text-wrap: balance;
}
.accent { font-style: italic; color: var(--blue-700); }
.hero__lead { max-width: 34em; font-size: clamp(1.696rem, 1.536rem + .38vw, 2.08rem); line-height: 1.6; color: var(--text-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__note {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 30px; max-width: 30em;
  font: italic 400 clamp(1.76rem, 1.6rem + .3vw, 2.048rem) / 1.38 var(--serif);
  color: var(--text-soft);
}
.hero__note::before { content: ""; flex: none; width: 46px; height: 34px; margin-top: -8px; transform: scaleY(-1) rotate(8deg); background: var(--blue); -webkit-mask: var(--i-note) center / contain no-repeat; mask: var(--i-note) center / contain no-repeat; }

.hero__art { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1.04; justify-self: end; }
.hero__disc {
  position: absolute; inset: 4% 2% 0 2%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 50%, var(--sky-50) 0%, var(--sky-100) 58%, #c5e8f8 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .14), 0 60px 120px -60px rgba(0, 106, 148, .45);
}
.hero__disc::after {
  content: ""; position: absolute; inset: -5%;
  border-radius: 50%; border: 1px dashed rgba(0, 106, 148, .22);
  animation: spin 60s linear infinite;
}
.hero__float { position: absolute; inset: 7% 15% 2% 15%; }
.ill--hero { width: 100%; height: 100%; background: linear-gradient(170deg, var(--ink) 0%, var(--petrol) 70%, var(--blue-700) 100%); }
.spark { --m: var(--i-sparkle); position: absolute; width: clamp(20px, 2.3vw, 34px); aspect-ratio: 1; color: var(--blue); }
.spark--1 { top: 2%; left: 49%; }
.spark--2 { top: 20%; right: 5%; width: clamp(26px, 2.8vw, 42px); }
.spark--3 { top: 30%; left: 4%; width: clamp(16px, 1.8vw, 26px); color: var(--blue-700); }
.spark--4 { bottom: 26%; right: 1%; width: clamp(14px, 1.5vw, 22px); color: var(--blue-700); }
.ring { position: absolute; left: -3%; bottom: 7%; width: clamp(112px, 11vw, 156px); aspect-ratio: 1; }
.ring__text { width: 100%; height: 100%; overflow: visible; }
.ring__bg { fill: #fff; stroke: rgba(8, 48, 64, .08); }
.ring text { font: 700 12.6px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--petrol); }
.ring__plus { --m: var(--i-plus); position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px;
  border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.hero__scroll span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--petrol); animation: scrollcue 2.2s var(--ease-io) infinite; }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* =========================================================================
   01 · S ČÍM POMÁHÁME
   ========================================================================= */
.topics { background: #fff; }
.sec-head { display: grid; gap: 22px; max-width: 940px; margin-bottom: clamp(44px, 6vw, 88px); }
.sec-head--split { max-width: none; }

.tlist { list-style: none; margin: 0; padding: 0; position: relative; }
.tlist::before, .trow::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-strong);
  transform-origin: 0 50%;
}
.tlist::before { top: 0; }
.trow { position: relative; }
.trow::after { bottom: 0; }
.js .tlist::before, .js .trow::after { transform: scaleX(var(--line, 0)); }
.trow__link {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr) 56px;
  align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding: clamp(24px, 2.7vw, 38px) clamp(8px, 1.4vw, 20px);
  color: inherit; text-decoration: none;
}
.trow__link::before {
  content: ""; position: absolute; inset: 1px 0; z-index: -1; border-radius: 20px;
  background: linear-gradient(90deg, var(--sky-50), rgba(235, 248, 254, .35));
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .7s var(--ease-out);
}
.trow__link:hover::before, .trow__link:focus-visible::before { transform: scaleY(1); }
.trow__num { font: 500 1.4rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-mute); transition: color .4s; }
.trow__title {
  font: 400 clamp(2.48rem, 1.52rem + 1.85vw, 4.48rem) / 1.08 var(--serif);
  letter-spacing: -.015em; color: var(--text);
  transition: transform .7s var(--ease-out), color .4s;
}
.trow__desc { font-size: 1.6rem; line-height: 1.55; color: var(--text-soft); max-width: 25em; transition: color .4s; }
.trow__icon {
  justify-self: end; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--petrol);
  transition: background .5s var(--ease-out), color .5s, transform .7s var(--ease-out), box-shadow .5s;
}
.trow__icon::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transform: rotate(-45deg); transition: transform .7s var(--ease-out); }
.trow__link:hover .trow__title, .trow__link:focus-visible .trow__title { transform: translateX(14px); color: var(--petrol); }
.trow__link:hover .trow__num { color: var(--blue); }
.trow__link:hover .trow__icon { background: var(--petrol); color: #fff; box-shadow: none; }
.trow__link:hover .trow__icon::before { transform: rotate(0deg); }
.trow__thumb { display: none; }

.tfloat {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: clamp(210px, 17vw, 270px); aspect-ratio: 1;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.tfloat__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, var(--sky-100) 55%, var(--sky-200) 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 79, 109, .5), inset 0 0 0 1px rgba(0, 165, 228, .2);
}
.tfloat__img { position: absolute; inset: 15%; opacity: 0; transform: scale(.7) rotate(-8deg); }

/* =========================================================================
   02 · JAK TO FUNGUJE (tmavá sekce s nití)
   ========================================================================= */
.how {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 60% at 78% 18%, rgba(0, 165, 228, .20) 0%, rgba(0, 165, 228, 0) 70%),
    radial-gradient(50% 50% at 8% 92%, rgba(0, 106, 148, .32) 0%, rgba(0, 106, 148, 0) 70%),
    var(--ink);
  color: var(--inverse);
}
.how__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(215, 240, 251, .16) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 20%, transparent 80%);
}
.how__pin {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 28px) 0 clamp(36px, 6vh, 72px);
}
.how__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px 56px; align-items: end; }
.how__head > div { display: grid; gap: 22px; }
.how__head .perex { justify-self: end; max-width: 30em; }
.how__stage { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 12px; }
.thread { position: relative; flex: none; display: block; width: 100%; height: clamp(190px, 31vh, 320px); overflow: visible; }
.how__stage .steps { margin-top: clamp(0px, 1.2vh, 16px); }
.thread svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thread__line { fill: none; stroke: url(#threadGrad); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.thread__glow { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: .32; filter: url(#threadBlur); }
.thread__pulse { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 34 966; opacity: 0; transition: opacity .6s; }
.how.is-done .thread__pulse { opacity: .9; animation: pulse-run 3.2s linear infinite; }
@keyframes pulse-run { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.tnode__dot { fill: var(--ink); stroke: var(--sky-100); stroke-width: 2; transition: fill .5s, stroke .5s; }
.tnode__ring { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tnode.is-on .tnode__dot { fill: var(--blue); stroke: #fff; }
.tnode.is-on .tnode__ring { animation: node-ping 2.4s var(--ease-out) infinite; }
@keyframes node-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0 auto; }
.step { text-align: center; padding: 0 clamp(4px, 1.6vw, 28px); }
.js .step { opacity: .22; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .step.is-on { opacity: 1; transform: none; }
.step__num { display: block; margin-bottom: 12px; font: italic 400 1.84rem/1 var(--serif); color: var(--blue); }
.step__title { font: 400 clamp(2.24rem, 1.6rem + 1.15vw, 3.44rem) / 1.1 var(--serif); color: #fff; margin: 0 0 12px; }
.step p { max-width: 23em; margin: 0 auto; font-size: 1.6rem; line-height: 1.55; color: var(--inverse-soft); }

/* =========================================================================
   03 · PRAKTICKÁ OPORA
   ========================================================================= */
.support { background: #fff; padding-bottom: 0; }
.support__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 7vw, 128px); align-items: center; }
.support__side { display: grid; gap: 22px; }
.support__art { position: relative; width: min(100%, 440px); margin-top: 18px; }
.support__art::before {
  content: ""; position: absolute; inset: 8% -4% -2% 6%; z-index: 0;
  border-radius: 46% 54% 52% 48% / 50% 42% 58% 50%;
  background: var(--sky-50);
  animation: blob 14s ease-in-out infinite alternate;
}
@keyframes blob { to { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; transform: rotate(8deg) scale(1.03); } }
.support__art .ill { position: relative; width: 100%; background: linear-gradient(160deg, var(--ink), var(--blue-700)); }
.support__text { padding-top: clamp(0px, 4vw, 60px); }
.bigtext {
  font: 500 clamp(1.84rem, 1.568rem + .62vw, 2.56rem) / 1.45 var(--sans);
  letter-spacing: -.014em; color: var(--text);
  margin: 0 0 1em;
}
.bigtext .hw { opacity: 1; }
.js .bigtext .hw { opacity: .17; }

.marquee {
  position: relative; overflow: hidden;
  margin-top: clamp(72px, 9vw, 140px);
  padding: clamp(18px, 2.4vw, 30px) 0;
  background: var(--paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; gap: clamp(2px, .6vw, 8px);
}
.marquee__row { display: flex; width: max-content; }
.marquee__track {
  display: flex; flex: none; align-items: center; gap: .55em; padding-right: .55em;
  white-space: nowrap;
  font: italic 400 clamp(3.36rem, 1.6rem + 4.2vw, 7.84rem) / 1.12 var(--serif);
  letter-spacing: -.02em; color: rgba(0, 106, 148, .3);
}
.mq-plus { --m: var(--i-plus); flex: none; width: .5em; height: .5em; color: var(--sky-200); }
.marquee__row--outline .marquee__track { color: transparent; -webkit-text-stroke: 1px rgba(0, 106, 148, .38); font-style: normal; }

/* =========================================================================
   04 · PRO ŠKOLU — BENTO
   ========================================================================= */
.bento { background: var(--paper); }
.bento__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(300px, auto);
  gap: clamp(12px, 1.4vw, 20px);
  perspective: 1600px;
}
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--r-lg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.tile h3 { font: 400 clamp(2.48rem, 1.68rem + 1.3vw, 3.84rem) / 1.08 var(--serif); letter-spacing: -.012em; margin: 0 0 12px; max-width: 12em; }
.tile p { font-size: 1.632rem; line-height: 1.5; max-width: 22em; }
.tile__body { position: relative; z-index: 2; }
.tile__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 42%);
  opacity: 0; transition: opacity .5s;
}
.tile:hover .tile__glow { opacity: 1; }
.tile__art { position: absolute; z-index: 1; pointer-events: none; transition: transform .9s var(--ease-out); }
.tile__art .ill { width: 100%; }

.tile--a {
  grid-column: span 6; grid-row: span 2; min-height: 560px;
  color: #fff;
  background:
    radial-gradient(80% 60% at 88% 8%, rgba(0, 165, 228, .45) 0%, rgba(0, 165, 228, 0) 60%),
    linear-gradient(165deg, var(--petrol) 0%, var(--ink) 72%);
}
.tile--a p { color: var(--inverse-soft); }
.tile__badge { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tile__badge::before { content: ""; width: 26px; height: 26px; background: var(--blue); -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }
.tile__art--a { right: -6%; bottom: -8%; width: 74%; }
.tile__art--a .ill { --ill-c: var(--sky-100); }
.radar { position: absolute; left: 81%; top: 12%; width: 0; height: 0; }
.radar i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid rgba(0, 165, 228, .7); animation: radar 3.6s var(--ease-out) infinite; opacity: 0; }
.radar i:nth-child(2) { animation-delay: 1.2s; }
.radar i:nth-child(3) { animation-delay: 2.4s; }
@keyframes radar { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.tile--a:hover .tile__art--a { transform: translate3d(-10px, -12px, 40px) rotate(-2deg); }

.tile--b { grid-column: span 6; background: linear-gradient(135deg, var(--sky-100) 0%, var(--sky-50) 100%); }
.tile--b .tile__body { max-width: 58%; }
.tile--b p { color: var(--text-soft); }
.tile__check { display: block; width: 56px; height: 56px; margin-bottom: 22px; }
.tile__check svg { width: 100%; height: 100%; overflow: visible; }
.tile__check circle { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.tile__check path { fill: none; stroke: var(--petrol); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.js .tile__check circle, .js .tile__check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tile__art--b { right: 4%; bottom: 6%; width: 36%; max-width: 250px; }
.tile--b:hover .tile__art--b { transform: translate3d(0, -10px, 30px) rotate(-4deg); }

.tile--c { grid-column: span 3; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tile--c p { color: var(--text-soft); }
.tile--c .tile__art, .tile--d .tile__art { position: relative; right: auto; top: auto; align-self: flex-end; width: 50%; max-width: 190px; margin: -8px -6px 20px auto; }
.tile--c:hover .tile__art--c { transform: translate3d(0, -14px, 30px); }

.tile--d { grid-column: span 3; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tile--d p { color: var(--text-soft); }

.tile--d:hover .tile__art--d { transform: translate3d(0, -10px, 30px) rotate(4deg); }
.tile--d h3 { max-width: 9em; }

.bento__title { color: var(--petrol); }
.bento__slogan { margin-top: -4px; }

/* Cena a zapojení (C6) */
.price {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr) auto;
  gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(12px, 1.4vw, 20px);
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r-lg);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -50px rgba(8, 48, 64, .5);
}
.price__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 1.3rem/1 var(--sans); letter-spacing: .02em; color: var(--petrol); }
.price__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 165, 228, .18); }
.price__title { font: 400 clamp(2.48rem, 1.68rem + 1.3vw, 3.76rem) / 1.1 var(--serif); letter-spacing: -.012em; color: var(--ink); max-width: 13em; }
.price__body p { font-size: 1.6rem; line-height: 1.58; color: var(--text-soft); max-width: 36em; }
.price__note { margin-top: 16px; }
.price__freq {
  position: relative; display: inline-flex; flex-wrap: nowrap; max-width: 100%; margin-top: 18px; padding: 4px;
  border-radius: 99px; background: var(--sky-50); box-shadow: inset 0 0 0 1px rgba(0, 106, 148, .14);
}
.price__freq span { position: relative; z-index: 1; padding: 9px 15px; font: 600 1.3rem/1 var(--sans); color: var(--text-soft); transition: color .45s var(--ease-out); }
.price__freq span.is-on { color: #fff; }
.price__pill { position: absolute; z-index: 0; left: 0; top: 4px; height: calc(100% - 8px); width: 0; border-radius: 99px; background: var(--petrol); box-shadow: 0 8px 18px -8px rgba(0, 79, 109, .7); transition: transform .7s var(--ease-out), width .7s var(--ease-out); }

/* =========================================================================
   05 · DŮVĚRA ŠKOL
   ========================================================================= */
.trust { position: relative; background: var(--paper); padding: clamp(10px, 2vw, 30px) 0; }
.trust__panel {
  position: relative; overflow: hidden;
  padding: clamp(96px, 11vw, 176px) 0;
  background: linear-gradient(180deg, var(--sky-100) 0%, #e3f5fd 100%);
  border-radius: 0;
}
.js .trust__panel { clip-path: inset(0 5% 0 5% round 48px); }
.trust__orb {
  position: absolute; right: -12vw; top: -16vw; width: 52vw; height: 52vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
.trust__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 5vw, 80px); align-items: end; }
.trust__main { display: grid; gap: 22px; }
.trust__title { color: var(--petrol); max-width: 18em; }
.quote { position: relative; margin: clamp(40px, 5vw, 76px) 0 0; }
.quote__mark {
  position: absolute; left: -.06em; top: -.38em;
  font: 400 clamp(12.8rem, 8rem + 9vw, 24rem) / 1 var(--serif);
  color: var(--blue); opacity: .9; pointer-events: none;
}
.quote blockquote { margin: 0; position: relative; }
.quote blockquote p {
  font: 400 clamp(3.12rem, 1.44rem + 3vw, 6.24rem) / 1.12 var(--serif);
  letter-spacing: -.022em; color: var(--ink); text-wrap: balance;
  padding-top: clamp(40px, 5vw, 80px);
}
.js .quote .hw { opacity: .16; }
.quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: clamp(26px, 3vw, 40px); font-weight: 600; color: var(--petrol); }
.quote__line { flex: none; width: 48px; height: 1.5px; background: var(--blue); }
.quote__who { display: block; line-height: 1.4; }
.quote__who b { font-weight: 700; }
.quote__who span { display: block; font-weight: 500; font-size: 1.5rem; color: var(--text-soft); }
.quotes {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(56px, 7vw, 100px); padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid rgba(0, 106, 148, .2);
}
.quote-sm { position: relative; margin: 0; padding-left: clamp(34px, 3.2vw, 48px); }
.quote-sm::before { content: "“"; position: absolute; left: 0; top: -.12em; font: 400 5.76rem/1 var(--serif); color: var(--blue); }
.quote-sm blockquote { margin: 0; }
.quote-sm p { font: 400 clamp(2rem, 1.52rem + .85vw, 2.8rem) / 1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); max-width: 24em; }
.quote-sm figcaption { display: grid; gap: 2px; margin-top: 18px; font-size: 1.5rem; color: var(--text-soft); }
.quote-sm figcaption b { color: var(--petrol); font-weight: 700; }
.trust__art { position: relative; }
.trust__art .ill { width: 100%; background: linear-gradient(200deg, var(--ink), var(--blue-700)); }

/* =========================================================================
   06 · KDE POMÁHÁME
   ========================================================================= */
.where { background: var(--paper); }
.where__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.where .h2 { font-size: clamp(3.68rem, 1.76rem + 3.1vw, 6.56rem); }
.where__copy { display: grid; gap: 22px; justify-items: start; }
.where__cta { margin-top: 14px; }
.map {
  position: relative; margin: 0;
  aspect-ratio: 1 / .66;
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 80% at 48% 42%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, var(--sky-50), var(--sky-100));
  box-shadow: inset 0 0 0 1px rgba(0, 106, 148, .12), 0 50px 90px -60px rgba(0, 79, 109, .5);
  overflow: hidden;
}
.map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__cap {
  position: absolute; left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 24px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 99px;
  font: 600 1.3rem/1.2 var(--sans); color: var(--petrol);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(8, 48, 64, .35);
}
.map__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.map__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--blue); animation: node-ping 2.4s var(--ease-out) infinite; }

/* =========================================================================
   07 · ČLÁNKY — synchronizovaný slider
   ========================================================================= */
.articles { background: #fff; }
.sync { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.sync__media {
  position: relative; aspect-ratio: 4 / 3.05; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sky-100);
  box-shadow: 0 60px 100px -70px rgba(8, 48, 64, .6);
}
.sync__img { position: absolute; inset: 0; display: block; clip-path: inset(0 0 0 100%); }
.sync__img.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.sync__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 60% 50%; }
.sync__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 48, 64, 0) 55%, rgba(8, 48, 64, .35) 100%); }
.sync__count {
  position: absolute; right: 18px; bottom: 18px; z-index: 5;
  display: inline-flex; gap: 6px; align-items: baseline;
  padding: 9px 15px; border-radius: 99px;
  font: 500 1.4rem/1 var(--sans); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8);
  background: rgba(8, 48, 64, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sync__count b { color: #fff; font-weight: 700; }
.sync__list { list-style: none; margin: 0; padding: 0; }
.sitem { position: relative; padding: 26px 0 28px; border-top: 1px solid var(--line); cursor: pointer; }
.sitem:last-child { border-bottom: 1px solid var(--line); }
.sitem__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.sitem__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-700), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; }
.sitem__meta { margin-bottom: 10px; font: 600 1.3rem/1.3 var(--sans); letter-spacing: .01em; color: var(--petrol); }
.sitem__title { font: 400 clamp(2.16rem, 1.6rem + .95vw, 3.2rem) / 1.14 var(--serif); letter-spacing: -.01em; }
.sitem__title a { text-decoration: none; color: var(--text); transition: color .5s; }
.sitem:not(.is-active) .sitem__title a { color: rgba(12, 37, 49, .42); }
.sitem:hover .sitem__title a { color: var(--petrol); }
.sitem__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-out); }
.sitem__more > div { overflow: hidden; }
.sitem.is-active .sitem__more { grid-template-rows: 1fr; }
.sitem__ex { padding-top: 14px; font-size: 1.6rem; line-height: 1.58; color: var(--text-soft); max-width: 32em; }
.sitem__more .link-arrow { margin-top: 16px; }
.sitem__thumb { display: none; }

/* =========================================================================
   08 · DALŠÍ KROK
   ========================================================================= */
.next {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--sky-50) 38%, var(--sky-100) 100%);
}
.next__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.next__copy { display: grid; gap: 24px; }
.next__copy .display { color: var(--ink); }
.next__art { position: relative; aspect-ratio: 1 / .96; }
.next__disc { position: absolute; inset: 8% 4% 4% 8%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0) 70%); }
.next__art .ill { position: absolute; inset: 6% 2% 10% 6%; background: linear-gradient(175deg, var(--ink), var(--blue-700)); }
.orb {
  position: absolute; left: -2%; bottom: 0; z-index: 3;
  display: grid; place-items: center; align-content: center; gap: 8px;
  width: clamp(158px, 14.5vw, 218px); aspect-ratio: 1; border-radius: 50%;
  padding: 18px; text-align: center; text-decoration: none;
  font: 600 clamp(1.52rem, 1.36rem + .25vw, 1.728rem) / 1.2 var(--sans);
  color: #fff; background: var(--petrol);
  box-shadow: 0 34px 60px -24px rgba(0, 79, 109, .7);
  transition: background .6s var(--ease-out), color .6s;
  will-change: transform;
}
.orb:hover { background: var(--blue); color: var(--ink); }
.orb__ring { position: absolute; inset: -14px; border-radius: 50%; border: 1.5px dashed rgba(0, 106, 148, .55); animation: spin 22s linear infinite; pointer-events: none; }
.orb__label { position: relative; max-width: 9em; }
.orb__arrow { --m: var(--i-arrow); position: relative; width: 22px; height: 22px; transition: transform .6s var(--ease-out); }
.orb:hover .orb__arrow { transform: translateX(6px); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.ftr { position: relative; overflow: hidden; background: var(--ink); color: var(--inverse-soft); }
.ftr__inner { position: relative; padding: clamp(76px, 9vw, 124px) 0 30px; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 40px; }
.ftr__logo { display: inline-block; color: #fff; }
.ftr__logo svg { height: 46px; width: auto; }
.ftr__tag { margin-top: 20px; font: italic 400 clamp(2.08rem, 1.76rem + .6vw, 2.72rem) / 1.25 var(--serif); color: #fff; max-width: 14em; }
.ftr__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ftr__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.ftr a { text-decoration: none; color: var(--inverse-soft); transition: color .3s; }
.ftr__nav a, .ftr__contact a, .ftr__legal a {
  background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease-out), color .3s;
  padding-bottom: 2px;
}
.ftr__nav a:hover, .ftr__contact a:hover, .ftr__legal a:hover { color: #fff; background-size: 100% 1px; }
.ftr__contact { display: grid; gap: 12px; align-content: start; justify-items: start; }
.ftr__contact a:first-child { font: 400 2.16rem/1.2 var(--serif); color: #fff; }
.ftr__mark { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: clamp(48px, 6vw, 88px) auto 0; padding: 0 var(--gutter); color: rgba(215, 240, 251, .075); --logo-plus: rgba(0, 165, 228, .85); }
.ftr__mark svg { width: min(100%, 720px); height: auto; overflow: visible; }
.ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(201, 214, 220, .14); font-size: 1.4rem; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.totop {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background .4s, transform .6s var(--ease-out);
}
.totop::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-arrow-up) center / contain no-repeat; mask: var(--i-arrow-up) center / contain no-repeat; }
.totop:hover { background: var(--blue); color: var(--ink); transform: translateY(-4px); }

/* =========================================================================
   RESPONZIVITA
   ========================================================================= */
@media (min-width: 1680px) {
  :root { --maxw: 1480px; }
}
/* nízké notebookové displeje (např. 1280×720) – aby se hero i připnutá sekce vešly */
/* HERO na desktopu a notebooku: velikosti se řídí i výškou okna, takže se
   nadpis, perex, tlačítka i poznámka vždy vejdou na první obrazovku */
@media (min-width: 1024px) {
  .hero { min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + clamp(4px, 2.6vh, 32px)) 0 clamp(28px, 5.5vh, 64px); }
  .hero__kicker { font-size: clamp(1.3rem, 1.6vh, 1.4rem); }
  .hero__title { font-size: min(clamp(3.84rem, 1.6rem + 3.6vw, 7.84rem), 8.2vh); margin: .3em 0 .32em; }
  .hero__lead { font-size: clamp(1.568rem, 2.25vh, 1.92rem); line-height: 1.55; max-width: 33em; }
  .hero__ctas { margin-top: clamp(16px, 3.4vh, 36px); }
  .hero__ctas .btn--lg { padding: clamp(.85em, 1.7vh, 1.1em) 1.6em; }
  .hero__note { margin-top: clamp(12px, 2.6vh, 28px); font-size: clamp(1.6rem, 2.2vh, 1.952rem); }
  .hero__art { max-width: min(580px, calc((100vh - var(--header-h) - 64px) / 1.04)); max-width: min(580px, calc((100svh - var(--header-h) - 64px) / 1.04)); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero__scroll { display: none; }
  .how__pin { padding-top: calc(var(--header-h) - 12px); padding-bottom: 28px; }
  .how .h2 { font-size: min(clamp(3.76rem, 1.76rem + 3.7vw, 7.2rem), 8.2vh); }
  .how__stage { min-height: 0; margin-top: 0; }
  .step__title { margin-bottom: 8px; }
  .step p { font-size: 1.52rem; }
}

@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .burger { display: block; }
  .hdr__actions { margin-left: auto; }
  .tile--a { grid-column: span 12; grid-row: auto; min-height: 400px; }
  .tile--a .tile__body { max-width: 52%; }
  .tile__art--a { width: 46%; right: -2%; bottom: -14%; }
  .tile--b, .tile--c, .tile--d { grid-column: span 4; }
  .tile--b .tile__body { max-width: none; }
  .tile--b .tile__art--b { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 44%; max-width: 170px; margin: -8px -6px 18px auto; order: -1; }
  .tile--b { justify-content: space-between; }
}

@media (max-width: 1023px) {
  :root { --header-h: 84px; }
  .hero { min-height: auto; padding-bottom: 88px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { justify-self: center; max-width: 480px; margin-top: 12px; }
  .hero__scroll { display: none; }

  .trow__link { grid-template-columns: 44px minmax(0, 1fr) 72px; grid-template-areas: "num title thumb" "num desc thumb"; row-gap: 8px; align-items: start; }
  .trow__num { grid-area: num; padding-top: .55em; }
  .trow__title { grid-area: title; }
  .trow__desc { grid-area: desc; }
  .trow__thumb { grid-area: thumb; display: block; width: 72px; height: 72px; border-radius: 50%; background: var(--sky-100); padding: 12px; align-self: center; }
  .trow__thumb .ill { width: 100%; height: 100%; }
  .trow__icon { display: none; }
  .tfloat { display: none; }

  .how__head { grid-template-columns: 1fr; }
  .how__head .perex { justify-self: start; }
  .how__stage { min-height: 0; margin-top: 44px; }
  .thread { position: absolute; left: 0; top: 0; height: 100%; }
  .how__stage .steps { margin-top: 0; }
  .steps { grid-template-columns: 1fr; gap: 48px; padding-left: 76px; padding-right: var(--gutter); }
  .step { text-align: left; padding: 0; }
  .step p { margin: 0; }

  .support__grid { grid-template-columns: 1fr; }
  .support__side { position: relative; top: 0; }
  .support__art { width: min(78%, 360px); }
  .support__text { padding-top: 0; }

  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .tile--a { grid-column: span 2; grid-row: auto; min-height: 460px; }
  .tile--b { grid-column: span 2; min-height: 280px; }
  .tile--c, .tile--d { grid-column: span 1; min-height: 340px; }

  .trust__grid { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .price { grid-template-columns: 1fr; gap: 20px; }
  .price__cta { justify-self: start; }
  .trust__art { width: min(62%, 300px); justify-self: end; margin-top: -10px; }

  .where__grid { grid-template-columns: 1fr; }

  .sync { grid-template-columns: 1fr; }
  .sync__media { display: none; }
  .sync__list { display: grid; gap: 18px; }
  .sitem { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 0 22px; border: 0; border-radius: var(--r-md); background: var(--paper); overflow: hidden; cursor: default; }
  .sitem:last-child { border: 0; }
  .sitem__bar { display: none; }
  .sitem__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 20px; }
  .sitem > :not(.sitem__thumb):not(.sitem__bar) { padding-left: 22px; padding-right: 22px; }
  .sitem__more { grid-template-rows: 1fr; }
  .sitem:not(.is-active) .sitem__title a { color: var(--text); }

  .next__grid { grid-template-columns: 1fr; }
  .next__art { max-width: 520px; width: 100%; justify-self: center; }

  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --header-h: 76px; }
  .hdr { padding-top: 10px; }
  .hdr__bar { height: 58px; padding: 0 6px 0 16px; }
  .hdr__logo { margin-top: -8px; margin-left: 4px; }
  .hdr__logo svg { height: 32px; }
  .burger { width: 44px; height: 44px; }
  .burger span { left: 13px; right: 13px; }
  .burger span:first-child { top: 17px; }
  .burger span:last-child { top: 25px; }
  .menu-open .burger span:first-child, .menu-open .burger span:last-child { top: 21px; }
  .hdr__actions .btn--sm { padding: .8em 1.05em; font-size: 1.3rem; }

  .hero__title { font-size: clamp(3.92rem, 1.76rem + 7vw, 5.44rem); }
  .hero__ctas .btn { width: 100%; justify-content: space-between; }
  .hero__ctas .btn--ghost { justify-content: center; }
  .hero__note::before { width: 36px; }
  .ring { width: 104px; left: -2%; }

  .trow__link { grid-template-columns: 32px minmax(0, 1fr) 58px; column-gap: 12px; padding-left: 2px; padding-right: 2px; }
  .trow__thumb { width: 58px; height: 58px; padding: 9px; }
  .trow__desc { font-size: 1.52rem; }

  .steps { padding-left: 62px; gap: 40px; }

  .bento__grid { grid-template-columns: 1fr; }
  .tile--a, .tile--b, .tile--c, .tile--d { grid-column: auto; }
  .tile--a { min-height: 440px; }
  .tile--b .tile__body { max-width: 64%; }
  .tile--c, .tile--d { min-height: 320px; }

  .js .trust__panel { clip-path: inset(0 3% 0 3% round 28px); }
  .quote__mark { font-size: 12rem; }

  .map { aspect-ratio: 1 / .72; border-radius: var(--r-lg); }
  .map__cap { font-size: 1.2rem; padding: 8px 12px 8px 10px; }

  .orb { left: 0; bottom: -4%; }

  .ftr__grid { grid-template-columns: 1fr; gap: 34px; }
  .price { padding: 24px 20px; }
  .price__freq { display: flex; width: 100%; }
  .price__freq span { flex: 1 1 auto; text-align: center; padding: 9px 4px; font-size: 1.2rem; }
  .price__cta .btn { width: 100%; justify-content: space-between; }
  .ftr__nav { grid-template-columns: 1fr 1fr; }
  .ftr__legal { margin-left: 0; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }
  .totop { order: -1; align-self: flex-end; margin-bottom: -46px; }
}

/* Omezení pohybu – vše staticky, obsah hned viditelný */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Bez animací (reduced motion / nenačtený GSAP) – vše v koncovém stavu */
.no-anim .hw, .no-anim .quote .hw, .no-anim .bigtext .hw { opacity: 1 !important; }
.no-anim .tile__check circle, .no-anim .tile__check path { stroke-dashoffset: 0 !important; }
.no-anim .tlist::before, .no-anim .trow::after { transform: none !important; }
.no-anim .step { opacity: 1 !important; transform: none !important; }
.no-anim .sync__img:not(.is-active) { clip-path: inset(0 0 0 100%); }
.no-anim .trust__panel { clip-path: none; }

/* =========================================================================
   PODSTRÁNKY — sdílené díly (hero podstránky, navigace „Na této stránce“)
   Přidáno 1. 10. 2026 s návrhem Pro školy. Nic z homepage se tu nepřepisuje.
   ========================================================================= */
.hdr__nav a[aria-current] { background: rgba(0, 165, 228, .12); color: var(--petrol); }
.mnav__list a[aria-current] span { color: var(--blue); }

.grow__plus, .achip::before { background: currentColor; -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }

.phero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(36px, 7vh, 96px)) 0 clamp(56px, 6vw, 96px);
  background: linear-gradient(180deg, #fff 0%, var(--paper) 62%, #fff 100%);
}
.phero .hero__aura i:nth-child(1) { width: 52vw; height: 52vw; right: -16vw; top: -18vw; }
.phero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
}
.phero__kicker { font-size: 1.4rem; }
.phero__title {
  margin: .42em 0 .4em;
  font: 400 clamp(3.84rem, 1.6rem + 3.5vw, 7.36rem) / 1 var(--serif);
  letter-spacing: -.024em; color: var(--text); text-wrap: balance;
}
.phero__lead { max-width: 34em; font-size: clamp(1.696rem, 1.536rem + .38vw, 2.08rem); line-height: 1.6; color: var(--text-soft); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.4vh, 36px); }
.phero__art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; justify-self: end; }
.phero__disc {
  position: absolute; inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 50%, var(--sky-50) 0%, var(--sky-100) 58%, #c5e8f8 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .14), 0 60px 120px -60px rgba(0, 106, 148, .45);
}
.phero__disc::after { content: ""; position: absolute; inset: -5%; border-radius: 50%; border: 1px dashed rgba(0, 106, 148, .22); animation: spin 60s linear infinite; }
.phero__float { position: absolute; inset: 16% 9% 14% 9%; }
.ill--phero { width: 100%; height: 100%; background: linear-gradient(170deg, var(--ink) 0%, var(--petrol) 70%, var(--blue-700) 100%); }
.phero .spark--1 { top: 3%; left: 22%; }
.phero .spark--2 { top: 14%; right: 4%; }
.phero .spark--3 { top: auto; bottom: 12%; left: 6%; }

.pnav { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 6vw, 88px); }
.pchip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .8em 1.15em; border-radius: 99px;
  font: 600 1.4rem/1 var(--sans); color: var(--petrol); text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .4s, box-shadow .4s, transform .6s var(--ease-out);
}
.pchip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--blue); opacity: .6; transition: transform .6s var(--ease-out), opacity .4s; }
.pchip:hover { background: var(--sky-100); box-shadow: inset 0 0 0 1px transparent; transform: translateY(-2px); }
.pchip:hover::before { transform: scale(1.5); opacity: 1; }
.js .pchip { opacity: 0; transform: translateY(14px); }

/* =========================================================================
   PRO ŠKOLY · 01 Co škola získá — připnutý nadpis, řádky s čísly
   ========================================================================= */
.gain { background: #fff; }
.gain__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 7vw, 128px); align-items: start; }
.gain__side { position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: 22px; }
.glist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.grow {
  position: relative;
  display: grid; grid-template-columns: clamp(48px, 5vw, 76px) minmax(0, 1fr) 40px; gap: 0 clamp(14px, 2vw, 28px); align-items: start;
  padding: clamp(28px, 3.2vw, 44px) 0;
  border-bottom: 1px solid var(--line);
}
.grow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: linear-gradient(90deg, var(--blue-700), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out); }
.grow:hover::after { transform: scaleX(1); }
.grow__num { font: italic 400 clamp(2.4rem, 1.8rem + 1vw, 3.52rem) / 1 var(--serif); color: var(--blue); padding-top: .12em; font-variant-numeric: tabular-nums; }
.grow__title { font: 400 clamp(2.4rem, 1.68rem + 1.3vw, 3.68rem) / 1.1 var(--serif); letter-spacing: -.012em; color: var(--text); transition: color .5s; }
.grow:hover .grow__title { color: var(--petrol); }
.grow__text { margin-top: 10px; font-size: 1.7rem; line-height: 1.55; color: var(--text-soft); max-width: 30em; }
.grow__plus { display: block; width: 26px; height: 26px; margin-top: .45em; justify-self: end; color: var(--sky-200); transition: transform .9s var(--ease-out), color .5s; }
.grow:hover .grow__plus { transform: rotate(90deg); color: var(--blue); }

/* =========================================================================
   PRO ŠKOLY · 02 Pro koho — výrok, adresáti jako štítky
   ========================================================================= */
.aud { background: var(--paper); }
.aud__grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.aud__copy { display: grid; gap: 22px; justify-items: start; }
.aud__text { margin: 6px 0 0; max-width: 30em; }
.aud__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.achip {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.25em .85em 1em; border-radius: 99px;
  font: 500 1.5rem/1.3 var(--sans); color: var(--text);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -22px rgba(8, 48, 64, .45);
}
.achip::before { content: ""; flex: none; width: 1.05em; height: 1.05em; color: var(--blue); }
.aud__art { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; justify-self: end; }
.aud__blob {
  position: absolute; inset: 5%;
  border-radius: 46% 54% 52% 48% / 50% 42% 58% 50%;
  background: #fff; box-shadow: 0 60px 100px -70px rgba(0, 79, 109, .55);
  animation: blob 14s ease-in-out infinite alternate;
}
.aud__art .ill { position: absolute; inset: 13%; background: linear-gradient(160deg, var(--ink), var(--blue-700)); }

/* =========================================================================
   PRO ŠKOLY · 03 Přínosy podle role — tmavá sekce, přepínač rolí
   ========================================================================= */
.roles {
  position: relative; overflow: hidden;
  padding: var(--sec-pad) 0;
  background:
    radial-gradient(70% 60% at 84% 10%, rgba(0, 165, 228, .18) 0%, rgba(0, 165, 228, 0) 70%),
    radial-gradient(50% 50% at 6% 96%, rgba(0, 106, 148, .3) 0%, rgba(0, 106, 148, 0) 70%),
    var(--ink);
  color: var(--inverse);
}
.roles__inner { position: relative; }
.roles__head { display: grid; gap: 22px; max-width: 920px; }
.roles__ui { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 76px); align-items: stretch; }
.roles__tabs { display: none; gap: 10px; align-content: start; }
.js .roles__tabs { display: grid; }
.rtab {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 16px;
  width: 100%; padding: 22px 24px; border: 0; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(215, 240, 251, .12);
  color: var(--inverse-soft); text-align: left; cursor: pointer;
  font: 400 clamp(1.92rem, 1.6rem + .6vw, 2.56rem) / 1.2 var(--serif); letter-spacing: -.005em;
  transition: background .5s, color .5s, box-shadow .5s;
}
.rtab__num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 600 1.3rem/1 var(--sans); letter-spacing: .04em; color: var(--sky-200);
  box-shadow: inset 0 0 0 1px rgba(191, 230, 248, .3);
  transition: background .5s, color .5s, box-shadow .5s;
}
.rtab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rtab.is-on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .5); }
.rtab.is-on .rtab__num { background: var(--blue); color: var(--ink); box-shadow: none; }
.rtab__bar { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; overflow: hidden; }
.rtab__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-700), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; }
.roles__panels { display: grid; gap: 18px; }
.js .roles__panels {
  position: relative; gap: 0; overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(215, 240, 251, .12);
}
.rpanel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(26px, 3.4vw, 52px);
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .05);
}
.js .rpanel { grid-area: 1 / 1; border-radius: 0; background: none; visibility: hidden; }
.js .rpanel.is-on { visibility: visible; }
.rpanel__art { position: relative; aspect-ratio: 1; max-width: 300px; width: 100%; justify-self: center; }
.rpanel__art::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(0, 165, 228, .3), rgba(0, 165, 228, 0) 70%); }
.rpanel__art .ill { position: absolute; inset: 8%; background: linear-gradient(170deg, #fff 0%, var(--sky-100) 100%); }
.rpanel__title { font: 400 clamp(2.4rem, 1.68rem + 1.3vw, 3.68rem) / 1.1 var(--serif); letter-spacing: -.012em; color: #fff; }
.rpanel__text { margin-top: 14px; font-size: clamp(1.7rem, 1.6rem + .2vw, 1.92rem); line-height: 1.6; color: var(--inverse-soft); max-width: 32em; }

/* =========================================================================
   PRO ŠKOLY · 04 Zapojení školy — tři kroky na lince
   ========================================================================= */
.join { background: #fff; }
.join__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 56px; }
.join__titles { display: grid; gap: 22px; }
.join__art { width: clamp(150px, 16vw, 240px); aspect-ratio: 450 / 520; margin-bottom: -12px; }
.join__art .ill { width: 100%; height: 100%; background: linear-gradient(160deg, var(--ink), var(--blue-700)); }
.jtrack { position: relative; margin-top: clamp(48px, 6vw, 96px); }
.jtrack { --jgap: clamp(24px, 3vw, 56px); }
.jline { position: absolute; left: 34px; right: calc((100% - 2 * var(--jgap)) / 3 - 34px); top: 33px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.jline i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-700), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; }
.jsteps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jgap); }
.jstep__dot {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font: italic 400 2.4rem/1 var(--serif); color: var(--petrol);
  transition: background .6s var(--ease-out), color .6s, box-shadow .6s, transform .8s var(--ease-out);
}
.jstep.is-on .jstep__dot { background: var(--petrol); color: #fff; box-shadow: 0 0 0 9px var(--sky-100); transform: scale(1.04); }
.jstep__title { margin-top: 30px; font: 400 clamp(2.4rem, 1.68rem + 1.3vw, 3.36rem) / 1.12 var(--serif); letter-spacing: -.01em; color: var(--text); }
.jstep__text { margin-top: 10px; font-size: 1.7rem; line-height: 1.55; color: var(--text-soft); max-width: 24em; }
.js .jstep__title, .js .jstep__text { opacity: .35; transition: opacity .8s var(--ease-out); }
.js .jstep.is-on .jstep__title, .js .jstep.is-on .jstep__text { opacity: 1; }

/* =========================================================================
   PRO ŠKOLY · 05 Cena — dvousloupcová karta
   ========================================================================= */
.plan { background: var(--paper); }
.plan__head { display: grid; gap: 22px; max-width: 920px; }
.plan__card {
  margin-top: clamp(36px, 4vw, 60px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-xl); background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 60px 100px -70px rgba(8, 48, 64, .5);
}
.plan__col { display: grid; gap: 18px; align-content: start; justify-items: start; padding: clamp(28px, 3.8vw, 60px); }
.plan__col--cta { border-left: 1px solid var(--line); background: linear-gradient(160deg, var(--sky-50) 0%, #fff 72%); }
.plan__title { font: 400 clamp(2.4rem, 1.68rem + 1.3vw, 3.36rem) / 1.12 var(--serif); letter-spacing: -.01em; color: var(--text); }
.plan__text { font-size: 1.7rem; line-height: 1.6; color: var(--text-soft); max-width: 32em; }
.plan .price__freq { margin-top: 6px; }
.plan__col--cta .btn { margin-top: 8px; }

/* bez animací – koncové stavy */
.no-anim .pchip { opacity: 1 !important; transform: none !important; }
.no-anim .jline i { transform: none !important; }

/* =========================================================================
   PODSTRÁNKY — responzivita
   ========================================================================= */
@media (min-width: 1024px) and (max-height: 820px) {
  .phero { padding-top: calc(var(--header-h) + 28px); }
  .phero__title { font-size: min(clamp(3.84rem, 1.6rem + 3.5vw, 7.36rem), 8vh); }
  .phero__art { max-width: min(500px, calc(100vh - var(--header-h) - 180px)); }
  .pnav { margin-top: 32px; }
}
@media (max-width: 1023px) {
  .phero__grid { grid-template-columns: 1fr; }
  .phero__art { justify-self: center; max-width: 420px; margin-top: 8px; }
  .pnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-bottom: 4px; }
  .pnav::-webkit-scrollbar { display: none; }

  .gain__grid { grid-template-columns: 1fr; gap: 36px; }
  .gain__side { position: relative; top: 0; }

  .aud__grid { grid-template-columns: 1fr; }
  .aud__art { justify-self: center; max-width: 380px; order: -1; }

  .roles__ui { grid-template-columns: 1fr; }
  .rtab { padding: 16px 18px; font-size: 1.92rem; }
  .rtab__bar { left: 18px; right: 18px; }
  .rpanel { grid-template-columns: 1fr; text-align: left; }
  .rpanel__art { max-width: 220px; justify-self: start; }

  .join__head { grid-template-columns: 1fr; }
  .join__art { display: none; }
  .jline { left: 33px; right: auto; top: 34px; bottom: 34px; width: 2px; height: auto; }
  .jline i { width: 100%; height: 100%; transform: scaleY(0); transform-origin: 50% 0; }
  .jsteps { grid-template-columns: 1fr; gap: 44px; }
  .jstep { position: relative; padding-left: 96px; min-height: 68px; }
  .jstep__dot { position: absolute; left: 0; top: 0; }
  .jstep__title { margin-top: 12px; }

  .plan__card { grid-template-columns: 1fr; }
  .plan__col--cta { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .phero__title { font-size: clamp(3.52rem, 1.6rem + 6.4vw, 5.12rem); }
  .phero__ctas .btn { width: 100%; justify-content: space-between; }
  .phero__ctas .btn--ghost { justify-content: center; }
  .phero__art { max-width: 330px; }
  .grow { grid-template-columns: 40px minmax(0, 1fr); }
  .grow__plus { display: none; }
  .achip { font-size: 1.4rem; }
  .jstep { padding-left: 88px; }
  .plan__col--cta .btn { width: 100%; justify-content: space-between; }
}

/* =========================================================================
   PODSTRÁNKY II — sdílené díly dalších stránek (Jak to funguje, S čím pomáháme,
   O nás, Kontakt, Články, Detail článku, právní stránky). Přidáno 1. 10. 2026.
   ========================================================================= */
.phero--compact { padding-bottom: clamp(40px, 5vw, 72px); }
.phero--compact .phero__art { max-width: 380px; }
.phero__back { display: flex; width: max-content; align-items: center; gap: .5em; margin-bottom: 18px; font: 600 1.4rem/1 var(--sans); color: var(--petrol); text-decoration: none; }
.phero__back::before { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transform: rotate(180deg); transition: transform .5s var(--ease-out); }
.phero__back:hover::before { transform: rotate(180deg) translateX(4px); }

/* rozdělená sekce: připnutý nadpis vlevo, obsah vpravo */
.split__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 7vw, 128px); align-items: start; }
.split__side { position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: 22px; }
.split__body .bigtext:last-child { margin-bottom: 0; }
.split--paper { background: var(--paper); }
.split { overflow-x: clip; }
.split--white { background: #fff; }

/* dvousloupcový seznam (služby) – stejný řádek jako .grow */
.glist--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); border-top: 0; }
.glist--2col .grow:nth-child(-n+2) { border-top: 1px solid var(--line); }
.grow--title .grow__title { font-size: clamp(2.24rem, 1.6rem + 1.1vw, 3.2rem); }

/* zaškrtávací kruh (SVG doplní JS, stejný jako v bento) */
.tick { display: block; width: 52px; height: 52px; flex: none; }
.tick svg { width: 100%; height: 100%; overflow: visible; }
.tick circle { fill: none; stroke: var(--sky-200); stroke-width: 1.5; }
.tick path { fill: none; stroke: var(--petrol); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.js .tick circle, .js .tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.no-anim .tick circle, .no-anim .tick path { stroke-dashoffset: 0 !important; }

/* =========================================================================
   JAK TO FUNGUJE
   ========================================================================= */
.how--page .how__pin { padding-top: calc(var(--header-h) + 40px); }
.after { background: #fff; }
.after__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.after__copy { display: grid; gap: 22px; justify-items: start; }
.after__lead { font: italic 400 clamp(2.24rem, 1.76rem + .9vw, 3.2rem) / 1.3 var(--serif); color: var(--blue-700); max-width: 18em; }
.after__badge {
  position: relative; display: grid; place-items: center; align-content: center;
  width: clamp(150px, 14vw, 196px); aspect-ratio: 1; margin-top: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sky-50) 45%, var(--sky-100) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .2), 0 40px 70px -40px rgba(0, 79, 109, .5);
  text-align: center;
}
.after__badge::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgba(0, 106, 148, .3); animation: spin 40s linear infinite; }
.after__badge b { display: block; font: 400 clamp(5.6rem, 4rem + 3vw, 8rem) / .9 var(--serif); color: var(--petrol); }
.after__badge span { display: block; margin-top: 4px; font: 600 1.3rem/1.25 var(--sans); color: var(--text-soft); max-width: 9em; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.flow__item {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 26px 20px 20px; border-radius: var(--r-md);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  font-size: clamp(1.7rem, 1.6rem + .25vw, 1.92rem); line-height: 1.5; color: var(--text);
  transition: background .5s, box-shadow .5s, transform .7s var(--ease-out);
}
.flow__item:hover { background: var(--sky-50); transform: translateX(6px); }

.svc { background: #fff; }
.svc .perex { margin-top: -16px; margin-bottom: clamp(32px, 4vw, 56px); }

.guides { background: var(--paper); }
.guides__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px 56px; align-items: end; }
.guides__head > div { display: grid; gap: 22px; }
.guides__art { width: clamp(150px, 15vw, 230px); aspect-ratio: 479 / 640; justify-self: end; }
.guides__art .ill { width: 100%; height: 100%; background: linear-gradient(170deg, var(--ink), var(--blue-700)); }
.notes { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.note {
  position: relative; display: grid; gap: 18px; align-content: space-between; min-height: 180px;
  padding: 26px 26px 24px; border-radius: var(--r-md);
  background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -36px rgba(8, 48, 64, .45);
  font: 400 clamp(2rem, 1.68rem + .6vw, 2.56rem) / 1.2 var(--serif); color: var(--text);
  transform: rotate(var(--tilt, 0deg)); transition: transform .8s var(--ease-out), box-shadow .6s;
}
.note:nth-child(3n+1) { --tilt: -.8deg; } .note:nth-child(3n+2) { --tilt: .6deg; } .note:nth-child(3n) { --tilt: -.4deg; }
.note:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 165, 228, .3), 0 34px 60px -36px rgba(0, 79, 109, .55); }
.note__num { font: 600 1.3rem/1 var(--sans); letter-spacing: .04em; color: var(--blue-700); }
.note::after { content: ""; position: absolute; right: 22px; bottom: 20px; width: 40px; height: 30px; background: var(--sky-200); -webkit-mask: var(--i-note) center / contain no-repeat; mask: var(--i-note) center / contain no-repeat; transition: background .5s; }
.note:hover::after { background: var(--blue); }

.statement {
  position: relative; overflow: hidden; padding: clamp(110px, 13vw, 200px) 0;
  background: radial-gradient(60% 70% at 50% 50%, #0b3f55 0%, var(--ink) 72%); color: #fff; text-align: center;
}
.statement__inner { display: grid; justify-items: center; gap: 30px; }
.statement__text { max-width: 17em; font: 400 clamp(3.84rem, 1.6rem + 4.4vw, 8.8rem) / 1.04 var(--serif); letter-spacing: -.024em; text-wrap: balance; }
.statement__text .hw { opacity: 1; }
.js .statement__text .hw { opacity: .2; }
.statement .spark { color: var(--blue); }
.statement .spark--1 { top: 18%; left: 12%; } .statement .spark--2 { top: 26%; right: 10%; } .statement .spark--3 { bottom: 18%; left: 22%; top: auto; }

.crisis { background: #fff; }
.crisis__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 4vw, 64px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, #fff7f3 0%, #fff 60%); box-shadow: 0 0 0 1px rgba(179, 62, 80, .16), 0 50px 90px -70px rgba(120, 30, 40, .4);
}
.crisis__icon { display: grid; place-items: center; width: clamp(64px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%; background: #B33E50; color: #fff; font: 400 clamp(3.6rem, 3rem + 1vw, 4.8rem) / 1 var(--serif); }
.crisis__body { display: grid; gap: 18px; }
.crisis__strong { font: 500 clamp(1.84rem, 1.6rem + .45vw, 2.24rem) / 1.5 var(--sans); color: var(--text); max-width: 34em; }
.crisis__muted { font-size: 1.7rem; line-height: 1.6; color: var(--text-soft); max-width: 40em; }
.nums { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cnum {
  display: inline-grid; gap: 4px; padding: 16px 22px; border-radius: var(--r-md); text-decoration: none;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text);
  transition: background .4s, box-shadow .4s, transform .6s var(--ease-out);
}
.cnum b { font: 400 clamp(2.4rem, 2rem + .8vw, 3.2rem) / 1 var(--serif); color: #8E2F3F; font-variant-numeric: tabular-nums; }
.cnum span { font: 600 1.3rem/1.25 var(--sans); color: var(--text-soft); }
.cnum:hover { background: #fff2ee; box-shadow: inset 0 0 0 1px rgba(179, 62, 80, .4); transform: translateY(-3px); }

/* =========================================================================
   S ČÍM POMÁHÁME
   ========================================================================= */
.tgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 72px); }
.tcard {
  position: relative; display: grid; grid-template-columns: clamp(76px, 7vw, 104px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start;
  padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--line);
}
.tgrid .tcard:nth-child(-n+2) { border-top: 1px solid var(--line); }
.tcard__thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; background: var(--sky-50); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .14); transition: background .6s var(--ease-out), transform .8s var(--ease-out); }
.tcard__thumb .ill { position: absolute; inset: 14%; background: linear-gradient(170deg, var(--ink), var(--blue-700)); transition: transform .8s var(--ease-out); }
.tcard:hover .tcard__thumb { background: var(--sky-100); transform: scale(1.06); }
.tcard:hover .tcard__thumb .ill { transform: rotate(-6deg) scale(1.04); }
.tcard__num { display: block; margin-bottom: 8px; font: 500 1.3rem/1 var(--sans); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.tcard__title { font: 400 clamp(2.24rem, 1.6rem + 1.1vw, 3.2rem) / 1.12 var(--serif); letter-spacing: -.012em; color: var(--text); }
.tcard__text { margin-top: 10px; font-size: 1.65rem; line-height: 1.58; color: var(--text-soft); max-width: 32em; }

/* kotvy z jiných stránek (/s-cim-pomahame/#tema-…, /kontakt/#formular): cíl nezajede pod pevnou hlavičku */
:where(#brx-content) [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.tcard:target .tcard__thumb { background: var(--sky-100); box-shadow: inset 0 0 0 2px var(--blue); }

.orbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.orbit__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(0, 106, 148, .3); }
.orbit__ring--1 { inset: 20%; }
.orbit__ring--2 { inset: 3%; border-style: solid; border-color: var(--line); }
.orbit__core {
  position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sky-100) 60%, var(--sky-200) 100%);
  box-shadow: 0 30px 60px -30px rgba(0, 79, 109, .55), inset 0 0 0 1px rgba(0, 165, 228, .25);
  font: italic 400 clamp(2.4rem, 1.8rem + 1.2vw, 3.6rem) / 1 var(--serif); color: var(--petrol);
}
.orbit__spin { position: absolute; inset: 0; animation: spin 70s linear infinite; }
.orbit__spin--2 { animation-duration: 110s; animation-direction: reverse; }
.orbit__node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.orbit__pin { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: spin 70s linear infinite reverse; }
.orbit__spin--2 .orbit__pin { animation: spin 110s linear infinite; }
.orbit__lbl {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-block; padding: 10px 16px; border-radius: 99px; white-space: nowrap;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -18px rgba(8, 48, 64, .45);
  font: 600 1.45rem/1 var(--sans); color: var(--text);
}
/* poloměry v cqw = přesně na kruzích (vnitřní 30 %, vnější 47 % šířky) */
.orbit__node--1 { --a: 20deg; --r: 30cqw; }
.orbit__node--2 { --a: 200deg; --r: 30cqw; }
.orbit__node--3 { --a: 110deg; --r: 47cqw; }
.orbit__node--4 { --a: 290deg; --r: 47cqw; }

.relay { background: var(--paper); padding-bottom: 0; }
.relay .perex { max-width: 44em; }
.relay__quote { margin: clamp(48px, 6vw, 88px) auto 0; max-width: 20em; text-align: center; font: italic 400 clamp(2.88rem, 1.92rem + 2vw, 5.12rem) / 1.14 var(--serif); letter-spacing: -.016em; color: var(--ink); text-wrap: balance; }
.relay .marquee { margin-top: clamp(56px, 7vw, 110px); }

/* =========================================================================
   O NÁS
   ========================================================================= */
.values {
  position: relative; overflow: hidden; padding: var(--sec-pad) 0;
  background: radial-gradient(70% 60% at 16% 10%, rgba(0, 165, 228, .16) 0%, rgba(0, 165, 228, 0) 70%), var(--ink); color: var(--inverse);
}
.values__head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 72px); }
.vlist { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; min-height: 420px; }
.vpanel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: clamp(24px, 2.6vw, 40px); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(215, 240, 251, .12);
  transition: flex-grow .9s var(--ease-out), background .6s, box-shadow .6s; cursor: default;
}
.vpanel.is-on { flex-grow: 1.7; background: linear-gradient(160deg, rgba(0, 165, 228, .22), rgba(0, 106, 148, .08)); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .45); }
.vpanel__num { font: 600 1.3rem/1 var(--sans); letter-spacing: .04em; color: var(--sky-200); }
.vpanel__title { font: 400 clamp(3.04rem, 1.92rem + 2vw, 4.8rem) / 1 var(--serif); overflow-wrap: anywhere; letter-spacing: -.02em; color: #fff; }
.vpanel__text { font-size: clamp(1.7rem, 1.6rem + .25vw, 1.92rem); line-height: 1.55; color: var(--inverse-soft); max-width: 22em; }
.js .vpanel__text { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.js .vpanel.is-on .vpanel__text { opacity: 1; transform: none; transition-delay: .18s; }

.org { background: #fff; }
.org__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.org__art { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; }
.org__art::before { content: ""; position: absolute; inset: 4%; border-radius: 46% 54% 52% 48% / 50% 42% 58% 50%; background: var(--sky-50); animation: blob 16s ease-in-out infinite alternate; }
.org__art .ill { position: absolute; inset: 10% 16%; background: linear-gradient(170deg, var(--ink), var(--blue-700)); }
.org__copy { display: grid; gap: 22px; justify-items: start; }
.org__copy .bigtext { margin: 0; }

/* =========================================================================
   KONTAKT
   ========================================================================= */
.kform { background: var(--paper); }
.kform__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.kform__copy { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 22px; justify-items: start; }
.kwarn {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .25);
  font-size: 1.55rem; line-height: 1.55; color: var(--text);
}
.kwarn::before { content: "!"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-100); color: var(--petrol); font: 700 1.6rem/1 var(--sans); }
.kform__note { font-size: 1.5rem; color: var(--text-soft); }
.kform__card { padding: clamp(24px, 3.4vw, 52px); border-radius: var(--r-xl); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 60px 100px -70px rgba(8, 48, 64, .5); }

/* formulář Bricks (prvek Form) – styly míří na jeho skutečné značky, přebíjí theme styles bety */
.kform .brxe-form, .news .brxe-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin: 0; max-width: none; width: 100%; }
.kform .brxe-form .form-group { display: grid; gap: 8px; width: auto; margin: 0; padding: 0; line-height: 1.4; }
/* Bricks: textarea {line-height: inherit !important} ve vrstvě → řádkování dědí z .form-group */
.kform .brxe-form label, .kform .brxe-form .label { margin: 0; letter-spacing: normal; text-transform: none; }
.kform .brxe-form .bricks-button, .news .brxe-form .bricks-button { letter-spacing: normal; text-transform: none; }
.news .brxe-form .form-group { line-height: 1.4; }
.kform .brxe-form .form-group:nth-child(n+7) { grid-column: 1 / -1; }
.kform .brxe-form .form-group label, .kform .brxe-form .form-group .label { font: 600 1.4rem/1.3 var(--sans); color: var(--text); }
.kform .brxe-form .form-group input:not([type=checkbox]), .kform .brxe-form .form-group select, .kform .brxe-form .form-group textarea,
.news .brxe-form .form-group input {
  width: 100%; margin: 0; padding: 15px 18px; border: 0; border-radius: 14px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 400 1.6rem/1.4 var(--sans); color: var(--text);
  transition: box-shadow .35s, background .35s;
}
.kform .brxe-form .form-group textarea { min-height: 170px; resize: vertical; }
.kform .brxe-form .form-group select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004F6D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px; }
.kform .brxe-form .form-group input:focus, .kform .brxe-form .form-group select:focus, .kform .brxe-form .form-group textarea:focus,
.news .brxe-form .form-group input:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.kform .brxe-form .form-group input::placeholder, .kform .brxe-form .form-group textarea::placeholder, .news .brxe-form .form-group input::placeholder { color: var(--text-mute); }
.kform .brxe-form .options-wrapper { list-style: none; margin: 0; padding: 0; }
.kform .brxe-form .options-wrapper li { display: flex; align-items: center; gap: 12px; }
.kform .brxe-form .options-wrapper input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; position: static; top: auto; line-height: normal; accent-color: var(--petrol); }
.kform .brxe-form .options-wrapper label { font: 400 1.5rem/1.4 var(--sans); }
.kform .brxe-form .form-group:has(input[type=checkbox]) > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kform .brxe-form .submit-button-wrapper, .news .brxe-form .submit-button-wrapper { grid-column: 1 / -1; justify-items: start; }
.kform .brxe-form .bricks-button, .news .brxe-form .bricks-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .8em; width: auto;
  padding: 1.15em 1.7em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--petrol); color: #fff; font: 600 1.6rem/1.1 var(--sans);
  box-shadow: 0 14px 30px -14px rgba(0, 79, 109, .6); transition: background .4s, box-shadow .4s;
}
.kform .brxe-form .bricks-button::after, .news .brxe-form .bricks-button::after { content: ""; flex: none; width: 2.1em; height: 2.1em; margin: -.5em -.8em -.5em 0; border-radius: 50%; background: rgba(255, 255, 255, .14) var(--i-arrow-white) center / 1.05em no-repeat; }
.kform .brxe-form .bricks-button:hover, .news .brxe-form .bricks-button:hover { background: var(--blue-700); }
.kform .brxe-form .bricks-button .loading, .news .brxe-form .bricks-button .loading { display: none; }

.direct { background: #fff; }
.direct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.dtile {
  position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start;
  padding: clamp(28px, 3.6vw, 56px); border-radius: var(--r-xl);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.dtile__title { font: 600 1.4rem/1 var(--sans); letter-spacing: .02em; color: var(--petrol); }
.dtile__text { font-size: 1.65rem; line-height: 1.55; color: var(--text-soft); max-width: 26em; }
.dtile__link {
  margin-top: clamp(18px, 3vw, 44px); justify-self: start;
  font: 400 clamp(3.2rem, 2rem + 2.4vw, 5.6rem) / 1 var(--serif); letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 2px no-repeat; transition: background-size .7s var(--ease-out), color .4s;
}
.dtile:hover .dtile__link { background-size: 100% 2px; color: var(--petrol); }
.dtile::after { content: ""; position: absolute; right: clamp(22px, 3vw, 40px); top: clamp(22px, 3vw, 40px); width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--i-arrow) center / 20px no-repeat; transform: rotate(-45deg); transition: transform .7s var(--ease-out), background-color .5s, box-shadow .5s; }
.dtile:hover::after { transform: rotate(0deg); background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }

.appcta { background: #fff; padding-top: 0; }
.appcta__tile {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center;
  padding: clamp(32px, 4.6vw, 76px); border-radius: var(--r-xl);
  background: radial-gradient(70% 90% at 90% 10%, rgba(0, 165, 228, .3) 0%, rgba(0, 165, 228, 0) 70%), var(--ink); color: var(--inverse);
}
.appcta__copy { display: grid; gap: 18px; justify-items: start; }
.appcta__title { font: 400 clamp(2.88rem, 1.92rem + 2vw, 5.12rem) / 1.05 var(--serif); letter-spacing: -.018em; color: #fff; }
.appcta__text { font-size: 1.7rem; line-height: 1.55; color: var(--inverse-soft); max-width: 28em; }
.appcta__art { position: relative; width: 100%; max-width: 300px; aspect-ratio: 537 / 560; justify-self: end; }
.appcta__art .ill { width: 100%; height: 100%; background: linear-gradient(170deg, #fff, var(--sky-200)); }
.btn--light { --bg: #fff; --fg: var(--ink); --fill: var(--sky-100); }
.btn--light.btn--arrow::after { background-color: rgba(8, 48, 64, .08); background-image: var(--i-arrow); }

.operator { background: var(--paper); }
.operator__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.operator__copy { display: grid; gap: 22px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.facts > div { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.facts dt { font: 600 1.3rem/1.2 var(--sans); letter-spacing: .02em; color: var(--text-mute); }
.facts dd { margin: 8px 0 0; font: 400 clamp(1.92rem, 1.6rem + .55vw, 2.4rem) / 1.25 var(--serif); color: var(--text); }

/* =========================================================================
   ČLÁNKY A ROZHOVORY (výpis, archiv rubriky, detail)
   ========================================================================= */
.feat { background: #fff; padding-top: clamp(24px, 3vw, 48px); }
.feat__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.feat__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--sky-100); box-shadow: 0 60px 100px -70px rgba(8, 48, 64, .6); }
.feat__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.feat__media:hover .feat__img { transform: scale(1.04); }
.feat__badge { position: absolute; left: 20px; top: 20px; z-index: 2; padding: 9px 15px; border-radius: 99px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 1.3rem/1 var(--sans); color: var(--petrol); }
.feat__copy { display: grid; gap: 18px; justify-items: start; }
.feat__title { font: 400 clamp(3.04rem, 1.92rem + 2.2vw, 5.6rem) / 1.04 var(--serif); letter-spacing: -.02em; }
.feat__title a { color: var(--text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .7s var(--ease-out); }
.feat__title a:hover { background-size: 100% 2px; }
.feat__ex { font-size: 1.7rem; line-height: 1.6; color: var(--text-soft); }
.meta { font: 600 1.3rem/1.3 var(--sans); letter-spacing: .01em; color: var(--petrol); }

.blog { background: var(--paper); }
.blog--tight { padding-top: clamp(24px, 3vw, 48px); }
.blog__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat { display: inline-flex; align-items: center; padding: .78em 1.15em; border-radius: 99px; font: 600 1.4rem/1 var(--sans); color: var(--petrol); text-decoration: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, color .4s, box-shadow .4s; }
.cat:hover { background: var(--sky-100); box-shadow: inset 0 0 0 1px transparent; }
.cat.is-current { background: var(--petrol); color: #fff; box-shadow: none; }
.bgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.bcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .6s, transform .8s var(--ease-out); }
.bcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 165, 228, .25), 0 40px 70px -46px rgba(8, 48, 64, .55); }
.bcard__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sky-100); }
.bcard__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.bcard:hover .bcard__img { transform: scale(1.05); }
.bcard__body { display: grid; gap: 12px; align-content: start; padding: 22px 24px 26px; }
.bcard__title { font: 400 clamp(2.08rem, 1.68rem + .7vw, 2.64rem) / 1.16 var(--serif); letter-spacing: -.01em; }
.bcard__title a { color: var(--text); text-decoration: none; }
.bcard__title a::after { content: ""; position: absolute; inset: 0; }
.bcard__ex { font-size: 1.5rem; line-height: 1.55; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__more { margin-top: 4px; display: inline-flex; align-items: center; gap: .5em; font: 600 1.4rem/1 var(--sans); color: var(--petrol); }
.bcard__more::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform .5s var(--ease-out); }
.bcard:hover .bcard__more::after { transform: translateX(4px); }
.pager { margin-top: clamp(40px, 5vw, 64px); }
/* HTML je z prvku Pagination v Bricks: .bricks-pagination > ul.page-numbers > li > a/span.page-numbers */
.pager ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager li { margin: 0; padding: 0; }
.pager li > .page-numbers { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; border-radius: 99px; font: 600 1.5rem/1 var(--sans); color: var(--petrol); text-decoration: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pager li > .current { background: var(--petrol); color: #fff; box-shadow: none; }
.pager li > .dots { background: none; box-shadow: none; min-width: 24px; padding: 0; }
.pager li > a.page-numbers:hover { background: var(--sky-100); }

.news { background: var(--paper); padding-top: 0; }
.news__tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 64px); border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--sky-100) 0%, var(--sky-50) 60%, #fff 100%); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .18);
}
.news__art { width: clamp(120px, 12vw, 190px); aspect-ratio: 600 / 470; }
.news__art .ill { width: 100%; height: 100%; background: linear-gradient(170deg, var(--ink), var(--blue-700)); }
.news__copy { display: grid; gap: 12px; }
.news__title { font: 400 clamp(2.8rem, 1.92rem + 1.8vw, 4.48rem) / 1.06 var(--serif); letter-spacing: -.016em; color: var(--ink); }
.news__text { font-size: 1.65rem; line-height: 1.55; color: var(--text-soft); }
.news .brxe-form { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.news .brxe-form .form-group { margin: 0; padding: 0; width: auto; }
.news .brxe-form .form-group input { background: #fff; }
.news .brxe-form .submit-button-wrapper { grid-column: auto; }

/* detail článku */
.article { background: #fff; }
.ahead { padding: calc(var(--header-h) + clamp(32px, 6vh, 80px)) 0 0; background: linear-gradient(180deg, var(--paper) 0%, #fff 100%); }
.ahead__inner { max-width: 980px; display: grid; gap: 20px; justify-items: start; }
.ahead__title { font: 400 clamp(3.68rem, 1.76rem + 3.8vw, 7.68rem) / 1.02 var(--serif); letter-spacing: -.024em; color: var(--text); text-wrap: balance; }
.ahero { margin-top: clamp(32px, 4vw, 60px); }
.ahero__media { position: relative; overflow: hidden; aspect-ratio: 16 / 8.2; border-radius: var(--r-xl); background: var(--sky-100); }
.ahero__img { position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; }
.prose { max-width: 720px; margin: 0 auto; padding: clamp(48px, 6vw, 96px) 0 0; font-size: clamp(1.76rem, 1.68rem + .2vw, 1.92rem); line-height: 1.72; color: var(--text); }
.prose > * + * { margin-top: 1.05em; }
.article .prose > h2:first-child { font: 400 clamp(2.4rem, 1.92rem + .9vw, 3.2rem) / 1.35 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.prose h2 { margin-top: 1.8em; font: 400 clamp(2.8rem, 2.08rem + 1.3vw, 4rem) / 1.14 var(--serif); letter-spacing: -.016em; color: var(--text); }
.prose h3 { margin-top: 1.9em; font: 400 clamp(2.24rem, 1.84rem + .7vw, 2.88rem) / 1.2 var(--serif); color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--blue-700); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin: 2em 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 1.65rem; line-height: 1.65; color: var(--text-soft); }
.prose blockquote strong, .prose blockquote b { color: var(--text); }
.prose blockquote > * + * { margin-top: .7em; }
.prose strong { font-weight: 600; }
/* :where(:not(body)) – WordPress dává archivu autora třídu body.author (zadání 08, nález Jana 3. 10.); specificita beze změny */
.author:where(:not(body)) { max-width: 720px; margin: clamp(48px, 6vw, 80px) auto 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--sky-50), #fff 70%); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .2); }
.author:where(:not(body)):not(:has(> .author__photo)) { grid-template-columns: minmax(0, 1fr); }
.author__photo img { width: 100%; height: 100%; object-fit: cover; }
.author__photo { display: grid; place-items: center; width: 84px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sky-100); font: 400 3rem/1 var(--serif); color: var(--petrol); }
.author__name { font: 400 clamp(2.24rem, 1.84rem + .7vw, 2.88rem) / 1.1 var(--serif); color: var(--text); }
.author__role { margin-top: 4px; font: 600 1.35rem/1.3 var(--sans); color: var(--petrol); }
.author__bio { margin-top: 10px; font-size: 1.55rem; line-height: 1.55; color: var(--text-soft); }
.related { background: var(--paper); margin-top: clamp(72px, 9vw, 140px); }

/* právní stránky */
.legal { background: #fff; padding-top: 0; }
.legal .prose { padding-top: clamp(24px, 3vw, 48px); }
.legal__todo { padding: 22px 26px; border-radius: var(--r-md); background: var(--sky-50); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .25); font-size: 1.55rem; line-height: 1.55; color: var(--petrol); }

/* =========================================================================
   PODSTRÁNKY II — responzivita
   ========================================================================= */
@media (max-width: 1023px) {
  .split__grid { grid-template-columns: 1fr; gap: 32px; }
  .split__side { position: relative; top: 0; }
  .glist--2col { grid-template-columns: 1fr; }
  .glist--2col .grow:nth-child(2) { border-top: 0; }
  .after__grid { grid-template-columns: 1fr; }
  .guides__head { grid-template-columns: 1fr; }
  .guides__art { justify-self: start; width: 150px; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crisis__card { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: 1fr; }
  .tgrid .tcard:nth-child(2) { border-top: 0; }
  .orbit { max-width: 420px; margin-top: 12px; }
  .vlist { flex-direction: column; min-height: 0; }
  .vpanel, .vpanel.is-on { flex: none; }
  .js .vpanel__text { opacity: 1; transform: none; }
  .org__grid { grid-template-columns: 1fr; }
  .org__art { max-width: 340px; }
  .kform__grid { grid-template-columns: 1fr; }
  .kform__copy { position: relative; top: 0; }
  .direct__grid { grid-template-columns: 1fr; }
  .appcta__tile { grid-template-columns: 1fr; }
  .appcta__art { justify-self: start; max-width: 200px; order: -1; }
  .operator__grid { grid-template-columns: 1fr; }
  .feat__grid { grid-template-columns: 1fr; }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news__tile { grid-template-columns: 1fr; }
  .ahero__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .notes { grid-template-columns: 1fr; }
  .note { min-height: 0; }
  .tcard { grid-template-columns: 64px minmax(0, 1fr); }
  .orbit__lbl { font-size: 1.3rem; padding: 8px 12px; }
  .kform .brxe-form { grid-template-columns: 1fr; }
  .kform .brxe-form .bricks-button { width: 100%; justify-content: space-between; }
  .dtile__link { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 3.6rem); }
  .facts { grid-template-columns: 1fr; }
  .facts > div:nth-child(odd) { border-right: 0; }
  .facts > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .bgrid { grid-template-columns: 1fr; }
  .news .brxe-form { grid-template-columns: 1fr; }
  .news .brxe-form .bricks-button { width: 100%; justify-content: space-between; }
  .author:where(:not(body)) { grid-template-columns: 1fr; }
}

/* =========================================================================
   PODSTRÁNKY III (zadání 08): 404, vyhledávání, archiv data a autora
   + drobné opravy z revize 2. 10.
   ========================================================================= */
:where(.screen-reader-text) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* pole hledání = prvek Search z Bricks (form.bricks-search-form > input[name=s]) */
.sform { max-width: 520px; margin-top: clamp(24px, 3.4vh, 36px); }
.sform .bricks-search-form { position: relative; display: block; margin: 0; }
.sform input[type=search] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 60px; margin: 0;
  padding: 0 22px 0 56px; border: 0; border-radius: 99px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 14px 34px -22px rgba(8, 48, 64, .45);
  font: 500 1.7rem/1 var(--sans); color: var(--text); outline: none; transition: box-shadow .35s var(--ease-out);
}
.sform input[type=search]::placeholder { color: var(--text-mute); opacity: 1; }
.sform input[type=search]:focus { box-shadow: inset 0 0 0 2px var(--blue), 0 14px 34px -22px rgba(8, 48, 64, .45); }
.sform input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.sform .bricks-search-form::before {
  content: ""; position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none;
  background: var(--petrol);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 404 */
.e404 .phero__ctas { margin-top: 18px; }
.pnav--labelled { align-items: center; }
.pnav__label { font: 600 1.3rem/1 var(--sans); letter-spacing: .02em; color: var(--text-mute); margin-right: 6px; }

/* výsledky vyhledávání */
.sresults { background: #fff; padding-top: clamp(24px, 3vw, 48px); }
.sres { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.sres__item { position: relative; padding: clamp(22px, 2.6vw, 32px) 56px clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); transition: background .4s; }
.sres__item::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 22px; height: 22px; transform: translate(-8px, -50%); opacity: 0;
  background: var(--petrol); -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
  transition: transform .5s var(--ease-out), opacity .4s;
}
.sres__item:hover::after, .sres__item:focus-within::after { transform: translate(0, -50%); opacity: 1; }
.sres__item .meta { margin-bottom: 8px; }
.sres__title { font: 400 clamp(2.24rem, 1.76rem + .8vw, 2.96rem) / 1.16 var(--serif); letter-spacing: -.01em; }
.sres__title a { color: var(--text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.sres__title a::before { content: ""; position: absolute; inset: 0; }
.sres__item:hover .sres__title a { background-size: 100% 1px; }
.sres__ex { margin-top: 10px; font-size: 1.6rem; line-height: 1.58; color: var(--text-soft); max-width: 46em; }
.sresults .pager { max-width: 860px; }
.sresults .pager ul.page-numbers { justify-content: flex-start; }

/* vyhledávání bez výsledků (obsah „bez výsledků“ smyčky) */
/* Bricks ho vypíše uvnitř seznamu: ol.sres > li.bricks-posts-nothing-found > .sempty (zadání 08, Query::get_no_results_content) */
.sres:has(> .bricks-posts-nothing-found) { border-top: 0; }
.sempty { max-width: 640px; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--sky-50), #fff 70%); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .2); }
.sempty__title { font: 400 clamp(2.8rem, 2rem + 1.4vw, 4rem) / 1.1 var(--serif); letter-spacing: -.015em; color: var(--text); }
.sempty__text { margin-top: 12px; font-size: 1.7rem; line-height: 1.6; color: var(--text-soft); }
.sempty__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* stránkování s jedinou stránkou: Bricks nevypíše nic, v návrhu prázdný obal */
.pager:empty { display: none; }

/* právní stránky: dokud není text, Post Content nevypíše nic → sekci schovat (bílý pruh pod úvodem) */
.legal:not(:has(.prose, .brxe-post-content)) { display: none; }

@media (max-width: 1023px) {
  /* výsledky hledání mají být na mobilu hned vidět → bez velké ilustrace */
  .phero--search .phero__art { display: none; }
}
@media (max-width: 640px) {
  .sform input[type=search] { height: 54px; font-size: 1.6rem; }
  .e404 .phero__art { max-width: 240px; }
  .sres__item { padding-right: 0; }
  .sres__item::after { display: none; }
  .sempty__ctas .btn { width: 100%; justify-content: space-between; }
  .sempty__ctas .btn--ghost { justify-content: center; }
  .pnav__label { display: none; }
  /* oběžná dráha: popisky vnější dráhy se na mobilu nesmí oříznout o okraj */
  .orbit__ring--2 { inset: 10%; }
  .orbit__node--3, .orbit__node--4 { --r: 40cqw; }
}

/* ilustrace se načítají až u viewportu (lazyIll v app.js); když se JS nenačte (třída js zmizí), hned */
html.js .ill:not(.ill-in):not(.ill--phero):not(.ill--hero) { background: none; -webkit-mask: none; mask: none; }

/* ---------------------------------------------------------------------
   Zadání 10: rozcestník přihlášení /prihlaseni/ (přechodné období, nová × původní aplikace)
   --------------------------------------------------------------------- */
.phero--gate { padding-bottom: clamp(56px, 6vw, 104px); }
.gate__intro { max-width: 860px; }
.gate__intro .phero__title { margin-bottom: .32em; }
.gate { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 28px); margin-top: clamp(32px, 4.2vw, 60px); }
.gate__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: clamp(320px, 30vw, 420px); padding: clamp(28px, 3.4vw, 52px); border-radius: var(--r-xl);
}
.gate__card--new {
  color: var(--inverse);
  background: radial-gradient(70% 90% at 92% 8%, rgba(0, 165, 228, .32) 0%, rgba(0, 165, 228, 0) 70%), var(--ink);
  box-shadow: 0 40px 80px -48px rgba(5, 35, 49, .7);
}
.gate__card--old { background: linear-gradient(160deg, var(--sky-50), #fff 70%); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .2); }
.gate__body { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; }
.gate__card--new .gate__body { max-width: 30em; padding-right: clamp(0px, 14%, 180px); }
.gate__kicker { font-size: 1.3rem; }
.gate__title { font: 400 clamp(2.8rem, 1.9rem + 1.5vw, 4.32rem) / 1.06 var(--serif); letter-spacing: -.016em; color: var(--text); text-wrap: balance; }
.gate__card--new .gate__title { color: #fff; }
.gate__text { font-size: 1.7rem; line-height: 1.55; color: var(--text-soft); max-width: 28em; }
.gate__card--new .gate__text { color: var(--inverse-soft); }
.gate__foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.gate__url { font: 600 1.4rem/1 var(--sans); letter-spacing: .01em; color: var(--text-mute); }
.gate__card--new .gate__url { color: var(--sky-200); opacity: .75; }
.gate__art { position: absolute; z-index: 1; right: clamp(-12px, -1vw, 0px); bottom: -7%; width: 30%; max-width: 230px; aspect-ratio: 537 / 560; pointer-events: none; }
.gate__art .ill { width: 100%; height: 100%; background: linear-gradient(170deg, #fff, var(--sky-200)); opacity: .9; }
.btn--ghost.btn--arrow::after { background-color: rgba(8, 48, 64, .06); background-image: var(--i-arrow); }
.btn--ghost.btn--arrow:hover::after { background-color: rgba(8, 48, 64, .1); }
.gate__help { position: relative; z-index: 2; margin-top: clamp(20px, 2.4vw, 32px); font-size: 1.5rem; line-height: 1.6; color: var(--text-soft); }
.gate__help a { color: var(--petrol); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.gate__help a:hover { color: var(--blue-700); }
@media (max-width: 1023px) {
  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate__card { min-height: 0; }
  .gate__art { width: 26%; max-width: 190px; }
}
@media (max-width: 640px) {
  .gate__card { gap: 26px; border-radius: var(--r-lg); }
  .gate__card--new .gate__body { padding-right: 0; }
  .gate__art { display: none; }
  .gate__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .gate__foot .btn { justify-content: space-between; }
  .gate__url { text-align: center; }
}

/* Zadání 10: prázdné hledání (/?s= bez výrazu) – úvod bez výsledků, jen pole a „Kam dál“ */
/* „Kam dál“ je v šabloně vyhledávání jen v prázdném stavu (podmínka prvku), sekce v Bricks třídu phero--search-empty nemá */
.phero--search > .pnav { margin-top: clamp(28px, 4vw, 56px); }

/* Zadání 11: poznámka pod newsletterem */
.news__note { font-size: 1.4rem; line-height: 1.5; color: var(--text-mute); max-width: 32em; }
.news__note a { color: var(--petrol); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
/* Zadání 11: Turnstile („jen když je potřeba“) a zpráva po odeslání přes celou šířku formuláře, obojí pod tlačítkem.
   Bricks vypisuje .form-group.captcha před tlačítkem (jen když jsou klíče Turnstile) a .message připojí na konec formuláře. */
.kform .brxe-form .captcha, .news .brxe-form .captcha, .kform .brxe-form .message, .news .brxe-form .message { grid-column: 1 / -1; }
.kform .brxe-form .captcha, .news .brxe-form .captcha { order: 1; min-width: 0; }   /* widget 300 px nesmí rozšířit sloupec na mobilu */
.kform .brxe-form .message, .news .brxe-form .message { order: 2; border-radius: 14px; font: 400 1.5rem/1.5 var(--sans); }
.kform .brxe-form .message .text, .news .brxe-form .message .text { padding: 14px 18px; }

/* ---------------------------------------------------------------------
   Zadání 12: stránka školy pro rezervaci (typ lk_rezervace, šablona Bricks)
   Obsah karty = výstup [lehkost_rezervace nadpis="0" uvod="0"] (plugin lehkost-rezervace) + widget Fluent Booking.
   --------------------------------------------------------------------- */
.phero--rez .phero__title { font-size: clamp(3.4rem, 1.6rem + 2.8vw, 6.4rem); }
/* 15: úvod jen jedna věta, menším písmem (17 px) a s normálním řádkováním (dřív 17–21 px a 1.6 jako úvod podstránek) */
.phero--rez .phero__lead { max-width: 36em; font-size: 1.7rem; line-height: 1.55; }
.phero--rez .phero__art { max-width: 340px; }
.rez { background: #fff; padding-top: clamp(28px, 3.4vw, 56px); }
.rez__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.rez__aside { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 20px; }
.rez__title { font: 400 clamp(2.6rem, 1.9rem + 1.2vw, 3.6rem) / 1.1 var(--serif); letter-spacing: -.015em; color: var(--text); }
.rez__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: rez; }
.rez__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 18px 20px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px rgba(0, 165, 228, .14); }
.rez__step::before { counter-increment: rez; content: counter(rez); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--petrol); color: #fff; font: 600 1.5rem/1 var(--sans); }
.rez__step b { font: 600 1.6rem/1.3 var(--sans); color: var(--text); }
.rez__step span { font-size: 1.45rem; line-height: 1.5; color: var(--text-soft); }
/* 15: „e-mailem.“ v kroku 3 se na 390 px nesmí rozdělit na „e-“ / „mailem“ */
.rez__nobr { white-space: nowrap; }
.rez__card { position: relative; border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -60px rgba(8, 48, 64, .5); overflow: hidden; }

/* výstup pluginu */
.lk-rez {
  --fcal_primary_color: var(--petrol); --fcal_dark: var(--text); --fcal_gray: var(--text-mute);
  --fcal_slot_border: rgba(8, 48, 64, .14); --fcal_enable_day_bg: var(--sky-100); --fcal_thBG: var(--paper);
  --fcal_body_bg: var(--paper); --fcal_cal_bg: #fff; --fcal_input_bg: #fff; --fcal_date_radius: 50%;
  --date-picker-selected-background: var(--petrol); --date-picker-highlight-border: var(--petrol); --date-picker-selected-color: #fff;
}
.lk-rez__nadpis, .lk-rez__uvod { display: none; }
.lk-rez__hostitel { position: relative; margin: 0; padding: 22px clamp(20px, 3vw, 40px) 22px calc(clamp(20px, 3vw, 40px) + 46px); border-bottom: 1px solid var(--line); background: linear-gradient(160deg, var(--sky-50), #fff 80%); font-size: 1.6rem; line-height: 1.7; color: var(--text-soft); }
.lk-rez__hostitel::before { content: ""; position: absolute; left: clamp(20px, 3vw, 40px); top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004F6D' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c.9-3.6 3.6-5.6 7-5.6s6.1 2 7 5.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.lk-rez__hostitel strong { color: var(--text); font-weight: 600; }
.lk-rez__hodiny { color: var(--petrol); font-weight: 600; white-space: nowrap; }
/* 15: řádek z pluginu 1.0.2 „Jméno · K dispozici: …“ (jméno ve strong, „K dispozici“ ve span .lk-rez__dostupnost); se starým výstupem 1.0.1 nic nedělá */
.lk-rez__dostupnost::before { content: "·"; margin: 0 .5em; color: var(--text-mute); font-weight: 400; }
.lk-rez__overeni { padding: 0 clamp(20px, 3vw, 40px); }
/* oprava při nasazení 12: iframe Turnstilu je v uzavřeném shadow DOM, :has(iframe) ho nevidí, takže se box schovával vždycky
   a výzva „Potvrďte, že jste člověk“ (když ji Cloudflare chce) nebyla vidět. Box se schová, jen když Turnstile na stránce není. */
.lk-rez__overeni:not(:has(.lk-rez__turnstile, .lk-rez__stav:not(:empty))) { display: none; }
.lk-rez__stav:empty { display: none; }
.lk-rez__kalendar { padding: clamp(6px, 1vw, 14px); }
.lk-rez .fcal_wrap, .lk-rez .fcal_holder { background: transparent; }
.lk-rez .fcal_calendar_inner { width: 100%; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent; }
.lk-rez .fcal_on_lg .fcal_side, .lk-rez .fcal_on_md .fcal_side { width: 320px; min-width: 320px; }
.lk-rez .fcal_author { display: none; }
.lk-rez .fcal_slot_heading { font: 400 2.2rem/1.15 var(--serif) !important; letter-spacing: -.01em; color: var(--text); }
.lk-rez .fcal_icon_item { font-size: 1.45rem; color: var(--text-soft); }
.lk-rez .calendar-month-year h2 { font: 400 2.4rem/1.1 var(--serif) !important; color: var(--text); }
.lk-rez .fcal_spot { border-radius: 14px !important; }
.lk-rez .fcal_spot_name, .lk-rez .fcal_spot_time { font-size: 1.6rem !important; }
.lk-rez .fcal_on_md.fcal_day_selected .calendar .day, .lk-rez .fcal_on_md.fcal_day_selected .calendar .day-name { font-size: 1.4rem !important; }
.lk-rez .fcal_spot_confirm { margin: 2px 0; }
.lk-rez .fcal_spot_confirm, .lk-rez .fcal_btn, .lk-rez button[type=submit] { border-radius: 99px !important; font-family: var(--sans) !important; }
.lk-rez input, .lk-rez textarea, .lk-rez select { font-family: var(--sans); }
@media (max-width: 1179px) {
  /* kalendář potřebuje šířku: pod 1180 px kroky nad kartou (kontakt pod kroky od 15 není) */
  .rez__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rez__aside { display: contents; }
  .rez__title { order: 1; } .rez__steps { order: 2; } .rez__card { order: 3; }
}
@media (min-width: 641px) and (max-width: 1179px) {
  .rez__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .phero--rez .phero__art { display: none; }
}
@media (max-width: 640px) {
  .rez__steps { gap: 12px; }
  .rez__step { padding: 0; background: none; box-shadow: none; }
  .rez__card { border-radius: var(--r-lg); margin-inline: calc(var(--gutter) * -0.5); }
  .lk-rez__hostitel { font-size: 1.5rem; }
  /* 15: na mobilu jméno a „K dispozici: …“ pod sebou, bez tečky */
  .lk-rez__dostupnost { display: block; } .lk-rez__dostupnost::before { content: none; }
  .lk-rez .fcal_mobile .fcal_side { min-height: 0; padding-bottom: 8px; }
}

/* FB-REM START: Fluent Booking na stránce školy – rem ×1.6 (kořen webu 10 px). Generuje build/fb_rem.py, ručně neupravovat. */
.lk-rez .fcal_confirm_header .fcal_check_holder { width: 4.8rem; height: 4.8rem; }
.lk-rez .fcal_confirm_header h2 { font-size: 1.76rem; margin-top: 1.6rem; }
.lk-rez .fcal_confirmation .fcal_confirm_section_content { font-size: 1.4rem; }
.lk-rez .fcal_confirmation .fcal_confirm_section_title { line-height: 2.4rem; margin-bottom: 0.24rem; }
.lk-rez .fcal_confirmation .fcal_confirm_section h4 { font-size: 1.6rem; }
.lk-rez .fcal-dark-mode .fcal_slot_info .fcal_multi_location_title .fcal_duration_title, .lk-rez .fcal-dark-mode .fcal_slot_info .slot_timing .fcal_duration_title { margin-top: -0.32rem; }
.lk-rez .fcal-dark-mode .fcal_slot_info .slot_time_range span { margin-top: -0.32rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_label { font-size: 1.4rem; margin-bottom: 0.96rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group { font-size: 1.6rem; padding-left: 2.8rem; margin-bottom: 0.8rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input { width: 2rem; height: 2rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group .fcal_radio_icon { width: 2rem; height: 2rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group .fcal_radio_icon:before { width: 1rem; height: 1rem; left: 0.352rem; top: 0.352rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_wrap.fcal_input_multi_guests_wrap .fcal_multi_guest_input input { font-size: 1.6rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content select, .lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea, .lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content input { padding: 0.64rem 1.6rem; font-size: 1.6rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea { height: 6.4rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_custom_checkbox { padding-left: 2.8rem; font-size: 1.6rem; margin-bottom: 0.96rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_custom_checkbox.fcal_terms_conditions * { font-size: 1.6rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_custom_checkbox input:checked~.checkbox_mark:before { top: 0.8rem; left: 0.4rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_custom_checkbox .checkbox_mark { width: 2rem; height: 2rem; top: 0.08rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_file_wrap .fcal_input_btn { padding: 0.64rem 1.6rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_file_wrap .fcal_uploaded_files { margin-top: 0.8rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_file_wrap .fcal_uploaded_files .fcal_uploaded_file .fcal_delete_file { font-size: 1.92rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_validation_error { gap: 0.8rem; margin-top: 0.4rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_validation_error svg { height: 1.2rem; width: 1.2rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_help_text { font-size: 1.2rem; }
.lk-rez .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button { font-size: 1.4rem; padding: 0.96rem 1.92rem; }
.lk-rez .fcal_calendar_inner .fcal_skeleton .fcal_skeleton_item { margin-top: 2.4rem; }
.lk-rez .fcal_calendar_inner .fcal_side { padding: 3rem 3.6rem 2.4rem 2rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_author_wrapper { margin: 0.96rem 0; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_author_wrapper .fcal_author_list .fcal_author .fcal_author_name { margin-bottom: 0.4rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_author_wrapper .fcal_author_list .fcal_author .fcal_author_avatar img { margin-right: -0.4rem; width: 3.2rem; height: 3.2rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_author_wrapper .fcal_author_list .fcal_author .fcal_author_tooltip { font-size: 1.4rem; padding: 0.4rem 0.8rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_author_avatar img { width: 8rem; height: 8rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_author_name { font-size: 1.6rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_slot_heading { font-size: 2.4rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_slot_description p { margin: 1.6rem 0; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_slot_description ul { margin: 0 0 1.6rem; padding-left: 3.2rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_slot_description ol { margin: 0 0 1.6rem; padding-left: 3.2rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_requires_confirmation.fcal_icon_item { margin-bottom: 1.4rem; }
.lk-rez .fcal_calendar_inner .fcal_side .fcal_requires_confirmation span { margin-top: -0.32rem; }
.lk-rez .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header h3 { font-size: 2rem; }
.lk-rez .fcal_calendar_inner .fcal_date_wrapper .fcal_skeleton { margin: 6.4rem 3.2rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item { -moz-column-gap: 0.8rem; column-gap: 0.8rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item img { width: 1.6rem; height: 1.6rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item.fcal_icon_item { margin-bottom: 1rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item.fcal_icon_item svg { width: 1.6rem; height: 1.6rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item.fcal_icon_item .fcal_duration_title { margin-top: -0.32rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item.fcal_icon_item .fcal_multi_time { margin-left: 2.4rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item { font-size: 1.4rem; }
.lk-rez .fcal_calendar_inner .fcal_icon_item .fcal_multi_duration .fcal_duration { padding: 0.4rem 0.6rem; font-size: 1.2rem; border-radius: 0.4rem; }
.lk-rez .fcal_calendar_inner.fcal_on_md.fcal_day_selected .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name { font-size: 1.28rem; }
.lk-rez .fcal_calendar_inner.fcal_on_md.fcal_day_selected .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_confirm { font-size: 1rem; }
.lk-rez .fcal_calendar_inner.fcal_on_md.fcal_day_selected .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_confirm svg { width: 1.6rem; height: 1.6rem; }
.lk-rez .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name { gap: 0.4rem; font-size: 1.44rem; }
.lk-rez .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name .fcal_spot_remaining { font-size: 1.28rem; }
.lk-rez .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_confirm { font-size: 1.44rem; }
.lk-rez .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_date_info { font-size: 1.44rem; }
.lk-rez .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_picker_header_action { padding: 0.4rem; }
.lk-rez .fcal_multi_locations { margin-bottom: 1rem; }
.lk-rez .fcal_multi_locations .fcal_multi_location_title { gap: 0.6rem; font-size: 1.4rem; }
.lk-rez .fcal_multi_locations .fcal_multi_location_title svg { width: 1.6rem; }
.lk-rez .fcal_multi_locations .fcal_location_tooltip { border-radius: 0.8rem; font-size: 1.6rem; padding: 1rem 1.44rem; }
.lk-rez .fcal_multi_locations .fcal_location_tooltip .title { margin-bottom: 1rem; }
.lk-rez .fcal_multi_locations .fcal_location_tooltip li { font-size: 1.2rem; margin-bottom: 0.6rem; }
.lk-rez .fcal_multi_locations .fcal_location_tooltip li:not(.title) { padding-left: 1.44rem; }
.lk-rez .fcal_multi_locations .fcal_location_tooltip li .fcal_icon_item { margin-bottom: 0.6rem; }
.lk-rez .fcal_multi_locations .fcal_location_tooltip li .fcal_loc_text { font-size: 1.2rem; }
.lk-rez .svelte-select .selected-item { font-size: 1.6rem !important; }
.lk-rez .fcal_no_availability, .lk-rez .fcal_error_text { padding: 3.52rem; }
.lk-rez .fcal_no_availability h3, .lk-rez .fcal_error_text h3 { font-size: 1.6rem; }
.lk-rez .fcal_no_availability button, .lk-rez .fcal_error_text button { margin-top: 1.6rem; font-size: 1.4rem; line-height: 2rem; padding: 1rem 1.6rem; height: 3.6rem; }
.lk-rez .fcal_no_availability button svg, .lk-rez .fcal_error_text button svg { width: 1.6rem; height: 1.6rem; margin-left: 0.8rem; }
.lk-rez .fcal_no_availability button svg.fcal_prev_month, .lk-rez .fcal_error_text button svg.fcal_prev_month { margin-right: 0.8rem; }
.lk-rez .fcal_errors { margin-top: 1.2rem; padding: 1.2rem; gap: 1.2rem; }
.lk-rez .fcal_errors p { font-size: 1.4rem; margin: 1.2rem 0; }
.lk-rez .fcal_payment_items table tfoot .fcal_payment_total th { font-size: 1.6rem; }
.lk-rez .fcal_wrap .text-danger { font-size: 1.4rem; }
.lk-rez .calendar.svelte-jvr8qp { gap: 0.96rem; grid-template-columns: repeat(7, minmax(0, 4.8rem)); }
/* FB-REM END */