/* Modern Layout System V2 - Bento & Grid */

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Bento Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--space-6);
}

.bento-item-large { grid-column: span 2; grid-row: span 2; }
.bento-item-wide { grid-column: span 2; }
.bento-item-tall { grid-row: span 2; }

@media (max-width: 1024px) {
    .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-item-large { grid-column: span 2; }
}

@media (max-width: 640px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-item-large, .bento-item-wide, .bento-item-tall { grid-column: span 1; grid-row: span 1; }
}

/* Header & Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--space-6) 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header .container {
    max-width: 1320px;
    padding: 0 var(--space-6);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.sticky {
    padding: var(--space-4) 0;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 28px;
    cursor: pointer;
    z-index: 1100;
    padding: 0;
    transition: transform 0.3s ease;
    margin-right: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.mobile-toggle:active {
    transform: scale(0.9);
}

@media (max-width: 991px) {
    .mobile-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 120px;
        gap: var(--space-8);
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1050;
    }

    .header.nav-active .nav-menu {
        right: 0;
    }

    .nav-link {
        font-size: var(--text-2xl);
        font-weight: 600;
    }

    .header-actions {
        display: flex;
        align-items: center;
    }
    
    .header-actions .pxl-btn {
        display: none; /* Hide button on mobile header to make space */
    }
}

.header.sticky .container {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Hero: výzva na posun nižšie – myška s rolujúcim kolieskom + poskakujúca šípka */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 4vh, 2.5rem);
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.hero-scroll:hover,
.hero-scroll:focus-visible {
    color: var(--color-primary);
}

.hero-scroll:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 12px;
}

.hero-scroll-mouse {
    width: 30px;
    height: 30px;
}

.hero-scroll-arrow {
    width: 18px;
    height: 18px;
    animation: pxl-scroll-arrow 1.8s ease-in-out infinite;
}

.hero-scroll-wheel {
    animation: pxl-scroll-wheel 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes pxl-scroll-wheel {
    0% { transform: translateY(0); opacity: 1; }
    60% { transform: translateY(4px); opacity: 0; }
    61% { transform: translateY(0); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes pxl-scroll-arrow {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* nízke okno – ikonka by zavadzala tlačidlám */
@media (max-height: 620px) {
    .hero-scroll { display: none; }
    .hero { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-arrow,
    .hero-scroll-wheel { animation: none; }
}

/* Hlavička: pevná mriežka logo | menu | tlačidlo.
   Poloha menu nezávisí od toho, či sa tlačidlo už načítalo (stránka sa vykresľuje postupne),
   a výška riadka je pevná – menu pri prechode medzi stránkami neposkočí. */
.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58.3px; /* výška tlačidla Konzultácia (namerané 58,31 px) */
}

.nav > .logo { grid-column: 1; justify-self: start; }

/* logo v hlavičke – o 10 % menšie (pôvodne 160 px) */
.header .logo img {
    width: 144px;
    height: auto;
}
.nav > .nav-menu { grid-column: 2; }
.nav > .header-actions { grid-column: 3; justify-self: end; }

@media (max-width: 991px) {
    .nav { min-height: 0; }
}

.nav-menu {
    display: flex;
    gap: var(--space-10);
}

.nav-link {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.nav-link.active, .nav-link:hover {
    color: var(--color-primary-text);
}

/* Sections */
.section {
    padding: var(--space-24) 0;
}

.section-title {
    margin-bottom: var(--space-16);
}

.section-title h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

/* Page Hero Standard V2.3 */
.pxl-page-header {
    padding: 11rem 0 6rem 0;
    background-color: var(--color-bg-soft);
    position: relative;
    overflow: hidden;
}

.pxl-page-header h1 {
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 0.9;
    margin-bottom: var(--space-6);
    letter-spacing: -0.04em;
}

.pxl-page-header p {
    max-width: 600px;
    font-size: 1.25rem;
    color: var(--color-text-muted);
}

/* Hero Section V2 - Minimal & Bold */
.hero {
    min-height: 100vh;
    min-height: 100svh; /* mobil: výška bez lišty prehliadača */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px; 
    padding-bottom: 110px; /* miesto pre ikonku „posunúť nižšie“ */
    overflow: hidden;
    position: relative;
    background-color: #000; /* Cinematic dark base */
}

.hero-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-overlay-bg, radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)));
    z-index: 2;
}

.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.pxl-page-header {
    position: relative;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-32) 0 var(--space-20);
    overflow: hidden;
    background: var(--color-bg-soft);
    text-align: center;
}

@media (max-width: 991px) {
    .hero-canvas {
        display: none !important;
    }

    .hero, .pxl-page-header {
        background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%) !important;
    }
}

@media (max-width: 768px) {
    .pxl-page-header {
        min-height: 350px;
        padding: var(--space-24) 0 var(--space-12);
    }
}

.pxl-page-header h1 {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    margin-bottom: var(--space-4);
}

.pxl-page-header p {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    font-size: var(--text-lg);
}

.hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-content h1 {
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    margin-bottom: var(--space-8);
    letter-spacing: -0.04em;
    line-height: 0.9;
}

.hero-img-container {
    position: relative;
}

.hero-img-container img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-md);
    font-weight: 800;
    transform: rotate(3deg);
    box-shadow: var(--glow-primary);
}

@media (max-width: 1024px) {
    .hero-grid {
        text-align: center;
    }
    .hero-content h1 { margin-bottom: var(--space-6); }
    .hero-text { margin: 0 auto var(--space-8) auto; }
}

/* Adaptive UI Modes (Light/Dark) */
.logo-light { display: none; }
.logo-dark { display: block; }

/* Dark UI (for dark backgrounds) */
.ui-dark .logo-light { display: block; }
.ui-dark .logo-dark { display: none; }

.header.ui-dark .nav-link { 
    color: rgba(255, 255, 255, 0.85); 
}

.header.ui-dark .nav-link:hover, 
.header.ui-dark .nav-link.active { 
    color: white; 
}

.header.ui-dark .mobile-toggle { 
    color: white; 
}

.header.ui-dark.sticky {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.header.ui-dark.sticky .nav-link { 
    color: var(--color-text); 
}

.header.ui-dark.sticky .nav-link:hover { 
    color: var(--color-primary-text); 
}

.header.ui-dark.sticky .mobile-toggle { 
    color: var(--color-text); 
}

.header.ui-dark.sticky .logo-light { display: none; }
.header.ui-dark.sticky .logo-dark { display: block; }

.hero.ui-dark h1 { 
    color: white; 
}

.hero.ui-dark .hero-text { 
    color: rgba(255, 255, 255, 0.7); 
}

.hero.ui-dark .pxl-btn-outline {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.hero.ui-dark .pxl-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Footer Modernization V2.2 */
.footer {
    padding: var(--space-20) 0 var(--space-10);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.footer-logo {
    display: block;
    margin-bottom: var(--space-6);
}

.footer-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-8);
    color: var(--color-text);
}

.footer-nav {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-nav li {
    margin-bottom: 0;
}

.footer-nav a {
    color: var(--color-text-muted);
    transition: color 0.3s ease;
    padding: 0;
    display: inline-block;
}

.footer-nav a:hover {
    color: var(--color-primary-text);
}

.footer-social {
    display: flex;
    gap: var(--space-4);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    color: var(--color-text);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link i {
    font-size: 20px;
    line-height: 1;
}

.social-link:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-5px);
}

.footer-bottom {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.6;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-top: var(--space-4);
}

/* Icons & Utilities */
.pxl-check-icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary-text);
    margin-right: var(--space-2);
    flex-shrink: 0;
}

.filter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-16);
    margin-bottom: var(--space-10);
}

.pxl-filter-tag {
    padding: 0.65rem 1.4rem;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
        box-shadow 0.25s ease, transform 0.25s ease;
}

.pxl-filter-tag:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.pxl-filter-tag:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Text na aktívnom tlačidle berie farbu z témy (v mint téme čierna) */
.pxl-filter-tag.active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    box-shadow: var(--glow-primary);
}

.pricing-title-icon {
    width: 32px;
    height: 32px;
    color: var(--color-primary-text);
    margin-right: 0;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* --- Portfólio: galéria kariet (referencie.html) --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    margin: var(--space-12) 0;
}

.portfolio-grid .portfolio-item-v2 {
    --pxl-card-pad: 1.35rem; /* spoločné odsadenie: popis aj ikona zväčšenia */
    --pxl-card-icon: 42px;
    position: relative;
    aspect-ratio: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--pxl-lift-time) var(--pxl-lift-ease), box-shadow var(--pxl-lift-time) var(--pxl-lift-ease),
        border-color 0.3s ease;
    animation: pxl-card-in 0.5s cubic-bezier(0.2, 1, 0.3, 1) backwards;
}

.portfolio-grid .portfolio-item-v2 > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.portfolio-grid .portfolio-item-v2 > a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 24px;
}

.portfolio-grid .portfolio-item-v2 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top; /* dlhé snímky webov ukážu hlavičku */
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Náhľady sú bez fialového rámika; výplň okolo obrázka má farbu jeho okraja */
.portfolio-grid .portfolio-item-v2 img {
    background-color: var(--pxl-img-bg, var(--color-bg-soft));
}

/* Široké logo na jednofarebnej ploche – celé, dofarbené farbou okraja */
.portfolio-grid .portfolio-item-v2 img.is-contain {
    object-fit: contain;
    object-position: center;
}

.portfolio-grid .portfolio-info {
    text-align: left;
}

/* Homepage – vybraná tvorba: prvá karta veľká (2 × 2) */
.portfolio-grid--featured {
    margin-top: 0;
}

.portfolio-grid--featured .portfolio-item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.portfolio-grid--featured .portfolio-item--large img {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
}

/* popis veľkej karty drží svoju výšku, zvyšok vyplní obrázok */
.portfolio-grid--featured .portfolio-item--large .portfolio-info {
    flex: none;
}

@media (max-width: 1024px) {
    .portfolio-grid--featured .portfolio-item--large {
        grid-row: span 1;
    }

    /* posledná karta by v 2 stĺpcoch ostala sama – roztiahne sa na celý riadok */
    .portfolio-grid--featured .portfolio-item-v2:last-child:nth-child(even) {
        grid-column: span 2;
    }

    .portfolio-grid--featured .portfolio-item-v2:last-child:nth-child(even) img {
        aspect-ratio: 16 / 10;
    }

    .portfolio-grid--featured .portfolio-item--large img {
        flex: none;
        height: auto;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .portfolio-grid--featured .portfolio-item--large,
    .portfolio-grid--featured .portfolio-item-v2:last-child:nth-child(even) {
        grid-column: span 1;
    }

    .portfolio-grid--featured .portfolio-item-v2:last-child:nth-child(even) img {
        aspect-ratio: 4 / 3;
    }

    .portfolio-grid--featured .portfolio-item--large img {
        aspect-ratio: 4 / 3;
    }
}

.portfolio-grid .portfolio-item-v2:hover img {
    transform: scale(1.04);
}

/* Popis pod obrázkom – názov, typ práce a šípka */
.portfolio-grid .portfolio-info {
    position: relative;
    z-index: 1;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    flex: 1;
    padding: 1.1rem var(--pxl-card-pad) 1.25rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    opacity: 1;
    transform: none;
}

.portfolio-grid .portfolio-info :is(h2, h3, h4) {
    grid-column: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.portfolio-grid .portfolio-info p {
    grid-column: 1;
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    opacity: 1;
}

.portfolio-grid .portfolio-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: var(--pxl-card-icon);
    height: var(--pxl-card-icon);
    border-radius: 50%;
    border: 1px solid var(--color-border);
    font-size: 1.1rem;
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.portfolio-grid .portfolio-item-v2:hover .portfolio-arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    transform: rotate(45deg);
}

.portfolio-grid .portfolio-arrow svg {
    width: 18px;
    height: 18px;
}

/* Ikona zväčšenia z knižnice Tobii – okrúhle sklenené tlačidlo */
.portfolio-grid .tobii-zoom__icon {
    z-index: 2;
    top: var(--pxl-card-pad);
    right: var(--pxl-card-pad);
    width: var(--pxl-card-icon);
    height: var(--pxl-card-icon);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-grid .tobii-zoom__icon svg {
    width: 20px;
    height: 20px;
}

.portfolio-grid .portfolio-item-v2:hover .tobii-zoom__icon,
.portfolio-grid .portfolio-item-v2 > a:focus-visible .tobii-zoom__icon {
    opacity: 1;
    transform: scale(1);
}

/* od 0.01, nie od 0: karta sa hneď počíta ako vykreslená (LCP), vizuálne bez rozdielu */
@keyframes pxl-card-in {
    from {
        opacity: 0.01;
        transform: translateY(14px) scale(0.98);
    }
}

@media (hover: none) {
    .portfolio-grid .tobii-zoom__icon {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .portfolio-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .portfolio-grid .portfolio-item-v2 {
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-grid .portfolio-item-v2,
    .portfolio-grid .portfolio-item-v2 img,
    .portfolio-grid .portfolio-arrow {
        animation: none;
        transition: none;
    }

    .portfolio-grid .portfolio-item-v2:hover,
    .portfolio-grid .portfolio-item-v2:hover img {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}
/* Service & CTA Utilities V2.3 */
.pxl-service-card {
    margin-bottom: var(--space-16);
}

.pxl-featured-item {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-6) !important;
}

.pxl-cta-card {
    background: white;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16);
    border-radius: var(--radius-lg);
    gap: var(--space-8);
}

.pxl-cta-content h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
    .pxl-cta-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-10);
    }
}

/* Page specific utilities */
.pxl-services-header { margin-bottom: 1.5rem; font-size: 1.75rem; }
.pxl-services-desc { margin-bottom: 1.5rem; }
.pxl-services-icon { width: 48px; height: 48px; margin-bottom: 1.5rem; }

.pxl-contact-grid {
    gap: 3rem;
    margin-bottom: 6rem;
}

.pxl-contact-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-8);
}

.pxl-contact-tag {
    font-size: 0.85rem;
    color: var(--color-primary-text);
    font-weight: 800;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pxl-contact-title { margin-bottom: 1rem; font-size: 1.17em; } /* veľkosť pôvodného H3 */
.pxl-contact-link { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; color: var(--color-primary-text); }
.pxl-contact-link-dark { color: var(--color-text); }
.pxl-contact-text { font-size: 1.25rem; font-weight: 500; line-height: 1.4; }

.pxl-billing-section {
    padding: var(--space-20);
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
}

.pxl-billing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.pxl-billing-quote {
    padding: var(--space-10);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.pxl-billing-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2rem; }

.pxl-billing-address {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Fakturačné údaje: názov, potom dvojice popis – hodnota pod sebou */
.pxl-billing-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
}

.pxl-billing-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.pxl-billing-lines {
    color: var(--color-text);
    line-height: 1.7;
}

.pxl-billing-lines + .pxl-billing-lines {
    margin-top: var(--space-4);
}

.pxl-billing-address .pxl-billing-note {
    margin-top: var(--space-6);
    padding: var(--space-8) 0; /* rovnaká medzera nad aj pod textom */
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    opacity: 1;
}

.pxl-billing-quote-text {
    margin-bottom: 2rem;
}

.pxl-billing-quote-author {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.pxl-billing-quote-author-meta {
    font-size: 0.8rem;
}

.pxl-pricing-note {
    font-size: 0.9rem;
    max-width: 600px;
    margin: 2rem auto 0;
}

.pxl-pricing-featured {
    border-left: 4px solid var(--color-primary) !important;
}

@media (max-width: 768px) {
    .pxl-billing-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.pxl-section-footer { margin-top: 5rem; }

/* Referencie: „… a mnoho ďalších projektov“ – rovnaká medzera nad aj pod textom.
   Nad textom je spodný okraj mriežky (--space-12), preto dole rovnaký padding. */
.pxl-more-projects { margin-top: 0; margin-bottom: 0; padding-bottom: var(--space-12); }
.pxl-more-projects p { margin: 0; }
.pxl-cta-text { margin-top: 2rem; margin-bottom: 3rem; font-size: 1.25rem; }
.pxl-cta-btn { padding: 1.5rem 3rem; font-size: 1.1rem; }

.pxl-glass-info {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* FAQ Styles */
.pxl-faq-list {
    max-width: 800px;
    margin: 4rem auto 0;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 1.5rem 0;
}

.faq-question h3 {
    font-size: 1.125rem;
    margin: 0;
    font-weight: 600;
}

.faq-icon {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
    color: var(--color-primary-text);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer p {
    padding-bottom: 1.5rem;
    margin: 0;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.container-narrow {
    max-width: 900px !important;
}

.pricing-note-container {
    margin-bottom: var(--space-8);
}

.pricing-note-text {
    font-size: 0.85rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}



/* Stránka Ochrana osobných údajov */
.pxl-legal h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    margin: var(--space-12) 0 var(--space-4);
}

.pxl-legal h2:first-child {
    margin-top: 0;
}

.pxl-legal p,
.pxl-legal li {
    color: var(--color-text-muted);
    line-height: 1.75;
}

.pxl-legal p + p {
    margin-top: var(--space-3);
}

.pxl-legal ul {
    margin: var(--space-3) 0 var(--space-3) 1.25rem;
}

.pxl-legal li + li {
    margin-top: var(--space-2);
}

.pxl-legal strong {
    color: var(--color-text);
}

.pxl-legal a {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pxl-legal-meta {
    margin-top: var(--space-16) !important;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.footer-legal-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-legal-link:hover {
    color: var(--color-primary-text);
}

/* Kontakt: otváracie hodiny pod telefónom */
.pxl-contact-hours {
    margin-top: var(--space-3);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pxl-nowrap { white-space: nowrap; }

/* sekcia pod fakturačnými údajmi začína hneď pod poznámkou (medzeru dáva padding poznámky) */
.pxl-billing-address + .pxl-info-section {
    margin-top: 0;
}

/* =====================================================================
   Stránky služieb (tvorba-web-stranok, tvorba-loga, graficke-prace,
   ux-ui-dizajn, cennik) a rozcestník sluzby.html
   ===================================================================== */

/* drobčeková navigácia v úvode stránky */
.pxl-breadcrumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    list-style: none;
}

.pxl-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--space-2);
    opacity: 0.5;
}

.pxl-breadcrumb a:hover {
    color: var(--color-primary-text);
}

.pxl-breadcrumb [aria-current] {
    color: var(--color-text);
    font-weight: 600;
}

/* úvod: obsah nad animovaným pozadím, tlačidlá a istoty */
.pxl-page-header .container {
    position: relative;
    z-index: 2;
}

.pxl-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

.pxl-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-8);
    margin-top: var(--space-8);
    list-style: none;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.pxl-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pxl-trust .icon {
    color: var(--color-primary-text);
    font-size: 1.1rem;
}

/* nadpis sekcie v strede */
.section-title.text-center p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.section-title h2.pxl-h2-sm {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
}

/* karty "čo dostanete" / výhody */
.pxl-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.pxl-feature-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pxl-feature {
    position: relative;
    padding: var(--space-8);
    background: var(--color-bg);
}

.pxl-feature .bento-icon {
    width: 44px;
    height: 44px;
    font-size: 44px;
    margin-bottom: var(--space-6);
    justify-content: flex-start;
}

.pxl-feature h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-3);
    letter-spacing: -0.02em;
}

.pxl-feature p {
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* postup spolupráce */
.pxl-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
    counter-reset: pxl-step;
}

.pxl-step {
    counter-increment: pxl-step;
    padding: var(--space-8);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pxl-step::before {
    content: counter(pxl-step, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-6);
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}

.pxl-step h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-2);
}

.pxl-step p {
    color: var(--color-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

.pxl-step-time {
    display: block;
    margin-top: var(--space-4);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

/* balíky na stránke služby */
.pxl-packages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-6);
    align-items: start;
}

.pxl-packages .pricing-item-v2 {
    margin-bottom: var(--space-6);
}

.pxl-packages-note {
    margin-top: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.pxl-packages-note a,
.pxl-text-link {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.pxl-packages-note a:hover,
.pxl-text-link:hover {
    color: var(--color-primary-text);
}

/* zoznam s fajkami */
.pxl-checklist {
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.pxl-checklist li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.pxl-checklist .icon {
    color: var(--color-primary-text);
    font-size: 1.2rem;
    margin-top: 0.15em;
}

.pxl-checklist strong {
    color: var(--color-text);
}

/* nadpis cez celú šírku, pod ním text vľavo a zoznam vpravo – oba začínajú na rovnakej výške */
.pxl-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-16);
    row-gap: var(--space-8);
    align-items: start;
}

.pxl-split-title {
    grid-column: 1 / -1;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    max-width: 18ch;
}

/* zoznam rovnakým písmom a riadkovaním ako text vľavo, aby prvé riadky sedeli */
.pxl-split-list .pxl-checklist li {
    font-size: 1.1rem;
    line-height: 1.7;
}

.pxl-split-list .pxl-checklist .icon {
    margin-top: 0.3em;
}

.pxl-split-lead {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.pxl-split-lead + .pxl-split-lead {
    margin-top: var(--space-4);
}

/* rozcestník služieb (sluzby.html) */
.pxl-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.pxl-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-10);
    background: var(--color-bg);
}

.pxl-hub-card .bento-icon {
    justify-content: flex-start;
}

.pxl-hub-card h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: var(--space-3);
}

.pxl-hub-card p {
    color: var(--color-text-muted);
    line-height: 1.65;
}

.pxl-hub-card .pxl-checklist {
    margin-top: var(--space-6);
}

.pxl-hub-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-8);
}

.pxl-hub-price {
    font-weight: 700;
    color: var(--color-text);
}

.pxl-hub-price span {
    color: var(--color-primary-text);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
}

.pxl-hub-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.pxl-hub-card:hover .pxl-hub-arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    transform: rotate(45deg);
}

/* celá karta je klikateľná; odkaz zostáva v nadpise (správny text pre čítačky) */
.pxl-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.pxl-card-link:focus-visible {
    outline: none;
}

.pxl-card-link:focus-visible::after {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bento-card:has(.pxl-card-link) {
    position: relative;
    cursor: pointer;
}

/* ukážky prác na stránke služby */
.pxl-work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pxl-section-more {
    margin-top: var(--space-10);
    text-align: center;
}

@media (max-width: 1024px) {
    .pxl-feature-grid,
    .pxl-steps,
    .pxl-hub-grid,
    .pxl-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pxl-split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-8);
    }
}

@media (max-width: 640px) {
    .pxl-feature-grid,
    .pxl-feature-grid.cols-2,
    .pxl-steps,
    .pxl-hub-grid,
    .pxl-packages,
    .pxl-work-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pxl-hub-card {
        padding: var(--space-8);
    }
}

/* menu so 7 položkami: na užších počítačoch menšie medzery */
@media (min-width: 992px) and (max-width: 1240px) {
    .nav-menu {
        gap: var(--space-6);
    }

    .nav-link {
        font-size: 0.9rem;
    }
}

/* Lišta so súhlasom s cookies (js/consent.js) – pevne dole, neposúva obsah */
.pxl-consent {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(660px, calc(100% - 2rem));
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0.9rem 1.1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35);
    animation: pxl-consent-in 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

/* menšia lišta: drobný text a kompaktné tlačidlá */
.pxl-consent-text {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.pxl-consent-text a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pxl-consent-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.pxl-consent-btn {
    padding: 0.55rem 1.1rem;
    min-width: 6rem;
    font-size: 0.82rem;
    border-radius: 10px;
}

.pxl-consent .pxl-btn-outline {
    border-color: var(--color-text);
    color: var(--color-text);
    background: transparent;
}

@keyframes pxl-consent-in {
    from { opacity: 0; transform: translate(-50%, 16px); }
}

@media (max-width: 640px) {
    .pxl-consent {
        flex-direction: column;
        align-items: stretch;
        bottom: 0.75rem;
        gap: var(--space-3);
        padding: 0.85rem 1rem;
    }

    .pxl-consent-actions {
        justify-content: stretch;
    }

    .pxl-consent-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxl-consent { animation: none; }
}

.footer-legal .footer-legal-link + .footer-legal-link {
    margin-left: 0;
}

/* Cenník: väčší odstup medzi skupinami, odkaz „Viac o…“ bližšie k svojim kartám */
.grid-cols-2 .pricing-group {
    margin-bottom: 9rem;
}

.grid-cols-2 > div > .pricing-group:last-child {
    margin-bottom: 0;
}

.pricing-group > .pxl-packages-note {
    margin-top: 0;
}

/* Cenník: poznámka o cenách pod celým cenníkom – oddelená od posledného odkazu „Viac o…“ */
.grid-cols-2 + .pxl-packages-note {
    /* rovnaká medzera ako pri ostatných poznámkach pod cenami (40 px, na mobile 32 px) */
    margin-top: var(--space-10);
}

@media (max-width: 640px) {
    .grid-cols-2 + .pxl-packages-note {
        margin-top: var(--space-8);
    }
}

/* Cenník: pod poznámkou o cenách polovičný spodný okraj sekcie */
.section:has(.grid-cols-2 + .pxl-packages-note) {
    padding-bottom: calc(var(--space-24) / 2);
}

/* =====================================================================
   MOBIL (do 640 px) – kompaktné karty, tlačidlá, dotykové plochy.
   Desktop sa nemení.
   ===================================================================== */
@media (max-width: 640px) {
    /* tlačidlá v úvode: v jednom riadku, ak sa zmestia; inak pod sebou na celú šírku */
    .hero-actions,
    .pxl-page-header-actions {
        flex-wrap: wrap;
        gap: var(--space-3);
        width: 100%;
    }

    .hero-actions .pxl-btn,
    .pxl-page-header-actions .pxl-btn {
        flex: 1 1 auto;
        white-space: nowrap;
        padding: 0.95rem 1.25rem;
    }

    /* dlaždice služieb na úvode: ikona vľavo, text vpravo */
    .bento-grid {
        gap: var(--space-3);
        grid-auto-rows: auto;
    }

    .bento-grid .bento-card {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: start;
        padding: var(--space-5, 1.25rem);
    }

    .bento-grid .bento-card > *,
    .bento-grid .bento-card-top > * {
        grid-column: 2;
    }

    .bento-grid .bento-card-top {
        display: contents;
    }

    .bento-grid .bento-icon,
    .bento-grid .pxl-services-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 36px;
        height: 36px;
        font-size: 36px;
        margin: 0;
    }

    .bento-grid h3 {
        font-size: 1.15rem;
        margin-bottom: var(--space-1);
    }

    .bento-grid .bento-visual-img {
        display: none;
    }

    .bento-grid .pxl-glass-info {
        margin-top: var(--space-3);
        font-size: 0.85rem;
    }

    /* karty výhod na stránkach služieb: ikona vľavo */
    .pxl-feature-grid {
        gap: var(--space-3);
    }

    .pxl-feature {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: var(--space-4);
        padding: var(--space-5, 1.25rem);
    }

    .pxl-feature .bento-icon {
        grid-row: 1 / span 2;
        width: 32px;
        height: 32px;
        font-size: 32px;
        margin: 0;
    }

    .pxl-feature h3 {
        font-size: 1.1rem;
        margin-bottom: var(--space-1);
    }

    .pxl-feature p {
        font-size: 0.95rem;
    }

    /* kroky postupu: číslo vľavo */
    .pxl-steps {
        gap: var(--space-3);
    }

    .pxl-step {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: var(--space-4);
        padding: var(--space-5, 1.25rem);
    }

    .pxl-step::before {
        grid-row: 1 / span 3;
        width: 40px;
        height: 40px;
        margin: 0;
        font-size: 0.9rem;
    }

    .pxl-step-time {
        margin-top: var(--space-2);
    }

    /* karty rozcestníka */
    .pxl-hub-grid {
        gap: var(--space-3);
    }

    /* väčšie dotykové plochy: pätička, kontakty */
    .footer-nav {
        gap: 0;
    }

    .footer-nav a {
        display: inline-block;
        padding: 0.6rem 0;
    }

    .footer-links > a.text-primary,
    .footer-legal-link {
        display: inline-block;
        padding: 0.6rem 0;
    }

    .pxl-contact-link {
        display: inline-block;
        padding: 0.5rem 0;
    }
}


/* =====================================================================
   Spodná lišta (mobil) – grafika a správanie prevzaté 1:1 z detailu dealu
   (xxx/deal-v008-014.html: .sbar, .sbar-grab, .sb-bump, .bnav, .bn).
   Lišta: text vľavo, tlačidlo vpravo, úchyt hore. Ťahom hore / ťuknutím
   na úchyt sa pod ňou vysunie menu a lišta sa posunie nahor o jeho výšku.
   Vypuklinka so šípkou na hornom okraji: js/sbar.js (pružinová fyzika).
   ===================================================================== */
.pxl-sbar,
.pxl-bnav {
    display: none;
}

@media (max-width: 767px) {
    .pxl-sbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 20px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #E4E7EC;
        border-radius: 20px 20px 0 0;
        filter: drop-shadow(0 -6px 8px rgba(16, 24, 40, 0.10)) drop-shadow(0 -1px 2px rgba(16, 24, 40, 0.06));
        touch-action: none;
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.22s cubic-bezier(0.5, 0, 1, 0.6), border-radius 0.22s, visibility 0s linear 0.22s;
    }

    .pxl-sbar.show {
        transform: none;
        visibility: visible;
        transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.25s, visibility 0s;
    }

    /* pri vysunutom menu sa lišta posunie nahor o výšku menu rovnakým pohybom ako menu */
    body.pxl-bn-open .pxl-sbar.show {
        transform: translateY(calc(var(--pxl-bnh, 70px) * -1 + env(safe-area-inset-bottom, 0px)));
    }

    /* text vľavo (v deale cena) */
    .pxl-sbar-info {
        min-width: 0;
        line-height: 1.25;
        padding-top: 3px;
    }

    .pxl-sbar-info strong {
        display: block;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
        color: var(--color-text);
        font-variant-numeric: tabular-nums;
    }

    .pxl-sbar-info .from {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        color: var(--color-text-muted);
    }

    .pxl-sbar-info .row {
        display: block;
        font-size: 12px;
        color: var(--color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* tlačidlo vpravo: rovnaká šírka vo všetkých stavoch, aby sa lišta neposúvala */
    .pxl-sbar .pxl-btn {
        flex: none;
        width: 170px;
        min-height: 48px;
        padding: 0 12px;
        gap: 8px;
        font-size: 15px;
        border-radius: 14px;
        white-space: nowrap;
        justify-content: center;
    }

    .pxl-sbar .pxl-btn:hover {
        transform: none;
    }

    .pxl-sbar .pxl-btn .icon {
        font-size: 18px;
    }

    /* úchyt: sivá čiarka; pri vypuklinke ju nahradí šípka v SVG */
    .pxl-sbar-grab {
        all: unset;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 64px;
        height: 20px;
        cursor: pointer;
        display: block;
    }

    .pxl-sbar-grab::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 2px;
        background: #CBD0D8;
    }

    .pxl-sbar-grab.bumped::before {
        opacity: 0;
    }

    .pxl-sbar-grab:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: -3px;
        border-radius: 10px;
    }

    /* vypuklinka: horný okraj lišty sa pružne natiahne do oblúka nad úchytom */
    .pxl-sbar .sb-bump {
        display: block;
        position: absolute;
        left: 50%;
        top: -29px;
        width: 120px;
        height: 30px;
        margin-left: -60px;
        overflow: visible;
        pointer-events: none;
    }

    .pxl-sbar .sb-bump .bf {
        fill: #fff;
    }

    .pxl-sbar .sb-bump .bs {
        fill: none;
        stroke: #E4E7EC;
        stroke-width: 1;
        stroke-linecap: round;
    }

    .pxl-sbar .sb-bump .bh {
        fill: none;
        stroke: #CBD0D8;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* vysúvacie menu pod lištou */
    .pxl-bnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 41;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #E4E7EC;
        touch-action: none;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.22s cubic-bezier(0.5, 0, 1, 0.6), visibility 0s linear 0.22s;
    }

    .pxl-bnav.show {
        transform: none;
        visibility: visible;
        transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
    }

    .pxl-bn {
        all: unset;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 52px;
        border-radius: 14px;
        color: var(--color-text-muted);
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .pxl-bn .icon {
        font-size: 22px;
    }

    .pxl-bn .icon svg {
        stroke-width: 1.9;
    }

    .pxl-bn:active {
        background: var(--color-bg-soft);
    }

    .pxl-bn:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: -3px;
    }

    .pxl-bn-cta {
        font-weight: 600;
        color: var(--color-primary-text);
    }

    /* obsah stránky sa nesmie schovať pod lištu */
    body.pxl-has-sbar {
        padding-bottom: var(--pxl-sbh, 84px);
    }

    /* pri otvorenom hlavnom menu lišta nezavadzia */
    body:has(.header.nav-active) .pxl-sbar,
    body:has(.header.nav-active) .pxl-bnav {
        transform: translateY(130%);
    }
}

/* úzke displeje (ako v deale) */
@media (max-width: 389px) {
    .pxl-sbar .pxl-btn {
        width: 156px;
        padding: 0 8px;
        gap: 6px;
        font-size: 14px;
    }

    .pxl-sbar .pxl-btn .icon {
        font-size: 16px;
    }

    .pxl-sbar-info .row {
        font-size: 11.5px;
    }
}

@media (max-width: 359px) {
    .pxl-sbar-info strong {
        font-size: 17px;
    }

    .pxl-sbar-info .from {
        font-size: 12px;
    }

    .pxl-sbar .pxl-btn {
        width: auto;
        padding: 0 10px;
        font-size: 12.5px;
        gap: 5px;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .pxl-sbar,
    .pxl-sbar.show,
    .pxl-bnav,
    .pxl-bnav.show {
        transition: none;
    }
}

/* Mobil: menšie logo, nadpisy a text v úvode (desktop sa nemení) */
@media (max-width: 767px) {
    .header .logo img {
        width: 112px;
    }

    .hero-content h1 {
        font-size: 2.875rem;
        line-height: 0.95;
    }

    .hero-text,
    .hero.ui-dark .hero-text {
        font-size: 1.0625rem;
        line-height: 1.5;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .pxl-page-header h1 {
        font-size: 2.125rem;
    }

    .section-title h2.pxl-h2-sm,
    .pxl-split-title,
    .pxl-cta-content h2 {
        font-size: 1.75rem;
    }

    .pxl-split-lead,
    .pxl-split-list .pxl-checklist li {
        font-size: 1.03rem;
        line-height: 1.6;
    }
}

/* Mobilná hlavička: logo o kúsok menšie, hamburger presne na strede loga */
.header .logo {
    display: flex;
    align-items: center;
}

/* obrázky loga sú položky flexu, takže pod nimi nevzniká medzera ako pri texte (display nemeníme – jedna verzia loga je skrytá) */

@media (max-width: 767px) {
    .header .logo img {
        width: 100px;
    }
}

/* Ikona menu: tri čiary (prostredná kratšia); pri prechode myšou sa prostredná predĺži,
   po ťuknutí sa čiary plynule zmenia na krížik */
.mobile-toggle {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px; /* ikona lícuje s pravým okrajom obsahu, plocha na ťuknutie ostáva 44 px */
}

.pxl-burger {
    position: relative;
    display: block;
    width: 22px;
    height: 16px; /* čiary 2 px s medzerou 5 px (rozostup 7 px) */
}

.pxl-burger span {
    position: absolute;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), width 0.35s cubic-bezier(0.2, 1, 0.3, 1),
        opacity 0.2s ease, top 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}

.pxl-burger span:nth-child(1) {
    top: 0;
    width: 22px;
}

.pxl-burger span:nth-child(2) {
    top: 7px;
    width: 14px;
}

.pxl-burger span:nth-child(3) {
    top: 14px;
    width: 22px;
}

.mobile-toggle:focus-visible .pxl-burger span:nth-child(2) {
    width: 22px;
}

/* efekt pri prechode myšou len na zariadeniach s myšou: na dotyku by po ťuknutí ostal „zaseknutý“ */
@media (hover: hover) {
    .mobile-toggle:hover .pxl-burger span:nth-child(2) {
        width: 22px;
    }
}

.header.nav-active .pxl-burger span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.header.nav-active .pxl-burger span:nth-child(2) {
    opacity: 0;
    transform: translateX(8px);
}

.header.nav-active .pxl-burger span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

/* otvorené menu má biele pozadie: krížik je tmavý aj v tmavej hlavičke na úvode */
.header.nav-active .mobile-toggle {
    color: var(--color-text);
}

.mobile-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .pxl-burger span {
        transition: none;
    }
}

/* Otvorené mobilné menu má biele pozadie: položky sú tmavé aj v tmavej hlavičke na úvode */
@media (max-width: 991px) {
    .header.nav-active .nav-link,
    .header.ui-dark.nav-active .nav-link,
    .header.ui-dark.sticky.nav-active .nav-link {
        color: var(--color-text);
    }

    .header.nav-active .nav-link.active,
    .header.nav-active .nav-link:hover,
    .header.ui-dark.nav-active .nav-link.active,
    .header.ui-dark.nav-active .nav-link:hover {
        color: var(--color-primary-text);
    }
}

/* Mobil: hero rozložený rovnomerne – miesto pre hlavičku, obsah, ikona „posunúť nižšie“.
   Obsah má rovnaký voľný priestor nad aj pod sebou (auto okraje), vnútri jednotné medzery 24 px. */
@media (max-width: 767px) {
    .hero {
        justify-content: flex-start;
        padding-top: 76px;      /* po spodok riadku s logom (24 + 44 px) + 8 px optické vyrovnanie, aby bol voľný priestor nad nadpisom rovnaký ako pod tlačidlami */
        padding-bottom: 0;
    }

    .hero-grid {
        margin-block: auto;
        padding-block: var(--space-6);   /* najmenej 24 px od hlavičky aj od ikony na malých displejoch */
    }

    .hero-content h1 {
        margin-bottom: var(--space-6);
        text-wrap: balance;
    }

    .hero-text,
    .hero.ui-dark .hero-text {
        max-width: 34ch;
        margin: 0 auto var(--space-6);
        text-wrap: balance;
    }

    .hero-actions {
        gap: var(--space-3);
    }

    .hero-scroll {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        flex: none;
        margin: 0 auto calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767px) and (max-height: 620px) {
    .hero {
        padding-bottom: var(--space-4);
    }

    /* nízke displeje (napr. 320 × 568): menšie písmo, aby sa nadpis, text aj tlačidlá zmestili na prvú obrazovku */
    .hero-grid {
        padding-block: var(--space-4);
    }

    .hero-content h1 {
        font-size: 2.375rem;
        margin-bottom: var(--space-4);
    }

    .hero-text,
    .hero.ui-dark .hero-text {
        font-size: 0.95rem;
        line-height: 1.45;
        margin-bottom: var(--space-4);
    }

    .hero-actions .pxl-btn {
        padding: 0.8rem 1rem;
    }
}

/* Mobil: tlačidlo pod galériou bližšie ku kartám (namiesto ~130 px jednotne 32 px) */
@media (max-width: 767px) {
    .portfolio-grid--featured,
    .pxl-work-grid {
        margin-bottom: 0;
    }

    .portfolio-grid--featured + .pxl-section-footer,
    .pxl-work-grid + .pxl-section-more {
        margin-top: var(--space-8);
    }
}

/* Mobil: jednotný kompaktnejší rytmus sekcií */
@media (max-width: 767px) {
    .section {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

    .section-title {
        margin-bottom: var(--space-8);
    }
}

/* Mobil: nad každým samostatným tlačidlom pod blokom obsahu jednotne 32 px */
@media (max-width: 767px) {
    .pxl-section-footer {
        margin-top: var(--space-8);
    }

    .pxl-cta-text {
        margin-bottom: var(--space-8);
    }
}

/* Mobil: nadpis sekcie bližšie k podnadpisu */
@media (max-width: 767px) {
    .section-title h2 {
        margin-bottom: var(--space-2);
    }
}

/* Spodná lišta: okrúhle tlačidlo „Napísať e-mail“ vedľa hlavného tlačidla */
@media (max-width: 767px) {
    .pxl-sbar-act {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
    }

    .pxl-sbar-mail {
        display: grid;
        place-items: center;
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
        color: var(--color-text);
        box-shadow: inset 0 0 0 1px #D0D5DD;
        font-size: 20px;
        -webkit-tap-highlight-color: transparent;
    }

    .pxl-sbar-mail:active {
        background: var(--color-bg-soft);
    }

    .pxl-sbar-mail:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* s dvoma tlačidlami je hlavné o kúsok užšie a text vľavo sa skracuje trojbodkou */
    .pxl-sbar .pxl-btn {
        width: 150px;
    }

    .pxl-sbar-info strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 389px) {
    .pxl-sbar .pxl-btn {
        width: 140px;
    }

    .pxl-sbar-mail {
        width: 44px;
        height: 44px;
    }
}

/* Spodná lišta na najužších displejoch (do 359 px): bez ikony v hlavnom tlačidle, aby sa zmestil celý text vľavo */
@media (max-width: 359px) {
    .pxl-sbar .pxl-btn .icon {
        display: none;
    }

    .pxl-sbar-info .row {
        font-size: 11px;
    }
}

/* Spodná lišta: text sa nikdy neskracuje trojbodkou. Ak sa popis nezmestí, zalomí sa na druhý riadok. */
@media (max-width: 767px) {
    .pxl-sbar-info strong,
    .pxl-sbar-info .row {
        overflow: visible;
        text-overflow: clip;
    }

    .pxl-sbar-info .row {
        white-space: normal;
    }
}

/* najužšie displeje: hlavné tlačidlo len také široké ako jeho text */
@media (max-width: 359px) {
    .pxl-sbar .pxl-btn {
        width: auto;
        padding: 0 14px;
    }
}

/* Spodná lišta: hlavné tlačidlo bez ikony; e-mail ako štvorec s rovnakým zaoblením a výškou ako tlačidlo */
@media (max-width: 767px) {
    .pxl-sbar .pxl-btn {
        width: 140px;
        padding: 0 14px;
    }

    .pxl-sbar-mail,
    .pxl-sbar-mail:focus-visible {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
}

@media (max-width: 389px) {
    .pxl-sbar-mail {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 359px) {
    .pxl-sbar .pxl-btn {
        width: auto;
    }
}

@media (max-width: 359px) {
    .pxl-sbar {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Spodná lišta: e-mail vľavo, text v strede (hneď pri tlačidle, ktoré popisuje), hlavné tlačidlo vpravo */
@media (max-width: 767px) {
    .pxl-sbar {
        justify-content: flex-start;
        gap: 12px;
    }

    .pxl-sbar-info {
        flex: 1;
    }
}

@media (max-width: 359px) {
    .pxl-sbar {
        gap: 10px;
    }
}

/* Homepage: zelená dlaždica Online marketing – zoznam a cena dole, rovnaký štýl ako karty služieb */
.pxl-mkt-card {
    display: flex;
    flex-direction: column;
}

.pxl-mkt-card h3 {
    font-size: 1.6rem;
    margin-bottom: var(--space-3);
}

.pxl-mkt-list {
    list-style: none;
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.pxl-mkt-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    line-height: 1.5;
}

.pxl-mkt-list .icon {
    font-size: 1.15rem;
    margin-top: 0.15em;
}

.pxl-mkt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
}

/* najmenej 32 px medzi zoznamom a cenou, zvyšok miesta vyplní auto okraj */
.pxl-mkt-list {
    margin-bottom: var(--space-8);
}

.pxl-mkt-price {
    font-size: 0.95rem;
}

.pxl-mkt-price strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
}

.pxl-mkt-card .pxl-hub-arrow {
    flex: none;
    border-color: rgba(18, 18, 18, 0.25);
    color: var(--color-on-primary);
}

.pxl-mkt-card:hover .pxl-hub-arrow {
    background: var(--color-on-primary);
    border-color: var(--color-on-primary);
    color: var(--color-primary);
    transform: rotate(45deg);
}

/* mobil: kompaktná dlaždica bez zoznamu */
@media (max-width: 640px) {
    .pxl-mkt-card {
        display: grid;
    }

    .pxl-mkt-card h3 {
        font-size: 1.15rem;
    }

    .pxl-mkt-list {
        display: none;
    }

    .pxl-mkt-foot {
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    }

    .pxl-mkt-price {
        font-size: 0.85rem;
    }

    .pxl-mkt-price strong {
        font-size: 1rem;
    }

    .pxl-mkt-card .pxl-hub-arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* Online marketing: minimalistická šípka bez krúžku; pri prechode myšou sa jemne posunie po uhlopriečke */
.pxl-mkt-card .pxl-hub-arrow,
.pxl-mkt-card:hover .pxl-hub-arrow {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    font-size: 1.15rem;
    color: var(--color-on-primary);
}

.pxl-mkt-card .pxl-hub-arrow svg {
    display: block;
    width: 1em;
    height: 1em;
    stroke-width: 1.75;
}

.pxl-mkt-card .pxl-hub-arrow {
    transform: none;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}

.pxl-mkt-card:hover .pxl-hub-arrow {
    transform: translate(3px, -3px);
}

@media (max-width: 640px) {
    .pxl-mkt-card .pxl-hub-arrow {
        width: auto;
        height: auto;
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxl-mkt-card:hover .pxl-hub-arrow {
        transform: none;
    }
}

/* Dlaždice služieb: pod nadpisom väčšia medzera ako medzi riadkami textu */
.bento-grid .bento-card h3 {
    margin-bottom: 0.625rem;
}

.bento-grid .pxl-mkt-card h3 {
    margin-bottom: var(--space-3);
}

@media (max-width: 640px) {
    .bento-grid .bento-card h3,
    .bento-grid .pxl-mkt-card h3 {
        margin-bottom: 0.625rem;
    }
}

/* Online marketing – box s cenou: výraznejšie pozadie, text aj šípka opticky na strede */
.pxl-mkt-foot {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    align-items: center;
}

.pxl-mkt-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3em;
    line-height: 1.2;
}

.pxl-mkt-price strong {
    line-height: 1;
}

.pxl-mkt-card .pxl-hub-arrow {
    align-self: center;
}

/* optické vyrovnanie: písmo (dĺžne a „y“) pôsobí o 1,5 px nižšie, ako je stred boxu a šípky */
.pxl-mkt-price {
    transform: translateY(-1.5px);
}

/* každá cena drží pohromade; na mobile pod sebou bez bodky */
.pxl-mkt-item {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .pxl-mkt-price {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 2px;
    }

    .pxl-mkt-sep {
        display: none;
    }
}

/* Online marketing: šípka sa pri prechode myšou nehýbe */
.pxl-mkt-card:hover .pxl-hub-arrow {
    transform: none;
}

/* Hero: odsek pod nadpisom vycentrovaný ako celok (má obmedzenú šírku) */
.hero-text,
.hero.ui-dark .hero-text {
    margin-left: auto;
    margin-right: auto;
}

/* Úvod: cena na kartách služieb (zelená karta má cenu v pätičke) */
.pxl-services-grid .bento-card {
    display: flex;
    flex-direction: column;
}

.pxl-bento-price {
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: 0.95rem;
    line-height: 1.35; /* dve ceny pod sebou (šablóny, bannery) blízko seba */
    color: var(--color-text-muted);
}

.pxl-bento-price strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary-text);
}

@media (max-width: 767px) {
    .pxl-services-grid .bento-card {
        display: grid;
    }

    .pxl-bento-price {
        padding-top: var(--space-2);
        font-size: 0.85rem;
    }

    .pxl-bento-price strong {
        font-size: 1rem;
    }
}

/* Úvod, služby: v strednom stĺpci Tlačoviny a pod nimi vysoká karta Grafika pre sociálne siete; ceny dole na kartách */
.pxl-services-c .bento-card:not(.bento-item-tall) {
    display: flex;
    flex-direction: column;
}

.pxl-services-c .pxl-web-card {
    grid-row: span 2;
}

.pxl-web-card .pxl-mkt-list {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.pxl-web-card .pxl-mkt-list .icon {
    color: var(--color-primary-text);
}

.pxl-services-c .bento-item-tall .pxl-bento-price {
    margin-top: 0;
}

@media (max-width: 1024px) {
    /* tablet (2 stĺpce): vysoké karty len na 1 riadok, aby mriežka nemala diery */
    .pxl-services-c .pxl-web-card,
    .pxl-services-c .bento-item-tall {
        grid-row: span 1;
    }
}

@media (max-width: 767px) {
    .pxl-services-c .bento-card:not(.bento-item-tall) {
        display: grid;
    }

    .pxl-services-c .pxl-web-card {
        grid-row: span 1;
    }
}

/* Poznámky pod mriežkou a cenami (napr. „Na želanie nastavíme aj Google Analytics…“):
   užší riadok kvôli čitateľnosti a väčšia medzera nad vetou */
.pxl-packages-note {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.pxl-feature-grid + .pxl-packages-note,
.pricing-group + .pxl-packages-note {
    margin-top: var(--space-10);
}

/* skupina cien má spodný okraj 4rem, ktorý by prebil medzeru nad poznámkou; pred poznámkou ho rušíme,
   aby bola medzera všade rovnaká */
.pricing-group:has(+ .pxl-packages-note) {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .pxl-feature-grid + .pxl-packages-note,
    .pricing-group + .pxl-packages-note {
        margin-top: var(--space-8);
    }
}

/* Skok na kotvu (Pozrieť ceny, #tlacoviny, #cookies, Konzultácia → formulár…): prvý obsah cieľa
   vždy 24 px pod pevnou hlavičkou (hlavička 91 px, na mobile 77 px). Pri sekcii sa odráta jej vnútorný
   horný okraj, aby nadpis nebol hlboko pod hlavičkou. Polohu bez vplyvu animácie nábehu dopočíta
   js/modern.js (scrollToAnchor) z týchto hodnôt. */
:root {
    --pxl-anchor-gap: 115px; /* hlavička 91 px + 24 px */
}

#contact-form,
.pxl-feature[id],
section[id],
h2[id],
h3[id] {
    scroll-margin-top: var(--pxl-anchor-gap);
}

section.section[id],
#postup { /* prázdna kotva tesne pred sekciou Ako pracujeme (ux-ui-dizajn.html) */
    scroll-margin-top: calc(var(--pxl-anchor-gap) - var(--space-24));
}

#partneri {
    scroll-margin-top: calc(var(--pxl-anchor-gap) - var(--space-12));
}

@media (max-width: 767px) {
    :root {
        --pxl-anchor-gap: 101px; /* hlavička 77 px + 24 px */
    }

    section.section[id],
    #postup {
        scroll-margin-top: calc(var(--pxl-anchor-gap) - var(--space-16));
    }
}

/* Kontakt: po skoku na formulár (Konzultácia, „Chcem logo“…) mint čiara raz obehne okraj karty,
   chvíľu ostane a zmizne – upozorní, kde písať. SVG vkladá js/modern.js (highlightContactForm). */
.pxl-form-card {
    position: relative;
}

.pxl-form-ring {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    animation: pxl-ring-fade 0.7s ease 2.4s forwards;
}

.pxl-form-ring rect {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 6px rgba(13, 239, 157, 0.55));
    animation: pxl-ring-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes pxl-ring-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes pxl-ring-fade {
    to { opacity: 0; }
}

/* bez animácie: okraj sa len rozsvieti a zmizne */
@media (prefers-reduced-motion: reduce) {
    .pxl-form-ring rect {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* =====================================================================
   Rozbaľovací zoznam (js/modern.js nahrádza vzhľad <select class="form-control">)
   ===================================================================== */
.pxl-select {
    position: relative;
}

/* pôvodný select ostáva vo formulári, len neviditeľný */
.pxl-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.pxl-select-btn {
    display: block;
    text-align: left;
    cursor: pointer;
    padding-right: 3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    /* šípka ako pri pôvodnom poli */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 18px;
}

.pxl-select-btn.is-placeholder {
    color: var(--color-text-muted);
}

.pxl-select.is-open .pxl-select-btn {
    border-color: var(--color-primary);
    background-color: white;
    box-shadow: 0 0 0 4px rgba(13, 239, 157, 0.18);
    /* šípka otočená nahor */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307d188' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.pxl-select-btn:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(13, 239, 157, 0.18);
}

/* ponuka pod poľom (desktop) */
.pxl-select-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 400px; /* všetkých 7 položiek bez posúvania */
    overflow-y: auto;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.25), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 1, 0.3, 1), visibility 0s linear 0.22s;
}

.pxl-select.is-up .pxl-select-list {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.98);
}

.pxl-select.is-open .pxl-select-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 1, 0.3, 1), visibility 0s;
}

.pxl-select-head {
    display: none;
}

.pxl-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
    color: var(--color-text);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.12s ease;
}

.pxl-select-option.is-active {
    background: rgba(13, 239, 157, 0.12);
}

.pxl-select-option.is-selected {
    font-weight: 600;
}

.pxl-select-check {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--color-primary-text);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.pxl-select-check svg {
    width: 100%;
    height: 100%;
}

.pxl-select-option.is-selected .pxl-select-check {
    opacity: 1;
    transform: none;
}

/* mobil: panel zdola (zoznam je vtedy presunutý do <body>) */
.pxl-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2090; /* nad hlavičkou, spodnou lištou aj cookie lištou */
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.pxl-select-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
}

.pxl-select-list.is-sheet {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2100;
    max-height: 75vh;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px -12px rgba(15, 23, 42, 0.3);
    opacity: 1;
    visibility: visible;
    transform: translateY(105%);
    transition: transform 0.26s cubic-bezier(0.2, 1, 0.3, 1);
}

.pxl-select-list.is-sheet.is-visible {
    transform: none;
}

.pxl-select-list.is-sheet .pxl-select-head {
    display: block;
    position: relative;
    padding: 22px 8px 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
}

/* úchyt panelu */
.pxl-select-list.is-sheet .pxl-select-head::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: var(--color-border);
}

.pxl-select-list.is-sheet .pxl-select-option {
    min-height: 52px;
    padding: 0.9rem 0.9rem;
    font-size: 1.05rem;
}

.pxl-select-list.is-sheet .pxl-select-option + .pxl-select-option {
    margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pxl-select-list,
    .pxl-select-list.is-sheet,
    .pxl-select-backdrop,
    .pxl-select-check {
        transition: none;
    }
}

/* panel na mobile: zvýrazniť len vybranú položku (aktívna položka slúži len klávesnici) */
.pxl-select-list.is-sheet .pxl-select-option.is-active {
    background: transparent;
}

.pxl-select-list.is-sheet .pxl-select-option.is-selected {
    background: rgba(13, 239, 157, 0.12);
}

/* šípka v poli: .form-control:focus nastavuje „background: white“ (skratka), ktorá by zrušila
   jedno opakovanie, polohu aj veľkosť šípky – preto ich nastavujeme zvlášť a s vyššou prioritou */
.pxl-select .pxl-select-btn,
.pxl-select .pxl-select-btn:focus {
    background-color: var(--color-bg-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 18px;
}

.pxl-select .pxl-select-btn:focus-visible,
.pxl-select.is-open .pxl-select-btn {
    background-color: white;
}

.pxl-select.is-open .pxl-select-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307d188' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

/* =====================================================================
   Tlačidlo „Odoslať a získať ponuku“: lietadielko odletí → fajka „Odoslané“ → po 3 s späť
   (stavy .is-sending, .is-sent, .is-back, .is-error nastavuje js/modern.js)
   ===================================================================== */
.pxl-send-btn {
    position: relative;
    overflow: hidden; /* lietadielko odletí za okraj tlačidla */
}

.pxl-send-btn:disabled {
    cursor: default;
    opacity: 1;
}

.pxl-send-icon {
    position: relative;
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.pxl-send-icon .icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
}

.pxl-send-icon svg {
    width: 100%;
    height: 100%;
}

/* fajka je skrytá a nenakreslená */
.pxl-send-check {
    opacity: 0;
}

.pxl-send-check path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* text: jemné prelínanie pri zmene */
.pxl-send-label.is-swap {
    animation: pxl-label-in 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}

@keyframes pxl-label-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* 1) odosielanie: lietadielko sa nadýchne a odletí šikmo hore */
.pxl-send-btn.is-sending .pxl-send-plane {
    animation: pxl-plane-out 0.7s cubic-bezier(0.55, 0, 0.75, 0.4) forwards;
}

@keyframes pxl-plane-out {
    0% { transform: none; opacity: 1; }
    25% { transform: translate(-3px, 3px) rotate(-10deg); opacity: 1; }
    100% { transform: translate(46px, -40px) rotate(12deg) scale(0.6); opacity: 0; }
}

/* bodky za „Odosielam“ */
.pxl-send-btn.is-sending .pxl-send-label::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: pxl-dots 1s steps(4, end) infinite;
}

@keyframes pxl-dots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

/* 2) odoslané: fajka sa nakreslí a jemne „pukne“ */
.pxl-send-btn.is-sent .pxl-send-plane {
    opacity: 0;
}

.pxl-send-btn.is-sent .pxl-send-check {
    opacity: 1;
    animation: pxl-check-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.pxl-send-btn.is-sent .pxl-send-check path {
    animation: pxl-check-draw 0.4s ease-out 0.08s forwards;
}

@keyframes pxl-check-pop {
    0% { transform: scale(0.4); }
    100% { transform: scale(1); }
}

@keyframes pxl-check-draw {
    to { stroke-dashoffset: 0; }
}

/* 3) návrat: lietadielko priletí zľava zdola */
.pxl-send-btn.is-back .pxl-send-plane {
    animation: pxl-plane-in 0.55s cubic-bezier(0.2, 1, 0.3, 1);
}

@keyframes pxl-plane-in {
    from { transform: translate(-30px, 26px) rotate(-12deg) scale(0.7); opacity: 0; }
}

/* chyba: krátke zatrasenie */
.pxl-send-btn.is-error {
    animation: pxl-btn-shake 0.4s ease;
}

@keyframes pxl-btn-shake {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .pxl-send-btn.is-sending .pxl-send-plane,
    .pxl-send-btn.is-back .pxl-send-plane,
    .pxl-send-btn.is-sent .pxl-send-check,
    .pxl-send-btn.is-error,
    .pxl-send-label.is-swap {
        animation: none;
    }

    .pxl-send-btn.is-sending .pxl-send-plane {
        opacity: 0.4;
    }

    .pxl-send-btn.is-sent .pxl-send-check path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* =====================================================================
   Stránka 404: „4 0 4“, nulu tvorí mint dráha a okolo nej krúži lietadielko
   ===================================================================== */
.pxl-error {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 140px 0 100px;
    text-align: center;
    background: var(--color-bg-soft);
}

.pxl-error .container {
    width: 100%;
}

.pxl-error-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.6vw, 20px);
    margin-bottom: var(--space-8);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(7rem, 22vw, 14rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-text);
}

.pxl-error-zero {
    position: relative;
    display: inline-block;
    width: 0.74em;
    height: 0.74em;
}

/* nula = prerušovaná dráha letu, pomaly sa „posúva“ */
.pxl-error-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pxl-error-ring circle {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 11;
    stroke-linecap: round;
    /* kruh má pathLength 300: presne 10 x (16 čiarka + 14 medzera), bez švu na pravej strane */
    stroke-dasharray: 16 14;
    animation: pxl-ring-dash 6s linear infinite;
}

@keyframes pxl-ring-dash {
    to { stroke-dashoffset: -120; } /* 4 celé čiarky: plynulé opakovanie */
}

/* lietadielko krúži po dráhe v smere hodinových ručičiek */
.pxl-error-orbit {
    position: absolute;
    inset: 0;
    animation: pxl-orbit 6s linear infinite;
}

/* Lietadielko (ikona Lucide send) ide stredom hrubej prerušovanej čiary.
   Ťažisko tvaru ikony je v 57,5 % šírky a 42,5 % výšky jej štvorca (posunuté k špičke),
   preto sa okolo neho otáča aj zarovnáva. Čiara hore je 0.0617em od vrchu nuly (0.74em, r 50 z 120),
   +0.02em dovnútra, lebo rovný tvar na okrúhlej dráhe opticky „visí“ von.
   top = 0.0817 - 0.425 * 0.22 = -0.0118em, margin-left = -0.575 * 0.22 = -0.1265em */
.pxl-error-plane {
    position: absolute;
    top: -0.0118em;
    left: 50%;
    display: inline-flex;
    width: 0.22em;
    height: 0.22em;
    margin-left: -0.1265em;
    color: var(--color-text);
    transform-origin: 57.5% 42.5%;
    transform: rotate(55deg); /* špička mieri doprava hore: 45° = let po dotyčnici, +10° = nakláňa sa do zákruty po oblúku */
}

.pxl-error-plane svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* lietadielko vyplnené bielou, zakryje čiaru pod sebou */
.pxl-error-plane svg path:first-child {
    fill: #fff;
}

@keyframes pxl-orbit {
    to { transform: rotate(360deg); }
}

.pxl-error-title {
    margin: 0 auto var(--space-4);
    max-width: 760px;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
}

.pxl-error-lead {
    margin: 0 auto var(--space-8);
    max-width: 560px;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.pxl-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.pxl-error-links {
    margin-top: var(--space-12);
}

.pxl-error-links p {
    margin-bottom: var(--space-3);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pxl-error-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pxl-error-links a {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: white;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pxl-error-links a:hover,
.pxl-error-links a:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .pxl-error {
        padding: 110px 0 120px;
    }

    .pxl-error-lead {
        font-size: 1rem;
    }

    .pxl-error-actions .pxl-btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxl-error-orbit,
    .pxl-error-ring circle {
        animation: none;
    }
}

/* Hamburger: slučka – horná a dolná čiarka sa zmenšia na dĺžku strednej (14 px) a stredná sa zároveň natiahne
   na ich dĺžku (22 px), chvíľu tak ostanú a vrátia sa. Prvýkrát 1,5 s po načítaní, potom každých 5 s.
   Pri prechode myšou, otvorenom menu a „obmedziť pohyb“ stojí. */
.pxl-burger span:nth-child(1),
.pxl-burger span:nth-child(3) {
    animation: pxl-burger-outer 5s cubic-bezier(0.65, 0, 0.35, 1) 1.5s infinite;
}

.pxl-burger span:nth-child(2) {
    animation: pxl-burger-middle 5s cubic-bezier(0.65, 0, 0.35, 1) 1.5s infinite;
}

@keyframes pxl-burger-outer {
    0%, 50%, 100% { width: 22px; }
    12%, 38% { width: 14px; }
}

@keyframes pxl-burger-middle {
    0%, 50%, 100% { width: 14px; }
    12%, 38% { width: 22px; }
}

.mobile-toggle:focus-visible .pxl-burger span,
.header.nav-active .pxl-burger span {
    animation: none;
}

@media (hover: hover) {
    .mobile-toggle:hover .pxl-burger span {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxl-burger span {
        animation: none;
    }
}

/* =====================================================================
   Mobil: nadpisy sekcií a pätička na stred (desktop sa nemení).
   Právny text (ochrana osobných údajov) ostáva zarovnaný doľava kvôli čitateľnosti.
   ===================================================================== */
@media (max-width: 767px) {
    .section-title,
    .section-title.text-left {
        text-align: center;
    }

    .section-title p {
        margin-left: auto;
        margin-right: auto;
    }

    .pxl-split-title {
        text-align: center;
    }

    /* pätička */
    .footer-grid {
        text-align: center;
    }

    .footer-logo {
        display: flex;
        justify-content: center;
    }

    .footer-about p {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-nav {
        align-items: center;
    }

    .footer-social {
        justify-content: center;
    }

    /* hustejšie stĺpce: menšia medzera pod nadpisom aj medzi odkazmi (ťuknutie stále aspoň 32 px) */
    .footer-title {
        margin-bottom: var(--space-3);
    }

    .footer-nav a,
    .footer-links > a.text-primary {
        padding: 0.3rem 0;
    }

    .footer-links > p {
        margin-bottom: var(--space-1);
    }

    /* menšie medzery medzi stĺpcami pätičky */
    .footer-grid {
        gap: var(--space-8);
        margin-bottom: var(--space-10);
    }

    .footer-logo {
        margin-bottom: var(--space-3);
    }
}

/* Mobil: menšia medzera medzi úvodom sekcie FAQ a prvou otázkou (bolo 96 px, teraz 40 px).
   Okraj nadpisu sekcie 32 px sa s -24 px zlúči na 8 px, + 8 px položka + 24 px otázka. */
@media (max-width: 767px) {
    .pxl-faq-list {
        margin-top: -24px;
    }
}


/* Mobil: hero vždy na celú výšku displeja (dvh sa prispôsobí aj skrývaniu lišty prehliadača),
   ikonka „posunúť nižšie“ vždy nad spodným okrajom. Málo miesta: len myška bez šípky;
   úplne nízky displej (do 560 px): ikonka sa skryje, aby nezavadzala tlačidlám. */
@media (max-width: 767px) {
    .hero {
        min-height: 100svh;
        min-height: 100dvh;
    }
}

@media (max-width: 767px) and (max-height: 700px) {
    .hero-scroll-arrow {
        display: none;
    }
}

@media (max-width: 767px) and (min-height: 561px) and (max-height: 620px) {
    .hero-scroll {
        display: flex; /* na mobile ostáva aspoň myška (inde sa pod 620 px skrýva) */
    }

    .hero {
        padding-bottom: 0; /* ikonka 16 px nad okrajom ako na vyšších displejoch */
    }
}

/* Lightbox (Tobii): popis pod obrázkom, nie cez neho. Pri úzkom obrázku (dlhý screenshot webu)
   by sa inak zalomil do úzkeho stĺpčeka na celú šírku obrázka a prekryl ho. */
.tobii .tobii__slide figure > figcaption { /* .tobii: knižnica sa načíta neskôr, musí mať vyššiu prioritu */
    top: 100%;
    bottom: auto;
    left: 50%;
    width: max-content;
    max-width: 90vw;
    margin-top: 12px;
    padding: 0;
    transform: translateX(-50%);
    background: none;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

.tobii .tobii__slide figure > img {
    max-height: calc(85vh - 3.5rem); /* miesto na popis pod obrázkom */
}

.tobii .tobii__slide [data-type="image"] {
    overflow: visible; /* popis je pod obrázkom, mimo rámika */
}