@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-regular.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'poppins-medium';
    src: url('../fonts/poppins/poppins-medium.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-semibold.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-bold.ttf') format('truetype');
    font-weight: 700;
}

:root {
    --bg-glass: rgba(255,255,255,.60);
    --bg-fallback: #ffffffcc;
    --border-glass: rgba(255,255,255,.35);
    --text: #0f172a;
    --navlink: rgb(75, 85, 99);
    --navlink-hover: rgb(121, 59, 184);
    --cta-text: #ffffff;
    --ring: rgba(124,58,237,.35);
    --maxw: 1600px;
    --vw-fluid: clamp(1200px, 100vw, 1700px);
    --left-art-width: calc( 550px + ((750 - 550) / (1700 - 768)) * (var(--vw-fluid) - 1200px) );
    --right-art-width: calc( 500px + ((900 - 500) / (1700 - 768)) * (var(--vw-fluid) - 1200px) );
    --left-art-offset-x: calc( -357.5px + ((-412.5 - -357.5) / (1700 - 768)) * (var(--vw-fluid) - 1200px) );
    --right-art-offset-x: calc( 190px + ((225 - 190) / (1700 - 768)) * (var(--vw-fluid) - 1200px) );
    --left-art-shift-y: calc( 10.6vh + ((150 - 100) / (1700 - 768)) * (var(--vw-fluid) - 1200px) );
    --right-art-shift-y: calc( 61.4vh + ((300 - 580) / (1700 - 768)) * (var(--vw-fluid) - 1200px) );
    --grad: linear-gradient(180deg,#9333ea 0%,#6366f1 100%);
}

@media (max-width: 1200px) {
    :root {
        --bg-glass: rgba(255, 255, 255, .60);
        --bg-fallback: #ffffffcc;
        --border-glass: rgba(255, 255, 255, .35);
        --text: #0f172a;
        --navlink: rgb(75, 85, 99);
        --navlink-hover: rgb(121, 59, 184);
        --cta-text: #ffffff;
        --ring: rgba(124, 58, 237, .35);
        --maxw: 1600px;
        --grad: linear-gradient(180deg, #9333ea 0%, #6366f1 100%);
    }
}

@media (max-height: 750px) {
    :root {
        --left-art-shift-y: 17.5%;
        --right-art-shift-y: 100%;
    }
}

html {
    height: 100%;
    font-family: "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background-image: url("../images/O2KOQeXt8cnpy9F6ak1HdvQ3xQI.png"), url("../images/OWRoNcFyJvcLIO5l00ZNFz6BQ.png"), url("../images/uZWiUTD7Jq6ErdcxQHPqhZ7Pbfc.jpg");
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-size: var(--right-art-width) auto,var(--left-art-width) auto,100% auto;
    background-position: calc(100% + var(--right-art-offset-x)) var(--right-art-shift-y), var(--left-art-offset-x) var(--left-art-shift-y), top center;
    background-attachment: scroll,scroll,scroll;
}

    body.has-video-open {
        overflow: hidden;
    }

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    --nav-progress: 0;
    background-color: rgba(255,255,255, calc(.60 * var(--nav-progress)));
    -webkit-backdrop-filter: saturate(calc(100% + 80% * var(--nav-progress))) blur(calc(14px * var(--nav-progress)));
    backdrop-filter: saturate(calc(100% + 80% * var(--nav-progress))) blur(calc(14px * var(--nav-progress)));
    border-bottom: 1px solid rgba(255,255,255, calc(.35 * var(--nav-progress)));
    transition: background-color 160ms ease, backdrop-filter 160ms ease, -webkit-backdrop-filter 160ms ease, border-color 160ms ease;
}

@supports not ((-webkit-backdrop-filter:none) or (backdrop-filter:none)) {
    .navbar {
        background-color: rgba(255,255,255, calc(.60 * var(--nav-progress)));
        border-bottom: 1px solid rgba(255,255,255, calc(.35 * var(--nav-progress)));
    }
}

[id] {
    scroll-margin-top: 72px;
}

.page-bottom-bg {
    width: 100%;
    aspect-ratio: 2400/700;
    background: url("../images/M7dwsYZHhXgBdOvQip5ABdEU.jpg") no-repeat center bottom/100% auto;
    margin-top: clamp(40px,8vw,120px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.nav-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 10px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    letter-spacing: .1px;
}

    .brand img {
        height: 28px;
        width: auto;
        display: block;
    }

.nav-links {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 17.5px;
}

    .nav-links a {
        text-decoration: none;
        font-size: 14px;
        color: var(--navlink);
        transition: color .15s ease,opacity .15s ease;
        white-space: nowrap;
    }

        .nav-links a:hover, .nav-links a:focus {
            color: var(--navlink-hover);
        }

.cta {
    justify-self: end;
    padding: 10px 16px;
    font-size: 12.25px;
    font-weight: 500;
    line-height: 17.5px;
}

@media (max-width: 425px) {
    .cta .btn-label {
        display: none;
    }
}

.btn {
    color: var(--cta-text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 9999px;
    text-decoration: none;
    background: var(--grad);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .btn > * {
        position: relative;
        z-index: 1;
    }

    .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 0;
        background: linear-gradient(0deg,rgb(70,72,171) 0%,rgb(92,29,150) 100%);
        opacity: 0;
        transition: opacity .35s ease;
    }

    .btn:hover::before, .btn:focus-visible::before {
        opacity: 1;
    }

.menu-btn {
    display: none;
    justify-self: end;
    background: transparent;
    border: 0;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

    .menu-btn:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

.mobile-panel {
    position: fixed;
    inset-inline: 0;
    top: 59px;
    display: none;
    background: rgba(255,255,255,.60);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.35);
    z-index: 9999;
    visibility: hidden;
}

    .mobile-panel.open {
        display: block
    }

.mobile-list {
    list-style: none;
    margin: 0;
    padding: 14px 20px;
    display: grid;
    gap: 12px;
}

    .mobile-list a {
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
        font-weight: 300;
        padding: 10px 4px;
    }

@media (max-width:1000px) {
    .nav-wrap {
        grid-template-columns: 1fr auto auto
    }

    .nav-links {
        display: none
    }

    .menu-btn {
        display: inline-flex
    }

    .mobile-panel {
        visibility: visible;
    }
}

.icon-cart {
    width: 19px;
    height: 19px;
    display: inline-block;
    flex-shrink: 0;
    image-rendering: pixelated;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' overflow='visible'%3E%3Cg%3E%3Cpath d='M 8.329 7.141 L 9.516 7.141 L 9.516 4.766 L 11.891 4.766 L 11.891 3.578 L 9.516 3.578 L 9.516 1.203 L 8.329 1.203 L 8.329 3.578 L 5.954 3.578 L 5.954 4.766 L 8.329 4.766 Z' fill='white'/%3E%3Cpath d='M 14.25 14.25 C 12.941 14.25 11.875 15.315 11.875 16.625 C 11.875 17.935 12.941 19 14.25 19 C 15.56 19 16.626 17.935 16.626 16.625 C 16.626 15.315 15.56 14.25 14.25 14.25 Z M 14.25 17.813 C 13.596 17.813 13.063 17.279 13.063 16.625 C 13.063 15.971 13.596 15.438 14.25 15.438 C 14.905 15.438 15.438 15.971 15.438 16.625 C 15.438 17.279 14.905 17.813 14.25 17.813 Z' fill='white'/%3E%3Cpath d='M 7.125 14.25 C 5.815 14.25 4.75 15.315 4.75 16.625 C 4.75 17.935 5.815 19 7.125 19 C 8.435 19 9.5 17.935 9.5 16.625 C 9.5 15.315 8.435 14.25 7.125 14.25 Z M 7.125 17.813 C 6.471 17.813 5.938 17.279 5.938 16.625 C 5.938 15.971 6.471 15.438 7.125 15.438 C 7.78 15.438 8.313 15.971 8.313 16.625 C 8.313 17.279 7.78 17.813 7.125 17.813 Z' fill='white'/%3E%3Cpath d='M 18.893 3.814 C 18.781 3.656 18.6 3.562 18.407 3.563 L 13.063 3.563 L 13.063 4.75 L 17.564 4.75 L 15.019 11.875 L 5.262 11.875 L 3.557 0.506 C 3.513 0.215 3.263 0 2.969 0 L 0 0 L 0 1.188 L 2.458 1.188 L 4.162 12.557 C 4.206 12.848 4.456 13.063 4.75 13.063 L 15.438 13.063 C 15.689 13.062 15.912 12.904 15.996 12.668 L 18.965 4.356 C 19.03 4.174 19.003 3.972 18.893 3.814 Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==== HERO ==== */
.hero {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: auto;
    min-height: 100vh;
}

.hero-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(30px,6.8vw,63px);
    color: #0b0b0b;
}

.hero-subtitle {
    margin: 8px 0 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(45px,6vw,63px);
    background-image: linear-gradient(270deg,rgb(99,102,241) 17%,rgb(168,85,247) 84%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.hero-desc {
    max-width: 820px;
    font-weight: 100;
    margin: 18px auto 28px;
    color: rgb(75,85,99);
    font-size: clamp(15px,1.7vw,17.5px);
    line-height: 24.5px;
}

.btn-hero {
    justify-content: center;
    padding: 14px 28px;
    font-weight: 500;
    font-size: 15.75px;
    line-height: 18.5px;
}

.hero-inner {
    width: 100%;
    max-width: 750px;
    padding: 44px 18px 22px;
}

@media (max-width: 1200px) {
    .hero {
        padding: 16px;
    }

    .hero-inner {
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 18px 45px -18px rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(2px) saturate(150%);
    }

    .hero-desc {
        margin-bottom: 22px;
    }
}

.desc {
    padding: 0 5px;
}

/* ==== WHAT ==== */
.section-what {
    max-width: 950px;
    margin: 0 auto;
    padding: 0 20px clamp(28px, 6vw, 72px);
    text-align: center;
}

    .section-what .title {
        margin: 0;
        font-weight: 700;
        font-size: clamp(21px,3.2vw,31.5px);
        line-height: 1.15;
        color: var(--text);
    }

    .section-what .desc {
        max-width: 860px;
        font-weight: 100;
        margin: 10px auto 22px;
        color: rgb(75,85,99);
        font-size: clamp(9px,1.6vw,15.75px);
        line-height: 1.6;
    }

.features {
    display: grid;
    min-height: 100px;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px 30px;
    margin: 40px auto 60px;
}

@media (max-width:900px) {
    .features {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .feature-card {
        width: 100%;
        justify-self: center
    }
}

.feature-card {
    max-width: 600px;
    position: relative;
    border-radius: 14px;
    background: linear-gradient(135deg,#fef08a 0%,#d8b4fe 50%,#a5b4fc 100%);
    box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    min-height: 95px;
}

.feature-inner-card {
    position: absolute;
    inset: 4px;
    border-radius: 11px;
    background-color: #fff;
    display: flex;
}

.fi {
    display: flex;
    align-items: center;
    text-align: left;
}

.fi-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    margin: 25px;
    background: linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#fde68a,#d8b4fe,#a5b4fc) border-box;
}

    .fi-icon img {
        width: 100%;
    }

.fi-icon-img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    flex-shrink: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.fi-icon-storage {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 47.654 22.897' overflow='visible'><g><g><defs><linearGradient id='g1' x1='0' x2='1' y1='0.26634146342270815' y2='0.7336585365772919'><stop offset='0' stop-color='rgb(36,114,199)' stop-opacity='1'></stop><stop offset='1' stop-color='rgb(195,145,236)' stop-opacity='1'></stop></linearGradient></defs><path d='M 42.576 22.897 L 5.088 22.897 C 2.278 22.897 0 20.915 0 18.493 L 0 4.414 C 0 1.982 2.289 0 5.088 0 L 42.566 0 C 45.375 0 47.654 1.982 47.654 4.414 L 47.654 18.493 C 47.654 20.925 45.365 22.897 42.566 22.897 Z M 5.088 2.36 C 3.75 2.36 2.667 3.28 2.667 4.414 L 2.667 18.493 C 2.667 19.628 3.75 20.547 5.088 20.547 L 42.566 20.547 C 43.904 20.547 44.987 19.628 44.987 18.493 L 44.987 4.414 C 44.987 3.28 43.904 2.36 42.566 2.36 Z' fill='url(%23g1)'></path></g><g><defs><linearGradient id='g2' x1='0' x2='1' y1='0.26634146342270815' y2='0.7336585365772919'><stop offset='0' stop-color='rgb(36,114,199)' stop-opacity='1'></stop><stop offset='1' stop-color='rgb(195,145,236)' stop-opacity='1'></stop></linearGradient></defs><path d='M 30.731 9.116 C 30.731 10.556 29.556 11.731 28.116 11.731 C 26.675 11.731 25.5 10.556 25.5 9.116 C 25.5 7.675 26.675 6.5 28.116 6.5 C 29.556 6.5 30.731 7.675 30.731 9.116 Z' fill='url(%23g2)'></path></g><g><defs><linearGradient id='g3' x1='0' x2='1' y1='0.2662942653313456' y2='0.7337057346686544'><stop offset='0' stop-color='rgb(36,114,199)' stop-opacity='1'></stop><stop offset='1' stop-color='rgb(195,145,236)' stop-opacity='1'></stop></linearGradient></defs><path d='M 40.731 9.116 C 40.731 10.556 39.556 11.731 38.116 11.731 C 36.675 11.731 35.5 10.556 35.5 9.116 C 35.5 7.675 36.675 6.5 38.116 6.5 C 39.556 6.5 40.731 7.675 40.731 9.116 Z' fill='url(%23g3)'></path></g></g></svg>");
}

.fi-title {
    margin: 0;
    font-weight: 700;
    font-size: 15.75px;
    color: rgb(31,41,55);
}

.fi-sub {
    margin: 0;
    font-weight: 100;
    font-size: 11px;
    line-height: 17.5px;
    color: rgb(75,85,99);
}

.fi-minisub {
    margin: 0;
    font-weight: 100;
    font-size: 9px;
    line-height: 14px;
    color: rgb(107,114,128);
}

.overview-visual {
    margin: 8px auto 0;
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(15,23,42,.25),0 6px 18px -8px rgba(15,23,42,.15);
    position: relative;
}

    .overview-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

@media (max-width:900px) {
    .overview-visual {
        border-radius: 28px;
    }
}

/* ==== WHY ==== */
.section-why {
    background: #f6f8fb;
    padding: clamp(24px,4vw,48px) 0;
    margin-top: clamp(24px,6vw,36px);
}

.why-wrap {
    margin: 0 auto;
    text-align: center;
}

.section-why .title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(21px,3.2vw,34px);
    line-height: 1.15;
    color: var(--text);
}

.section-why .desc {
    max-width: 860px;
    margin: 10px auto 28px;
    color: rgb(75,85,99);
    font-weight: 100;
    font-size: clamp(9px,1.6vw,15.75px);
    line-height: 1.6;
}

/* === Full-width WHY carousel === */
.why-carousel {
    width: 100%;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 18px;
    overflow: visible;
}

    .why-carousel .wc-scroller {
        position: relative;
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: max(20px,calc((100vw - 1200px)/2));
        padding-right: max(20px,calc((100vw - 1200px)/2));
    }

        .why-carousel .wc-scroller.dragging {
            scroll-snap-type: none;
            cursor: grabbing;
        }

        .why-carousel .wc-scroller::-webkit-scrollbar {
            display: none
        }

    .why-carousel .wc-scroller {
        scrollbar-width: none
    }

    .why-carousel .wc-viewport {
        margin: 0 5vw;
        display: flex;
        gap: 16px;
        overflow: visible;
    }

    .why-carousel .wc-slide {
        flex: 0 0 calc((100% - 32px));
        max-width: 950px;
        min-width: calc((100% - 32px)/3);
        scroll-snap-align: center;
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden;
        user-select: none;
        transform: scale(.9);
        opacity: .55;
        transition: transform 300ms ease,opacity 300ms ease,filter 300ms ease,box-shadow 300ms ease;
        will-change: transform;
    }

.wc-media {
    position: absolute;
    inset: 0;
    background-color: #020617; /* fallback, pokud se nenačte obrázek */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
}

.wc-play {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: var(--grad);
    box-shadow: 0 14px 32px rgba(15,23,42,.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.why-carousel .wc-slide.is-active .wc-play {
    opacity: 1;
    pointer-events: auto;
}

.wc-play:hover {
    transform: translateY(-1px) scale(1.07);
    box-shadow: 0 18px 40px rgba(15,23,42,.9);
    filter: brightness(1.05);
}

.wc-play:active {
    transform: translateY(1px) scale(.95);
    box-shadow: 0 10px 24px rgba(15,23,42,.8);
}

.wc-play:focus-visible {
    outline: 2px solid #a855f7;
    outline-offset: 3px;
}

.wc-play svg {
    width: 45px;
    fill: white;
}

/* Caption stripe */
.wc-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    transform: translateY(110%);
    opacity: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    pointer-events: none;
    transition: transform 360ms cubic-bezier(.22,.9,.24,1), opacity 260ms ease;
}

@media (max-width: 768px) {
    .why-carousel .wc-slide {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        height: auto;
        overflow: visible;
    }

    .wc-media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .wc-caption {
        position: static;
        transform: none !important;
        opacity: 1;
        pointer-events: auto;
        display: none;
    }

    .why-carousel .wc-slide.is-active .wc-caption {
        display: block;
    }
}

@media(max-width: 900px) {
    .wc-caption {
        padding: 17.5px;
    }
}

.why-carousel .wc-slide.is-active .wc-caption {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    text-align: left;
}

.wc-cap-title {
    margin: 0 0 6px 0;
    font-weight: 800;
    font-size: clamp(12px,1.8vw,22px);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.wc-cap-desc {
    margin: 0;
    font-weight: 300;
    color: #334155;
    font-size: clamp(10px,1.4vw,15px);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.why-carousel .wc-slide.is-active {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
}

.why-carousel .wc-slide.is-adjacent {
    transform: scale(.8);
    opacity: .55;
    filter: brightness(.95);
}

/* Arrows */
.why-carousel .wc-arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: grid;
    place-items: center;
    backdrop-filter: blur(4px);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(99,102,241,.35);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

    .why-carousel .wc-arrow:hover {
        transform: scale(1.06);
        filter: saturate(1.15);
        box-shadow: 0 10px 22px rgba(99,102,241,.45);
    }

    .why-carousel .wc-arrow:active {
        transform: scale(.98)
    }

    .why-carousel .wc-arrow svg {
        width: 22px;
        height: 22px
    }

    .why-carousel .wc-arrow.left {
        left: max(8px,calc((100vw - 1200px)/2 + 40px))
    }

    .why-carousel .wc-arrow.right {
        right: max(8px,calc((100vw - 1200px)/2 + 40px))
    }

.why-carousel .wc-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.why-carousel .wc-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #475569;
    opacity: .6;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width 160ms ease,transform 160ms ease,opacity 160ms ease,background 160ms ease;
}

    .why-carousel .wc-dot:hover {
        opacity: .85;
        transform: scale(1.05)
    }

    .why-carousel .wc-dot[aria-current="true"] {
        background: var(--grad);
        opacity: 1;
        width: 28px;
        transform: none;
        box-shadow: 0 1px 6px rgba(124,58,237,.35);
    }

/* ==== VIDEO OVERLAY ==== */
.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
}

    .video-overlay.is-active {
        pointer-events: auto;
        opacity: 1;
    }

.video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.78);
    opacity: 0;
    transition: opacity 260ms ease;
}

.video-overlay.is-active .video-backdrop {
    opacity: 1;
}

.video-player-shell {
    position: relative;
    width: 100%;
    max-width: min(1600px, 92vw);
    padding: clamp(16px,3vw,28px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-player-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(15,23,42,.9);
    transform: scale(.7);
    opacity: 0;
    transition: transform 260ms cubic-bezier(.22,.9,.24,1), opacity 260ms ease;
}

.video-overlay.is-active .video-player-frame {
    transform: scale(1);
    opacity: 1;
}

.video-player-frame video {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 768px) {
    .video-player-shell {
        max-width: 100vw;
        padding: 0;
    }

    .video-player-frame {
        width: 100vw;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        box-shadow: none;
    }

        .video-player-frame video {
            width: 100%;
            height: 100%;
            display: block;
        }
}

.video-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(225,225,225,.9);
    color: #e5e7eb;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

    .video-close:hover {
        background: rgba(225,225,225,1);
        transform: scale(1.06);
    }

    .video-close:active {
        transform: scale(.94);
    }

    .video-close:focus-visible {
        outline: 2px solid #a855f7;
        outline-offset: 2px;
    }

    .video-close svg {
        width: 18px;
        height: 18px;
    }

/* ==== APPS ==== */
.section-apps {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(40px,6vw,88px) 20px;
    text-align: center;
}

    .section-apps .title {
        margin: 0;
        font-weight: 700;
        font-size: clamp(21px,3.4vw,31.5px);
        line-height: 35px;
        color: var(--text);
    }

    .section-apps .desc {
        max-width: 880px;
        margin: 10px auto 28px;
        color: rgb(75,85,99);
        font-weight: 100;
        font-size: clamp(9px,1.6vw,15.75px);
        line-height: 1.6;
    }

.app-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22.5px;
    margin-top: 22.5px;
}

@media (max-width:1300px) {
    .section-apps {
        max-width: 784px
    }

    .app-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width:620px) {
    .app-grid {
        grid-template-columns: 1fr
    }
}

.app-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    min-width: 250px;
    border: 1px solid #e5e7ebcc;
    display: flex;
    flex-direction: column;
    text-align: left;
    transform: translateY(0);
    will-change: transform;
    transition: transform .55s cubic-bezier(.34,1.56,.64,1);
}

    .app-card:hover {
        transform: translateY(-10px);
        transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease-out;
    }

.app-media,
.app-media.m2,
.app-media.m3,
.app-media.m4 {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

    .app-media img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.app-body {
    padding: 18px 20px 20px;
}

.app-h {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 17.5px;
    line-height: 24.5px;
    color: rgb(31,41,55);
}

/* nový styl pro odrážky v kartách SW */
.app-list {
    list-style: disc;
    margin: 0;
    padding-left: 20px;
    font-weight: 100;
    font-size: 12.25px;
    line-height: 1.55;
    color: rgb(75,85,99);
}

    .app-list li + li {
        margin-top: 4px;
    }

.app-link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .app-card .app-link-name {
        display: inline-block;
        background-image: linear-gradient( 45deg, rgb(75, 85, 99) 15%, rgb(75, 85, 99) 25%, #9333ea 40%, #6366f1 50%, #9333ea 65%, rgb(75, 85, 99) 75%, rgb(75, 85, 99) 100% );
        background-size: 300% 100%;
        background-position: 125% 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: rgb(75,85,99);
        transition: background-position 0s;
    }

    .app-card:hover .app-link-name {
        transition: background-position .75s ease, color .25s ease;
        background-position: -25% 0;
    }
}

.app-link .app-link-name {
    font-weight: 700;
    color: rgb(75,85,99);
}

    .app-link:hover .app-link-name,
    .app-link .app-link-name:focus {
        background-image: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: currentColor;
        color: #6366f1;
    }

@media (max-width: 900px) {
    .why-carousel .wc-slide {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        height: auto;
        overflow: visible;
    }

    .wc-media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .wc-caption {
        position: static;
        transform: none !important;
        opacity: 1;
        pointer-events: auto;
        padding: 17.5px;
        display: block;
        visibility: hidden;
    }

    .why-carousel .wc-slide.is-active .wc-caption {
        visibility: visible;
    }
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 9999;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.cookie-banner__inner {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(10,10,10,.25);
    color: #fff;
    backdrop-filter: blur(10px);
}

    .cookie-banner__inner p {
        margin: 0;
        font-size: 14px;
        line-height: 1.35;
        max-width: 900px;
    }

.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}