:root {
    --page-bg: #e9ecee;
    --page-bg-2: #f1f2f2;

    --card-bg: #f8f8f6;
    --logo-bg: #f2f3f1;

    --text-dark: #2c3338;
    --text: #505a60;
    --text-soft: #6d777d;

    --border: #d9dddf;

    --orange: #f58220;
    --orange-soft: rgba(245, 130, 32, 0.10);

    --blue: #199fd0;
    --blue-soft: rgba(25, 159, 208, 0.10);
}


/* -------------------------------------------------
   RESET
------------------------------------------------- */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;

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

    color: var(--text);

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(245, 130, 32, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(25, 159, 208, 0.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--page-bg-2),
            var(--page-bg)
        );
}


/* -------------------------------------------------
   PAGE
------------------------------------------------- */

.page {
    width: 100%;
    min-height: 100vh;

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

    padding: 28px 20px;
}


/* -------------------------------------------------
   HLAVNÍ PREZENTACE
------------------------------------------------- */

.presentation {
    width: 100%;
    max-width: 1000px;

    background: var(--card-bg);

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

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(38, 48, 55, 0.13);
}


/* -------------------------------------------------
   LOGO
------------------------------------------------- */

.logo-section {
    padding: 26px 42px 22px;

    background:
        linear-gradient(
            135deg,
            #f7f7f5 0%,
            var(--logo-bg) 100%
        );

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

.company-logo {
    display: block;

    width: 100%;
    max-width: 760px;

    height: auto;

    margin: 0 auto;
}


/* -------------------------------------------------
   BAREVNÁ LINKA
------------------------------------------------- */

.color-line {
    display: flex;

    width: 100%;
    height: 5px;
}

.color-line span {
    flex: 1;
}

.color-line .orange {
    background:
        linear-gradient(
            90deg,
            #f29a50,
            var(--orange)
        );
}

.color-line .blue {
    background:
        linear-gradient(
            90deg,
            var(--blue),
            #56b8dc
        );
}


/* -------------------------------------------------
   CONTENT
------------------------------------------------- */

.content {
    max-width: 820px;

    margin: 0 auto;

    padding:
        38px 54px
        42px;
}


/* -------------------------------------------------
   DATUM
------------------------------------------------- */

.date-badge {
    display: inline-block;

    margin-bottom: 20px;

    padding:
        7px 14px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--orange-soft),
            var(--blue-soft)
        );

    border:
        1px solid rgba(90, 105, 115, 0.12);

    color: #59636a;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


/* -------------------------------------------------
   NADPIS
------------------------------------------------- */

h1 {
    margin:
        0
        0
        28px;

    font-size: 34px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.4px;

    color: var(--text-dark);
}


/* -------------------------------------------------
   TEXT
------------------------------------------------- */

.content p {
    margin:
        0
        0
        22px;

    font-size: 17px;
    line-height: 1.78;

    color: var(--text);
}

.content .intro {
    font-size: 18px;

    color: #444d52;
}

.content strong {
    color: #252c31;

    font-weight: 700;
}


/* -------------------------------------------------
   NÁZVY FIREM
------------------------------------------------- */

.company-name {
    display: inline-block;

    white-space: nowrap;

    font-weight: 700;

    color: #343c41;
}

.fremach-name {
    color: #168ab5 !important;
}


/* -------------------------------------------------
   PODĚKOVÁNÍ
------------------------------------------------- */

.thanks {
    margin-top: 30px;

    padding:
        24px 26px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(245, 130, 32, 0.065),
            rgba(25, 159, 208, 0.065)
        );

    border:
        1px solid rgba(75, 90, 100, 0.08);

    font-size: 18px;
    line-height: 1.6;

    font-weight: 600;

    color: var(--text-dark);
}


/* -------------------------------------------------
   KONTAKT
------------------------------------------------- */

.contact-box {
    margin-top: 24px;

    display: flex;
    align-items: center;

    gap: 9px;

    width: fit-content;

    padding:
        14px 18px;

    border-radius: 10px;

    background: #eef3f5;

    border:
        1px solid #d6e2e7;

    color: var(--text-dark);

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

.contact-box:hover {
    transform: translateY(-2px);

    border-color:
        rgba(25, 159, 208, 0.35);

    box-shadow:
        0 8px 22px rgba(38, 55, 64, 0.09);
}

.contact-box strong {
    font-size: 15px;
}

.contact-box a {
    color: #138aad;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;
}

.contact-box a:hover {
    text-decoration: underline;
}

.contact-box .arrow {
    margin-left: 2px;

    color: var(--blue);

    font-size: 19px;
}


/* -------------------------------------------------
   TABLET
------------------------------------------------- */

@media (max-width: 850px) {

    .page {
        align-items: flex-start;

        padding:
            18px 14px
            28px;
    }

    .presentation {
        border-radius: 18px;
    }

    .logo-section {
        padding:
            22px 28px
            19px;
    }

    .content {
        padding:
            32px 34px
            36px;
    }

    h1 {
        font-size: 30px;
    }

}


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

@media (max-width: 560px) {

    .page {
        padding:
            9px
            8px
            16px;
    }

    .presentation {
        border-radius: 13px;
    }

    .logo-section {
        padding:
            14px 13px
            13px;
    }

    .color-line {
        height: 4px;
    }

    .content {
        padding:
            25px 18px
            27px;
    }

    .date-badge {
        margin-bottom: 17px;

        font-size: 12px;
    }

    h1 {
        margin-bottom: 21px;

        font-size: 25px;

        line-height: 1.3;
    }

    .content p,
    .content .intro {
        font-size: 15px;

        line-height: 1.7;
    }

    .thanks {
        margin-top: 24px;

        padding:
            19px 18px;

        font-size: 16px;
    }

    .contact-box {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        margin-top: 18px;

        padding:
            13px 12px;
    }

}


/* -------------------------------------------------
   VELMI MALÝ MOBIL
------------------------------------------------- */

@media (max-width: 390px) {

    .content {
        padding:
            22px 14px
            24px;
    }

    h1 {
        font-size: 23px;
    }

    .company-name {
        font-size: 0.94em;
    }

}