/* ==========================================================================
   Superpowered Professional by Aibility – web (OPUS5.5 extra)
   Design system: Aibility brand (cream + warm black, purple accent), Signika + Geist,
   product UI on soft color fields. No build step.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* surfaces (Aibility brand) */
  --paper: #FFFBF4;
  --paper-2: #F7F5F2;
  --paper-3: #EFEBE5;
  --card: #FFFFFF;
  --line: #E4E0DA;
  --line-soft: #EFECE5;

  /* ink */
  --ink: #1B1B1B;
  --ink-2: #494846;
  --ink-3: #6D6B69;
  --ink-inv: #FAF4EE;
  --inv-2: rgb(250 244 238 / 0.78);
  --inv-3: rgb(250 244 238 / 0.64);

  /* accents: purple = brand, pastels = supporting */
  --purple: #5938B7;
  --purple-hover: #4A2C9E;
  --purple-light: #A98DF6;
  --purple-deep: #201547;
  --apricot: var(--purple-light);
  --apricot-soft: #E0D4F7;
  --apricot-deep: var(--purple);
  --sage: #8CC98C;
  --sage-soft: #D4F0D4;
  --sage-deep: #2F6B3F;
  --navy: var(--purple-deep);
  --navy-soft: #D8EBFF;
  --peach: #FDE8D8;
  --blue-soft: #D8EBFF;
  --pink-soft: #F5D5E0;
  --yellow-soft: #FFF3D4;
  --night: #1B1B1B;
  --night-2: #262626;

  /* type */
  --font-display: "Signika", "Geist", sans-serif;
  --font-ui: "Geist", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --fs-display: clamp(2.6rem, 1.55rem + 4.2vw, 5.4rem);
  --fs-h1: clamp(2.35rem, 1.5rem + 3.3vw, 4.4rem);
  --fs-h2: clamp(1.95rem, 1.35rem + 2.25vw, 3.3rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem);
  --fs-lead: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.8rem;

  /* space (4pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 5vw + 48px, 144px);
  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 1240px;
  --maxw-text: 42rem;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgb(27 27 27 / 0.06), 0 2px 8px rgb(27 27 27 / 0.04);
  --shadow-2: 0 2px 6px rgb(27 27 27 / 0.06), 0 18px 40px -12px rgb(27 27 27 / 0.16);
  --shadow-3: 0 30px 80px -20px rgb(27 27 27 / 0.35), 0 8px 24px -8px rgb(27 27 27 / 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 720ms;

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--apricot-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 6px; }
.section--night, .footer, .cta-band:not(.cta-band--light), .plan--featured, .quote--dark, .pattern-btn[aria-selected="true"] { --focus: var(--ink-inv); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--ink-inv); padding: 10px 16px; border-radius: var(--r-pill);
  text-decoration: none; transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 4vw + 24px, 88px); }
.section--paper2 { background: var(--paper-2); }
.section--night { background: var(--night); color: var(--ink-inv); }
.section--night .muted, .section--night .lead { color: var(--inv-2); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }

/* ---------- Typography ---------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.02; font-weight: 400; letter-spacing: -0.03em; }
.h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.028em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.012em; }
.h4 { font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.display em, .h1 em, .h2 em { font-style: italic; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--apricot); box-shadow: 0 0 0 4px rgb(169 141 246 / 0.25); }
.kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.prose { max-width: var(--maxw-text); }
.prose p { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.section-head { display: grid; gap: var(--s-4); margin-bottom: clamp(40px, 4vw, 72px); max-width: 52rem; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: var(--s-6); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--purple); --btn-fg: #FFFFFF; --btn-bd: var(--purple);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; letter-spacing: 0;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), box-shadow var(--t-med) var(--ease-out), color var(--t-fast);
  white-space: nowrap;
}
.btn:hover { background: var(--purple-hover); border-color: var(--purple-hover); }
.btn:active { transform: scale(0.985); }
.btn .arrow { transition: transform var(--t-med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgb(27 27 27 / 0.22); }
.btn--ghost:hover { background: rgb(27 27 27 / 0.05); border-color: rgb(27 27 27 / 0.35); }
.btn--light { --btn-bg: var(--purple-light); --btn-fg: var(--purple-deep); --btn-bd: var(--purple-light); }
.btn--light:hover { background: #BBA5F8; border-color: #BBA5F8; }
.btn--ghost-light { --btn-bg: rgb(27 27 27 / 0.35); --btn-fg: var(--ink-inv); --btn-bd: oklch(1 0 0 / 0.5); }
.btn--ghost-light:hover { background: rgb(27 27 27 / 0.5); border-color: oklch(1 0 0 / 0.7); }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; line-height: 1.3;
}
.link-arrow .arrow { transition: transform var(--t-med) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

.cta-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font-size: var(--fs-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.cta-note span { display: inline-flex; align-items: center; gap: 6px; }
.cta-note span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.section--night .cta-note { color: var(--inv-3); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 251 244 / 0.82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), background-color var(--t-med);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: var(--s-5); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand__mark { width: 30px; height: 30px; }
.brand__text { display: grid; line-height: 1.05; }
.brand__name { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.015em; }
.brand__by { font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.01em; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none; }
.nav__links a {
  display: inline-flex; padding: 8px 12px; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--fs-sm); color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__links a:hover { background: rgb(27 27 27 / 0.05); color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); background: rgb(27 27 27 / 0.06); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__login { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: var(--r-pill); }
.nav__login:hover { color: var(--ink); background: rgb(27 27 27 / 0.05); }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; margin-left: auto; }
.nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast); }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--t-med) var(--ease-out); }
.nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu { display: none; }
@media (max-width: 1060px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle { display: inline-flex; }
  .mobile-menu {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out);
    border-top: 1px solid transparent;
  }
  .nav.is-open .mobile-menu { grid-template-rows: 1fr; border-top-color: var(--line); }
  .mobile-menu__inner { overflow: hidden; }
  .mobile-menu ul { list-style: none; padding: 12px var(--gutter) 8px; display: grid; }
  .mobile-menu li a { display: block; padding: 14px 0; font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .mobile-menu .cta-group { padding: 16px var(--gutter) 24px; }
  .mobile-menu .btn { flex: 1; }
}

/* ---------- Brand mark (SVG loop) ---------- */
.mark-seg { transition: opacity var(--t-med); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 5vw, 88px); padding-bottom: clamp(56px, 6vw, 104px); position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__copy { display: grid; gap: var(--s-5); align-content: start; }
.hero__copy .display { max-width: 11.5em; }
.hero__sub { font-size: var(--fs-lead); color: var(--ink-2); max-width: 33em; line-height: 1.55; text-wrap: pretty; }
.hero__visual { position: relative; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero--center .hero__copy { justify-items: center; text-align: center; }
.hero--center .display, .hero--center .h1 { margin-inline: auto; }
.hero--center .hero__sub { margin-inline: auto; }

/* Stage = color field photo + floating UI */
.stage {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 5 / 4.3; min-height: 420px;
  background: var(--paper-3) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(27 27 27 / 0.06);
  isolation: isolate;
}
.stage::after { /* grain */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.stage--wide { aspect-ratio: 16 / 8.6; min-height: 380px; }
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.6s var(--ease-out); }
.stage.is-in .stage__img { transform: scale(1); }
.stage__inner { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4%, 40px); }

/* ---------- Product UI mock: app window ---------- */
.window {
  width: min(100%, 520px); background: var(--card); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-3); border: 1px solid rgb(27 27 27 / 0.08);
  font-size: 0.875rem; line-height: 1.5; color: var(--ink);
}
.window__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: #FBF9F6; }
.window__dots { display: flex; gap: 6px; }
.window__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(27 27 27 / 0.14); display: block; }
.window__title { font-size: 0.78rem; color: var(--ink-3); font-weight: 500; margin-inline: auto; transform: translateX(-24px); }
.window__body { padding: 18px; display: grid; gap: 12px; }

/* chat */
.chat { display: grid; gap: 12px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 0.86rem; line-height: 1.5; }
.msg--me { justify-self: end; background: var(--paper-2); border-bottom-right-radius: 6px; }
.msg--ai { justify-self: start; display: grid; gap: 8px; padding: 0; max-width: 96%; }
.msg__who { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 600; color: var(--ink-2); }
.msg__who .av { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); display: grid; place-items: center; }
.msg__who .av svg { width: 13px; height: 13px; }
.msg__who .tag { font-weight: 500; color: var(--ink-3); }
.msg__text { font-size: 0.86rem; }
.coach-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #FBF9F6;
  display: grid; gap: 8px;
}
.coach-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coach-card__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--apricot-deep); }
.coach-card__time { font-size: 0.72rem; color: var(--ink-3); }
.coach-card__title { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em; }
.coach-steps { list-style: none; display: grid; gap: 6px; counter-reset: s; }
.coach-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 0.82rem; color: var(--ink-2); counter-increment: s; }
.coach-steps li::before { content: counter(s); width: 20px; height: 20px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-size: 0.68rem; font-weight: 600; color: var(--ink-2); }
.composer { display: flex; align-items: center; gap: 8px; margin-top: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 14px; color: var(--ink-3); font-size: 0.82rem; }
.composer__send { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.composer__send svg { width: 12px; height: 12px; }
.typing { display: inline-flex; gap: 4px; padding: 10px 14px; background: var(--paper-2); border-radius: 14px; justify-self: start; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: typing 1.2s infinite var(--ease-in-out); }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* floating chip */
.float-chip {
  position: absolute; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-2);
  border: 1px solid rgb(27 27 27 / 0.07); padding: 12px 14px; font-size: 0.8rem; display: grid; gap: 4px; min-width: 190px;
}
.float-chip__k { font-size: 0.68rem; color: var(--ink-3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.float-chip__v { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.float-chip__v small { font-weight: 500; color: var(--ink-3); font-size: 0.75rem; }

/* ---------- Report card mock ---------- */
.report { width: min(100%, 460px); background: var(--card); border-radius: 20px; box-shadow: var(--shadow-3); border: 1px solid rgb(27 27 27 / 0.08); overflow: hidden; font-size: 0.86rem; }
.report__top { padding: 18px 20px 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.report__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--ink-3); }
.report__level { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.report__level-name { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.05; }
.report__level-desc { font-size: 0.8rem; color: var(--ink-2); max-width: 22em; }
.score-ring { --v: 58; width: 74px; height: 74px; flex-shrink: 0; position: relative; }
.score-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 7; }
.score-ring .track { stroke: var(--paper-2); }
.score-ring .bar { stroke: var(--apricot); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: calc(201 - 201 * var(--v) / 100); transition: stroke-dashoffset 1.4s var(--ease-out); }
.score-ring.is-zero .bar { stroke-dashoffset: 201; }
.score-ring__val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; }
.score-ring__val small { display: block; font-size: 0.62rem; color: var(--ink-3); font-weight: 500; text-align: center; margin-top: -4px; }
.report__body { padding: 14px 20px 18px; display: grid; gap: 12px; }
.report__row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.report__icon { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.report__icon svg { width: 12px; height: 12px; }
.report__icon--good { background: var(--sage-soft); color: var(--sage-deep); }
.report__icon--edge { background: var(--apricot-soft); color: var(--apricot-deep); }
.report__icon--next { background: var(--navy-soft); color: var(--navy); }
.report__k { font-size: 0.7rem; color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.report__v { font-size: 0.84rem; color: var(--ink); line-height: 1.45; }
.report__quote { font-size: 0.78rem; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; font-style: italic; }
.bars { display: grid; gap: 7px; }
.bars__row { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--ink-2); }
.bars__track { height: 6px; border-radius: 6px; background: var(--paper-2); position: relative; overflow: hidden; }
.bars__self, .bars__real { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width 1.2s var(--ease-out); }
.bars__self { background: rgb(27 27 27 / 0.16); }
.bars__real { background: var(--ink); height: 6px; }
.legend { display: flex; gap: 14px; font-size: 0.7rem; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* ---------- Certificate mock ---------- */
.cert {
  width: min(100%, 500px); aspect-ratio: 16 / 10.2; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF, #F7F5F2);
  box-shadow: var(--shadow-3); border: 1px solid rgb(27 27 27 / 0.08);
  padding: 7% 7.5%; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink);
}
.cert::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(89 56 183 / 0.22); border-radius: 10px; pointer-events: none; }
.cert__top { display: flex; justify-content: space-between; align-items: center; font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.cert__brand { display: flex; align-items: center; gap: 8px; }
.cert__brand svg { width: 18px; height: 18px; }
.cert__main { align-self: center; display: grid; gap: 6px; }
.cert__label { font-size: 0.7rem; color: var(--ink-3); }
.cert__name { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.05; }
.cert__level { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem); color: var(--navy); }
.cert__level::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.cert__desc { font-size: 0.72rem; color: var(--ink-2); max-width: 30em; }
.cert__foot { display: flex; justify-content: space-between; align-items: end; gap: 12px; font-size: 0.64rem; color: var(--ink-3); }
.cert__qr { width: 44px; height: 44px; border-radius: 6px; background:
  conic-gradient(from 90deg at 30% 30%, var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 11px 11px,
  var(--card); border: 3px solid var(--card); outline: 1px solid var(--line); }

/* ---------- Workout card mock ---------- */
.workout { width: min(100%, 420px); background: var(--card); border-radius: 20px; box-shadow: var(--shadow-3); border: 1px solid rgb(27 27 27 / 0.08); overflow: hidden; }
.workout__head { padding: 16px 18px; background: var(--sage-soft); display: grid; gap: 6px; }
.workout__tag { display: inline-flex; gap: 8px; align-items: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sage-deep); }
.workout__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.12; letter-spacing: -0.015em; }
.workout__body { padding: 14px 18px 18px; display: grid; gap: 10px; font-size: 0.84rem; }
.workout__step { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.workout__step:last-of-type { border-bottom: 0; }
.workout__check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background-color var(--t-med), border-color var(--t-med); }
.workout__check svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.6); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.workout__step.is-done .workout__check { background: var(--sage-deep); border-color: var(--sage-deep); }
.workout__step.is-done .workout__check svg { opacity: 1; transform: scale(1); }
.workout__min { font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.progress { height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--sage-deep); border-radius: 4px; transition: width 1s var(--ease-out); }

/* ---------- Team overview mock ---------- */
.teamview { width: min(100%, 540px); background: var(--card); border-radius: 18px; box-shadow: var(--shadow-3); border: 1px solid rgb(27 27 27 / 0.08); overflow: hidden; font-size: 0.82rem; }
.teamview__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.teamview__head strong { font-weight: 600; }
.teamview__dist { padding: 14px 18px; display: grid; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.dist { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.dist i { display: block; height: 100%; transition: flex-grow 1.2s var(--ease-out); }
.dist .l0 { background: #E6E1DA; } .dist .l1 { background: var(--apricot); } .dist .l2 { background: var(--sage-deep); } .dist .l3 { background: var(--navy); }
.dist-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.7rem; color: var(--ink-3); }
.dist-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--c); vertical-align: 0; }
.teamview table { width: 100%; border-collapse: collapse; }
.teamview th { text-align: left; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 10px 18px 6px; }
.teamview td { padding: 9px 18px; border-top: 1px solid var(--line-soft); color: var(--ink-2); }
.teamview td:first-child { color: var(--ink); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 500; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.pill--sage { background: var(--sage-soft); color: var(--sage-deep); }
.pill--apricot { background: var(--apricot-soft); color: var(--apricot-deep); }
.pill--navy { background: var(--navy-soft); color: var(--navy); }
.pill--lock::before { content: ""; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid currentColor; }

/* ---------- Logo strip ---------- */
.logos { padding-block: clamp(28px, 3vw, 44px); border-block: 1px solid var(--line); }
.logos__label { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; margin-bottom: 18px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: clamp(36px, 5vw, 72px); width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.wordmark { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); color: rgb(27 27 27 / 0.55); white-space: nowrap; letter-spacing: -0.01em; font-weight: 600; }
.wordmark--serif { font-family: var(--font-display); font-weight: 500; font-style: italic; }
.wordmark--caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(0.9rem, 0.85rem + 0.35vw, 1.1rem); }
.wordmark--light { font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Pattern picker ("Poznáš se?") ---------- */
.patterns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.patterns__list { display: grid; gap: 10px; }
.pattern-btn {
  text-align: left; display: grid; grid-template-columns: 44px 1fr 24px; gap: 14px; align-items: center;
  padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--t-fast), background-color var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.pattern-btn:hover { border-color: rgb(27 27 27 / 0.35); transform: translateX(2px); }
.pattern-btn[aria-selected="true"] { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); box-shadow: var(--shadow-2); }
.pattern-btn__n { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--ink-3); }
.pattern-btn[aria-selected="true"] .pattern-btn__n { color: var(--apricot); }
.pattern-btn__t { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.pattern-btn__q { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.pattern-btn[aria-selected="true"] .pattern-btn__q { color: var(--inv-2); }
.pattern-btn__ar { opacity: 0.4; transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); }
.pattern-btn[aria-selected="true"] .pattern-btn__ar { opacity: 1; transform: translateX(3px); }
.pattern-panel {
  position: sticky; top: 100px; border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px);
  background: var(--card); border: 1px solid var(--line); min-height: 100%; display: grid; gap: 22px; align-content: start;
}
.pattern-panel[hidden] { display: none; }
.pattern-panel.is-entering > * { animation: rise 520ms var(--ease-out) both; }
.pattern-panel.is-entering > *:nth-child(2) { animation-delay: 60ms; }
.pattern-panel.is-entering > *:nth-child(3) { animation-delay: 120ms; }
.pattern-panel.is-entering > *:nth-child(4) { animation-delay: 180ms; }
.pattern-panel__scene { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.pattern-panel__block { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.pattern-panel__block p { margin: 0; color: var(--ink-2); }
.stat-inline { font-family: var(--font-display); font-size: 1.15em; color: var(--ink); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .patterns { grid-template-columns: 1fr; } .pattern-panel { position: static; } }

/* ---------- Loop (sticky steps) ---------- */
.loop { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); }
.loop__steps { display: grid; gap: 0; }
.loop-step { padding-block: clamp(28px, 7vh, 88px); border-top: 1px solid var(--line); display: grid; gap: 12px; color: var(--ink-3); transition: color var(--t-slow) var(--ease-out); }
.loop-step p { color: inherit !important; }
.loop-step .pill { opacity: .7; transition: opacity var(--t-slow); }
.loop-step.is-active .pill { opacity: 1; }
.loop-step:last-child { border-bottom: 1px solid var(--line); }
.loop-step.is-active { color: var(--ink); }
.loop-step.is-active p { color: var(--ink-2) !important; }
.loop-step__n { display: flex; align-items: center; gap: 12px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.loop-step__n b { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--apricot-deep); }
.loop-step p { color: var(--ink-2); margin: 0; max-width: 32em; }
.loop-step__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.loop__visual { position: sticky; top: 96px; align-self: start; height: min(76vh, 640px); }
.loop__visual .stage { height: 100%; aspect-ratio: auto; }
.loop-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 5%, 44px); opacity: 0; transform: translateY(16px) scale(0.985); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); pointer-events: none; }
.loop-scene.is-active { opacity: 1; transform: none; pointer-events: auto; }
.loop-ring { position: absolute; top: 18px; left: 18px; z-index: 3; display: flex; gap: 6px; background: rgb(255 255 255 / 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px; border-radius: var(--r-pill); box-shadow: var(--shadow-1); }
.loop-ring span { font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); color: var(--ink-3); transition: background-color var(--t-med), color var(--t-med); }
.loop-ring span.is-active { background: var(--ink); color: var(--ink-inv); }
.loop__mobile-visual { display: none; }
@media (max-width: 900px) {
  .loop { grid-template-columns: 1fr; }
  .loop__visual { display: none; }
  .loop-step { opacity: 1; }
  .loop__mobile-visual { display: block; margin-top: 12px; }
  .loop__mobile-visual .stage { aspect-ratio: 4 / 4.2; min-height: 0; }
}

/* ---------- Paths (3 cesty) ---------- */
.paths { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.path {
  position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 460px; text-decoration: none; color: var(--ink);
  display: grid; grid-template-rows: auto 1fr; isolation: isolate; border: 1px solid rgb(27 27 27 / 0.06);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.path__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.path:hover .path__bg { transform: scale(1.04); }
.path__copy { padding: clamp(24px, 3vw, 36px); display: grid; gap: 10px; align-content: start; }
.path__q { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 14em; }
.path__p { color: var(--ink-2); max-width: 30em; margin: 0; }
.path__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 6px; }
.path__go .arrow { transition: transform var(--t-med) var(--ease-out); }
.path:hover .path__go .arrow { transform: translateX(4px); }
.path__ui { position: relative; display: grid; place-items: end center; padding: 0 clamp(16px, 3vw, 32px); }
.path__ui > * { transform: translateY(18px); transition: transform var(--t-slow) var(--ease-out); }
.path:hover .path__ui > * { transform: translateY(8px); }
.path--a { grid-column: span 7; }
.path--b { grid-column: span 5; }
.path--c { grid-column: span 12; min-height: 380px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: 1fr; }
.path--c .path__copy { align-content: center; }
.path--c .path__ui { place-items: center; padding: 28px; }
.path--c .path__ui > * { transform: none; }
.path--dark { color: var(--ink-inv); }
.path--dark .path__p { color: var(--inv-2); }
@media (max-width: 960px) {
  .path--a, .path--b, .path--c { grid-column: span 12; }
  .path--c { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* ---------- Data / stats ---------- */
.datagrid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.statlist { display: grid; gap: 0; list-style: none; }
.stat { display: grid; grid-template-columns: 116px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.stat:last-child { border-bottom: 1px solid var(--line); }
.stat__n { font-family: var(--font-display); font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3.1rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__n small { font-size: 0.55em; margin-left: 2px; }
.stat__t { color: var(--ink-2); display: grid; gap: 10px; }
.stat__bar { height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.stat__bar i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 4px; transition: width 1.4s var(--ease-out); }
.footnote { font-size: var(--fs-xs); color: var(--ink-3); max-width: 44em; margin-top: 18px; line-height: 1.55; }
.section--night .stat { border-color: oklch(1 0 0 / 0.12); }
.section--night .stat__bar { background: oklch(1 0 0 / 0.1); }
.section--night .stat__bar i { background: var(--apricot); }
.section--night .stat__t { color: var(--inv-2); }
.section--night .footnote { color: var(--inv-3); }
@media (max-width: 900px) { .datagrid { grid-template-columns: 1fr; } .stat { grid-template-columns: 92px 1fr; } }

/* ---------- Levels ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.rung { border-radius: var(--r-lg); padding: 22px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; position: relative; }
.rung:nth-child(1) { min-height: 250px; }
.rung:nth-child(2) { min-height: 290px; }
.rung:nth-child(3) { min-height: 330px; }
.rung:nth-child(4) { min-height: 370px; background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.rung:nth-child(4) p { color: var(--inv-2); }
.rung__lvl { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3); }
.rung:nth-child(4) .rung__lvl { color: var(--apricot); }
.rung__name { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.1; }
.rung p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.rung__human { font-weight: 600; font-size: var(--fs-sm); }
@media (max-width: 900px) { .ladder { grid-template-columns: 1fr 1fr; } .rung { min-height: 0 !important; } }
@media (max-width: 520px) { .ladder { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.quotes { columns: 3 300px; column-gap: 16px; }
.quote { break-inside: avoid; margin: 0 0 16px; padding: 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); display: grid; gap: 18px; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 1.14rem; line-height: 1.45; letter-spacing: -0.008em; text-wrap: pretty; }
.quote--lg blockquote { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.35; }
.quote figcaption { display: flex; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.quote__av { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-3); display: grid; place-items: center; font-weight: 600; font-size: 0.8rem; color: var(--ink-2); flex-shrink: 0; overflow: hidden; }
.quote__av img { width: 100%; height: 100%; object-fit: cover; }
.quote__who { display: grid; line-height: 1.35; }
.quote__who b { font-weight: 600; }
.quote__who span { color: var(--ink-3); font-size: var(--fs-xs); }
.quote__note { font-size: var(--fs-2xs); color: var(--ink-3); }
.quote--dark { background: var(--night); color: var(--ink-inv); border-color: var(--night); }
.quote--dark .quote__who span, .quote--dark .quote__note { color: var(--inv-3); }
.quote--apricot { background: var(--apricot-soft); border-color: transparent; }
.quote--sage { background: var(--sage-soft); border-color: transparent; }

/* ---------- Principles (dark band) ---------- */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: oklch(1 0 0 / 0.1); border-radius: var(--r-lg); overflow: hidden; border: 1px solid oklch(1 0 0 / 0.1); }
.principle { background: var(--night); padding: 26px; display: grid; gap: 10px; align-content: start; min-height: 190px; transition: background-color var(--t-med); }
.principle:hover { background: var(--night-2); }
.principle__n { font-size: var(--fs-xs); color: var(--apricot); font-weight: 600; letter-spacing: 0.05em; }
.principle__t { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.15; }
.principle p { margin: 0; color: var(--inv-2); font-size: var(--fs-sm); }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split__copy { display: grid; gap: 18px; align-content: start; }
.split__copy .h2 { max-width: 14em; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

.checklist { list-style: none; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.checklist li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sage-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F6B3F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat; }
.checklist--x li::before { background: var(--paper-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%236D6B69' stroke-width='1.5' stroke-linecap='round'/></svg>") center / 11px no-repeat; }
.checklist b { color: var(--ink); font-weight: 600; }

/* ---------- Steps (numbered horizontal) ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; counter-reset: st; border-top: 1px solid var(--line); }
.step { padding: 28px 24px 28px 0; display: grid; gap: 10px; align-content: start; counter-increment: st; border-bottom: 1px solid var(--line); }
.step + .step { padding-left: 24px; border-left: 1px solid var(--line); }
.step::before { content: counter(st, decimal-leading-zero); font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--apricot-deep); line-height: 1; }
.step p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 760px) { .step, .step + .step { padding: 22px 0; border-left: 0; } }

/* ---------- Path chooser (3 ways of assessment) ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.way { border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); padding: 26px; display: grid; gap: 12px; align-content: start; }
.way__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; }
.way__icon svg { width: 22px; height: 22px; }
.way p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.way__best { font-size: var(--fs-xs); color: var(--ink-3); border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 4px; }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }

/* ---------- Tools matrix ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.matrix th, .matrix td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); letter-spacing: 0.03em; }
.matrix tbody th { font-weight: 600; white-space: nowrap; }
.matrix td { color: var(--ink-2); }
.matrix .yes { color: var(--sage-deep); font-weight: 600; }
.matrix .soon { color: var(--apricot-deep); font-weight: 600; }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.table-wrap .matrix th:first-child, .table-wrap .matrix td:first-child { padding-left: 22px; }
.table-wrap .matrix tr:last-child th, .table-wrap .matrix tr:last-child td { border-bottom: 0; }

/* ---------- Visibility table (who sees what) ---------- */
.vis th[scope="col"] { min-width: 150px; }
.vis .ok::before, .vis .no::before, .vis .part::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; }
.vis .ok::before { background: var(--sage-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F6B3F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px no-repeat; }
.vis .no::before { background: var(--paper-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%236D6B69' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 9px no-repeat; }
.vis .part::before { background: var(--apricot-soft); box-shadow: inset 0 0 0 4px var(--apricot-soft), inset 0 0 0 8px var(--apricot); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { border-radius: var(--r-xl); padding: 28px; background: var(--card); border: 1px solid var(--line); display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 16px; }
.plan--featured { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); box-shadow: var(--shadow-3); position: relative; }
.plan--featured .plan__desc, .plan--featured .plan__list li, .plan--featured .plan__fine { color: var(--inv-2); }
.plan--featured .plan__list li::before { background-color: oklch(1 0 0 / 0.12); filter: brightness(1.8); }
.plan__badge { position: absolute; top: 20px; right: 20px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); background: var(--apricot); padding: 5px 10px; border-radius: var(--r-pill); }
.plan__name { font-weight: 600; font-size: 1.05rem; }
.plan__price { display: grid; gap: 4px; }
.plan__amount { font-family: var(--font-display); font-size: clamp(2.3rem, 2rem + 1vw, 3rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__amount small { font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
.plan--featured .plan__amount small { color: var(--inv-3); }
.plan__target { font-size: var(--fs-xs); color: var(--ink-3); }
.plan--featured .plan__target { color: var(--inv-3); }
.plan__desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.plan__list { list-style: none; display: grid; gap: 10px; align-content: start; font-size: var(--fs-sm); }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ink-2); }
.plan__list li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--sage-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F6B3F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px no-repeat; }
.plan__fine { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plans, .plans--3 { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; position: relative; transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform var(--t-med) var(--ease-out); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .pm { background: var(--ink); border-color: var(--ink); }
.faq details[open] summary .pm::before, .faq details[open] summary .pm::after { background: var(--ink-inv); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover .pm { background: var(--paper-2); }
.faq__a { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 46em; }
.faq__a p:last-child { margin-bottom: 0; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; border-radius: var(--r-xl); overflow: hidden; color: var(--ink-inv); isolation: isolate; padding: clamp(48px, 7vw, 104px) clamp(24px, 6vw, 88px); display: grid; gap: 22px; justify-items: start; }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.cta-band .h1 { max-width: 13em; }
.cta-band p { color: var(--inv-2); max-width: 34em; font-size: var(--fs-lead); margin: 0; }
.cta-band .cta-note { color: var(--inv-3); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 72px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .page-hero__grid { grid-template-columns: 1fr; } }
.breadcrumb { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

/* ---------- Honest box ---------- */
.honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.honest > div { padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.honest > div:first-child { background: var(--card); }
.honest > div:last-child { background: var(--paper-2); border-left: 1px solid var(--line); }
@media (max-width: 800px) { .honest { grid-template-columns: 1fr; } .honest > div:last-child { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-size: var(--fs-sm); font-weight: 500; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: rgb(27 27 27 / 0.35); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(27 27 27 / 0.08); }
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: var(--apricot-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.chips legend { margin-bottom: 8px; padding: 0; }
.chip { position: relative; }
/* form chips: only the span is the pill; the mock .chip (product UI) would otherwise paint a halo around it */
.chips .chip { padding: 0; border-radius: 0; background: none; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); font-size: var(--fs-sm); transition: all var(--t-fast); }
.chip input:hover + span { border-color: rgb(27 27 27 / 0.35); }
.chip input:checked + span { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-card { border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 3.5vw, 44px); box-shadow: var(--shadow-1); }
.form-success { display: none; gap: 12px; }
.form.is-sent .form__fields { display: none; }
.form.is-sent .form-success { display: grid; animation: rise 500ms var(--ease-out); }

/* ---------- Contact person ---------- */
.person { display: flex; gap: 16px; align-items: center; }
.person__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--paper-3); flex-shrink: 0; }
.person__name { font-weight: 600; }
.person__role { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 16px; }
.member { display: grid; gap: 12px; }
.member__img { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.member__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 1s var(--ease-out); }
.member:hover .member__img img { transform: scale(1.03); }
.member__name { font-weight: 600; }
.member__role { font-size: var(--fs-sm); color: var(--ink-3); margin-top: -8px; }
.member__initials { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.6rem; color: var(--ink-3); background: linear-gradient(160deg, var(--paper-2), var(--paper-3)); }

/* ---------- Photo ---------- */
.photo { border-radius: var(--r-xl); overflow: hidden; background: var(--paper-3); position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo__cap { position: absolute; left: 14px; bottom: 14px; font-size: var(--fs-2xs); color: var(--ink-inv); background: rgb(27 27 27 / 0.45); padding: 4px 10px; border-radius: var(--r-pill); backdrop-filter: blur(6px); }

/* ---------- Footer ---------- */
.footer { background: var(--night); color: var(--inv-2); padding-top: clamp(64px, 7vw, 112px); padding-bottom: 36px; font-size: var(--fs-sm); }
.footer a { text-decoration: none; color: var(--inv-2); }
.footer a:hover { color: var(--ink-inv); text-decoration: underline; }
.footer__top { display: grid; grid-template-columns: minmax(14rem, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 56px; border-bottom: 1px solid oklch(1 0 0 / 0.1); }
.footer__brand { display: grid; gap: 18px; align-content: start; }
.footer__brand .brand, .footer__brand .brand:hover { color: var(--ink-inv); text-decoration: none; }
.footer__brand .brand__name { white-space: nowrap; }
.footer__brand .brand__by { color: var(--inv-3); }
.footer__brand p { max-width: 24em; color: var(--inv-3); margin: 0; }
.footer__col h3 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--inv-3); margin-bottom: 14px; }
.footer__col ul { list-style: none; display: grid; gap: 10px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: var(--fs-xs); color: var(--inv-3); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a { color: inherit; }
@media (max-width: 960px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- Tooltip term ---------- */
.term { border-bottom: 1px dotted currentColor; cursor: help; position: relative; }
.term[data-tip]:hover::after, .term[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--ink-inv);
  font-size: 0.8rem; line-height: 1.45; font-weight: 400; font-family: var(--font-ui); letter-spacing: 0; z-index: 20; box-shadow: var(--shadow-2);
  white-space: normal; text-transform: none; font-style: normal;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.no-js .reveal { opacity: 1; transform: none; }

/* hero load orchestration */
.load > * { animation: rise 900ms var(--ease-out) both; }
.load > *:nth-child(2) { animation-delay: 80ms; }
.load > *:nth-child(3) { animation-delay: 160ms; }
.load > *:nth-child(4) { animation-delay: 240ms; }
.load > *:nth-child(5) { animation-delay: 320ms; }
.load-visual { animation: rise 1100ms 200ms var(--ease-out) both; }

/* chat sequence */
.seq > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.seq > .is-shown { opacity: 1; transform: none; }
.no-js .seq > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .seq > * { opacity: 1; transform: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.maxw-sm { max-width: 34rem; } .maxw-md { max-width: 46rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.card { border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); padding: 26px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 500; padding: 6px 12px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.badge--apricot { background: var(--apricot-soft); border-color: transparent; color: var(--apricot-deep); }

/* ---------- Icons & logos ---------- */
.ic { width: 1em; height: 1em; flex-shrink: 0; }
.report__icon .ic { width: 12px; height: 12px; }
.workout__check .ic { width: 11px; height: 11px; opacity: 0; transform: scale(0.6); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); color: var(--card); stroke-width: 2.2; }
.workout__step.is-done .workout__check .ic { opacity: 1; transform: scale(1); }
.pill .ic { width: 12px; height: 12px; }
.marquee__track { align-items: center; }
.logo { width: auto; opacity: 0.62; flex-shrink: 0; transition: opacity var(--t-fast); }
.logo:hover { opacity: 0.9; }
.loop-step .h3 { margin: 2px 0 2px; }
.logo { height: var(--h, 26px) !important; max-width: none; }
.nav__inner > nav { margin-left: auto; }
.nav__links { margin-left: 0; }
.float-chip--hero { left: -28px; bottom: 56px; z-index: 3; animation: rise 900ms 900ms var(--ease-out) both; }
@media (max-width: 960px) { .float-chip--hero { left: 12px; bottom: -20px; } }
.path--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(32 21 71 / 0.78) 0%, rgb(32 21 71 / 0.45) 45%, transparent 75%); pointer-events: none; }
.footer .btn--light { color: var(--purple-deep); }
.footer .btn--light:hover { color: var(--purple-deep); text-decoration: none; }
.stat__n small { margin-left: 0; }
.principle__n { display: flex; align-items: center; gap: 8px; }
.principle__n .ic { width: 15px; height: 15px; }
.way__icon .ic { width: 20px; height: 20px; }
.honest .kicker { display: block; }
.float-chip--top { top: 12%; bottom: auto; }
@media (max-width: 960px) { .float-chip--top { top: auto; bottom: -20px; } }
.principles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .principles--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principles--3 { grid-template-columns: 1fr; } }
:root { --fs-h1: clamp(2.3rem, 1.5rem + 3vw, 4.1rem); }
.team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Mobile hardening ---------- */
@media (max-width: 960px) {
  .hero__grid, .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .split, .loop, .datagrid, .patterns, .faq-layout, .section-head--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) { .honest { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding: 14px 22px; }
  .cta-group > .btn { flex: 1 1 100%; }
  .display { font-size: clamp(2.3rem, 9.5vw, 3rem); }
  .h1 { font-size: clamp(2.05rem, 8.4vw, 2.6rem); }
  .stage { min-height: 360px; aspect-ratio: 4 / 4.6; }
  .window, .report, .workout, .teamview { font-size: 0.8rem; }
  .pattern-btn { grid-template-columns: 34px 1fr 18px; padding: 16px; }
  .stat { grid-template-columns: 78px 1fr; }
  .plan { padding: 22px; }
  .faq__a { padding-right: 0; }
}
.hero__copy, .split__copy, .section-head, .page-hero .hero__copy { min-width: 0; }
.eyebrow { flex-wrap: wrap; }
@media (max-width: 520px) {
  .teamview th:nth-child(4), .teamview td:nth-child(4) { display: none; }
  .teamview th, .teamview td { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 640px) {
  .stage, .loop__mobile-visual .stage { aspect-ratio: auto !important; min-height: 0; }
  .stage__inner { position: relative; inset: auto; padding: 28px 14px; }
  .path__ui { padding: 0 14px; }
}
.hero .stage { aspect-ratio: 5 / 4.75; }
.hero .stage__inner { place-items: start center; padding-top: 6%; }
.hero .float-chip--hero { bottom: 22px; }
@media (max-width: 640px) { .hero .stage { aspect-ratio: auto; } .hero .stage__inner { padding-top: 28px; padding-bottom: 64px; } .hero .float-chip--hero { bottom: 18px; left: 18px; } }
.stage { --mx: 0; --my: 0; }
.stage.is-in .stage__img { transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -14px), 0) scale(1.06); transition: transform 1.2s var(--ease-out); }
.stage .stage__inner > * { transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 6px), 0); transition: transform 1.2s var(--ease-out); }
.loop-scene > * { transform: none; }

/* ==========================================================================
   Round 2 (design panel) overrides
   ========================================================================== */

/* Contour map layer ("mapa tvé práce") on every stage */
.stage::before {
  content: ""; position: absolute; inset: -4%; z-index: -1; pointer-events: none;
  background: url("../assets/img/contours-a.svg") center / cover no-repeat;
  opacity: 0.2; mix-blend-mode: multiply;
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0);
  transition: transform 1.4s var(--ease-out), opacity 1.2s var(--ease-out);
}
.stage:not(.is-in)::before { opacity: 0; }
.stage--b::before { background-image: url("../assets/img/contours-b.svg"); }
.stage--c::before { background-image: url("../assets/img/contours-c.svg"); }
.path { position: relative; }
.path::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../assets/img/contours-b.svg") center / cover; opacity: 0.16; mix-blend-mode: multiply; }
.path--dark::after { mix-blend-mode: screen; filter: invert(1); opacity: 0.1; }

/* Kicker: sentence case, quieter */
.kicker { text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); }
.report__k, .coach-card__label, .float-chip__k, .workout__tag, .matrix thead th, .teamview th, .footer__col h3 { text-transform: uppercase; letter-spacing: 0.05em; }
.eyebrow { flex-wrap: nowrap; align-items: flex-start; }
.eyebrow .dot { flex: none; margin-top: 0.45em; }

/* Home hero: stacked, wide stage */
.hero--stacked .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero--stacked .hero__copy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 24px; align-items: end; }
.hero--stacked .hero__copy > .eyebrow, .hero--stacked .hero__copy > .display { grid-column: 1 / -1; }
.hero--stacked .display { max-width: 15em; font-size: clamp(2.6rem, 1.3rem + 4vw, 5.2rem); }
.hero--stacked .display .l2 { display: block; color: var(--ink-3); }
.hero--stacked .hero__sub { margin: 0; }
.hero--stacked .hero__actions { justify-self: end; display: grid; gap: 12px; justify-items: start; }
.hero--stacked .hero__visual { margin-top: clamp(40px, 5vw, 72px); }
.hero--stacked .stage { aspect-ratio: 16 / 7.5; min-height: 440px; }
.hero--stacked .stage__inner { place-items: center; padding: 5% 6% 0; align-content: end; }
.hero-scene { position: relative; width: min(100%, 980px); height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hero-scene .window { width: min(56%, 560px); margin-right: 40%; transform: translateY(36px); box-shadow: var(--shadow-3); }
.hero-scene .report { position: absolute; right: 2%; top: 9%; width: min(37%, 360px); box-shadow: var(--shadow-3); }
.hero--stacked .float-chip--hero { display: none; }
@media (max-width: 960px) {
  .hero--stacked .hero__copy { grid-template-columns: minmax(0, 1fr); }
  .hero--stacked .hero__actions { justify-self: start; }
  .hero-scene .window { width: 100%; margin: 0; transform: none; }
  .hero-scene .report { display: none; }
  .hero--stacked .stage { aspect-ratio: auto; min-height: 0; }
  .hero--stacked .stage__inner { position: relative; padding: 28px 14px; }
}

/* Light closing CTA */
.cta-band--light { color: var(--ink); justify-items: center; text-align: center; }
.cta-band--light .h1 { max-width: 16em; margin-inline: auto; }
.cta-band--light p { color: var(--ink-2); margin-inline: auto; }
.cta-band--light .cta-group { justify-content: center; }
.cta-band--light .cta-note { color: var(--ink-3); justify-content: center; }
.cta-band--light::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/img/contours-c.svg") center / cover; opacity: 0.18; mix-blend-mode: multiply; pointer-events: none; }

/* Testimonials: one featured + equal cards */
.quotes-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 40px); }
.quotes-feature blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.25; letter-spacing: -0.018em; text-wrap: pretty; }
.quotes-feature .quote__who { margin-top: 20px; }
.quotes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quotes-grid .quote { margin: 0; }
@media (max-width: 900px) { .quotes-feature, .quotes-grid { grid-template-columns: minmax(0, 1fr); } }
.quote--apricot, .quote--sage { background: var(--card); border-color: var(--line); }

/* Static logo row */
.logo-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 40px; }
.logo-row .logo { opacity: 0.55; }
@media (max-width: 640px) { .logo-row { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 24px 16px; } }

/* Ways as hairline columns */
.ways { gap: 0; border-top: 1px solid var(--line); }
.way { background: none; border: 0; border-radius: 0; padding: 28px 24px 28px 0; }
.way + .way { padding-left: 24px; border-left: 1px solid var(--line); }
.way__icon { width: auto; height: auto; background: none; justify-content: start; color: var(--apricot-deep); }
.way__best { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .way, .way + .way { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* Hairline list (replaces pill cloud) */
.hlist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 1px solid var(--line); }
.hlist li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 560px) { .hlist { grid-template-columns: 1fr; } }

/* Cards: calmer */
.card { box-shadow: none; }
.grid-2 .card { background: transparent; border-width: 0 0 0 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; }

/* Path A copy scrim */
.path--dark .path__copy { background: linear-gradient(180deg, rgb(27 27 27 / 0.55), rgb(27 27 27 / 0)); }

/* Page hero report: allow full height, fade bottom */
.page-hero .stage--report { aspect-ratio: auto; min-height: 0; }
.page-hero .stage--report .stage__inner { position: relative; inset: auto; padding: 48px 40px 0; place-items: start center; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); max-height: 560px; overflow: hidden; }

/* Mockup minimum text size */
.window, .report, .workout, .teamview { font-size: 0.875rem; }
.report__meta, .coach-card__time, .workout__min, .report__k, .coach-card__label, .float-chip__k, .dist-legend, .legend, .bars__row, .teamview th, .pill { font-size: 0.75rem; }

/* Real QR */
.cert__qr { background: var(--card) url("../assets/img/qr.svg") center / 100% no-repeat; border: 3px solid var(--card); }

/* Portrait grading */
.member__img img, .person__img { filter: grayscale(1) contrast(1.02); transition: filter var(--t-slow) var(--ease-out), transform 1s var(--ease-out); }
.member:hover .member__img img { filter: grayscale(0); }
.photo img { filter: saturate(0.9) contrast(1.03) sepia(0.05); }

/* Nav capsule on scroll */
@media (min-width: 1061px) {
  .nav { transition: background-color var(--t-med), border-color var(--t-med), padding var(--t-med) var(--ease-out); }
  .nav.is-scrolled { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 10px; }
  .nav.is-scrolled .nav__inner { max-width: calc(1120px + var(--gutter) * 2); height: 58px; background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-1); padding-inline: 12px 8px; }
  .nav__inner { transition: max-width var(--t-med) var(--ease-out), height var(--t-med) var(--ease-out), border-radius var(--t-med); }
}

/* Mobile extras */
@media (max-width: 640px) {
  .float-chip--hero, .float-chip--top { position: static; margin: -28px 16px 0; display: inline-grid; }
  .footer__col a { display: inline-block; padding-block: 8px; }
  .ladder { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .ladder .rung { flex: 0 0 78%; scroll-snap-align: start; min-height: 220px !important; }
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr { display: block; }
  .matrix tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .matrix tbody th { grid-column: 1 / -1; white-space: normal; padding: 0 !important; border: 0; }
  .matrix td { padding: 0 !important; border: 0; }
  .matrix td::before { content: attr(data-label); display: block; font-size: 0.72rem; color: var(--ink-3); margin-bottom: 2px; }
  .table-wrap .matrix tr:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  .patterns__list .pattern-panel { margin: 4px 0 12px; }
  .pattern-btn { scroll-margin-top: 84px; }
}
.window__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 640px) { .window__title { transform: none; margin-inline: 8px 0; text-align: left; } }
.path--dark .path__bg { filter: brightness(0.6) saturate(0.9); }
.path--dark .path__copy { background: none; }
.float-chip--top { top: auto; bottom: -24px; left: 40px; }
.page-hero { padding-bottom: clamp(56px, 6vw, 88px); }

/* ==========================================================================
   Round 3 (client feedback) overrides
   ========================================================================== */

/* Hero: CTA under the text, everything left-aligned in one column */
.hero--stacked .hero__copy { grid-template-columns: minmax(0, 1fr); row-gap: 22px; align-items: start; }
.hero--stacked .hero__sub { max-width: 40em; }
.hero--stacked .hero__actions { justify-self: start; justify-items: start; }

/* No more "heading left / text right": stack heading and lead */
.section-head--split { grid-template-columns: minmax(0, 1fr); max-width: 52rem; align-items: start; gap: var(--s-4); }
.section-head--split > .stack + * { margin-top: 0; }
.faq-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 60rem; }
.split--stack { grid-template-columns: minmax(0, 1fr); max-width: 46rem; gap: 20px; }

/* Path cards: text on solid surface, image only behind the product UI */
.path { background: var(--card); }
.path::after { display: none; }
.path__bg { top: auto; bottom: 0; height: 60%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); }
.path--dark { background: var(--night); }
.path--dark::before { display: none; }
.path--dark .path__bg { filter: none; }
.path--dark .kicker { color: var(--apricot); }
.path--c .path__bg { top: 0; bottom: 0; left: auto; right: 0; width: 60%; height: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%); mask-image: linear-gradient(to right, transparent 0%, #000 30%); }
@media (max-width: 960px) { .path--c .path__bg { width: 100%; height: 60%; top: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); } }

/* Closing CTA: calm surface, image only as a soft horizon at the bottom */
.cta-band--light { background: var(--paper-2); border: 1px solid var(--line); }
.cta-band--light .cta-band__bg { top: auto; bottom: 0; height: 55%; opacity: 0.55; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 70%); mask-image: linear-gradient(to bottom, transparent 0%, #000 70%); }
.cta-band--light::after { opacity: 0.12; }
.cta-band--light .kicker { color: var(--apricot-deep); }

/* Comparison tables: our column stands out */
.matrix--compare thead th:last-child { color: var(--ink-inv); }
.matrix--compare th:last-child, .matrix--compare td:last-child { background: var(--night); color: var(--ink-inv); border-bottom-color: oklch(1 0 0 / 0.1); }
.matrix--compare thead th:last-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--apricot); margin-right: 8px; vertical-align: 1px; }
.matrix--compare tbody td:last-child { font-weight: 500; padding-left: 44px !important; position: relative; }
.matrix--compare tbody td:last-child::after { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: rgb(169 141 246 / 0.22) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23A98DF6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px no-repeat; }
.matrix--compare tbody td:nth-child(2) { color: var(--ink-3); }
.matrix--compare .yes { color: inherit; }
.matrix--compare thead th { padding-top: 20px; padding-bottom: 18px; }
.matrix--compare tbody th, .matrix--compare tbody td { padding-top: 18px; padding-bottom: 18px; font-size: 1rem; }
@media (max-width: 640px) {
  .matrix--compare tbody td:last-child { border-radius: 12px; padding: 12px 12px 12px 40px !important; }
  .matrix--compare tbody td:last-child::before { color: var(--inv-3); }
  .matrix--compare tbody td:last-child::after { top: 50%; left: 12px; }
}

/* Quotes: 4 distinct voices on home */
.quotes-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Line-break hygiene */
.stat__n, .plan__amount, .num, .score-ring__val, .pill, .badge, .btn { white-space: nowrap; }
p, li, blockquote, summary, figcaption, .path__q, .path__p, .rung__human, .report__v, .coach-card__title, .pattern-btn__t, .pattern-btn__q, .plan__desc, .plan__fine, .footnote, .lead, .hero__sub { text-wrap: pretty; }
h1, h2, h3, .display, .h1, .h2, .h3 { text-wrap: balance; }
@media (max-width: 520px) { .btn { white-space: normal; } }
/* Data flow mock (certifikát) */
.flow { width: min(100%, 620px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.flow__box { background: var(--card); border: 1px solid rgb(27 27 27 / 0.08); border-radius: 16px; box-shadow: var(--shadow-2); padding: 18px; display: grid; gap: 12px; align-content: start; min-height: 170px; }
.flow__box--sp { background: var(--night); color: var(--ink-inv); }
.flow__box--sp .xs { color: var(--inv-2); }
.flow__k { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.flow__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flow__arrow { display: grid; justify-items: center; gap: 4px; color: var(--ink-2); font-size: 0.75rem; font-weight: 500; }
.flow__arrow svg { width: 64px; height: 16px; }
@media (max-width: 640px) { .flow { grid-template-columns: 1fr; } .flow__arrow svg { transform: rotate(90deg); } .flow__box { min-height: 0; } }
.cert-stack { position: relative; width: min(100%, 520px); }
.cert-stack .cert { position: absolute; right: -8%; bottom: -12%; width: 58%; transform: rotate(-3deg); box-shadow: var(--shadow-3); padding: 5% 6%; }
.cert-stack .cert .cert__desc { display: none; }
@media (max-width: 640px) { .cert-stack .cert { position: relative; right: auto; bottom: auto; width: 100%; transform: none; margin-top: 16px; } }
.steps-list { list-style: none; counter-reset: sl; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps-list li { counter-increment: sl; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.steps-list li::before { content: counter(sl); width: 30px; height: 30px; border-radius: 50%; background: var(--night); color: var(--ink-inv); display: grid; place-items: center; font-size: 0.85rem; font-weight: 600; }
.data-box { border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.data-box__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sage-soft); color: var(--sage-deep); display: grid; place-items: center; }
.data-box__icon .ic { width: 22px; height: 22px; }
@media (max-width: 560px) { .data-box { grid-template-columns: 1fr; } }
/* data box with a live diagram on the right: coaching + certifikát (30. 9.) */
.data-box--visual { grid-template-columns: auto minmax(0, 1fr) minmax(0, 580px); gap: 20px 28px; align-items: center; }
@media (max-width: 1100px) { .data-box--visual { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .data-box--visual > .vault { grid-column: 2; } }
@media (max-width: 560px) { .data-box--visual { grid-template-columns: 1fr; } .data-box--visual > .vault { grid-column: auto; } }

/* Vault: everything in your AI tool is locked, only the test result may leave; the one wire starts at that row (coaching data box) */
.vault { --pass-h: 56px; display: grid; grid-template-columns: minmax(0, 1.5fr) 44px minmax(0, 1fr); align-items: end; }
.vault__mine, .vault__ours { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; border-radius: 18px; background: var(--card); }
.vault__mine { box-shadow: 0 0 0 1px #EFEAE3, var(--sh-1); }
.vault__ours { box-shadow: 0 0 0 2px var(--purple-light), var(--sh-1); }
.vault__head { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; }
.vault__head b { font-weight: 600; color: var(--ink); line-height: 1.25; }
.vault__head .kui__tools { margin-left: auto; gap: 6px; }
.vault__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vault__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #F6F3EE; font-size: 0.84rem; color: var(--ink-2); }
.vault__list li > .ic { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.vault__list li > span { flex: 1; min-width: 0; }
.vault__lock, .vault__ok { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.vault__lock { background: #ECE7DF; color: var(--ink-2); }
.vault__lock .ic, .vault__ok .ic { width: 12px; height: 12px; stroke-width: 2; }
.vault__list .vault__pass { min-height: var(--pass-h); background: var(--card); color: var(--ink); box-shadow: 0 0 0 2px var(--purple); }
.vault__pass > .ic { color: var(--purple) !important; }
.vault__pass span { display: grid; gap: 1px; }
.vault__pass b { font-weight: 600; line-height: 1.25; }
.vault__pass small { font-size: 0.74rem; color: var(--ink-3); }
.vault__ok { background: var(--purple); color: #FFFFFF; }
.vault__wire { position: relative; align-self: end; height: var(--pass-h); margin-bottom: 16px; }
.vault__wire::before { content: ""; position: absolute; left: -2px; right: 0; top: 50%; border-top: 2px dashed var(--purple); transform-origin: left center; }
.vault__wire i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgb(89 56 183 / 0.18); opacity: 0; }
.vault__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.vault .kpill { font-size: 0.68rem; }
@media (prefers-reduced-motion: no-preference) {
  .vault.is-in .vault__lock { animation: vt-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .vault.is-in li:nth-child(1) .vault__lock { animation-delay: 0.3s; }
  .vault.is-in li:nth-child(2) .vault__lock { animation-delay: 0.5s; }
  .vault.is-in li:nth-child(3) .vault__lock { animation-delay: 0.7s; }
  .vault.is-in li:nth-child(4) .vault__lock { animation-delay: 0.9s; }
  .vault.is-in .vault__pass { animation: vt-pass 0.7s var(--ease-out) 1.3s both; }
  .vault.is-in .vault__ok { animation: vt-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both; }
  .vault.is-in .vault__wire::before { animation: vt-draw 0.5s var(--ease-out) 1.8s both; }
  .vault.is-in .vault__wire i { animation: vt-run 2.6s var(--ease-in-out) 2.1s infinite; }
  .vault.is-in .vault__chips .kpill { animation: vt-rec 0.5s var(--ease-out) 2.5s both; }
  .vault.is-in .vault__chips .kpill:nth-child(2) { animation-delay: 2.65s; }
  .vault.is-in .vault__chips .kpill:nth-child(3) { animation-delay: 2.8s; }
}
@keyframes vt-stamp { from { opacity: 0; transform: scale(1.9); } to { opacity: 1; transform: none; } }
@keyframes vt-pass { from { box-shadow: 0 0 0 0 var(--purple); background: #F6F3EE; } 60% { box-shadow: 0 0 0 2px var(--purple), 0 0 0 7px rgb(89 56 183 / 0.15); background: var(--card); } to { box-shadow: 0 0 0 2px var(--purple); background: var(--card); } }
@keyframes vt-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes vt-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 70% { left: 100%; opacity: 1; } 78%, 100% { left: 100%; opacity: 0; } }
@keyframes vt-rec { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .vault { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .vault__wire { height: 36px; margin: 0; }
  .vault__wire::before { left: 50%; right: auto; top: -2px; bottom: 0; border-top: 0; border-left: 2px dashed var(--purple); transform-origin: center top; }
  .vault__wire i { left: 50%; top: 0; margin: -5px 0 0 -4px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .vault.is-in .vault__wire::before { animation-name: vt-draw-v; }
  .vault.is-in .vault__wire i { animation-name: vt-run-v; }
}
@keyframes vt-draw-v { from { transform: scaleY(0); } to { transform: none; } }
@keyframes vt-run-v { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 70% { top: 100%; opacity: 1; } 78%, 100% { top: 100%; opacity: 0; } }

/* ==========================================================================
   Round 3b (design review) fixes
   ========================================================================== */
/* Footer labels */
.footer__k { display: block; font-size: var(--fs-xs); color: var(--inv-3); margin-bottom: 2px; }

/* Text never sits on gradients */
.path { --surf: var(--card); }
.path--dark { --surf: var(--night); }
.path__copy { position: relative; z-index: 1; background: var(--surf); box-shadow: 0 28px 28px -4px var(--surf); }
.cta-band--light .cta-band__bg { display: none; }
.page-hero .stage--report .stage__inner { -webkit-mask-image: none; mask-image: none; }
.flow__arrow span { background: var(--card); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 640px) { .flow__arrow svg { margin-block: 18px; } }

/* Pricing matrix: featured column, even widths; cards carry the info on mobile */
.matrix--plans { table-layout: fixed; }
.matrix--plans th:first-child { width: 36%; }
.matrix--plans td, .matrix--plans thead th:not(:first-child) { text-align: center; }
.matrix--plans th:nth-child(3), .matrix--plans td:nth-child(3) { background: var(--night); color: var(--ink-inv); }
.matrix--plans td.yes:nth-child(3) { color: var(--apricot); }
@media (max-width: 640px) { .table-wrap--plans { display: none; } }

/* Compare table on mobile: one column, full-width dark cell */
@media (max-width: 640px) {
  .matrix--compare tr { grid-template-columns: 1fr; }
  .matrix--compare tbody td:last-child { justify-self: stretch; }
}

/* Buttons on narrow screens */
@media (max-width: 520px) { .btn { text-wrap: balance; } }

/* Logo row: no overflow on mobile */
@media (max-width: 640px) { .logo-row .logo { max-width: 100%; object-fit: contain; } }

/* Two-column helpers (replace inline styles), collapse on mobile */
.ways--2, .quotes-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .ways--2, .quotes-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* Report mock header */
.report__meta { gap: 12px; }
.report__meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Remaining left/right layouts → stacked */
.datagrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.datagrid > .stack { max-width: 46rem; }
.quotes-feature { grid-template-columns: minmax(0, 1fr); max-width: 52rem; gap: 18px; }
.split--stacked { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.split--stacked > .split__copy { max-width: 46rem; }
.profiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.profiles-grid .card { border-top: 0 !important; padding: 24px 20px 24px 0 !important; }
.profiles-grid .card + .card { padding-left: 20px !important; border-left: 1px solid var(--line) !important; }
@media (max-width: 900px) { .profiles-grid { grid-template-columns: 1fr 1fr; } .profiles-grid .card, .profiles-grid .card + .card { border-left: 0 !important; padding: 20px 0 !important; border-bottom: 1px solid var(--line) !important; } }

/* Certifikát hero proportions */
.page-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
@media (max-width: 960px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* Leads balance, readable measures */
.lead, .hero__sub { text-wrap: balance; }
.hero--stacked .hero__sub { max-width: 34em; }
.faq__a p { max-width: 62ch; }
.plan__list li { text-wrap: wrap; }

/* Home hero mock on mobile */
@media (max-width: 960px) { .hero--stacked .stage__inner { display: block; } .hero-scene { width: 100%; } }

/* One accent: calmer tags */
.pill--navy, .pill--apricot { background: var(--paper-3); color: var(--ink-2); }

/* FAQ on the same left axis as other sections */
.faq-layout { max-width: none; }
.faq-layout .faq { max-width: 60rem; }

/* Quote cards: names aligned to bottom */
.quote { display: flex; flex-direction: column; }
.quote figcaption { margin-top: auto; }

/* Flat stage variant (fewer blurred fields) */
.stage--flat { background: var(--paper-3); }
.stage--flat .stage__img { display: none; }
.stage--flat::before { opacity: 0.28; }
/* "Kdo co uvidí": icon on the value, label stays on mobile */
.vis td.ok::before, .vis td.no::before, .vis td.part::before { content: none; }
.vis .st { display: block; }
.vis .st + .st { margin-top: 6px; }
.vis .st b { font-weight: 600; color: var(--ink); margin-right: 4px; }
.vis .ok .st::before, .vis .no .st::before, .vis .part .st:first-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; }
.vis .ok .st::before { background: var(--sage-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F6B3F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px no-repeat; }
.vis .no .st::before { background: var(--paper-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%236D6B69' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 9px no-repeat; }
.vis .part .st:first-child::before { display: none; }
@media (max-width: 640px) {
  .vis td::before { content: attr(data-label) !important; display: block; font-size: 0.72rem; color: var(--ink-3); margin-bottom: 4px; }
  .vis tr { grid-template-columns: 1fr; gap: 12px; }
}
/* Page-hero stages grow with the mock (no clipped top/bottom) */
.page-hero .stage { aspect-ratio: auto; min-height: 0; }
.page-hero .stage .stage__inner { position: relative; inset: auto; padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 36px); }
/* FAQ: same container width and left axis as every other section */
.container.faq-layout { max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; }
.faq-layout .faq { max-width: 60rem; width: 100%; }
/* Offer-style closing CTA */
.cta-band--offer { gap: 20px; padding-block: clamp(56px, 7vw, 104px); }
.cta-band--offer .h1 { max-width: 18em; }
.cta-band--offer .cta-group { gap: 14px 28px; }
.cta-band--offer .link-arrow { color: var(--ink); }
.cta-checks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 4px; font-size: 0.95rem; color: var(--ink-2); }
.cta-checks li { display: inline-flex; align-items: center; gap: 8px; }
.cta-checks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--sage-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232F6B3F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px no-repeat; }
.cta-proof { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
@media (max-width: 520px) { .cta-checks { flex-direction: column; align-items: center; } .cta-band--offer .cta-group { flex-direction: column; } }
@media (max-width: 520px) {
  .cta-band--offer .cta-group { flex-wrap: nowrap; align-items: center; }
  .cta-band--offer .cta-group > .btn { flex: none; width: 100%; }
}

/* ==========================================================================
   Aibility brand layer (opus-branded, 2026-09-24)
   Original layout stays. Changes: colours, Signika / Geist / Geist Mono,
   purple for CTAs and our highlighted variant, logo.
   ========================================================================== */

/* headings: Signika 600, no faux italics (Signika has none) */
.display, .h1, .h2, .h3 { font-weight: 600; letter-spacing: -0.02em; }
.display { letter-spacing: -0.025em; line-height: 1.04; }
.h1 { line-height: 1.06; }
.h2 { line-height: 1.1; }
.h3 { letter-spacing: -0.01em; line-height: 1.22; }
.display em, .h1 em, .h2 em { font-style: normal; color: var(--purple); }
.cert__level, .pattern-btn__n, .loop-step__n b, .step::before, .wordmark--serif { font-style: normal; font-weight: 600; }
.stat__n, .plan__amount, .report__score, .quotes-feature blockquote { font-weight: 600; }
.quote blockquote { font-family: var(--font-ui); font-size: 1.06rem; line-height: 1.6; letter-spacing: 0; }
.quotes-feature blockquote { font-family: var(--font-display); line-height: 1.22; letter-spacing: -0.015em; }

/* small labels: Geist Mono 400 */
.kicker, .report__k, .coach-card__label, .float-chip__k, .workout__tag, .matrix thead th, .teamview th,
.footer__col h3, .footer__k, .plan__badge, .rung__lvl, .principle__n, .badge {
  font-family: var(--font-mono); font-weight: 400;
}
.kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--purple); }
.section--night .kicker, .path--dark .kicker, .cta-band:not(.cta-band--light) .kicker, .plan--featured .kicker { color: var(--purple-light); }
.footer__col h3 { letter-spacing: 0.08em; font-size: 0.72rem; }
.footer__k { font-size: 0.7rem; letter-spacing: 0.04em; }
.plan__badge { letter-spacing: 0.06em; }

/* links and secondary CTAs in brand purple */
.link-arrow { color: var(--purple); font-weight: 600; }
.cta-band--offer .link-arrow { color: var(--purple); }
.section--night .link-arrow, .path--dark .link-arrow, .cta-band:not(.cta-band--light) .link-arrow, .plan--featured .link-arrow, .footer .link-arrow { color: var(--purple-light); }
.prose a:not(.btn), .faq__a a, .muted a:not(.btn), .small a:not(.btn) { color: var(--purple); }
.section--night .muted a:not(.btn) { color: var(--purple-light); }

/* our variant = deep brand purple */
.plan--featured { background: var(--purple-deep); border-color: var(--purple-deep); }
.matrix--compare th:last-child, .matrix--compare td:last-child,
.matrix--plans th:nth-child(3), .matrix--plans td:nth-child(3) { background: var(--purple-deep); }
.flow__box--sp { background: var(--purple-deep); }

/* numbered steps, score ring, team levels */
.steps-list li::before { background: var(--purple); color: #FFFFFF; }
.score-ring .bar { stroke: var(--purple); }
.dist .l2 { background: var(--purple); }
.workout__step.is-done .workout__check { background: var(--purple); border-color: var(--purple); }
.progress i { background: var(--purple); }

/* logo */
.brand__mark { width: 30px; height: 30px; border-radius: 50%; }
.msg__who .av { background: none; border-radius: 50%; overflow: hidden; }
.msg__who .av img { width: 20px; height: 20px; }
.cert__brand img { width: 18px; height: 18px; }

/* heading scale for Signika 600 (heavier than the original serif 400) */
:root {
  --fs-h1: clamp(2.1rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 1.7vw, 2.8rem);
}
.hero--stacked .display { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); max-width: 16em; }
.hero--stacked .display .l2 { font-weight: 400; color: var(--ink-3); }
.pill--lilac { background: var(--apricot-soft); color: var(--purple); }

/* closing CTA: deep brand purple, no contour lines */
.cta-band--light { background: var(--purple-deep); border-color: var(--purple-deep); color: var(--ink-inv); --focus: var(--ink-inv); }
.cta-band--light::after { display: none; }
.cta-band--light .h1 { color: var(--ink-inv); }
.cta-band--light p { color: var(--inv-2); }
.cta-band--light .cta-note, .cta-band--light .cta-proof { color: var(--inv-3); }
.cta-band--light .kicker { color: var(--purple-light); }
.cta-band--light .btn:not(.btn--ghost) { --btn-bg: var(--purple-light); --btn-fg: var(--purple-deep); --btn-bd: var(--purple-light); }
.cta-band--light .btn:not(.btn--ghost):hover { background: #BBA5F8; border-color: #BBA5F8; }
.cta-band--offer .link-arrow { color: var(--purple-light); }
.cta-band--light .cta-checks { color: var(--inv-2); }
.cta-band--light .cta-checks li::before { background: rgb(169 141 246 / 0.22) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23A98DF6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px no-repeat; }
.cta-band .cta-proof { font-size: var(--fs-sm); margin-top: 4px; }

/* alternating sections: cream + white (no grey band) */
.section--paper2 { background: #FFFFFF; }
.honest > div:last-child { background: var(--paper); }

/* firmy: case studies as one tidy row of cards */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(22px, 2.4vw, 32px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.case__n { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
.case__t { margin: auto 0 0; padding-top: 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.case--quote { background: var(--purple-deep); border-color: var(--purple-deep); color: var(--ink-inv); justify-content: space-between; gap: 24px; }
.case--quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.case--quote figcaption { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--inv-3); }
.case--quote figcaption b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-inv); }
@media (max-width: 1040px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case--quote { grid-column: 1 / -1; } }
@media (max-width: 680px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* table headers: mono without wide tracking */
.matrix thead th, .teamview th { letter-spacing: 0.02em; font-size: 0.7rem; }

/* mobile card tables: the column label must not inherit the status-icon circle */
@media (max-width: 640px) {
  .vis td::before { width: auto !important; height: auto !important; margin: 0 0 4px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; vertical-align: baseline !important; font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.66rem !important; }
  .vis tr { gap: 10px; }
}
.ink { color: var(--ink); }

/* o-nas story: left axis like every other section */
.container.split--stack { max-width: calc(var(--maxw) + var(--gutter) * 2); }
.split--stack > * { max-width: 46rem; }

/* metodika profiles: real cards with inner padding */
.profiles-grid { gap: 16px; }
.profiles-grid .card, .profiles-grid .card + .card { padding: 22px !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; background: var(--card); box-shadow: var(--shadow-1); }

/* consecutive sections on the same background read as one block */
.section--paper2 + .section--paper2,
.page-hero + .section--joined { padding-top: 0; }

/* contour lines: soft white instead of grey (reads cleaner on the brand fields) */
.stage::before { filter: brightness(0) invert(1); mix-blend-mode: normal; opacity: 0.4; }
.stage--flat::before { opacity: 0.55; }

/* home references: one lead quote + two smaller, same edges, one-line attribution */
.quote-wall { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.quote-wall .quote { margin: 0; }
.quote-wall .quote--lead { grid-row: span 2; justify-content: space-between; gap: 32px; padding: clamp(28px, 3.4vw, 44px); }
.quote--lead blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); line-height: 1.24; letter-spacing: -0.015em; color: var(--ink); }
@media (max-width: 900px) { .quote-wall { grid-template-columns: minmax(0, 1fr); } .quote-wall .quote--lead { grid-row: auto; } }

/* tighter gap between section intro and its content */
.section-head { margin-bottom: clamp(28px, 2.8vw, 44px); }
.section-head > :last-child, .section-head .lead:last-child { margin-bottom: 0; }

/* supported tools: logo chips with tooltip */
.tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: default; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), border-color var(--t-fast); }
.tool img { width: 18px; height: 18px; }
.tool:hover, .tool:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgb(89 56 183 / 0.35); outline: none; z-index: 5; }
.tool--soon { background: transparent; border-style: dashed; box-shadow: none; }
.tool--soon img { filter: grayscale(1); opacity: 0.45; }
.tool::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--ink-inv); font: 500 0.75rem/1.2 var(--font-ui); letter-spacing: 0; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out); z-index: 20; }
.tool:hover::after, .tool:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.works-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; font-size: var(--fs-xs); color: var(--ink-3); }
.tool-name { display: inline-flex; align-items: center; gap: 10px; }
.tool-ics { display: inline-flex; gap: 4px; }
.tool-ic { display: inline-block; width: 18px; height: 18px; flex: none; }
.chip .tool-ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }

/* home "Kde chceš začít?": no hard band under the copy, field fades into the card */
.path__copy { background: none; box-shadow: none; }
.path__bg { height: 66%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 32%, #000 72%); mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 32%, #000 72%); }
.path--dark { --surf: var(--purple-deep); background: var(--purple-deep); }
.path--c .path__bg { width: 62%; height: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 32%, #000 72%); mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 32%, #000 72%); }
@media (max-width: 960px) { .path--c .path__bg { width: 100%; height: 62%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 32%, #000 72%); mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.4) 32%, #000 72%); } }

/* struck regular price under the early-access price */
.plan__was { font-size: var(--fs-sm); color: var(--ink-3); text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
.plan--featured .plan__was { color: var(--inv-3); }
/* hidden tooltip takes no space (no sideways scroll on phones); edge chips align their tooltip inward */
.tool::after { visibility: hidden; transform: translate(-50%, 4px) scale(0); transform-origin: bottom center; }
.tool:hover::after, .tool:focus-visible::after { visibility: visible; transform: translate(-50%, 0) scale(1); }
.tool:nth-child(-n+2)::after { left: 0; transform: translate(0, 4px) scale(0); transform-origin: bottom left; }
.tool:nth-last-child(-n+2)::after { left: auto; right: 0; transform: translate(0, 4px) scale(0); transform-origin: bottom right; }
.tool:nth-child(-n+2):hover::after, .tool:nth-child(-n+2):focus-visible::after,
.tool:nth-last-child(-n+2):hover::after, .tool:nth-last-child(-n+2):focus-visible::after { transform: translate(0, 0) scale(1); }

/* pricing cards: name, price, description, button on top; divider; feature list below */
.plan { display: flex; flex-direction: column; gap: 16px; }
.plan > .stack, .plan > .btn { order: 4; }
.plan > .stack { gap: 10px; }
.plan > .plan__list { order: 5; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 6px; }
.plan--featured > .plan__list { border-top-color: rgb(250 244 238 / 0.16); }
.plan__fine { line-height: 1.45; }
@supports (grid-template-rows: subgrid) {
  /* cards in one row share row heights, so buttons and dividers line up */
  .plans { row-gap: 0; }
  .plans > .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-content: start; margin-bottom: 14px; }
}

/* ==== pricing cards v3: modern layout ==== */
.plan { padding: clamp(24px, 2.4vw, 32px); border-radius: 20px; box-shadow: var(--shadow-1); gap: 18px; }
.plans > .plan { row-gap: 18px; }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.plan__name { font-size: 1.05rem; font-weight: 600; }
.plan__badge { position: static; padding: 4px 10px; border-radius: 999px; font-size: 0.68rem; background: var(--apricot-soft); color: var(--purple); }
.plan--featured .plan__badge { background: rgb(169 141 246 / 0.22); color: var(--purple-light); }
.plan__desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.plan__price { display: grid; gap: 6px; }
.plan__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.plan__amount { font-size: clamp(2.3rem, 2rem + 0.9vw, 2.9rem); }
.plan__amount--word { font-size: clamp(2rem, 1.7rem + 0.8vw, 2.5rem); }
.plan__was { font-size: 1.05rem; color: var(--ink-3); }
.plan__per { font-size: var(--fs-sm); color: var(--ink-3); }
.plan--featured .plan__per, .plan--featured .plan__was { color: var(--inv-3); }
.plan__cta { display: grid; gap: 10px; align-self: end; }
.plan__cta .plan__fine { text-align: center; font-size: 0.78rem; color: var(--ink-3); }
.plan--featured .plan__cta .plan__fine { color: var(--inv-3); }
.plan > .plan__list { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 4px; gap: 12px; }
.plan--featured > .plan__list { border-top-color: rgb(250 244 238 / 0.16); }
.plan__list li { grid-template-columns: 16px 1fr; gap: 12px; }
.plan__list li::before, .plan--featured .plan__list li::before { width: 16px; height: 16px; margin-top: 3px; border-radius: 0; filter: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.4l3.2 3.1L13 4.8' fill='none' stroke='%235938B7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat; }
.plan--featured .plan__list li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.4l3.2 3.1L13 4.8' fill='none' stroke='%23A98DF6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.plan:not(.plan--featured):hover { box-shadow: var(--shadow-2); }
.plan { transition: box-shadow var(--t-med) var(--ease-out); }
.plan__cta { align-self: start; }

/* ==== home wall of love (moving columns) ==== */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 680px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); }
.wall__col { min-width: 0; }
.wall__track { display: flex; flex-direction: column; gap: 16px; animation: wall-up var(--dur, 64s) linear infinite; will-change: transform; }
.wall__set { display: flex; flex-direction: column; gap: 16px; }
.wall__col--down .wall__track { animation-direction: reverse; }
.wall:hover .wall__track { animation-play-state: paused; }
@keyframes wall-up { to { transform: translateY(calc(-50% - 8px)); } }
.tcard { margin: 0; display: grid; gap: 16px; padding: 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.tcard blockquote { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.tcard figcaption { display: flex; align-items: center; gap: 10px; }
.tcard__av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tc); color: var(--ink); font-size: 0.75rem; font-weight: 600; }
.tcard__who { display: grid; line-height: 1.3; }
.tcard__who b { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.tcard__who span { font-size: 0.76rem; color: var(--ink-3); }
.tcard__metric { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.tcard--metric { background: var(--tc); border-color: transparent; box-shadow: none; }
.tcard--metric .tcard__av { background: rgb(255 255 255 / 0.6); }
.tcard--metric .tcard__who span { color: var(--ink-2); }
.tcard--dark { background: var(--purple-deep); border-color: var(--purple-deep); }
.tcard--dark blockquote { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-inv); }
.tcard--dark .tcard__who b { color: var(--ink-inv); }
.tcard--dark .tcard__who span { color: var(--inv-3); }
.tcard--dark .tcard__av { background: rgb(169 141 246 / 0.25); color: var(--ink-inv); }
@media (max-width: 760px) {
  .wall { grid-template-columns: minmax(0, 1fr); height: auto; gap: 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    margin-inline: calc(var(--gutter) * -1); }
  .wall__track, .wall__set { flex-direction: row; width: max-content; gap: 12px; }
  .wall__track { animation-name: wall-left; }
  .wall .tcard { width: 280px; align-content: start; }
  @keyframes wall-left { to { transform: translateX(calc(-50% - 6px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  .wall__track { animation: none; }
  .wall__set[aria-hidden="true"] { display: none; }
}
.pill--tools { display: inline-flex; align-items: center; gap: 5px; }
.pill--tools .tool-ic { width: 14px; height: 14px; }

/* ==== calmer system (2026-09-24 review) ====
   One cream background for every section (no striping), white cards give depth.
   Purple is reserved for actions and "our" variant; labels above headings stay quiet. */
.section--paper2 { background: var(--paper); }
.honest > div:last-child { background: var(--paper); }
.kicker { color: var(--ink-3); }
.section--night .kicker, .path--dark .kicker, .cta-band:not(.cta-band--light) .kicker, .plan--featured .kicker, .cta-band--light .kicker { color: var(--inv-3); }
.case .kicker { color: var(--ink-3); }
@media (max-width: 760px) { .wall__track, .wall__set { align-items: flex-start; } }

/* headings: Signika 500 for display sizes (600 felt heavy at large sizes); small headings keep 600 */
.display, .h1, .h2 { font-weight: 500; }
.hero--stacked .display .l2 { font-weight: 400; }

/* ==== modern patterns (Mobbin review 2026-09-24) ==== */
:root {
  --p-lilac: #D9C8FF; --p-blue: #C7E1FF; --p-peach: #FFD9C2; --p-green: #C9EDC9; --p-pink: #F9C9E6; --p-yellow: #FFE7A1;
}

/* announcement pill above the hero headline */
.announce { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-bottom: 22px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.announce:hover { border-color: rgb(89 56 183 / 0.35); box-shadow: var(--shadow-2); }
.announce__tag { padding: 3px 10px; border-radius: 999px; background: var(--purple); color: #FFFFFF; font-size: 0.75rem; font-weight: 600; }
.announce .arrow { color: var(--purple); transition: transform var(--t-med) var(--ease-out); }
.announce:hover .arrow { transform: translateX(3px); }
.hero--stacked .hero__copy > .announce { grid-column: 1 / -1; }

/* client logos: endless strip */
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.logo-track { display: flex; width: max-content; animation: logos 46s linear infinite; }
.logo-set { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-set .logo { opacity: 0.5; transition: opacity var(--t-fast); }
.logo-set .logo:hover { opacity: 0.95; }
@keyframes logos { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .logo-set { gap: 44px; padding-right: 44px; } .logo-track { animation-duration: 34s; } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } .logo-set[aria-hidden="true"] { display: none; } .logo-set { flex-wrap: wrap; justify-content: center; } }

/* bento grid with small live UI (coaching) */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-1); }
.bento__cell { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.bento__cell:nth-child(odd) { border-right: 1px solid var(--line); }
.bento__cell:nth-last-child(-n+2) { border-bottom: 0; }
.bento__cell .muted { margin: 0; max-width: 34em; font-size: var(--fs-sm); line-height: 1.6; }
.bento__ui { position: relative; min-height: 230px; margin-top: 18px; display: grid; place-items: center start; }
.mini { position: relative; z-index: 1; width: min(100%, 380px); display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: 0.86rem; transition: transform var(--t-slow) var(--ease-out); }
.bento__cell:hover .mini { transform: translateY(-4px); }
.mini__head { display: flex; align-items: center; gap: 12px; }
.mini__ic, .mini__av { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--p-lilac); color: var(--purple-deep); }
.mini__ic .ic { width: 18px; height: 18px; }
.mini__av { border-radius: 50%; background: var(--p-peach); font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.mini__t { display: grid; line-height: 1.3; }
.mini__t b { font-weight: 600; color: var(--ink); }
.mini__t small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.mini__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.mini__row--fade { opacity: 0.45; }
.mini__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini__stats span { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--paper); font-size: 0.72rem; color: var(--ink-3); }
.mini__stats b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
.chip--lilac { background: var(--p-lilac); color: var(--purple-deep); }
.chip--blue { background: var(--p-blue); color: #13325B; }
.chip--yellow { background: var(--p-yellow); color: #4A3500; }
.chip--green { background: var(--p-green); color: #1D4D28; }
.chip--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-3); opacity: 0.7; }
.chip--lg { padding: 9px 16px; font-size: 0.95rem; box-shadow: var(--shadow-1); }
.bento__ui--chips { grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 18px; place-items: center; }
.chipcol { display: grid; gap: 10px; justify-items: center; }
.chipcol .chip--ghost:first-child { transform: translateX(-10px); }
.chipcol .chip--ghost:last-child { transform: translateX(10px); }
.chip-plus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 1.2rem; color: var(--ink-2); }
.bento__cell:hover .chip--lg { transform: scale(1.04); }
.chip--lg { transition: transform var(--t-med) var(--ease-out); }
.mini--cmp { gap: 14px; }
.cmp { display: grid; grid-template-columns: 56px 1fr 30px; align-items: center; gap: 12px; color: var(--ink-3); font-size: 0.8rem; }
.cmp i { height: 10px; border-radius: 99px; background: var(--paper-3); position: relative; overflow: hidden; }
.cmp i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--purple-light); }
.cmp--now i::after { background: var(--purple); }
.cmp b { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.05rem; text-align: right; }
.mini--cmp .chip { justify-self: start; }
@media (max-width: 760px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__cell, .bento__cell:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line); }
  .bento__cell:last-child { border-bottom: 0; }
  .bento__ui { min-height: 200px; }
  .bento__ui--chips { gap: 10px; }
  .chip--lg { font-size: 0.85rem; padding: 7px 12px; }
}

/* =====================================================================
   DESIGN V2 (2026-09-24): one system for the whole site
   1. Elevation instead of hairline borders   2. Bigger, softer radii
   3. Every card reacts (shadow, lift for links, cursor spotlight)
   4. Softer controls: filled secondary buttons, filled inputs, growing underline
   5. Bento v2: separate cards with colour roles, UI that animates in
   ===================================================================== */
:root {
  --sh-1: 0 1px 2px rgb(27 27 27 / 0.04), 0 4px 14px rgb(27 27 27 / 0.05);
  --sh-2: 0 2px 4px rgb(27 27 27 / 0.04), 0 14px 36px -10px rgb(27 27 27 / 0.14);
  --sh-3: 0 4px 10px rgb(27 27 27 / 0.05), 0 30px 64px -18px rgb(27 27 27 / 0.24);
  --r-lg: 20px; --r-xl: 26px;
  --shadow-1: var(--sh-1); --shadow-2: var(--sh-2);
}

/* 1. cards: no borders, soft elevation */
.card, .quote, .plan, .table-wrap, .data-box, .honest, .rung, .case, .tcard, .form-card, .pattern-btn, .pattern-panel,
.profiles-grid .card, .profiles-grid .card + .card, .flow__box, .mini, .announce, .tool, .chip-plus, .path {
  border-color: transparent !important;
}
.card, .quote, .plan:not(.plan--featured), .table-wrap, .data-box, .honest, .rung, .case:not(.case--quote), .tcard:not(.tcard--metric),
.form-card, .pattern-btn:not([aria-selected="true"]), .profiles-grid .card, .profiles-grid .card + .card, .path:not(.path--dark) {
  box-shadow: var(--sh-1) !important;
}
.pattern-panel, .mini, .flow__box { box-shadow: var(--sh-2) !important; }
.card, .quote, .plan, .data-box, .honest, .rung, .case, .form-card, .pattern-panel, .table-wrap { border-radius: var(--r-xl); }
.tcard { border-radius: 20px; }

/* 3. reactions */
.card, .quote, .plan, .data-box, .rung, .case, .tcard, .pattern-btn, .path, .profiles-grid .card, .table-wrap {
  transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out), background-color 0.3s;
}
.card:hover, .quote:hover, .plan:not(.plan--featured):hover, .data-box:hover, .rung:hover, .case:not(.case--quote):hover,
.tcard:not(.tcard--metric):hover, .profiles-grid .card:hover { box-shadow: var(--sh-2) !important; }
.path:hover { transform: translateY(-6px); box-shadow: var(--sh-3) !important; }
.pattern-btn:not([aria-selected="true"]):hover { transform: translateY(-2px); box-shadow: var(--sh-2) !important; }
.plan--featured { box-shadow: 0 30px 60px -24px rgb(32 21 71 / 0.55) !important; }

/* 4. controls */
.btn { isolation: isolate; overflow: hidden; }
.btn:not(.btn--ghost):not(.btn--ghost-light)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.8s var(--ease-out); }
.btn:not(.btn--ghost):not(.btn--ghost-light):hover::before { transform: translateX(120%); }
.btn { position: relative; }
.btn:not(.btn--light):not(.btn--ghost):not(.btn--ghost-light) { box-shadow: 0 10px 22px -10px rgb(89 56 183 / 0.65); }
.btn--ghost { --btn-bg: rgb(27 27 27 / 0.05); --btn-bd: transparent; }
.btn--ghost:hover { background: rgb(27 27 27 / 0.09); border-color: transparent; }
/* underline only on hover: a short stub under the first word read as a broken underline (D060) */
.link-arrow { border-bottom: 0; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.45s var(--ease-out), color 0.2s; }
.link-arrow:hover { background-size: 100% 1.5px; }
.input, .select, .textarea { background: rgb(27 27 27 / 0.035); border-color: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.input:hover, .select:hover, .textarea:hover { border-color: transparent; background: rgb(27 27 27 / 0.055); }
.input:focus, .select:focus, .textarea:focus { background: #FFFFFF; border-color: var(--purple); box-shadow: 0 0 0 4px rgb(89 56 183 / 0.14); }
/* own chevron: the native one sits on the edge in Safari (D060) */
.select, .select:hover, .select:focus { -webkit-appearance: none; appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B1B1B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 16px 16px; }
.chip span { background: rgb(27 27 27 / 0.05); border-color: transparent; transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease-out); }
.chip input:hover + span { background: rgb(27 27 27 / 0.09); border-color: transparent; }
.chip input:checked + span { background: var(--purple); color: #FFFFFF; border-color: var(--purple); }
.faq summary .pm { border: 0; background: rgb(27 27 27 / 0.05); transition: background-color 0.2s, transform 0.3s var(--ease-out); }
.faq summary:hover .pm { background: rgb(89 56 183 / 0.12); }
.faq details[open] summary .pm { background: var(--purple); }
.logos { border-block: 0; }

/* 5. bento v2 (coaching "Co ti zůstane") */
.bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.bento__cell { border: 0 !important; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); overflow: hidden; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.bento__cell:nth-child(1) { grid-column: span 4; }
.bento__cell:nth-child(2) { grid-column: span 2; background: var(--p-lilac); box-shadow: none; }
.bento__cell:nth-child(3) { grid-column: span 2; background: var(--p-yellow); box-shadow: none; }
.bento__cell:nth-child(4) { grid-column: span 4; background: var(--purple-deep); }
.bento__cell:nth-child(2) .muted { color: #2c2350; }
.bento__cell:nth-child(3) .muted { color: #4A3a14; }
.bento__cell:nth-child(4) .h3 { color: var(--ink-inv); }
.bento__cell:nth-child(4) .muted { color: var(--inv-2); }
.bento__cell:nth-child(2) .chip--ghost, .bento__cell:nth-child(3) .chip--ghost { border-color: rgb(27 27 27 / 0.14); color: var(--ink-2); }
.bento__cell:nth-child(2):hover, .bento__cell:nth-child(3):hover { box-shadow: var(--sh-2); }
.bento__cell .chip-plus { background: rgb(255 255 255 / 0.7); }
.bento .cmp i::after { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-out); }
.bento.is-in .cmp i::after { transform: scaleX(1); }
.bento.is-in .cmp--now i::after { transition-delay: 0.35s; }
.bento .chipcol .chip, .bento .chip-plus { opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.bento.is-in .chipcol .chip, .bento.is-in .chip-plus { opacity: 1; transform: none; }
.bento.is-in .chipcol .chip:nth-child(2) { transition-delay: 0.15s; } .bento.is-in .chipcol .chip:nth-child(3) { transition-delay: 0.3s; }
.bento.is-in .chipcol + .chip-plus { transition-delay: 0.4s; }
.bento.is-in .chipcol:last-child .chip { transition-delay: 0.5s; }
.bento.is-in .chipcol .chip--ghost:first-child { transform: translateX(-10px); } .bento.is-in .chipcol .chip--ghost:last-child { transform: translateX(10px); }
.bento .mini__row { opacity: 0; transform: translateX(-8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.bento.is-in .mini__row { opacity: 1; transform: none; }
.bento.is-in .mini__row:nth-child(3) { transition-delay: 0.15s; } .bento.is-in .mini__row:nth-child(4) { transition-delay: 0.3s; }
.bento.is-in .mini__row--fade { opacity: 0.45; }
@media (max-width: 960px) { .bento__cell:nth-child(n) { grid-column: span 3; } }
@media (max-width: 760px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento__cell:nth-child(n) { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) {
  .bento .chipcol .chip, .bento .chip-plus, .bento .mini__row { opacity: 1; transform: none; }
  .bento .cmp i::after { transform: none; }
  .btn::before { display: none; }
}
.profiles-grid { border-top: 0; }

/* Contact: Aibility mark instead of a portrait, keep its colours */
.person__img--mark { filter: none; background: var(--card); box-shadow: var(--sh-1); }

/* Firm contact form: fits one fold on a laptop */
#poptavka .form { gap: 14px; }
#poptavka .form-card { padding: clamp(22px, 3vw, 36px); }
#poptavka .textarea { min-height: 76px; }

/* ---------- Product cards (Pro firmy: Jak to funguje), from lab/sekce.html #7 ---------- */
.pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pcard { position: relative; display: grid; grid-template-rows: 260px auto; border-radius: var(--r-xl); overflow: hidden; background: var(--card); box-shadow: var(--sh-2); transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.pcard:hover { box-shadow: var(--sh-3); }
.pcard__stage { display: grid; place-items: center; padding: 20px; background: var(--tint); overflow: hidden; }
.pcard__ui { width: 100%; transition: transform 0.7s var(--ease-out); }
.pcard:hover .pcard__ui { transform: translateY(-8px) rotate(-1deg); }
.pcard__panel { display: grid; gap: 8px; align-content: start; padding: 24px 24px 28px; background: var(--panel); color: var(--panel-ink); }
.pcard__k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }
.pcard__t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.015em; color: inherit; }
.pcard__panel p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: inherit; opacity: 0.86; }
.pcard--lilac { --tint: #EFE7FF; --panel: var(--p-lilac); --panel-ink: var(--purple-deep); }
.pcard--yellow { --tint: #FFF6D6; --panel: var(--p-yellow); --panel-ink: #3A2A00; }
.pcard--blue { --tint: #E6F1FF; --panel: var(--p-blue); --panel-ink: #102A4C; }
.pcard--deep { --tint: #E9E4FA; --panel: var(--purple-deep); --panel-ink: var(--ink-inv); }
/* mini UI inside the cards */
.pui { display: grid; gap: 9px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-2); font-size: 0.76rem; line-height: 1.4; color: var(--ink); }
.pui__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pui__row b { font-size: 0.8rem; font-weight: 600; }
.pui-muted { color: var(--ink-3); }
.pui-tools { display: flex; gap: 5px; }
.pui-trow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.pui-dist { display: flex; height: 12px; gap: 2px; border-radius: 99px; overflow: hidden; }
.pui-dist i { display: block; transform-origin: left; transition: transform 1.2s var(--ease-out); }
.pui-dist i:nth-child(2) { transition-delay: 0.2s; } .pui-dist i:nth-child(3) { transition-delay: 0.4s; }
.pcard:not(.is-in) .pui-dist i { transform: scaleX(0); }
.pui-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.7rem; color: var(--ink-3); }
.pui-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--c); }
.pui-steps { display: grid; gap: 7px; }
.pui-step { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: #F7F4EF; }
.pui-step small { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); }
.pui-ck { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgb(27 27 27 / 0.25); color: #fff; transition: background-color 0.3s, border-color 0.3s; }
.pui-ck svg { width: 11px; height: 11px; opacity: 0; transition: opacity 0.2s; }
.pui-step.is-done .pui-ck { background: var(--purple); border-color: var(--purple); }
.pui-step.is-done .pui-ck svg { opacity: 1; }
.pui-prog { height: 5px; border-radius: 99px; background: rgb(27 27 27 / 0.08); overflow: hidden; }
.pui-prog i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--purple); transition: width 0.6s var(--ease-out); }
.pui-shift { display: grid; gap: 8px; }
.pui-shift__r { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; font-size: 0.7rem; color: var(--ink-3); }
.ptag { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 9px; border-radius: 999px; background: #F3EFE8; color: var(--ink-2); font-size: 0.68rem; font-weight: 500; white-space: nowrap; }
.ptag svg { width: 11px; height: 11px; }
.ptag--lilac { background: var(--p-lilac); color: var(--purple-deep); }
.ptag--yellow { background: var(--p-yellow); color: #4A3500; }
.ptag--green { background: var(--p-green); color: #1D4D28; }
@media (max-width: 1100px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pcards { grid-template-columns: minmax(0, 1fr); } .pcard { grid-template-rows: 240px auto; } }
@media (prefers-reduced-motion: reduce) { .pcard:not(.is-in) .pui-dist i { transform: none; } }

/* Home: logos sit closer to the hero visual */
.hero--stacked:has(+ .logos) { padding-bottom: clamp(28px, 3vw, 40px); }
.hero--stacked + .logos { padding-top: 12px; }

/* Home paths: flat brand surfaces, same language as the product cards (no field images, no contour lines) */
.path__bg, .path::after { display: none; }
.path--b { --surf: var(--p-yellow); background: var(--p-yellow); }
.path--c { --surf: var(--p-lilac); background: var(--p-lilac); }
.path--b, .path--b .path__q, .path--b .path__go { color: #3A2A00; }
.path--b .path__p, .path--b .kicker { color: rgb(58 42 0 / 0.8); }
.path--c, .path--c .path__q, .path--c .path__go { color: var(--purple-deep); }
.path--c .path__p, .path--c .kicker { color: rgb(32 21 71 / 0.8); }

/* O nás: Seyfor numbers in one row, company card */
.statlist--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.statlist--row .stat { grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 22px 0 0; }
.statlist--row .stat__n { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); white-space: nowrap; }
@media (max-width: 900px) { .statlist--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .statlist--row .stat__n { font-size: 1.8rem; } }
.company { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.company__who .h3 { margin: 6px 0 6px; }
.company__k { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.company p { line-height: 1.7; }
@media (max-width: 760px) { .company { grid-template-columns: minmax(0, 1fr); } }

/* Legal pages (copied from aibility-website/legal) */
.page-hero--legal .kicker { display: block; margin-bottom: 12px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.legal-nav a { padding: 8px 14px; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); color: var(--ink-2); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background-color 0.2s; }
.legal-nav a:hover { background: rgb(27 27 27 / 0.09); color: var(--ink); }
.legal-nav a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.legal { max-width: 46rem; color: var(--ink-2); line-height: 1.7; }
.legal > :first-child { margin-top: 0; }
.legal h2 { margin: 2.4em 0 0.6em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.legal h3 { margin: 1.8em 0 0.5em; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.legal p, .legal ul, .legal ol, .legal blockquote, .legal table { margin: 0 0 1em; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin-bottom: 0.4em; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--purple); text-underline-offset: 3px; }
.legal .legal-meta { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); }
.legal blockquote { padding: 16px 20px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh-1); color: var(--ink-2); }
.legal code { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 6px; border-radius: 6px; background: rgb(27 27 27 / 0.05); }
.legal table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9rem; background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.legal th, .legal td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.legal th { font-weight: 600; color: var(--ink); background: #FAF7F2; }
.legal tr:last-child td { border-bottom: 0; }
.legal small { color: var(--ink-3); }

/* ---------- Coaching: course vs. us, two aligned cards (lab/sekce.html #1) ---------- */
.vsc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(5, auto); column-gap: 20px; }
.vsc__card { grid-row: span 6; display: grid; grid-template-rows: subgrid; padding: 6px 32px 14px; border-radius: var(--r-xl); }
.vsc__card--old { background: #F3EEE6; }
.vsc__card--new { background: var(--card); box-shadow: var(--sh-2); }
.vsc__head { display: flex; align-items: center; gap: 14px; padding: 24px 0 20px; }
.vsc__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.vsc__logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; }
.vsc__logo svg { width: 22px; height: 22px; }
.vsc__card--old .vsc__logo { background: var(--card); color: var(--ink-2); }
.vsc__card--new .vsc__logo { background: #F1EBFF; }
.vsc__row { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; row-gap: 3px; align-content: start; padding: 18px 0; border-top: 1px solid rgb(27 27 27 / 0.09); }
.vsc__row small { grid-column: 2; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.vsc__t { grid-column: 2; font-size: 1.06rem; line-height: 1.45; text-decoration: line-through transparent; text-decoration-thickness: 1.5px; transition: color 0.3s, text-decoration-color 0.3s; }
.vsc__mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; transition: transform 0.4s var(--ease-out); }
.vsc__mark svg { width: 13px; height: 13px; stroke-width: 2.2; }
.vsc__card--old small { color: #5C5A57; }
.vsc__card--old .vsc__t { color: var(--ink-2); }
.vsc__card--old .vsc__mark { background: var(--card); color: var(--ink-2); }
.vsc__card--new small { color: var(--ink-3); }
.vsc__card--new .vsc__mark { background: var(--purple); color: #fff; }
.vsc__card--new .vsc__t { color: var(--ink); font-weight: 500; }
.vsc__row.is-hot .vsc__mark { transform: scale(1.15); }
.vsc__card--old .vsc__row.is-hot .vsc__t { text-decoration-color: rgb(27 27 27 / 0.4); }
.vsc__card--new .vsc__row.is-hot .vsc__t { color: var(--purple); }
@media (max-width: 760px) {
  .vsc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
  .vsc__card { grid-row: auto; grid-template-rows: none; padding: 4px 22px 10px; }
  .vsc__card--new { order: -1; }
}

/* ---------- Pro firmy: who sees what, visual table (lab/sekce.html #3) ---------- */
.vtab { padding: 6px 28px 18px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.vtab table { width: 100%; border-collapse: separate; border-spacing: 0; }
.vtab thead th { padding: 22px 14px 18px; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--line-soft); }
.vtab__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.vtab__role { display: flex; align-items: center; gap: 12px; }
.vtab__role b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.vtab__role small { display: block; font-size: 0.8rem; font-weight: 400; line-height: 1.35; color: var(--ink-3); }
.vtab__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: var(--purple-deep); transition: transform 0.4s var(--ease-out); }
.vtab__ic svg { width: 20px; height: 20px; }
.vtab tbody th, .vtab tbody td { padding: 13px 14px; text-align: left; border-top: 1px solid var(--line-soft); transition: background-color 0.25s; }
.vtab tbody th { width: 28%; padding-left: 4px; font-weight: 500; color: var(--ink); }
.vtab__grp th { padding: 26px 4px 8px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vtab__grp--first th { border-top: 0; }
.vtab__grp + tr th, .vtab__grp + tr td { border-top: 0; }
.vtab tbody tr:not(.vtab__grp):hover th, .vtab tbody tr:not(.vtab__grp):hover td { background: #FBF8F3; }
.vtab .is-col-hot { background: #FAF7FF !important; }
.vtab th.is-col-hot .vtab__ic { transform: scale(1.08) rotate(-4deg); }
.vst { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 0.86rem; font-weight: 500; line-height: 1.3; }
.vst svg { width: 14px; height: 14px; stroke-width: 2; flex: none; }
.vst--yes { background: var(--p-green); color: #1D4D28; }
.vst--part { background: var(--p-yellow); color: #4A3500; }
.vst--agg { background: var(--p-blue); color: #13325B; }
.vst--no { background: #EEEAE3; color: #5C5A57; }
@media (max-width: 760px) {
  .vtab { padding: 6px 18px 14px; }
  .vtab thead { display: none; }
  .vtab tbody, .vtab tr, .vtab th, .vtab td { display: block; width: auto; }
  .vtab__grp th { padding: 20px 0 4px; }
  .vtab tbody tr:not(.vtab__grp) { padding: 12px 0; }
  .vtab tbody tr:not(.vtab__grp) + tr:not(.vtab__grp) { border-top: 1px solid var(--line-soft); }
  .vtab__grp:not(.vtab__grp--first) { border-top: 1px solid var(--line-soft); }
  .vtab tbody th, .vtab tbody td { padding: 4px 0; border: 0; }
  .vtab tbody th { padding-bottom: 8px; font-weight: 600; }
  .vtab tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .vtab tbody td::before { content: attr(data-role); font-size: 0.86rem; color: var(--ink-3); }
  .vtab tbody tr:hover th, .vtab tbody tr:hover td { background: none !important; }
  .vst { font-size: 0.8rem; text-align: right; }
}

/* ---------- Coaching: fit / not fit, two equal white cards (lab/sekce.html #5) ---------- */
.fitc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.fitc__box { display: flex; flex-direction: column; padding: 34px 36px 28px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.fitc__h { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.fitc__box ul { margin: 0; padding: 0; list-style: none; }
.fitc__box li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line-soft); font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.fitc__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.fitc__ic svg { width: 14px; height: 14px; stroke-width: 2.2; }
.fitc__box--yes .fitc__ic { background: var(--purple); color: #fff; }
.fitc__box--no .fitc__ic { background: #EEEAE3; color: #5C5A57; }
.fitc__box--no li { color: var(--ink-2); }
.fitc__alt { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 0.95rem; color: var(--ink-2); }
.fitc__alt a { color: var(--purple); font-weight: 600; }
@media (max-width: 760px) { .fitc { grid-template-columns: minmax(0, 1fr); } .fitc__box { padding: 26px 22px 20px; } }
.statlist--row .stat { border-bottom: 0 !important; }

/* ---------- Header: "Otevřít v AI" (ported from aibility-website) ---------- */
.ai-open { position: relative; }
.ai-open__trigger { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); color: var(--ink-2); font: 500 var(--fs-sm)/1 var(--font-ui); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.ai-open__trigger:hover, .ai-open[data-open="true"] .ai-open__trigger { background: rgb(27 27 27 / 0.09); color: var(--ink); }
.ai-open__logos { display: flex; }
.ai-open__logos img { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1.5px rgb(255 251 244); }
.ai-open__logos img + img { margin-left: -5px; }
.ai-open__caret { width: 12px; height: 12px; transition: transform 0.25s var(--ease-out); }
.ai-open[data-open="true"] .ai-open__caret { transform: rotate(180deg); }
.ai-open__menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: grid; gap: 2px; min-width: 260px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0s linear 0.25s; }
.ai-open__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ai-open[data-open="true"] .ai-open__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .ai-open:hover .ai-open__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.ai-open__head { padding: 8px 10px 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ai-open-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; font: 500 0.92rem/1.2 var(--font-ui); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: background-color 0.15s; }
.ai-open-item:hover, .ai-open-item:focus-visible { background: #F6F2EC; }
.ai-open-item img { flex: none; }
.ai-open__sep { height: 1px; margin: 4px 8px; background: var(--line-soft); }
@media (max-width: 1320px) { .ai-open__label { display: none; } }
.mobile-ai { padding: 12px var(--gutter) 0; }
.mobile-ai__k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mobile-ai__row { display: flex; gap: 8px; margin-top: 10px; }
.mobile-ai .ai-open-item { flex: 1; justify-content: center; padding: 12px; background: rgb(27 27 27 / 0.05); }
/* paste modal for Copilot / Gemini */
.ai-paste { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px; }
.ai-paste[data-open="true"] { display: grid; }
.ai-paste__backdrop { position: absolute; inset: 0; background: rgb(27 27 27 / 0.45); }
.ai-paste__card { position: relative; display: grid; gap: 12px; justify-items: start; width: min(440px, 100%); padding: 32px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-3); animation: ai-pop 0.35s var(--ease-out); }
.ai-paste__card h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.ai-paste__card p { margin: 0; color: var(--ink-2); }
.ai-paste__badge { padding: 4px 10px; border-radius: var(--r-pill); background: var(--p-green); color: #1D4D28; font-size: 0.78rem; font-weight: 600; }
.ai-paste__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(27 27 27 / 0.05); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.ai-paste kbd { padding: 1px 6px; border-radius: 6px; background: #F3EFE8; font-family: var(--font-mono); font-size: 0.8em; }
@keyframes ai-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Pro firmy: gated case studies CTA + modal ---------- */
.cs-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 20px; padding: 20px 22px 20px 20px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.cs-cta__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--p-lilac); color: var(--purple-deep); }
.cs-cta__ic svg { width: 22px; height: 22px; }
.cs-cta__t b { display: block; font-weight: 600; color: var(--ink); }
.cs-cta__t span { display: block; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 760px) { .cs-cta { grid-template-columns: auto 1fr; } .cs-cta .btn { grid-column: 1 / -1; justify-content: center; } }
.cs-modal { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: clamp(24px, 4vw, 40px); border: 0; border-radius: var(--r-xl); background: var(--card); color: var(--ink); box-shadow: var(--sh-3); overflow: auto; }
.cs-modal[open] { animation: ai-pop 0.35s var(--ease-out); }
.cs-modal::backdrop { background: rgb(27 27 27 / 0.45); }
.cs-modal .h3 { margin: 4px 0 6px; }
.cs-modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(27 27 27 / 0.05); color: var(--ink-2); cursor: pointer; }
.cs-modal__close:hover { background: rgb(27 27 27 / 0.09); color: var(--ink); }
.cs-modal__close svg { width: 16px; height: 16px; }

/* ---------- Certificate card (same look as the app certificate: hub app-lab, Variant A) ----------
   1cqw = 1 % of the card width; small print has a px floor so the card stays readable at 420–520 px. */
.pass {
  --lime: #D8F542;
  position: relative; display: flex; flex-direction: column; width: min(100%, 520px); aspect-ratio: 16 / 9; container-type: inline-size; overflow: clip;
  border-radius: 12px; color: var(--ink-inv); box-shadow: var(--sh-3);
  /* aibility-allow-decorative-background: certificate in the web purple (#6712F5), same gradient as the app certificate */
  background: linear-gradient(150deg, #7427FF 0%, #6712F5 45%, #5A0CE6 100%);
  transform: perspective(1000px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) rotate(var(--pass-rot, -2.5deg));
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pass.is-tilting { transition-duration: 0.4s; }
.pass__body { flex: 1 0 auto; display: grid; grid-template-rows: auto 1fr auto; padding: max(14px, 4.6cqw) max(16px, 5.6cqw) max(12px, 3.6cqw); }
.pass__top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.pass__brand { display: flex; align-items: center; gap: 1cqw; font-family: var(--font-display); font-weight: 600; font-size: max(11px, 1.9cqw); line-height: 1; letter-spacing: -0.01em; }
.pass__brand img { width: max(16px, 3cqw); height: auto; }
.pass__kick { font-family: var(--font-mono); font-weight: 500; font-size: max(7.5px, 1.15cqw); line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.pass__who { align-self: center; display: grid; justify-items: start; min-width: 0; padding-block: 2cqw; }
.pass__lbl { font-family: var(--font-mono); font-size: max(7.5px, 1.1cqw); line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.86); }
.pass__name { max-width: 100%; margin-top: 0.8cqw; font-family: var(--font-display); font-weight: 600; font-size: 6.2cqw; line-height: 1.02; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass__lvl { max-width: 100%; margin-top: 2cqw; font-family: var(--font-display); font-weight: 600; font-size: 4.6cqw; line-height: 1.05; letter-spacing: -0.02em; color: var(--lime); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass__desc { max-width: 38em; margin-top: 2cqw; font-size: max(9.5px, 1.65cqw); line-height: 1.5; color: rgb(255 255 255 / 0.92); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pass__ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8cqw; margin-top: max(6px, 1.2cqw); }
.pass__step { display: grid; gap: 0.9cqw; min-width: 0; }
.pass__step i { display: block; height: max(3px, 0.55cqw); border-radius: 99px; background: rgb(255 255 255 / 0.24); }
.pass__step.on i { background: var(--lime); }
.pass__step > span { display: grid; gap: 0.2cqw; font-family: var(--font-mono); font-size: max(7px, 1.05cqw); line-height: 1.25; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.86); }
.pass__step b, .pass__step em { font: inherit; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass__step.cur > span { color: var(--lime); font-weight: 500; }
.pass__stub { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 2.4cqw; padding: max(8px, 1.7cqw) max(16px, 5.6cqw); background: #FFFFFF; color: var(--ink); font-family: var(--font-mono); font-size: max(7.5px, 1.15cqw); line-height: 1.4; letter-spacing: 0.06em; }
.pass__meta { display: flex; flex-wrap: wrap; gap: 0.4cqw 3.4cqw; min-width: 0; }
.pass__meta > span { color: var(--ink-3); white-space: nowrap; }
.pass__meta > span > span { text-transform: uppercase; }
.pass__meta b { margin-left: 0.6em; font-weight: 500; color: var(--ink); }
.pass__url { color: var(--ink-2); }
.pass__qr { width: max(22px, 5.8cqw); height: auto; }
.pass__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 0.3s;
  /* aibility-allow-decorative-background: cursor glare of the certificate card on aibility.org/start */
  background: radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgb(255 255 255 / 0.48), rgb(255 255 255 / 0.06) 52%, transparent 84%), radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgb(255 255 255 / 0.22), transparent 78%); }
.pass.is-hover .pass__glare { opacity: 0.18; }
/* placements */
.cert-stack .pass { position: absolute; right: -8%; bottom: -12%; width: 60%; --pass-rot: -3deg; }
@media (max-width: 640px) { .cert-stack .pass { position: relative; right: auto; bottom: auto; width: 100%; --pass-rot: -1.5deg; margin-top: 16px; } }
.path__ui .pass { width: min(100%, 440px); margin-bottom: 36px; }
.loop-scene .pass { width: min(88%, 460px); }
@media (prefers-reduced-motion: reduce) { .pass { transition: none; } }

/* ---------- start.html (port of aibility.org/start) ---------- */
body:has(.start) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #FFFFFF; }
body:has(.start) main { flex: 1; display: flex; }
/* white page, the hero sits in the web's cream frame (--frame-* tokens are defined in the frame block below) */
.start { margin: 0 var(--frame-gap) var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream); }
.start-top { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 var(--gutter); flex-shrink: 0; }
.start { flex: 1; display: flex; align-items: center; padding: 48px 0 80px; }
.start__wrap { display: flex; align-items: center; gap: 72px; }
.start__copy { flex: 0 1 600px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.start__eyebrow { margin-bottom: 24px; }
.start__h1 { margin: 0 0 32px; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.start__h1 em { font-style: normal; color: var(--purple); }
.start__cta { height: 60px; padding: 0 40px; font-size: 1.06rem; }
.start__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.start__chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.start__chip svg { width: 14px; height: 14px; color: var(--purple); }
.start__dot { width: 8px; height: 8px; border-radius: 50%; background: #3B9F5C; }
.start__media { flex: 0 0 520px; width: 520px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.start__passwrap { width: 100%; animation: start-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both, start-float 6s ease-in-out 0.7s infinite; }
.start__passwrap .pass { width: 100%; }
@keyframes start-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes start-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.start__share { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 24px; border-radius: var(--r-pill); background: #0A66C2; color: #fff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.015em; text-decoration: none; transition: background-color 0.15s; }
.start__share:hover { background: #004182; color: #fff; }
.start-foot { display: flex; justify-content: center; gap: 18px; padding: 0 var(--gutter) 24px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; }
.start-foot a { color: var(--ink-3); text-decoration: none; }
.start-foot a:hover { color: var(--ink); }
@media (max-width: 980px) {
  .start { align-items: flex-start; padding: 32px 0 56px; }
  .start__wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .start__copy, .start__media { display: contents; }
  .start__eyebrow { order: 1; margin-bottom: 16px; }
  .start__h1 { order: 2; margin-bottom: 24px; font-size: clamp(2.3rem, 1.6rem + 3vw, 2.7rem); }
  .start__cta { order: 4; width: 100%; justify-content: center; }
  .start__chips { order: 6; justify-content: center; margin-top: 16px; gap: 6px; flex-wrap: nowrap; }
  .start__chip { flex: 1 1 0; min-width: 0; justify-content: center; height: 40px; padding: 0 10px; font-size: 0.68rem; letter-spacing: 0; }
  .start__passwrap { order: 7; margin-top: 48px; }
  .start__passwrap .pass { --pass-rot: -2deg; }
  .start__share { display: none; }
}
@media (prefers-reduced-motion: reduce) { .start__passwrap { animation: none; } }
/* paths: certificate card sits on lilac; team card moves to blue */
.path--a { --surf: var(--p-lilac); background: var(--p-lilac); }
.path--a, .path--a .path__q, .path--a .path__go { color: var(--purple-deep); }
.path--a .path__p, .path--a .kicker { color: rgb(32 21 71 / 0.8); }
.path--c { --surf: var(--p-blue); background: var(--p-blue); }
.path--c, .path--c .path__q, .path--c .path__go { color: #102A4C; }
.path--c .path__p, .path--c .kicker { color: rgb(16 42 76 / 0.8); }
.path--a .path__ui { place-items: center; padding-bottom: 8px; }

/* ---------- Home: DATA + METODIKA (numbers lead to the principles, then to metodika.html) ---------- */
.insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.insight { display: flex; flex-direction: column; min-height: 300px; padding: 28px 24px; border-radius: 20px; background: var(--tile); color: var(--ink); }
.insight__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.8rem, 2.2rem + 1.6vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.insight__n small { font-size: 0.55em; }
.insight__t { margin-top: 10px; font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); }
.insight__bar { display: block; height: 4px; margin-top: 14px; border-radius: 4px; background: rgb(27 27 27 / 0.12); overflow: hidden; }
.insight__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform: scaleX(var(--v)); transform-origin: left; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.insight__test { margin: 24px 0 0; font-size: 0.94rem; line-height: 1.5; color: var(--ink) !important; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.insight__p { margin-top: auto; padding-top: 16px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
html:not(.no-js) .insights:not(.is-in) .insight__bar i { transform: scaleX(0); }
html:not(.no-js) .insight:not(.is-shown) .insight__test, html:not(.no-js) .insight:not(.is-shown) .insight__p { opacity: 0; transform: translateY(8px); }
.method-card { margin-top: 16px; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--card); box-shadow: var(--sh-2); color: var(--ink); }
.method-card .kicker { color: var(--purple) !important; }
.method-card__h { max-width: 36rem; margin: 8px 0 0; color: var(--ink); }
.method-card p { color: var(--ink-2) !important; }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.pchips li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #EFEBE5; font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-2); transition: background-color 0.3s, color 0.3s, box-shadow 0.25s; }
.pchips li.is-lit { background: var(--tile); color: var(--ink); font-weight: 600; }
html:not(.no-js) .pchips li.is-lit:not(.on) { background: #EFEBE5; color: var(--ink-2); font-weight: 400; }
.pchips li.is-hot { box-shadow: 0 0 0 2px var(--ink); }
.method-card__p { max-width: 40rem; margin: 28px 0 0; }
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.phases li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.phases__bar { display: block; height: 6px; margin-bottom: 8px; border-radius: 3px; background: rgb(27 27 27 / 0.14); transform-origin: left; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.phases b { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--ink); }
.phases__name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.phases__bridge { position: absolute; top: 3px; left: -6px; transform: translate(-50%, -50%); z-index: 1; padding: 6px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--ink-inv); font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; transition: opacity 0.3s, transform 0.3s, background-color 0.25s, color 0.25s; }
.phases__bridge.is-hot { background: var(--tile); color: var(--ink); }
html:not(.no-js) .method-card:not(.is-drawn) .phases__bar { transform: scaleX(0); }
html:not(.no-js) .method-card:not(.is-bridged) .phases__bridge { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
.phases__note { max-width: 44rem; margin: 20px 0 0; font-size: 0.9rem; transition: opacity 0.4s; }
html:not(.no-js) .method-card:not(.is-bridged) .phases__note { opacity: 0; }
.method-card__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.method-card__cta .small { color: var(--ink-3) !important; }
.data-foot { margin-top: 24px; max-width: 60rem; }
@media (max-width: 1023px) { .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .phases b { font-size: 1rem; } }
@media (max-width: 640px) {
  .insights { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .insight { display: grid; grid-template-columns: 88px 1fr; column-gap: 12px; min-height: 0; padding: 22px 20px; }
  .insight__n { grid-row: 1 / span 2; font-size: 2.4rem; }
  .insight__t { margin-top: 0; }
  .insight__bar { grid-column: 2; }
  .insight__test, .insight__p { grid-column: 1 / -1; }
  .insight__test { margin-top: 16px; }
  .method-card { padding: 24px 20px; border-radius: 20px; }
  .pchips { gap: 6px; }
  .pchips li { width: 36px; height: 36px; }
  .phases { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .phases li { padding-left: 20px; }
  .phases__bar { position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; height: auto; margin: 0; transform-origin: top; }
  html:not(.no-js) .method-card:not(.is-drawn) .phases__bar { transform: scaleY(0); }
  .phases__bridge { position: static; transform: none; align-self: flex-start; margin-bottom: 2px; }
  html:not(.no-js) .method-card:not(.is-bridged) .phases__bridge { transform: scale(0.96); }
  .method-card__cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .insight__bar i, .insight__test, .insight__p, .phases__bar, .phases__bridge, .phases__note, .pchips li { transition: none !important; } }
/* insight tiles: principle label, then the rule in bold */
.insight__p { margin-top: auto; padding-top: 20px; }
.insight__test { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.01em; }
@media (max-width: 640px) { .insight__p { padding-top: 16px; } .insight__test { margin-top: 4px; } }
/* case studies CTA: centred, more prominent */
.cs-cta { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; margin-top: 24px; padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 48px); text-align: center; border-radius: var(--r-xl); background: var(--p-lilac); box-shadow: none; }
.cs-cta__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--card); color: var(--purple-deep); }
.cs-cta .kicker { color: rgb(32 21 71 / 0.75); }
.cs-cta__h { margin: 0; max-width: 20em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--purple-deep); text-wrap: balance; }
.cs-cta__p { margin: 0; max-width: 34rem; color: rgb(32 21 71 / 0.82); }
.cs-cta .btn { margin-top: 8px; }
@media (max-width: 760px) { .cs-cta .btn { width: 100%; justify-content: center; } }

/* ---------- Pricing: copy + white plan card (lab/sekce.html #6) ---------- */
.pwrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pcopy { display: grid; gap: 18px; justify-items: start; }
.pcopy .h2, .pcopy .lead { margin: 0; }
.pfacts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pfacts li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.pfacts svg { width: 16px; height: 16px; flex: none; color: var(--purple); stroke-width: 2.2; }
.pfacts a { color: var(--purple); font-weight: 600; }
.pplan { padding: 30px 32px 18px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.pplan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pplan__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
.pplan__badge { padding: 4px 10px; border-radius: var(--r-pill); background: var(--p-lilac); color: var(--purple-deep); font-size: 0.76rem; font-weight: 600; }
.pplan__price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.pplan__price strong { font-family: var(--font-display); font-weight: 500; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.pplan__price s { color: var(--ink-3); font-size: 1.05rem; }
.pplan__per { margin: 4px 0 0; color: var(--ink-3); font-size: 0.92rem; }
.pplan__cta { margin-top: 20px; }
.pplan__fine { display: block; margin-top: 10px; text-align: center; font-size: 0.8rem; color: var(--ink-3); }
.pplan__k { display: block; margin: 24px 0 4px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pinc { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; margin-inline: -8px; padding: 12px 8px; border-radius: 12px; transition: background-color 0.25s; }
.pinc:hover { background: #FAF7F2; }
.pinc__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c); color: var(--purple-deep); transition: transform 0.4s var(--ease-out); }
.pinc:hover .pinc__ic { transform: rotate(-6deg) scale(1.06); }
.pinc__ic svg { width: 18px; height: 18px; }
.pinc b { display: block; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.pinc small { display: block; font-size: 0.86rem; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 900px) { .pwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pplan { padding: 24px 22px 14px; } .pplan__price strong { font-size: 2.5rem; } }

/* ---------- Coaching: tools, features × ways (lab/sekce.html #2) ---------- */
.ttab { padding: 10px 12px 12px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.ttab table { width: 100%; border-collapse: separate; border-spacing: 10px 0; }
.ttab th, .ttab td { padding: 18px 14px; text-align: center; vertical-align: middle; border-top: 1px solid var(--line-soft); transition: background-color 0.25s; }
.ttab thead th { border-top: 0; vertical-align: bottom; }
.ttab__grp th { padding: 14px 14px 4px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ttab__grp th.tt-hi { color: var(--purple); border-radius: 18px 18px 0 0; }
.ttab thead tr:not(.ttab__grp) th { padding: 12px 14px 18px; }
.ttab thead tr:not(.ttab__grp) th.tt-hi { border-radius: 0; }
/* each preferred column is its own rounded block */
.ttab .tt-hi { background: #F6F1FF; }
.ttab__grp th.tt-hi { background: none; }
.ttab thead tr:not(.ttab__grp) th.tt-hi { border-radius: 18px 18px 0 0; }
.ttab tbody tr:last-child .tt-hi { border-radius: 0 0 18px 18px; }
.tt-g { display: grid; justify-items: center; gap: 10px; }
.tt-g b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.tt-g small { max-width: 17em; font-size: 0.8rem; font-weight: 400; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
.tt-g .tools { justify-content: center; }
.tt-g .tool { width: 38px; height: 38px; border: 0; border-radius: 12px; box-shadow: var(--sh-1); }
.tt-g .tool img { width: 22px; height: 22px; }
.tool--more { font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.tt-app { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--p-yellow); color: #4A3500; }
.tt-app svg { width: 20px; height: 20px; }
.ttab tbody th { width: 28%; padding-left: 6px; text-align: left; }
.tt-feat { display: flex; align-items: center; gap: 14px; }
.tt-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: var(--purple-deep); }
.tt-ic svg { width: 19px; height: 19px; }
.tt-feat b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.tt-feat small { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 400; color: var(--ink-3); }
.tt-ok { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--purple); color: #fff; transition: transform 0.35s var(--ease-out); }
.tt-ok svg { width: 14px; height: 14px; stroke-width: 2.4; }
.ttab tr:hover .tt-ok { transform: scale(1.1); }
.tt-no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: rgb(27 27 27 / 0.22); }
.tt-lbl { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--ink-3); }
.tt-copilot { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 16px; padding: 18px 22px; border-radius: 20px; background: var(--card); box-shadow: var(--sh-1); }
.tt-copilot__logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #F6F2EC; }
.tt-copilot b { font-weight: 600; color: var(--ink); }
.tt-copilot p { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 760px) {
  .ttab { padding: 6px 18px 14px; }
  .ttab table { border-spacing: 0; }
  .ttab thead { display: none; }
  .ttab tbody, .ttab tr, .ttab th, .ttab td { display: block; width: auto; }
  .ttab tbody tr { padding: 16px 0; border-top: 1px solid var(--line-soft); }
  .ttab tbody tr:first-child { border-top: 0; }
  .ttab tbody th { width: auto; padding: 0 0 10px; border: 0; }
  .ttab td { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 12px !important; text-align: right; }
  .ttab td::before { content: attr(data-g); text-align: left; font-size: 0.88rem; color: var(--ink-2); }
  .tt-lbl { display: none; }
  .tt-ok { width: 26px; height: 26px; }
}

/* ---------- Home: five situations with icons and colour (lab/sekce.html #8) ---------- */
.patterns.sit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.sit__list { display: grid; gap: 10px; }
.sit__btn { display: grid; grid-template-columns: 48px 1fr 28px; gap: 16px; align-items: center; width: 100%; padding: 16px 18px; border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--sh-1); color: var(--ink); text-align: left; cursor: pointer; transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.sit__btn:hover { box-shadow: var(--sh-2); }
.sit__btn[aria-selected="true"] { background: var(--c); box-shadow: var(--sh-2); }
.sit__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--c); color: var(--ink); transition: background-color 0.35s, transform 0.5s var(--ease-out); }
.sit__ic svg { width: 22px; height: 22px; stroke-width: 1.35; }
.sit__btn[aria-selected="true"] .sit__ic { background: var(--card); transform: rotate(-8deg) scale(1.05); }
.sit__btn:hover .sit__ic { transform: rotate(-8deg); }
.sit__t { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.sit__q { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--ink-2); }
.sit__ar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-3); transition: transform 0.35s var(--ease-out), background-color 0.3s, color 0.3s; }
.sit__btn[aria-selected="true"] .sit__ar { background: var(--ink); color: #fff; transform: translateX(4px); }
.sit__panel { overflow: hidden; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.sit__top { padding: 30px 32px 28px; background: var(--c); }
.sit__scene { margin: 0; max-width: 22em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.sit__body { display: grid; gap: 20px; padding: 26px 32px 30px; }
.sit__blk { display: grid; gap: 8px; }
.sit__blk p { margin: 0; color: var(--ink-2); }
.sit__bars { display: grid; gap: 8px; margin-top: 4px; }
.sit__bar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 44px; gap: 12px; align-items: center; font-size: 0.84rem; color: var(--ink-2); }
.sit__bar i { position: relative; height: 12px; overflow: hidden; border-radius: 99px; background: #EEEAE3; }
.sit__bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--bc); transform-origin: left; }
.sit__panel.is-entering .sit__bar i::after { animation: sit-grow 1s var(--ease-out) both; }
.sit__bar b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; text-align: right; color: var(--ink); }
.sit__panel.is-entering .sit__top, .sit__panel.is-entering .sit__body { animation: sit-in 0.45s var(--ease-out) both; }
.sit__panel.is-entering .sit__body { animation-delay: 0.05s; }
@keyframes sit-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sit-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .patterns.sit { grid-template-columns: minmax(0, 1fr); }
  .sit__panels:empty { display: none; }
  .sit__list .sit__panel { margin: 2px 0 10px; }
}
@media (max-width: 640px) {
  .sit__btn { grid-template-columns: 42px 1fr 24px; gap: 12px; padding: 14px; }
  .sit__ic { width: 42px; height: 42px; }
  .sit__top { padding: 22px; }
  .sit__body { padding: 20px 22px 24px; }
  .sit__bar { grid-template-columns: minmax(90px, 1fr) 1.4fr 40px; }
  .sit__body .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sit__panel.is-entering .sit__top, .sit__panel.is-entering .sit__body, .sit__panel.is-entering .sit__bar i::after { animation: none; } }

/* ---------- Coaching: what you keep, pinned and switched by scroll (lab/sekce.html #4) ---------- */
.section--keep { padding-bottom: clamp(48px, 6vw, 88px); }
.keepx { position: relative; height: calc(100vh + 3 * 50vh); }
.keepx__pin { position: sticky; top: 80px; display: grid; align-content: center; gap: clamp(20px, 3vh, 36px); min-height: calc(100vh - 100px); }
.keepx__head { display: grid; gap: 10px; max-width: 46rem; }
.keepx__head .h2, .keepx__head .lead { margin: 0; }
.keepx__head .h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); }
.keepx__head .lead { font-size: 1.02rem; }
.keepx__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: stretch; }
.keep__list { display: grid; gap: 4px; align-content: center; }
.keep__item { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; width: 100%; padding: 16px 20px; border: 0; border-radius: 20px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color 0.4s, box-shadow 0.5s var(--ease-out); }
.keep__item:hover { background: rgb(27 27 27 / 0.035); }
.keep__item[aria-selected="true"] { background: var(--card); box-shadow: var(--sh-2); }
.keep__n { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; line-height: 1.9; color: var(--ink-3); transition: color 0.3s; }
.keep__item[aria-selected="true"] .keep__n { color: var(--purple); }
.keep__item b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-2); transition: color 0.3s; }
.keep__item[aria-selected="true"] b { color: var(--ink); }
.keep__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.keep__item[aria-selected="true"] .keep__more { grid-template-rows: 1fr; }
.keep__more > span { overflow: hidden; }
.keep__p, .keep__story { display: block; padding-top: 6px; font-size: 0.94rem; line-height: 1.5; color: var(--ink-2); }
.keep__story { font-size: 0.86rem; color: var(--ink-3); }
.keep__badges { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.keep__mv { display: none; }
.keepx__dots { display: flex; gap: 6px; margin-top: 12px; padding-left: 20px; }
.keepx__dots i { width: 6px; height: 6px; border-radius: 99px; background: rgb(27 27 27 / 0.15); transition: width 0.4s var(--ease-out), background-color 0.4s; }
.keepx__dots i.on { width: 22px; background: var(--purple); }
.keep__stage { position: relative; min-height: min(440px, 52vh); overflow: hidden; border-radius: 32px; background: var(--tint, #EFE7FF); transition: background-color 0.6s var(--ease-out); }
.keep__scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 36px; opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out); pointer-events: none; }
.keep__scene.is-on { opacity: 1; transform: none; }
/* app-like mini UI */
.kui { display: grid; gap: 12px; width: min(400px, 100%); padding: 20px; border-radius: 20px; background: var(--card); box-shadow: var(--sh-2); font-size: 0.88rem; color: var(--ink); }
.kui__head { display: flex; align-items: center; gap: 10px; }
.kui__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--p-lilac); color: var(--purple-deep); }
.kui__ic svg { width: 17px; height: 17px; }
.kui__t b { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); font-family: var(--font-ui); letter-spacing: 0; }
.kui__t small { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); }
.kui__av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--p-peach); font-size: 0.74rem; font-weight: 600; }
.kui__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.kui__row--top { padding-top: 0; border-top: 0; }
.kui__row b { font-size: 0.9rem; font-weight: 600; font-family: var(--font-ui); color: var(--ink); letter-spacing: 0; }
.kui__muted { color: var(--ink-3); font-size: 0.78rem; }
.kui__tools { display: flex; gap: 8px; }
.kpill { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: #F3EFE8; color: var(--ink-2); font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
.kpill svg { width: 13px; height: 13px; }
.kpill--lilac { background: var(--p-lilac); color: var(--purple-deep); }
.kpill--blue { background: var(--p-blue); color: #13325B; }
.kpill--yellow { background: var(--p-yellow); color: #4A3500; }
.kpill--green { background: var(--p-green); color: #1D4D28; }
.kpill--badge { background: #F1EBFF; color: var(--purple); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.kagent { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #F7F4EF; }
.kagent .kui__ic { width: 30px; height: 30px; border-radius: 9px; }
.kagent--on { background: #F1EBFF; }
.kagent b { display: block; font-size: 0.85rem; font-weight: 600; font-family: var(--font-ui); color: var(--ink); letter-spacing: 0; }
.kagent small { display: block; font-size: 0.72rem; color: var(--ink-3); }
.kstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kstats span { padding: 10px 12px; border-radius: 12px; background: #F7F4EF; font-size: 0.72rem; color: var(--ink-3); }
.kstats b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.kcmp { display: grid; grid-template-columns: 56px 1fr 30px; gap: 12px; align-items: center; font-size: 0.8rem; color: var(--ink-3); }
.kcmp i { position: relative; height: 10px; overflow: hidden; border-radius: 99px; background: #EEEAE3; }
.kcmp i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--purple-light); }
.kcmp--now i::after { background: var(--purple); }
.kcmp b { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; text-align: right; color: var(--ink); }
@media (max-width: 900px) {
  .keepx { height: auto; }
  .keepx__pin { position: static; min-height: 0; }
  .keepx__grid { grid-template-columns: minmax(0, 1fr); }
  .keep__stage, .keepx__dots { display: none; }
  .keep__item, .keep__item:hover { margin-bottom: 10px; background: var(--card); box-shadow: var(--sh-2); cursor: default; }
  .keep__item b { color: var(--ink); }
  .keep__item .keep__n { color: var(--purple); }
  .keep__more { grid-template-rows: 1fr; }
  .keep__mv { display: grid; place-items: center; grid-column: 1 / -1; margin-top: 14px; padding: 20px 14px; border-radius: 18px; background: var(--tint); }
}
@media (prefers-reduced-motion: reduce) { .keep__scene, .keep__more, .keep__item, .keep__stage { transition: none; } }

/* ---------- Final CTA: two paths, for me and for the team (lab/sekce.html #9B) ---------- */
.cta2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cta2__card { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 480px; overflow: hidden; border-radius: 32px; }
.cta2__card--me { background: var(--p-yellow); color: #3A2A00; }
.cta2__card--team { background: var(--purple-deep); color: var(--ink-inv); }
.cta2__copy { display: grid; gap: 14px; justify-items: start; padding: clamp(26px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px) 22px; }
.cta2__copy .kicker { color: inherit !important; opacity: 0.72; }
.cta2__h { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; color: inherit; text-wrap: balance; }
.cta2__copy p { margin: 0; max-width: 32rem; color: inherit; opacity: 0.85; }
.cta2__card--team .cta2__copy p { color: rgb(250 244 238 / 0.8); opacity: 1; }
.cta2__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.cta2__card--me .link-arrow { color: #3A2A00; }
.cta2__checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.cta2__checks li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.6); font-size: 0.8rem; font-weight: 500; }
.cta2__checks svg { width: 13px; height: 13px; color: var(--purple); stroke-width: 2.4; }
.cta2__ui { display: grid; place-items: end center; padding: 0 clamp(20px, 3vw, 36px); }
.cta2__ui > * { transform: translateY(16px); transition: transform 0.6s var(--ease-out); }
.cta2__card:hover .cta2__ui > * { transform: translateY(4px); }
.cta2__ui .pass { width: min(100%, 420px); margin-bottom: 40px; }
.cta2__card--team .kui { color: var(--ink); }
.cta2__proof { margin: 18px 0 0; text-align: center; font-size: 0.9rem; color: var(--ink-3); }
@media (max-width: 1000px) { .cta2 { grid-template-columns: minmax(0, 1fr); } .cta2__card { min-height: 0; } .cta2__ui { padding-bottom: 0; } }
@media (max-width: 640px) { .cta2__row .btn { width: 100%; justify-content: center; } }

/* =====================================================================
   App skin: product mockups look like the Superpowered Professional app
   (mono purple labels, pastel mono tags, level pill, numbered steps,
   prompt toolbar, soft white cards).
   ===================================================================== */
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
.app-label--muted { color: var(--ink-3); }
.app-tag { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--r-pill); background: #F3EFE8; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.app-tag--lilac { background: #E9DFFF; color: var(--purple); }
.app-tag--peach { background: #FFE3D3; color: #8A4A22; }
.app-tag--green { background: #D9F2DD; color: #256B38; }
.app-time { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.app-time svg { width: 13px; height: 13px; }
.app-lvl { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); background: #E9DFFF; font-family: var(--font-mono); font-size: 0.66rem; color: var(--purple); white-space: nowrap; }
.app-lvl--grey { background: #F1EEE9; color: var(--ink-2); }
.app-lvl--deep { background: var(--purple); color: #fff; }
.app-progress { height: 8px; border-radius: 99px; background: #F1EEE9; overflow: hidden; }
.app-progress i { display: block; height: 100%; border-radius: inherit; background: #7CCB93; transition: width 1.2s var(--ease-out); }
.app-note { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; color: var(--ink-3); }
.app-cell { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #FAF7F2; }
.app-cell p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink); }
.app-cell--next { background: #F4EEFF; }
.app-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid #E4DFD8; background: var(--card); font-size: 0.74rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.app-btn svg { width: 13px; height: 13px; }
.app-btn--primary { border-color: var(--purple); background: var(--purple); color: #fff; }

/* report */
.report.app { display: grid; gap: 12px; padding: 20px 22px 22px; border: 0; border-radius: 24px; background: var(--card); box-shadow: var(--sh-3); color: var(--ink); }
.report.app .report__top, .report.app .report__body { display: none; }
.report__hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.report__lvl { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.report__name { color: var(--purple); }
.report__pts { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-3); }
.report__dims { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.report.app .bars { display: grid; gap: 7px; }
.report.app .bars__row { display: grid; grid-template-columns: 76px 1fr 26px; gap: 10px; align-items: center; font-size: 0.76rem; color: var(--ink-2); }
.report.app .bars__track { position: relative; height: 6px; border-radius: 99px; background: #F1EEE9; overflow: hidden; }
.report.app .bars__self { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: inherit; background: #DCD0FA; transition: width 1.2s var(--ease-out); }
.report.app .bars__real { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: inherit; background: var(--purple); transition: width 1.2s var(--ease-out) 0.2s; }
.report.app .num { font-family: var(--font-mono); font-size: 0.74rem; text-align: right; color: var(--ink); }
.report.app .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.68rem; color: var(--ink-3); }
.report.app .legend i { display: inline-block; width: 10px; height: 6px; margin-right: 6px; border-radius: 3px; vertical-align: middle; }
.legend__self { background: #DCD0FA; }
.legend__real { background: var(--purple); }
.report__cells { display: grid; gap: 8px; }
.report.app .report__quote { margin-top: 4px; font-size: 0.72rem; font-style: italic; color: var(--ink-3); }

/* workout */
.workout.app { display: grid; gap: 12px; padding: 20px 22px 20px; border: 0; border-radius: 24px; background: var(--card); box-shadow: var(--sh-3); color: var(--ink); }
.workout.app .workout__head, .workout.app .workout__body { display: contents; }
.workout.app .workout__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.workout__steps { display: grid; gap: 4px; }
.workout.app .workout__step { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border: 0; background: none; font-size: 0.82rem; color: var(--ink); }
.workout__n { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #E9DFFF; transition: background-color 0.3s; }
.workout__n b { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--purple); transition: opacity 0.2s; }
.workout__n svg { position: absolute; width: 14px; height: 14px; color: #fff; stroke-width: 2.4; opacity: 0; transition: opacity 0.2s; }
.workout__step.is-done .workout__n { background: var(--purple); }
.workout__step.is-done .workout__n b { opacity: 0; }
.workout__step.is-done .workout__n svg { opacity: 1; }
.workout.app .workout__min { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.workout.app .progress { height: 6px; border-radius: 99px; background: #F1EEE9; overflow: hidden; }
.workout.app .progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #7CCB93; transition: width 0.6s var(--ease-out); }

/* team overview */
.teamview.app { padding: 0; border: 0; border-radius: 24px; background: var(--card); box-shadow: var(--sh-3); overflow: hidden; color: var(--ink); }
.teamview.app .teamview__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 0; border: 0; }
.teamview__title { padding: 4px 20px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ink); }
.teamview.app .teamview__dist { display: grid; gap: 8px; padding: 14px 20px 16px; border-bottom: 1px solid var(--line-soft); }
.teamview.app table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.teamview.app th { padding: 12px 20px 8px; text-align: left; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-soft); }
.teamview.app td { padding: 11px 20px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.teamview.app td:first-child { font-weight: 500; }
.tv-team { display: inline-flex; align-items: center; gap: 10px; }
.tv-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--ink); }
.teamview__foot { padding: 12px 20px 14px; }

/* chat mock cards inside the AI tool window */
.coach-card .coach-card__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
.coach-card .coach-card__time { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.coach-card .coach-card__time svg { width: 12px; height: 12px; }
.coach-card { border: 0; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px #EFEAE3, var(--sh-1); }
.coach-card .coach-card__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.coach-steps { counter-reset: cs; }
.coach-steps li { counter-increment: cs; }
.coach-steps li::before { content: counter(cs, decimal-leading-zero) !important; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E9DFFF !important; color: var(--purple) !important; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; }
.coach-card--result { display: grid; gap: 10px; }
.coach-card--result .report__lvl { font-size: 1.5rem; }
.app-progress--full i { transition: none; }

/* small mockups (product cards, keep, CTA) adopt the app labels */
.pui__row:first-child > b, .kui__row--top > b { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
.pui, .kui { border-radius: 20px; box-shadow: 0 0 0 1px #EFEAE3, var(--sh-2); }
.ptag, .kpill { font-size: 0.7rem; }
.coach-steps li { grid-template-columns: 24px 1fr; align-items: center; }
.teamview.app th { white-space: nowrap; padding: 12px 14px 8px; }
.teamview.app td { padding: 10px 14px; }
.teamview.app th:first-child, .teamview.app td:first-child { padding-left: 20px; }
.teamview.app td:last-child { font-size: 0.76rem; color: var(--ink-2); }
.tv-team { white-space: nowrap; }
@media (max-width: 640px) { .teamview.app th:nth-child(4), .teamview.app td:nth-child(4) { display: none; } }
.cert-stack .report__cells .app-cell--next { display: none; }

/* header: just "AI" */
.ai-open__label { display: inline !important; }
/* home loop: compact report, room for the step switch */
.loop__visual .loop-scene { padding-top: 84px; }
.loop-scene .report.app .report__cells, .loop-scene .report.app .app-note,
.loop__mobile-visual .report.app .report__cells, .loop__mobile-visual .report.app .app-note { display: none; }
.loop-scene .report.app { width: min(100%, 420px); }
/* FAQ: centred head, two columns */
.container.faq-layout { display: block; }
.faq-layout > .stack { display: grid; justify-items: center; gap: 12px; max-width: 46rem; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.faq-layout > .stack .h2, .faq-layout > .stack p { margin: 0; }
.faq-layout .faq { display: block; max-width: none; columns: 2; column-gap: clamp(28px, 4vw, 56px); border-top: 0; }
.faq-layout .faq details { break-inside: avoid; border-top: 1px solid var(--line); border-bottom: 0; }
@media (max-width: 900px) { .faq-layout .faq { columns: 1; } .faq-layout .faq details:last-child { border-bottom: 1px solid var(--line); } }
/* final CTA: logos strip, team card as strong as the personal one */
.cta2__logos { margin-top: clamp(28px, 4vw, 44px); }
.cta2__logos .logos__label { margin-bottom: 18px; text-align: center; }
.cta2__card--team .link-arrow { color: var(--purple-light); }
.cta2__card--team .cta2__checks li { background: rgb(255 255 255 / 0.08); color: var(--ink-inv); }
.cta2__card--team .cta2__checks svg { color: var(--purple-light); }
.cta2__card--team .kui .pui-dist { display: flex; height: 12px; gap: 2px; border-radius: 99px; overflow: hidden; }
.cta2__card--team .kui .pui-dist i { transform: none; }
/* home data: tiles are data only; the methodology card sits under them */
.insight { min-height: 0; }
.method2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 16px; padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: var(--card); box-shadow: var(--sh-2); color: var(--ink); }
.method2__copy { display: grid; gap: 14px; justify-items: start; }
.method2 .kicker { color: var(--purple) !important; }
.method2__h { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.method2__copy p { margin: 0; max-width: 34rem; color: var(--ink-2) !important; }
.mfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mfact { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-radius: 18px; background: var(--tile); color: var(--ink); }
.mfact b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; }
.mfact span { font-size: 0.9rem; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 900px) { .method2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .mfacts { grid-template-columns: minmax(0, 1fr); } .method2__copy .btn { width: 100%; justify-content: center; } }
.fitc__sub { display: block; margin: 18px 0 2px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.fitc__box li b { font-weight: 600; }
.fitc__box li a { color: var(--purple); }

/* ---------- Certifikát: how the test runs + data flow, app style ---------- */
.tstart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.tsteps { display: grid; gap: 14px; align-content: start; padding: 26px 28px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.tsteps ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tsteps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.tsteps li:first-child { border-top: 0; }
.tsteps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #E9DFFF; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--purple); }
.tsteps b { display: block; font-weight: 600; color: var(--ink); }
.tsteps small { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--ink-3); }
.tstart__stage { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 36px); border-radius: var(--r-xl); background: #EFE7FF; }
.flow2 { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; max-width: 640px; }
.flow2__box { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px #EFEAE3, var(--sh-2); }
.flow2__box--sp { box-shadow: 0 0 0 2px var(--purple-light), var(--sh-2); }
.flow2__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flow2__note { font-size: 0.8rem; color: var(--ink-3); }
.kpill--lock { background: #F3EFE8; color: var(--ink-2); }
.kpill--lock svg { width: 12px; height: 12px; }
.flow2__wire { position: relative; display: grid; place-items: center; height: 40px; }
.flow2__wire svg { position: absolute; inset: 50% 0 auto; width: 100%; height: 12px; transform: translateY(-50%); overflow: visible; }
.flow2__wire path { fill: none; stroke: var(--purple); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; animation: flow-dash 1.2s linear infinite; }
.flow2__wire span { position: relative; padding: 5px 10px; border-radius: var(--r-pill); background: var(--purple); color: #fff; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
@keyframes flow-dash { to { stroke-dashoffset: -24; } }
@media (max-width: 900px) { .tstart { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .flow2 { grid-template-columns: minmax(0, 1fr); }
  .flow2__wire { height: 56px; }
  .flow2__wire svg { inset: 0 auto 0 50%; width: 12px; height: 100%; transform: translateX(-50%) rotate(90deg); transform-origin: center; }
  .tsteps { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) { .flow2__wire path { animation: none; } }
@media (max-width: 640px) { .flow2__wire svg { display: none; } .flow2__wire::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--purple); } }

/* ---------- O nás: story in three chapters + founder quote ---------- */
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.story__ch { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: var(--tile); color: var(--ink); }
.story__ch:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -13px; z-index: 1; width: 10px; height: 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.story__n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(27 27 27 / 0.7); }
.story__big { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.story__ch p:not(.story__big) { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--ink-2); }
.story__ch a { color: var(--purple); font-weight: 600; }
.founder { display: grid; grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); gap: 0; margin: 16px 0 0; overflow: hidden; border-radius: var(--r-xl); background: var(--purple-deep); color: var(--ink-inv); }
.founder__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 25%; }
.founder__body { display: grid; gap: 16px; align-content: center; padding: clamp(28px, 4vw, 52px); }
.founder .kicker { color: var(--purple-light) !important; }
.founder blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-inv); }
.founder figcaption b { display: block; font-weight: 600; color: var(--ink-inv); }
.founder figcaption span { font-size: 0.9rem; color: rgb(250 244 238 / 0.7); }
@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__ch:not(:last-child)::after { top: auto; bottom: -13px; right: 50%; transform: translateX(50%) rotate(135deg); }
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__img { height: 260px; min-height: 0; }
}

/* ---------- Ceník: four white tiers, featured with an attached band (Mobbin: Airtable, Homerun, Circle) ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 16px; align-items: start; }
.tier { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.tier > :not(.tier__band) { padding-inline: clamp(20px, 2vw, 26px); }
.tier__band { display: block; padding: 9px 12px; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--purple); color: #fff; }
.tier__band--empty { background: none; }
.tier--featured { box-shadow: 0 0 0 2px var(--purple), var(--sh-3); }
.tier__head { display: flex; align-items: center; gap: 10px; padding-top: 18px; }
.tier__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--c); color: var(--purple-deep); }
.tier__ic svg { width: 18px; height: 18px; }
.tier__name { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); }
.tier__badge { margin-left: auto; padding: 3px 9px; border-radius: var(--r-pill); background: #E9DFFF; font-size: 0.72rem; font-weight: 600; color: var(--purple); white-space: nowrap; }
.tier__desc { margin: 12px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.tier__price { display: grid; gap: 2px; padding-top: 18px; }
.tier__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tier__amt { font-family: var(--font-display); font-weight: 500; font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.tier__amt--word { font-size: 2rem; }
.tier__row s { font-size: 0.95rem; color: var(--ink-3); }
.tier__per { font-size: 0.86rem; color: var(--ink-3); }
.tier__cta { display: grid; gap: 8px; padding-top: 18px; }
.tier__fine { font-size: 0.78rem; color: var(--ink-3); text-align: center; }
.tier__list { padding-top: 18px; padding-bottom: 24px; margin-top: 18px; border-top: 1px solid var(--line-soft); }
.tier__k { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tier__list ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.tier__list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.tier__list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--purple); stroke-width: 2.2; }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 16px; } .tier { grid-row: auto; grid-template-rows: none; } .tier__band--empty { display: none; } }
@media (max-width: 640px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tiers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiers--3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
/* /firmy without the individual plan: Tým and Firma side by side (Tom, 5. 10. 2026) */
.tiers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
@media (max-width: 760px) { .tiers--2 { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

/* ---------- Metodika v2 (content from docs.aibility.org, kept short) ---------- */
.mnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.mnav a { padding: 7px 13px; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); font-size: 0.86rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.mnav a:hover { background: #E9DFFF; color: var(--purple); }
.docs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.docs-row--end { justify-content: flex-end; }
.docs-link { font-size: 0.95rem; }
.q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.q3__c { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 26px; border-radius: var(--r-xl); background: var(--tile); color: var(--ink); }
.q3__n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: rgb(27 27 27 / 0.6); }
.q3__c .h3, .q3__c p { margin: 0; }
.q3__c p { color: var(--ink-2); }
.q3__c .app-lvl { margin-top: 6px; background: rgb(255 255 255 / 0.7); }
.q3__c .app-lvl svg { width: 12px; height: 12px; }
.lvls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lvl { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 14px; padding: 24px 22px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.lvl__top { display: flex; align-items: baseline; gap: 8px; }
.lvl__code { display: grid; place-items: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 9px; background: var(--tile); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--ink); }
.lvl__name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); }
.lvl__human { margin: 0; font-weight: 600; line-height: 1.4; color: var(--ink); }
.lvl__sig { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; list-style: none; }
.lvl__sig li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.lvl__sig svg { width: 14px; height: 14px; margin-top: 3px; color: var(--purple); stroke-width: 2.2; }
.lvl__range { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.lvl__range b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.lvl__track { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 99px; background: #F1EEE9; }
.lvl__track i { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--purple); }
.lvl__next { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-3); }
.spx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.spx__copy { display: grid; gap: 14px; justify-items: start; }
.spx__copy .h2, .spx__copy .lead, .spx__copy p { margin: 0; }
.spx__card { display: grid; gap: 18px; padding: 24px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.spx__row { display: grid; grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr); gap: 14px; align-items: start; }
.spx__part { display: grid; gap: 10px; }
.spx__op { align-self: center; font-family: var(--font-display); font-size: 1.8rem; color: var(--ink-3); }
.spx__base, .spx__mods { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.spx__base li, .spx__mods li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #FAF7F2; font-size: 0.84rem; color: var(--ink-2); }
.spx__base li.on { background: #E9DFFF; color: var(--purple-deep); font-weight: 600; }
.spx__base b, .spx__mods b { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; color: var(--ink); white-space: nowrap; }
.spx__ex { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.spx__res { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); }
.spx__res b { font-family: var(--font-display); font-size: 1.4rem; color: var(--purple); }
.spx__bar { display: flex; height: 14px; gap: 2px; overflow: hidden; border-radius: 99px; background: #F1EEE9; }
.spx__bar i { display: block; width: var(--w); background: var(--purple-light); }
.spx__bar i.base { background: var(--purple); }
.spx__bar i.neg { background: #E6B7A1; }
.dims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dim { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-1); }
.dim__n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--purple); }
.dim b { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.dim span:last-child { font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.ways2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ways2__c { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 24px 26px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.ways2__c--deep { box-shadow: 0 0 0 2px var(--purple-light), var(--sh-2); }
.ways2__c .h3, .ways2__c p { margin: 0; }
.ways2__c p { color: var(--ink-2); }
.profs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prof { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 24px; border-radius: var(--r-xl); background: var(--tile); color: var(--ink); }
.prof__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgb(255 255 255 / 0.7); }
.prof__ic svg { width: 21px; height: 21px; stroke-width: 1.4; }
.prof__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--ink); }
.prof p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.prof .prof__grow { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.65); }
.prof__grow b { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.prof__grow b svg { width: 14px; height: 14px; }
.prof__grow small { font-size: 0.8rem; color: var(--ink-3); }
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.area { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--card); box-shadow: var(--sh-1); }
.area__n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #E9DFFF; font-family: var(--font-mono); font-size: 0.7rem; color: var(--purple); }
.area b { font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--ink); }
@media (max-width: 1100px) { .lvls, .profs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dims { grid-template-columns: repeat(3, minmax(0, 1fr)); } .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .spx { grid-template-columns: minmax(0, 1fr); } .q3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .lvls, .profs, .ways2, .areas { grid-template-columns: minmax(0, 1fr); }
  .dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spx__row { grid-template-columns: minmax(0, 1fr); }
  .spx__op { justify-self: center; }
}
.prof__grow small { color: var(--ink-2); }
/* SP Score card: scale with level zones (no modifiers) */
.spx__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.spx__num strong { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.spx__num > span:not(.app-lvl) { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-3); }
.spx__num .app-lvl { align-self: center; margin-left: 4px; }
.spx__scale { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--p-peach) 0 24%, var(--p-yellow) 24% 45%, var(--p-lilac) 45% 78%, var(--p-blue) 78% 100%); }
.spx__mark { position: absolute; top: 50%; left: calc(var(--v) * 1%); width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50%; background: var(--purple); box-shadow: var(--sh-1); transform: translate(-50%, -50%); }
.spx__zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.spx__zones li { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: center; font-size: 0.82rem; color: var(--ink-2); }
.spx__zones i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.spx__zones b { grid-column: 2; font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; color: var(--ink-3); }
.spx__note { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 0.9rem; color: var(--ink-2); }
@media (max-width: 640px) { .spx__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- No kickers (25. 9.): plain labels where the text carries content ---------- */
.case__who { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.hlist__t { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* ---------- Jak to funguje, step 02: exercise + chat in one scene (25. 9.) ---------- */
.duo { position: relative; width: 100%; height: 100%; }
.duo > .workout { position: absolute; left: 2%; top: 3%; width: 56%; box-shadow: var(--sh-3); }
.duo > .window { position: absolute; right: 2%; bottom: 4%; top: auto; width: 48%; height: 50%; min-height: 0; overflow: hidden; box-shadow: var(--sh-3); }


/* ---------- Poznáváš se? Before / after, horizontal scroll (25. 9.) ----------
   Vertical scroll drives the track (js/main.js, [data-hs]); on mobile native swipe. */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; }
.ba__side { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px; border-radius: 20px; min-height: 250px; }
.ba__side--before { background: #EFEBE5; }
.ba__side--after { background: var(--c); }
.ba__tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgb(255 255 255 / .7); color: var(--ink-2); }
.ba__side--after .ba__tag { background: var(--ink); color: var(--ink-inv); }
.ba__vis { display: grid; align-content: center; gap: 8px; }
.ba__line { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ba__side--before .ba__line { color: var(--ink-2); }
.ba__arrow { align-self: center; justify-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin-inline: -12px; position: relative; z-index: 1; border-radius: 50%; background: var(--card); box-shadow: var(--sh-2); }
.ba__arrow svg { width: 18px; height: 18px; }

/* mini UI pieces inside the sides */
.bx { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgb(255 255 255 / .75); font-size: .8rem; color: var(--ink-2); }
.ba__side--after .bx { background: var(--card); box-shadow: var(--sh-1); }
.bx__row { display: flex; align-items: center; gap: 8px; }
.bx__row b { color: var(--ink); font-weight: 600; }
.bx__ok { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--sage-soft); color: var(--sage-deep); }
.bx__ok svg { width: 11px; height: 11px; stroke-width: 2.4; }
.bx__bub { justify-self: end; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 7px 11px; border-radius: 12px 12px 4px 12px; background: var(--card); color: var(--ink-2); font-size: .78rem; }
.ba__side--before .bx__bub { background: #fff; }
.bx__again { justify-self: start; font-size: .72rem; font-weight: 600; color: #9A4B1F; }
.bx__time { display: grid; gap: 6px; }
.bx__bar { display: flex; height: 26px; overflow: hidden; border-radius: 8px; font-size: .72rem; font-weight: 600; }
.bx__bar span { display: flex; align-items: center; padding-inline: 8px; white-space: nowrap; }
.bx__bar .ai { background: var(--ink); color: var(--ink-inv); }
.bx__bar .me { background: #D9D3CA; color: var(--ink); }
.ba__side--after .bx__bar .me { background: var(--card); }
.bx__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; font-size: .74rem; color: var(--ink-3); }
.bx__steps span { display: flex; gap: 6px; align-items: center; }
.bx__steps span::after { content: ""; flex: 1; height: 6px; border-radius: 99px; background: #DDD7CE; }
.bx__brief { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.bx__brief b { font-size: .78rem; }
.bx__brief i { height: 8px; border-radius: 99px; background: #E6E1D9; }
.bx__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; background: #fff; font-size: .8rem; color: var(--ink-3); }
.bx__search svg { width: 14px; height: 14px; }
.bx__task { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--paper-2); font-size: .78rem; }
.bx__task--on { background: var(--ink); color: var(--ink-inv); }
.bx__task--on em { font-style: normal; font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: var(--p-green); color: var(--ink); }
.bx__ppl { display: flex; align-items: center; gap: 6px; }
.bx__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font-size: .68rem; font-weight: 600; color: var(--ink-2); }
.bx__av--me { background: var(--ink); color: var(--ink-inv); }
.bx__ppl .bx__to { color: var(--ink-3); font-size: .9rem; }
.bx__stack { display: flex; }
.bx__stack .bx__av { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); background: var(--paper-2); }
.bx__stack .bx__av:first-child { margin-left: 0; }

.bx__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bx__chips span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--sage-soft); color: var(--sage-deep); font-size: .78rem; font-weight: 600; }
.bx__chips svg { width: 12px; height: 12px; stroke-width: 2.4; }

.hs { position: relative; height: calc(5 * 75vh + 100vh); }
.hs__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.4vh, 28px); padding-block: 84px clamp(20px, 3vh, 36px); }
.hs__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.hs__track { position: relative; display: flex; gap: 28px; min-height: 0; will-change: transform; padding-inline-start: max(var(--gutter), (100% - var(--maxw)) / 2); } /* first slide starts on the heading's left edge (28. 9.) */
.hs__slide { flex: none; width: min(960px, 78vw); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding: clamp(18px, 2vw, 28px); border-radius: 28px; background: var(--card); box-shadow: var(--sh-2); opacity: .4; transform: scale(.94); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.hs__slide.is-active { opacity: 1; transform: none; }
.hs__slide:has(~ .hs__slide.is-active) { opacity: 0; } /* nothing hangs off the left edge */
.hs__t { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); }
.hs__head { display: flex; align-items: flex-start; gap: 14px; }
.hs__head .sit__ic { flex: none; }
.hs__d { margin: 4px 0 0; max-width: 46em; font-size: 1rem; color: var(--ink-2); text-wrap: pretty; }
.ba__tag--sp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; }
.ba__tag--sp img { width: 18px; height: 18px; border-radius: 50%; }
.ba__end { display: grid; justify-items: start; gap: 8px; }
.ba__sub { margin: 0; max-width: 30em; font-size: .92rem; color: var(--ink-2); text-wrap: pretty; }
.ba__end .btn { margin-top: 6px; }
.ba--big { min-height: 0; }
.ba--big .ba__side { min-height: 0; padding: clamp(18px, 2vw, 28px); }
.ba--big .ba__line { font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); }
.ba--big .bx { gap: 8px; padding: 16px; font-size: 1rem; max-width: 420px; width: 100%; justify-self: center; }
.ba--big .bx__bub { font-size: .95rem; padding: 9px 13px; }
.ba--big .bx__search { max-width: 420px; width: 100%; justify-self: center; padding: 13px 16px; font-size: .95rem; }
.ba--big .bx__bar { height: 44px; font-size: .9rem; border-radius: 10px; }
.ba--big .bx__bar span { padding-inline: 12px; }
.ba--big .bx__steps { font-size: .85rem; gap: 7px 14px; }
.ba--big .bx__steps span::after { height: 8px; }
.ba--big .bx__brief { gap: 10px 14px; }
.ba--big .bx__brief b { font-size: .95rem; }
.ba--big .bx__brief i { height: 10px; }
.ba--big .bx__task { padding: 11px 14px; font-size: .92rem; }
.ba--big .bx__chips span { font-size: .88rem; padding: 5px 12px 5px 8px; }
.ba--big .bx__av { width: 38px; height: 38px; font-size: .8rem; }
.ba--big .bx__again { font-size: .82rem; }
.hs__slide .ba__side--after { opacity: 0; transform: translateX(-32px) scale(.97); transition: opacity .6s .12s var(--ease-out), transform .7s .12s var(--ease-out); }
.hs__slide .ba__arrow { opacity: 0; transform: scale(.5); transition: opacity .4s, transform .5s var(--ease-out); }
.hs__slide.is-active .ba__side--after, .hs__slide.is-active .ba__arrow { opacity: 1; transform: none; }
.hs__foot { display: flex; align-items: center; gap: 20px; }
.hs__foot .link-arrow { margin-left: auto; }
.hs__prog { flex: 1; max-width: 320px; height: 4px; overflow: hidden; border-radius: 99px; background: rgb(27 27 27 / .08); }
.hs__prog i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .hs__slide, .hs__slide .ba__side--after, .hs__slide .ba__arrow { transition: none; }
  .hs__slide .ba__side--after, .hs__slide .ba__arrow { opacity: 1; transform: none; }
}

@media (max-width: 899px) {
  .hs { height: auto; }
  .hs__sticky { position: static; height: auto; overflow: visible; padding-block: 40px; }
  .hs__track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 12px; padding-inline: var(--gutter); scrollbar-width: none; transform: none !important; }
  .hs__slide { width: 86vw; scroll-snap-align: start; }
  .hs__slide.is-active .ba__arrow { transform: rotate(90deg); }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .ba__arrow { margin: -12px 0; transform: rotate(90deg); }
  .ba__side { min-height: 0; }
}

/* Nav on scroll: white (26. 9.) – desktop capsule above, full-width bar below 1061px */
@media (max-width: 1060px) { .nav.is-scrolled { background: rgb(255 255 255 / 0.9); } }

/* ---------- People photos in colour (28. 9.) ---------- */
.member__img img, .person__img, .member:hover .member__img img { filter: none; }

/* ---------- O nás: contact form, direct contacts on the left (28. 9.) ---------- */
.contact { align-items: start; }
.contact .split__copy .lead { margin: 0; }
.contacts { display: grid; gap: 12px; margin-top: 8px; }
.contacts__k { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.contacts ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.contacts li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.contacts__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--p-lilac); color: var(--purple-deep); }
.contacts__ic svg { width: 18px; height: 18px; }
.contacts b { display: block; font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.contacts a { font-weight: 600; color: var(--purple); }
.req { color: var(--purple); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--purple); }
.check a { color: var(--purple); }

/* =====================================================================
   Frames (28. 9. 2026, moved from lab/ramecky). White page, a frame only
   where it means something. build.py puts <body data-page="…"> on site
   pages only, so lab pages and start.html keep their own look.
   - above the fold purple #6712F5 on pages with body class "top-purple"
     (úvod, certifikát, coaching, pro firmy, metodika); logos right under the
     hero sit inside the frame; cream on every other page
   - ceník: one cream frame around the headline and the price cards
   - cream sections are listed page by page, dark sections keep a dark frame
   aibility-allow-decorative-background: flat purple #6712F5 surface, explicit request from Tomáš (26. and 28. 9.)
   ===================================================================== */
:root { --frame-gap: 12px; --frame-r: 28px; --frame-cream: #F9F6F3; --frame-purple: #6712F5; }
@media (max-width: 640px) { :root { --frame-gap: 8px; --frame-r: 22px; } }

/* white page, no stripes */
body:where([data-page]) { background: #FFFFFF; }
:where([data-page]) .section--paper2 { background: transparent; }

/* nav: white on white, the first frame starts right under it */
:where([data-page]) .nav { background: rgb(255 255 255 / 0.86); }
:where([data-page]) .nav.is-open { background: #FFFFFF; }
@media (max-width: 1060px) { :where([data-page]) .nav.is-scrolled { background: rgb(255 255 255 / 0.92); } }
:where([data-page]) .ai-open__logos img { box-shadow: 0 0 0 1.5px #FFFFFF; }

/* cream frames */
:where([data-page]) main > :is(.hero, .page-hero),
[data-page="index"] main > #jak-to-funguje,
[data-page="certifikat"] main > :is(#cesty, #cena),
[data-page="coaching"] main > :is(#workout, #zustane, #cena),
[data-page="firmy"] main > :is(#jak, #postup, #otazky),
[data-page="metodika"] main > :is(#urovne, #co-sledujeme, #otazky),
[data-page="bezpecnost"] main > :is(#co-odejde, #it),
[data-page="o-nas"] main > #kontakt,
[data-page="pro-hr"] main > #hovor,
[data-page="pro-manazery"] main > #hovor,
[data-page="pro-vedeni"] main > #hovor,
:where([data-page]) main > .section:has(> .container > .cases) {
  margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream);
}
:where([data-page]) main > :is(.hero, .page-hero) { margin-top: 4px; }

/* dark sections keep their own frame */
:where([data-page]) main > .section--night { margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--night); }

/* logos right under the hero sit inside the first frame */
:where([data-page]) main > :is(.hero, .page-hero):has(+ .logos) { margin-bottom: 0; border-radius: var(--frame-r) var(--frame-r) 0 0; }
:where([data-page]) main > :is(.hero, .page-hero) + .logos { margin: 0 var(--frame-gap) var(--frame-gap); border-radius: 0 0 var(--frame-r) var(--frame-r); padding-bottom: clamp(32px, 3.4vw, 48px); background: var(--frame-cream); }

/* ceník: headline and price cards in one frame */
[data-page="cenik"] main > .page-hero { margin-bottom: 0; border-radius: var(--frame-r) var(--frame-r) 0 0; }
[data-page="cenik"] main > .page-hero + .section { margin: 0 var(--frame-gap) var(--frame-gap); border-radius: 0 0 var(--frame-r) var(--frame-r); background: var(--frame-cream); padding-bottom: clamp(48px, 5vw, 80px); }

/* a section glued to the hero now sits outside the frame and needs its own top space */
:where([data-page]:not([data-page="cenik"])) main > .page-hero + :is(.section--joined, .section[style*="padding-top:0"]) { padding-top: clamp(40px, 4vw, 64px) !important; }

/* purple above the fold */
.top-purple main > :is(.hero, .page-hero), .top-purple main > :is(.hero, .page-hero) + .logos { background: var(--frame-purple); color: #FFFFFF; --focus: #FFFFFF; }
.top-purple :is(.hero, .page-hero) :is(.display, .h1, .display .l2) { color: #FFFFFF; }
.top-purple :is(.hero, .page-hero) em { color: inherit; }
.top-purple :is(.hero, .page-hero) .hero__sub { color: rgb(255 255 255 / 0.88); }
.top-purple :is(.hero, .page-hero) :is(.cta-note, .works-in, .muted) { color: rgb(255 255 255 / 0.86); }
.top-purple :is(.hero, .page-hero) .cta-note span::before { background: #C9EDC9; }
.top-purple :is(.hero, .page-hero) .btn:not(.btn--ghost):not(.btn--light) { --btn-bg: #FFFFFF; --btn-fg: #1B1B1B; --btn-bd: #FFFFFF; box-shadow: none; }
.top-purple :is(.hero, .page-hero) .btn:not(.btn--ghost):not(.btn--light):hover { background: #F1EBFF; border-color: #F1EBFF; }
.top-purple :is(.hero, .page-hero) .btn--ghost { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgb(255 255 255 / 0.5); }
.top-purple :is(.hero, .page-hero) .btn--ghost:hover { background: rgb(255 255 255 / 0.12); border-color: #FFFFFF; }
.top-purple :is(.hero, .page-hero) .tool--soon { background: rgb(255 255 255 / 0.16); }
.top-purple :is(.hero, .page-hero) .tool--soon img { filter: brightness(0) invert(1); opacity: 0.7; }
.top-purple :is(.hero, .page-hero) .mnav a { background: rgb(255 255 255 / 0.14); color: #FFFFFF; }
.top-purple :is(.hero, .page-hero) .mnav a:hover { background: rgb(255 255 255 / 0.24); color: #FFFFFF; }
.top-purple .hero .announce { background: rgb(255 255 255 / 0.14); color: #FFFFFF; box-shadow: none; }
.top-purple .hero .announce:hover { background: rgb(255 255 255 / 0.22); box-shadow: none; }
.top-purple .hero .announce__tag { background: #FFFFFF; color: var(--frame-purple); }
.top-purple .hero .announce .arrow { color: #FFFFFF; }
.top-purple :is(.hero, .page-hero) + .logos .logos__label { color: rgb(255 255 255 / 0.86); }
.top-purple :is(.hero, .page-hero) + .logos .logo { filter: brightness(0) invert(1); }
.top-purple :is(.hero, .page-hero) + .logos .logo-set .logo { opacity: 0.85; }

/* o nás: Filip's quote in the same purple */
[data-page="o-nas"] .founder { background: var(--frame-purple); }
[data-page="o-nas"] .founder :is(blockquote, figcaption b) { color: #FFFFFF; }
[data-page="o-nas"] .founder figcaption span { color: rgb(255 255 255 / 0.82); }

/* closing CTA: team card in the pastel lilac used across the site */
:where([data-page]) .cta2__card--team { background: var(--p-lilac); color: var(--purple-deep); --focus: var(--purple-deep); }
:where([data-page]) .cta2__card--team .cta2__copy p { color: rgb(32 21 71 / 0.82); }
:where([data-page]) .cta2__card--team .btn--light { --btn-bg: var(--purple); --btn-fg: #FFFFFF; --btn-bd: var(--purple); }
:where([data-page]) .cta2__card--team .btn--light:hover { background: var(--purple-hover); border-color: var(--purple-hover); }
:where([data-page]) .cta2__card--team .link-arrow { color: var(--purple-deep); }
:where([data-page]) .cta2__card--team .cta2__checks li { background: rgb(255 255 255 / 0.6); color: var(--purple-deep); }
:where([data-page]) .cta2__card--team .cta2__checks svg { color: var(--purple); }

/* =====================================================================
   Diagnostika (28. 9. 2026): „Jak na tom je vaše firma s AI?“, 7 otázek
   jako jeden krokovací formulář. Markup z _build/diagnostika.py
   ({{DIAGNOSTIKA}}), logika v js/main.js (blok „Diagnostika“). Stejný
   komponent používá e-book „Školení nestačí“ (skoleni-nestaci/).
   ===================================================================== */
.diag-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.diag-copy .checklist { margin-top: 8px; }
.diag-copy .diag-cover { margin-top: 12px; }
@media (max-width: 960px) { .diag-layout { grid-template-columns: minmax(0, 1fr); } }

.diag { position: relative; display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--card); box-shadow: var(--sh-3); align-content: start; }
.diag__head { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.diag__back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border: 0; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); color: var(--ink-2); font: inherit; font-size: 0.85rem; cursor: pointer; }
.diag__back:hover { background: rgb(27 27 27 / 0.09); color: var(--ink); }
.diag__back[hidden] { display: none; }
.diag__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--purple); white-space: nowrap; }
.diag__bar { flex: 1; height: 6px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.diag__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--purple); transition: width var(--t-med) var(--ease-out); }

.diag__form { margin: 0; }
.diag__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.diag__step:not([hidden]) { animation: diag-in 380ms var(--ease-out); }
.diag__step[hidden] { display: none; }
.diag__q { float: left; width: 100%; margin: 0 0 16px; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.12rem + 0.7vw, 1.65rem); line-height: 1.22; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.diag__opts { clear: both; display: grid; gap: 8px; }
.diag__opt { position: relative; display: block; cursor: pointer; }
.diag__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.diag__opt span { position: relative; display: block; padding: 15px 18px 15px 48px; border-radius: 14px; background: rgb(27 27 27 / 0.035); font-size: 1rem; line-height: 1.45; color: var(--ink); transition: background-color var(--t-fast), transform var(--t-fast); }
.diag__opt span::before { content: ""; position: absolute; left: 17px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1.5px solid rgb(27 27 27 / 0.28); background: #FFFFFF; transition: border-color var(--t-fast), background var(--t-fast); }
.diag__opt input:hover + span { background: rgb(27 27 27 / 0.065); }
.diag__opt input:checked + span { background: var(--p-lilac); color: var(--purple-deep); }
.diag__opt input:checked + span::before { border-color: var(--purple); background: radial-gradient(circle, var(--purple) 0 4.5px, #FFFFFF 5.5px); }
.diag__opt input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.diag__opt input:active + span { transform: scale(0.992); }

.diag__result { display: grid; gap: 14px; animation: diag-in 420ms var(--ease-out); }
.diag__result[hidden] { display: none; }
.diag__res { display: grid; gap: 12px; }
.diag__res[hidden] { display: none; }
.diag__k { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--purple); }
.diag__t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.diag__p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.diag__step-mon { margin: 0; padding: 13px 15px; border-radius: 14px; background: var(--paper-2); font-size: 0.97rem; line-height: 1.55; color: var(--ink-2); }
.diag__step-mon b { color: var(--ink); }
.diag__ch { font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); }
.diag__ch p { margin: 0 0 4px; }
.diag__ch ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.diag__ch a { color: var(--purple); text-underline-offset: 3px; }

.diag__lead { display: grid; gap: 12px; margin: 4px 0 0; padding: clamp(16px, 2.4vw, 22px); border-radius: 18px; background: var(--p-lilac); color: var(--purple-deep); }
.diag.is-open .diag__lead { display: none; }
.diag__lh { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.diag__ls { margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgb(32 21 71 / 0.8); }
.diag__lead .field label { color: var(--purple-deep); }
.diag__lead .input { background: #FFFFFF; }
.diag__legal { margin: 0; font-size: 0.76rem; line-height: 1.5; color: rgb(32 21 71 / 0.7); }
.diag__legal a { color: inherit; }
.diag .check-inline { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 0.84rem; line-height: 1.45; color: rgb(32 21 71 / 0.86); cursor: pointer; }
.diag .check-inline input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--purple); }
.diag .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.diag__ok { display: grid; gap: 12px; justify-items: start; padding: 14px 16px; border-radius: 14px; background: var(--paper-2); }
.diag__ok[hidden] { display: none; }
.diag__okh { margin: 0; font-weight: 600; color: var(--ink); }
.diag__again { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.diag__again:hover { color: var(--ink); }
@keyframes diag-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .diag__step:not([hidden]), .diag__result { animation: none; } }
@media (max-width: 640px) { .diag__opt span { padding: 13px 14px 13px 44px; font-size: 0.97rem; } }

/* ==========================================================================
   Petr's feedback (29. 9. 2026)
   ========================================================================== */

/* FAQ: one column everywhere, easier to scan */
.faq-layout .faq { columns: auto; max-width: 52rem; margin-inline: auto; }
.faq-layout .faq details:last-child { border-bottom: 1px solid var(--line); }

/* Mobile nav: current page is marked, the bar hides on the way down */
.mobile-menu li a[aria-current="page"] { color: var(--purple); font-weight: 600; }
.mobile-menu li a[aria-current="page"]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: currentColor; vertical-align: middle; }
@media (max-width: 1060px) {
  .nav { transition: transform 0.3s var(--ease-out), border-color var(--t-med), background-color var(--t-med); }
  .nav.is-hidden { transform: translateY(-100%); }
}

/* Hero on phones: one mock, whole and readable (home chat, Pro firmy team view) */
@media (max-width: 960px) { .hero-scene .report.app { display: none; } }
@media (max-width: 480px) {
  .teamview.app th:nth-child(2), .teamview.app td:nth-child(2) { display: none; }
  .teamview.app th:first-child, .teamview.app td:first-child { padding-left: 16px; }
}

/* Poznáváš se: calmer on big screens (capped height, shorter scroll per situation) */
@media (min-width: 900px) {
  .hs { height: calc(5 * min(75vh, 560px) + 100vh); }
  .hs__sticky { grid-template-rows: auto minmax(0, 620px) auto; align-content: center; }
}
.hs__swipe { display: none; }
@media (max-width: 899px) {
  /* phones: short cards, arrows and a counter so the side swipe is obvious */
  .hs__slide .ba__vis, .hs__slide .ba__sub { display: none; }
  .hs__slide { gap: 12px; }
  .hs__slide .ba--big { gap: 10px; }
  .hs__swipe { display: inline-flex; align-items: center; gap: 10px; }
  .hs__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--card); box-shadow: var(--sh-1); color: var(--ink); cursor: pointer; }
  .hs__btn[data-dir="-1"] .arrow { transform: rotate(180deg); }
  .hs__count { min-width: 3.2em; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }
  .hs__foot { flex-wrap: wrap; gap: 12px 16px; }
  .hs__foot .hs__prog { display: none; }
}

/* Učíš se na úkolu: tabs and steps are clickable */
.loop-ring button { font: inherit; font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-3); cursor: pointer; transition: background-color var(--t-med), color var(--t-med); }
.loop-ring button:hover { color: var(--ink); }
.loop-ring button.is-active { background: var(--ink); color: var(--ink-inv); }
.loop-step { cursor: pointer; }

/* Kde chceš začít: the card's action reads as a real button */
.path__go { justify-self: start; padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: #FFFFFF !important; font-weight: 600; font-size: 0.95rem; box-shadow: var(--sh-1); transition: background-color var(--t-fast); }
.path:hover .path__go { background: #333333; }

/* Pro firmy "Kdo co uvidí" on phones: a compact 3-column grid per row */
@media (max-width: 760px) {
  .vtab table { display: block; }
  .vtab tbody th { width: auto; }
  .vtab tbody tr:not(.vtab__grp) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 14px 0; }
  .vtab tbody tr:not(.vtab__grp) th { grid-column: 1 / -1; padding: 0; }
  .vtab tbody td { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 0; }
  .vtab tbody td::before { min-height: 2.5em; font-size: 0.7rem; line-height: 1.25; }
  .vtab tbody td { min-width: 0; }
  .vst { display: block; max-width: 100%; padding: 5px 9px; border-radius: 10px; font-size: 0.72rem; text-align: left; }
  .vst svg { display: none; }
}

/* EU flag next to the data section heading */
.eu-badge { display: inline-flex; }
.eu-flag { display: block; width: 54px; height: 36px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18); }

/* ==========================================================================
   Bezpečnost (29. 9. 2026): realistic steps built from the site's own mocks
   ========================================================================== */
.stage--sec .stage__inner { display: grid; place-items: center; padding: clamp(16px, 4%, 40px); }
.stage--sec .window, .stage--sec .consent, .stage--sec .report.app { width: min(100%, 440px); }
.toolcall { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: #F1ECFB; color: var(--purple-deep); font-size: 0.74rem; font-weight: 600; }
.toolcall svg { width: 13px; height: 13px; }
.toolcall span { font-weight: 400; color: rgb(32 21 71 / 0.7); }
.readlist { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #FBF8F3; }
.readlist__row { display: grid; grid-template-columns: 16px 1fr 14px; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-2); }
.readlist__row svg { width: 14px; height: 14px; color: var(--ink-3); }
.readlist__row svg:last-child { width: 12px; height: 12px; color: var(--purple); }
.readlist .app-progress { margin-top: 4px; }
.readlist .app-progress i { width: 64%; }
.readlist__note { font-size: 0.72rem; color: var(--ink-3); }
.coach-card--draft { display: grid; gap: 8px; }
.skel { display: block; height: 8px; width: 100%; border-radius: 99px; background: #ECE6F7; }
.skel--s { width: 58%; }
.msg--yes { background: var(--ink); color: #FFFFFF; font-weight: 600; box-shadow: 0 0 0 4px rgb(103 18 245 / 0.18); }
.saved-stay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.saved-stay .app-label { width: 100%; }
.saved-stay .pill { display: inline-flex; align-items: center; gap: 5px; }
.saved-stay .pill svg { width: 12px; height: 12px; }
.saved-stay .pill--lock::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .loop-scene.is-active .readlist .app-progress i, .is-in .readlist .app-progress i { animation: sec-read 2.4s var(--ease-out) both; }
  .loop-scene.is-active .readlist__row, .is-in .readlist__row { animation: sec-row 2.4s ease-in-out both; }
  .readlist__row:nth-child(2) { animation-delay: 0.4s !important; }
  .readlist__row:nth-child(3) { animation-delay: 0.8s !important; }
  .loop-scene.is-active .skel, .is-in .skel { animation: sec-skel 1.4s var(--ease-out) both; }
  .skel:nth-of-type(2) { animation-delay: 0.3s !important; }
  .skel:nth-of-type(3) { animation-delay: 0.6s !important; }
  .loop-scene.is-active .msg--yes, .is-in .msg--yes { animation: sec-yes 0.6s var(--ease-out) 0.5s both; }
}
@keyframes sec-read { from { width: 0; } to { width: 64%; } }
@keyframes sec-row { 0%, 100% { background: transparent; } 35% { background: #F1ECFB; } }
@keyframes sec-skel { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes sec-yes { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

.page-hero .hero__kicker { margin: 0 0 14px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); }
.top-purple .page-hero .hero__kicker { color: rgb(255 255 255 / 0.8); }

/* consent screen, close to the real sp.aimee.coach page */
.consent { display: grid; gap: 10px; padding: 20px 22px 18px; border-radius: 22px; background: var(--card); box-shadow: var(--sh-3); color: var(--ink); }
.consent__top { display: flex; align-items: center; gap: 8px; }
.consent__host { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); }
.consent__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }
.consent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.consent li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; line-height: 1.4; color: var(--ink-2); }
.consent li svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.consent__can li svg { color: #2F7A45; }
.consent__notice { margin: 0; padding: 10px 12px; border-radius: 12px; background: #F4EFFF; font-size: 0.78rem; line-height: 1.45; color: var(--purple-deep); }
.consent__no { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #FBF8F3; }
.consent__no li svg { color: #9B2C2C; }
.consent__btns { display: flex; gap: 8px; margin-top: 2px; }

.fitc--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .fitc--3 { grid-template-columns: 1fr; } }
.toolcall--out { background: #EAF6EC; color: #1D4D28; }
.toolcall--out span { color: rgb(29 77 40 / 0.75); }
.readlist--stay { padding: 10px 12px; }

/* prompt card for the "no install" path */
.window--prompt .window__body { gap: 10px; }
.promptbox { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #FBF8F3; }
.promptbox p { margin: 0; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; color: var(--ink-2); }
.promptbox__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.promptbox__row .btn { display: inline-flex; gap: 6px; }
.promptbox__row .btn svg { width: 13px; height: 13px; }
.promptbox__tools { display: inline-flex; gap: 6px; }
.paths--sec .path { cursor: default; }
.paths--sec .path__copy .pill { justify-self: start; }
.paths--sec .path--a, .paths--sec .path--b { grid-column: span 6; }
@media (max-width: 960px) { .paths--sec .path--a, .paths--sec .path--b { grid-column: span 12; } }

/* connected apps demo: press Odpojit, the row locks */
.stage--apps .stage__inner { display: grid; place-items: center; padding: clamp(16px, 4%, 40px); }
.sapps { width: min(100%, 440px); display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: var(--card); box-shadow: var(--sh-3); }
.sapps__row { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #FBF8F3; }
.sapps__row--quiet { opacity: 0.7; }
.sapps__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #FFFFFF; box-shadow: var(--sh-1); }
.sapps__t b { display: block; font-size: 0.92rem; }
.sapps__t small { display: block; font-size: 0.74rem; color: var(--ink-3); }
.sapps__btn { padding: 7px 12px; border-radius: var(--r-pill); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.78rem; font-weight: 600; color: #9B2C2C; }
.sapps__off { position: absolute; right: 12px; top: 50%; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--r-pill); background: var(--p-green); color: #1D4D28; font-size: 0.78rem; font-weight: 600; opacity: 0; transform: translateY(-50%) scale(0.8); }
.sapps__off svg { width: 12px; height: 12px; }
.sapps__note { margin: 4px 2px 0; font-size: 0.78rem; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .is-in .sapps__row:first-child .sapps__btn { animation: sa-press 5s ease-in-out infinite; }
  .is-in .sapps__row:first-child .sapps__off { animation: sa-off 5s ease-in-out infinite; }
  .is-in .sapps__row:first-child { animation: sa-row 5s ease-in-out infinite; }
}
@keyframes sa-press { 0%, 22% { transform: none; box-shadow: inset 0 0 0 1px var(--line); } 28% { transform: scale(0.92); box-shadow: inset 0 0 0 2px #9B2C2C; } 34%, 100% { transform: none; opacity: 0; } }
@keyframes sa-off { 0%, 32% { opacity: 0; transform: translateY(-50%) scale(0.8); } 40%, 88% { opacity: 1; transform: translateY(-50%) scale(1); } 96%, 100% { opacity: 0; } }
@keyframes sa-row { 0%, 32% { background: #FBF8F3; } 40%, 88% { background: #F1F7F2; } 100% { background: #FBF8F3; } }

/* IT box */
.sit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sit__list { max-width: none; margin: 0; }
.sit__side { display: grid; gap: 16px; }
.sit__box { padding: 22px 24px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.sit__box .h3 { margin: 0 0 8px; font-size: 1.1rem; }
.sit__url code { display: block; padding: 10px 12px; border-radius: 10px; background: #F4F1EC; font-size: 0.82rem; word-break: break-all; }
#it code { font-family: var(--font-mono); font-size: 0.85em; }
#it .sit__list { display: grid; gap: 12px; border-top: 0; }
#it .sit__list details { border: 0; border-radius: 20px; background: var(--card); box-shadow: var(--sh-1); transition: box-shadow var(--t-fast); }
#it .sit__list details:hover, #it .sit__list details[open] { box-shadow: var(--sh-2); }
#it .sit__list summary { padding: 14px 18px 14px 14px; }
#it .sit__list .faq__a { padding: 0 24px 22px 76px; }
.sit__tool { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sit__logo { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: #F4F1EC; transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast); }
.sit__logo img { width: 24px; height: 24px; }
#it details:hover .sit__logo { transform: rotate(-6deg); }
#it details[open] .sit__logo { background: #EDE6FB; transform: rotate(-6deg) scale(1.05); }
.sit__name { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.sit__plan { display: block; margin-top: 2px; font-size: 0.88rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 560px) { #it .sit__list .faq__a { padding: 0 18px 20px 18px; } }
@media (max-width: 900px) { .sit { grid-template-columns: 1fr; } }


/* Bezpečnost: explainer video in the hero (29. 9. 2026) */
/* centred hero, video underneath (Calendly-like, 29. 9.) */
.page-hero--center .hero__copy { justify-items: center; text-align: center; max-width: 860px; margin-inline: auto; }
.page-hero--center .h1 { max-width: 14em; margin-inline: auto; }
.page-hero--center .hero__sub { max-width: 40em; margin-inline: auto; }
.page-hero--center .cta-group, .page-hero--center .cta-note { justify-content: center; }
.page-hero--center .hero__visual { max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
@media (max-width: 560px) { .page-hero--center .cta-group .btn { width: 100%; justify-content: center; } }
.svid { margin: 0; padding: 8px; border-radius: 26px; background: var(--card); box-shadow: 0 2px 4px rgb(27 27 27 / 0.06), 0 24px 48px -16px rgb(27 27 27 / 0.28); }
.svid__frame { position: relative; overflow: hidden; border-radius: 19px; aspect-ratio: 16 / 9; background: #F4F1EC; }
.svid__v { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.svid__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 10px 30px -6px rgb(27 27 27 / 0.45); cursor: pointer; opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity 0.25s var(--ease-out), transform 0.45s var(--ease-out), background-color 0.15s; }
.svid__play::before { content: ""; position: absolute; left: 31px; top: 25px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.svid__play:hover { background: var(--purple); }
.svid.is-paused .svid__play { opacity: 1; transform: none; pointer-events: auto; }
.svid__bar { display: flex; align-items: center; gap: 12px; padding: 8px 6px 2px; }
.svid__btn { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: #F4F1EC; color: var(--ink); cursor: pointer; transition: background-color 0.15s; }
.svid__btn:hover { background: #EDE6FB; }
.svid__btn svg { width: 14px; height: 14px; }
.svid .svid__i-pause, .svid.is-paused .svid__i-play { display: block; }
.svid .svid__i-play, .svid.is-paused .svid__i-pause { display: none; }
.svid__label { flex: none; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.svid__track { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgb(27 27 27 / 0.1); overflow: hidden; cursor: pointer; }
.svid__track i { position: absolute; inset: 0; border-radius: inherit; background: var(--purple); transform-origin: 0 50%; transform: scaleX(0); }
.svid__time { flex: none; min-width: 2.6em; font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.svid__v:fullscreen { object-fit: contain; background: #000; }
@media (max-width: 560px) { .svid { padding: 6px; border-radius: 22px; } .svid__frame { border-radius: 16px; } .svid__label { display: none; } .svid__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .svid__play::before { left: 24px; top: 19px; border-width: 11px 0 11px 17px; } }

/* ---------- Blog (AIB-141): /blog and /blog/<slug> ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); color: inherit; text-decoration: none; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.post-card:hover, .post-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-2); }
.post-card__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #E0D4F7 0%, #D8EBFF 100%); }
.post-card__cover picture, .post-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: grid; gap: 10px; align-content: start; padding: 22px 24px 26px; }
.post-card__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-3); }
.post-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.post-card__lead { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-hero .hero__copy { max-width: none; }
.post-hero__h1 { text-wrap: balance; }
.post-crumb { margin: 0 0 10px; font-size: 0.9rem; font-weight: 500; }
.post-crumb a { color: var(--purple); text-decoration: none; }
.post-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-meta { margin: 0 0 16px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); }
.post-section { padding-top: 0; }
.post-cover { display: block; aspect-ratio: 16 / 9; margin: 0 0 clamp(32px, 4vw, 52px); overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sh-1); background: linear-gradient(135deg, #E0D4F7 0%, #D8EBFF 100%); }
.post-cover picture, .post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post { max-width: none; font-size: 1.06rem; line-height: 1.75; }
.post h2 { margin-top: 2em; }
.post img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); }
.post picture, .post figure { display: block; margin: 1.8em 0; }
.post figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink-3); }
.post hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line-soft); }
.post pre { overflow-x: auto; padding: 16px 18px; border-radius: var(--r-md); background: #F6F2EC; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; }
.post pre code { padding: 0; background: none; }
.post-author { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.post-author__avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #F1EBFF; color: var(--purple); font-weight: 600; }
.post-author b { display: block; color: var(--ink); font-weight: 600; }
.post-author small { color: var(--ink-3); font-size: 0.88rem; }
.post-next .cta2__card { min-height: 0; }
.post-more__h { margin: 0 0 24px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); letter-spacing: -0.015em; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .post-next { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .post { font-size: 1rem; } }


/* ===== legacy redesign: leadmagnety (30. 9.) ===== */
/* /newsletter, /playbook, /playbook-thanks, /webinar, /webinar-thanks. Prefixes: .nl- .pb- .wb- */

/* shared: lead-magnet hero kicker spacing, thank-you pages */
:is([data-page="newsletter"], [data-page="playbook"], [data-page="playbook-thanks"], [data-page="webinar"], [data-page="webinar-thanks"]) .page-hero .kicker { display: block; margin-bottom: -8px; }
.pb-thanks, .wb-thanks, .nl-hero { min-height: min(78vh, 760px); display: grid; align-content: center; }
.pb-thanks__ic, .wb-thanks__ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--purple); color: #FFFFFF; box-shadow: 0 14px 30px -12px rgb(89 56 183 / 0.6); }
.pb-thanks .cta-group, .wb-thanks .cta-group { justify-content: center; gap: 12px 24px; }
.pb-thanks__meta, .wb-thanks__meta { margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--line); max-width: 36rem; }
.pb-thanks__meta a, .wb-thanks__meta a, .nl-legal a, .pb-consent a, .wb-consent a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }

/* newsletter */
.nl-card { width: min(100%, 640px); margin-inline: auto; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); text-align: left; }
.nl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.nl-form .input { min-height: 56px; }
.nl-card .newsletter-msg { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.nl-card .newsletter-msg:not(:empty) { margin-top: 14px; }
.nl-card .newsletter-msg--ok { color: var(--sage-deep); }
.nl-card .newsletter-msg--err { color: #B42318; }
.nl-legal { margin: 14px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }
@media (max-width: 560px) { .nl-form { grid-template-columns: minmax(0, 1fr); } .nl-form .btn { width: 100%; white-space: normal; } }

/* playbook: e-mail gate forms (hero + #stahnout) */
.pb-form { display: grid; gap: 10px; max-width: 540px; }
.pb-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.pb-inline .input { min-height: 56px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.pb-inline .input:focus { box-shadow: 0 0 0 4px rgb(89 56 183 / 0.14); }
.pb-inline .input[aria-invalid="true"] { border-color: #B42318; }
.pb-error { margin: 0; min-height: 1.2em; font-size: var(--fs-sm); color: #B42318; }
.pb-error:empty { min-height: 0; }
.pb-consent, .wb-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }
.pb-consent input, .wb-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--purple); cursor: pointer; }
.pb-proof { margin-top: -4px; }
@media (max-width: 560px) { .pb-inline { grid-template-columns: minmax(0, 1fr); } .pb-inline .btn { width: 100%; } }

/* playbook: deck mocks (hero + preview) */
.pb-stage { aspect-ratio: auto; min-height: 0; }
.pb-stage .stage__inner { position: relative; inset: auto; padding: clamp(28px, 5%, 48px) clamp(18px, 6%, 48px); }
.pb-deck { width: min(100%, 460px); }
.pb-deck .window__bar { gap: 12px; }
.pb-url { flex: 1; min-width: 0; padding: 5px 12px; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.05); font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-slide { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); background: var(--purple-deep); color: var(--ink-inv); }
.pb-slide__label { justify-self: start; margin: 0; padding: 5px 10px; border-radius: var(--r-pill); background: rgb(250 244 238 / 0.1); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inv-2); }
.pb-slide__h { margin: 0; max-width: 15em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.08; letter-spacing: -0.02em; color: #FFFFFF; }
.pb-slide__h em { font-style: normal; color: var(--purple-light); }
.pb-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pb-metric { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 14px; background: rgb(250 244 238 / 0.08); }
.pb-metric strong { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; line-height: 1; color: #FFFFFF; }
.pb-metric span { font-size: 0.74rem; line-height: 1.35; color: var(--inv-3); }
.pb-plan { padding: 12px; border-radius: 14px; background: var(--ink-inv); color: var(--ink); }
.pb-plan__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-plan__bars { display: grid; grid-template-columns: 0.65fr 0.8fr 1fr 0.9fr; gap: 6px; align-items: end; height: 40px; }
.pb-plan__bars i { display: block; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, var(--purple-light), var(--purple)); }
.pb-plan__bars i:nth-child(1) { height: 42%; }
.pb-plan__bars i:nth-child(2) { height: 64%; }
.pb-plan__bars i:nth-child(3) { height: 100%; }
.pb-plan__bars i:nth-child(4) { height: 76%; }
.pb-deck--wide { width: min(100%, 680px); }
.pb-slide--title { justify-items: center; text-align: center; padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 56px); }
.pb-slide--title .pb-slide__label { justify-self: center; }
.pb-slide--title .pb-slide__h { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); max-width: none; }
.pb-slide__p { margin: 0; max-width: 28em; font-size: var(--fs-sm); color: var(--inv-2); }
.pb-preview__stage { aspect-ratio: auto; min-height: 0; }
.pb-preview__stage .stage__inner { position: relative; inset: auto; padding: clamp(24px, 6vw, 72px) clamp(14px, 5vw, 64px); }

/* playbook: stats, insights */
.pb-stats .statlist--row { margin-top: 0; }
.pb-insight { gap: 10px; }
.pb-insight__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--purple-deep); }
.pb-insight .h3 { margin-top: 6px; }
.pb-insight p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* playbook: frames (cream, like the rest of the site) */
[data-page="playbook"] main > .pb-preview,
[data-page="playbook"] #pb-gated-content > .pb-toc-sec { margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream); }

/* playbook: gate card on the dark frame */
.pb-gate-card { max-width: 720px; margin-inline: auto; padding: clamp(28px, 5vw, 56px); border-radius: var(--r-xl); background: #FFFFFF; color: var(--ink); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.6); }
.pb-gate-form-state { display: grid; gap: 16px; }
.pb-gate-card .kicker { color: var(--purple); }
.pb-gate-card .h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); }
.pb-gate-card .lead { margin: 0; color: var(--ink-2); }
.pb-gate-card .pb-form { max-width: none; }
.pb-benefits { justify-content: flex-start; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); gap: 10px 22px; font-size: var(--fs-sm); }
@media (max-width: 520px) { .pb-benefits { align-items: flex-start; } }
.pb-gate-success-state { text-align: center; }
.pb-gate-success-state .h3 { margin: 0 0 8px; }
.pb-gate-section.is-unlocked .pb-gate-form-state { display: none !important; }
.pb-gate-section.is-unlocked .pb-gate-success-state { display: block !important; }

/* playbook: gated content (locked until the e-mail is sent) */
.pb-gated--locked { filter: blur(6px); pointer-events: none; user-select: none; max-height: 500px; overflow: hidden; position: relative; clip-path: inset(0); }
.pb-gated--locked::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.85) 60%, #FFFFFF 100%); }
.pb-gated--unlocked { filter: none; pointer-events: auto; user-select: auto; max-height: none; overflow: visible; transition: filter 0.5s ease; }
.pb-access .section-head { max-width: 44rem; }
.pb-access .cta-group { justify-content: center; margin-top: 8px; }

/* playbook: table of contents */
.pb-toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pb-toc__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 22px 24px; border-radius: var(--r-xl); background: #FFFFFF; box-shadow: var(--sh-1); }
.pb-toc__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--p-lilac); color: var(--purple-deep); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }
.pb-toc__item .h4 { margin: 8px 0 6px; }
.pb-toc__item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 800px) { .pb-toc { grid-template-columns: minmax(0, 1fr); } .pb-toc__item { padding: 18px; } }

/* playbook: methodology */
.pb-meth .h3 { margin: 4px 0 0; }
.pb-meth__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.pb-meth__list li { position: relative; padding-left: 26px; }
.pb-meth__list li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--purple); font-weight: 600; }
.pb-meth__list strong { color: var(--ink); }
@media (max-width: 560px) { .pb-meth { grid-template-columns: minmax(0, 1fr); } }

/* webinar: event facts inside the hero frame */
.wb-hero { display: grid; gap: clamp(36px, 5vw, 56px); }
.wb-hero .cta-group { justify-content: center; }
.wb-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin-inline: auto; }
.wb-meta__c { display: grid; gap: 4px; align-content: start; padding: 22px 20px; border-radius: var(--r-xl); background: #FFFFFF; box-shadow: var(--sh-1); text-align: center; }
.wb-meta__c p, .wb-detail__c p { margin: 0; }
.wb-meta__k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.wb-meta__v { margin-top: 6px !important; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--purple); }
.wb-meta__d { font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 800px) { .wb-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .wb-meta { gap: 10px; } .wb-meta__c { padding: 18px 12px; } }

/* webinar: agenda */
.wb-agenda-split { align-items: start; }
.wb-agenda { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.wb-agenda__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.wb-agenda__t { padding-top: 2px; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; color: var(--purple); }
.wb-agenda__item .h4 { margin: 0 0 4px; }
.wb-agenda__item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* webinar: speaker, registration (cream frames) */
[data-page="webinar"] main > :is(.wb-speaker-sec, #registrace) { margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream); }
.wb-speaker { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 760px; margin-inline: auto; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-xl); background: #FFFFFF; box-shadow: var(--sh-1); }
.wb-speaker__img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: var(--p-lilac); }
.wb-speaker__info .h3 { margin: 0; }
.wb-speaker__role { margin: 6px 0 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.wb-speaker__info p:last-child { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 600px) { .wb-speaker { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .wb-speaker__img { width: 112px; height: 112px; } }
.wb-reg .form-card { background: #FFFFFF; }
.wb-form { gap: 14px; }
.wb-form .input { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.wb-form .input:focus { box-shadow: 0 0 0 4px rgb(89 56 183 / 0.14); }
.wb-error { margin: 0; min-height: 1.2em; font-size: var(--fs-sm); color: #B42318; }
.wb-error:empty { min-height: 0; }
.wb-form .btn { white-space: normal; }

/* webinar thanks: event detail */
.wb-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 640px); }
.wb-detail__c { display: grid; gap: 4px; padding: 18px; border-radius: var(--r-lg); background: #FFFFFF; box-shadow: var(--sh-1); }
.wb-detail__v { font-weight: 600; }
@media (max-width: 600px) { .wb-detail { grid-template-columns: minmax(0, 1fr); } }
/* ===== end leadmagnety ===== */
/* ===== legacy redesign: eventy (30. 9.) ===== */
/* /akce, /rust, /tuesdai, /sp-talks rebuilt in the Opus design. Prefixes: .ak- akce, .ru- rust, .tu- tuesdai (same template as rust), .spt- sp-talks. */

/* akce: hero with newsletter sign-up and event photo */
.ak-nl { display: grid; gap: 10px; max-width: 30rem; margin-top: 4px; }
.ak-nl__label { margin: 0; font-weight: 500; color: var(--ink); }
.ak-nl .ft-nl { display: flex; gap: 6px; margin: 0; padding: 6px; border-radius: var(--r-pill); background: #FFFFFF; box-shadow: var(--sh-1, var(--shadow-1)); }
.ak-nl .ft-nl .input { flex: 1; min-width: 0; min-height: 46px; border-radius: var(--r-pill); background: transparent; }
.ak-nl .ft-nl .input:focus { background: #FFFFFF; }
.ak-nl .ft-nl .btn { flex: none; min-width: 52px; min-height: 46px; padding: 10px 16px; }
.ak-nl .ft-nl-status { margin: 0; min-height: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--purple); }
.ak-nl .ft-nl-status:empty { display: none; }
.ak-nl__legal { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.ak-nl__legal a { color: var(--purple); }
.ak-photo { aspect-ratio: 4 / 3; box-shadow: var(--sh-2, var(--shadow-2)); }
.ak-logos .logo-set { gap: 56px; padding-right: 56px; }
.ak-logo { flex: none; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink-3); opacity: 0.8; }
.ak-empty { display: grid; justify-items: center; gap: 16px; max-width: 40rem; margin-inline: auto; padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--frame-cream, #F9F6F3); text-align: center; }
.ak-empty__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--p-lilac); color: var(--purple-deep); }
.ak-empty__ic .ic { width: 24px; height: 24px; }
.ak-empty p { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
@media (max-width: 640px) { .ak-logos .logo-set { gap: 36px; padding-right: 36px; } .ak-logo { font-size: 1.1rem; } }

/* rust + tuesdai: discount code, three programmes, closing CTA */
:is(.ru-proof, .tu-proof) { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
:is(.ru-proof, .tu-proof) strong { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; color: var(--purple); }
:is(.ru-stage, .tu-stage) .stage__inner { padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px); }
:is(.ru-coupon, .tu-coupon) { display: grid; justify-items: center; gap: 14px; width: min(100%, 400px); padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: #FFFFFF; box-shadow: var(--shadow-3); text-align: center; }
:is(.ru-coupon, .tu-coupon) .kicker { margin: 0; }
:is(.ru-coupon__code, .tu-coupon__code) { width: 100%; padding: 18px 12px; border: 2px dashed var(--purple-light); border-radius: 16px; background: #F5F0FF; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1; letter-spacing: 0.06em; color: var(--purple-deep); }
:is(.ru-coupon__note, .tu-coupon__note) { margin: 0; max-width: 24em; font-size: var(--fs-sm); color: var(--ink-2); }
:is(.ru-coupon, .tu-coupon) .btn { width: 100%; }
:is(.ru-stats, .tu-stats) { margin-top: 0; }
:is(.ru-programs, .tu-programs) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
:is(.ru-prog, .tu-prog) { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-xl); background: #FFFFFF; box-shadow: var(--sh-2, var(--shadow-2)); }
:is(.ru-prog__media, .tu-prog__media) { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
:is(.ru-prog__media, .tu-prog__media) img { width: 100%; height: 100%; object-fit: cover; }
:is(.ru-prog__body, .tu-prog__body) { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 30px); }
:is(.ru-prog__body, .tu-prog__body) p { margin: 0; color: var(--ink-2); }
:is(.ru-prog__label, .tu-prog__label) { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple) !important; }
:is(.ru-prog__outcome, .tu-prog__outcome) { padding: 14px 16px; border-radius: 14px; background: var(--frame-cream, #F9F6F3); font-size: var(--fs-sm); }
:is(.ru-prog__outcome, .tu-prog__outcome) strong { color: var(--ink); font-weight: 600; }
:is(.ru-prog__tags, .tu-prog__tags) { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
:is(.ru-prog__tags, .tu-prog__tags) li { padding: 4px 10px; border-radius: var(--r-pill); background: var(--p-lilac); color: var(--purple-deep); font-size: 0.8rem; font-weight: 500; }
:is(.ru-prog__actions, .tu-prog__actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 8px; }
:is(.ru-final, .tu-final) em { color: var(--purple-light); }
:is(.ru-final__fine, .tu-final__fine) { font-size: var(--fs-sm) !important; color: var(--inv-3) !important; }
@media (max-width: 1060px) { :is(.ru-programs, .tu-programs) { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; } }
@media (max-width: 640px) { :is(.ru-prog__actions, .tu-prog__actions) .btn { flex: 1 1 auto; } }

/* sp-talks: hero with the lead form, stats, what you get, how it works */
.spt-hero { align-items: start; }
.spt-steps { margin-top: 4px; max-width: 34rem; }
.spt-steps b { color: var(--ink); }
.spt-form { position: relative; margin: 0; box-shadow: var(--shadow-3); }
.spt-form__body { display: grid; gap: 16px; }
.spt-form__head { display: grid; gap: 6px; }
.spt-form__head p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.spt-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.spt-consent { align-items: flex-start; }
.spt-consent label { cursor: pointer; }
.spt-form__note { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3); }
.spt-form__error { display: none; padding: 14px 16px; border-radius: 12px; background: rgb(200 60 60 / 0.08); border: 1px solid rgb(200 60 60 / 0.25); font-size: var(--fs-sm); line-height: 1.5; }
.spt-form__error a { color: var(--purple); }
.spt-result { display: none; }
.spt-form.is-sent .spt-form__body { display: none; }
.spt-form.is-sent .spt-result { display: grid; gap: 12px; justify-items: center; text-align: center; animation: rise 500ms var(--ease-out); }
.spt-result > div { display: grid; gap: 12px; justify-items: center; }
.spt-result p { margin: 0 0 6px; max-width: 38ch; color: var(--ink-2); }
.spt-result__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--purple); color: #FFFFFF; }
.spt-result__mark .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.spt-result[data-variant="small"] .spt-result__large, .spt-result[data-variant="large"] .spt-result__small { display: none; }
.spt-stats { margin-top: 0; }
.spt-gets .story__ch::after { display: none; }
@media (max-width: 640px) { .spt-result .btn { white-space: normal; } }
/* ===== end eventy ===== */
/* ===== legacy redesign: kariera (30. 9.) ===== */
/* /kariera, /kariera/head-of-marketing, /kariera/product-builder (pages/kariera*.html) */
:where([data-page]) main > .kr-frame { margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream); }
.kr-hero-photo { aspect-ratio: 3 / 2; box-shadow: var(--sh-2); }
.kr-hero-photo picture, .kr-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kr-job-hero { max-width: 60rem; }
.kr-crumb { font-size: var(--fs-sm); }
.kr-crumb a { color: var(--purple); font-weight: 500; }
.kr-crumb [aria-current] { color: var(--ink-2); }
.kr-proof { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.kr-proof strong { color: var(--ink); font-weight: 600; }

/* open positions: one closed role, no link */
.kr-closed { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(26px, 3.5vw, 44px) clamp(24px, 4vw, 52px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.kr-closed__main { display: grid; gap: 12px; max-width: 40rem; }
.kr-closed__eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: var(--r-pill); background: var(--paper-2); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.kr-closed__eyebrow .ic { width: 13px; height: 13px; }
.kr-closed__h { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; }
.kr-closed__h em, .kr-stack .h3 em { font-style: normal; color: var(--purple); }
.kr-closed p { margin: 0; color: var(--ink-2); }
.kr-closed__aside { display: grid; justify-items: end; gap: 14px; flex-shrink: 0; }
.kr-closed__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.kr-tag { display: inline-flex; padding: 5px 12px; border-radius: var(--r-pill); background: var(--p-lilac); color: var(--purple-deep); font-size: 0.8rem; font-weight: 500; }
.kr-closed__status { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border-radius: var(--r-pill); background: var(--paper-3); color: var(--ink-3); font-weight: 600; }
@media (max-width: 760px) {
  .kr-closed { flex-direction: column; align-items: stretch; gap: 22px; }
  .kr-closed__aside { justify-items: start; }
  .kr-closed__tags { justify-content: flex-start; }
  .kr-closed__status { width: 100%; }
}

/* "Buď upřímný" verdict */
.kr-verdict { display: grid; gap: 18px; margin-top: clamp(40px, 4vw, 64px); padding: clamp(28px, 4.5vw, 56px); border-radius: var(--r-xl); background: var(--purple-deep); color: var(--ink-inv); --focus: var(--ink-inv); }
.kr-verdict .kicker, .kr-mission .kicker { color: var(--purple-light); }
.kr-verdict__h { max-width: 22em; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.kr-verdict__h em { font-style: normal; color: var(--purple-light); }
.kr-verdict__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: 8px; }
.kr-verdict__block { display: grid; gap: 12px; align-content: start; }
.kr-verdict__block p { margin: 0; color: var(--inv-2); }
.kr-verdict__block strong { color: var(--ink-inv); font-weight: 600; }
.kr-verdict__block a { color: var(--purple-light); }
.kr-verdict__tag { justify-self: start; padding: 5px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.1); color: var(--inv-2); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.kr-verdict__block--in .kr-verdict__tag { background: var(--purple-light); color: var(--purple-deep); }
.kr-verdict__close { margin: 8px 0 0; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.12); font-family: var(--font-mono); font-size: 0.85rem; color: var(--purple-light); }
@media (max-width: 800px) { .kr-verdict__body { grid-template-columns: minmax(0, 1fr); } }

/* team stories: scroll-snap carousel of pastel cards (was .tcarousel) */
.kr-stories-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3vw, 44px); }
.kr-stories-head .section-head { margin-bottom: 0; }
.kr-nav { display: flex; gap: 8px; flex-shrink: 0; }
.kr-nav__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #FFFFFF; transition: background-color var(--t-fast), color var(--t-fast); }
.kr-nav__btn:hover { background: var(--purple-hover); }
.kr-nav__btn:disabled { background: var(--paper-3); color: var(--ink-3); cursor: default; }
.kr-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 24px; scrollbar-width: none; overscroll-behavior-x: contain; }
.kr-track::-webkit-scrollbar { display: none; }
.kr-story { flex: 0 0 min(360px, 84%); grid-template-rows: auto 1fr auto auto; align-content: start; padding: 26px; scroll-snap-align: start; }
.kr-story:nth-child(5n+1) { --tc: var(--p-peach); }
.kr-story:nth-child(5n+2) { --tc: var(--p-blue); }
.kr-story:nth-child(5n+3) { --tc: var(--p-lilac); }
.kr-story:nth-child(5n+4) { --tc: var(--p-yellow); }
.kr-story:nth-child(5n) { --tc: var(--p-green); }
.kr-story__head { display: grid; gap: 6px; }
.kr-story .tcard__metric { font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.55rem); }
.kr-story__sub { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: rgb(27 27 27 / 0.62); }
.kr-story blockquote { font-size: 1rem; }
.kr-story__result { margin: 0; padding-top: 14px; border-top: 1px solid rgb(27 27 27 / 0.1); font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.kr-story .tcard__av { position: relative; width: 44px; height: 44px; overflow: hidden; }
.kr-story .tcard__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-progress { height: 3px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.kr-progress__fill { display: block; height: 100%; background: var(--purple); transform: scaleX(0.08); transform-origin: left center; transition: transform 0.2s linear; }
.kr-stories-foot { max-width: 44rem; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; color: var(--ink-2); }
.kr-stories-foot strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .kr-stories-head { flex-direction: column; align-items: flex-start; } }

/* three principles as rows */
.kr-rows { display: grid; gap: 12px; }
.kr-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(16px, 4vw, 64px); padding: clamp(24px, 3vw, 38px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); }
.kr-row__n { color: var(--purple); }
.kr-row__body p { margin: 0 0 12px; color: var(--ink-2); }
.kr-row__body p:first-child { font-size: 1.1rem; }
.kr-row__body p:last-child { margin-bottom: 0; }
.kr-row__body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 800px) { .kr-row { grid-template-columns: minmax(0, 1fr); } }

/* real screenshots in an app window */
.kr-shot { max-width: 760px; margin: 0 auto; }
.kr-shot--narrow { max-width: 560px; }
.kr-shot__win { width: 100%; }
.kr-shot__win img { display: block; width: 100%; height: auto; }
.kr-shot__cap { margin-top: 16px; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.section--night .kr-shot__cap { color: var(--inv-3); }

/* Dřív / Dnes + Slack */
.kr-ba { display: grid; }
.kr-ba .ba__side { grid-template-rows: none; min-height: 0; gap: 12px; padding: 24px 26px; }
.kr-ba .ba__side--after { --c: var(--p-lilac); }
.kr-ba p { margin: 0; font-size: 1.02rem; color: var(--ink); }
.kr-ba .ba__side--before p { color: var(--ink-2); }
.kr-ba .ba__arrow { margin: -12px auto; transform: rotate(90deg); }
.kr-brain__aside { margin: 20px 0 0; padding-left: 14px; border-left: 2px solid var(--purple-light); color: var(--ink-2); }

/* stack and tools: chips with real tool logos */
.kr-stack { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 56px); margin-top: clamp(48px, 5vw, 80px); padding: clamp(26px, 4vw, 48px); border-radius: var(--r-xl); background: var(--frame-cream); }
.kr-stack__head { display: grid; gap: 10px; align-content: start; }
.kr-stack__body p, .kr-tools p { margin: 0; color: var(--ink-2); }
.kr-stack__body strong, .kr-tools strong { color: var(--ink); font-weight: 600; }
.kr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.kr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh-1); font-size: 0.92rem; font-weight: 600; }
.kr-chip .tool-ic { width: 16px; height: 16px; }
.kr-chip__plan { padding: 2px 8px; border-radius: var(--r-pill); background: var(--p-lilac); color: var(--purple); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.kr-tools { display: grid; justify-items: center; gap: 16px; max-width: 48rem; margin: 0 auto clamp(40px, 4vw, 64px); text-align: center; }
.kr-tools .kr-chips { justify-content: center; margin: 0; }
@media (max-width: 860px) { .kr-stack { grid-template-columns: minmax(0, 1fr); } }

/* traits, terms */
.kr-traits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kr-traits--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kr-trait { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); }
.kr-trait p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.kr-trait__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--tile, var(--p-lilac)); color: var(--ink); }
.kr-trait__ic .ic { width: 20px; height: 20px; }
.kr-trait:nth-child(6n+1) .kr-trait__ic { --tile: var(--p-peach); }
.kr-trait:nth-child(6n+2) .kr-trait__ic { --tile: var(--p-lilac); }
.kr-trait:nth-child(6n+3) .kr-trait__ic { --tile: var(--p-blue); }
.kr-trait:nth-child(6n+4) .kr-trait__ic { --tile: var(--p-green); }
.kr-trait:nth-child(6n+5) .kr-trait__ic { --tile: var(--p-yellow); }
.kr-trait:nth-child(6n) .kr-trait__ic { --tile: var(--p-pink); }
.kr-trait__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); }
@media (max-width: 1000px) { .kr-traits, .kr-traits--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kr-traits, .kr-traits--3 { grid-template-columns: minmax(0, 1fr); } }

/* Superpowered Akcelerátor */
.kr-accel { display: grid; gap: 16px; padding: clamp(28px, 5vw, 64px); border-radius: var(--frame-r); background: var(--frame-purple); color: #FFFFFF; --focus: #FFFFFF; }
.kr-accel .kicker { color: rgb(255 255 255 / 0.82); }
.kr-accel__h { max-width: 18em; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem); line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
.kr-accel__h em { font-style: normal; color: var(--p-lilac); }
.kr-accel__body { columns: 2; column-gap: clamp(24px, 4vw, 56px); margin-top: 12px; }
.kr-accel__body p { margin: 0 0 18px; break-inside: avoid; color: rgb(255 255 255 / 0.86); }
.kr-accel__body strong { color: #FFFFFF; font-weight: 600; }
@media (max-width: 800px) { .kr-accel__body { columns: 1; } }

/* job details: mission card, tasks, photo mosaic, steps, 30-day brief, apply bar */
.kr-mission { display: grid; gap: 18px; padding: clamp(28px, 5vw, 64px); border-radius: var(--frame-r); background: var(--purple-deep); color: var(--ink-inv); --focus: var(--ink-inv); }
.kr-mission .h2 { max-width: 20em; color: var(--ink-inv); }
.kr-mission .h2 em { color: var(--purple-light); }
.kr-mission__body { display: grid; gap: 14px; max-width: 48rem; }
.kr-mission__body p { margin: 0; font-size: 1.06rem; color: var(--inv-2); }
.kr-mission__body strong { color: var(--ink-inv); font-weight: 600; }
.kr-mission__k { margin: 18px 0 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-light); }
.kr-mission__perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; margin: 0; padding: 0; list-style: none; }
.kr-mission__perks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: rgb(250 244 238 / 0.9); }
.kr-mission__ic { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--purple-light); color: var(--purple-deep); }
.kr-mission__ic .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.kr-subhead { margin-top: clamp(56px, 6vw, 96px); margin-bottom: clamp(28px, 3vw, 40px); }
.kr-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; max-width: 64rem; margin: clamp(32px, 4vw, 48px) auto 0; }
.kr-subhead + .kr-tasks { margin-top: 0; }
.kr-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 16vw, 200px); gap: 12px; margin-top: clamp(40px, 4vw, 56px); }
.kr-mosaic .photo { margin: 0; }
.kr-mosaic .photo:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.kr-mosaic .photo:nth-child(2), .kr-mosaic .photo:nth-child(3) { grid-column: span 3; }
.kr-mosaic .photo:nth-child(n+4) { grid-column: span 2; }
.kr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kr-step { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); }
.kr-step__n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%; background: var(--purple); color: #FFFFFF; font-weight: 600; }
.kr-step p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.kr-step__bonus { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.kr-note { max-width: 46rem; margin: 24px auto 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }
.kr-brief { max-width: 52rem; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0 26px; border: 0; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); }
.kr-brief details { border-bottom: 0; }
.kr-brief .faq__a { padding-right: 0; }
.kr-brief__list { display: grid; gap: 4px; margin: 0 0 1em; padding-left: 1.2em; }
.kr-apply { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(32px, 4vw, 48px); padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r-xl); background: var(--purple-deep); color: var(--ink-inv); --focus: var(--ink-inv); }
.kr-apply p { margin: 0; max-width: 40rem; font-size: 1.1rem; color: var(--inv-2); }
@media (max-width: 900px) {
  .kr-steps { grid-template-columns: minmax(0, 1fr); }
  .kr-tasks, .kr-mission__perks { grid-template-columns: minmax(0, 1fr); }
  .kr-apply { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .kr-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 30vw, 170px); }
  .kr-mosaic .photo:nth-child(n) { grid-column: span 1; grid-row: auto; }
  .kr-mosaic .photo:nth-child(1), .kr-mosaic .photo:nth-child(6) { grid-column: span 2; }
  .kr-apply .btn { width: 100%; }
}
[data-page^="kariera"] .section--night .h2 em { color: var(--purple-light); }
/* ===== end kariera ===== */
/* ===== legacy redesign: programy (30. 9.) ===== */
/* Vibe Coding Summer (.vcs-), Superpowered Foundations (.fd-; shares the .vcs- components, as the old pages did)
   and the thank-you pages (.ty-). Sources: pages/vibe-coding-summer.html, pages/superpowered-foundations.html,
   pages/thankyou-foundation.html, pages/thankyou-vcs.html. */

/* cream frames */
[data-page="vibe-coding-summer"] main > :is(#audience, #cases, #program, #offer),
[data-page="superpowered-foundations"] main > :is(#tri-kroky, #cases, #program, #offer) {
  margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream);
}

/* hero */
.vcs-kicker { margin: 0; }
.vcs-proof-line { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.vcs-proof-line strong { color: var(--ink); font-weight: 600; }
.vcs-hero-photo { aspect-ratio: 4 / 3; }
.vcs-proof .statlist--row { margin-top: 0; }

/* quote + two opposing cards */
.vcs-quote { display: grid; gap: 16px; max-width: 52rem; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.vcs-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.vcs-quote figcaption { font-size: var(--fs-sm); color: var(--ink-3); }
.vcs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.vcs-vcard { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-xl); background: var(--frame-cream); }
.vcs-vcard > p { margin: 0; color: var(--ink-2); }
.vcs-vcard__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #FFFFFF; color: var(--ink-2); }
.vcs-vcard__ic .ic { width: 22px; height: 22px; }
.vcs-vcard__list { list-style: none; display: grid; margin: 4px 0 0; }
.vcs-vcard__list li { position: relative; padding: 12px 0 12px 24px; border-top: 1px solid var(--line); color: var(--ink); }
.vcs-vcard__list li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transform: translateY(-50%); }
.vcs-vcard > .vcs-punch { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.vcs-vcard--build { background: var(--purple-deep); color: var(--ink-inv); --focus: var(--ink-inv); }
.vcs-vcard--build .h3 { color: #FFFFFF; }
.vcs-vcard--build > p { color: var(--inv-2); }
.vcs-vcard--build .vcs-vcard__ic { background: var(--purple); color: #FFFFFF; }
.vcs-vcard--build .vcs-vcard__list li { color: var(--ink-inv); border-color: rgb(255 255 255 / 0.14); }
.vcs-vcard--build .vcs-vcard__list li::before { background: var(--purple-light); }
.vcs-vcard--build > .vcs-punch { color: #FFFFFF; border-color: rgb(255 255 255 / 0.14); }
.vcs-duo-close { margin: clamp(32px, 4vw, 56px) 0 0; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--purple); }
@media (max-width: 760px) { .vcs-duo { grid-template-columns: minmax(0, 1fr); } }

/* personas: photo + copy, alternating */
.vcs-personas { display: grid; gap: clamp(48px, 5vw, 80px); }
.vcs-persona__photo { aspect-ratio: 3 / 2; }
.vcs-persona .split__copy { gap: 14px; }
.vcs-persona__p { margin: 0; color: var(--ink-2); }
.vcs-persona__out { margin: 0; padding: 16px 18px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-1); color: var(--ink); }
.vcs-persona__out strong { color: var(--purple); font-weight: 600; }
.vcs-pquote { display: grid; gap: 8px; margin: 4px 0 0; padding-left: 18px; border-left: 2px solid var(--purple-light); }
.vcs-pquote blockquote { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.vcs-pquote figcaption { font-size: var(--fs-xs); color: var(--ink-3); }
.vcs-pquote figcaption strong { color: var(--ink); font-weight: 600; }

/* entry requirements */
.vcs-gate { max-width: 760px; margin-inline: auto; }
.vcs-center { justify-content: center; }

/* case studies: horizontal scroll-snap row with arrows and progress (inline JS in the page) */
.vcs-cases-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.vcs-cases-head .section-head { margin-bottom: 0; }
.vcs-cases-nav { display: flex; flex: none; gap: 10px; }
.vcs-cases-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--purple); color: #FFFFFF; transition: background-color var(--t-fast), color var(--t-fast); }
.vcs-cases-btn:hover:not(:disabled) { background: var(--purple-hover); }
.vcs-cases-btn:disabled { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.vcs-cases-track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), (100% - var(--maxw)) / 2); padding: 4px max(var(--gutter), (100% - var(--maxw)) / 2) 24px; scrollbar-width: none; }
.vcs-cases-track::-webkit-scrollbar { display: none; }
.vcs-cases-track:focus-visible { outline-offset: -2px; }
.vcs-case { flex: none; display: flex; flex-direction: column; gap: 14px; width: min(360px, 82vw); padding: 24px; scroll-snap-align: start; }
.vcs-case__head { display: grid; gap: 4px; }
.vcs-case__k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(27 27 27 / 0.72); }
.vcs-case__sub { font-size: var(--fs-xs); color: var(--ink-2); }
.vcs-case__res { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.vcs-case figcaption { margin-top: auto; }
.vcs-cases-prog { max-width: 320px; height: 4px; overflow: hidden; border-radius: 99px; background: rgb(27 27 27 / 0.08); }
.vcs-cases-prog i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(0.08); transition: transform 0.2s linear; }
@media (max-width: 640px) { .vcs-cases-head { flex-direction: column; align-items: flex-start; } }

/* outcomes: five cards, 3 + 2 */
.vcs-traits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.vcs-trait { grid-column: span 2; display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-xl); background: var(--frame-cream); }
.vcs-trait:nth-child(n+4) { grid-column: span 3; }
.vcs-trait__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--ink); }
.vcs-trait .h4 { margin-top: 4px; }
.vcs-trait p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 900px) { .vcs-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcs-trait, .vcs-trait:nth-child(n+4) { grid-column: auto; } .vcs-trait:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .vcs-traits { grid-template-columns: minmax(0, 1fr); } }

/* program: facts, weeks, extras */
.vcs-program-intro { margin-bottom: clamp(24px, 3vw, 36px); }
.vcs-meta-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: clamp(24px, 3vw, 36px); overflow: hidden; border-radius: var(--r-xl); background: var(--line-soft); box-shadow: var(--sh-1); }
.vcs-meta-row > div { display: grid; gap: 4px; align-content: start; padding: 18px 22px; background: var(--card); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vcs-meta-row strong { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (max-width: 760px) { .vcs-meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcs-meta-row > div { padding: 14px 16px; } .vcs-meta-row--3 { grid-template-columns: minmax(0, 1fr); } }
.vcs-weeks { display: grid; overflow: hidden; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.vcs-week { display: grid; grid-template-columns: 150px minmax(0, 1fr) 250px; gap: 12px 32px; align-items: start; padding: 26px clamp(20px, 3vw, 36px); border-top: 1px solid var(--line-soft); }
.vcs-week:first-child { border-top: 0; }
.vcs-week-label { padding-top: 5px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); }
.vcs-week-main h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.2; letter-spacing: -0.012em; }
.vcs-week-main p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.vcs-week-ship { padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.vcs-week-ship strong { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vcs-week--bonus { background: #F6F1FF; }
.vcs-week--bonus .vcs-week-ship { background: var(--card); }
.vcs-week--bonus .vcs-week-ship strong { color: var(--purple); }
@media (max-width: 900px) { .vcs-week { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.vcs-program-extras { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.vcs-extra-block { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.vcs-extra-block h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.012em; }
.vcs-extra-block p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.vcs-extra-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.vcs-extra-list li { padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.vcs-extra-list strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
.vcs-extra-block--sp { background: var(--purple-deep); color: var(--ink-inv); --focus: var(--ink-inv); }
.vcs-extra-block--sp h4 { color: #FFFFFF; }
.vcs-extra-block--sp p { color: var(--inv-2); }
.vcs-extra-block--sp .vcs-extras-foot { padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 0.14); line-height: 1.8; color: var(--ink-inv); }
@media (max-width: 900px) { .vcs-program-extras { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vcs-extra-list { grid-template-columns: minmax(0, 1fr); } }

/* guide / lecturer */
.vcs-about { align-items: center; }
.vcs-about__photo { aspect-ratio: 4 / 5; }
.fd-about__photo img { object-position: 70% center; }
.vcs-about .split__copy { gap: 16px; }
.vcs-about .prose a { color: var(--purple); }
.vcs-about .vcs-sign { margin-bottom: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.fd-ext { display: inline-block; margin-left: 4px; vertical-align: 0; }
.vcs-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.vcs-stats3 .stat__n { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); }
@media (max-width: 480px) { .vcs-stats3 { grid-template-columns: minmax(0, 1fr); } }

/* waitlist + what is included */
.vcs-offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.vcs-pricing { display: grid; gap: 18px; }
.vcs-pricing-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.vcs-pricing-meta > div { padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); }
.vcs-pricing-meta dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vcs-pricing-meta dd { margin: 4px 0 0; font-weight: 600; line-height: 1.35; color: var(--ink); }
.vcs-waitlist-copy { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.vcs-waitlist-form { display: flex; flex-wrap: wrap; gap: 10px; }
.vcs-waitlist-form[hidden] { display: none; }
.vcs-waitlist-input { flex: 1 1 220px; min-width: 0; min-height: 56px; padding-inline: 20px; border-radius: var(--r-pill); }
.vcs-waitlist-msg { margin: 0; font-weight: 600; color: var(--purple); }
.vcs-pricing-guarantee { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.vcs-pricing-guarantee a { color: var(--purple); }
.vcs-offer-side { display: grid; gap: 12px; align-content: start; padding-top: 8px; }
.vcs-offer-side .kicker { margin: 0; }
.vcs-offer { list-style: none; display: grid; margin-top: 6px; }
.vcs-offer li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); }
.vcs-offer li > .ic { width: 22px; height: 22px; margin-top: 1px; padding: 5px; border-radius: 50%; background: var(--purple); color: #FFFFFF; stroke-width: 2.4; }
.vcs-offer li.fd-offer-star > .ic { background: var(--p-yellow); color: #4A3500; stroke-width: 2; }
.vcs-offer a { color: var(--purple); }
@media (max-width: 900px) { .vcs-offer-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vcs-pricing-meta { grid-template-columns: minmax(0, 1fr); } }

/* FAQ links, closing band */
.vcs-faq-body a, :is([data-page="vibe-coding-summer"], [data-page="superpowered-foundations"]) #faq .lead a { color: var(--purple); }
.vcs-final .h1 em { color: var(--purple-light); }

/* Foundations: hero ticker (duplicated set, CSS marquee) */
.fd-ticker { overflow: hidden; margin-top: clamp(28px, 4vw, 48px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fd-ticker__track { display: flex; width: max-content; white-space: nowrap; animation: fd-ticker 30s linear infinite; }
.fd-ticker__item { padding-right: 48px; font-size: var(--fs-sm); color: var(--ink-2); }
.fd-ticker__item em { font-style: normal; color: var(--ink-3); }
@keyframes fd-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .fd-ticker { -webkit-mask-image: none; mask-image: none; }
  .fd-ticker__track { width: auto; flex-wrap: wrap; justify-content: center; gap: 6px 0; white-space: normal; animation: none; }
  .fd-ticker__item[aria-hidden="true"] { display: none; }
}

/* Foundations: three steps with small product UI */
.fd-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.fd-step { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.fd-step > p { flex: 1; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.fd-step__label { width: fit-content; padding: 4px 10px; border-radius: var(--r-pill); background: #F1EBFF; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--purple); }
.fd-step__arrow { display: grid; place-items: center; padding: 0 12px; color: var(--ink-3); }
.fd-step__arrow .ic { width: 22px; height: 22px; }
.fd-viz { margin-top: 6px; padding: 16px; border-radius: var(--r-md); background: var(--paper-2); }
.fd-viz--score { display: grid; justify-items: center; gap: 6px; text-align: center; }
.fd-score__n { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--purple); }
.fd-score__k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.fd-score__bars { display: grid; gap: 6px; width: 100%; margin: 6px 0 4px; }
.fd-bar { height: 6px; overflow: hidden; border-radius: 3px; background: rgb(27 27 27 / 0.07); }
.fd-bar i { display: block; height: 100%; border-radius: inherit; background: var(--purple); }
.fd-viz--tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fd-tile { padding: 10px 8px; border-radius: 10px; background: var(--card); box-shadow: var(--sh-1); text-align: center; font-size: 0.82rem; font-weight: 600; }
.fd-inbox { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.84rem; font-weight: 500; }
.fd-inbox:first-child { padding-top: 0; border-top: 0; }
.fd-inbox:last-child { padding-bottom: 0; }
.fd-inbox__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
.fd-inbox .kpill { margin-left: auto; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; }
@media (max-width: 900px) { .fd-steps { grid-template-columns: minmax(0, 1fr); } .fd-step__arrow { padding: 8px 0; transform: rotate(90deg); } }

/* Foundations: note under the audience */
.fd-note { max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; }
.fd-note p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.fd-note p + p { margin-top: 10px; }
.fd-note a { color: var(--purple); font-weight: 600; }

/* Foundations: skills accordion + assistants mock with tabs */
.fd-outcomes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.fd-outcomes__left > .kicker { margin: 0 0 12px; }
.fd-skills summary { justify-content: flex-start; gap: 14px; }
.fd-skill__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; color: var(--ink); }
.fd-skill__t { flex: 1; }
.fd-skills .faq__a { padding-left: 52px; }
.fd-prompts { overflow: hidden; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.fd-prompts__head { padding: 24px 26px 14px; }
.fd-prompts__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.fd-prompts__desc { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.fd-prompts__tabs { display: flex; overflow-x: auto; padding: 0 26px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.fd-prompts__tabs::-webkit-scrollbar { display: none; }
.fd-prompts__tab { margin-bottom: -1px; padding: 10px 14px; border-bottom: 2px solid transparent; font-size: 0.84rem; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.fd-prompts__tab:hover { color: var(--ink); }
.fd-prompts__tab.is-active { border-bottom-color: var(--purple); font-weight: 600; color: var(--purple); }
.fd-prompts__list { min-height: 336px; padding: 8px 0; }
.fd-prompts__panel[hidden] { display: none; }
.fd-prompt { display: flex; align-items: center; gap: 14px; padding: 12px 26px; transition: background-color var(--t-fast); }
.fd-prompt:hover { background: var(--paper-2); }
.fd-prompt__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #F1EBFF; color: var(--purple); }
.fd-prompt__ic .ic { width: 18px; height: 18px; }
.fd-prompt__info { min-width: 0; }
.fd-prompt__info strong { display: block; font-size: 0.94rem; font-weight: 600; }
.fd-prompt__info span { display: block; margin-top: 1px; font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 900px) { .fd-outcomes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .fd-prompts__head, .fd-prompt { padding-inline: 18px; } .fd-prompts__tabs { padding-inline: 12px; } .fd-skills .faq__a { padding-left: 0; } }

/* Foundations: certificate (dark frame) */
.fd-cert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 56px); align-items: center; }
.fd-cert__copy { display: grid; gap: 14px; }
.fd-cert__copy .kicker { margin: 0; }
.fd-cert__copy .h2 { color: var(--ink-inv); }
.fd-cert__copy p:not(.kicker) { margin: 0; max-width: 36em; color: var(--inv-2); }
.fd-cert__skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fd-cert__skills span { padding: 6px 14px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); font-size: 0.8rem; font-weight: 600; color: var(--ink-inv); }
.fd-cert__badge { display: grid; place-items: center; align-content: center; gap: 8px; width: 168px; height: 168px; border-radius: 50%; background: var(--purple); color: #FFFFFF; text-align: center; }
.fd-cert__badge span { font-size: 0.82rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; }
@media (max-width: 680px) { .fd-cert { grid-template-columns: minmax(0, 1fr); } .fd-cert__badge { order: -1; width: 128px; height: 128px; } }

/* Foundations: workshop blocks + tips */
.fd-blocks { margin-bottom: clamp(24px, 3vw, 36px); }
.fd-block__k { margin-right: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); }
.fd-blocks .faq__a a { color: var(--purple); }
.fd-tips { max-width: 48em; }

/* Foundations: prompt for the boss */
.fd-prompt-box { display: grid; gap: 14px; margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.fd-prompt-box .kicker { margin: 0; }
.fd-prompt-box__p { margin: 0; max-width: 46em; color: var(--ink-2); }
.fd-prompt-text { margin: 4px 0 6px; padding: 18px 20px; border-radius: var(--r-md); background: var(--paper-2); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.fd-open-ai img { width: 18px; height: 18px; }

/* Foundations: why now (closing band) */
.fd-why { display: grid; gap: 14px; max-width: 40em; }
.cta-band .fd-why p { max-width: none; }
.fd-why strong { color: var(--ink-inv); }
.cta-band .fd-why__big { max-width: 22em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-inv); }

/* Foundations: sticky bottom CTA on phones */
.fd-sticky { display: none; }
.fd-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 auto; }
.fd-sticky__txt { display: grid; line-height: 1.2; color: var(--ink-inv); }
.fd-sticky__amount { font-size: 1.05rem; font-weight: 700; }
.fd-sticky__meta { font-size: 0.72rem; color: var(--inv-3); }
@media (max-width: 768px) {
  .fd-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--purple-deep); box-shadow: 0 -8px 28px rgb(27 27 27 / 0.22); --focus: var(--ink-inv); }
  body[data-page="superpowered-foundations"] { padding-bottom: 76px; }
}

/* thank-you pages */
.ty-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ty-pill { padding: 8px 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh-1); font-size: var(--fs-sm); color: var(--ink-2); }
.ty-pill--variant { background: #F1EBFF; box-shadow: none; font-weight: 600; color: var(--purple); }
.ty-pill--price { background: var(--purple); box-shadow: none; font-weight: 600; color: #FFFFFF; }
.ty-photo { aspect-ratio: 3 / 2; }
[data-page^="thankyou-"] main > .page-hero { margin-bottom: clamp(48px, 6vw, 96px); }
/* ===== end programy ===== */
/* ===== legacy redesign: nastroje (30. 9.) ===== */
/* Tool pages rebuilt on the Opus design: /prompty/review (.pr-),
   /materialy/form + /materialy/download (.mt-), /ai-assessment (.aa-). */

/* frames: cream only where a section groups cards */
[data-page="ai-assessment"] main > #pro-koho,
[data-page="prompty-review"] main > .pr-doc {
  margin: var(--frame-gap); border-radius: var(--frame-r); background: var(--frame-cream);
}

/* --- /ai-assessment --- */
.aa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.aa-stat { display: grid; gap: 8px; align-content: start; padding: 28px 24px; }
.aa-stat + .aa-stat { border-left: 1px solid var(--line); }
.aa-stat__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3.1rem); line-height: 1; letter-spacing: -0.03em; color: var(--purple); font-variant-numeric: tabular-nums; }
.aa-stat__t { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
@media (max-width: 900px) {
  .aa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-stat:nth-child(3) { border-left: 0; }
  .aa-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .aa-stats { grid-template-columns: minmax(0, 1fr); }
  .aa-stat { padding: 20px 4px; }
  .aa-stat + .aa-stat { border-left: 0; border-top: 1px solid var(--line); }
}
.aa-signals { list-style: none; display: grid; gap: 18px; margin-top: 6px; }
.aa-signals li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.aa-signals__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--p-lilac); color: var(--purple-deep); font-family: var(--font-mono); font-size: 0.8rem; }
.aa-signals .h4 { margin: 2px 0 4px; }
.aa-signals p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.aa-report { width: min(100%, 440px); gap: 18px; }
.aa-report__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.aa-report__copy { display: grid; gap: 6px; }
.aa-report__h { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.015em; }
.aa-report__p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); }
.aa-report__score { display: grid; justify-items: end; flex: none; text-align: right; }
.aa-report__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--purple); }
.aa-report__k { margin-top: 6px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.aa-bars { display: grid; gap: 12px; }
.aa-bar { display: grid; gap: 6px; }
.aa-bar__l { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; color: var(--ink-2); }
.aa-bar__l strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.aa-bar__t { display: block; height: 8px; border-radius: 99px; background: #F1EEE9; overflow: hidden; }
.aa-bar__t i { display: block; height: 100%; border-radius: inherit; background: var(--purple); transition: width 1.2s var(--ease-out); }
.aa-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aa-steps .principle__t { margin: 0; }
@media (max-width: 1000px) { .aa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aa-steps { grid-template-columns: minmax(0, 1fr); } }
.aa-fit .fitc__sub { margin: 0 0 8px; }
@media (max-width: 520px) { .aa-report__top { flex-direction: column; } .aa-report__score { justify-items: start; text-align: left; } }

/* --- /prompty/review --- */
.pr-file { width: min(100%, 460px); margin: 0; }
.pr-file__code { margin: 0; padding: 18px 22px 22px; overflow-x: auto; background: var(--card); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); white-space: pre; }
.pr-file__code code { font: inherit; }
.pr-plans .kicker { color: var(--purple); }
.pr-plans .h3 { margin-top: -8px; }
.pr-download { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 80px); padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.pr-download__copy { display: grid; gap: 12px; }
.pr-download__copy p { margin: 0; color: var(--ink-2); }
.pr-download__actions { gap: 14px 24px; }
.pr-download .link-arrow { color: var(--purple); }
.pr-steps { list-style: none; counter-reset: prs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.pr-steps li { counter-increment: prs; display: block; padding: 16px 18px; border-radius: 16px; background: #FAF7F2; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.pr-steps li::before { content: counter(prs, decimal-leading-zero); display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--purple); }
.pr-steps strong { color: var(--ink); font-weight: 600; }
.pr-steps code { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 6px; border-radius: 6px; background: rgb(27 27 27 / 0.06); white-space: nowrap; }
@media (max-width: 760px) { .pr-steps { grid-template-columns: minmax(0, 1fr); } }
.pr-prose li > ul { margin-top: 0.4em; }
.pr-prose .legal-meta + h2 { margin-top: 0.4em; }
.pr-prose code { white-space: nowrap; }
.pr-prose .pr-code-long { white-space: normal; }

/* --- /materialy/form, /materialy/download --- */
.mt-leadgen { padding-block: clamp(40px, 6vw, 96px); }
.mt-card { display: grid; gap: 24px; max-width: 640px; margin-inline: auto; padding: clamp(28px, 5vw, 52px); border: 0; box-shadow: var(--sh-2); }
.mt-card__copy { display: grid; gap: 14px; }
.mt-card__copy .hero__kicker, .mt-card__copy .hero__sub { margin: 0; }
.mt-card__h { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mt-form { gap: 14px; }
.mt-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.mt-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--purple); }
.mt-consent a { color: var(--purple); }
.mt-card__meta { display: grid; gap: 6px; }
.mt-note { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.mt-error { margin: 0; font-size: 0.88rem; color: #B42318; }
.mt-error:empty { display: none; }
.mt-next { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.mt-next__k { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mt-next .link-arrow { justify-self: start; color: var(--purple); }

/* ===== end nastroje ===== */

/* "Pro firmy" dropdown in the nav (Tom, 5. 10. 2026). Same card and motion as the "Otevřít v AI" menu. */
.nav__dd { position: relative; display: flex; align-items: center; border-radius: var(--r-pill); transition: background-color var(--t-fast); }
/* one pill around the link and the caret: hover and current state sit on the item, not on the link */
.nav__links .nav__dd > a { padding-right: 2px; background: none; }
.nav__dd:hover, .nav__dd[data-open="true"] { background: rgb(27 27 27 / 0.05); }
.nav__dd:has(> a[aria-current="page"]) { background: rgb(27 27 27 / 0.06); }
.nav__dd-btn { display: inline-grid; place-items: center; width: 24px; height: 32px; margin-right: 4px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-3); cursor: pointer; }
.nav__dd-btn:hover { color: var(--ink); }
.nav__dd-btn svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease-out); }
.nav__dd[data-open="true"] .nav__dd-btn svg { transform: rotate(180deg); }
.nav__dd-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: grid; gap: 2px; min-width: 300px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0s linear 0.25s; }
.nav__dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__dd[data-open="true"] .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .nav__dd:hover .nav__dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.nav__links .nav__dd-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: none; color: var(--ink); font-size: 0.92rem; font-weight: 500; line-height: 1.25; }
.nav__links .nav__dd-menu a small { font-size: 0.78rem; font-weight: 400; color: var(--ink-3); }
.nav__links .nav__dd-menu a:hover, .nav__links .nav__dd-menu a:focus-visible { background: #F6F2EC; }
.nav__links .nav__dd-menu a[aria-current="page"] { background: rgb(27 27 27 / 0.06); }
.mobile-menu li.mobile-sub a { padding: 11px 0 11px 18px; font-size: 1rem; color: var(--ink-2); }

/* Prompt card for AI-first sections on role pages: same component as the e-book Školení nestačí (pruvodce.css). */
.prompt { display: grid; gap: 10px; margin-top: 4px; }
.prompt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prompt__copy { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 10px; border: 0; border-radius: var(--r-pill); background: var(--purple); color: #FFFFFF; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast); }
.prompt__copy:hover { background: var(--purple-hover); }
.prompt__copy:active { transform: scale(0.98); }
.prompt__copy.is-done { background: var(--sage-deep, #2F6B4F); }
.prompt__logos { display: inline-flex; }
.prompt__logos img { box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px var(--purple); }
.prompt__logos img + img { margin-left: -3px; }
.prompt__copy.is-done .prompt__logos img { box-shadow: 0 0 0 2px var(--sage-deep, #2F6B4F); }
.prompt__open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); background: rgb(27 27 27 / 0.06); color: var(--ink); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background-color var(--t-fast); }
.prompt__open:hover { background: rgb(27 27 27 / 0.1); }
.prompt__d summary { cursor: pointer; width: max-content; font-size: 0.86rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.prompt__d summary::-webkit-details-marker { display: none; }
.prompt__d[open] summary { margin-bottom: 8px; }
.prompt__text { margin: 0; max-height: 18em; overflow: auto; padding: 14px 16px; border-radius: 12px; background: rgb(255 255 255 / 0.7); font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .prompts { grid-template-columns: minmax(0, 1fr); } }
.prompts__c { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-xl); background: var(--tile, var(--p-lilac)); color: var(--ink); }
.prompts__c h3 { margin: 0; }
.prompts__c p { margin: 0; color: var(--ink-2); }
/* Pinned keep story with five steps (role pages); phones keep height:auto */
@media (min-width: 901px) { .keepx--5 { height: calc(100vh + 4 * 50vh); } }
/* Prompt cards on role pages: knihovna card (library.css) + copy / open actions */
.lib-grid.lib-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 0; }
@media (max-width: 1100px) { .lib-grid.lib-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-grid.lib-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.lib-grid.lib-grid--3 { gap: 22px; margin-top: 0; }
@media (max-width: 900px) { .lib-grid.lib-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.lib-card__type svg { width: 18px; height: 18px; }
.lib-card [data-prompt-pv] { white-space: pre-line; }
.pact { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.pact__copy { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: var(--purple); color: #FFFFFF; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background-color var(--t-fast); }
.pact__copy:hover { background: var(--purple-hover); }
.pact__copy svg { width: 15px; height: 15px; }
.pact__copy.is-done { background: var(--sage-deep); }
.pact__ai { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(27 27 27 / 0.05); transition: background-color var(--t-fast); }
.pact__ai:hover { background: rgb(27 27 27 / 0.1); }

@media (min-width: 901px) { .keepx--3 { height: calc(100vh + 2 * 50vh); } }
/* Timeline (role pages): numbered steps on a rail, pastel q3 cards under each */
.tl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl__s { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.tl__s .q3__c { height: 100%; }
.tl__s .q3__c p { margin: 0; color: var(--ink-2); }
.tl__k { position: relative; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* rail: a segment after each label runs to the next number, so it never crosses the text */
.tl__k::after { content: ""; flex: 1; height: 2px; margin-right: -16px; background: var(--line); }
.tl__s:last-child .tl__k::after { display: none; }
.tl__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--purple); color: #FFFFFF; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; box-shadow: 0 0 0 6px #FFFFFF; }
/* three insight tiles (role pages) */
.insights--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .insights--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .tl { grid-template-columns: minmax(0, 1fr); }
  .tl::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 16px; width: 2px; background: var(--line); }
  .tl__k::after { display: none; }
  .tl__s { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
  .tl__k { grid-column: 1 / -1; }
  .tl__s .q3__c { grid-column: 2; }
}


/* ---------- Contact: three founders' photos, overlapping (7. 10.) ---------- */
.person__stack { display: flex; flex-shrink: 0; }
.person__stack .person__img { width: 56px; height: 56px; border: 3px solid var(--card); box-shadow: var(--sh-1); box-sizing: content-box; }
.person__stack .person__img + .person__img { margin-left: -16px; }
.person__stack .person__img:nth-child(1) { z-index: 3; }
.person__stack .person__img:nth-child(2) { z-index: 2; }
.person__stack .person__img:nth-child(3) { z-index: 1; }
.person__stack .person__img { position: relative; }
@media (max-width: 480px) {
  .person:has(.person__stack) { gap: 12px; }
  .person__stack .person__img { width: 44px; height: 44px; }
  .person__stack .person__img + .person__img { margin-left: -12px; }
}