/* ============================================================
   DZEMAN UNIVERSAL DESIGN SYSTEM
   Grav 2 + Quark 2 child theme
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   Na dalších webech měníš hlavně TUTO ČÁST.
   ============================================================ */

:root {
    --dz-primary: #1456a0;
    --dz-primary-light: #1684e8;
    --dz-primary-dark: #0b3266;

    --dz-accent: #1684e8;

    --dz-text: #172033;
    --dz-text-soft: #647084;

    --dz-bg: #ffffff;
    --dz-bg-soft: #f5f8fc;
    --dz-surface: #ffffff;

    --dz-border: rgba(23, 32, 51, 0.10);

    --dz-shadow-sm:
        0 10px 30px rgba(13, 49, 94, 0.07);

    --dz-shadow-md:
        0 22px 65px rgba(13, 49, 94, 0.13);

    --dz-radius-sm: 14px;
    --dz-radius-md: 24px;
    --dz-radius-lg: 34px;

    --dz-container: 1180px;

    --dz-section-space:
        clamp(72px, 9vw, 125px);

    --dz-header-height: 82px;
}


/* ============================================================
   2. ZÁKLAD
   ============================================================ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--dz-header-height) + 20px);
}

body.dz-site {
    margin: 0;
    color: var(--dz-text);
    background: var(--dz-bg);
    overflow-x: hidden;
}

body.dz-site *,
body.dz-site *::before,
body.dz-site *::after {
    box-sizing: border-box;
}

body.dz-site img {
    max-width: 100%;
    height: auto;
}

body.dz-site h1,
body.dz-site h2,
body.dz-site h3 {
    color: var(--dz-text);
}

body.dz-site h1 {
    letter-spacing: -0.045em;
    line-height: 1.02;
}

body.dz-site h2 {
    letter-spacing: -0.035em;
    line-height: 1.08;
}

body.dz-site h3 {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

body.dz-site p {
    color: var(--dz-text-soft);
}


/* širší jednotný container */

body.dz-site .container {
    width: min(
        calc(100% - 48px),
        var(--dz-container)
    );

    max-width: var(--dz-container);
    margin-inline: auto;
}


/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */

.dz-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;

    z-index: 99999;

    padding: 10px 16px;

    border-radius: 999px;

    background: var(--dz-primary-dark);
    color: white !important;

    font-weight: 700;
    text-decoration: none;

    transform: translateY(-180%);

    transition: transform .2s ease;
}

.dz-skip-link:focus {
    transform: translateY(0);
}


/* ============================================================
   4. HEADER
   ============================================================ */

#header.dz-header {
    position: sticky;
    top: 0;

    z-index: 1500;

    min-height: var(--dz-header-height);

    padding: 0 !important;

    border-bottom: 1px solid var(--dz-border);

    background:
        rgba(255, 255, 255, 0.90);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dz-header__container {
    min-height: var(--dz-header-height);
}

.dz-navbar {
    min-height: var(--dz-header-height);

    display: flex;
    align-items: center;

    gap: 28px;
}

.dz-navbar__brand {
    flex: 0 0 auto;
}

.dz-navbar__menu {
    margin-left: auto;
}

.dz-navbar__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}


/* ============================================================
   5. LOGO
   ============================================================ */

.dz-navbar__brand .navbar-brand {
    display: flex;
    align-items: center;

    margin: 0;

    text-decoration: none;
}

.dz-navbar__brand .navbar-brand img {
    display: block;

    width: auto;
    height: 54px;

    object-fit: contain;
}

.dz-navbar__brand .navbar-brand svg {
    width: auto;
    height: 42px;
}


/* ============================================================
   6. NAVIGACE
   ============================================================ */

.dz-navbar__menu ul {
    display: flex;
    align-items: center;

    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.dz-navbar__menu li {
    margin: 0;
}

.dz-navbar__menu a {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    padding: 8px 13px;

    border-radius: 999px;

    color: var(--dz-text);

    font-size: .95rem;
    font-weight: 650;

    text-decoration: none;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.dz-navbar__menu a:hover,
.dz-navbar__menu li.active > a,
.dz-navbar__menu li.selected > a {
    color: var(--dz-primary);

    background:
        rgba(20, 86, 160, .08);
}


/* ============================================================
   7. UNIVERZÁLNÍ TLAČÍTKA
   ============================================================ */

.dz-button,
a.dz-button,
.dz-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 13px 23px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-weight: 750;
    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.dz-button--primary,
.dz-header-cta {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );

    box-shadow:
        0 11px 30px rgba(20, 86, 160, .22);
}

.dz-button--primary:hover,
.dz-header-cta:hover {
    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(20, 86, 160, .29);
}

.dz-button--secondary {
    color: var(--dz-primary) !important;

    border-color:
        rgba(20, 86, 160, .22);

    background: transparent;
}

.dz-button--secondary:hover {
    background:
        rgba(20, 86, 160, .07);

    transform: translateY(-2px);
}


/* ============================================================
   8. HERO
   ============================================================ */

.dz-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(70px, 9vw, 125px)
        0
        clamp(80px, 10vw, 135px);

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(22, 132, 232, .11),
            transparent 28rem
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(20, 86, 160, .07),
            transparent 27rem
        ),
        var(--dz-bg);
}

.dz-hero::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 420px;
    height: 420px;

    right: -220px;
    top: -190px;

    border:
        1px solid rgba(20, 86, 160, .09);

    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(20, 86, 160, .025),
        0 0 0 140px rgba(20, 86, 160, .018);

    pointer-events: none;
}

.dz-hero__container {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, .95fr);

    align-items: center;

    gap: clamp(45px, 8vw, 100px);
}

.dz-hero__content {
    max-width: 690px;
}

.dz-eyebrow {
    margin: 0 0 18px !important;

    color: var(--dz-primary) !important;

    font-size: .81rem;
    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.dz-hero__title {
    max-width: 12ch;

    margin:
        0
        0
        26px;

    font-size:
        clamp(3rem, 5.5vw, 5.3rem);

    text-wrap: balance;
}

.dz-hero__text {
    max-width: 650px;

    margin-bottom: 32px;

    font-size:
        clamp(1.05rem, 1.5vw, 1.23rem);

    line-height: 1.7;
}

.dz-hero__text p {
    margin-bottom: 14px;
}

.dz-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;
}


/* ============================================================
   HERO FOTOGRAFIE
   ============================================================ */

.dz-hero__visual {
    position: relative;
}

.dz-hero__photo-wrap {
    position: relative;

    overflow: hidden;

    min-height: 560px;

    border-radius:
        var(--dz-radius-lg);

    background:
        var(--dz-bg-soft);

    box-shadow:
        var(--dz-shadow-md);
}

.dz-hero__photo-wrap::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    border:
        1px solid rgba(255,255,255,.4);

    border-radius: inherit;

    pointer-events: none;
}

.dz-hero__photo {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 560px;

    object-fit: cover;

    object-position: center center;
}


/* ============================================================
   9. OBECNÉ SEKCE
   ============================================================ */

.dz-section {
    padding:
        var(--dz-section-space)
        0;
}

.dz-section:nth-of-type(even) {
    background: var(--dz-bg-soft);
}

.dz-section-heading {
    max-width: 760px;

    margin-bottom:
        clamp(42px, 6vw, 68px);
}

.dz-section-heading h2,
.dz-benefits__intro h2 {
    margin-bottom: 20px;

    font-size:
        clamp(2.25rem, 4vw, 3.65rem);

    text-wrap: balance;
}

.dz-section-heading__text,
.dz-benefits__lead {
    max-width: 690px;

    font-size: 1.08rem;

    line-height: 1.75;
}


/* ============================================================
   10. SLUŽBY
   ============================================================ */

.dz-services__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.dz-service-card {
    position: relative;

    min-height: 310px;

    padding: 31px;

    border:
        1px solid var(--dz-border);

    border-radius:
        var(--dz-radius-md);

    background:
        var(--dz-surface);

    box-shadow:
        var(--dz-shadow-sm);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.dz-service-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(20, 86, 160, .18);

    box-shadow:
        var(--dz-shadow-md);
}

.dz-service-card__number {
    display: block;

    margin-bottom: 45px;

    color:
        rgba(20, 86, 160, .45);

    font-size: .8rem;
    font-weight: 800;

    letter-spacing: .12em;
}

.dz-service-card h3 {
    margin-bottom: 15px;

    font-size:
        clamp(1.35rem, 2vw, 1.65rem);
}

.dz-service-card__text {
    line-height: 1.7;
}


/* ============================================================
   11. VÝHODY
   ============================================================ */

.dz-benefits {
    background:
        linear-gradient(
            135deg,
            var(--dz-primary-dark),
            #10294a
        ) !important;
}

.dz-benefits__container {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: clamp(55px, 9vw, 110px);

    align-items: start;
}

.dz-benefits .dz-eyebrow {
    color: #78baff !important;
}

.dz-benefits h2 {
    color: white;
}

.dz-benefits__lead p {
    color:
        rgba(255,255,255,.70);
}

.dz-benefits__grid {
    display: grid;

    gap: 14px;
}

.dz-benefit {
    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 18px;

    padding: 24px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        var(--dz-radius-md);

    background:
        rgba(255,255,255,.055);

    backdrop-filter: blur(8px);
}

.dz-benefit__mark {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: white;

    background:
        var(--dz-primary-light);

    font-weight: 900;
}

.dz-benefit h3 {
    margin:
        4px
        0
        8px;

    color: white;

    font-size: 1.18rem;
}

.dz-benefit__text p {
    margin: 0;

    color:
        rgba(255,255,255,.67);

    line-height: 1.65;
}


/* ============================================================
   12. PROCES
   ============================================================ */

.dz-process__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}

.dz-process-step {
    position: relative;

    padding:
        28px
        24px;

    border-top:
        2px solid var(--dz-primary);

    background:
        transparent;
}

.dz-process-step__number {
    display: block;

    margin-bottom: 45px;

    color:
        var(--dz-primary);

    font-size: .86rem;
    font-weight: 850;

    letter-spacing: .1em;
}

.dz-process-step h3 {
    margin-bottom: 13px;

    font-size: 1.3rem;
}

.dz-process-step__text {
    line-height: 1.7;
}


/* ============================================================
   13. CTA
   ============================================================ */

.dz-cta {
    background:
        var(--dz-bg) !important;
}

.dz-cta__panel {
    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 50px;

    padding:
        clamp(40px, 6vw, 72px);

    border-radius:
        var(--dz-radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--dz-primary),
            var(--dz-primary-dark)
        );

    box-shadow:
        var(--dz-shadow-md);
}

.dz-cta__panel::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -150px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 50%;

    box-shadow:
        0 0 0 55px rgba(255,255,255,.025);
}

.dz-cta__content {
    position: relative;
    z-index: 1;

    max-width: 740px;
}

.dz-cta__eyebrow {
    color: #a8d3ff !important;
}

.dz-cta h2 {
    margin-bottom: 18px;

    color: white;

    font-size:
        clamp(2.1rem, 4vw, 3.7rem);

    text-wrap: balance;
}

.dz-cta__text p {
    margin: 0;

    color:
        rgba(255,255,255,.72);

    font-size: 1.08rem;

    line-height: 1.7;
}

.dz-cta__action {
    position: relative;
    z-index: 1;
}

.dz-button--cta {
    min-height: 56px;

    padding:
        15px 25px;

    color:
        var(--dz-primary-dark) !important;

    background: white;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);
}

.dz-button--cta:hover {
    color:
        var(--dz-primary) !important;

    transform:
        translateY(-2px);
}


/* ============================================================
   14. OBSAH Z MARKDOWNU
   ============================================================ */

.dz-home-content {
    padding:
        var(--dz-section-space)
        0;
}

.dz-richtext {
    max-width: 780px;

    margin-inline: auto;
}


/* ============================================================
   15. FOOTER
   ============================================================ */

#footer {
    margin-top: 0;

    padding: 38px 0;

    border-top:
        1px solid var(--dz-border);

    background:
        #0c1728;

    color:
        rgba(255,255,255,.65);
}

#footer p {
    margin: 0;

    color:
        rgba(255,255,255,.65);
}

#footer a {
    color: white;
}


/* ============================================================
   16. TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .dz-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .85fr);

        gap: 45px;
    }

    .dz-hero__photo-wrap,
    .dz-hero__photo {
        min-height: 470px;
    }

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

    .dz-benefits__container {
        grid-template-columns: 1fr;
    }

    .dz-benefits__intro {
        max-width: 700px;
    }

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

}


/* ============================================================
   17. MOBIL
   ============================================================ */

@media (max-width: 760px) {

    :root {
        --dz-header-height: 68px;
        --dz-section-space: 72px;
    }

    body.dz-site .container {
        width:
            min(
                calc(100% - 30px),
                var(--dz-container)
            );
    }


    /* HEADER */

    #header.dz-header {
        min-height:
            var(--dz-header-height);
    }

    .dz-header__container,
    .dz-navbar {
        min-height:
            var(--dz-header-height);
    }

    .dz-navbar__brand .navbar-brand img {
        height: 42px;
    }


    /* HERO */

    .dz-hero {
        padding:
            65px
            0
            75px;
    }

    .dz-hero__container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .dz-hero__title {
        max-width: 100%;

        font-size:
            clamp(2.7rem, 12vw, 4rem);
    }

    .dz-hero__actions {
        flex-direction: column;

        align-items: stretch;
    }

    .dz-hero__actions .dz-button {
        width: 100%;
    }

    .dz-hero__visual {
        width: 100%;
    }

    .dz-hero__photo-wrap,
    .dz-hero__photo {
        min-height: 440px;
    }

    .dz-hero__photo-wrap {
        border-radius:
            25px;
    }


    /* SEKCE */

    .dz-section-heading {
        margin-bottom: 40px;
    }

    .dz-services__grid {
        grid-template-columns: 1fr;
    }

    .dz-service-card {
        min-height: auto;
    }

    .dz-service-card__number {
        margin-bottom: 28px;
    }


    /* VÝHODY */

    .dz-benefits__container {
        gap: 42px;
    }

    .dz-benefit {
        grid-template-columns:
            38px 1fr;

        padding: 20px;
    }


    /* PROCES */

    .dz-process__grid {
        grid-template-columns: 1fr;
    }

    .dz-process-step {
        padding:
            24px 4px;
    }

    .dz-process-step__number {
        margin-bottom: 24px;
    }


    /* CTA */

    .dz-cta__panel {
        grid-template-columns: 1fr;

        gap: 30px;

        padding:
            38px 25px;

        border-radius:
            25px;
    }

    .dz-cta__action {
        width: 100%;
    }

    .dz-button--cta {
        width: 100%;
    }

}


/* ============================================================
   18. MALÝ MOBIL
   ============================================================ */

@media (max-width: 420px) {

    .dz-hero__photo-wrap,
    .dz-hero__photo {
        min-height: 390px;
    }

}


/* ============================================================
   19. ACCESSIBILITY / REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* ============================================================
   DZ TYPOGRAPHY + SPACING FIX v1
   ============================================================ */


/* ------------------------------------------------------------
   1. ČITELNĚJŠÍ TYPOGRAFIE

   Cal Sans necháme Quarku k dispozici, ale hlavní nadpisy
   našeho webu budou používat Inter.
   ------------------------------------------------------------ */

body.dz-site h1,
body.dz-site h2,
body.dz-site h3,
body.dz-site h4,
body.dz-site h5,
body.dz-site h6 {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    letter-spacing: -0.018em;
}


/* Největší nadpis hero */
.dz-hero__title {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-weight: 760;

    letter-spacing: -0.035em;
    line-height: 1.04;
}


/* Hlavní nadpisy jednotlivých sekcí */
.dz-section-heading h2,
.dz-benefits__intro h2,
.dz-cta h2 {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-weight: 750;

    letter-spacing: -0.03em;
    line-height: 1.08;
}


/* Menší nadpisy karet */
.dz-service-card h3,
.dz-benefit h3,
.dz-process-step h3 {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-weight: 720;

    letter-spacing: -0.015em;
    line-height: 1.25;
}



/* ------------------------------------------------------------
   2. ZRUŠENÍ PŘEHNANÝCH MEZER U NADPISŮ
   ------------------------------------------------------------ */

.dz-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}


/* Quark si na h2 přidává svoje marginy.
   Tady je přebíráme plně pod svoji kontrolu. */

.dz-section-heading h2,
.dz-benefits__intro h2,
.dz-cta h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}


/* konkrétně levá část modré sekce */
.dz-benefits__intro .dz-eyebrow {
    margin-bottom: 14px !important;
}

.dz-benefits__intro h2 {
    margin-top: 0 !important;
}


/* ------------------------------------------------------------
   3. O NĚCO KOMPAKTNĚJŠÍ SEKCE
   ------------------------------------------------------------ */

:root {
    --dz-section-space:
        clamp(58px, 7vw, 92px);
}


.dz-section-heading {
    margin-bottom:
        clamp(32px, 4vw, 48px);
}


/* text pod hlavním nadpisem nebude zbytečně odskočený */

.dz-section-heading__text,
.dz-benefits__lead {
    margin-top: 0;
}

.dz-section-heading__text p:first-child,
.dz-benefits__lead p:first-child {
    margin-top: 0;
}


/* ------------------------------------------------------------
   4. MOBIL
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    :root {
        --dz-section-space: 58px;
    }

    .dz-eyebrow {
        margin-bottom: 9px !important;
    }

    .dz-section-heading h2,
    .dz-benefits__intro h2,
    .dz-cta h2 {
        margin-bottom: 14px !important;
    }

}


/* ============================================================
   DZ UNIVERSAL FOOTER
   ============================================================ */

.dz-footer {
    margin: 0;

    padding:
        72px
        0
        0;

    background:
        #091525;

    color:
        rgba(255,255,255,.68);

    border-top: 0;
}


/* hlavní část */

.dz-footer__main {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(160px, .65fr)
        minmax(200px, .75fr);

    gap:
        clamp(40px, 7vw, 90px);

    padding-bottom: 58px;
}


/* ============================================================
   ZNAČKA
   ============================================================ */

.dz-footer__identity {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: white !important;

    text-decoration: none !important;
}


.dz-footer__mark {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    overflow: hidden;

    border-radius: 15px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 8px 28px rgba(0,0,0,.18);
}


.dz-footer__mark img {
    display: block;

    width: 46px;
    height: 46px;

    object-fit: contain;
}


.dz-footer__name {
    color: white;

    font-size: 1.3rem;
    font-weight: 750;

    letter-spacing: -.02em;
}


.dz-footer__description {
    max-width: 430px;

    margin:
        22px
        0
        0 !important;

    color:
        rgba(255,255,255,.58) !important;

    line-height: 1.7;
}


/* ============================================================
   SLOUPCE
   ============================================================ */

.dz-footer__heading {
    margin:
        5px
        0
        18px !important;

    color:
        rgba(255,255,255,.45) !important;

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.dz-footer__links {
    margin: 0;

    padding: 0;

    list-style: none;
}


.dz-footer__links li {
    margin: 8px 0;
}


.dz-footer__links a,
.dz-footer__contact a {
    color:
        rgba(255,255,255,.78);

    text-decoration: none;

    transition:
        color .18s ease;
}


.dz-footer__links a:hover,
.dz-footer__contact a:hover {
    color: white;
}


.dz-footer__contact p {
    margin:
        0
        0
        9px !important;

    color:
        rgba(255,255,255,.66) !important;
}


/* ============================================================
   SPODNÍ ČÁST
   ============================================================ */

.dz-footer__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    min-height: 72px;

    padding:
        20px
        0;

    border-top:
        1px solid rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.42);

    font-size: .84rem;
}


.dz-footer__copyright {
    display: flex;

    flex-wrap: wrap;

    gap:
        7px 18px;
}


.dz-footer__legal {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 22px;
}


.dz-footer__legal a {
    color:
        rgba(255,255,255,.52);

    text-decoration: none;

    transition:
        color .18s ease;
}


.dz-footer__legal a:hover {
    color: white;
}


/* ============================================================
   FOOTER – MOBIL
   ============================================================ */

@media (max-width: 760px) {

    .dz-footer {
        padding-top: 54px;
    }

    .dz-footer__main {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 40px;
    }

    .dz-footer__description {
        max-width: 100%;
    }

    .dz-footer__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        min-height: auto;

        padding:
            24px
            0
            30px;
    }

    .dz-footer__copyright {
        flex-direction: column;

        gap: 4px;
    }

    .dz-footer__legal {
        justify-content: flex-start;

        gap: 18px;
    }

}


/* ============================================================
   DZ COMPACT FOOTER
   ============================================================ */

#footer.dz-footer--compact {
    margin: 0;
    padding: 0;

    background: #091525;
    border: 0;

    color: rgba(255,255,255,.55);
}


.dz-footer-compact__inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 28px;

    min-height: 82px;

    padding-top: 14px;
    padding-bottom: 14px;

    font-size: .86rem;
}


/* značka */

.dz-footer-compact__brand {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    color: white !important;

    font-weight: 700;

    text-decoration: none !important;
}


.dz-footer-compact__brand img {
    display: block;

    width: 32px;
    height: 32px;

    padding: 3px;

    border-radius: 8px;

    background: white;

    object-fit: contain;
}


/* e-mail */

.dz-footer-compact__email {
    color: rgba(255,255,255,.65) !important;

    text-decoration: none !important;
}


.dz-footer-compact__email:hover {
    color: white !important;
}


/* pravá část */

.dz-footer-compact__meta {
    display: flex;

    align-items: center;

    gap: 22px;

    flex-shrink: 0;

    color: rgba(255,255,255,.40);
}


.dz-footer-compact__meta a {
    color: rgba(255,255,255,.65) !important;

    font-weight: 600;

    text-decoration: none !important;
}


.dz-footer-compact__meta a:hover {
    color: white !important;
}


/* mobil */

@media (max-width: 700px) {

    .dz-footer-compact__inner {
        min-height: auto;

        padding-top: 22px;
        padding-bottom: 22px;

        flex-wrap: wrap;

        gap: 12px 20px;
    }


    .dz-footer-compact__brand {
        width: 100%;
    }


    .dz-footer-compact__email {
        font-size: .82rem;
    }


    .dz-footer-compact__meta {
        margin-left: auto;

        gap: 14px;

        font-size: .8rem;
    }

}


/* ============================================================
   DZ VISUAL REDESIGN v2
   Cíl:
   - méně prázdný web
   - víc vizuální hmoty
   - pořád čisté, ale ne sterilní
   ============================================================ */


/* ============================================================
   1. CELKOVÉ POZADÍ A RYTMUS
   ============================================================ */

body.dz-home {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 42%,
            #ffffff 100%
        );
}

.dz-homepage {
    display: grid;
    gap: 28px;
}


/* ============================================================
   2. HERO – VÍC JAKO HOTOVÝ BLOK
   ============================================================ */

.dz-hero {
    padding-top: 42px;
    padding-bottom: 72px;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(22,132,232,.07),
            transparent 26rem
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(20,86,160,.08),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );
}

.dz-hero__container {
    align-items: stretch;
}

.dz-hero__content {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(28px, 4vw, 44px);

    border: 1px solid rgba(20,86,160,.10);
    border-radius: 34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.97),
            rgba(246,250,255,.96)
        );

    box-shadow:
        0 20px 60px rgba(12, 46, 90, .08);
}

.dz-hero__content::before {
    content: "";

    position: absolute;
    inset: 0 0 auto 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );
}

.dz-hero__content::after {
    content: "";

    position: absolute;
    right: -60px;
    bottom: -60px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,86,160,.08),
            transparent 65%
        );

    pointer-events: none;
}

.dz-hero__title {
    max-width: 11.5ch;
}

.dz-hero__text {
    max-width: 600px;
}

.dz-hero__photo-wrap {
    border: 1px solid rgba(20,86,160,.10);
    background:
        linear-gradient(
            180deg,
            #eef5fc,
            #ddebf8
        );
}

.dz-hero__visual {
    position: relative;
}

.dz-hero__visual::before {
    content: "";

    position: absolute;
    left: -18px;
    bottom: 28px;

    width: 92px;
    height: 92px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(22,132,232,.18),
            rgba(20,86,160,.08)
        );

    filter: blur(1px);
    pointer-events: none;
}

.dz-hero__visual::after {
    content: "";

    position: absolute;
    right: -14px;
    top: 24px;

    width: 120px;
    height: 120px;

    border-radius: 28px;

    border: 1px solid rgba(20,86,160,.12);

    background:
        rgba(255,255,255,.18);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    pointer-events: none;
}


/* ============================================================
   3. JEDNOTNÉ „SHELL“ BLOKY PRO SEKCE
   ============================================================ */

.dz-services,
.dz-process,
.dz-cta {
    background: transparent !important;
}

.dz-services .container,
.dz-process .container {
    position: relative;
    overflow: hidden;

    padding:
        clamp(34px, 4vw, 52px);

    border: 1px solid rgba(20,86,160,.10);
    border-radius: 34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(247,251,255,.98)
        );

    box-shadow:
        0 20px 60px rgba(12, 46, 90, .07);
}

.dz-services .container::before,
.dz-process .container::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(20,86,160,.05),
            transparent 24rem
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(22,132,232,.04),
            transparent 20rem
        );

    pointer-events: none;
}

.dz-services .container::after,
.dz-process .container::after {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );

    pointer-events: none;
}


/* ============================================================
   4. NADPISY SEKCI – VÍC GRAFIKY
   ============================================================ */

.dz-section-heading,
.dz-benefits__intro {
    position: relative;
    z-index: 1;
}

.dz-section-heading h2,
.dz-benefits__intro h2 {
    position: relative;
}

.dz-section-heading h2::after,
.dz-benefits__intro h2::after {
    content: "";

    display: block;

    width: 76px;
    height: 4px;

    margin-top: 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );
}

.dz-benefits__intro h2::after {
    background:
        linear-gradient(
            90deg,
            #78baff,
            #d2e8ff
        );
}

.dz-section-heading__text,
.dz-benefits__lead {
    max-width: 720px;
}


/* ============================================================
   5. SLUŽBY – POŘÁDNÉ KARTY
   ============================================================ */

.dz-services__grid {
    position: relative;
    z-index: 1;

    gap: 24px;
}

.dz-service-card {
    position: relative;
    overflow: hidden;

    min-height: 300px;

    padding:
        30px
        28px
        28px;

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );

    box-shadow:
        0 16px 40px rgba(12,46,90,.06);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.dz-service-card::before {
    content: "";

    position: absolute;
    inset: 0 0 auto 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );
}

.dz-service-card::after {
    content: "";

    position: absolute;
    right: -34px;
    bottom: -34px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,86,160,.08),
            transparent 68%
        );

    pointer-events: none;
}

.dz-service-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(20,86,160,.18);

    box-shadow:
        0 24px 55px rgba(12,46,90,.12);
}

.dz-service-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 26px;

    border-radius: 16px;

    color: var(--dz-primary);
    background:
        rgba(20,86,160,.08);

    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.dz-service-card h3 {
    margin-bottom: 14px;
}

.dz-service-card__text {
    max-width: 31ch;
}


/* ============================================================
   6. VÝHODY – TEMNÝ OBSAH JAKO JEDEN UZAVŘENÝ CELEK
   ============================================================ */

.dz-benefits {
    background: transparent !important;
}

.dz-benefits .container {
    position: relative;
    overflow: hidden;

    padding:
        clamp(38px, 5vw, 58px);

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            #123c74,
            #0a2850
        );

    box-shadow:
        0 24px 70px rgba(8, 32, 66, .18);
}

.dz-benefits .container::before {
    content: "";

    position: absolute;
    right: -90px;
    top: -90px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 0 0 55px rgba(255,255,255,.03),
        0 0 0 110px rgba(255,255,255,.02);

    pointer-events: none;
}

.dz-benefits .container::after {
    content: "";

    position: absolute;
    left: -50px;
    bottom: -70px;

    width: 220px;
    height: 220px;

    border-radius: 36px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.01)
        );

    transform: rotate(25deg);

    pointer-events: none;
}

.dz-benefits__container {
    position: relative;
    z-index: 1;
}

.dz-benefits__grid {
    gap: 18px;
}

.dz-benefit {
    border:
        1px solid rgba(255,255,255,.13);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.05)
        );

    box-shadow:
        0 16px 34px rgba(0,0,0,.10);
}


/* ============================================================
   7. PROCES – UŽ NE HOLÝ TEXT, ALE KARTY
   ============================================================ */

.dz-process__grid {
    position: relative;
    z-index: 1;

    gap: 22px;
    align-items: stretch;
}

.dz-process-step {
    position: relative;
    overflow: hidden;

    min-height: 100%;

    padding:
        28px
        24px
        24px;

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f9fbff
        );

    box-shadow:
        0 16px 36px rgba(12,46,90,.06);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.dz-process-step::before {
    content: "";

    position: absolute;
    inset: 0 0 auto 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );
}

.dz-process-step::after {
    content: "";

    position: absolute;
    right: -28px;
    bottom: -28px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,86,160,.06),
            transparent 70%
        );

    pointer-events: none;
}

.dz-process-step:hover {
    transform: translateY(-6px);

    border-color:
        rgba(20,86,160,.18);

    box-shadow:
        0 24px 50px rgba(12,46,90,.10);
}

.dz-process-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 22px;

    border-radius: 14px;

    color: var(--dz-primary);
    background:
        rgba(20,86,160,.08);

    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.dz-process-step h3 {
    margin-bottom: 14px;
}

.dz-process-step__text {
    max-width: 28ch;
}


/* ============================================================
   8. CTA – JEŠTĚ O NĚCO ELEGANTNĚJŠÍ
   ============================================================ */

.dz-cta__panel {
    border: 1px solid rgba(255,255,255,.08);
}

.dz-cta__panel::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.45)
        );
}


/* ============================================================
   9. JEMNĚ MENŠÍ PRÁZDNÉ OKRAJE KOLEM SEKCI
   ============================================================ */

:root {
    --dz-section-space:
        clamp(52px, 6vw, 84px);
}


/* ============================================================
   10. TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .dz-services .container,
    .dz-process .container,
    .dz-benefits .container {
        padding: 30px;
    }

    .dz-service-card,
    .dz-process-step {
        min-height: auto;
    }

}


/* ============================================================
   11. MOBIL
   ============================================================ */

@media (max-width: 760px) {

    .dz-homepage {
        gap: 20px;
    }

    .dz-services .container,
    .dz-process .container,
    .dz-benefits .container {
        padding: 24px 20px;
        border-radius: 26px;
    }

    .dz-hero__content {
        padding: 24px 20px;
        border-radius: 26px;
    }

    .dz-service-card,
    .dz-process-step {
        padding: 24px 20px 20px;
        border-radius: 22px;
    }

    .dz-section-heading h2::after,
    .dz-benefits__intro h2::after {
        width: 58px;
        margin-top: 14px;
    }

}


/* ============================================================
   DZ HEADER v2
   Inspirace: čistý osobní web + Singlewalk princip
   ============================================================ */


/* celý header */

#header.dz-header {
    position: sticky;
    top: 0;
    z-index: 2000;

    min-height: 84px;

    padding: 0 !important;

    border-bottom:
        1px solid rgba(15, 45, 85, .08);

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 8px 30px rgba(10, 40, 80, .045);

    backdrop-filter:
        blur(18px) saturate(140%);

    -webkit-backdrop-filter:
        blur(18px) saturate(140%);
}


.dz-header__container,
.dz-navbar {
    min-height: 84px;
}


/* ============================================================
   LOGO / ZNAČKA
   ============================================================ */

.dz-navbar__brand {
    flex: 0 0 auto;
}


.dz-brand {
    display: inline-flex !important;

    align-items: center;

    gap: 13px;

    margin: 0 !important;

    color:
        var(--dz-text) !important;

    text-decoration:
        none !important;
}


/* favicon / značka */

.dz-brand__mark {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    padding: 4px;

    overflow: hidden;

    border:
        1px solid rgba(20,86,160,.12);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5fd
        );

    box-shadow:
        0 8px 20px rgba(20,86,160,.10);
}


.dz-brand__mark img {
    display: block;

    width: 42px !important;
    height: 42px !important;

    max-width: none !important;

    object-fit: contain;
}


/* text vedle loga */

.dz-brand__text {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;

    min-width: 0;
}


.dz-brand__name {
    display: block;

    color: var(--dz-text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 1rem;

    font-weight: 780;

    line-height: 1.15;

    letter-spacing: -.02em;
}


.dz-brand__tagline {
    display: block;

    color: var(--dz-text-soft);

    font-size: .71rem;

    font-weight: 550;

    line-height: 1.2;

    letter-spacing: .025em;
}


/* ============================================================
   ROZLOŽENÍ HEADERU
   ============================================================ */

.dz-navbar {
    display: flex;

    align-items: center;

    width: 100%;

    gap: 28px;
}


.dz-navbar__menu {
    margin-left: auto;
}


/* navigace jako jemné pills */

.dz-navbar__menu ul {
    gap: 3px;
}


.dz-navbar__menu a {
    min-height: 42px;

    padding:
        9px
        14px;

    border-radius:
        999px;

    color:
        #25354a;

    font-size: .91rem;

    font-weight: 650;

    transition:
        color .18s ease,
        background-color .18s ease,
        transform .18s ease;
}


.dz-navbar__menu a:hover {
    color:
        var(--dz-primary);

    background:
        rgba(20,86,160,.075);

    transform:
        translateY(-1px);
}


.dz-navbar__menu li.active > a,
.dz-navbar__menu li.selected > a {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );

    box-shadow:
        0 8px 20px rgba(20,86,160,.17);
}


/* ============================================================
   PRAVÁ ČÁST
   Bez dark-mode tlačítka.
   ============================================================ */

.dz-navbar__actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-left: 6px;
}


/* CTA pokud jej později zapneme */

.dz-header-cta {
    min-height: 43px;

    padding:
        10px
        17px;

    font-size: .89rem;
}


/* ============================================================
   JEMNÁ MODRÁ LINKA POD HEADEREM
   ============================================================ */

#header.dz-header::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -1px;

    width:
        min(
            calc(100% - 48px),
            var(--dz-container)
        );

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20,86,160,.22),
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    #header.dz-header,
    .dz-header__container,
    .dz-navbar {
        min-height: 70px;
    }


    .dz-brand {
        gap: 9px;
    }


    .dz-brand__mark {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }


    .dz-brand__mark img {
        width: 35px !important;
        height: 35px !important;
    }


    .dz-brand__name {
        font-size: .91rem;
    }


    .dz-brand__tagline {
        font-size: .63rem;
    }


    .dz-navbar__actions {
        display: none;
    }

}


/* velmi malý telefon */

@media (max-width: 390px) {

    .dz-brand__tagline {
        display: none;
    }

}


/* ============================================================
   DZ HEADER REFINEMENT v3
   - větší značka vlevo
   - bez černých bublinek
   - jemně modrý podklad
   - smysluplná navigace
   ============================================================ */


/* ============================================================
   HEADER BACKGROUND
   ============================================================ */

#header.dz-header {
    position: sticky;
    top: 0;
    z-index: 2200;

    min-height: 92px;

    border-bottom:
        1px solid rgba(20, 86, 160, .08);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96) 0%,
            rgba(245,249,255,.98) 100%
        );

    box-shadow:
        0 10px 32px rgba(10, 40, 80, .05);

    backdrop-filter:
        blur(18px) saturate(140%);

    -webkit-backdrop-filter:
        blur(18px) saturate(140%);
}

#header.dz-header::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(22,132,232,.06),
            transparent 22rem
        ),
        radial-gradient(
            circle at 85% 10%,
            rgba(20,86,160,.05),
            transparent 22rem
        );

    pointer-events: none;
}

#header.dz-header::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -1px;

    width:
        min(
            calc(100% - 48px),
            var(--dz-container)
        );

    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20,86,160,.24),
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.dz-header__container,
.dz-navbar {
    min-height: 92px;
}

.dz-navbar {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;
}

.dz-navbar__brand {
    flex: 0 1 460px;
    min-width: 340px;
}

.dz-navbar__menu {
    margin-left: auto;
}

.dz-navbar__actions {
    display: none !important;
}


/* ============================================================
   BRAND / LOGO
   ============================================================ */

.dz-brand {
    display: inline-flex !important;
    align-items: center;

    gap: 16px;

    color: var(--dz-text) !important;
    text-decoration: none !important;
}

.dz-brand__mark {
    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    flex: 0 0 auto;

    overflow: hidden;

    border:
        1px solid rgba(20,86,160,.12);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf5fd
        );

    box-shadow:
        0 10px 24px rgba(20,86,160,.12);
}

.dz-brand__mark img {
    display: block;

    width: 72px !important;
    height: 72px !important;

    max-width: none !important;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.55);
    transform-origin: center center;
}

.dz-brand__text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;
}

.dz-brand__name {
    display: block;

    color: var(--dz-text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.dz-brand__tagline {
    display: block;

    color: #496178;

    font-size: .95rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}


/* ============================================================
   NAVIGACE – bez černých pilulek
   ============================================================ */

.dz-navbar__menu .dz-nav,
.dz-navbar__menu ul {
    display: flex;
    align-items: center;

    gap: clamp(14px, 2vw, 28px);

    margin: 0;
    padding: 0;

    list-style: none;
}

.dz-navbar__menu li {
    position: relative;
    margin: 0;
    padding: 0;
}

.dz-navbar__menu a {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: auto !important;

    padding: 10px 0 !important;

    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #29435f !important;

    font-size: 1rem;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.dz-navbar__menu a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -6px;

    width: 100%;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );

    opacity: 0;
    transform: scaleX(.35);
    transform-origin: center center;

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.dz-navbar__menu a:hover {
    color: var(--dz-primary) !important;
    background: transparent !important;
    transform: none !important;
}

.dz-navbar__menu a:hover::after {
    opacity: .55;
    transform: scaleX(1);
}

.dz-navbar__menu li.active > a,
.dz-navbar__menu li.selected > a {
    color: var(--dz-primary-dark) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dz-navbar__menu li.active > a::after,
.dz-navbar__menu li.selected > a::after {
    opacity: 1;
    transform: scaleX(1);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    #header.dz-header,
    .dz-header__container,
    .dz-navbar {
        min-height: 80px;
    }

    .dz-navbar__brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .dz-brand__mark {
        width: 58px;
        height: 58px;

        border-radius: 16px;
    }

    .dz-brand__mark img {
        width: 58px !important;
        height: 58px !important;

        transform: scale(1.5);
    }

    .dz-brand__name {
        font-size: 1.18rem;
    }

    .dz-brand__tagline {
        font-size: .78rem;
    }

}

@media (max-width: 760px) {

    #header.dz-header,
    .dz-header__container,
    .dz-navbar {
        min-height: 72px;
    }

    .dz-brand {
        gap: 10px;
    }

    .dz-brand__mark {
        width: 46px;
        height: 46px;

        border-radius: 13px;
    }

    .dz-brand__mark img {
        width: 46px !important;
        height: 46px !important;

        transform: scale(1.45);
    }

    .dz-brand__name {
        font-size: .98rem;
    }

    .dz-brand__tagline {
        font-size: .68rem;
    }

}

@media (max-width: 420px) {

    .dz-brand__tagline {
        display: none;
    }

}


/* ============================================================
   HEADER – HORIZONTÁLNÍ DZ LOGO
   ============================================================ */

.dz-brand__mark--header {
    width: 92px;
    height: 58px;

    padding: 4px 5px;

    border-radius: 15px;

    overflow: visible;

    background:
        rgba(255,255,255,.62);

    border:
        1px solid rgba(20,86,160,.10);

    box-shadow:
        0 8px 22px rgba(20,86,160,.08);
}

.dz-brand__mark--header img {
    display: block;

    width: 82px !important;
    height: 48px !important;

    max-width: none !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
}


/* tablet */

@media (max-width: 900px) {

    .dz-brand__mark--header {
        width: 78px;
        height: 50px;
    }

    .dz-brand__mark--header img {
        width: 69px !important;
        height: 42px !important;
    }

}


/* mobil */

@media (max-width: 760px) {

    .dz-brand__mark--header {
        width: 66px;
        height: 44px;

        padding: 3px 4px;
    }

    .dz-brand__mark--header img {
        width: 58px !important;
        height: 37px !important;
    }

}


/* ============================================================
   DZ FINAL HEADER + HERO COMPACT FIX
   ============================================================ */


/* ------------------------------------------------------------
   1. HEADER – MENŠÍ VÝŠKA
   ------------------------------------------------------------ */

#header.dz-header {
    min-height: 74px;
}

.dz-header__container,
.dz-navbar {
    min-height: 74px;
}


/* logo zůstane dobře viditelné, ale nebude zvyšovat header */

.dz-brand__mark.dz-brand__mark--header {
    width: 72px;
    height: 48px;

    padding: 2px 3px;

    border-radius: 13px;
}

.dz-brand__mark.dz-brand__mark--header img {
    width: 66px !important;
    height: 42px !important;

    object-fit: contain !important;
    transform: none !important;
}


/* text značky */

.dz-brand__text {
    gap: 1px;
}

.dz-brand__name {
    font-size: 1.28rem;
    line-height: 1.05;
}

.dz-brand__tagline {
    font-size: .80rem;
    line-height: 1.1;
}


/* ------------------------------------------------------------
   2. HERO – MÉNĚ VOLNÉHO MÍSTA NAHOŘE
   ------------------------------------------------------------ */

.dz-hero {
    padding-top: 28px;
}


/* hlavně odstraníme nesmyslný prostor mezi eyebrow a H1 */

.dz-hero__content .dz-eyebrow {
    margin:
        0
        0
        10px !important;
}

.dz-hero__content .dz-hero__title {
    margin:
        0
        0
        24px !important;
}


/* samotný panel nemusí mít tolik prázdna */

.dz-hero__content {
    justify-content: center;

    padding:
        clamp(28px, 3.5vw, 40px);
}


/* ------------------------------------------------------------
   3. ODSTRANĚNÍ ROZMAZANÉHO ČTVERCE Z FOTKY
   ------------------------------------------------------------ */

.dz-hero__visual::after {
    display: none !important;
}


/* zrušíme i druhou zbytečnou dekoraci pod fotkou,
   aby byla fotografie skutečně čistá */

.dz-hero__visual::before {
    display: none !important;
}


/* ------------------------------------------------------------
   MOBIL
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    #header.dz-header,
    .dz-header__container,
    .dz-navbar {
        min-height: 66px;
    }

    .dz-brand__mark.dz-brand__mark--header {
        width: 59px;
        height: 40px;
    }

    .dz-brand__mark.dz-brand__mark--header img {
        width: 54px !important;
        height: 35px !important;
    }

    .dz-brand__name {
        font-size: 1rem;
    }

    .dz-brand__tagline {
        font-size: .68rem;
    }

    .dz-hero {
        padding-top: 18px;
    }

}


/* ============================================================
   DZ MULTI-PAGE LAYOUT
   ============================================================ */

.dz-page-hero {
    padding:
        clamp(60px, 8vw, 105px)
        0
        clamp(48px, 6vw, 78px);

    background:
        linear-gradient(
            180deg,
            #f3f8ff,
            #ffffff
        );
}

.dz-page-hero .container {
    max-width: var(--dz-container);
}

.dz-page-hero h1 {
    max-width: 14ch;

    margin:
        0
        0
        22px;

    font-size:
        clamp(3rem, 6vw, 5.4rem);

    line-height: 1.02;
}

.dz-page-hero__text {
    max-width: 720px;

    font-size: 1.12rem;
    line-height: 1.75;
}

.dz-inner-section {
    padding:
        clamp(55px, 7vw, 95px)
        0;
}

.dz-inner-section--soft {
    background: #f5f9fd;
}

.dz-inner-heading {
    max-width: 720px;
    margin-bottom: 45px;
}


/* SERVICES */

.dz-services-page__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.dz-inner-card {
    padding:
        clamp(28px, 4vw, 42px);

    border:
        1px solid rgba(20,86,160,.11);

    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f8fbff
        );

    box-shadow:
        0 16px 45px rgba(12,46,90,.07);
}

.dz-inner-card__number {
    display: inline-flex;

    margin-bottom: 28px;

    color: var(--dz-primary);

    font-size: .82rem;
    font-weight: 850;

    letter-spacing: .1em;
}

.dz-inner-card h2 {
    margin-bottom: 17px;

    font-size:
        clamp(1.5rem, 2.5vw, 2rem);
}

.dz-process-page__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}

.dz-process-page__step {
    padding: 26px;

    border-top:
        3px solid var(--dz-primary);
}

.dz-process-page__step > span {
    color: var(--dz-primary);

    font-size: .8rem;
    font-weight: 850;
}

.dz-process-page__step h3 {
    margin:
        26px
        0
        12px;
}


/* REFERENCES */

.dz-projects {
    display: grid;
    gap: 50px;
}

.dz-project {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .85fr);

    gap:
        clamp(35px, 6vw, 75px);

    align-items: center;

    padding:
        clamp(28px, 4vw, 45px);

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 32px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );

    box-shadow:
        0 18px 55px rgba(12,46,90,.08);
}

.dz-project:nth-child(even) .dz-project__visual {
    order: 2;
}

.dz-project__visual {
    overflow: hidden;

    aspect-ratio: 16 / 10;

    border-radius: 22px;

    border:
        1px solid rgba(20,86,160,.10);

    background: #eaf2fa;
}

.dz-project__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.dz-project__placeholder {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: var(--dz-primary);

    font-size: 1.25rem;
    font-weight: 750;
}

.dz-project__placeholder small {
    margin-top: 5px;

    color: var(--dz-text-soft);

    font-size: .8rem;
    font-weight: 500;
}

.dz-project__content h2 {
    margin-bottom: 17px;

    font-size:
        clamp(2rem, 4vw, 3.2rem);
}

.dz-project__text {
    line-height: 1.75;
}

.dz-project__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin:
        25px
        0;
}

.dz-project__tags span {
    padding:
        6px
        11px;

    border-radius: 999px;

    background:
        rgba(20,86,160,.08);

    color:
        var(--dz-primary);

    font-size: .75rem;
    font-weight: 700;
}

.dz-project__link {
    display: inline-flex;

    gap: 7px;

    color:
        var(--dz-primary) !important;

    font-weight: 750;

    text-decoration: none !important;
}


/* HOMEPAGE REFERENCE */

.dz-home-references .container {
    padding:
        clamp(34px, 4vw, 52px);

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 34px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbff
        );

    box-shadow:
        0 20px 60px rgba(12,46,90,.07);
}

.dz-home-references__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.dz-home-reference {
    overflow: hidden;

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 25px;

    background: white;

    box-shadow:
        0 14px 35px rgba(12,46,90,.06);
}

.dz-home-reference__image {
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #eaf2fa;
}

.dz-home-reference__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.dz-home-reference__placeholder {
    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    color: var(--dz-primary);

    font-weight: 750;
}

.dz-home-reference__content {
    padding: 22px;
}

.dz-home-reference__content h3 {
    margin-bottom: 6px;
}

.dz-home-reference__content p {
    margin: 0;
}

.dz-home-references__action {
    margin-top: 30px;
}


/* CONTACT */

.dz-contact-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, .7fr);

    gap:
        clamp(40px, 7vw, 85px);

    align-items: start;
}

.dz-contact-copy {
    font-size: 1.08rem;
    line-height: 1.8;
}

.dz-contact-card {
    padding:
        clamp(28px, 4vw, 40px);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            var(--dz-primary),
            var(--dz-primary-dark)
        );

    color: white;

    box-shadow:
        0 20px 55px rgba(12,46,90,.18);
}

.dz-contact-card h2 {
    color: white;

    margin-bottom: 20px;
}

.dz-contact-card p {
    color:
        rgba(255,255,255,.70) !important;
}

.dz-contact-card__email {
    display: inline-block;

    margin-bottom: 24px;

    color: white !important;

    font-size: 1.2rem;
    font-weight: 750;
}


/* MOBILE */

@media (max-width: 760px) {

    .dz-services-page__grid,
    .dz-process-page__grid,
    .dz-project,
    .dz-home-references__grid,
    .dz-contact-layout {
        grid-template-columns: 1fr;
    }

    .dz-project:nth-child(even) .dz-project__visual {
        order: initial;
    }

    .dz-page-hero {
        padding:
            48px
            0
            38px;
    }

    .dz-project {
        padding: 20px;
    }

}


/* ============================================================
   REFERENCE – CELÉ SCREENSHOTY BEZ OŘEZÁNÍ
   ============================================================ */

/*
   Screenshoty referencí jsou širokoúhlé.
   Nepoužíváme už 16:10, které je zbytečně ořezávalo.
*/

.dz-project__visual {
    aspect-ratio: 2.18 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        #f2f6fa;
}

.dz-project__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain !important;
    object-position: center center;
}


/* totéž pro malé reference na homepage */

.dz-home-reference__image {
    aspect-ratio: 2.18 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        #f2f6fa;
}

.dz-home-reference__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain !important;
    object-position: center center;
}



/* ============================================================
   TYPOGRAFIE – ZÁKAZ DĚLENÍ SLOV
   ============================================================ */

body.dz-site,
body.dz-site p,
body.dz-site li,
body.dz-site a,
body.dz-site span,
body.dz-site h1,
body.dz-site h2,
body.dz-site h3,
body.dz-site h4,
body.dz-site h5,
body.dz-site h6 {
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal;
}


/*
   Nadpisy navíc nesmí lámat slovo uvnitř.
   Přesune se vždy celé slovo na další řádek.
*/

.dz-page-hero h1,
.dz-hero__title,
.dz-section-heading h2,
.dz-benefits__intro h2,
.dz-cta h2,
.dz-project__content h2 {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}


/* ============================================================
   DZ GLOBAL – ABSOLUTNÍ ZÁKAZ DĚLENÍ SLOV
   ============================================================ */

/*
   Na celém webu:
   - žádné automatické dělení slov
   - žádné lámání uvnitř slov
   - řádek se smí zalomit pouze mezi slovy
*/

body.dz-site,
body.dz-site * {
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/*
   Nadpisy:
   navíc pěknější rozložení řádků.
*/

body.dz-site h1,
body.dz-site h2,
body.dz-site h3,
body.dz-site h4,
body.dz-site h5,
body.dz-site h6 {
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    text-wrap: balance;
}


/*
   Běžné odstavce:
   prohlížeč se pokusí vytvořit přirozenější řádky,
   ale nikdy nerozdělí slovo.
*/

body.dz-site p {
    text-wrap: pretty;
}


/*
   Výjimka pouze pro technické řetězce.
   Dlouhý e-mail nebo URL by jinak mohl na malém mobilu
   přetéct mimo obrazovku.
*/

body.dz-site code,
body.dz-site pre,
body.dz-site .dz-contact-card__email {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}


/* ============================================================
   DZ CONTACT PAGE v2
   ============================================================ */


/* ============================================================
   HERO
   ============================================================ */

.dz-contact-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(45px, 6vw, 78px)
        0
        clamp(55px, 7vw, 90px);

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(22,132,232,.12),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #f3f8ff 0%,
            #ffffff 100%
        );
}


.dz-contact-hero::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    left: -220px;
    bottom: -240px;

    border-radius: 50%;

    border:
        1px solid rgba(20,86,160,.08);

    box-shadow:
        0 0 0 60px rgba(20,86,160,.025),
        0 0 0 120px rgba(20,86,160,.016);

    pointer-events: none;
}


.dz-contact-hero__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(330px, .7fr);

    gap:
        clamp(50px, 8vw, 105px);

    align-items: center;
}


.dz-contact-hero__content {
    max-width: 720px;
}


.dz-contact-hero h1 {
    max-width: 11ch;

    margin:
        0
        0
        25px;

    font-size:
        clamp(3.1rem, 6vw, 5.5rem);

    line-height: 1.01;

    letter-spacing: -.045em;

    text-wrap: balance;
}


.dz-contact-hero__lead {
    max-width: 660px;

    font-size:
        clamp(1.05rem, 1.5vw, 1.2rem);

    line-height: 1.75;
}


.dz-contact-hero__points {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 34px;
}


.dz-contact-hero__points > div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px
        13px;

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 999px;

    background:
        rgba(255,255,255,.72);
}


.dz-contact-hero__points span {
    color:
        var(--dz-primary);

    font-size: .72rem;
    font-weight: 850;
}


.dz-contact-hero__points p {
    margin: 0 !important;

    color:
        var(--dz-text) !important;

    font-size: .82rem;
    font-weight: 650;
}


/* ============================================================
   FOTO
   ============================================================ */

.dz-contact-photo {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    max-height: 560px;

    border:
        1px solid rgba(20,86,160,.11);

    border-radius: 32px;

    background: #eaf2fa;

    box-shadow:
        0 25px 65px rgba(12,46,90,.15);
}


.dz-contact-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


.dz-contact-photo__caption {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;

    padding:
        15px
        18px;

    border:
        1px solid rgba(255,255,255,.28);

    border-radius: 18px;

    background:
        rgba(8,29,57,.76);

    color: white;

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}


.dz-contact-photo__caption strong {
    color: white;

    font-size: 1.05rem;
}


.dz-contact-photo__caption span {
    margin-top: 2px;

    color:
        rgba(255,255,255,.68);

    font-size: .78rem;
}


/* ============================================================
   HLAVNÍ KONTAKTNÍ ČÁST
   ============================================================ */

.dz-contact-main {
    padding:
        clamp(55px, 7vw, 95px)
        0;

    background:
        #f6f9fd;
}


.dz-contact-main__grid {
    display: grid;

    grid-template-columns:
        minmax(290px, .70fr)
        minmax(0, 1.30fr);

    gap: 28px;

    align-items: stretch;
}


/* ============================================================
   LEVÝ KONTAKTNÍ PANEL
   ============================================================ */

.dz-contact-direct {
    position: relative;
    overflow: hidden;

    padding:
        clamp(28px, 4vw, 42px);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #123e76,
            #092850
        );

    color: white;

    box-shadow:
        0 22px 55px rgba(8,32,66,.16);
}


.dz-contact-direct::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    bottom: -120px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 0 45px rgba(255,255,255,.025);

    pointer-events: none;
}


.dz-contact-direct .dz-eyebrow {
    color:
        #8ac7ff !important;
}


.dz-contact-direct h2 {
    max-width: 12ch;

    margin-bottom: 18px;

    color: white;

    font-size:
        clamp(2rem, 3.2vw, 3rem);

    line-height: 1.06;
}


.dz-contact-direct__intro {
    margin-bottom: 34px !important;

    color:
        rgba(255,255,255,.68) !important;

    line-height: 1.7;
}


/* ============================================================
   KONTAKTNÍ METODY
   ============================================================ */

.dz-contact-method {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        44px 1fr;

    gap: 15px;

    align-items: start;

    padding:
        20px
        0;

    border-top:
        1px solid rgba(255,255,255,.10);
}


.dz-contact-method__icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.09);

    color: white;

    font-weight: 800;
}


.dz-contact-method small {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255,255,255,.45);

    font-size: .70rem;
    font-weight: 750;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.dz-contact-method a {
    color: white !important;

    font-size: 1.05rem;
    font-weight: 750;

    text-decoration: none !important;
}


.dz-contact-method a:hover {
    color:
        #a8d5ff !important;
}


.dz-phone-note {
    display: block;

    max-width: 28ch;

    margin-top: 5px;

    color:
        rgba(255,255,255,.42);

    font-size: .69rem;

    line-height: 1.4;
}


.dz-phone-reveal.is-revealed {
    letter-spacing: .02em;
}


/* ============================================================
   TIP PANEL
   ============================================================ */

.dz-contact-tip {
    position: relative;
    z-index: 1;

    margin-top: 28px;

    padding: 20px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 20px;

    background:
        rgba(255,255,255,.055);
}


.dz-contact-tip strong {
    color: white;
}


.dz-contact-tip p {
    margin:
        7px
        0
        0 !important;

    color:
        rgba(255,255,255,.58) !important;

    font-size: .88rem;

    line-height: 1.6;
}


/* ============================================================
   FORM CARD
   ============================================================ */

.dz-contact-form-card {
    padding:
        clamp(30px, 4.5vw, 52px);

    border:
        1px solid rgba(20,86,160,.10);

    border-radius: 30px;

    background: white;

    box-shadow:
        0 20px 55px rgba(12,46,90,.08);
}


.dz-contact-form-card__head {
    max-width: 670px;

    margin-bottom: 34px;
}


.dz-contact-form-card__head h2 {
    margin:
        0
        0
        13px;

    font-size:
        clamp(2rem, 3.5vw, 3.2rem);

    line-height: 1.07;
}


.dz-contact-form-card__head > p:last-child {
    margin-bottom: 0 !important;

    line-height: 1.65;
}


/* ============================================================
   FORMULÁŘ
   ============================================================ */

.dz-contact-form form {
    margin: 0;
}


.dz-contact-form .form-field {
    margin-bottom: 20px;
}


.dz-contact-form label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--dz-text);

    font-size: .86rem;
    font-weight: 750;
}


.dz-contact-form input[type="text"],
.dz-contact-form input[type="email"],
.dz-contact-form input[type="tel"],
.dz-contact-form select,
.dz-contact-form textarea {
    width: 100%;

    min-height: 52px;

    margin: 0;

    padding:
        12px
        15px;

    border:
        1px solid rgba(20,86,160,.16);

    border-radius: 13px;

    outline: none;

    background:
        #f8fbff;

    color:
        var(--dz-text);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    box-shadow: none;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}


.dz-contact-form textarea {
    min-height: 155px;

    resize: vertical;
}


.dz-contact-form input:focus,
.dz-contact-form select:focus,
.dz-contact-form textarea:focus {
    border-color:
        var(--dz-primary-light);

    background: white;

    box-shadow:
        0 0 0 4px rgba(22,132,232,.10);
}


.dz-contact-form button[type="submit"],
.dz-contact-form input[type="submit"] {
    min-height: 54px;

    margin-top: 8px;

    padding:
        13px
        25px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--dz-primary),
            var(--dz-primary-light)
        );

    color: white;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: .96rem;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(20,86,160,.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.dz-contact-form button[type="submit"]:hover,
.dz-contact-form input[type="submit"]:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 17px 34px rgba(20,86,160,.27);
}


.dz-contact-form__privacy {
    margin:
        18px
        0
        0 !important;

    color:
        #8692a2 !important;

    font-size: .75rem;

    line-height: 1.5;
}


/* ============================================================
   FORM MESSAGES
   ============================================================ */

.dz-contact-form .alert,
.dz-contact-form .notices {
    margin-bottom: 22px;

    border-radius: 13px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .dz-contact-hero__grid {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 35px;
    }

    .dz-contact-main__grid {
        grid-template-columns:
            minmax(260px, .65fr)
            minmax(0, 1.35fr);
    }

}


/* ============================================================
   MOBIL
   ============================================================ */

@media (max-width: 760px) {

    .dz-contact-hero {
        padding:
            36px
            0
            50px;
    }

    .dz-contact-hero__grid,
    .dz-contact-main__grid {
        grid-template-columns: 1fr;
    }

    .dz-contact-hero h1 {
        max-width: 100%;

        font-size:
            clamp(2.7rem, 12vw, 4.1rem);
    }

    .dz-contact-hero__points {
        gap: 8px;
    }

    .dz-contact-hero__points > div {
        padding:
            7px
            10px;
    }

    .dz-contact-hero__visual {
        max-width: 430px;

        margin-inline: auto;
    }

    .dz-contact-photo {
        max-height: 500px;
    }

    .dz-contact-direct,
    .dz-contact-form-card {
        padding:
            26px
            21px;

        border-radius: 24px;
    }

    .dz-contact-direct h2 {
        max-width: 100%;
    }

}



/* ============================================================
   CONTACT – DEFINITIVNÍ TYPOGRAFIE
   ============================================================ */

body.dz-contact-v2,
body.dz-contact-v2 *,
.dz-contact-v2,
.dz-contact-v2 * {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* nadpisy – čistší, méně zakulacené */

.dz-contact-v2 h1,
.dz-contact-v2 h2,
.dz-contact-v2 h3,
.dz-contact-v2 h4,
.dz-contact-v2 h5,
.dz-contact-v2 h6 {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: -.035em !important;
}


/* hlavní nadpisy */

.dz-contact-hero h1 {
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
}

.dz-contact-direct h2 {
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
}

.dz-contact-form-card__head h2 {
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
}


/* malé modré nadpisy necháme technické */

.dz-contact-v2 .dz-eyebrow {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .12em !important;
}



/* ============================================================
   DZ SERVICES PAGE
   ============================================================ */

.dz-services-page,
.dz-services-page * {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ============================================================
   HERO
   ============================================================ */

.dz-services-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(50px, 7vw, 84px)
        0
        clamp(42px, 6vw, 72px);

    background:
        radial-gradient(circle at 85% 15%, rgba(39,120,226,.12), transparent 24rem),
        radial-gradient(circle at 10% 80%, rgba(39,120,226,.08), transparent 22rem),
        linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
}

.dz-services-hero::before {
    content: "";

    position: absolute;
    left: -120px;
    top: 140px;

    width: 300px;
    height: 300px;

    border-radius: 50%;
    border: 1px solid rgba(25,92,176,.08);

    box-shadow:
        0 0 0 34px rgba(25,92,176,.03),
        0 0 0 68px rgba(25,92,176,.02);
}

.dz-services-hero__inner {
    position: relative;
    z-index: 1;
}

.dz-services-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
    gap: clamp(34px, 6vw, 78px);
    align-items: center;
}

.dz-services-hero__content h1 {
    max-width: 11.5ch;
    margin: 0 0 22px;
    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 800;
    text-wrap: balance;
}

.dz-services-hero__lead {
    max-width: 760px;
    font-size: clamp(1.03rem, 1.45vw, 1.18rem);
    line-height: 1.78;
    color: #334155;
}

.dz-services-hero__lead p:last-child {
    margin-bottom: 0;
}

.dz-services-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.dz-services-hero__badges span {
    padding: 10px 14px;
    border: 1px solid rgba(24,87,163,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    color: #1d4c86;
    font-size: .84rem;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(15,39,73,.04);
}

.dz-services-hero__visual {
    display: flex;
    justify-content: flex-end;
}

.dz-services-hero-card {
    position: relative;
    overflow: hidden;

    width: min(100%, 420px);
    min-height: 360px;
    padding: 28px;

    border: 1px solid rgba(24,87,163,.10);
    border-radius: 30px;

    background:
        linear-gradient(155deg, #113d76 0%, #0d2e59 100%);

    color: white;

    box-shadow:
        0 24px 62px rgba(9,33,66,.16);
}

.dz-services-hero-card__line {
    width: 62px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    margin-bottom: 28px;
}

.dz-services-hero-card__items {
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.dz-services-hero-card__items div {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.06);
}

.dz-services-hero-card__items span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #8fd0ff;
    box-shadow: 0 0 0 5px rgba(143,208,255,.14);
}

.dz-services-hero-card__items strong {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.dz-services-hero-card__accent {
    position: absolute;
    right: -70px;
    bottom: -85px;

    width: 220px;
    height: 220px;
    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.09);

    box-shadow:
        0 0 0 36px rgba(255,255,255,.03),
        0 0 0 72px rgba(255,255,255,.02);
}


/* ============================================================
   SERVICES GRID
   ============================================================ */

.dz-services-list {
    position: relative;
    padding: clamp(24px, 4vw, 44px) 0 clamp(44px, 6vw, 80px);
    background: #ffffff;
}

.dz-services-list__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.dz-service-card {
    position: relative;
    overflow: hidden;

    min-height: 100%;
    padding: 30px 30px 26px;

    border: 1px solid rgba(18,72,138,.10);
    border-radius: 28px;

    background:
        linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);

    box-shadow:
        0 16px 42px rgba(13,42,80,.06);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.dz-service-card::before {
    content: "";

    position: absolute;
    inset: auto -60px -80px auto;

    width: 180px;
    height: 180px;
    border-radius: 50%;

    background:
        radial-gradient(circle, rgba(46,122,223,.10), rgba(46,122,223,0) 70%);
    pointer-events: none;
}

.dz-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 54px rgba(13,42,80,.09);
    border-color: rgba(18,72,138,.16);
}

.dz-service-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.dz-service-card__number {
    color: #2667c9;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.dz-service-card__icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border-radius: 18px;

    background:
        linear-gradient(135deg, #edf5ff 0%, #dfeeff 100%);

    color: #1456a0;

    box-shadow: inset 0 0 0 1px rgba(20,86,160,.08);
}

.dz-service-card__icon svg {
    width: 26px;
    height: 26px;
}

.dz-service-card__heading {
    margin-bottom: 14px;
}

.dz-service-card__bar {
    width: 36px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #111827;
}

.dz-service-card__heading h2 {
    margin: 0;
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 800;
    color: #111827;
    text-wrap: balance;
}

.dz-service-card__text {
    margin: 0 0 18px !important;
    color: #334155 !important;
    font-size: 1rem;
    line-height: 1.76;
}

.dz-service-card__points {
    display: grid;
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.dz-service-card__points li {
    position: relative;
    padding-left: 22px;
    color: #475569;
    line-height: 1.65;
}

.dz-service-card__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .64em;

    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2f7ae1;
    box-shadow: 0 0 0 4px rgba(47,122,225,.12);
}

.dz-service-card__highlight {
    margin-top: 18px;
    padding: 13px 14px;

    border-left: 3px solid #2f7ae1;
    border-radius: 0 14px 14px 0;

    background: #f2f8ff;
    color: #174680;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.6;
}


/* ============================================================
   PROCESS
   ============================================================ */

.dz-services-process {
    position: relative;
    overflow: hidden;

    padding: clamp(54px, 7vw, 90px) 0;
    background:
        linear-gradient(180deg, #f7faff 0%, #f1f6fc 100%);
}

.dz-services-process::after {
    content: "";

    position: absolute;
    right: -140px;
    top: -140px;

    width: 320px;
    height: 320px;
    border-radius: 50%;

    border: 1px solid rgba(24,87,163,.08);

    box-shadow:
        0 0 0 40px rgba(24,87,163,.03),
        0 0 0 80px rgba(24,87,163,.02);
}

.dz-services-section-head {
    max-width: 840px;
    margin-bottom: 34px;
}

.dz-services-section-head h2 {
    margin: 0;
    font-size: clamp(2.3rem, 4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.04em;
    font-weight: 800;
    text-wrap: balance;
}

.dz-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dz-process-card {
    padding: 24px 22px 22px;
    border: 1px solid rgba(18,72,138,.10);
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 14px 30px rgba(13,42,80,.05);
}

.dz-process-card__number {
    display: inline-block;
    margin-bottom: 15px;

    color: #2667c9;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.dz-process-card h3 {
    margin: 0 0 10px;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #111827;
}

.dz-process-card p {
    margin: 0 !important;
    color: #475569 !important;
    line-height: 1.7;
}


/* ============================================================
   CTA
   ============================================================ */

.dz-services-cta {
    padding: clamp(50px, 7vw, 90px) 0;
    background: #ffffff;
}

.dz-services-cta__inner {
    position: relative;
    overflow: hidden;

    max-width: 980px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px);

    border-radius: 32px;
    border: 1px solid rgba(18,72,138,.10);

    background:
        radial-gradient(circle at 95% 10%, rgba(55,135,237,.12), transparent 14rem),
        linear-gradient(145deg, #123e76, #0b2c55);

    color: white;

    box-shadow:
        0 24px 54px rgba(8,30,61,.16);
}

.dz-services-cta__inner::after {
    content: "";

    position: absolute;
    right: -90px;
    bottom: -110px;

    width: 220px;
    height: 220px;
    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 0 36px rgba(255,255,255,.03),
        0 0 0 72px rgba(255,255,255,.02);
}

.dz-services-cta__inner h2 {
    position: relative;
    z-index: 1;

    max-width: 11ch;
    margin: 0 0 14px;

    color: white;
    font-size: clamp(2.1rem, 4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 800;
    text-wrap: balance;
}

.dz-services-cta__inner p:not(.dz-eyebrow) {
    position: relative;
    z-index: 1;

    max-width: 700px;
    margin: 0 0 24px !important;

    color: rgba(255,255,255,.76) !important;
    font-size: 1.03rem;
    line-height: 1.75;
}

.dz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 14px 24px;

    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dz-button--primary {
    position: relative;
    z-index: 1;

    background: #ffffff;
    color: #10396d !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.dz-button--primary:hover {
    transform: translateY(-2px);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .dz-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dz-services-hero__grid,
    .dz-services-list__grid {
        grid-template-columns: 1fr;
    }

    .dz-services-hero__visual {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .dz-services-hero {
        padding: 36px 0 40px;
    }

    .dz-services-hero__content h1 {
        max-width: 100%;
        font-size: clamp(2.7rem, 11vw, 4.1rem);
    }

    .dz-services-hero-card {
        min-height: auto;
    }

    .dz-process-grid {
        grid-template-columns: 1fr;
    }

    .dz-service-card,
    .dz-process-card,
    .dz-services-cta__inner {
        border-radius: 24px;
    }

    .dz-service-card {
        padding: 24px 22px 22px;
    }
}


/* ============================================================
   DZ HEADER – JEDNOTNÁ TYPOGRAFIE NA VŠECH STRÁNKÁCH
   ============================================================ */

/*
   Header nesmí přebírat fonty ani font-weight
   z jednotlivých stránek.
*/

#header.dz-header,
#header.dz-header *,
.dz-header,
.dz-header * {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* Weby od Davida */

#header .dz-brand__name,
.dz-header .dz-brand__name {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 1.28rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;

    letter-spacing: -.025em !important;
}


/* Tvorba webů na zakázku */

#header .dz-brand__tagline,
.dz-header .dz-brand__tagline {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: .80rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;

    letter-spacing: -.01em !important;
}


/* Navigace rovněž vždy stejná */

#header .dz-nav a,
.dz-header .dz-nav a {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-weight: 700 !important;
}


/* Mobil */

@media (max-width: 760px) {

    #header .dz-brand__name,
    .dz-header .dz-brand__name {
        font-size: 1rem !important;
    }

    #header .dz-brand__tagline,
    .dz-header .dz-brand__tagline {
        font-size: .68rem !important;
    }

}