:root {
    --neon-1: #6ee7ff; /* cyan */
    --neon-2: #a78bfa; /* violet */
    --neon-3: #22d3ee; /* teal */
    --ink: #0b0f1a;
    --panel: #0f172a80; /* glass */
    --border: #ffffff1a;
    --text: #e5e7eb;
    --muted: #94a3b8;
}


* {
    scroll-behavior: smooth
}

html, body {
    overflow-x: hidden;
}

/* Appbar nad obsahem, ale pod overlayem */
.appbar {
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}

/* Overlay – přes celý viewport, nad vším */
.mobile-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: #0b0f1ae6;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* jistota nad AppBarem i kartami */
    animation: fadeIn .25s ease-out forwards;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    padding: 2rem 3rem;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #0f172ac0, #0b0f1a99);
    box-shadow: 0 0 32px #000a, 0 0 48px #6ee7ff22;
    animation: scaleIn .2s ease-out forwards;
}

    .mobile-menu a {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text);
        text-decoration: none;
        text-shadow: 0 0 12px #6ee7ff55;
    }

@media (max-width: 820px) {
    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex;
        color: var(--text);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scaleIn {
    from {
        transform: scale(.95);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer
}

.brand-text {
    font-weight: 700;
    letter-spacing: .3px
}

.logo-glow {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-block;
    background: radial-gradient(circle at 30% 30%, var(--neon-1), var(--neon-2));
    box-shadow: 0 0 18px 6px color-mix(in oklab, var(--neon-2) 60%, transparent);
    animation: pulse 3.2s ease-in-out infinite;
}

.nav .nav-link {
    margin-inline: .4rem;
    opacity: .9
}

    .nav .nav-link:hover {
        opacity: 1;
        text-shadow: 0 0 12px var(--neon-1)
    }


.main-gradient {
    position: relative;
    min-height: 100dvh;
    background: radial-gradient(1200px 700px at 10% -10%, #0ea5e955, transparent 60%), radial-gradient(900px 500px at 110% 10%, #7c3aed40, transparent 60%), linear-gradient(180deg, #0b1020 0%, #0a0f1a 100%);
    overflow: hidden;
}

@supports (overflow: clip) {
    .main-gradient {
        overflow: clip;
    }
}

.content-wrap {
    position: relative;
    z-index: 2
}


.bg-blob {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px; 
    height: 420px;
    border-radius: 50%;
    filter: blur(40px) saturate(130%);
    background: conic-gradient(from 0deg, var(--neon-1), var(--neon-2), var(--neon-3), var(--neon-1));
    opacity: .25;
    animation: spin-slow 24s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(to right, #ffffff08 1px, transparent 1px), linear-gradient(to bottom, #ffffff08 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
}


/* Footer: bez ořezu a bez sweep shinu */
.footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .75rem 1rem; /* víc místa, ať se nic neřeže */
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, #0b0f1acc, #0b0f1a88);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    overflow: visible; /* důležité: neřež obsah */
    border-radius: 0; /* footer obvykle bez radiusu */
}

    /* zruš shine pro footer, ať přes něj nejezdí pseudo-pruh */
    .footer.glass::before {
        display: none;
    }

    /* Chip (odznak) vzhled */
    .footer .chip {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .28rem .6rem;
        line-height: 1.2; /* brání srážení výšky textu */
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #0f172a66;
        box-shadow: 0 2px 10px #0006, inset 0 0 0 1px #ffffff0d;
        white-space: nowrap;
    }


.badge {
    opacity: .8
}


.glass {
    background: linear-gradient(180deg, var(--panel), transparent);
    border: 1px solid var(--border)
}

.blur {
    backdrop-filter: blur(8px) saturate(130%)
}


@keyframes pulse {
    0%,100% {
        transform: scale(1);
        filter: saturate(120%)
    }

    50% {
        transform: scale(1.1);
        filter: saturate(150%)
    }
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg)
    }
}

@keyframes float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}





.home {
    padding-block: clamp(1rem,2vw,2rem) 6rem
}

.section {
    margin-block: 3.5rem
}

/* HERO */
.hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: min(6vw,4rem);
    align-items: center;
    margin-block: 2rem 4rem
}

.display {
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.05;
    margin: 0
}

.gradient-text {
    background: linear-gradient(90deg, var(--neon-1), var(--neon-2), var(--neon-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px #6ee7ff30)
}

.tagline {
    color: var(--muted);
    margin-top: .6rem
}

.cta {
    display: flex;
    gap: 1rem;
    margin-top: 1.2rem
}

.cta-btn {
    padding: .8rem 1.1rem
}

.hero-right {
    display: flex;
    justify-content: center
}

.orb {
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #1f2937 0%, #0b0f1a 70%);
    box-shadow: inset 0 0 80px #000, 0 0 80px #4fd1c545;
    animation: float 6s ease-in-out infinite;
}

    .orb .shine {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(150px 150px at 35% 30%, #6ee7ff55, transparent 60%)
    }

.ring {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    border: 2px dashed #6ee7ff33;
    animation: spin-slow 18s linear infinite
}

.r1 {
    inset: -14%
}

.r2 {
    inset: -22%;
    animation-duration: 26s
}

.r3 {
    inset: -30%;
    animation-duration: 34s
}

/* CARDS */
.card-xl {
    padding: clamp(1rem, 2vw, 1.6rem)
}

.lift {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
    will-change: transform
}

    .lift:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 36px #0008, 0 0 28px #6ee7ff24
    }

/* SKILLS */
.skills-grid {
    row-gap: 1rem
}

.skill-card {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--border)
}

.skill-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.skill-level {
    font-size: .85rem;
    opacity: .8
}

.neon-bar .mud-progress-linear-bar {
    box-shadow: 0 0 12px #6ee7ff60
}

/* PROJECTS */
.proj-grid {
    row-gap: 1.2rem
}

.project-card {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--border)
}

.project-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .4rem
}

.muted {
    color: var(--muted)
}

/* EFFECTS & ANIMATIONS */
.neon-stroke {
    text-shadow: 0 0 8px #6ee7ff66, 0 0 18px #93c5fd33
}

.hover-neon {
    transition: filter .25s, box-shadow .25s, transform .25s
}

    .hover-neon:hover {
        filter: saturate(130%);
        box-shadow: 0 0 24px #6ee7ff55, inset 0 0 12px #6ee7ff22;
        transform: translateY(-2px)
    }

.hover-glass {
    backdrop-filter: blur(8px)
}

.hover-tilt {
    transform-style: preserve-3d;
    perspective: 800px;
}

    .hover-tilt:hover {
        transform: rotateX(4deg) rotateY(-6deg) translateY(-4px)
    }

.fade-in {
    opacity: 0;
    animation: fadeIn .8s ease forwards
}

.delay-1 {
    animation-delay: .15s
}

.delay-2 {
    animation-delay: .3s
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: none
    }
}

/* LIQUID GLASS */
.glass {
    background: linear-gradient(180deg, #0b122380, #0b122350);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}


/* ACCESSORIES */
.icon-neon {
    filter: drop-shadow(0 0 8px #6ee7ff66)
}

.sec-title {
    margin-bottom: .8rem
}

.cat-title {
    margin: .6rem 0 .4rem;
    opacity: .9
}

.contact .contact-link {
    display: inline-flex;
    padding: .4rem;
    border-radius: 12px;
    border: 1px solid var(--border)
}

/* Mobile */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 2rem
    }
}