:root {
    --orange: #ff8a00;
    --blue: #007bff;
    --dark-blue: #0056b3;
    --footer-bg: #343a40;
    --white: #ffffff;
    --text-dark: #333;
    --text-light: #fff;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --border-radius: 20px;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--white);
    color: var(--text-dark);
}

.page-wrapper {
    overflow-x: hidden;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h2 {
    font-size: 48px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
}

/* Header */
header {
    background-color: var(--orange);
    padding: 20px 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 900;
    font-size: 24px;
    color: var(--white);
    background-color: var(--blue);
    padding: 5px 10px;
    border-radius: 8px;
}

nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
nav a { text-decoration: none; color: var(--white); font-weight: bold; font-size: 16px; padding: 10px 15px; border-radius: 25px; transition: background-color 0.3s; }
nav a.active, nav a:hover { background-color: var(--white); color: var(--blue); }

/* Card */
.card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 30px;
    text-align: center;
}

/* Hero Section */
.hero {
    background-color: var(--orange);
    padding: 150px 0 120px 0;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    z-index: 5;
}

.hero-character {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-125%);
    height: 380px;
    z-index: 2;
}

.card-container { display: flex; justify-content: flex-end; gap: 30px; }
.hero-card { width: 320px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.hero-card h2 { font-size: 24px; font-weight: 900; margin-top: 0; min-height: 85px; }
.správa-logo { width: 200px; margin: 20px 0; }
.partner-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: center; margin: 15px 0; }
.partner-logos img { max-width: 70px; justify-self: center; }

.btn { text-decoration: none; color: var(--white); padding: 15px 30px; border-radius: 30px; font-weight: bold; display: inline-block; transition: background-color 0.3s; border: none; cursor: pointer; font-size: 16px; }
.btn-blue { background-color: var(--blue); }
.btn-blue:hover { background-color: var(--dark-blue); }

/* Blue Zone 1 */
.blue-zone {
    background-color: var(--blue);
    margin-top: -13.5vw;
    padding-top: 13.5vw;
    position: relative;
    z-index: 4;
    clip-path: polygon(0 0, 100% 12%, 100% 90%, 0 100%);
}

.stats h1 { font-size: 48px; font-weight: 900; margin-bottom: 40px; color: var(--text-light); text-align: center;}
.stats-container { display: flex; justify-content: center; gap: 30px; align-items: stretch; }
.stat-card { width: 350px; color: var(--text-dark); }
.trophy { font-size: 60px; }
.main-stat-text { font-size: 20px; margin: 10px 0; }
.main-stat-text strong { font-size: 32px; font-weight: 900; }
.people-icons { font-size: 24px; margin: 20px 0 10px; }
.people-icons .dimmed { opacity: 0.3; }
.people-text { font-size: 14px; font-weight: bold; }
.percentage { font-size: 120px; font-weight: 900; color: var(--blue); line-height: 1; }
.percentage-text { font-size: 22px; font-weight: bold; margin-top: 15px; }
.footnotes { font-size: 11px; color: var(--text-light); opacity: 0.8; margin-top: 40px; text-align: center; }
.footnotes p { margin: 2px 0; }

.numbers { padding: 40px 0 80px 0; text-align: center; }
.numbers h2 { color: var(--white); }
.numbers-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.number-item { background-color: var(--white); color: var(--blue); padding: 15px 30px; border-radius: 30px; font-size: 18px; font-weight: bold; box-shadow: var(--shadow); }
.number-item.wide { flex-basis: 100%; max-width: 500px; margin-top: 10px; }

.jizda { padding: 40px 0 150px 0; }
.jizda h2 { color: var(--white); }
.jizda-images { display: flex; justify-content: center; gap: 30px; }
.jizda-images img { width: 48%; border-radius: var(--border-radius); box-shadow: var(--shadow); }

/* Orange Zone 1 */
.orange-zone {
    background: var(--orange);
    position: relative;
    z-index: 3;
    margin-top: -14vw;
    padding-top: 14vw;
}
.reference { padding: 80px 0 80px 0; }
.reference h2 { color: var(--white); }
.reference-container { display: flex; align-items: center; justify-content: center; gap: 20px; }
.reference-card { text-align: left; width: 45%; color: var(--text-dark); position: relative; padding-top: 50px; }
.quote-mark { font-size: 120px; font-weight: 900; color: var(--blue); position: absolute; top: -40px; left: 20px; line-height: 1; }
.reference-card p:first-of-type { font-size: 22px; font-weight: bold; margin-bottom: 15px; }
.reference-card .quote-author { font-size: 14px; color: #777; }
.reference-card img { max-width: 150px; margin-top: 20px; }
.arrow { font-size: 50px; color: white; cursor: pointer; user-select: none; }

/* Blue Zone 2 */
.blue-zone-2 {
    background: var(--blue);
    position: relative;
    z-index: 2;
    clip-path: polygon(0 12%, 100% 0, 100% 88%, 0% 100%);
    margin-top: -12vw;
    padding-top: 12vw;
}
.pecovat { padding: 80px 0 150px 0; }
.pecovat h2 { color: var(--white); }
.pecovat-card { display: flex; justify-content: space-around; align-items: center; padding: 40px; max-width: 800px; margin: 0 auto; }
.pecovat-text { text-align: left; }
.pecovat-text h3 { font-size: 28px; font-weight: 900; line-height: 1.2; margin-top: 0; }
.pecovat-text .phone { font-size: 24px; font-weight: bold; margin: 20px 0 5px 0; }
.pecovat-text .email { font-size: 24px; font-weight: bold; margin: 0; }
.pecovat-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 5px solid var(--white); box-shadow: var(--shadow); }

/* Orange Zone 2 */
.orange-zone-2 {
    background: var(--orange);
    position: relative;
    z-index: 1;
    margin-top: -13.5vw;
    padding-top: 13.5vw;
}
.projekty { padding: 80px 0; }
.projekty h2 { color: var(--white); }
.projekty-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: center; justify-items: center; max-width: 900px; margin: 0 auto; padding: 40px; }
.projekty-card img { max-width: 120px; }

/* Footer */
footer {
    background-color: var(--footer-bg);
    color: var(--text-light);
    padding: 60px 0 20px 0;
}
.footer-grid { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.footer-col { display: flex; flex-direction: column; }
.footer-col h4 { font-size: 18px; margin-bottom: 15px; }
.footer-col a { color: #ccc; text-decoration: none; margin-bottom: 10px; transition: color 0.3s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { text-align: center; border-top: 1px solid #555; padding-top: 20px; font-size: 14px; color: #aaa; }