body, html {
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
height: 100%;
overflow: hidden; 
}

body.dark-theme {
background-color: #1a1d22; 
color: #f0f2f5; 
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-image: 
    radial-gradient(circle at 15% 25%, rgba(74, 144, 226, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(74, 144, 226, 0.06) 0%, transparent 50%),
    repeating-linear-gradient(
        -45deg,
        rgba(74, 144, 226, 0.03),
        rgba(74, 144, 226, 0.03) 1px,
        transparent 1px,
        transparent 60px
    );
background-repeat: no-repeat, no-repeat, repeat;
}

.page-frame {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2.5rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}

.logo img {
height: 40px; 
width: auto;
opacity: 0.9;
transition: opacity 0.3s ease;
}

.logo img:hover {
opacity: 1;
}

.social-links a {
color: #a0a0a0;
font-size: 1.5rem;
margin-left: 1.5rem;
text-decoration: none;
transition: all 0.3s ease;
}

.social-links a:hover {
color: #4A90E2; 
transform: scale(1.15) translateY(-2px);
}

.hero{
position: relative; 
z-index: 5; 
animation: fadeInContent 1s ease-out 0.5s forwards;
opacity: 0;
transform: translateY(0); 
margin-top: 4rem; 
}

.hero h1 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 5rem; 
color: #4A90E2; 
margin: 0;
text-shadow: 0 0 15px rgba(74, 144, 226, 0.8),
            0 0 30px rgba(74, 144, 226, 0.6);
}

.hero p {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 1.6rem; 
color: #ffffff; 
margin: 2rem 0 0;
letter-spacing: 0.5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.hero-photo {
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
max-width: 1100px; 
z-index: 1; 
opacity: 0;
transform: translate(-50%, 50px);
animation: riseUpPhoto 1.2s ease-out 0.2s forwards;
}

.hero-photo::before {
content: '';
position: absolute;
width: 105%; 
height: 600px; 
left: 50%;
bottom: 0; 
transform: translateX(-50%);
border-top: 2px solid #4A90E2;
border-radius: 50% 50% 0 0;
box-shadow: 0 0 20px rgba(74, 144, 226, 0.8);
z-index: -1; 
}

.hero-photo img {
width: 100%;
height: auto;
display: block;
filter: brightness(0.5); 
}

@keyframes fadeInContent {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes riseUpPhoto {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.sides {
position: fixed;
width: 100%;
left: 0;
top: 60%; 
transform: translateY(-50%);
padding: 0 5rem; 
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10; 
}

.roles {
text-align: left;
transition: transform 0.4s ease;
}

.roles:hover {
transform: scale(1.03);
}

.roles span {
display: block;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #a0a0a0; 
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 1.3rem; 
margin-bottom: 0.75rem; 
transition: color 0.4s ease, letter-spacing 0.4s ease;
}

.roles:hover span {
color: #f0f2f5;
letter-spacing: 2px;
}

.button a {
font-family: 'Syne', sans-serif; 
font-weight: 700;
color: #f0f2f5; 
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.1rem; 
padding: 1.2rem 2rem; 
border: 2px solid rgba(240, 242, 245, 0.5); 
border-radius: 4px;
position: relative; 
z-index: 1;
overflow: hidden; 
transition: color 0.4s ease, border-color 0.4s ease;
}

.button a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4A90E2;
z-index: -1;
transform: scaleX(0); 
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.button a:hover {
border-color: #4A90E2; 
color: #ffffff;
}

.button a:hover::before {
transform: scaleX(1);
}

@media (max-width: 991.98px) { /*mediaaa*/
body.dark-theme {
display: block;
min-height: 100vh;
padding-bottom: 10rem; 
}

.page-frame {
position: relative;
padding: 1.5rem;
}

.logo img {
height: 30px;
}

.social-links a {
font-size: 1.3rem;
margin-left: 1rem;
}

.hero-photo {
z-index: -1; 
animation: riseUpPhotoMobile 1.2s ease-out 0.2s forwards;
}

.hero-photo img {
filter: brightness(0.3); /* Ještě tmavší, aby byl text čitelný */
}

@keyframes riseUpPhotoMobile {
to {
opacity: 1;
transform: translate(-50%, 0);
}
}

.hero {
margin-top: 3rem;
animation: none; 
opacity: 1;
transform: none;
}

.hero h1 {
font-size: 2.8rem;
line-height: 1.2;
}

.hero p {
font-size: 1.2rem;
margin-top: 1.5rem;
max-width: 90%; 
display: inline-block; 
    }

.sides {
position: relative;
top: auto;
left: auto;
transform: none;
display: block; 
width: 100%;
padding: 0 1.5rem;
margin-top: 3rem; 
}

.roles {
text-align: center; 
}

.roles span {
font-size: 1rem;
}

.button {
position: fixed; 
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 1.5rem;
background: linear-gradient(to top, #1a1d22 50%, transparent 100%);
} }