/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #1e1e1e;
    counter-reset: line;
    padding-left: 50px;
    position: relative;
}

.line-numbers {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #252526;
    border-right: 1px solid #333;
    z-index: 1;
    overflow: hidden;
}

.line-numbers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.03) 50%);
    background-size: 100% 3rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* Hero sekce */
#hero {
    background: #1e1e1e;
    color: #4ec9b0;
    padding: 100px 0;
    border-bottom: 1px solid #333;
    position: relative;
}

#hero::before {
    content: '/**';
    position: absolute;
    top: 40px;
    left: 20px;
    color: #608b4e;
    font-size: 1.2rem;
    opacity: 0.7;
}

#hero::after {
    content: '*/';
    position: absolute;
    bottom: 40px;
    right: 20px;
    color: #608b4e;
    font-size: 1.2rem;
    opacity: 0.7;
}

#hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    margin-left: 60px;
    font-weight: 700;
    color: #569cd6;
}
#hero p {
    margin-left: 60px;
}

#hero .subtitle {
    font-size: 1.3rem;
    margin-bottom: 30px;
    color: #ce9178;
    position: relative;
    display: inline-block;
}

#hero .subtitle::before {
    content: '// ';
    color: #608b4e;
}

.cta-button {
    display: inline-block;
    background: #264f78;
    color: #dcdcdc;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid #3c3c3c;
    font-family: 'JetBrains Mono', monospace;
    position: relative;
    margin: 0 110px; /* Přidán vnější okraj pro více prostoru */
}

.cta-button::before {
    content: 'function() {';
    position: absolute;
    left: -110px; /* Upraveno pro lepší pozici */
    color: #569cd6;
    font-size: 0.9rem;
    opacity: 0.7;
    white-space: nowrap; /* Zajistí, že text zůstane na jednom řádku */
}

.cta-button::after {
    content: '}';
    position: absolute;
    right: -20px; /* Upraveno pro lepší pozici */
    color: #569cd6;
    font-size: 0.9rem;
    opacity: 0.7;
}

.cta-button:hover {
    background: #1177bb;
    box-shadow: 0 0 10px rgba(77, 166, 255, 0.4);
}

/* Navigace */
#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: #252526;
    border-bottom: 1px solid #333;
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

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

#navbar a {
    text-decoration: none;
    color: #9cdcfe;
    margin: 0 15px;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

#navbar a::before {
    content: '.';
    position: absolute;
    left: -10px;
    color: #569cd6;
}

#navbar a:hover {
    color: #c586c0;
    text-shadow: 0 0 5px rgba(197, 134, 192, 0.5);
}

/* Sekce */
section {
    padding: 80px 0;
    position: relative;
}

section:nth-child(even) {
    background: #252526;
}

section::before {
    content: attr(id) ' {';
    position: absolute;
    top: 20px;
    left: 20px;
    color: #569cd6;
    font-size: 1rem;
    opacity: 0.7;
}

section::after {
    content: '}';
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #569cd6;
    font-size: 1rem;
    opacity: 0.7;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #4ec9b0;
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

h2::before {
    content: '/* ';
    color: #608b4e;
    position: absolute;
    left: -20px;
}

h2::after {
    content: ' */';
    color: #608b4e;
    position: absolute;
    right: -20px;
}

/* Služby grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background: #1e1e1e;
    padding: 30px 20px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #3c3c3c;
    transition: all 0.3s ease;
    position: relative;
}

.service-card::before {
    content: 'class {';
    position: absolute;
    top: 10px;
    left: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.service-card::after {
    content: '}';
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.service-card:hover {
    border-color: #569cd6;
    box-shadow: 0 0 15px rgba(86, 156, 214, 0.3);
}

.service-card .icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.service-card .icon::before {
    content: 'const icon = ';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    color: #9cdcfe;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover .icon::before {
    opacity: 1;
}

.service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #4ec9b0;
}

/* Výhody */
.benefits-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Moje práce */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.work-card {
    background: #1e1e1e;
    padding: 30px 20px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #3c3c3c;
    transition: all 0.3s ease;
    position: relative;
}

.work-card::before {
    content: 'package {'; 
    position: absolute;
    top: 10px;
    left: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.work-card::after {
    content: '}';
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.work-card:hover {
    border-color: #569cd6;
    box-shadow: 0 0 15px rgba(86, 156, 214, 0.3);
}

.work-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #4ec9b0;
}

.work-icon {
    font-size: 2.5rem;
    margin: 15px 0;
}

.work-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.work-links a {
    display: inline-block;
    padding: 8px 15px;
    background: #2d2d2d;
    color: #9cdcfe;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #3c3c3c;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.work-links a:hover {
    background: #264f78;
    color: #ffffff;
    border-color: #569cd6;
}

/* Recenze */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.review {
    background: #1e1e1e;
    padding: 25px;
    border-radius: 4px;
    border: 1px solid #3c3c3c;
    position: relative;
    transition: all 0.3s ease;
}

.review::before {
    content: 'review => {'; 
    position: absolute;
    top: 10px;
    left: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.review::after {
    content: '};';
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.review:hover {
    border-color: #4ec9b0;
    box-shadow: 0 0 15px rgba(78, 201, 176, 0.3);
}

.review-content {
    margin-bottom: 15px;
}

.review-content p {
    color: #d4d4d4;
    font-style: italic;
    line-height: 1.8;
    position: relative;
    padding: 0 15px;
}

.review-content p::before {
    content: '"';
    font-size: 1.5rem;
    color: #608b4e;
    position: absolute;
    left: -5px;
    top: -5px;
}

.review-content p::after {
    content: '"';
    font-size: 1.5rem;
    color: #608b4e;
    position: absolute;
    right: -5px;
    bottom: -15px;
}

.review-author p {
    text-align: right;
    color: #9cdcfe;
    font-weight: 500;
}

/* GDPR Cookie lišta */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e1e1e;
    border-top: 1px solid #3c3c3c;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    font-family: 'JetBrains Mono', monospace;
    transition: transform 0.3s ease;
}

.cookie-consent.hidden {
    transform: translateY(100%);
}

.cookie-text {
    flex: 1;
    color: #d4d4d4;
    padding-right: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    position: relative;
}

.cookie-text::before {
    content: '// GDPR';
    color: #608b4e;
    margin-right: 10px;
    font-weight: 700;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    background: #264f78;
    border: 1px solid #3c3c3c;
    color: #d4d4d4;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.cookie-btn:hover {
    background: #1177bb;
    box-shadow: 0 0 10px rgba(77, 166, 255, 0.4);
}

.cookie-btn.accept {
    background: #4ec9b0;
    color: #1e1e1e;
}

.cookie-btn.accept:hover {
    background: #5fdfbf;
    box-shadow: 0 0 10px rgba(95, 223, 191, 0.4);
}

.benefit {
    background: #1e1e1e;
    padding: 25px;
    border-radius: 4px;
    border: 1px solid #3c3c3c;
    position: relative;
}

.benefit::before {
    content: 'const benefit = {';
    position: absolute;
    top: 10px;
    left: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.benefit::after {
    content: '};';
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #569cd6;
    font-size: 0.8rem;
    opacity: 0.7;
}

.benefit h3 {
    margin-bottom: 15px;
    color: #9cdcfe;
    position: relative;
}

.benefit h3::after {
    content: ',';
    position: absolute;
    right: -5px;
    bottom: 0;
    color: #d4d4d4;
}

.benefit p {
    color: #ce9178;
    position: relative;
    padding-left: 10px;
    transition: all 0.3s ease;
}

.benefit:hover p {
    color: #e6b8a8; /* Světlejší barva textu při najetí */
    text-shadow: 0 0 3px rgba(206, 145, 120, 0.4); /* Jemný světelný efekt */
}

/* Kontakt */
#contact {
    background: #1e1e1e;
    color: #d4d4d4;
    border-top: 1px solid #3c3c3c;
}

.tech-skills {
    margin-top: 40px;
    padding: 20px;
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    position: relative;
}

.tech-skills::before {
    content: 'const skills = [';
    position: absolute;
    top: -10px;
    left: 20px;
    color: #569cd6;
    font-size: 0.9rem;
    background: #1e1e1e;
    padding: 0 10px;
}

.tech-skills::after {
    content: '];';
    position: absolute;
    bottom: -10px;
    right: 20px;
    color: #569cd6;
    font-size: 0.9rem;
    background: #1e1e1e;
    padding: 0 10px;
}

.tech-skills h3 {
    color: #4ec9b0;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.tech-skills p {
    color: #ce9178;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.contact-info {
    position: relative;
    padding: 20px;
    border: 1px dashed #3c3c3c;
    display: inline-block;
    margin: 0 auto;
}

.contact-info::before {
    content: 'const contact = {';
    position: absolute;
    top: -10px;
    left: 10px;
    color: #569cd6;
    font-size: 0.9rem;
    background: #1e1e1e;
    padding: 0 5px;
}

.contact-info::after {
    content: '};';
    position: absolute;
    bottom: -10px;
    right: 10px;
    color: #569cd6;
    font-size: 0.9rem;
    background: #1e1e1e;
    padding: 0 5px;
}

.contact-info p {
    font-size: 1.1rem;
    margin: 10px 0;
    color: #ce9178;
    position: relative;
}

.contact-info a {
    color: #569cd6;
    text-decoration: none;
}

/* Jazykové přepínače */
.lang-switch {
    display: flex;
    gap: 5px;
    position: relative;
    margin-left: 80px; /* Přidáno pro vytvoření prostoru pro text */
    padding-left: 10px; /* Přidán malý odsazení tlačítek */
}

.lang-switch::before {
    content: 'setLanguage(';
    position: absolute;
    left: -95px; /* Odsazeno více doleva */
    top: 10px;
    color: #569cd6;
    font-size: 0.9rem;
}

.lang-switch::after {
    content: ');';
    position: absolute;
    right: -25px;
    top: 10px;
    color: #569cd6;
    font-size: 0.9rem;
}

.lang-btn {
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    color: #ce9178;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'JetBrains Mono', monospace;
}

.lang-btn:hover {
    background: #2d2d2d;
    border-color: #569cd6;
}

.lang-btn.active {
    background: #264f78;
    color: #dcdcdc;
    border-color: #569cd6;
}

.contact-details {
    margin-top: 20px;
    opacity: 0.8;
    font-family: 'JetBrains Mono', monospace;
    color: #608b4e;
    position: relative;
    display: inline-block;
    padding: 10px;
}

.contact-details::before {
    content: '// ------';
    position: absolute;
    top: -15px;
    left: 0;
    color: #608b4e;
}

.contact-details p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Kódové řádky */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: #252526;
    border-right: 1px solid #333;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: transparent;
    z-index: 5;
    pointer-events: none;
}

/* Kurzor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: #dcdcdc;
    margin-left: 4px;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
}

/* Barevné zvýraznění syntaxe */
.syntax-keyword {
    color: #569cd6;
}

.syntax-string {
    color: #ce9178;
}

.syntax-comment {
    color: #608b4e;
}

.syntax-function {
    color: #dcdcaa;
}

.syntax-variable {
    color: #9cdcfe;
}

.syntax-type {
    color: #4ec9b0;
}

/* Čísla řádků */
for (var i = 1; i <= 100; i++) {
    body::after {
        content: '';
    }
}

for (var i = 1; i <= 100; i++) {
    section:nth-child(n)::before {
        counter-increment: line;
        content: counter(line);
        position: absolute;
        left: -30px;
        width: 30px;
        text-align: right;
        color: #858585;
        font-size: 0.8rem;
    }
}

/* Světelné efekty */
.service-card, .benefit {
    position: relative;
    overflow: hidden;
}

.service-card::before, .benefit::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(86, 156, 214, 0.1) 100%);
    transition: all 0.6s ease;
}

.service-card:hover::before, .benefit:hover::before {
    top: 0;
    left: 0;
}

/* Responzivita */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 2rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    #navbar .container {
        flex-direction: column;
        gap: 15px;
    }

    .lang-switch {
        margin-top: 10px;
    }

    body::before, body::after {
        width: 20px;
    }

    section:nth-child(n)::before {
        left: -15px;
        width: 15px;
        font-size: 0.7rem;
    }
}