@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

        :root{
            --bg:#0f172a;
            --bg2:#111c3a;
            --text:#ffffff;
            --muted:#94a3b8;
            --pink:#ec4899;
            --violet:#8b5cf6;
            --blue:#3b82f6;
            --cyan:#22d3ee;
        }

        *{
            box-sizing:border-box;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background:
                radial-gradient(circle at 20% 20%, rgba(139,92,246,.10), transparent 22%),
                radial-gradient(circle at 80% 30%, rgba(236,72,153,.10), transparent 24%),
                radial-gradient(circle at 70% 80%, rgba(34,211,238,.08), transparent 18%),
                #0f172a;
            color: white;
            overflow-x: hidden;
        }

        /* Animované pozadí */
        .blob {
            position: absolute;
            width: 500px;
            height: 500px;
            background: linear-gradient(180deg, rgba(139, 92, 246, 0.35) 0%, rgba(236, 72, 153, 0.35) 100%);
            filter: blur(80px);
            border-radius: 50%;
            z-index: -1;
            animation: moveBlob 16s infinite alternate ease-in-out;
        }

        .blob-2 {
            animation-duration: 22s;
        }

        @keyframes moveBlob {
            from { transform: translate(-8%, -8%) scale(1); }
            to { transform: translate(18%, 16%) scale(1.12); }
        }

        /* Jemná síť */
        body::before{
            content:"";
            position:fixed;
            inset:0;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size:48px 48px;
            pointer-events:none;
            z-index:-2;
            animation:gridMove 18s linear infinite;
        }

        @keyframes gridMove{
            from{background-position:0 0}
            to{background-position:48px 48px}
        }

        /* Glass */
        .glass {
            background: rgba(255, 255, 255, 0.035);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.35s ease;
            box-shadow: 0 10px 40px rgba(0,0,0,.18);
        }

        .glass:hover {
            background: rgba(255, 255, 255, 0.055);
            transform: translateY(-6px);
            border-color: rgba(236, 72, 153, 0.35);
            box-shadow: 0 18px 50px rgba(236, 72, 153, 0.08);
        }

        /* Marquee */
        .marquee-wrap{
        overflow: hidden;
        white-space: nowrap;
    }

    .marquee {
        display: flex;
        width: max-content;
        animation: marquee 20s linear infinite;
        align-items: center;
    }

    .marquee-item {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin: 0 2.5rem;
        line-height: 1;
    }

    .marquee-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 2.5rem;
        line-height: 1;
        transform: translateY(-1px);
    }

    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

        /* Hero text */
        .hero-title{
            animation: fadeUp 1s ease both;
        }

        .hero-text{
            animation: fadeUp 1s ease .2s both;
        }

        .hero-btn{
            animation: fadeUp 1s ease .35s both;
        }

        @keyframes fadeUp{
            from{
                opacity:0;
                transform:translateY(28px);
            }
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        .gradient-text{
            background: linear-gradient(90deg, #ffffff 0%, #f9a8d4 35%, #c4b5fd 65%, #67e8f9 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 7s linear infinite;
        }

        @keyframes gradientShift{
            0%{background-position:0 50%}
            100%{background-position:200% 50%}
        }

        .floaty{
            animation: floaty 5s ease-in-out infinite;
        }

        @keyframes floaty{
            0%,100%{transform:translateY(0)}
            50%{transform:translateY(-8px)}
        }

        /* Typing */
        .typing-line{
            min-height:40px;
        }

        .typing-word::after{
            content:"";
            display:inline-block;
            width:2px;
            height:1em;
            background:currentColor;
            margin-left:6px;
            vertical-align:-2px;
            animation: blink 1s steps(1) infinite;
        }

        @keyframes blink{
            0%,49%{opacity:1}
            50%,100%{opacity:0}
        }

        /* Hover link */
        .menu-link{
            position:relative;
        }

        .menu-link::after{
            content:"";
            position:absolute;
            left:0;
            bottom:-6px;
            width:0;
            height:2px;
            border-radius:999px;
            background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));
            transition:.3s ease;
        }

        .menu-link:hover::after{
            width:100%;
        }

        /* Section reveal */
        .reveal{
            opacity:0;
            transform:translateY(35px);
            transition:opacity .8s ease, transform .8s ease;
        }

        .reveal.is-visible{
            opacity:1;
            transform:translateY(0);
        }

        /* Scroll top */
        #scrollTop {
            display: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-10px);}
            60% {transform: translateY(-5px);}
        }

        /* Skill bars */
        .skill-bar{
            width:100%;
            height:12px;
            background:rgba(255,255,255,.08);
            border-radius:999px;
            overflow:hidden;
        }

        .skill-bar > span{
            display:block;
            height:100%;
            width:0;
            border-radius:999px;
            background:linear-gradient(90deg, var(--pink), var(--violet), var(--blue), var(--cyan));
            background-size:200% auto;
            animation: fillBar 1.5s ease forwards, gradientShift 6s linear infinite;
        }

        @keyframes fillBar{
            from{width:0}
        }

        /* Tool pills */
        .tool-pill{
            position:relative;
            overflow:hidden;
            transition:.3s ease;
            animation: floatMini 6s ease-in-out infinite;
        }

        .tool-pill:nth-child(2n){animation-delay:-1s}
        .tool-pill:nth-child(3n){animation-delay:-2s}
        .tool-pill:nth-child(4n){animation-delay:-3s}

        .tool-pill:hover{
            transform:translateY(-5px) scale(1.03);
            border-color:rgba(236,72,153,.35);
        }

        .tool-pill::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(135deg, rgba(236,72,153,.14), rgba(139,92,246,.12), rgba(34,211,238,.08));
            opacity:0;
            transition:.3s ease;
        }

        .tool-pill:hover::before{
            opacity:1;
        }

        .tool-pill span{
            position:relative;
            z-index:1;
        }

        @keyframes floatMini{
            0%,100%{transform:translateY(0)}
            50%{transform:translateY(-4px)}
        }

        /* Rotating ring */
        .ring{
            position:absolute;
            right:20px;
            top:20px;
            width:90px;
            height:90px;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.08);
            animation:spin 14s linear infinite;
        }

        .ring::before,
        .ring::after{
            content:"";
            position:absolute;
            inset:10px;
            border:1px solid rgba(255,255,255,.06);
            border-radius:50%;
        }

        .ring::after{
            inset:20px;
        }

        @keyframes spin{
            from{transform:rotate(0)}
            to{transform:rotate(360deg)}
        }

        /* Tilt cards on mouse */
        .tilt-card{
            transform-style:preserve-3d;
            will-change:transform;
        }

        @media (max-width:768px){
            .ring{
                display:none;
            }
        }
        .tips-card{
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.tips-card:hover{
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.brochure-box{
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.025)),
        linear-gradient(90deg, rgba(236,72,153,.05), rgba(59,130,246,.04), rgba(34,211,238,.04));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
}

.brochure-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.035) 35%, transparent 60%);
    transform:translateX(-120%);
    animation: brochureShine 8s linear infinite;
    pointer-events:none;
}

@keyframes brochureShine{
    0%{transform:translateX(-120%)}
    55%,100%{transform:translateX(120%)}
}

.brochure-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.75rem 1rem;
    border-radius:9999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.18em;
}

.brochure-glow{
    pointer-events:none;
    position:absolute;
    width:12rem;
    height:12rem;
    border-radius:9999px;
    opacity:.35;
}

.brochure-glow-right{
    right:-4rem;
    top:-4rem;
    background: radial-gradient(circle, rgba(236,72,153,.22) 0%, rgba(236,72,153,0) 70%);
}

.brochure-glow-left{
    left:-4rem;
    bottom:-4rem;
    background: radial-gradient(circle, rgba(139,92,246,.22) 0%, rgba(139,92,246,0) 70%);
}
.logo-spin{
    transition: transform .4s ease;
}

.logo-spin:hover{
    transform: rotate(-6deg) scale(1.05);
}
@media (max-width: 640px){

    .logo-spin{
        height:32px;
    }

}