@import url('../../fonts/edc-fonts.css');
        
        :root {
            --primary: #00ffaa;
            --secondary: #00d4ff;
            --accent-mint: #c4f0de;
            --dark-bg: #050505;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--dark-bg);
            color: #ffffff;
            margin: 0;
            overflow-x: hidden;
        }

        /* POZADÍ KLIKNI */
        #energy-canvas {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: -1;
            opacity: 0.5;
        }


        /* GLASSMORPHISMUS PRO KARTY */
        .glass-card {
            background: rgba(196, 240, 222, 0.05);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* Smazáno: display, flex-direction, align-items, justify-content */
        }

        .process-container:hover .glass-card {
            transform: translateY(-10px);
            background: var(--accent-mint);
            border: 1px solid var(--accent-mint);
            box-shadow: 0 20px 40px rgba(196, 240, 222, 0.2);
        }

        /* TEXT V KARTĚ PŘI HOVERU */
        .process-container:hover .process-label {
            color: #05282a;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* === 1:1 ANIMACE A SVG Z PŮVODNÍ MAPY === */
        .icon-wrapper {
            width: 140px;
            height: 140px;
            position: relative;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .paper-base {
            width: 80px; height: 100px;
            background: #ffffff;
            border-radius: 6px;
            position: relative;
            border: 1px solid #d1d9e6;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .paper-base::before {
            content: ''; position: absolute; top: 20px; left: 10px; right: 10px; height: 2px;
            background: #e4e9f2;
            box-shadow: 0 15px 0 #e4e9f2, 0 30px 0 #e4e9f2, 0 45px 0 #e4e9f2;
        }

        .overlay-svg {
            position: absolute; width: 45px; height: 45px;
            top: 50%; left: 50%; margin-top: -22.5px; margin-left: -22.5px;
            z-index: 2;
        }

        /* Animace pro různé kroky */
        .hourglass-icon .hourglass { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .process-container:hover .hourglass-icon .hourglass { transform: rotate(180deg); }

        .stamp-icon .stamp { position: absolute; width: 50px; height: 50px; left: 50%; top: -20px; transform: translateX(-50%); z-index: 2; }
        .stamp-icon .stamp-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg) scale(1.5); color: #d32f2f; font-weight: 900; font-size: 0.9rem; border: 2px solid #d32f2f; padding: 1px 4px; border-radius: 4px; opacity: 0; z-index: 1; }
        .process-container:hover .stamp-icon .stamp { animation: stamping 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        .process-container:hover .stamp-icon .stamp-mark { animation: showStamp 0.8s ease-out forwards; }
        @keyframes stamping { 0% { transform: translateX(-50%) translateY(0); } 30% { transform: translateX(-50%) translateY(55px); } 100% { transform: translateX(-50%) translateY(0); } }
        @keyframes showStamp { 0%, 34% { opacity: 0; } 35%, 100% { opacity: 0.9; transform: translate(-50%, -50%) rotate(-15deg) scale(1); } }

        .process-container:hover .plane-icon .plane { animation: planeFly 1.5s ease-in-out forwards; }
        @keyframes planeFly { 0% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(40px, -40px) opacity: 0; } 100% { transform: translate(0, 0) opacity: 1; } }

        .process-container:hover .search-icon .glass { animation: searchGlass 1.2s ease-in-out infinite alternate; }
        @keyframes searchGlass { 0% { transform: translate(-12px, -12px); } 100% { transform: translate(12px, 12px); } }

        .refresh-icon .arrows { transition: transform 0.8s ease-in-out; }
        .process-container:hover .refresh-icon .arrows { transform: rotate(360deg); }

        .cancel-icon .cross-path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.6s ease-in-out; }
        .process-container:hover .cancel-icon .cross-path { stroke-dashoffset: 0; }

        .pen-icon .pen { position: absolute; width: 35px; height: 35px; left: 55px; bottom: 10px; z-index: 2; transform-origin: bottom left; }
        .pen-icon .signature { position: absolute; bottom: 10px; left: 10px; width: 60px; height: 35px; z-index: 1; }
        .edc-path { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.8s ease-in-out; }
        .process-container:hover .pen-icon .edc-path { stroke-dashoffset: 0; }
        .process-container:hover .pen-icon .pen { animation: writing 1s ease-in-out forwards; }
        @keyframes writing { 0% { transform: translate(0, 0); } 10% { transform: translate(-45px, -15px) rotate(-15deg); } 100% { transform: translate(0, 0); } }

        /* MODÁL STYL KLIKNI */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0; top: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
        }

        .modal-content {
            background: rgba(15, 15, 15, 0.98);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin: 5vh auto;
            padding: 40px;
            border-radius: 32px;
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            overflow-y: auto;
        }

        /* Styl pro text v modálu - 1:1 zachování tvého obsahu */
        .modal-text-body {
            line-height: 1.7;
            color: #d1d5db;
        }

        .modal-text-body p { margin-bottom: 1.2rem; }
        .modal-text-body ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1.2rem; }
        .modal-text-body li { margin-bottom: 0.5rem; }
        .modal-text-body strong { color: #ffffff; }

        /* WCAG AAA */
        [data-theme="wcag-aaa"] { background: #000 !important; }
        [data-theme="wcag-aaa"] .glass-card { background: #000 !important; border: 2px solid #fff !important; color: #fff !important; }
        [data-theme="wcag-aaa"] .text-gradient { -webkit-text-fill-color: #ffff00 !important; }
        /* Styl pro nové logo v headeru */
        .logo-link {
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .logo-link:hover {
            transform: scale(1.05); /* Jemné zvětšení při najetí */
        }

        .logo-img {
            height: 40px; /* Upravte výšku podle potřeby */
            width: auto;
            display: block;
            /* Pokud má logo tmavé barvy, můžete přidat filtr pro lepší viditelnost */
            filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.2)); 
        }

        /* Responzivní úprava pro mobilní telefony */
        @media (max-width: 480px) {
            .logo-img {
                height: 32px;
            }
        }
        /* --- STYLY PRO BÍLÉ LOGO --- */
        .logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo-img {
            height: 48px; /* Upraveno pro lepší viditelnost */
            width: auto;
            display: block;
            /* Tento filtr udělá logo kompletně bílým */
            filter: brightness(0) invert(1); 
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        .logo-link:hover .logo-img {
            transform: scale(1.05);
        }

        .hero-reveal {
            opacity: 0;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }

        @keyframes fadeUp {
            0% { opacity: 0; transform: translateY(50px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .float-anim { animation: floating 3s ease-in-out infinite; }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        /* ===================================================================== */
        /* ===== „ODBAVENO" EFEKTY PO PROHLÉDNUTÍ KROKU                     ===== */
        /* ===== (drženo jen v paměti stránky → po refreshi zase výchozí)   ===== */
        /* ===================================================================== */

        /* Odznak v rohu ikony (vyskočí po prasknutí efektu) */
        .icon-wrapper .done-badge {
            position: absolute; top: -8px; right: -8px; z-index: 9;
            background: #00c389; color: #04241c;
            font-size: 0.62rem; font-weight: 800; letter-spacing: .02em;
            padding: 4px 9px; border-radius: 999px; white-space: nowrap;
            box-shadow: 0 6px 16px rgba(0,0,0,0.35);
            transform: scale(0); transform-origin: center;
            animation: badgePop 0.5s cubic-bezier(0.2,1.4,0.4,1) 0.55s forwards;
        }
        .process-container.done-cancel .done-badge { background: #ff5a5a; color: #2a0606; }
        .process-container.done .glass-card { border-color: rgba(0,195,137,0.45); }
        .process-container.done-cancel .glass-card { border-color: rgba(255,90,90,0.5); }
        @keyframes badgePop { to { transform: scale(1); } }

        /* 1) Přesýpačky – písek dosype a žárovka se znaveně převalí na bok */
        .process-container.done .hourglass-icon .hourglass {
            animation: hourEmpty 1.15s cubic-bezier(0.5,0,0.3,1) forwards;
        }
        @keyframes hourEmpty {
            0%   { transform: rotate(0); }
            45%  { transform: rotate(180deg); }
            72%  { transform: rotate(180deg); }
            100% { transform: rotate(102deg) translateY(7px); }
        }

        /* 2) Razítko – pořádně klepne, kartička poskočí, vyletí obláček prachu */
        .process-container.done .stamp-icon .stamp { animation: stampSlam 0.6s cubic-bezier(0.3,1.2,0.3,1) forwards; }
        .process-container.done .stamp-icon .stamp-mark {
            color: #00a06a; border-color: #00a06a;
            animation: stampMarkDone 0.6s ease-out 0.2s forwards;
        }
        .process-container.done .stamp-icon .paper-base::after {
            content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
            animation: dustPuff 0.7s ease-out 0.22s;
        }
        .process-container.done .stamp-icon { animation: cardJiggle 0.45s ease-out 0.22s; }
        @keyframes stampSlam { 0%{transform:translateX(-50%) translateY(-12px);} 42%{transform:translateX(-50%) translateY(50px);} 100%{transform:translateX(-50%) translateY(-8px);} }
        @keyframes stampMarkDone { 0%{opacity:0;} 100%{opacity:0.95; transform:translate(-50%,-50%) rotate(-12deg) scale(1.05);} }
        @keyframes dustPuff { 0%{box-shadow:0 0 0 0 rgba(190,190,190,0.6);} 100%{box-shadow:0 0 0 18px rgba(190,190,190,0);} }
        @keyframes cardJiggle { 0%,100%{transform:translateY(0);} 28%{transform:translateY(4px);} 64%{transform:translateY(-2px);} }

        /* 3) Letadýlko – udělá smyčku a odsviští z kartičky pryč, nechá stopu */
        .process-container.done .plane-icon .plane { animation: planeAway 1s ease-in forwards; }
        .process-container.done .plane-icon .paper-base::after {
            content: ""; position: absolute; top: 46%; left: 46%; height: 0;
            border-top: 2px dashed rgba(33,150,243,0.75); pointer-events: none;
            animation: planeTrail 1s ease-in forwards;
        }
        @keyframes planeAway { 0%{transform:translate(0,0) rotate(0); opacity:1;} 30%{transform:translate(-10px,8px) rotate(-12deg);} 100%{transform:translate(78px,-70px) rotate(22deg); opacity:0;} }
        @keyframes planeTrail { 0%{width:0; opacity:0;} 35%{opacity:1;} 100%{width:54px; opacity:0; transform:translate(10px,-26px) rotate(-18deg);} }

        /* 4) Lupa – najde, zakmitá a usadí se (broučka domaluje JS) */
        .process-container.done .search-icon .glass { animation: glassFound 0.95s ease-out forwards; }
        @keyframes glassFound { 0%{transform:translate(-12px,-12px);} 45%{transform:translate(9px,7px) scale(1.12);} 100%{transform:translate(0,0) scale(1);} }

        /* 5) Šipky – roztočí se o 720°, opile se zakývají a sednou */
        .process-container.done .refresh-icon .arrows { animation: spinDizzy 1.2s cubic-bezier(0.3,0.1,0.2,1) forwards; }
        @keyframes spinDizzy { 0%{transform:rotate(0);} 68%{transform:rotate(720deg);} 80%{transform:rotate(702deg);} 90%{transform:rotate(730deg);} 100%{transform:rotate(720deg);} }

        /* 6) Zánik – papír se zmuchlá do kuličky a sám se hodí do koše */
        .process-container.done-cancel .cancel-icon .overlay-svg.cross { opacity: 0; transition: opacity .2s; }
        .process-container.done-cancel .cancel-icon .paper-base { animation: crumpleToss 1.2s ease-in forwards; transform-origin: center; }
        .process-container.done-cancel .cancel-icon::after {
            content: "🗑️"; position: absolute; bottom: 4px; right: 18px; font-size: 1.7rem; opacity: 0;
            animation: binAppear 0.4s ease-out 0.5s forwards; z-index: 1;
        }
        @keyframes crumpleToss {
            0%   { transform: scale(1) rotate(0); border-radius: 6px; }
            28%  { transform: scale(0.52) rotate(22deg); border-radius: 45%; }
            46%  { transform: scale(0.46) translate(0,-12px) rotate(38deg); border-radius: 50%; }
            100% { transform: scale(0.3) translate(58px,40px) rotate(225deg); border-radius: 50%; opacity: 0; }
        }
        @keyframes binAppear { 0%{opacity:0; transform:translateY(6px) scale(0.7);} 100%{opacity:1; transform:translateY(0) scale(1);} }

        /* 7) Pero dopíše „EDC", vyskočí klíč 🔑 a sype se z toho radost (konfety z JS) */
        .process-container.done .pen-icon .edc-path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s ease-in-out; }
        .process-container.done .pen-icon .pen { animation: writing 1s ease-in-out forwards; }
        .process-container.done .pen-icon::after {
            content: "🔑"; position: absolute; top: 4px; left: 16px; font-size: 1.5rem; opacity: 0;
            animation: keyPop 0.6s cubic-bezier(0.2,1.4,0.4,1) 0.9s forwards; z-index: 8;
        }
        @keyframes keyPop { 0%{opacity:0; transform:scale(0) rotate(-30deg);} 100%{opacity:1; transform:scale(1) rotate(0);} }

        /* Brouček u lupy (kroku 4) */
        @keyframes bugRun { 0%{opacity:0; transform:translate(0,0) rotate(0);} 20%{opacity:1;} 100%{opacity:0; transform:translate(48px,32px) rotate(25deg);} }

        /* Ukazatel projitých kroků */
        .progress-chip {
            display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
            padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 0.9rem;
            color: #cfeede; background: rgba(0,195,137,0.12); border: 1px solid rgba(0,195,137,0.35);
            position: relative; overflow: hidden;
        }
        .progress-chip::before {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%);
            background: rgba(0,195,137,0.25); transition: width 0.5s cubic-bezier(0.2,0.8,0.2,1); z-index: 0;
        }
        .progress-chip > * { position: relative; z-index: 1; }
        .progress-chip-label { font-weight: 600; opacity: 0.85; }
        .progress-chip.full { color: #04241c; background: #00c389; border-color: #00c389; box-shadow: 0 0 25px rgba(0,195,137,0.5); }

        /* Konfety + toast */
        .confetti-piece {
            position: fixed; width: 9px; height: 14px; z-index: 3000; border-radius: 2px;
            pointer-events: none; opacity: 0; animation: confettiFly 1.2s ease-out forwards;
        }
        @keyframes confettiFly {
            0%   { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px) + 120px)) rotate(var(--rot,360deg)) scale(0.6); }
        }
        .edc-toast {
            position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
            background: #00c389; color: #04241c; font-weight: 800; padding: 14px 26px; border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.45); z-index: 4000; opacity: 0; max-width: 90%; text-align: center;
            transition: opacity .4s ease, transform .4s ease;
        }
        .edc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* Respekt k „omezit pohyb" – bez animací, jen výsledné stavy + odznak */
        @media (prefers-reduced-motion: reduce) {
            .process-container.done .hourglass,
            .process-container.done .stamp,
            .process-container.done .stamp-icon,
            .process-container.done .plane,
            .process-container.done .arrows,
            .process-container.done-cancel .paper-base,
            .process-container.done .glass { animation: none !important; }
            .icon-wrapper .done-badge { animation: none; transform: scale(1); }
            .process-container.done .pen-icon::after,
            .process-container.done-cancel .cancel-icon::after { animation: none; opacity: 1; }
        }

        /* WCAG – odznak čitelný i v kontrastu */
        [data-theme="wcag-aaa"] .icon-wrapper .done-badge { background: #ffff00 !important; color: #000 !important; }
        [data-theme="wcag-aaa"] .progress-chip { background: #000 !important; border-color: #ffff00 !important; color: #ffff00 !important; }
        [data-theme="wcag-aaa"] .progress-chip.full { background: #ffff00 !important; color: #000 !important; }