:root {
            /* Light Mode - Modern Palette */
            --bg-page-light: #F8F9FA;
            --bg-card-light: #FFFFFF;
            --text-primary-light: #18181B;
            --text-secondary-light: #52525B;
            --border-light: #E4E4E7;
            --brand-primary: #10B981;
            --brand-secondary: #059669;
            --brand-primary-rgb: 16, 185, 129;

            /* Dark Mode - Modern Palette */
            --bg-page-dark: #0A0A0A;
            --bg-card-dark: #1C1C1E;
            --text-primary-dark: #E4E4E7;
            --text-secondary-dark: #A1A1AA;
            --border-dark: #27272A;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-page-light);
            color: var(--text-primary-light);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .dark body {
            background-color: var(--bg-page-dark);
            color: var(--text-primary-dark);
        }

        .bg-card {
            background-color: var(--bg-card-light);
            border: 1px solid var(--border-light);
            box-shadow: 0 4px 12px -1px rgba(0,0,0,0.05), 0 2px 8px -2px rgba(0,0,0,0.04);
        }
        .dark .bg-card {
            background-color: var(--bg-card-dark);
            border-color: var(--border-dark);
            box-shadow: 0 4px 12px -1px rgba(0,0,0,0.1), 0 2px 8px -2px rgba(0,0,0,0.1);
        }
        .logo-light-mode { display: block; }
        .logo-dark-mode { display: none; }
        .dark .logo-light-mode { display: none; }
        .dark .logo-dark-mode { display: block; }

        .dark .bg-section-gradient {
            background: linear-gradient(to bottom, #0A0A0A 0%, #041E11 40%, #041E11 60%, #0A0A0A 100%);
        }

        .gallery-image {
            position: relative;
            overflow: hidden;
            border-radius: 0.75rem;
            transition: transform 0.3s ease-out;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
        }
        .gallery-image:hover {
            transform: scale(1.05) rotate(-1deg);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
        }
        .skill-tag.brand:hover {
            background-color: var(--brand-primary);
            color: white !important;
        }
        .text-main { color: var(--text-primary-light); }
        .dark .text-main { color: var(--text-primary-dark); }

        .text-sub { color: var(--text-secondary-light); }
        .dark .text-sub { color: var(--text-secondary-dark); }

        .border-default { border-color: var(--border-light); }
        .dark .border-default { border-color: var(--border-dark); }

        .text-brand { color: var(--brand-primary); }
        .ring-brand { ring-color: var(--brand-primary); }

        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease-out forwards;
        }
        @keyframes fadeInUp {
            to { opacity: 1; transform: translateY(0); }
        }

        .tile-hover-effect {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
         .tile-hover-effect:hover {
             transform: translateY(-6px);
        }

        #hero {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero-glow {
            position: absolute;
            top: 50%; left: 50%;
            width: 700px; height: 700px;
            background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.12) 0%, rgba(var(--brand-primary-rgb), 0) 65%);
            transform: translate(-50%, -50%);
            z-index: 0;
            pointer-events: none;
        }
        .dark .hero-glow {
            background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.20) 0%, rgba(var(--brand-primary-rgb), 0) 65%);
        }

        /* Nové styly pro načítající čísla (Hero Stats v4 - Jemné obdélníky) */
        .hero-stats-v4 {
            display: flex;
            justify-content: center;
            gap: 1.25rem;
            margin-top: 2.5rem;
            flex-wrap: wrap;
            width: 100%;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        .stat-item-v4 {
            background-color: rgba(var(--brand-primary-rgb), 0.03);
            border: 1px solid rgba(var(--brand-primary-rgb), 0.15);
            border-radius: 0.5rem; /* rounded-lg */
            padding: 1rem 1.25rem; /* py-4 px-5 */
            text-align: center;
            flex-basis: 160px;
            flex-grow: 1;
            transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
        }
        .dark .stat-item-v4 {
            background-color: rgba(var(--brand-primary-rgb), 0.07);
            border-color: rgba(var(--brand-primary-rgb), 0.25);
        }
        .stat-item-v4:hover {
            transform: translateY(-3px);
            background-color: rgba(var(--brand-primary-rgb), 0.06);
            border-color: rgba(var(--brand-primary-rgb), 0.3);
        }
        .dark .stat-item-v4:hover {
            background-color: rgba(var(--brand-primary-rgb), 0.12);
            border-color: rgba(var(--brand-primary-rgb), 0.4);
        }

        .stat-item-v4 .number-v4-container {
            display: flex;
            align-items: baseline;
            justify-content: center;
            margin-bottom: 0.35rem;
        }
        .stat-item-v4 .number-v4 {
            font-size: 2rem; /* text-3xl */
            font-weight: 700; /* bold */
            color: var(--brand-primary);
            line-height: 1.1;
        }
        .stat-item-v4 .unit-v4 {
            font-size: 1rem; /* text-md */
            font-weight: 600; /* semibold */
            color: var(--brand-primary);
            line-height: 1.1;
            margin-left: 0.15rem;
        }
        .stat-item-v4 .label-v4 {
            font-size: 0.75rem; /* text-xs */
            color: var(--text-sub);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            line-height: 1.3;
        }

        @media (max-width: 540px) {
            .hero-stats-v4 {
                gap: 0.5rem; /* Reduced gap */
            }
            .stat-item-v4 {
                flex-basis: calc(33.333% - 0.34rem); /* Adjusted for 3 items per row */
                padding: 0.6rem 0.4rem; /* Reduced padding */
            }
            /* Removed rule for .stat-item-v4:nth-child(3) to make it full width */
            .stat-item-v4 .number-v4 {
                font-size: 1.6rem; /* Adjusted font size */
            }
            .stat-item-v4 .unit-v4 {
                font-size: 0.8rem; /* Adjusted font size */
            }
            .stat-item-v4 .label-v4 {
                font-size: 0.6rem; /* Adjusted font size */
                line-height: 1.25; /* Adjusted line height */
            }
        }


        .icon-container {
            display: flex; align-items: center; justify-content: center;
            width: 48px; height: 48px;
            border-radius: 9999px;
            margin-bottom: 1.5rem;
            background-color: rgba(var(--brand-primary-rgb), 0.08);
        }
        .dark .icon-container {
            background-color: rgba(var(--brand-primary-rgb), 0.15);
        }

        #back-to-top-button {
            background-color: var(--brand-primary);
            color: white;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            opacity: 0;
            transform: translateY(100%);
            pointer-events: none;
        }
        #back-to-top-button.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        #back-to-top-button:hover {
            background-color: var(--brand-secondary);
        }

        .eshop-logo-container img,
        .company-logo-container img {
            object-fit: contain;
        }

        .email-protection {
            background: rgba(var(--brand-primary-rgb), 0.1);
            padding: 0.8rem; border-radius: 6px;
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1rem; cursor: pointer; transition: all 0.3s ease;
        }
        .email-protection:hover { background: rgba(var(--brand-primary-rgb), 0.2); }
        .g-recaptcha {
            margin-top: 1rem; margin-bottom: 1rem;
            transform-origin: left top;
        }
        .email-reveal { margin-top: 0.5rem; }

        .skill-tag {
            display: inline-block; background-color: var(--bg-card-light);
            color: var(--text-secondary-light); font-size: 0.875rem; font-weight: 500;
            padding: 0.5rem 1rem; border-radius: 9999px;
            border: 1px solid var(--border-light);
            transition: all 0.2s ease-in-out;
        }
        .dark .skill-tag {
            background-color: var(--bg-card-dark);
            color: var(--text-secondary-dark);
            border-color: var(--border-dark);
        }
        .skill-tag:hover {
            background-color: var(--brand-primary);
            color: white !important;
            border-color: var(--brand-primary);
            transform: translateY(-2px);
        }
        .skill-tag.brand {
            color: var(--brand-primary);
            border-color: var(--brand-primary);
        }
        .dark .skill-tag.brand {
            color: var(--brand-primary);
            border-color: var(--brand-primary);
        }

        .hamburger-button {
            width: 40px; height: 40px; display: flex; flex-direction: column;
            justify-content: center; align-items: center; cursor: pointer;
            position: relative; background: transparent; border: none;
        }
        .hamburger-button span {
            display: block; width: 24px; height: 2px;
            background-color: var(--text-primary-light);
            border-radius: 1px; position: absolute;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .dark .hamburger-button span { background-color: var(--text-primary-dark); }
        .hamburger-button span:nth-child(1) { transform: translateY(-7px); }
        .hamburger-button span:nth-child(3) { transform: translateY(7px); }
        .hamburger-button.open span:nth-child(1) { transform: rotate(45deg); }
        .hamburger-button.open span:nth-child(2) { opacity: 0; }
        .hamburger-button.open span:nth-child(3) { transform: rotate(-45deg); }

        #mobile-menu {
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            border-top-width: 0px;
            transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                        opacity 0.3s ease-out,
                        visibility 0s linear 0.4s,
                        border-top-width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        #mobile-menu.menu-open-active {
            max-height: 60vh;
            opacity: 1;
            visibility: visible;
            border-top: 1px solid var(--border-light);
            transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                        opacity 0.3s ease-in 0.05s,
                        visibility 0s linear 0s,
                        border-top-width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        .dark #mobile-menu.menu-open-active {
            border-top-color: var(--border-dark);
        }