:root {
    --femax-red: #e8472d;
    --femax-red-dark: #cf4729;
    --ink: #2f343b;
    --muted: #666d76;
    --line: #e7eaed;
    --page: #f6f8fa;
    --panel: #ffffff;
    --max-width: 1180px;
    --radius: 7px;
    --shadow: 0 8px 24px rgba(31, 43, 56, .035);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* Společná šířka pro header, menu, obsah i footer */
.site-header__inner,
.site-nav__inner,
.site-shell,
.site-footer {
    width: min(var(--max-width), calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* HEADER */
.top-strip {
    height: 24px;
    background: linear-gradient(#f7f8f9, #f1f2f4);
    border-bottom: 1px solid #eceef0;
}
.site-header {
    background: transparent;
}
.site-header__inner {
    min-height: 104px;
    padding: 0 42px 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: #fff;
    border-bottom: 1px solid #f0c9c3;
}
.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}
.brand img {
    display: block;
    width: 190px;
    height: auto;
}
.tagline {
    margin: 0;
    color: #3f4d67;
    font-size: clamp(1.35rem, 2.3vw, 1.95rem);
    font-weight: 300;
    font-style: italic;
    white-space: nowrap;
}
.tagline strong {
    color: var(--femax-red);
    font-weight: 650;
    font-style: normal;
}
.site-nav {
    background: transparent;
}
.site-nav__inner {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #edf0f2;
}
.site-nav__link {
    position: relative;
    min-height: 58px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    color: #444b53;
    text-decoration: none;
    font-size: .96rem;
    font-weight: 400;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}
.site-nav__link + .site-nav__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 22px;
    background: #e4e7ea;
    transform: translateY(-50%);
}
.site-nav__link:hover {
    color: var(--femax-red-dark);
    background: #fffafa;
}
.site-nav__link.is-active { color: var(--femax-red-dark); }
.site-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 2px;
    background: var(--femax-red);
}
.site-nav__home {
    flex: 0 0 66px;
    padding: 0;
}
.site-nav__home svg {
    width: 27px;
    height: 27px;
    fill: var(--femax-red);
}
.site-nav__home.is-active::after {
    left: 17px;
    right: 17px;
}

/* OBSAH */
.site-shell {
    margin-top: 18px;
}
.section-card {
    margin-top: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.site-shell > .section-card:first-child { margin-top: 0; }

.hero-card {
    padding: 0;
    overflow: hidden;
}
.hero-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* Krátké firemní slogany */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}
.trust-card {
    position: relative;
    min-width: 0;
    min-height: 98px;
    padding: 18px 26px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    align-items: center;
}
/* Jemné, krátké oddělovače místo čáry přes celou výšku. */
.trust-card:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 38px;
    background: #e7e9ec;
    transform: translateY(-50%);
}
/* 30+ má stejný vizuální rámec jako ostatní ikony. */
.experience-mark,
.trust-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #e9ecef;
    border-radius: 50%;
    background: #fff;
}
.experience-mark {
    color: #c85a35;
    font-size: .96rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.015em;
    white-space: nowrap;
    text-align: center;
}
.trust-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: var(--femax-red);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.trust-copy h2 {
    margin: 0;
    color: var(--femax-red-dark);
    font-size: 1rem;
    font-weight: 600;
}

/* O firmě – kompletní prezentace přímo na homepage */
.about-showcase {
    padding: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 46px;
    align-items: stretch;
}
.eyebrow {
    margin: 0 0 8px;
    color: var(--femax-red-dark);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.about-showcase h1 {
    max-width: 690px;
    margin: 0 0 15px;
    color: var(--ink);
    font-size: clamp(1.28rem, 1.55vw, 1.5rem);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.012em;
}
.about-intro {
    max-width: 690px;
    margin: 0 0 11px;
    color: #444b53;
    font-size: 1.08rem;
    line-height: 1.65;
}
.about-showcase__main > p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}
.about-showcase__highlights {
    display: grid;
    align-content: center;
    border-left: 1px solid var(--line);
}
.about-highlight {
    padding: 15px 0 15px 30px;
    border-bottom: 1px solid #f0f2f3;
}
.about-highlight:last-child { border-bottom: 0; }
.about-highlight strong {
    display: block;
    margin-bottom: 3px;
    color: var(--femax-red-dark);
    font-size: .98rem;
    font-weight: 600;
}
.about-highlight span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

/* =========================================================
   SPOLEČNÉ PANELY
   ========================================================= */

.section-card {
    margin-top: 18px;
    background: #ffffff;
    border: 1px solid #e7e9ec;
    border-radius: 7px;
    box-shadow: 0 6px 20px rgba(26, 34, 44, 0.035);
}


/* =========================================================
   O FIRMĚ
   ========================================================= */

.about-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.95fr);
    overflow: hidden;
}

.about-showcase__main {
    padding: 28px 34px 30px;
}

.about-showcase__highlights {
    padding: 18px 28px;
    border-left: 1px solid #e7e9ec;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eyebrow {
    margin: 0 0 9px;
    color: #c55232;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.about-showcase h1 {
    margin: 0 0 15px;
    color: #29313d;
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.about-showcase p {
    margin: 0 0 13px;
    color: #626973;
    font-size: 0.95rem;
    line-height: 1.65;
}

.about-showcase p:last-child {
    margin-bottom: 0;
}

.about-intro {
    color: #3e4650 !important;
    font-size: 1rem !important;
}

.about-highlight {
    padding: 13px 0;
    border-bottom: 1px solid #eceef0;
}

.about-highlight:last-child {
    border-bottom: 0;
}

.about-highlight strong {
    display: block;
    margin-bottom: 3px;
    color: #c55232;
    font-size: 0.94rem;
    font-weight: 600;
}

.about-highlight span {
    display: block;
    color: #69717a;
    font-size: 0.86rem;
    line-height: 1.5;
}


/* =========================================================
   KLIENTI
   ========================================================= */

.clients-section {
    padding: 23px 28px 19px;
}


/* červená linka + ruce */

.clients-divider {
    width: min(430px, 70%);
    margin: 0 auto 24px;

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

.clients-divider::before,
.clients-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e8b7ad;
}

.clients-divider__icon {
    width: 42px;
    height: 42px;
    margin: 0 14px;

    flex: 0 0 42px;

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

    background: #ffffff;
    border: 1px solid #efd6d0;
    border-radius: 50%;
}

.clients-divider__icon svg {
    display: block;
    width: 27px;
    height: 27px;
    max-width: 27px;
    max-height: 27px;
}


/* =========================================================
   LOGA
   ========================================================= */

.clients-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 11px;
}

.client-logo {
    min-width: 0;
    min-height: 88px;

    padding: 14px 12px;

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

    background: #fbfbfc;
    border: 1px solid #e9ebee;
    border-radius: 7px;

    overflow: hidden;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.client-logo:hover {
    background: #ffffff;
    border-color: #dcdfe3;
    transform: translateY(-1px);
}

.client-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 120px;
    max-height: 42px;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.68;

    transition:
        filter 0.18s ease,
        opacity 0.18s ease;
}

/*
   Na hover může logo zůstat šedé, jen o něco výraznější.
   Pokud později budeme chtít původní barvy, změníme pouze toto.
*/

.client-logo:hover img {
    opacity: 0.9;
}


/* =========================================================
   DALŠÍ →
   ========================================================= */

.clients-more {
    margin-top: 14px;

    display: flex;
    justify-content: flex-end;
}

.clients-more a {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #c55232;

    font-size: 0.82rem;
    font-weight: 500;

    text-decoration: none;
}

.clients-more a:hover {
    color: #a84028;
    text-decoration: underline;
}

.clients-more span {
    font-size: 0.95rem;
}


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

@media (max-width: 1000px) {

    .about-showcase {
        grid-template-columns: 1fr;
    }

    .about-showcase__highlights {
        border-left: 0;
        border-top: 1px solid #e7e9ec;
        padding: 14px 28px;
    }

    .clients-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


/* =========================================================
   MENŠÍ TABLET
   ========================================================= */

@media (max-width: 760px) {

    .clients-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


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

@media (max-width: 560px) {

    .section-card {
        margin-top: 12px;
        border-radius: 6px;
    }

    .about-showcase__main {
        padding: 22px 20px 24px;
    }

    .about-showcase__highlights {
        padding: 10px 20px;
    }

    .about-showcase h1 {
        font-size: 1.3rem;
    }

    .clients-section {
        padding: 20px 15px 16px;
    }

    .clients-divider {
        width: 88%;
        margin-bottom: 19px;
    }

    .clients-divider__icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        margin: 0 11px;
    }

    .clients-divider__icon svg {
        width: 24px;
        height: 24px;
    }

    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .client-logo {
        min-height: 80px;
        padding: 12px 9px;
    }

    .client-logo img {
        max-width: 105px;
        max-height: 37px;
    }

}
/* KLIENTI */
.clients-section {
    padding: 22px 30px 28px;
}
.clients-divider {
    position: relative;
    width: min(440px, 82%);
    height: 34px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clients-divider::before,
.clients-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e7b8ae;
}
.clients-divider__icon {
    width: 42px;
    height: 42px;
    overflow: hidden;
    margin: 0 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #efd5cf;
    border-radius: 50%;
}
.clients-divider__icon svg {
    display: block;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    fill: none;
    stroke: var(--femax-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.clients-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}
.client-logo {
    min-width: 0;
    min-height: 92px;
    padding: 15px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbfbfc;
    border: 1px solid #e8ebee;
    border-radius: 7px;
}
.client-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .68;
    transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.client-logo:hover img {
    opacity: .86;
    transform: translateY(-1px);
}

.clients-more {
    margin-top: 14px;
    text-align: right;
}
.clients-more a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--femax-red-dark);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
}
.clients-more a:hover {
    text-decoration: underline;
}

/* FOOTER */
.site-footer {
    margin-top: 13px;
    padding: 0 4px 24px;
    color: #85898f;
    font-size: .75rem;
    text-align: center;
}
.site-footer p { margin: 0; }

/* TABLET */
@media (max-width: 1000px) {
    .site-header__inner,
    .site-nav__inner,
    .site-shell,
    .site-footer {
        width: min(var(--max-width), calc(100% - 28px));
    }

    .site-nav__inner { flex-wrap: wrap; }
    .site-nav__link {
        flex: 1 1 33.333%;
        border-bottom: 1px solid #edf0f2;
    }
    .site-nav__home { flex-basis: 33.333%; }

    .trust-grid { grid-template-columns: 1fr; }
    .trust-card {
        min-height: 0;
    }
    /* Po složení pod sebe se oddělovač otočí na krátkou vodorovnou čárku. */
    .trust-card:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        width: 44px;
        height: 1px;
        transform: translateX(-50%);
    }

    .about-showcase {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .about-showcase__highlights {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .about-highlight {
        padding-left: 0;
    }

    .clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* MOBIL */
@media (max-width: 680px) {
    .top-strip { height: 16px; }
    .site-header__inner {
        min-height: auto;
        padding: 18px 14px 16px;
        flex-direction: column;
        gap: 8px;
    }
    .brand img { width: 165px; }
    .tagline {
        font-size: 1.2rem;
        white-space: normal;
        text-align: center;
    }

    .site-nav__link,
    .site-nav__home {
        flex: 1 1 50%;
        min-height: 49px;
        padding: 0 12px;
        font-size: .86rem;
    }
    .site-nav__link + .site-nav__link::before { height: 20px; }
    .site-nav__link.is-active::after {
        left: 12px;
        right: 12px;
    }
    .site-nav__home.is-active::after {
        left: 20px;
        right: 20px;
    }

    .site-shell { margin-top: 10px; }

    .trust-card {
        grid-template-columns: 48px 1fr;
        gap: 13px;
        padding: 17px 18px;
    }
    .experience-mark,
    .trust-icon {
        width: 44px;
        height: 44px;
    }
    .experience-mark { font-size: .9rem; }
    .trust-icon svg {
        width: 25px;
        height: 25px;
    }

    .about-showcase,
    .clients-section {
        padding: 24px 21px;
    }
    .about-showcase h1 {
        font-size: 1.28rem;
    }
    .about-intro {
        font-size: 1rem;
    }

    .clients-section { padding: 20px 18px 22px; }
    .clients-divider { width: min(300px, 88%); margin-bottom: 15px; }
    .clients-divider__icon { width: 38px; height: 38px; margin: 0 11px; }
    .clients-divider__icon svg { width: 26px; height: 26px; }
    .clients-more { margin-top: 11px; }
    .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .client-logo { min-height: 76px; padding: 12px 10px; }
    .client-logo img { max-height: 38px; }
}