/* =====================================================================
   ProfiPage — vrstva „oživení“
   Načítá se až za profipage.css. Nic tu nemění rozvržení stránek ani
   administraci — jen přidává pohyb, světlo a hloubku: reflektor na
   kartách pod kurzorem, běžící pás log, rozsvěcující se text, kreslící se
   linka postupu, projíždějící náhledy referencí a tmavé „uzavření“
   stránky u formuláře.
   Ovládací logiku (kurzor, scroll, pás log) má www/js/wow.js.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Barva textu — nadpisy tmavě modré z loga, běžný text černý
   Přebíjí jen --ink-strong (nadpisy) na odstín „Profi“ v logu (--brand-800);
   --ink (odstavce) a --ink-muted (tlumený text) zůstávají z profipage.css.
   --------------------------------------------------------------------- */

:root {
    --ink-strong: #1B438C;
}

/* Nadpisy, které cms.css barví napřímo (--color-text / --color-gold),
   a proto by proměnnou nepřevzaly */
.page-header--homepage .page-header__title,
.staff-card__name,
.blok-card__name { color: var(--ink-strong); }

/* ---------------------------------------------------------------------
   1. Základ — odhalování při scrollu, ukazatel průběhu, lesk tlačítek, logo
   --------------------------------------------------------------------- */

/* Odhalení je o kousek delší a k posunu přibývá rozostření —
   prvky „zaostří“, ne jen vyjedou. */
/* Průhlednost naběhne rychle, rozostření mizí pomaleji — prvek je tak
   chvíli vidět ještě rozmazaný a teprve pak „zaostří“. Kdyby obojí běželo
   stejně dlouho, rozostření by zaniklo v průhlednosti. */
[data-animate] {
    transform: translateY(30px);
    transition: opacity .45s cubic-bezier(.2, .8, .25, 1),
                transform .85s cubic-bezier(.2, .8, .25, 1),
                filter 1.1s cubic-bezier(.2, .8, .25, 1);
    transition-delay: calc(var(--stagger, 0) * 80ms);
}

/* Rozostření jen u menších prvků (karty, nadpisy) — celé sekce přes
   šířku okna by se rozmazávaly draze a trhaně. Podmínka na .is-visible
   je tu kvůli specificitě: samotné :not() by jinak přebilo odhalení. */
[data-animate]:not(.page-subsection):not(.clients-marquee):not(.is-visible):not(.animate-in):not(.visible) {
    filter: blur(12px);
}

[data-animate="zoom-in"] { transform: translateY(30px) scale(.96); }

[data-animate].is-visible,
[data-animate].animate-in,
[data-animate].visible {
    filter: none;
}

/* Karty mají vlastní `transition` pro hover (zvednutí, rámeček, stín),
   která by přechod odhalení přepsala — karta by pak jen skočila. Přechod
   se čte ze stavu PO změně, proto se tu pro odhalený stav skládá obojí:
   odhalení i hover. Zdvojený atribut jen zvedá specificitu nad pravidla
   karet (.page-subsection:not(…) .blok-card). */
[data-animate][data-animate].is-visible,
[data-animate][data-animate].animate-in,
[data-animate][data-animate].visible {
    transition: opacity .45s cubic-bezier(.2, .8, .25, 1),
                transform .7s cubic-bezier(.2, .8, .25, 1),
                filter 1.1s cubic-bezier(.2, .8, .25, 1),
                background-color .3s ease,
                border-color .3s ease,
                box-shadow .3s ease,
                color .3s ease;
    /* zkrácený zápis výše by odstup mezi sousedy vynuloval */
    transition-delay: calc(var(--stagger, 0) * 80ms);
}

/* Pojistka pro vyhledávače a prohlížeče bez JS: skrývání prvků před
   odhalením platí jen, když běží skript (třídu .js dává <html> inline
   skript v @layout.latte). Bez JS je všechno hned viditelné a ostré. */
html:not(.js) [data-animate] {
    /* !important: pravidlo rozostření níže má kvůli řetězci :not() vyšší
       specificitu a bez toho by tuhle pojistku přebilo */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Tenká linka u horního okraje — kolik stránky je přečteno */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 3px;
    background: var(--grad-brand);
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
}

/* Lesk přejíždějící přes hlavní tlačítko */
.btn--primary {
    position: relative;
    overflow: hidden;
}

.btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
    transform: skewX(-22deg);
    transition: left .65s cubic-bezier(.2, .8, .25, 1);
    pointer-events: none;
}

.btn--primary:hover::after { left: 130%; }

/* Světlá hlavička podstránek (bez .header--blue): základní styly
   z profipage.css, tady jen zvýraznění aktuální položky menu. */
.header:not(.header--blue) .nav__link[aria-current="page"] {
    color: var(--brand-700);
    text-decoration: underline;
    text-decoration-color: var(--brand-400);
    text-underline-offset: 7px;
}

/* Tmavě modrá hlavička úvodní stránky, barevně sladěná s hero. */
.header.header--blue {
    background: rgba(9, 27, 50, .96);
    border: 0;
    box-shadow: 0 4px 24px #04152b14;
}
.header--blue.header--overlay:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.header--blue .logo,
.header--blue a.logo:hover,
.header--blue a.logo:focus-visible {
    color: #f4f8ff;
    --logo-dot: #8fc3fb;
}
.header--blue.header .logo__tagline { color: #a8bed8; }
.header--blue.header .nav__link { color: #c4d6eb; }
.header--blue.header .nav__link:hover,
.header--blue.header .nav__dropdown:is(:hover, :focus-within) > .nav__link {
    color: #fff;
    background: #b1d5ff12;
}
.header--blue .nav__link[aria-current="page"] {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #9ac8fb;
    text-underline-offset: 7px;
}
.header--blue .nav--desktop .nav__submenu {
    background: #f3f7fd;
    border-color: #d5e3f2;
}
.header--blue .nav--desktop .nav__dropdown:focus-within > .nav__submenu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.header--blue.header .header__cta {
    background: #c6e1ff;
    border-color: transparent;
    color: #12355f;
    box-shadow: none;
    backdrop-filter: none;
}
.header--blue.header .header__cta:hover {
    background: #eef6ff;
    border-color: transparent;
    color: #12355f;
}
.header--blue .hamburger span { background: #e1eeff; }
.header--blue .nav__add-page { color: #c4d6eb; border-color: #a8bed880; }
.header--blue :is(a, button, [tabindex]):focus-visible,
.nav--blue :is(a, button):focus-visible {
    outline: 2px solid #5e9cdb;
    outline-offset: 3px;
}
.nav--mobile.nav--blue { background: #f3f7fd; }
.nav--blue .nav__header-title { color: #315b8c; }
.nav--blue .nav__dropdown .nav__arrow {
    margin-left: auto;
    font-size: 0;
    transform: none;
}
.nav--blue .nav__arrow::after {
    border-color: #527caa;
    transform: rotate(45deg);
}
.nav--blue .nav__dropdown.active > .nav__link .nav__arrow::after {
    transform: rotate(225deg);
}
.nav--blue .nav__link[aria-current="page"] {
    color: #153b6b;
    background: #dceafa;
}

/* ---------------------------------------------------------------------
   2. Hero — naklánění za kurzorem, kurzor v okně, nápověda scrollu
   --------------------------------------------------------------------- */

/* Naklonění podle polohy kurzoru (proměnné plní wow.js). Okno má vlastní
   animaci s transformem, proto se naklání celý obal vizuálu. */
.hero__visual {
    transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
}

/* Obsah hera při scrollu jemně ustupuje (plní wow.js) */
.hero__layout {
    transform: translateY(var(--hero-shift, 0px));
    opacity: var(--hero-fade, 1);
    will-change: transform, opacity;
}

/* Kurzor, který v okně „staví“ web, jezdí po celé ploše okna.
   Původní dráha posouvala kurzor v procentech jeho vlastní velikosti
   (20 px), takže se hýbal jen v rohu; tady jsou procenta z plochy okna. */
.hero__cursor {
    top: 0;
    left: 0;
    animation: ppCursorRoam 14s cubic-bezier(.45, .05, .3, .95) infinite;
}

@keyframes ppCursorRoam {
    0%   { left: 78%; top: 62%; transform: scale(1);   opacity: 0; }
    6%   { left: 70%; top: 55%; transform: scale(1);   opacity: 1; }
    /* projde návrh */
    18%  { left: 24%; top: 24%; transform: scale(1); }
    24%  { left: 12%; top: 30%; transform: scale(.86); }
    /* táhne odkrývání zleva doprava */
    32%  { left: 38%; top: 46%; transform: scale(1); }
    40%  { left: 66%; top: 34%; transform: scale(.86); }
    48%  { left: 92%; top: 52%; transform: scale(1); }
    /* doladí detaily hotového webu */
    62%  { left: 30%; top: 78%; transform: scale(1); }
    72%  { left: 58%; top: 80%; transform: scale(.86); }
    82%  { left: 80%; top: 26%; transform: scale(1); }
    90%  { left: 88%; top: 60%; transform: scale(1); opacity: 1; }
    97%, 100% { left: 78%; top: 62%; transform: scale(1); opacity: 0; }
}

/* Hero showcase: dekorativní koncept, nikoli reference skutečného klienta. */
.hero--showcase {
    height: auto;
    max-height: none;
    background: radial-gradient(ellipse at 82% 45%, #153967 0%, transparent 60%),
                linear-gradient(120deg, #071326, #0b2144 60%, #0b274e);
}
.hero--showcase .hero__scrim {
    background: linear-gradient(90deg, #06132766, transparent 65%),
                linear-gradient(0deg, #06132755, transparent 35%);
}
.hero--showcase .hero__eyebrow::before {
    background: #a8dcff;
    box-shadow: 0 0 12px #8acaff65;
    animation: none;
}
.hero--showcase.is-motion-paused .hero__echo { animation-play-state: paused; }
.hero--showcase .hero__layout { gap: clamp(2rem, 5vw, 5rem); }
.hero--showcase .hero__content-text { max-width: 49ch; }
.hero--showcase .hero__title-accent {
    background-image: linear-gradient(100deg, #8de5ff, #c1d6ff 60%, #fff);
}
.hero--showcase .hero__eyebrow {
    background: rgba(155, 201, 255, .06);
    border-color: rgba(155, 201, 255, .2);
    font-style: normal;
}
.hero--showcase .hero__visual { padding: 2rem 2.5rem 4rem 0; transform-style: flat; }
.hero__halo {
    position: absolute;
    inset: -18% -16%;
    border: 1px solid rgba(139, 205, 255, .14);
    border-radius: 50%;
    transform: rotate(-22deg);
    background: radial-gradient(ellipse, #5a9ee822, transparent 65%);
    pointer-events: none;
}
.hero__halo::before,
.hero__halo::after {
    content: '';
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(139, 205, 255, .09);
    border-radius: 50%;
}
.hero__halo::after { inset: 22%; }
.hero__echo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse closest-side,
        transparent 63%, #75bfff08 74%, #75bfff30 86%,
        #b6e7ff45 93%, #75bfff18 98%, transparent 100%);
    filter: blur(8px);
    opacity: 0;
    transform: scale(.55);
    animation: ppHeroEcho 10s linear infinite;
}
.hero__echo:nth-child(2) { animation-delay: -3.333s; }
.hero__echo:nth-child(3) { animation-delay: -6.667s; }
@keyframes ppHeroEcho {
    0% { transform: scale(.55); opacity: 0; }
    15% { opacity: .8; }
    65% { opacity: .45; }
    100% { transform: scale(2.8); opacity: 0; }
}
.hero--showcase .hero__window {
    border-radius: 15px;
    border-color: rgba(190, 221, 255, .4);
    box-shadow: 0 35px 80px #020b2680, 0 0 50px #7bbcff12;
}
.hero--showcase .hero__window-bar { background: #13233e; }
.hero--showcase .hero__window-body { min-height: 340px; }
.hero--showcase .hero__stage--final {
    background: #f0f5fc;
    color: #142e53;
    padding: 1.3rem 1.5rem;
    gap: 1.5rem;
    clip-path: none;
    animation: ppConceptReveal 1.6s cubic-bezier(.2, .8, .25, 1) both;
}
.hero__concept-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .55rem; }
.hero__concept-brand { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.hero__concept-brand > span { font-size: .55rem; vertical-align: top; margin-left: .2rem; }
.hero__concept-menu { font-size: 1rem; }
.hero__concept-main { display: grid; grid-template-columns: 1fr 1fr; align-items: center; flex: 1; }
.hero__concept-eyebrow { display: block; font-size: .45rem; font-weight: 600; letter-spacing: .12em; margin-bottom: .7rem; }
.hero__concept-copy > strong {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.5vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -.06em;
}
.hero__concept-copy em,
.hero__phone-heading em { font-family: Georgia, serif; font-weight: 400; }
.hero__concept-link { display: inline-flex; align-items: center; gap: 1.4rem; font-size: .57rem; margin-top: 1.2rem; }
.hero__concept-link b { display: grid; place-items: center; width: 24px; height: 24px; background: #c4dfff; border-radius: 50%; font-size: .9rem; }
.hero__sculpture { position: relative; height: 210px; perspective: 650px; }
.hero__sculpture::after {
    content: ''; position: absolute; width: 85%; height: 18px; bottom: 2%; left: 10%;
    background: #183f7120; filter: blur(9px); border-radius: 50%;
}
.hero__sculpture-ring {
    position: absolute;
    width: 78%; aspect-ratio: 1;
    top: 5%; left: 10%;
    border: 23px solid #659edb;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 4px 4px 9px #ecfaff, inset -7px -8px 10px #285c9f,
                6px 10px 12px #173d6930;
    transform: rotateX(28deg) rotateY(-32deg) rotateZ(-25deg);
}
.hero__sculpture-ring--two { top: 19%; left: 21%; border-color: #9ec8f4; transform: rotateX(28deg) rotateY(-32deg) rotateZ(-25deg) scale(.87); }
.hero__sculpture-ring--three { top: 34%; left: 31%; border-color: #c2e4ff; transform: rotateX(28deg) rotateY(-32deg) rotateZ(-25deg) scale(.7); }
.hero__concept-footer {
    display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #183b6920;
    padding-top: .8rem; font-size: .48rem; letter-spacing: .02em;
}
.hero__phone {
    position: absolute; right: 2%; bottom: 6%; width: 27%; max-width: 155px; z-index: 3;
    border: 5px solid #182438; border-radius: 26px; padding: 5px;
    background: #182438; transform: rotate(8deg) translateZ(45px);
    box-shadow: 12px 24px 40px #020a2850, inset 0 0 0 1px #ffffff40;
    animation: ppPhoneArrival 1.2s .4s backwards;
}
.hero__phone-camera { position: absolute; top: 9px; left: 33%; width: 34%; height: 9px; border-radius: 20px; background: #182438; z-index: 1; }
.hero__phone-screen { background: #e6effc; padding: 1.6rem .7rem .8rem; border-radius: 17px; color: #142e53; overflow: hidden; }
.hero__phone .hero__concept-brand { font-size: 1rem; }
.hero__phone-heading { display: block; font-size: .84rem; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; margin-top: 1.1rem; }
.hero__phone-art { position: relative; height: 100px; display: grid; place-items: center; }
.hero__phone-art span {
    width: 65px; height: 65px; border: 17px solid #7aafe6; border-radius: 50%;
    transform: rotate(-30deg) skewY(12deg);
    box-shadow: inset 4px 4px 8px #e5f7ff, inset -5px -5px 8px #376fa9, 9px 12px 12px #234c7d28;
}
.hero__phone-link { display: flex; justify-content: space-between; align-items: center; font-size: .5rem; background: #bddbfc; padding: .4rem .5rem; border-radius: 20px; }
.hero__phone-line { display: block; width: 40%; height: 3px; border-radius: 3px; background: #19375c; margin: 1rem auto 0; }
.hero__design-note {
    position: absolute; top: -2.6rem; right: 7%; display: grid; grid-template-columns: auto 1fr;
    column-gap: .7rem; color: #dbeaff; font-size: .7rem; line-height: 1.5;
}
.hero__design-mark {
    grid-row: span 2; align-self: center; width: 25px; height: 32px;
    border-radius: 7px; transform: rotate(-15deg);
    background: linear-gradient(135deg, #e7f6ff, #82baf2 55%, #3478c7);
    box-shadow: 5px 4px 0 #93c7ff20;
}
.hero__design-note strong { font-weight: 500; color: #fff; }
.hero__build-note {
    position: absolute; left: -5%; bottom: 1.7rem; z-index: 4; display: flex; gap: .8rem; align-items: center;
    padding: .8rem 1rem; background: #0c2245ee; border: 1px solid #a6d3ff40; border-radius: 12px;
    color: #b1c8e6; font-size: .65rem; line-height: 1.65; box-shadow: 0 12px 35px #020a2830;
    transform: translateZ(25px);
}
.hero__build-note > span { color: #a8d8ff; font-family: monospace; font-size: 1.2rem; }
.hero__build-note strong { color: white; font-weight: 500; }
.hero__workflow {
    position: absolute; bottom: -1.7rem; left: 3%; right: 0; display: flex; align-items: center; gap: .7rem;
    color: #adc7e7; font-size: .6rem; letter-spacing: .04em; white-space: nowrap;
}
.hero__workflow i { flex: 1; height: 1px; background: linear-gradient(90deg, #89c4ec50, #89c4ec10); }
.hero__workflow b { color: #a8d8ff; }
@keyframes ppConceptReveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
}
@keyframes ppPhoneArrival {
    from { opacity: 0; transform: rotate(14deg) translateY(30px); }
    to { opacity: 1; transform: rotate(8deg) translateZ(45px); }
}
@media (min-width: 981px) and (max-height: 760px) {
    .hero--showcase .hero__window-body { min-height: 295px; }
    .hero--showcase .hero__stage--final { gap: .8rem; }
    .hero__sculpture { height: 170px; }
    .hero__concept-copy > strong { font-size: 2.6rem; }
    .hero__design-note { top: -1.5rem; }
}
@media (max-width: 1080px) {
    .hero--showcase { padding-bottom: 3.5rem; }
    .hero--showcase .hero__layout { gap: 4rem; }
    .hero--showcase .hero__scroll-hint { display: none; }
    .hero--showcase .hero__visual { max-width: 530px; width: 100%; margin-inline: auto; padding-right: 1.5rem; }
    .hero__concept-copy > strong { font-size: 2.8rem; }
    .hero__design-note { top: -1.4rem; }
}
@media (max-width: 640px) {
    .hero--showcase .hero__window-body { min-height: 300px; }
    .hero--showcase .hero__stage--final { padding: 1rem; }
    .hero__concept-nav > span:nth-child(2),
    .hero__concept-footer > span:last-child { display: none; }
    .hero__concept-copy > strong { font-size: 2rem; }
    .hero__sculpture { height: 150px; }
    .hero__sculpture-ring { border-width: 15px; }
    .hero__phone { min-width: 110px; }
    .hero__workflow { left: 0; font-size: .52rem; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__echo,
    .hero--showcase .hero__stage--final,
    .hero--showcase .hero__phone { animation: none; }
}

/* Nápověda „posunout“ — linka, po které stéká světlo */
.hero__scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    animation: ppHeroIn 1s cubic-bezier(.2, .8, .25, 1) 1.6s both;
    transition: color .25s ease;
}

.hero__scroll-hint:hover { color: #fff; }

.hero__scroll-hint-line {
    position: relative;
    width: 1px;
    height: 46px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.hero__scroll-hint-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, #fff);
    animation: ppScrollDrop 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes ppScrollDrop {
    0%   { top: -100%; }
    60%, 100% { top: 100%; }
}

.hero__scroll-hint-text {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   3. Úvodní sekce pod hero — nadpis a redakčně sázený text
   --------------------------------------------------------------------- */

.page-header--homepage .page-header__title {
    max-width: 12ch;
    font-size: clamp(2.6rem, 4.7vw, 4rem);
    line-height: 1.08;
    margin: .9rem 0 1.5rem;
    color: #17365e;
}

.page-header--homepage .page-header__content > .rich-text {
    max-width: 38ch;
    font-size: 1.05rem;
    line-height: 1.75;
}
.page-header--homepage .page-header__content {
    min-width: 0;
    padding: 0;
}

.page-header--homepage .page-header__layout--intro {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "content body";
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}
.page-header--homepage .page-header__eyebrow {
    max-width: 40ch;
    font-size: .7rem;
    line-height: 1.7;
    letter-spacing: .12em;
    color: #52789f;
}
.homepage-intro__body {
    grid-area: body;
    min-width: 0;
}
.homepage-intro__text {
    color: #52677f;
    font-size: 1.08rem;
    line-height: 1.85;
}
.homepage-intro__text > p:first-child {
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.6;
    color: #17365e;
    margin: 0 0 1.75rem;
}
.homepage-intro__text > :last-child { margin-bottom: 0; }
.homepage-intro__body .intro-media { margin-top: 2.5rem; }
.intro-orbit {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 2rem;
    border-radius: 50%;
    background: radial-gradient(circle, #dbeafb80, transparent 70%);
}
.intro-orbit__ring {
    position: absolute;
    inset: 0;
    border: 1px solid #83aad5;
    border-radius: 50%;
    opacity: .35;
}
.intro-orbit__ring:nth-child(2) { transform: scale(.72); opacity: .6; }
.intro-orbit__ring:nth-child(3) { transform: scale(.44); opacity: .85; }
.intro-orbit__core {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #93c4fb, #24558b);
    box-shadow: 0 3px 9px #24558b26;
}
@media (prefers-reduced-motion: no-preference) {
    .intro-orbit__ring { animation: ppIntroEcho 4.8s linear infinite; }
    .intro-orbit__ring:nth-child(2) { animation-delay: -1.6s; }
    .intro-orbit__ring:nth-child(3) { animation-delay: -3.2s; }
}
@keyframes ppIntroEcho {
    0% { transform: scale(.18); opacity: 0; }
    12% { opacity: .9; }
    60% { opacity: .4; }
    100% { transform: scale(1.2); opacity: 0; }
}
@media (max-width: 800px) {
    .page-header--homepage .page-header__layout--intro {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content" "body";
        gap: 2rem;
    }
    .page-header--homepage .page-header__content > .rich-text { max-width: none; }
    .intro-orbit { margin-bottom: 1.5rem; }
}

/* Fotka stránky Úvod — v rámečku, za ní barevná záře */
.intro-media {
    position: relative;
    margin: 0;
    isolation: isolate;
}

.intro-media::before {
    content: '';
    position: absolute;
    inset: 12% -6% -8% 10%;
    z-index: -1;
    border-radius: var(--r-xl);
    background: var(--grad-brand);
    opacity: .16;
    filter: blur(28px);
}

.intro-media img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: rotate(-1.5deg);
    transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}

.intro-media:hover img { transform: rotate(0deg) scale(1.02); }

/* ---------------------------------------------------------------------
   4. Nadpisy sekcí — větší řez
   --------------------------------------------------------------------- */

.section-heading__title,
.page-subsection__title,
.page-subsection h2 {
    font-size: clamp(2rem, 3.8vw, 2.9rem);
}

/* ---------------------------------------------------------------------
   5. Karty — podbarvení služeb, reflektor pod kurzorem
   Polohu světla (--mx, --my v px) nastavuje wow.js.
   --------------------------------------------------------------------- */

/* Karty služeb a výhod ve světlých sekcích: jemně podbarvené, aby na bílé
   nesplývaly, při najetí se zvednou a orámují modře */
.page-subsection:where(:not(.page-subsection--bg-tmava)) .blok-card,
.page-subsection:where(:not(.page-subsection--bg-tmava)) .staff-card {
    background: var(--surface-soft);
    --card-border: var(--line);
    transition: transform .3s cubic-bezier(.2, .8, .25, 1), background-color .3s ease,
                border-color .3s ease, box-shadow .3s ease;
}

.page-subsection--bg-svetla .blok-card,
.page-subsection--bg-svetla .staff-card { background: #fff; }

.page-subsection:where(:not(.page-subsection--bg-tmava)) .blok-card:hover,
.page-subsection:where(:not(.page-subsection--bg-tmava)) .staff-card:hover {
    transform: translateY(-5px);
    background: #fff;
    --card-border: var(--brand-200);
    box-shadow: var(--shadow-md);
}

.blok-card,
.staff-card,
.project-card,
.clients__item,
.process-step {
    --spot-color: rgba(46, 123, 238, .14);
}

.blok-card::before,
.staff-card::before,
.project-card::before,
.clients__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--spot-color), transparent 55%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.blok-card:hover::before,
.staff-card:hover::before,
.project-card:hover::before,
.clients__item:hover::before { opacity: 1; }

/* obsah karet nad světlem */
.staff-card__body,
.staff-card__photo,
.project-card__frame,
.project-card__body,
.clients__item > a,
.clients__item > img,
.clients__item > span { position: relative; z-index: 1; }

/* Ikona služby dostane při najetí svítící prstenec */
.blok-card__icon,
.staff-card__icon {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 0 rgba(46, 123, 238, 0);
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .35s ease;
}

.blok-card:hover .blok-card__icon,
.staff-card:hover .staff-card__icon {
    box-shadow: 0 10px 28px rgba(29, 99, 216, .34), 0 0 0 6px rgba(46, 123, 238, .12);
}

/* Karusely mají overflow-x: auto, což ořezává i svisle — zvednutá karta
   se stínem by byla useknutá. Vnitřní odsazení dá stínu místo a záporný
   okraj ho zase vrátí do původního rozvržení. */
.blok-carousel__track,
.staff-carousel__track {
    padding: 1.25rem 1.25rem 2.75rem;
    margin: -1.25rem -1.25rem -2.75rem;
    /* přichytávání se řídí okrajem scrollportu — bez tohoto by se první
       karta přichytila o šířku odsazení doleva */
    scroll-padding-inline: 1.25rem;
}

/* Karusel referencí je přímým potomkem sekce (drží šířku kontejneru přes
   margin-inline: auto), proto se mu vodorovný okraj nechává vycentrovat */
.reference-carousel__track {
    padding: 1.25rem 1.5rem 2.75rem;
    margin: -1.25rem auto -2.75rem;
    scroll-padding-inline: 1.5rem;
}

/* ---------------------------------------------------------------------
   6. Karty v tmavé sekci (pozadi = tmava) — sklo a vodoznakové číslo
   --------------------------------------------------------------------- */

.page-subsection--bg-tmava .blok-card,
.page-subsection--bg-tmava .staff-card {
    --spot-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .13);
    box-shadow: none;
    color: rgba(255, 255, 255, .78);
    transition: transform .3s cubic-bezier(.2, .8, .25, 1), background-color .3s ease,
                border-color .3s ease;
}

.page-subsection--bg-tmava [class*="card-border-"],
.page-subsection--bg-tmava [class*="card-border-"]:hover { --card-border: rgba(255, 255, 255, .14); }

.page-subsection--bg-tmava .blok-card:hover,
.page-subsection--bg-tmava .staff-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .1);
    --card-border: rgba(255, 255, 255, .32);
    box-shadow: none;
}

.page-subsection--bg-tmava .blok-card__name,
.page-subsection--bg-tmava .staff-card__name,
.page-subsection--bg-tmava .blok-card h3 { color: #fff; }

.page-subsection--bg-tmava .blok-card__perex,
.page-subsection--bg-tmava .staff-card__perex,
.page-subsection--bg-tmava .blok-card__perex p { color: rgba(255, 255, 255, .72); }

.page-subsection--bg-tmava .blok-card__more,
.page-subsection--bg-tmava .staff-card__more { color: #9CD3FF; }

/* Číslo karty se z kolečka změní na velký vodoznak v rohu */
.page-subsection--bg-tmava .blok-card__number,
.page-subsection--bg-tmava .staff-card__number {
    position: absolute;
    top: .35rem;
    right: 1rem;
    z-index: 0;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    font-size: 4.6rem;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, .1);
    transition: color .35s ease, transform .35s ease;
}

.page-subsection--bg-tmava .blok-card:hover .blok-card__number,
.page-subsection--bg-tmava .staff-card:hover .staff-card__number {
    background: none;
    color: rgba(125, 211, 252, .28);
    transform: translateY(-3px) scale(1.04);
}

.page-subsection--bg-tmava .blok-card__body { padding-top: 2.4rem; }

/* Ikony v tmavé sekci */
.page-subsection--bg-tmava .blok-card__icon,
.page-subsection--bg-tmava .staff-card__icon {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Společná paleta a kruhový motiv napříč veřejnými stránkami. */
.site--echo {
    --section-ring: rgba(54, 112, 186, .12);
    --section-glow: rgba(130, 187, 246, .12);
    --echo-dark-bg: radial-gradient(ellipse at 85% 30%, #173b67, transparent 65%),
                    linear-gradient(120deg, #071326, #0b2144 65%, #0b274e);
}
.site--echo .page-header,
.site--echo .page-subsection {
    position: relative;
    isolation: isolate;
}
.site--echo .page-header::before,
.site--echo .page-subsection::before,
.site--echo .section--contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--ring-origin, 100% 25%),
            transparent 0 139px, var(--section-ring) 140px 141px,
            transparent 142px 209px, var(--section-ring) 210px 211px,
            transparent 212px 279px, var(--section-ring) 280px 281px,
            transparent 282px),
        radial-gradient(ellipse at var(--ring-origin, 100% 25%),
            var(--section-glow), transparent 60%);
    background-size: auto;
    mask-image: none;
    -webkit-mask-image: none;
}
.homepage--echo .page-header--homepage {
    --ring-origin: 0% 50%;
    padding-block: clamp(3.5rem, 6vw, 6rem);
}
.homepage--echo .page-header--homepage,
.homepage--echo .page-subsection:has(.clients--showcase) {
    --section-ring: rgba(54, 112, 186, .09);
    background: radial-gradient(ellipse at 10% 20%, #edf4fd, transparent 65%), #fff;
}
.homepage--echo .page-header--homepage::before,
.homepage--echo .page-subsection:has(.clients--showcase)::before {
    inset: 50% auto auto 0;
    width: 564px;
    height: calc(100% - 40px);
    max-height: 564px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle closest-side,
        transparent 49.3%, var(--section-ring) 49.6% 50%,
        transparent 50.3% 74.3%, var(--section-ring) 74.6% 75%,
        transparent 75.3% 99%, var(--section-ring) 99.3% 99.7%, transparent 100%);
}
.homepage--echo .page-subsection:has(.clients--showcase)::before {
    inset: 50% 0 auto auto;
    width: 282px;
    transform: translateY(-50%);
    background-size: 564px 100%;
    background-repeat: no-repeat;
}
.site--echo .page-subsection:nth-of-type(odd) { --ring-origin: 0% 20%; }
.site--echo .page-subsection--bg-svetla {
    background: #f0f5fc;
    --section-ring: rgba(54, 112, 186, .09);
}
.site--echo .page-subsection--bg-tmava,
.site--echo .page-header:not(.page-header--homepage),
.site--echo .section--contact-form {
    --section-ring: rgba(151, 204, 255, .15);
    --section-glow: rgba(88, 158, 235, .16);
    background: var(--echo-dark-bg);
}
.site--echo .page-subsection.page-subsection--bg-tmava { --ring-origin: 95% 35%; }
.site--echo .page-subsection--bg-tmava .blok-carousel__btn {
    color: #b8dcff;
    background: #a6c9ef12;
}
.site--echo .page-subsection--bg-tmava .blok-carousel__btn:hover {
    color: #fff;
    background: #a6c9ef2b;
}
.site--echo .page-subsection__layout--full .intro-orbit {
    margin-inline: auto;
}
.site--echo .page-subsection__title { margin-top: 0; }
.homepage--echo .page-subsection__layout--full {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
}
.homepage--echo .page-subsection__layout--full .page-subsection__content-wrap {
    margin-bottom: 0;
}
.site--echo .page-subsection--bg-tmava .intro-orbit,
.site--echo .page-header:not(.page-header--homepage) .intro-orbit {
    background: radial-gradient(circle, #88baf026, transparent 70%);
}
.site--echo .page-subsection--bg-tmava .intro-orbit__ring,
.site--echo .page-header:not(.page-header--homepage) .intro-orbit__ring { border-color: #a9cef2; }
.site--echo .page-subsection--bg-tmava .intro-orbit__core,
.site--echo .page-header:not(.page-header--homepage) .intro-orbit__core {
    background: linear-gradient(135deg, #e3f1ff, #79afea);
}
.site--echo .blok-card,
.site--echo .staff-card,
.site--echo .project-card {
    border-radius: 20px;
}
.site--echo .page-subsection:not(.page-subsection--bg-tmava) .blok-card,
.site--echo .page-subsection:not(.page-subsection--bg-tmava) .staff-card {
    background: linear-gradient(145deg, #fff, #f1f6fd);
    --card-border: #b3cce64d;
    box-shadow: 0 12px 32px #1c467508;
}
.site--echo .blok-card__icon,
.site--echo .staff-card__icon {
    border-radius: 50%;
    outline: 1px solid #78a9e033;
    outline-offset: 6px;
    background: linear-gradient(140deg, #e5f2ff, #d7e8fc);
    color: #245fa2;
}
.site--echo .blok-card:hover .blok-card__icon,
.site--echo .staff-card:hover .staff-card__icon {
    background: linear-gradient(140deg, #2866ad, #163d70);
    color: #fff;
    box-shadow: 0 0 0 7px #7baae815, 0 0 0 14px #7baae80b;
}
.site--echo .page-subsection--bg-tmava .blok-card,
.site--echo .page-subsection--bg-tmava .staff-card {
    background: linear-gradient(145deg, #aacfff12, #aacfff05);
    --card-border: #a6c9ef33;
}
.site--echo .page-subsection--bg-tmava .blok-card:hover,
.site--echo .page-subsection--bg-tmava .staff-card:hover {
    background: #aacfff16;
    --card-border: #a6c9ef66;
}
.site--echo .page-subsection--bg-tmava .blok-card__number,
.site--echo .page-subsection--bg-tmava .staff-card__number {
    top: .9rem;
    right: .9rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #b7dcff26;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: 0;
    color: #b7dcffb3;
    box-shadow: 0 0 0 6px #b7dcff06;
}
.site--echo .process-step__num {
    outline: 1px solid #7aaee944;
    outline-offset: 7px;
    box-shadow: 0 0 0 14px #7aaee909;
}
.site--echo .process-step.is-reached .process-step__num,
.site--echo .process-step:hover .process-step__num {
    background: linear-gradient(140deg, #356eaf, #153b6b);
    box-shadow: 0 0 0 7px #7aaee915, 0 0 0 14px #7aaee90b, 0 8px 22px #143f7526;
}
.site--echo .project-card__chrome {
    background: #13233e;
    border-color: #ffffff14;
}
.site--echo .project-card__chrome-url {
    color: #c0d3ed;
    background: #ffffff0d;
}
.site--echo .project-card__body { background: linear-gradient(145deg, #fff, #f3f7fd); }
.site--echo .clients-marquee { --marquee-fade: #f0f5fc; }
.site--echo .page-subsection--bg-bila .clients-marquee { --marquee-fade: #fff; }
.site--echo .page-subsection--bg-modra .clients-marquee { --marquee-fade: #e9f1fe; }
.site--echo .page-subsection--bg-tmava .clients-marquee { --marquee-fade: transparent; }
.homepage--echo .page-subsection .clients--showcase .clients-marquee { --marquee-fade: #fff; }
.site--echo .section--contact-form { --ring-origin: 0% 50%; }
.site--echo .section--contact-form::before {
    background:
        radial-gradient(circle at 0% 50%, transparent 0 179px, #9accff24 180px 181px,
            transparent 182px 269px, #9accff20 270px 271px,
            transparent 272px 359px, #9accff18 360px 361px, transparent 362px),
        radial-gradient(circle at 100% 70%, transparent 0 159px, #9accff24 160px 161px,
            transparent 162px 249px, #9accff20 250px 251px,
            transparent 252px 339px, #9accff18 340px 341px, transparent 342px);
}
.site--echo .contact-form-bg__orb { animation: none; opacity: .22; }
.site--echo .contact-form-box {
    border-color: #bed8f2;
    background: linear-gradient(135deg, #fff, #f2f7fe);
    box-shadow: 0 30px 80px #020d2455;
}
.site--echo .contact-form-box__title::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 1.3rem;
    border: 7px solid #a6c9ef;
    border-radius: 50%;
    box-shadow: inset 2px 2px 4px #effaff, 0 0 0 7px #83b2e412, 0 0 0 14px #83b2e409;
}
@media (max-width: 640px) {
    .site--echo .page-header::before,
    .site--echo .page-subsection::before { opacity: .5; }
}

.site--echo .page-header:not(.page-header--homepage) {
    padding-block: clamp(2.5rem, 5vw, 5rem);
    border-bottom: 1px solid #a6c9ef26;
    color: #d1dff0;
}
.site--echo .page-header:not(.page-header--homepage)::before {
    inset: 50% 0 auto auto;
    width: 320px;
    height: calc(100% - 40px);
    max-height: 640px;
    transform: translateY(-50%);
    background: radial-gradient(circle closest-side,
        transparent 49.3%, var(--section-ring) 49.6% 50%,
        transparent 50.3% 74.3%, var(--section-ring) 74.6% 75%,
        transparent 75.3% 99%, var(--section-ring) 99.3% 99.7%, transparent 100%);
    background-size: 640px 100%;
    background-repeat: no-repeat;
}
.site--echo .page-header:not(.page-header--homepage) .page-header__title,
.site--echo .page-header:not(.page-header--homepage) .rich-text h2,
.site--echo .page-header:not(.page-header--homepage) .rich-text h3,
.site--echo .page-header .item-detail__params-title { color: #fff; }
.site--echo .page-header:not(.page-header--homepage) .page-header__eyebrow { color: #a9cef2; }
.site--echo .page-header:not(.page-header--homepage) .rich-text,
.site--echo .page-header .item-detail__perex,
.site--echo .page-header .item-detail__contact-item { color: #d1dff0; }
.site--echo .page-header .breadcrumb { margin-bottom: 1.75rem; }
.site--echo .page-header .breadcrumb a,
.site--echo .page-header .breadcrumb__sep { color: #a9bdd6; }
.site--echo .page-header .breadcrumb__current,
.site--echo .page-header:not(.page-header--homepage) .rich-text a { color: #c7e3ff; }
.site--echo .page-header .breadcrumb a:hover,
.site--echo .page-header:not(.page-header--homepage) .rich-text a:hover,
.site--echo .page-header .item-detail__contact-item:hover { color: #fff; }
.site--echo .page-header .item-detail__params { border-color: #a6c9ef33; }
.site--echo .page-header__media,
.site--echo .item-detail__photo {
    border-radius: 20px;
    box-shadow: 0 24px 64px #020d2440;
}
.site--echo .page-main__content {
    max-width: 960px;
    margin-inline: auto;
    padding-block: clamp(2rem, 4vw, 4rem);
}
.site--echo .page-main__content > :first-child { margin-top: 0; }
.site--echo .page-main__content > :last-child { margin-bottom: 0; }
.site--echo .page-main__content blockquote {
    border-color: #bad3ee;
    background: radial-gradient(ellipse at 0% 0%, #e5effc, transparent 75%), #f6f9fe;
}

/* ---------------------------------------------------------------------
   7. Klienti — nekonečně běžící pás log
   Pás drží šířku kontejneru; počet log vedle sebe bere z nastavení
   sekce v administraci („prvků vedle sebe“), šířku loga dopočítá wow.js.
   --------------------------------------------------------------------- */

.clients-marquee {
    position: relative;
    overflow: hidden;
    padding-block: .5rem;
    --marquee-fade: var(--surface);
}

.page-subsection--bg-svetla .clients-marquee { --marquee-fade: var(--surface-alt); }
.page-subsection--bg-modra  .clients-marquee { --marquee-fade: #E9F1FE; }
.page-subsection--bg-tmava  .clients-marquee { --marquee-fade: transparent; }

/* Rozplynutí okrajů — záměrně přes překryvné přechody, ne mask-image:
   maska nad běžící animací nutí prohlížeč překreslovat celou sekci. */
.clients-marquee::before,
.clients-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(40px, 8vw, 120px);
    pointer-events: none;
}

.clients-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--marquee-fade), transparent);
}

.clients-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--marquee-fade), transparent);
}

.clients-marquee__track {
    display: flex;
    gap: 1.15rem;
    width: max-content;
    will-change: transform;
}

.clients-marquee.is-ready .clients-marquee__track {
    animation: ppMarquee var(--marquee-duration, 40s) linear infinite;
}

.clients-marquee:hover .clients-marquee__track,
.clients-marquee:focus-within .clients-marquee__track,
.clients--showcase:hover .clients-marquee__track,
.clients--showcase:focus-within .clients-marquee__track { animation-play-state: paused; }

@keyframes ppMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--marquee-distance, -50%), 0, 0); }
}

/* Dlaždice i logo se odvíjejí od šířky dlaždice (--marquee-item, plní
   wow.js podle „prvků vedle sebe“): méně log v řádku = širší dlaždice
   = větší logo. Výška dlaždice je ~45 % šířky, logo zabere až 55 % výšky
   a 78 % šířky dlaždice. */
.clients-marquee__track .clients__item {
    flex: 0 0 auto;
    width: var(--marquee-item, 200px);
    min-height: calc(var(--marquee-item, 200px) * .45);
    padding: calc(var(--marquee-item, 200px) * .07) calc(var(--marquee-item, 200px) * .06);
}

/* Loga v klidu černobílá, pod kurzorem barevná */
.clients-marquee__track .clients__item img {
    max-height: calc(var(--marquee-item, 200px) * .3);
    max-width: 92%;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}

.clients-marquee__track .clients__item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

.homepage--echo .clients--showcase {
    max-width: 1480px;
    padding-inline: clamp(1rem, 3vw, 3rem);
}
.clients--showcase .clients-marquee { padding-block: 1.25rem 2rem; }
.clients--showcase .clients-marquee::before,
.clients--showcase .clients-marquee::after { width: clamp(16px, 4vw, 64px); }
.clients--showcase .clients__item:not(.clients__item--attach) {
    flex-direction: column;
    gap: 1.25rem;
    min-height: clamp(150px, 15vw, 210px);
    padding: 1.5rem 1rem;
    border: 1px solid #c6d9ef99;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 20px #153b6b08;
}
.clients--showcase .clients__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    text-decoration: none;
}
.clients--showcase .clients__item img {
    width: 88%;
    height: clamp(56px, 6vw, 88px);
    max-height: none;
    max-width: 100%;
    object-fit: contain;
    filter: none;
    opacity: 1;
}
.clients--showcase .clients__caption {
    color: #526b86;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}
.clients--showcase .clients__item:hover,
.clients--showcase .clients__item:focus-within {
    border-color: #8bb6e6;
    box-shadow: 0 12px 26px #153b6b12;
}
.clients__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: .5rem;
}
.clients__portfolio { color: #234f82; font-weight: 600; font-size: .9rem; }
.clients__portfolio span { margin-left: .5rem; }
.clients__controls:not([hidden]) { display: flex; gap: .6rem; }
.clients__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #a7c3e280;
    border-radius: 999px;
    background: #ffffff80;
    color: #345b88;
    cursor: pointer;
}
.clients__arrow:hover { background: #fff; border-color: #88acd5; }
.clients--showcase :is(a, button):focus-visible {
    outline: 2px solid #3979be;
    outline-offset: 4px;
    border-radius: 8px;
}
.clients--showcase .clients-marquee:not(.is-ready):not(.is-building) .clients-marquee__track {
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.clients--showcase .clients-marquee:not(.is-ready):not(.is-building) .clients__item { width: auto; }
.clients--showcase .clients-marquee:not(.is-ready)::before,
.clients--showcase .clients-marquee:not(.is-ready)::after { display: none; }
@media (prefers-reduced-motion: reduce) {
    .clients--showcase .clients-marquee__track {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    }
    .clients--showcase .clients-marquee__track .clients__item { width: auto; }
    .clients--showcase .clients__controls,
    .clients--showcase .clients__item[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------------
   8. Postup — linka, která se kreslí při scrollu
   --------------------------------------------------------------------- */

.process-list::before { opacity: .3; }

/* „Nakreslená“ část linky; --progress 0–1 plní wow.js */
.process-list:not(.process-list--multirow)::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 0;
    background: var(--grad-brand);
    box-shadow: 0 0 14px rgba(46, 123, 238, .55);
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
    transition: transform .12s linear;
}

.process-step__num {
    position: relative;
    transition: transform .35s cubic-bezier(.2, .8, .25, 1), background .35s ease,
                color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Krok, ke kterému linka už dorazila — a stejně vypadá i pod kurzorem */
.process-step.is-reached .process-step__num,
.process-step:hover .process-step__num {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 26px rgba(29, 99, 216, .38);
}

/* Rozbíhající se kruh — při dosažení linkou i při najetí myší */
.process-step.is-reached .process-step__num::after,
.process-step:hover .process-step__num::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--brand-400);
    animation: ppRing .9s ease-out both;
}

/* při najetí se kruh rozběhne znovu i u kroku, který už linka dosáhla */
.process-step.is-reached:hover .process-step__num::after {
    animation: ppRingHover .9s ease-out both;
}

@keyframes ppRing {
    from { opacity: .9; transform: scale(1); }
    to   { opacity: 0;  transform: scale(1.9); }
}

@keyframes ppRingHover {
    from { opacity: .9; transform: scale(1); }
    to   { opacity: 0;  transform: scale(1.9); }
}

.process-step__title { transition: color .3s ease; }
.process-step.is-reached .process-step__title,
.process-step:hover .process-step__title { color: var(--brand-700); }

/* ---------------------------------------------------------------------
   9. Reference — náhled webu při najetí projede odshora dolů
   --------------------------------------------------------------------- */

.project-card__shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: none;
    transition: top .9s cubic-bezier(.2, .8, .25, 1), transform .9s cubic-bezier(.2, .8, .25, 1);
}

.project-card:hover .project-card__shot img {
    top: 100%;
    transform: translateY(-100%);
    transition: top 7s linear, transform 7s linear;
}

/* Lišta prohlížeče se při najetí „zapne“ */
.project-card__chrome > span:not(.project-card__chrome-url) {
    transition: transform .3s ease;
}

.project-card:hover .project-card__chrome > span:not(.project-card__chrome-url) { transform: scale(1.25); }

.project-card__year { transition: background .3s ease, color .3s ease; }
.project-card:hover .project-card__year { background: var(--brand-50); color: var(--brand-700); }

/* ---------------------------------------------------------------------
   10. Poptávkový formulář — tmavý závěr stránky
   --------------------------------------------------------------------- */

.section--contact-form {
    position: relative;
    overflow: hidden;
    background: var(--grad-deep);
    isolation: isolate;
}

.section--contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 20%, transparent 85%);
}

.contact-form-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.contact-form-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}

.contact-form-bg__orb--1 {
    width: 42vw; height: 42vw;
    top: -28%; right: -10%;
    background: radial-gradient(circle at 30% 30%, #38BDF8, transparent 68%);
    animation: ppOrb1 22s ease-in-out infinite;
}

.contact-form-bg__orb--2 {
    width: 36vw; height: 36vw;
    bottom: -34%; left: -8%;
    background: radial-gradient(circle at 60% 40%, #2E7BEE, transparent 68%);
    animation: ppOrb2 26s ease-in-out infinite;
}

.contact-form-box {
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 34px 90px rgba(3, 10, 30, .5);
}

/* ---------------------------------------------------------------------
   11. Responzivita a omezený pohyb
   --------------------------------------------------------------------- */

/* Pod 1080 px je hero pod sebou (viz profipage.css) — nápověda scrollu by
   překrývala okno, naklánění nemá smysl a linka postupu je vypnutá. */
@media (max-width: 1080px) {
    .hero__scroll-hint { display: none; }
    .hero__visual { transform: none; }
    .process-list::after { display: none; }
}

@media (max-width: 900px) {
    .intro-media { max-width: 520px; }
}

@media (max-width: 480px) {
    .clients-marquee__track .clients__item { min-height: 76px; }
}

@media (max-height: 640px) {
    .hero__scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] { filter: none; }
    .hero__visual,
    .hero__layout { transform: none; opacity: 1; }
    .hero__scroll-hint-line::after { animation: none; top: 0; }
    .clients-marquee__track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
    .clients-marquee::before,
    .clients-marquee::after { display: none; }
    .process-list::after { transform: scaleX(1); }
    .project-card:hover .project-card__shot img { top: 0; transform: none; }
    .btn--primary::after { display: none; }
    .intro-media img { transform: none; }
}